feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/Slider.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Slider", {
+    enumerable: true,
+    get: function() {
+        return Slider;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSlider = require("./useSlider");
+const _renderSlider = require("./renderSlider");
+const _useSliderStylesstyles = require("./useSliderStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Slider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSlider.useSlider_unstable)(props, ref);
+    (0, _useSliderStylesstyles.useSliderStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSliderStyles_unstable')(state);
+    return (0, _renderSlider.renderSlider_unstable)(state);
+});
+Slider.displayName = 'Slider';

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles.styles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Slider component allows users to quickly select a value by dragging a thumb across a rail.\n */\nexport const Slider: ForwardRefComponent<SliderProps> = React.forwardRef((props, ref) => {\n  const state = useSlider_unstable(props, ref);\n\n  useSliderStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSliderStyles_unstable')(state);\n\n  return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"names":["React","useSlider_unstable","renderSlider_unstable","useSliderStyles_unstable","useCustomStyleHook_unstable","Slider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AACHJ,OAAOK,WAAW,GAAG"}

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/Slider.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/Slider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/Slider.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n  /**\n   * The root of the Slider.\n   * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n   * All other native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The Slider's base. It is used to visibly display the min and max selectable values.\n   */\n  rail: NonNullable<Slot<'div'>>;\n\n  /**\n   * The draggable icon used to select a given value from the Slider.\n   * This is the element containing `role = 'slider'`.\n   */\n  thumb: NonNullable<Slot<'div'>>;\n\n  /**\n   * The hidden input for the Slider.\n   * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   *\n   */\n  input: NonNullable<Slot<'input'>> & {\n    /**\n     * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n     * when `vertical` is set to true.\n     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n     * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n     */\n    orient?: 'horizontal' | 'vertical';\n  };\n};\n\nexport type SliderProps = Omit<\n  ComponentProps<Partial<SliderSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * The starting value for an uncontrolled Slider.\n   * Mutually exclusive with `value` prop.\n   */\n  defaultValue?: number;\n\n  /**\n   *  Whether to render the Slider as disabled.\n   *\n   * @default `false` (renders enabled)\n   */\n  disabled?: boolean;\n\n  /**\n   * The max value of the Slider.\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * The min value of the Slider.\n   * @default 0\n   */\n  min?: number;\n\n  /**\n   * The size of the Slider.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n   * will snap to the closest available value. This must be a positive value.\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * The current value of the controlled Slider.\n   * Mutually exclusive with `defaultValue` prop.\n   */\n  value?: number;\n\n  /**\n   * Render the Slider in a vertical orientation, smallest value on the bottom.\n   * @default `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * Triggers a callback when the value has been changed. This will be called on every individual step.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;\n};\n\nexport type SliderOnChangeData = {\n  value: number;\n};\n\n/**\n * Slider base props, excluding design-related props like size.\n * Note: vertical is kept as it affects aria-orientation behavior.\n */\nexport type SliderBaseProps = Omit<SliderProps, 'size'>;\n\nexport type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;\n\n/**\n * Slider base state, excluding design-related state like size.\n */\nexport type SliderBaseState = Omit<SliderState, 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/index.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Slider: function() {
+        return _Slider.Slider;
+    },
+    renderSlider_unstable: function() {
+        return _renderSlider.renderSlider_unstable;
+    },
+    sliderCSSVars: function() {
+        return _useSliderStylesstyles.sliderCSSVars;
+    },
+    sliderClassNames: function() {
+        return _useSliderStylesstyles.sliderClassNames;
+    },
+    useSliderBase_unstable: function() {
+        return _useSlider.useSliderBase_unstable;
+    },
+    useSliderState_unstable: function() {
+        return _useSliderState.useSliderState_unstable;
+    },
+    useSliderStyles_unstable: function() {
+        return _useSliderStylesstyles.useSliderStyles_unstable;
+    },
+    useSlider_unstable: function() {
+        return _useSlider.useSlider_unstable;
+    }
+});
+const _Slider = require("./Slider");
+const _renderSlider = require("./renderSlider");
+const _useSlider = require("./useSlider");
+const _useSliderState = require("./useSliderState");
+const _useSliderStylesstyles = require("./useSliderStyles.styles");

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { Slider } from './Slider';\nexport type {\n  SliderBaseProps,\n  SliderBaseState,\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n} from './Slider.types';\nexport { renderSlider_unstable } from './renderSlider';\nexport { useSlider_unstable, useSliderBase_unstable } from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles.styles';\n"],"names":["Slider","renderSlider_unstable","useSlider_unstable","useSliderBase_unstable","useSliderState_unstable","sliderClassNames","sliderCSSVars","useSliderStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;6BAAM;;;eASNC,mCAAqB;;iBAGU;eAAbK;;;eAAlBD,uCAAgB;;;eAFIF,iCAAsB;;;eAC1CC,uCAAuB;;;eACUG,+CAAwB;;;eAFzDL,6BAAkB;;;wBAVJ,WAAW;8BASI,iBAAiB;2BACI,cAAc;gCACjC,mBAAmB;uCACe,2BAA2B"}

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/renderSlider.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderSlider_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderSlider_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderSlider_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.rail, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.thumb, {})
+        ]
+    });
+};

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/renderSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/renderSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SliderBaseState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderBaseState): JSXElement => {\n  assertSlots<SliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSlider_unstable","state","root","input","rail","thumb"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IAEzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/useSlider.js

@@ -0,0 +1,80 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useSliderBase_unstable: function() {
+        return useSliderBase_unstable;
+    },
+    useSlider_unstable: function() {
+        return useSlider_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactfield = require("@fluentui/react-field");
+const _reactutilities = require("@fluentui/react-utilities");
+const _useSliderState = require("./useSliderState");
+const _reacttabster = require("@fluentui/react-tabster");
+const useSlider_unstable = (props, ref)=>{
+    const { size = 'medium', ...baseProps } = props;
+    const baseState = useSliderBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        size
+    };
+};
+const useSliderBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true
+    });
+    const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'onChange'
+        ]
+    });
+    const { disabled, vertical, root, input, rail, thumb } = props;
+    const state = {
+        disabled,
+        vertical,
+        components: {
+            input: 'input',
+            rail: 'div',
+            root: 'div',
+            thumb: 'div'
+        },
+        root: _reactutilities.slot.always(root, {
+            defaultProps: nativeProps.root,
+            elementType: 'div'
+        }),
+        input: _reactutilities.slot.always(input, {
+            defaultProps: {
+                id: (0, _reactutilities.useId)('slider-', props.id),
+                ref,
+                ...nativeProps.primary,
+                type: 'range',
+                orient: vertical ? 'vertical' : undefined
+            },
+            elementType: 'input'
+        }),
+        rail: _reactutilities.slot.always(rail, {
+            elementType: 'div'
+        }),
+        thumb: _reactutilities.slot.always(thumb, {
+            elementType: 'div'
+        })
+    };
+    state.root.ref = (0, _reactutilities.useMergedRefs)(state.root.ref, (0, _reacttabster.useFocusWithin)());
+    (0, _useSliderState.useSliderState_unstable)(state, props);
+    return state;
+};

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/useSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/useSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderBaseProps, SliderBaseState, SliderProps, SliderState } from './Slider.types';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n  const { size = 'medium', ...baseProps } = props;\n\n  const baseState = useSliderBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * Base hook for Slider component, which manages state related to slots structure, ARIA attributes,\n * keyboard handling, and controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Slider component.\n * @param ref - User provided ref to be passed to the Slider input element.\n */\nexport const useSliderBase_unstable = (props: SliderBaseProps, ref: React.Ref<HTMLInputElement>): SliderBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange'],\n  });\n\n  const {\n    disabled,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: SliderBaseState = {\n    disabled,\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n        orient: vertical ? 'vertical' : undefined,\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());\n\n  useSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useId","useMergedRefs","slot","useSliderState_unstable","useFocusWithin","useSlider_unstable","props","ref","size","baseProps","baseState","useSliderBase_unstable","supportsLabelFor","nativeProps","primarySlotTagName","excludedPropNames","disabled","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type","orient","undefined"],"mappings":"AAAA;;;;;;;;;;;;0BA2Bac;eAAAA;;IAlBAN,kBAAAA;;;;;iEAPU,QAAQ;4BACe,wBAAwB;gCACA,4BAA4B;gCAC1D,mBAAmB;8BAE5B,0BAA0B;AAElD,2BAA2B,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAE1C,MAAMI,YAAYC,uBAAuBF,WAAWF;IAEpD,OAAO;QACL,GAAGG,SAAS;QACZF;IACF;AACF,EAAE;AASK,+BAA+B,CAACF,OAAwBC;IAC7D,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEM,kBAAkB;IAAK;IAEtE,MAAMC,kBAAcd,yCAAAA,EAA0B;QAC5CO;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;SAAW;IACjC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGf;IAEJ,MAAMgB,QAAyB;QAC7BN;QACAC;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMhB,oBAAAA,CAAKsB,MAAM,CAACN,MAAM;YACtBO,cAAcZ,YAAYK,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOjB,oBAAAA,CAAKsB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAI3B,qBAAAA,EAAM,WAAWM,MAAMqB,EAAE;gBAC7BpB;gBACA,GAAGM,YAAYe,OAAO;gBACtBC,MAAM;gBACNC,QAAQb,WAAW,aAAac;YAClC;YACAL,aAAa;QACf;QACAN,MAAMlB,oBAAAA,CAAKsB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOnB,oBAAAA,CAAKsB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACX,GAAG,OAAGN,6BAAAA,EAAcqB,MAAMJ,IAAI,CAACX,GAAG,MAAEH,4BAAAA;QAE/CD,uCAAAA,EAAwBmB,OAAOhB;IAE/B,OAAOgB;AACT,EAAE"}

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/useSliderState.js

