feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useSlider_unstable } from './useSlider';
+import { renderSlider_unstable } from './renderSlider';
+import { useSliderStyles_unstable } from './useSliderStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
+ */ export const Slider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSlider_unstable(props, ref);
+    useSliderStyles_unstable(state);
+    useCustomStyleHook_unstable('useSliderStyles_unstable')(state);
+    return renderSlider_unstable(state);
+});
+Slider.displayName = 'Slider';

node_modules/@fluentui/react-slider/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AACHJ,OAAOK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-slider/lib/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":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,5 @@
+export { Slider } from './Slider';
+export { renderSlider_unstable } from './renderSlider';
+export { useSlider_unstable, useSliderBase_unstable } from './useSlider';
+export { useSliderState_unstable } from './useSliderState';
+export { sliderClassNames, sliderCSSVars, useSliderStyles_unstable } from './useSliderStyles.styles';

node_modules/@fluentui/react-slider/lib/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":"AAAA,SAASA,MAAM,QAAQ,WAAW;AASlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,wBAAwB,QAAQ,2BAA2B"}

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

@@ -0,0 +1,14 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Slider
+ */ export const renderSlider_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsx(state.input, {}),
+            /*#__PURE__*/ _jsx(state.rail, {}),
+            /*#__PURE__*/ _jsx(state.thumb, {})
+        ]
+    });
+};

node_modules/@fluentui/react-slider/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}

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

@@ -0,0 +1,68 @@
+'use client';
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { getPartitionedNativeProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { useSliderState_unstable } from './useSliderState';
+import { useFocusWithin } from '@fluentui/react-tabster';
+export const useSlider_unstable = (props, ref)=>{
+    const { size = 'medium', ...baseProps } = props;
+    const baseState = useSliderBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        size
+    };
+};
+/**
+ * Base hook for Slider component, which manages state related to slots structure, ARIA attributes,
+ * keyboard handling, and controlled/uncontrolled value state.
+ *
+ * @param props - User provided props to the Slider component.
+ * @param ref - User provided ref to be passed to the Slider input element.
+ */ export const useSliderBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true
+    });
+    const nativeProps = getPartitionedNativeProps({
+        props,
+        primarySlotTagName: 'input',
+        excludedPropNames: [
+            'onChange'
+        ]
+    });
+    const { disabled, vertical, // Slots
+    root, input, rail, thumb } = props;
+    const state = {
+        disabled,
+        vertical,
+        components: {
+            input: 'input',
+            rail: 'div',
+            root: 'div',
+            thumb: 'div'
+        },
+        root: slot.always(root, {
+            defaultProps: nativeProps.root,
+            elementType: 'div'
+        }),
+        input: slot.always(input, {
+            defaultProps: {
+                id: useId('slider-', props.id),
+                ref,
+                ...nativeProps.primary,
+                type: 'range',
+                orient: vertical ? 'vertical' : undefined
+            },
+            elementType: 'input'
+        }),
+        rail: slot.always(rail, {
+            elementType: 'div'
+        }),
+        thumb: slot.always(thumb, {
+            elementType: 'div'
+        })
+    };
+    state.root.ref = useMergedRefs(state.root.ref, useFocusWithin());
+    useSliderState_unstable(state, props);
+    return state;
+};

node_modules/@fluentui/react-slider/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAClG,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,SAASC,cAAc,QAAQ,0BAA0B;AAEzD,OAAO,MAAMC,qBAAqB,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;AAEF;;;;;;CAMC,GACD,OAAO,MAAMG,yBAAyB,CAACL,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEM,kBAAkB;IAAK;IAEtE,MAAMC,cAAcd,0BAA0B;QAC5CO;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;SAAW;IACjC;IAEA,MAAM,EACJC,QAAQ,EACRC,QAAQ,EACR,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGf;IAEJ,MAAMgB,QAAyB;QAC7BN;QACAC;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMhB,KAAKsB,MAAM,CAACN,MAAM;YACtBO,cAAcZ,YAAYK,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOjB,KAAKsB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAI3B,MAAM,WAAWM,MAAMqB,EAAE;gBAC7BpB;gBACA,GAAGM,YAAYe,OAAO;gBACtBC,MAAM;gBACNC,QAAQb,WAAW,aAAac;YAClC;YACAL,aAAa;QACf;QACAN,MAAMlB,KAAKsB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOnB,KAAKsB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAJ,MAAMJ,IAAI,CAACX,GAAG,GAAGN,cAAcqB,MAAMJ,IAAI,CAACX,GAAG,EAAEH;IAE/CD,wBAAwBmB,OAAOhB;IAE/B,OAAOgB;AACT,EAAE"}

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

