feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-slider/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-slider
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

node_modules/@fluentui/react-slider/README.md

@@ -0,0 +1,41 @@
+# @fluentui/react-slider
+
+**Slider components for [Fluent UI React](https://react.fluentui.dev/)**
+
+Slider allows users to quickly select a value (or range) by dragging a thumb across a rail. It is often used when setting values with a relaxed precision such as audio volume and screen brightness.
+
+## Usage
+
+To import Slider:
+
+```js
+import { Slider } from '@fluentui/react-components';
+```
+
+### Examples
+
+```jsx
+<Slider />
+<Slider defaultValue={3} />
+<Slider value={sliderValue} onChange={sliderOnChange} />
+<Slider min={0} max={10} />
+<Slider vertical />
+<Slider disabled />
+<Slider step={10} />
+<Slider size="small" />
+```
+
+See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-slider` from the list.
+
+### Specification
+
+See [SPEC.md](./Spec.md).
+
+### Migration Guide
+
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Slider implementation.

node_modules/@fluentui/react-slider/dist/index.d.ts

@@ -0,0 +1,150 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render the final JSX of Slider
+ */
+export declare const renderSlider_unstable: (state: SliderBaseState) => JSXElement;
+
+/**
+ * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
+ */
+export declare const Slider: ForwardRefComponent<SliderProps>;
+
+/**
+ * Slider base props, excluding design-related props like size.
+ * Note: vertical is kept as it affects aria-orientation behavior.
+ */
+export declare type SliderBaseProps = Omit<SliderProps, 'size'>;
+
+/**
+ * Slider base state, excluding design-related state like size.
+ */
+export declare type SliderBaseState = Omit<SliderState, 'size'>;
+
+export declare const sliderClassNames: SlotClassNames<SliderSlots>;
+
+export declare const sliderCSSVars: {
+    sliderDirectionVar: string;
+    sliderInnerThumbRadiusVar: string;
+    sliderProgressVar: string;
+    sliderProgressColorVar: string;
+    sliderRailSizeVar: string;
+    sliderRailColorVar: string;
+    sliderStepsPercentVar: string;
+    sliderThumbColorVar: string;
+    sliderThumbSizeVar: string;
+};
+
+export declare type SliderOnChangeData = {
+    value: number;
+};
+
+export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
+    /**
+     * The starting value for an uncontrolled Slider.
+     * Mutually exclusive with `value` prop.
+     */
+    defaultValue?: number;
+    /**
+     *  Whether to render the Slider as disabled.
+     *
+     * @default `false` (renders enabled)
+     */
+    disabled?: boolean;
+    /**
+     * The max value of the Slider.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The min value of the Slider.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The size of the Slider.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider
+     * will snap to the closest available value. This must be a positive value.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The current value of the controlled Slider.
+     * Mutually exclusive with `defaultValue` prop.
+     */
+    value?: number;
+    /**
+     * Render the Slider in a vertical orientation, smallest value on the bottom.
+     * @default `false`
+     */
+    vertical?: boolean;
+    /**
+     * Triggers a callback when the value has been changed. This will be called on every individual step.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
+};
+
+export declare type SliderSlots = {
+    /**
+     * The root of the Slider.
+     * The root slot receives the `className` and `style` specified directly on the `<Slider>`.
+     * All other native props will be applied to the primary slot, `input`.
+     */
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * The Slider's base. It is used to visibly display the min and max selectable values.
+     */
+    rail: NonNullable<Slot<'div'>>;
+    /**
+     * The draggable icon used to select a given value from the Slider.
+     * This is the element containing `role = 'slider'`.
+     */
+    thumb: NonNullable<Slot<'div'>>;
+    /**
+     * The hidden input for the Slider.
+     * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,
+     * except `className` and `style`, which remain on the root slot.
+     *
+     */
+    input: NonNullable<Slot<'input'>> & {
+        /**
+         * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally
+         * when `vertical` is set to true.
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes
+         * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property
+         */
+        orient?: 'horizontal' | 'vertical';
+    };
+};
+
+export declare type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;
+
+export declare const useSlider_unstable: (props: SliderProps, ref: React_2.Ref<HTMLInputElement>) => SliderState;
+
+/**
+ * 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 declare const useSliderBase_unstable: (props: SliderBaseProps, ref: React_2.Ref<HTMLInputElement>) => SliderBaseState;
+
+export declare const useSliderState_unstable: (state: SliderBaseState, props: SliderBaseProps) => SliderBaseState;
+
+/**
+ * Apply styling to the Slider slots based on the state
+ */
+export declare const useSliderStyles_unstable: (state: SliderState) => SliderState;
+
+export { }

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

@@ -0,0 +1,37 @@
+"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 _index.Slider;
+    },
+    renderSlider_unstable: function() {
+        return _index.renderSlider_unstable;
+    },
+    sliderCSSVars: function() {
+        return _index.sliderCSSVars;
+    },
+    sliderClassNames: function() {
+        return _index.sliderClassNames;
+    },
+    useSliderBase_unstable: function() {
+        return _index.useSliderBase_unstable;
+    },
+    useSliderState_unstable: function() {
+        return _index.useSliderState_unstable;
+    },
+    useSliderStyles_unstable: function() {
+        return _index.useSliderStyles_unstable;
+    },
+    useSlider_unstable: function() {
+        return _index.useSlider_unstable;
+    }
+});
+const _index = require("./components/Slider/index");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Slider.ts"],"sourcesContent":["export type {\n  SliderBaseProps,\n  SliderBaseState,\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n} from './components/Slider/index';\nexport {\n  Slider,\n  renderSlider_unstable,\n  sliderCSSVars,\n  sliderClassNames,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n  useSliderBase_unstable,\n} from './components/Slider/index';\n"],"names":["Slider","renderSlider_unstable","sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","useSliderBase_unstable"],"mappings":";;;;;;;;;;;IASEA;4BAAM;;;eACNC,4BAAqB;;;eACrBC,oBAAa;;;eACbC,uBAAgB;;IAIhBI;4CAAsB;;;eAHtBH,8BAAuB;;;eACvBC,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}

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;
+};

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

@@ -0,0 +1,37 @@
+"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 _Slider.renderSlider_unstable;
+    },
+    sliderCSSVars: function() {
+        return _Slider.sliderCSSVars;
+    },
+    sliderClassNames: function() {
+        return _Slider.sliderClassNames;
+    },
+    useSliderBase_unstable: function() {
+        return _Slider.useSliderBase_unstable;
+    },
+    useSliderState_unstable: function() {
+        return _Slider.useSliderState_unstable;
+    },
+    useSliderStyles_unstable: function() {
+        return _Slider.useSliderStyles_unstable;
+    },
+    useSlider_unstable: function() {
+        return _Slider.useSlider_unstable;
+    }
+});
+const _Slider = require("./Slider");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Slider,\n  renderSlider_unstable,\n  sliderClassNames,\n  sliderCSSVars,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n  useSliderBase_unstable,\n} from './Slider';\nexport type {\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n  SliderBaseProps,\n  SliderBaseState,\n} from './Slider';\n"],"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","useSliderBase_unstable"],"mappings":";;;;;;;;;;;IACEA;6BAAM;;;eACNC,6BAAqB;;;eAErBE,qBAAa;;;eADbD,wBAAgB;;IAKhBK;6CAAsB;;;eAHtBH,+BAAuB;;;eACvBC,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,WAAW"}

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

@@ -0,0 +1 @@
+export { Slider, renderSlider_unstable, sliderCSSVars, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable, useSliderBase_unstable } from './components/Slider/index';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Slider.ts"],"sourcesContent":["export type {\n  SliderBaseProps,\n  SliderBaseState,\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n} from './components/Slider/index';\nexport {\n  Slider,\n  renderSlider_unstable,\n  sliderCSSVars,\n  sliderClassNames,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n  useSliderBase_unstable,\n} from './components/Slider/index';\n"],"names":["Slider","renderSlider_unstable","sliderCSSVars","sliderClassNames","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","useSliderBase_unstable"],"mappings":"AAQA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}

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;
+};

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

@@ -0,0 +1 @@
+export { Slider, renderSlider_unstable, sliderClassNames, sliderCSSVars, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable, useSliderBase_unstable } from './Slider';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Slider,\n  renderSlider_unstable,\n  sliderClassNames,\n  sliderCSSVars,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n  useSliderBase_unstable,\n} from './Slider';\nexport type {\n  SliderOnChangeData,\n  SliderProps,\n  SliderSlots,\n  SliderState,\n  SliderBaseProps,\n  SliderBaseState,\n} from './Slider';\n"],"names":["Slider","renderSlider_unstable","sliderClassNames","sliderCSSVars","useSliderState_unstable","useSliderStyles_unstable","useSlider_unstable","useSliderBase_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW"}

node_modules/@fluentui/react-slider/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@fluentui/react-slider",
+  "version": "9.6.1",
+  "description": "Fluent UI React Slider component.",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "./dist/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@fluentui/react-field": "^9.5.0",
+    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-tabster": "^9.26.13",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-utilities": "^9.26.2",
+    "@griffel/react": "^1.5.32",
+    "@swc/helpers": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "*.md",
+    "dist/*.d.ts",
+    "lib",
+    "lib-commonjs"
+  ]
+}