@@ -0,0 +1,63 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSliderState_unstable", {
+    enumerable: true,
+    get: function() {
+        return useSliderState_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useSliderStylesstyles = require("./useSliderStyles.styles");
+const { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = _useSliderStylesstyles.sliderCSSVars;
+const getPercent = (value, min, max)=>{
+    return max === min ? 0 : (value - min) / (max - min) * 100;
+};
+const useSliderState_unstable = (state, props)=>{
+    'use no memo';
+    const { min = 0, max = 100, step } = props;
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const [currentValue, setCurrentValue] = (0, _reactutilities.useControllableState)({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: 0
+    });
+    const clampedValue = (0, _reactutilities.clamp)(currentValue, min, max);
+    const valuePercent = getPercent(clampedValue, min, max);
+    const inputOnChange = state.input.onChange;
+    const propsOnChange = props.onChange;
+    const onChange = (0, _reactutilities.useEventCallback)((ev)=>{
+        const newValue = Number(ev.target.value);
+        setCurrentValue((0, _reactutilities.clamp)(newValue, min, max));
+        if (inputOnChange && inputOnChange !== propsOnChange) {
+            inputOnChange(ev);
+        } else if (propsOnChange) {
+            propsOnChange(ev, {
+                value: newValue
+            });
+        }
+    });
+    const stepPercent = step && step > 0 ? `${step * 100 / (max - min)}%` : undefined;
+    const rootVariables = {
+        [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
+        [sliderProgressVar]: `${valuePercent}%`,
+        // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18
+        ...stepPercent !== undefined && {
+            [sliderStepsPercentVar]: stepPercent
+        }
+    };
+    // Root props
+    state.root.style = {
+        ...rootVariables,
+        ...state.root.style
+    };
+    // Input Props
+    state.input.value = clampedValue;
+    state.input.onChange = onChange;
+    return state;
+};

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/useSliderState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/useSliderState.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles.styles';\nimport type { SliderBaseState, SliderBaseProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderBaseState, props: SliderBaseProps): SliderBaseState => {\n  'use no memo';\n\n  const { min = 0, max = 100, step } = props;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: 0,\n  });\n  const clampedValue = clamp(currentValue, min, max);\n  const valuePercent = getPercent(clampedValue, min, max);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = props.onChange;\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n    const newValue = Number(ev.target.value);\n    setCurrentValue(clamp(newValue, min, max));\n\n    if (inputOnChange && inputOnChange !== propsOnChange) {\n      inputOnChange(ev);\n    } else if (propsOnChange) {\n      propsOnChange(ev, { value: newValue });\n    }\n  });\n\n  const stepPercent = step && step > 0 ? `${(step * 100) / (max - min)}%` : undefined;\n  const rootVariables = {\n    [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [sliderProgressVar]: `${valuePercent}%`,\n    // Set the sliderStepsPercentVar only if defined - fixes SSR errors in React 18\n    ...(stepPercent !== undefined && {\n      [sliderStepsPercentVar]: stepPercent,\n    }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","step","dir","currentValue","setCurrentValue","defaultState","defaultValue","initialState","clampedValue","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","stepPercent","undefined","rootVariables","vertical","root","style"],"mappings":"AAAA;;;;;;;;eAcac;;;;iEAZU,QAAQ;gCAC+B,4BAA4B;qCAC1C,kCAAkC;uCACpD,2BAA2B;AAGzD,MAAM,EAAEP,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH,oCAAAA;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAMD,CAAAA,QAAQC,GAAAA,CAAE,IAAMC,MAAMD,GAAAA,CAAE,GAAM;AAC3D;AAEO,gCAAgC,CAACG,OAAwBC;IAC9D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAM,CAACc,cAAcC,gBAAgB,OAAGlB,oCAAAA,EAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,mBAAevB,qBAAAA,EAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,eAAuDzB,gCAAAA,EAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,yBAAAA,EAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,cAAcjB,QAAQA,OAAO,IAAI,GAAIA,OAAO,MAAQJ,CAAAA,MAAMD,GAAAA,CAAE,CAAG,CAAC,CAAC,GAAGuB;IAC1E,MAAMC,gBAAgB;QACpB,CAAC3B,mBAAmB,EAAEM,MAAMsB,QAAQ,GAAG,SAASnB,QAAQ,QAAQ,UAAU;QAC1E,CAACV,kBAAkB,EAAE,GAAGiB,aAAa,CAAC,CAAC;QACvC,+EAA+E;QAC/E,GAAIS,gBAAgBC,aAAa;YAC/B,CAAC5B,sBAAsB,EAAE2B;QAC3B,CAAC;IACH;IAEA,aAAa;IACbnB,MAAMuB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGrB,MAAMuB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdxB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/useSliderStyles.styles.js

@@ -0,0 +1,681 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    sliderCSSVars: function() {
+        return sliderCSSVars;
+    },
+    sliderClassNames: function() {
+        return sliderClassNames;
+    },
+    useSliderStyles_unstable: function() {
+        return useSliderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const sliderClassNames = {
+    root: 'fui-Slider',
+    rail: 'fui-Slider__rail',
+    thumb: 'fui-Slider__thumb',
+    input: 'fui-Slider__input'
+};
+// Internal CSS variables
+const thumbPositionVar = `--fui-Slider__thumb--position`;
+const sliderCSSVars = {
+    sliderDirectionVar: `--fui-Slider--direction`,
+    sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,
+    sliderProgressVar: `--fui-Slider--progress`,
+    sliderProgressColorVar: `--fui-Slider__progress--color`,
+    sliderRailSizeVar: `--fui-Slider__rail--size`,
+    sliderRailColorVar: `--fui-Slider__rail--color`,
+    sliderStepsPercentVar: `--fui-Slider--steps-percent`,
+    sliderThumbColorVar: `--fui-Slider__thumb--color`,
+    sliderThumbSizeVar: `--fui-Slider__thumb--size`
+};
+const { sliderDirectionVar, sliderInnerThumbRadiusVar, sliderProgressVar, sliderProgressColorVar, sliderRailSizeVar, sliderRailColorVar, sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar } = sliderCSSVars;
+/**
+ * Styles for the root slot
+ */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        qhf8xq: "f10pi13n",
+        mc9l5x: "fwk3njj",
+        lpbzjs: "f1sdsnyy",
+        Bt984gj: "f122n59",
+        B7hvi0a: "f1oiokrs"
+    },
+    small: {
+        Bi64ftq: "f1agqo6f",
+        Bslxy2k: "f1mmvox9",
+        Ba19x4e: "f1i7ztpd",
+        sshi5w: "f1pha7fy"
+    },
+    medium: {
+        Bi64ftq: "f1a78h9h",
+        Bslxy2k: "fh1udnr",
+        Ba19x4e: "fuok0yf",
+        sshi5w: "f1nxs5xn"
+    },
+    horizontal: {
+        Bf4jedk: "fyvtabn",
+        wkccdc: "fgfd48t",
+        Budl1dq: "f4t5rw1"
+    },
+    vertical: {
+        sshi5w: "f1pzv1zu",
+        wkccdc: "fktlcaf",
+        Budl1dq: "fiadc6h"
+    },
+    enabled: {
+        B7wi8oa: "f4l8x3l",
+        B250r6j: "f671q34",
+        Bpmy4es: "fvfzmw5",
+        Buw9y6v: "faw1t00",
+        Bq939m0: "fxdgx5",
+        gjzr1t: "fii04fa",
+        tg7hqu: "f36hzz8",
+        qhf704: "fdjsfay",
+        Blfvze: "f1fen33d",
+        genz7u: "f1c6b0w1",
+        Brgvh4e: "f1rq9b4z",
+        Bsjyjqp: "f4xxiul"
+    },
+    disabled: {
+        Bpmy4es: "foojseg",
+        B7wi8oa: "f1lgdqhv",
+        B250r6j: "f1veetlj",
+        qhf704: "fn4acdm",
+        Blfvze: "f4s8dx0",
+        genz7u: "f1wil5xy"
+    },
+    focusIndicatorHorizontal: {
+        Brovlpu: "ftqa4ok",
+        B486eqv: "f2hkw1w",
+        Bssx7fj: "f1b1k54r",
+        uh7if5: [
+            "f4ne723",
+            "fqqcjud"
+        ],
+        clntm0: "fh7aioi",
+        Dlk2r6: [
+            "fqqcjud",
+            "f4ne723"
+        ],
+        h6p2u: "f1ufm4qn",
+        I6qiy5: [
+            "f1qnwcb4",
+            "fgrk5zm"
+        ],
+        yzno9d: "fi52z01",
+        By0wis0: [
+            "fgrk5zm",
+            "f1qnwcb4"
+        ],
+        B2j2mmj: "ffht0p2",
+        wigs8: "f1p0ul1q",
+        pbfy6t: "f1c901ms",
+        B0v4ure: "f1alokd7",
+        Byrf0fs: 0,
+        Bsiemmq: 0,
+        Bwckmig: 0,
+        skfxo0: 0,
+        Iidy0u: 0,
+        B98u21t: 0,
+        Bvwlmkc: 0,
+        jo1ztg: 0,
+        Ba1iezr: 0,
+        Blmvk6g: 0,
+        B24cy0v: 0,
+        Bil7v7r: 0,
+        Br3gin4: 0,
+        nr063g: 0,
+        ghq09: 0,
+        Bbgo44z: 0,
+        Bseh09z: "fmj8fco",
+        az1dzo: 0,
+        Ba3ybja: 0,
+        B6352mv: 0,
+        vppk2z: 0,
+        Biaj6j7: "f1iwowo3",
+        B2pnrqr: "f1pffoy2",
+        B29w5g4: [
+            "f1dfga45",
+            "f63jj3o"
+        ],
+        Bhhzhcn: "fs6b7xr",
+        Bec0n69: [
+            "f63jj3o",
+            "f1dfga45"
+        ]
+    },
+    focusIndicatorVertical: {
+        Brovlpu: "ftqa4ok",
+        B486eqv: "f2hkw1w",
+        Bssx7fj: "f1b1k54r",
+        uh7if5: [
+            "f4ne723",
+            "fqqcjud"
+        ],
+        clntm0: "fh7aioi",
+        Dlk2r6: [
+            "fqqcjud",
+            "f4ne723"
+        ],
+        h6p2u: "f1ufm4qn",
+        I6qiy5: [
+            "f1qnwcb4",
+            "fgrk5zm"
+        ],
+        yzno9d: "fi52z01",
+        By0wis0: [
+            "fgrk5zm",
+            "f1qnwcb4"
+        ],
+        B2j2mmj: "ffht0p2",
+        wigs8: "f1p0ul1q",
+        pbfy6t: "f1c901ms",
+        B0v4ure: "f1alokd7",
+        Byrf0fs: 0,
+        Bsiemmq: 0,
+        Bwckmig: 0,
+        skfxo0: 0,
+        Iidy0u: 0,
+        B98u21t: 0,
+        Bvwlmkc: 0,
+        jo1ztg: 0,
+        Ba1iezr: 0,
+        Blmvk6g: 0,
+        B24cy0v: 0,
+        Bil7v7r: 0,
+        Br3gin4: 0,
+        nr063g: 0,
+        ghq09: 0,
+        Bbgo44z: 0,
+        Bseh09z: "fmj8fco",
+        az1dzo: 0,
+        Ba3ybja: 0,
+        B6352mv: 0,
+        vppk2z: 0,
+        Biaj6j7: "f1iwowo3",
+        B2pnrqr: "f1pffoy2",
+        B29w5g4: [
+            "fm5xmfm",
+            "femsgmt"
+        ],
+        Bhhzhcn: "fs6b7xr",
+        Bec0n69: [
+            "femsgmt",
+            "fm5xmfm"
+        ]
+    }
+}, {
+    d: [
+        ".f10pi13n{position:relative;}",
+        ".fwk3njj{display:inline-grid;}",
+        ".f1sdsnyy{touch-action:none;}",
+        ".f122n59{align-items:center;}",
+        ".f1oiokrs{justify-items:center;}",
+        ".f1agqo6f{--fui-Slider__thumb--size:16px;}",
+        ".f1mmvox9{--fui-Slider__inner-thumb--radius:5px;}",
+        ".f1i7ztpd{--fui-Slider__rail--size:2px;}",
+        ".f1pha7fy{min-height:24px;}",
+        ".f1a78h9h{--fui-Slider__thumb--size:20px;}",
+        ".fh1udnr{--fui-Slider__inner-thumb--radius:6px;}",
+        ".fuok0yf{--fui-Slider__rail--size:4px;}",
+        ".f1nxs5xn{min-height:32px;}",
+        ".fyvtabn{min-width:120px;}",
+        ".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}",
+        ".f4t5rw1{grid-template-columns:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}",
+        ".f1pzv1zu{min-height:120px;}",
+        ".fktlcaf{grid-template-rows:1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr;}",
+        ".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}",
+        ".f4l8x3l{--fui-Slider__rail--color:var(--colorNeutralStrokeAccessible);}",
+        ".f671q34{--fui-Slider__progress--color:var(--colorCompoundBrandBackground);}",
+        ".fvfzmw5{--fui-Slider__thumb--color:var(--colorCompoundBrandBackground);}",
+        ".foojseg{--fui-Slider__thumb--color:var(--colorNeutralForegroundDisabled);}",
+        ".f1lgdqhv{--fui-Slider__rail--color:var(--colorNeutralBackgroundDisabled);}",
+        ".f1veetlj{--fui-Slider__progress--color:var(--colorNeutralForegroundDisabled);}",
+        ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}",
+        ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}",
+        ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}",
+        ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}",
+        ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}",
+        ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}",
+        ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}",
+        ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}",
+        [
+            ".fmj8fco[data-fui-focus-within]:focus-within::after{border:2px solid var(--colorStrokeFocus2);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".f1iwowo3[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1pffoy2[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - -2px);}",
+        ".f1dfga45[data-fui-focus-within]:focus-within::after{right:calc(0px - 2px - -4px);}",
+        ".f63jj3o[data-fui-focus-within]:focus-within::after{left:calc(0px - 2px - -4px);}",
+        ".fs6b7xr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 2px - -2px);}",
+        [
+            ".fmj8fco[data-fui-focus-within]:focus-within::after{border:2px solid var(--colorStrokeFocus2);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".f1iwowo3[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".fm5xmfm[data-fui-focus-within]:focus-within::after{right:calc(0px - 2px - 4px);}",
+        ".femsgmt[data-fui-focus-within]:focus-within::after{left:calc(0px - 2px - 4px);}"
+    ],
+    h: [
+        ".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}",
+        ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"
+    ],
+    a: [
+        ".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}",
+        ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.fdjsfay{--fui-Slider__rail--color:CanvasText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1fen33d{--fui-Slider__thumb--color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1c6b0w1{--fui-Slider__progress--color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1rq9b4z:hover{--fui-Slider__thumb--color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f4xxiul:hover{--fui-Slider__progress--color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fn4acdm{--fui-Slider__rail--color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f4s8dx0{--fui-Slider__thumb--color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1wil5xy{--fui-Slider__progress--color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1ufm4qn[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1qnwcb4[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}.fgrk5zm[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fi52z01[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ],
+    f: [
+        ".ftqa4ok:focus{outline-style:none;}"
+    ],
+    i: [
+        ".f2hkw1w:focus-visible{outline-style:none;}"
+    ]
+});
+/**
+ * Styles for the rail slot
+ */ const useRailStyles = /*#__PURE__*/ (0, _react.__styles)({
+    rail: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1kijzfu",
+        Bkecrkj: "f1aehjj5",
+        Ijaq50: "faunodf",
+        nk6f5a: "f88nxoq",
+        Br312pm: "fd46tj4",
+        Bw0ie65: "f1e2fz10",
+        qhf8xq: "f10pi13n",
+        Bvjb7m6: "fdgv6k0",
+        Bcmaq0h: "fizngqt",
+        Bpd4iqm: "fpvhumw",
+        oeaueh: "f1yog68k",
+        Bw0xxkn: "f13sgyd8",
+        Ftih45: "fzhtfnv",
+        Brfgrao: "f1j7ml58",
+        Bbn5juq: "fx36ao7",
+        Bses4cn: "fddlh2i"
+    },
+    horizontal: {
+        a9b677: "fly5x3f",
+        Bqenvij: "f1cy86ho",
+        Fbdkly: [
+            "f1heqfse",
+            "fkh49vu"
+        ],
+        mdwyqc: [
+            "fkh49vu",
+            "f1heqfse"
+        ],
+        Baz25je: "f16tdq4e"
+    },
+    vertical: {
+        a9b677: "fqxfnkd",
+        Bqenvij: "f1l02sjl",
+        Ccq8qp: "f1rik0od",
+        Bciustq: "f14xwovp",
+        lawp4y: "fdehrcx"
+    }
+}, {
+    d: [
+        [
+            ".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1aehjj5{pointer-events:none;}",
+        ".faunodf{grid-row-start:2;}",
+        ".f88nxoq{grid-row-end:2;}",
+        ".fd46tj4{grid-column-start:2;}",
+        ".f1e2fz10{grid-column-end:2;}",
+        ".f10pi13n{position:relative;}",
+        ".fdgv6k0{forced-color-adjust:none;}",
+        ".fizngqt{background-image:linear-gradient(\n      var(--fui-Slider--direction),\n      var(--fui-Slider__progress--color) 0%,\n      var(--fui-Slider__progress--color) var(--fui-Slider--progress),\n      var(--fui-Slider__rail--color) var(--fui-Slider--progress)\n    );}",
+        ".fpvhumw{outline-width:1px;}",
+        ".f1yog68k{outline-style:solid;}",
+        ".f13sgyd8{outline-color:var(--colorTransparentStroke);}",
+        ".fzhtfnv::before{content:'';}",
+        ".f1j7ml58::before{position:absolute;}",
+        ".fx36ao7::before{background-image:repeating-linear-gradient(\n        var(--fui-Slider--direction),\n        #0000 0%,\n        #0000 calc(var(--fui-Slider--steps-percent) - 1px),\n        var(--colorNeutralBackground1) calc(var(--fui-Slider--steps-percent) - 1px),\n        var(--colorNeutralBackground1) var(--fui-Slider--steps-percent)\n      );}",
+        ".fly5x3f{width:100%;}",
+        ".f1cy86ho{height:var(--fui-Slider__rail--size);}",
+        ".f1heqfse::before{left:-1px;}",
+        ".fkh49vu::before{right:-1px;}",
+        ".f16tdq4e::before{height:var(--fui-Slider__rail--size);}",
+        ".fqxfnkd{width:var(--fui-Slider__rail--size);}",
+        ".f1l02sjl{height:100%;}",
+        ".f1rik0od::before{width:var(--fui-Slider__rail--size);}",
+        ".f14xwovp::before{top:-1px;}",
+        ".fdehrcx::before{bottom:-1px;}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.fddlh2i::before{background-image:repeating-linear-gradient(\n          var(--fui-Slider--direction),\n          #0000 0%,\n          #0000 calc(var(--fui-Slider--steps-percent) - 1px),\n          HighlightText calc(var(--fui-Slider--steps-percent) - 1px),\n          HighlightText var(--fui-Slider--steps-percent)\n        );}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = /*#__PURE__*/ (0, _react.__styles)({
+    thumb: {
+        B2lzsem: "ftx3jue",
+        Ijaq50: "faunodf",
+        nk6f5a: "f88nxoq",
+        Br312pm: "fd46tj4",
+        Bw0ie65: "f1e2fz10",
+        qhf8xq: "f1euv43f",
+        a9b677: "f174ca62",
+        Bqenvij: "f1yfdkfd",
+        Bkecrkj: "f1aehjj5",
+        oeaueh: "f1s6fcnf",
+        Bvjb7m6: "fdgv6k0",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f44lkw9",
+        E5pizo: "fof7hq0",
+        De3pzq: "foksa45",
+        Brfgrao: "f1j7ml58",
+        Bciustq: "f14u7mkt",
+        Fbdkly: [
+            "f5zrw40",
+            "f1ks5ppg"
+        ],
+        lawp4y: "fto0uou",
+        mdwyqc: [
+            "f1ks5ppg",
+            "f5zrw40"
+        ],
+        r59vdv: 0,
+        Budzafs: 0,
+        ck0cow: 0,
+        n07z76: 0,
+        Gng75u: "fielpny",
+        Bcvre1j: "fyl8oag",
+        Ftih45: "fzhtfnv",
+        Bcgcnre: 0,
+        Bqjgrrk: 0,
+        qa3bma: 0,
+        y0oebl: 0,
+        Biqmznv: 0,
+        Bm6vgfq: 0,
+        Bbv0w2i: 0,
+        uvfttm: 0,
+        eqrjj: 0,
+        Bk5zm6e: 0,
+        m598lv: 0,
+        B4f6apu: 0,
+        ydt019: 0,
+        Bq4z7u6: 0,
+        Bdkvgpv: 0,
+        B0qfbqy: 0,
+        kj8mxx: "f1fsco4d"
+    },
+    disabled: {
+        Bcgcnre: 0,
+        Bqjgrrk: 0,
+        qa3bma: 0,
+        y0oebl: 0,
+        Biqmznv: 0,
+        Bm6vgfq: 0,
+        Bbv0w2i: 0,
+        uvfttm: 0,
+        eqrjj: 0,
+        Bk5zm6e: 0,
+        m598lv: 0,
+        B4f6apu: 0,
+        ydt019: 0,
+        Bq4z7u6: 0,
+        Bdkvgpv: 0,
+        B0qfbqy: 0,
+        kj8mxx: "f1pv9hn4"
+    },
+    horizontal: {
+        Bz10aip: [
+            "f13gfj74",
+            "f1nfknbn"
+        ],
+        oyh7mz: [
+            "foa2ioz",
+            "fjmilum"
+        ]
+    },
+    vertical: {
+        Bz10aip: "f5cv5a3",
+        B5kzvoi: "f1k2fpdo"
+    }
+}, {
+    d: [
+        ".ftx3jue{--fui-Slider__thumb--position:clamp(var(--fui-Slider__inner-thumb--radius), var(--fui-Slider--progress), calc(100% - var(--fui-Slider__inner-thumb--radius)));}",
+        ".faunodf{grid-row-start:2;}",
+        ".f88nxoq{grid-row-end:2;}",
+        ".fd46tj4{grid-column-start:2;}",
+        ".f1e2fz10{grid-column-end:2;}",
+        ".f1euv43f{position:absolute;}",
+        ".f174ca62{width:var(--fui-Slider__thumb--size);}",
+        ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}",
+        ".f1aehjj5{pointer-events:none;}",
+        ".f1s6fcnf{outline-style:none;}",
+        ".fdgv6k0{forced-color-adjust:none;}",
+        [
+            ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
+            {
+                p: -1
+            }
+        ],
+        ".fof7hq0{box-shadow:0 0 0 calc(var(--fui-Slider__thumb--size) * .2) var(--colorNeutralBackground1) inset;}",
+        ".foksa45{background-color:var(--fui-Slider__thumb--color);}",
+        ".f1j7ml58::before{position:absolute;}",
+        ".f14u7mkt::before{top:0px;}",
+        ".f5zrw40::before{left:0px;}",
+        ".f1ks5ppg::before{right:0px;}",
+        ".fto0uou::before{bottom:0px;}",
+        [
+            ".fielpny::before{border-radius:var(--borderRadiusCircular);}",
+            {
+                p: -1
+            }
+        ],
+        ".fyl8oag::before{box-sizing:border-box;}",
+        ".fzhtfnv::before{content:'';}",
+        [
+            ".f1fsco4d::before{border:calc(var(--fui-Slider__thumb--size) * .05) solid var(--colorNeutralStroke1);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".f1pv9hn4::before{border:calc(var(--fui-Slider__thumb--size) * .05) solid var(--colorNeutralForegroundDisabled);}",
+            {
+                p: -2
+            }
+        ],
+        ".f13gfj74{transform:translateX(-50%);}",
+        ".f1nfknbn{transform:translateX(50%);}",
+        ".foa2ioz{left:var(--fui-Slider__thumb--position);}",
+        ".fjmilum{right:var(--fui-Slider__thumb--position);}",
+        ".f5cv5a3{transform:translateY(50%);}",
+        ".f1k2fpdo{bottom:var(--fui-Slider__thumb--position);}"
+    ]
+});
+/**
+ * Styles for the Input slot
+ */ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
+    input: {
+        Bceei9c: "f1k6fduh",
+        abs64n: "fk73vx1",
+        Ijaq50: "f16hsg94",
+        nk6f5a: "f1nzqi2z",
+        Br312pm: "fwpfdsa",
+        Bw0ie65: "fuur7zz",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1mk8lai",
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: "f1s184ao"
+    },
+    disabled: {
+        Bceei9c: "f158kwzp"
+    },
+    horizontal: {
+        Bqenvij: "f1yfdkfd",
+        a9b677: "fly5x3f"
+    },
+    vertical: {
+        Bqenvij: "f1l02sjl",
+        a9b677: "f174ca62",
+        wtfg9d: "f135tqni",
+        By3ymbm: [
+            "f114o3fk",
+            "f1o9w1zd"
+        ],
+        B1e78rk: "f1jr0wcp"
+    }
+}, {
+    d: [
+        ".f1k6fduh{cursor:pointer;}",
+        ".fk73vx1{opacity:0;}",
+        ".f16hsg94{grid-row-start:1;}",
+        ".f1nzqi2z{grid-row-end:-1;}",
+        ".fwpfdsa{grid-column-start:1;}",
+        ".fuur7zz{grid-column-end:-1;}",
+        [
+            ".f1mk8lai{padding:0;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1s184ao{margin:0;}",
+            {
+                p: -1
+            }
+        ],
+        ".f158kwzp{cursor:default;}",
+        ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}",
+        ".fly5x3f{width:100%;}",
+        ".f1l02sjl{height:100%;}",
+        ".f174ca62{width:var(--fui-Slider__thumb--size);}"
+    ],
+    t: [
+        "@supports (writing-mode: sideways-lr){.f135tqni{writing-mode:vertical-lr;}}",
+        "@supports (writing-mode: sideways-lr){.f114o3fk{direction:rtl;}.f1o9w1zd{direction:ltr;}}",
+        "@supports not (writing-mode: sideways-lr){.f1jr0wcp{-webkit-appearance:slider-vertical;}}"
+    ]
+});
+const useSliderStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const railStyles = useRailStyles();
+    const thumbStyles = useThumbStyles();
+    const inputStyles = useInputStyles();
+    const isVertical = state.vertical;
+    state.root.className = (0, _react.mergeClasses)(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
+    state.rail.className = (0, _react.mergeClasses)(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+    state.thumb.className = (0, _react.mergeClasses)(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
+    state.input.className = (0, _react.mergeClasses)(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
+    return state;
+};

node_modules/@fluentui/react-slider/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js

@@ -0,0 +1,294 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    sliderCSSVars: function() {
+        return sliderCSSVars;
+    },
+    sliderClassNames: function() {
+        return sliderClassNames;
+    },
+    useSliderStyles_unstable: function() {
+        return useSliderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const sliderClassNames = {
+    root: 'fui-Slider',
+    rail: 'fui-Slider__rail',
+    thumb: 'fui-Slider__thumb',
+    input: 'fui-Slider__input'
+};
+// Internal CSS variables
+const thumbPositionVar = `--fui-Slider__thumb--position`;
+const sliderCSSVars = {
+    sliderDirectionVar: `--fui-Slider--direction`,
+    sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,
+    sliderProgressVar: `--fui-Slider--progress`,
+    sliderProgressColorVar: `--fui-Slider__progress--color`,
+    sliderRailSizeVar: `--fui-Slider__rail--size`,
+    sliderRailColorVar: `--fui-Slider__rail--color`,
+    sliderStepsPercentVar: `--fui-Slider--steps-percent`,
+    sliderThumbColorVar: `--fui-Slider__thumb--color`,
+    sliderThumbSizeVar: `--fui-Slider__thumb--size`
+};
+const { sliderDirectionVar, sliderInnerThumbRadiusVar, sliderProgressVar, sliderProgressColorVar, sliderRailSizeVar, sliderRailColorVar, sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar } = sliderCSSVars;
+/**
+ * Styles for the root slot
+ */ const useRootStyles = (0, _react.makeStyles)({
+    root: {
+        position: 'relative',
+        display: 'inline-grid',
+        touchAction: 'none',
+        alignItems: 'center',
+        justifyItems: 'center'
+    },
+    small: {
+        [sliderThumbSizeVar]: '16px',
+        [sliderInnerThumbRadiusVar]: '5px',
+        [sliderRailSizeVar]: '2px',
+        minHeight: '24px'
+    },
+    medium: {
+        [sliderThumbSizeVar]: '20px',
+        [sliderInnerThumbRadiusVar]: '6px',
+        [sliderRailSizeVar]: '4px',
+        minHeight: '32px'
+    },
+    horizontal: {
+        minWidth: '120px',
+        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
+        gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,
+        gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`
+    },
+    vertical: {
+        minHeight: '120px',
+        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
+        gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,
+        gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`
+    },
+    enabled: {
+        [sliderRailColorVar]: _reacttheme.tokens.colorNeutralStrokeAccessible,
+        [sliderProgressColorVar]: _reacttheme.tokens.colorCompoundBrandBackground,
+        [sliderThumbColorVar]: _reacttheme.tokens.colorCompoundBrandBackground,
+        ':hover': {
+            [sliderThumbColorVar]: _reacttheme.tokens.colorCompoundBrandBackgroundHover,
+            [sliderProgressColorVar]: _reacttheme.tokens.colorCompoundBrandBackgroundHover
+        },
+        ':active': {
+            [sliderThumbColorVar]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed,
+            [sliderProgressColorVar]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed
+        },
+        '@media (forced-colors: active)': {
+            [sliderRailColorVar]: 'CanvasText',
+            [sliderThumbColorVar]: 'Highlight',
+            [sliderProgressColorVar]: 'Highlight',
+            ':hover': {
+                [sliderThumbColorVar]: 'Highlight',
+                [sliderProgressColorVar]: 'Highlight'
+            }
+        }
+    },
+    disabled: {
+        [sliderThumbColorVar]: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        [sliderRailColorVar]: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+        [sliderProgressColorVar]: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            [sliderRailColorVar]: 'GrayText',
+            [sliderCSSVars.sliderThumbColorVar]: 'GrayText',
+            [sliderCSSVars.sliderProgressColorVar]: 'GrayText'
+        }
+    },
+    focusIndicatorHorizontal: (0, _reacttabster.createFocusOutlineStyle)({
+        selector: 'focus-within',
+        style: {
+            outlineOffset: {
+                top: '-2px',
+                bottom: '-2px',
+                left: '-4px',
+                right: '-4px'
+            }
+        }
+    }),
+    focusIndicatorVertical: (0, _reacttabster.createFocusOutlineStyle)({
+        selector: 'focus-within',
+        style: {
+            outlineOffset: {
+                top: '-2px',
+                bottom: '-2px',
+                left: '4px',
+                right: '4px'
+            }
+        }
+    })
+});
+/**
+ * Styles for the rail slot
+ */ const useRailStyles = (0, _react.makeStyles)({
+    rail: {
+        borderRadius: _reacttheme.tokens.borderRadiusXLarge,
+        pointerEvents: 'none',
+        gridRowStart: '2',
+        gridRowEnd: '2',
+        gridColumnStart: '2',
+        gridColumnEnd: '2',
+        position: 'relative',
+        forcedColorAdjust: 'none',
+        // Background gradient represents the progress of the slider
+        backgroundImage: `linear-gradient(
+      var(${sliderDirectionVar}),
+      var(${sliderProgressColorVar}) 0%,
+      var(${sliderProgressColorVar}) var(${sliderProgressVar}),
+      var(${sliderRailColorVar}) var(${sliderProgressVar})
+    )`,
+        outlineWidth: '1px',
+        outlineStyle: 'solid',
+        outlineColor: _reacttheme.tokens.colorTransparentStroke,
+        '::before': {
+            content: "''",
+            position: 'absolute',
+            // Repeating gradient represents the steps if provided
+            backgroundImage: `repeating-linear-gradient(
+        var(${sliderDirectionVar}),
+        #0000 0%,
+        #0000 calc(var(${sliderStepsPercentVar}) - 1px),
+        ${_reacttheme.tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),
+        ${_reacttheme.tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})
+      )`,
+            // force steps to use HighlightText for high contrast mode
+            '@media (forced-colors: active)': {
+                backgroundImage: `repeating-linear-gradient(
+          var(${sliderDirectionVar}),
+          #0000 0%,
+          #0000 calc(var(${sliderStepsPercentVar}) - 1px),
+          HighlightText calc(var(${sliderStepsPercentVar}) - 1px),
+          HighlightText var(${sliderStepsPercentVar})
+        )`
+            }
+        }
+    },
+    horizontal: {
+        width: '100%',
+        height: `var(${sliderRailSizeVar})`,
+        '::before': {
+            left: '-1px',
+            right: '-1px',
+            height: `var(${sliderRailSizeVar})`
+        }
+    },
+    vertical: {
+        width: `var(${sliderRailSizeVar})`,
+        height: '100%',
+        '::before': {
+            width: `var(${sliderRailSizeVar})`,
+            top: '-1px',
+            bottom: '-1px'
+        }
+    }
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = (0, _react.makeStyles)({
+    thumb: {
+        // Ensure the thumb stays within the track boundaries.
+        // When the value is at 0% or 100%, the distance from the track edge
+        // to the thumb center equals the inner thumb radius.
+        [`${thumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,
+        gridRowStart: '2',
+        gridRowEnd: '2',
+        gridColumnStart: '2',
+        gridColumnEnd: '2',
+        position: 'absolute',
+        width: `var(${sliderThumbSizeVar})`,
+        height: `var(${sliderThumbSizeVar})`,
+        pointerEvents: 'none',
+        outlineStyle: 'none',
+        forcedColorAdjust: 'none',
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${_reacttheme.tokens.colorNeutralBackground1} inset`,
+        backgroundColor: `var(${sliderThumbColorVar})`,
+        '::before': {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            bottom: '0px',
+            right: '0px',
+            borderRadius: _reacttheme.tokens.borderRadiusCircular,
+            boxSizing: 'border-box',
+            content: "''",
+            border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${_reacttheme.tokens.colorNeutralStroke1}`
+        }
+    },
+    disabled: {
+        '::before': {
+            border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${_reacttheme.tokens.colorNeutralForegroundDisabled}`
+        }
+    },
+    horizontal: {
+        transform: 'translateX(-50%)',
+        left: `var(${thumbPositionVar})`
+    },
+    vertical: {
+        transform: 'translateY(50%)',
+        bottom: `var(${thumbPositionVar})`
+    }
+});
+/**
+ * Styles for the Input slot
+ */ const useInputStyles = (0, _react.makeStyles)({
+    input: {
+        cursor: 'pointer',
+        opacity: 0,
+        gridRowStart: '1',
+        gridRowEnd: '-1',
+        gridColumnStart: '1',
+        gridColumnEnd: '-1',
+        padding: '0',
+        margin: '0'
+    },
+    disabled: {
+        cursor: 'default'
+    },
+    horizontal: {
+        height: `var(${sliderThumbSizeVar})`,
+        width: '100%'
+    },
+    vertical: {
+        height: '100%',
+        width: `var(${sliderThumbSizeVar})`,
+        // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.
+        // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means
+        // that vertical controls should also support `writing-mode: vertical-lr`.
+        '@supports (writing-mode: sideways-lr)': {
+            writingMode: 'vertical-lr',
+            direction: 'rtl'
+        },
+        // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs
+        '@supports not (writing-mode: sideways-lr)': {
+            WebkitAppearance: 'slider-vertical'
+        }
+    }
+});
+const useSliderStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const railStyles = useRailStyles();
+    const thumbStyles = useThumbStyles();
+    const inputStyles = useInputStyles();
+    const isVertical = state.vertical;
+    state.root.className = (0, _react.mergeClasses)(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
+    state.rail.className = (0, _react.mergeClasses)(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+    state.thumb.className = (0, _react.mergeClasses)(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
+    state.input.className = (0, _react.mergeClasses)(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
+    return state;
+};