@@ -0,0 +1,52 @@
+'use client';
+import * as React from 'react';
+import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { sliderCSSVars } from './useSliderStyles.styles';
+const { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;
+const getPercent = (value, min, max)=>{
+    return max === min ? 0 : (value - min) / (max - min) * 100;
+};
+export const useSliderState_unstable = (state, props)=>{
+    'use no memo';
+    const { min = 0, max = 100, step } = props;
+    const { dir } = useFluent();
+    const [currentValue, setCurrentValue] = useControllableState({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: 0
+    });
+    const clampedValue = clamp(currentValue, min, max);
+    const valuePercent = getPercent(clampedValue, min, max);
+    const inputOnChange = state.input.onChange;
+    const propsOnChange = props.onChange;
+    const onChange = useEventCallback((ev)=>{
+        const newValue = Number(ev.target.value);
+        setCurrentValue(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/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,2BAA2B;AAGzD,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGH;AAEzE,MAAMI,aAAa,CAACC,OAAeC,KAAaC;IAC9C,OAAOA,QAAQD,MAAM,IAAI,AAAED,CAAAA,QAAQC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;AAC3D;AAEA,OAAO,MAAME,0BAA0B,CAACC,OAAwBC;IAC9D;IAEA,MAAM,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGb;IAChB,MAAM,CAACc,cAAcC,gBAAgB,GAAGlB,qBAAqB;QAC3Da,OAAOC,MAAML,KAAK;QAClBU,cAAcL,MAAMM,YAAY;QAChCC,cAAc;IAChB;IACA,MAAMC,eAAevB,MAAMkB,cAAcP,KAAKC;IAC9C,MAAMY,eAAef,WAAWc,cAAcZ,KAAKC;IAEnD,MAAMa,gBAAgBX,MAAMY,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBb,MAAMY,QAAQ;IAEpC,MAAMA,WAAuDzB,iBAAiB2B,CAAAA;QAC5E,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACtB,KAAK;QACvCS,gBAAgBnB,MAAM8B,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,GAAG,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,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/components/Slider/useSliderStyles.styles.js

@@ -0,0 +1,412 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export 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`;
+export 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__*/__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__*/__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__*/__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__*/__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;}}"]
+});
+/**
+ * Apply styling to the Slider slots based on the state
+ */
+export 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 = 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 = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+  state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
+  state.input.className = 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/components/Slider/useSliderStyles.styles.raw.js

@@ -0,0 +1,275 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export 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`;
+export 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 = 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]: tokens.colorNeutralStrokeAccessible,
+        [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,
+        [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,
+        ':hover': {
+            [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,
+            [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover
+        },
+        ':active': {
+            [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,
+            [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed
+        },
+        '@media (forced-colors: active)': {
+            [sliderRailColorVar]: 'CanvasText',
+            [sliderThumbColorVar]: 'Highlight',
+            [sliderProgressColorVar]: 'Highlight',
+            ':hover': {
+                [sliderThumbColorVar]: 'Highlight',
+                [sliderProgressColorVar]: 'Highlight'
+            }
+        }
+    },
+    disabled: {
+        [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,
+        [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,
+        [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            [sliderRailColorVar]: 'GrayText',
+            [sliderCSSVars.sliderThumbColorVar]: 'GrayText',
+            [sliderCSSVars.sliderProgressColorVar]: 'GrayText'
+        }
+    },
+    focusIndicatorHorizontal: createFocusOutlineStyle({
+        selector: 'focus-within',
+        style: {
+            outlineOffset: {
+                top: '-2px',
+                bottom: '-2px',
+                left: '-4px',
+                right: '-4px'
+            }
+        }
+    }),
+    focusIndicatorVertical: createFocusOutlineStyle({
+        selector: 'focus-within',
+        style: {
+            outlineOffset: {
+                top: '-2px',
+                bottom: '-2px',
+                left: '4px',
+                right: '4px'
+            }
+        }
+    })
+});
+/**
+ * Styles for the rail slot
+ */ const useRailStyles = makeStyles({
+    rail: {
+        borderRadius: 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: 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),
+        ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),
+        ${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 = 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: tokens.borderRadiusCircular,
+        boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
+        backgroundColor: `var(${sliderThumbColorVar})`,
+        '::before': {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            bottom: '0px',
+            right: '0px',
+            borderRadius: tokens.borderRadiusCircular,
+            boxSizing: 'border-box',
+            content: "''",
+            border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`
+        }
+    },
+    disabled: {
+        '::before': {
+            border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`
+        }
+    },
+    horizontal: {
+        transform: 'translateX(-50%)',
+        left: `var(${thumbPositionVar})`
+    },
+    vertical: {
+        transform: 'translateY(50%)',
+        bottom: `var(${thumbPositionVar})`
+    }
+});
+/**
+ * Styles for the Input slot
+ */ const useInputStyles = 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'
+        }
+    }
+});
+/**
+ * Apply styling to the Slider slots based on the state
+ */ export 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 = 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 = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+    state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
+    state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
+    return state;
+};