@fluentui/react-slider 9.0.0-beta.10 → 9.0.0-beta.13

package/lib-commonjs/components/Slider/useSliderState.js

@@ -13,6 +13,14 @@ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-con
 
 const useSliderStyles_1 = /*#__PURE__*/require("./useSliderStyles");
 
+const {
+  railOffsetVar,
+  railStepsPercentVar,
+  railProgressVar,
+  thumbPositionVar,
+  railDirectionVar
+} = useSliderStyles_1.sliderCSSVars;
+
 const getPercent = (value, min, max) => {
   return max === min ? 0 : (value - min) / (max - min) * 100;
 };
@@ -24,7 +32,6 @@ const useSliderState_unstable = state => {
     min = 0,
     max = 100,
     step = 1,
-    getAriaValueText,
     origin
   } = state;
   const {
@@ -54,11 +61,11 @@ const useSliderState_unstable = state => {
     }
   });
   const rootVariables = {
-    [useSliderStyles_1.railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
-    [useSliderStyles_1.thumbPositionVar]: valuePercent + '%',
-    [useSliderStyles_1.railStepsPercentVar]: state.step && state.step > 0 ? `${step * 100 / (max - min)}%` : '',
-    [useSliderStyles_1.railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
-    [useSliderStyles_1.railProgressVar]: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`
+    [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
+    [thumbPositionVar]: valuePercent + '%',
+    [railStepsPercentVar]: state.step && state.step > 0 ? `${step * 100 / (max - min)}%` : '',
+    [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
+    [railProgressVar]: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`
   }; // Root props
 
   state.root.style = { ...rootVariables,
@@ -66,7 +73,6 @@ const useSliderState_unstable = state => {
   }; // Input Props
 
   state.input.value = currentValue;
-  getAriaValueText && (state.input['aria-valuetext'] = getAriaValueText(currentValue));
   state.input.onChange = onChange;
   return state;
 };

package/lib-commonjs/components/Slider/useSliderState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  railOffsetVar,\n  railStepsPercentVar,\n  railProgressVar,\n  thumbPositionVar,\n  railDirectionVar,\n} from './useSliderStyles';\nimport type { SliderState } from './Slider.types';\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: SliderState) => {\n  const { value, defaultValue = 0, min = 0, max = 100, step = 1, getAriaValueText, origin } = state;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value !== undefined ? clamp(value, min, max) : undefined,\n    defaultState: clamp(defaultValue, min, max),\n    initialState: 0,\n  });\n\n  const valuePercent = getPercent(currentValue, min, max);\n  const originPercent = React.useMemo(() => {\n    return origin !== undefined ? getPercent(origin, min, max) : 0;\n  }, [max, min, origin]);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = state.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 rootVariables = {\n    [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [thumbPositionVar]: valuePercent + '%',\n    [railStepsPercentVar]: state.step && state.step > 0 ? `${(step * 100) / (max - min)}%` : '',\n    [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',\n    [railProgressVar]:\n      origin !== undefined\n        ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n        : `${valuePercent}%`,\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = currentValue;\n  getAriaValueText && (state.input['aria-valuetext'] = getAriaValueText(currentValue!));\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState } from './Slider.types';\n\nconst { railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar, railDirectionVar } = 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: SliderState) => {\n  const { value, defaultValue = 0, min = 0, max = 100, step = 1, origin } = state;\n  const { dir } = useFluent();\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value !== undefined ? clamp(value, min, max) : undefined,\n    defaultState: clamp(defaultValue, min, max),\n    initialState: 0,\n  });\n  const valuePercent = getPercent(currentValue, min, max);\n  const originPercent = React.useMemo(() => {\n    return origin !== undefined ? getPercent(origin, min, max) : 0;\n  }, [max, min, origin]);\n\n  const inputOnChange = state.input.onChange;\n  const propsOnChange = state.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 rootVariables = {\n    [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n    [thumbPositionVar]: valuePercent + '%',\n    [railStepsPercentVar]: state.step && state.step > 0 ? `${(step * 100) / (max - min)}%` : '',\n    [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',\n    [railProgressVar]:\n      origin !== undefined\n        ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n        : `${valuePercent}%`,\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = currentValue;\n  state.input.onChange = onChange;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Slider/useSliderStyles.d.ts

@@ -1,22 +1,13 @@
-import type { SliderState } from './Slider.types';
-export declare const sliderClassName = "fui-Slider";
-export declare const railDirectionVar = "--fui-slider-rail-direction";
-export declare const railOffsetVar = "--fui-slider-rail-offset";
-export declare const railProgressVar = "--fui-slider-rail-progress";
-export declare const railStepsPercentVar = "--fui-slider-rail-steps-percent";
-export declare const thumbPositionVar = "--fui-slider-thumb-position";
-/**
- * Styles for the root slot
- */
-export declare const useRootStyles: () => Record<"small" | "disabled" | "horizontal" | "vertical" | "medium" | "root" | "enabled" | "focusIndicatorHorizontal" | "focusIndicatorVertical", string>;
-/**
- * Styles for the rail slot
- */
-export declare const useRailStyles: () => Record<"horizontal" | "vertical" | "rail", string>;
-/**
- * Styles for the thumb slot
- */
-export declare const useThumbStyles: () => Record<"disabled" | "horizontal" | "vertical" | "thumb", string>;
+import type { SliderState, SliderSlots } from './Slider.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+export declare const sliderClassNames: SlotClassNames<SliderSlots>;
+export declare const sliderCSSVars: {
+    railDirectionVar: string;
+    railOffsetVar: string;
+    railProgressVar: string;
+    railStepsPercentVar: string;
+    thumbPositionVar: string;
+};
 /**
  * Apply styling to the Slider slots based on the state
  */

package/lib-commonjs/components/Slider/useSliderStyles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSliderStyles_unstable = exports.useThumbStyles = exports.useRailStyles = exports.useRootStyles = exports.thumbPositionVar = exports.railStepsPercentVar = exports.railProgressVar = exports.railOffsetVar = exports.railDirectionVar = exports.sliderClassName = void 0;
+exports.useSliderStyles_unstable = exports.sliderCSSVars = exports.sliderClassNames = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
@@ -11,22 +11,37 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
-exports.sliderClassName = 'fui-Slider';
-const thumbSizeVar = `--fui-slider-thumb-size`;
-const railSizeVar = `--fui-slider-rail-size`;
-const railColorVar = `--fui-slider-rail-color`;
-const progressColorVar = `--fui-slider-progress-color`;
-const thumbColorVar = `--fui-slider-thumb-color`;
-exports.railDirectionVar = `--fui-slider-rail-direction`;
-exports.railOffsetVar = `--fui-slider-rail-offset`;
-exports.railProgressVar = `--fui-slider-rail-progress`;
-exports.railStepsPercentVar = `--fui-slider-rail-steps-percent`;
-exports.thumbPositionVar = `--fui-slider-thumb-position`;
+exports.sliderClassNames = {
+  root: 'fui-Slider',
+  rail: 'fui-Slider__rail',
+  thumb: 'fui-Slider__thumb',
+  input: 'fui-Slider__input'
+}; // Internal CSS variables
+
+const thumbSizeVar = `--fui-Slider__thumb--size`;
+const railSizeVar = `--fui-Slider__rail--size`;
+const railColorVar = `--fui-Slider__rail--color`;
+const progressColorVar = `--fui-Slider__progress--color`;
+const thumbColorVar = `--fui-Slider__thumb--color`;
+exports.sliderCSSVars = {
+  railDirectionVar: `--fui-Slider__rail--direction`,
+  railOffsetVar: `--fui-Slider__rail--offset`,
+  railProgressVar: `--fui-Slider__rail--progress`,
+  railStepsPercentVar: `--fui-Slider__rail--steps-percent`,
+  thumbPositionVar: `--fui-Slider__thumb--position`
+};
+const {
+  railDirectionVar,
+  railOffsetVar,
+  railStepsPercentVar,
+  railProgressVar,
+  thumbPositionVar
+} = exports.sliderCSSVars;
 /**
  * Styles for the root slot
  */
 
-exports.useRootStyles = /*#__PURE__*/react_1.__styles({
+const useRootStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "qhf8xq": "f10pi13n",
     "mc9l5x": "fwk3njj",
@@ -37,90 +52,121 @@ exports.useRootStyles = /*#__PURE__*/react_1.__styles({
     "B7hvi0a": "f1oiokrs"
   },
   "small": {
-    "Biculhw": "f1c9or7v",
-    "wqx05c": "flte3hh"
+    "Bi64ftq": "f1agqo6f",
+    "Ba19x4e": "f1i7ztpd",
+    "sshi5w": "f1pha7fy"
   },
   "medium": {
-    "Biculhw": "f1pye7a0",
-    "wqx05c": "fkfeez5"
+    "Bi64ftq": "f1a78h9h",
+    "Ba19x4e": "fuok0yf",
+    "sshi5w": "f1nxs5xn"
   },
   "horizontal": {
     "Bf4jedk": "fyvtabn",
-    "Bqenvij": "f1lzqqms"
+    "Bqenvij": "f1yfdkfd"
   },
   "vertical": {
-    "a9b677": "fg8321j",
+    "a9b677": "f174ca62",
     "sshi5w": "f1pzv1zu",
-    "Budl1dq": "f1px5gne"
+    "Budl1dq": "f13qjosx"
   },
   "enabled": {
-    "E57xle": "fv45gaj",
-    "Bbaa9vx": "fdbupyo",
-    "Buh0e40": "f101zkkn",
-    "m1hzeo": "flfk056",
-    "bipmid": "f1g3da1l",
-    "om7wyn": "f1i0j5bm",
-    "nb4gel": "fcubes2",
-    "Be8bzyp": "f4xbgjg",
-    "y5wbjr": "f195922",
-    "pk18bm": "ftryjgv",
-    "Bx5xzon": "f9x48s8",
-    "By0o28j": "fj3o9kf"
+    "B7wi8oa": "f4l8x3l",
+    "B250r6j": "f671q34",
+    "Bpmy4es": "fvfzmw5",
+    "Buw9y6v": "faw1t00",
+    "Bq939m0": "fxdgx5",
+    "gjzr1t": "fii04fa",
+    "tg7hqu": "f36hzz8",
+    "ypdvl1": "f1volkfw",
+    "Bw5jdd4": "f1xddb6",
+    "Bdjie01": "fcdikl",
+    "Bvh9j6m": "fhpzgm6",
+    "Bvsvvpo": "f1q6pm3h"
   },
   "disabled": {
-    "Buh0e40": "f18mka2b",
-    "E57xle": "f7gtiye",
-    "Bbaa9vx": "fdmjs6",
-    "Be8bzyp": "fp7twcv",
-    "y5wbjr": "fo1xztc",
-    "pk18bm": "fxmtfj"
+    "Bpmy4es": "foojseg",
+    "B7wi8oa": "f1lgdqhv",
+    "B250r6j": "f1veetlj",
+    "ypdvl1": "fu12m3e",
+    "Bw5jdd4": "fi9guym",
+    "Bdjie01": "fcdjl4u"
   },
   "focusIndicatorHorizontal": {
     "B486eqv": "f2hkw1w",
-    "c2y4jd": "fsofd9k",
+    "vchsgm": "fbiesyy",
+    "ozrjjd": ["fq2kn9", "f1jxwnad"],
+    "B7lelfh": "f1il7mou",
+    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
     "B8vm7ur": "f12sql3b",
     "f4hv8x": "f1i4q40k",
     "Gpan81": "fcrbge9",
-    "z7afg": "ft464mn",
     "rsjj6t": "fskqmiq",
-    "Bqsd8kq": "f2gy8jn",
-    "sfhsbh": "f1pke3uf",
-    "Bugh3ej": "f18xdlq9",
-    "hpanx6": "f1114nks",
-    "Bjkpy09": "f1n40nz3",
-    "Jxg1p8": "f1iimkc5",
-    "Bc94xmo": ["felaku1", "fsrbqhn"],
-    "Bj23z95": ["fsrbqhn", "felaku1"]
+    "E86f5s": "f1kbdjx9",
+    "f5nhos": ["fw1d893", "fpuz8dn"],
+    "Bhtq6h7": "f14hlsw1",
+    "Bubk9yy": ["fpuz8dn", "fw1d893"],
+    "dzajus": "f1bkt4b4",
+    "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
+    "Byq6oy9": "fyyqeim",
+    "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
+    "Bi8bqab": ["f1aneyfs", "f15nmyc0"],
+    "kq6z4e": ["f15nmyc0", "f1aneyfs"],
+    "l5tc3q": ["f3cpy5b", "f13v6kgv"],
+    "d1z3ck": ["f13v6kgv", "f3cpy5b"],
+    "epcuuz": "filx0we",
+    "Ba33l6n": ["f1horip2", "fgnx9ah"],
+    "va7z1g": "fkii2tb",
+    "Bmi6mq9": ["fgnx9ah", "f1horip2"],
+    "Bjkpy09": "f11tdyqf",
+    "Jxg1p8": "f1blztld",
+    "Bc94xmo": ["fc3tncn", "f1veb610"],
+    "Bj23z95": ["f1veb610", "fc3tncn"]
   },
   "focusIndicatorVertical": {
     "B486eqv": "f2hkw1w",
-    "c2y4jd": "fsofd9k",
+    "vchsgm": "fbiesyy",
+    "ozrjjd": ["fq2kn9", "f1jxwnad"],
+    "B7lelfh": "f1il7mou",
+    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
     "B8vm7ur": "f12sql3b",
     "f4hv8x": "f1i4q40k",
     "Gpan81": "fcrbge9",
-    "z7afg": "ft464mn",
     "rsjj6t": "fskqmiq",
-    "Bqsd8kq": "f2gy8jn",
-    "sfhsbh": "f1pke3uf",
-    "Bugh3ej": "f18xdlq9",
-    "hpanx6": "f1114nks",
-    "Bjkpy09": "f1e36cb5",
-    "Jxg1p8": "f1m0noy9",
-    "Bc94xmo": ["ftbpds4", "f1ubgg62"],
-    "Bj23z95": ["f1ubgg62", "ftbpds4"]
+    "E86f5s": "f1kbdjx9",
+    "f5nhos": ["fw1d893", "fpuz8dn"],
+    "Bhtq6h7": "f14hlsw1",
+    "Bubk9yy": ["fpuz8dn", "fw1d893"],
+    "dzajus": "f1bkt4b4",
+    "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
+    "Byq6oy9": "fyyqeim",
+    "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
+    "Bi8bqab": ["f1aneyfs", "f15nmyc0"],
+    "kq6z4e": ["f15nmyc0", "f1aneyfs"],
+    "l5tc3q": ["f3cpy5b", "f13v6kgv"],
+    "d1z3ck": ["f13v6kgv", "f3cpy5b"],
+    "epcuuz": "filx0we",
+    "Ba33l6n": ["f1horip2", "fgnx9ah"],
+    "va7z1g": "fkii2tb",
+    "Bmi6mq9": ["fgnx9ah", "f1horip2"],
+    "Bjkpy09": "f1n40nz3",
+    "Jxg1p8": "f1iimkc5",
+    "Bc94xmo": ["f1v1vptr", "f17zmyg5"],
+    "Bj23z95": ["f17zmyg5", "f1v1vptr"]
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".femm8af{grid-template-areas:\"slider\";}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1sdsnyy{touch-action:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1oiokrs{justify-items:center;}", ".f1c9or7v{--fui-slider-thumb-size:16px;}", ".flte3hh{--fui-slider-rail-size:2px;}", ".f1pye7a0{--fui-slider-thumb-size:20px;}", ".fkfeez5{--fui-slider-rail-size:4px;}", ".fyvtabn{min-width:120px;}", ".f1lzqqms{height:var(--fui-slider-thumb-size);}", ".fg8321j{width:var(--fui-slider-thumb-size);}", ".f1pzv1zu{min-height:120px;}", ".f1px5gne{grid-template-columns:var(--fui-slider-thumb-size);}", ".fv45gaj{--fui-slider-rail-color:var(--colorNeutralStrokeAccessible);}", ".fdbupyo{--fui-slider-progress-color:var(--colorCompoundBrandBackground);}", ".f101zkkn{--fui-slider-thumb-color:var(--colorCompoundBrandBackground);}", ".f18mka2b{--fui-slider-thumb-color:var(--colorNeutralForegroundDisabled);}", ".f7gtiye{--fui-slider-rail-color:var(--colorNeutralBackgroundDisabled);}", ".fdmjs6{--fui-slider-progress-color:var(--colorNeutralForegroundDisabled);}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1n40nz3:focus-within:after{top:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f1iimkc5:focus-within:after{bottom:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .felaku1:focus-within:after{left:calc(0px - 2px - 10px);}", "[data-keyboard-nav] .fsrbqhn:focus-within:after{right:calc(0px - 2px - 10px);}", "[data-keyboard-nav] .f1e36cb5:focus-within:after{top:calc(0px - 2px - 10px);}", "[data-keyboard-nav] .f1m0noy9:focus-within:after{bottom:calc(0px - 2px - 10px);}", "[data-keyboard-nav] .ftbpds4:focus-within:after{left:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f1ubgg62:focus-within:after{right:calc(0px - 2px - 6px);}"],
-  "h": [".flfk056:hover{--fui-slider-thumb-color:var(--colorBrandBackgroundHover);}", ".f1g3da1l:hover{--fui-slider-progress-color:var(--colorBrandBackgroundHover);}"],
-  "a": [".f1i0j5bm:active{--fui-slider-thumb-color:var(--colorBrandBackgroundPressed);}", ".fcubes2:active{--fui-slider-progress-color:var(--colorBrandBackgroundPressed);}"],
-  "t": ["@media (forced-colors: active){.f4xbgjg{--fui-slider-rail-color:CanvasText;}}", "@media (forced-colors: active){.f195922{--fui-slider-thumb-color:Highlight;}}", "@media (forced-colors: active){.ftryjgv{--fui-slider-progress-color:Highlight;}}", "@media (forced-colors: active){.f9x48s8:hover{--fui-slider-thumb-color:Highlight;}}", "@media (forced-colors: active){.fj3o9kf:hover{--fui-slider-progress-color:Highlight;}}", "@media (forced-colors: active){.fp7twcv{--fui-slider-rail-color:GrayText;}}", "@media (forced-colors: active){.fo1xztc{--fui-slider-thumb-color:GrayText;}}", "@media (forced-colors: active){.fxmtfj{--fui-slider-progress-color:GrayText;}}"],
+  "d": [".f10pi13n{position:relative;}", ".fwk3njj{display:inline-grid;}", ".femm8af{grid-template-areas:\"slider\";}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1sdsnyy{touch-action:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1oiokrs{justify-items:center;}", ".f1agqo6f{--fui-Slider__thumb--size:16px;}", ".f1i7ztpd{--fui-Slider__rail--size:2px;}", ".f1pha7fy{min-height:24px;}", ".f1a78h9h{--fui-Slider__thumb--size:20px;}", ".fuok0yf{--fui-Slider__rail--size:4px;}", ".f1nxs5xn{min-height:32px;}", ".fyvtabn{min-width:120px;}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1pzv1zu{min-height:120px;}", ".f13qjosx{grid-template-columns:var(--fui-Slider__thumb--size);}", ".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);}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f11tdyqf:focus-within:after{top:calc(0px - 2px - -2px);}", "[data-keyboard-nav] .f1blztld:focus-within:after{bottom:calc(0px - 2px - -2px);}", "[data-keyboard-nav] .fc3tncn:focus-within:after{left:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .f1veb610:focus-within:after{right:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .f1n40nz3:focus-within:after{top:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f1iimkc5:focus-within:after{bottom:calc(0px - 2px - 6px);}", "[data-keyboard-nav] .f1v1vptr:focus-within:after{left:calc(0px - 2px - 4px);}", "[data-keyboard-nav] .f17zmyg5:focus-within:after{right: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);}"],
+  "t": ["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", "@media (forced-colors: active){.f1xddb6{--fui-Slider__thumb--color:Highlight;}}", "@media (forced-colors: active){.fcdikl{--fui-Slider__progress--color:Highlight;}}", "@media (forced-colors: active){.fhpzgm6:hover{--fui-Slider__thumb--color:Highlight;}}", "@media (forced-colors: active){.f1q6pm3h:hover{--fui-Slider__progress--color:Highlight;}}", "@media (forced-colors: active){.fu12m3e{--fui-Slider__rail--color:GrayText;}}", "@media (forced-colors: active){.fi9guym{--fui-Slider__thumb--color:GrayText;}}", "@media (forced-colors: active){.fcdjl4u{--fui-Slider__progress--color:GrayText;}}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
 /**
  * Styles for the rail slot
  */
 
-exports.useRailStyles = /*#__PURE__*/react_1.__styles({
+
+const useRailStyles = /*#__PURE__*/react_1.__styles({
   "rail": {
     "Bbmb7ep": ["fnivh3a", "fc7yr5o"],
     "Beyfa6y": ["fc7yr5o", "fnivh3a"],
@@ -133,40 +179,41 @@ exports.useRailStyles = /*#__PURE__*/react_1.__styles({
     "Bw0ie65": "f1xmzt6x",
     "qhf8xq": "f10pi13n",
     "Bvjb7m6": "fdgv6k0",
-    "Bcmaq0h": "f1m1tlam",
+    "Bcmaq0h": "f1gvmols",
     "Bpd4iqm": "fpvhumw",
     "oeaueh": "f1yog68k",
     "Bw0xxkn": "f13sgyd8",
     "rurcny": "f99sooz",
     "xx9plb": "fxf9f1y",
-    "Baov28r": "f1yc1t50"
+    "Baov28r": "f1ijinm9"
   },
   "horizontal": {
     "a9b677": "fly5x3f",
-    "Bqenvij": "f1kwo5zd",
+    "Bqenvij": "f1cy86ho",
     "Byque4d": ["f1oqflmk", "fimcj7z"],
     "qd6xl9": ["fimcj7z", "f1oqflmk"],
-    "Bbc2r3f": "few7gnq"
+    "Bbc2r3f": "fq8vbpg"
   },
   "vertical": {
-    "a9b677": "f1r3duln",
+    "a9b677": "fqxfnkd",
     "Bqenvij": "f1l02sjl",
-    "Bdn98qo": "f81jpj",
+    "Bdn98qo": "f61axi9",
     "Bf8kmfk": "f1p8196g",
     "Bj2wrql": "f1t2u064"
   }
 }, {
-  "d": [".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1aehjj5{pointer-events:none;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".f1m1tlam{background-image:linear-gradient(\n      var(--fui-slider-rail-direction),\n      var(--fui-slider-rail-color) 0%,\n      var(--fui-slider-rail-color) var(--fui-slider-rail-offset),\n      var(--fui-slider-progress-color) var(--fui-slider-rail-offset),\n      var(--fui-slider-progress-color) calc(var(--fui-slider-rail-offset) + var(--fui-slider-rail-progress)),\n      var(--fui-slider-rail-color) calc(var(--fui-slider-rail-offset) + var(--fui-slider-rail-progress))\n    );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f99sooz:before{content:'';}", ".fxf9f1y:before{position:absolute;}", ".f1yc1t50:before{background-image:repeating-linear-gradient(\n        var(--fui-slider-rail-direction),\n        #0000 0%,\n        #0000 calc(var(--fui-slider-rail-steps-percent) - 1px),\n        var(--colorNeutralBackground1) calc(var(--fui-slider-rail-steps-percent) - 1px),\n        var(--colorNeutralBackground1) var(--fui-slider-rail-steps-percent)\n      );}", ".fly5x3f{width:100%;}", ".f1kwo5zd{height:var(--fui-slider-rail-size);}", ".f1oqflmk:before{left:-1px;}", ".fimcj7z:before{right:-1px;}", ".few7gnq:before{height:var(--fui-slider-rail-size);}", ".f1r3duln{width:var(--fui-slider-rail-size);}", ".f1l02sjl{height:100%;}", ".f81jpj:before{width:var(--fui-slider-rail-size);}", ".f1p8196g:before{top:-1px;}", ".f1t2u064:before{bottom:1px;}"]
+  "d": [".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1aehjj5{pointer-events:none;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".f1gvmols{background-image:linear-gradient(\n      var(--fui-Slider__rail--direction),\n      var(--fui-Slider__rail--color) 0%,\n      var(--fui-Slider__rail--color) var(--fui-Slider__rail--offset),\n      var(--fui-Slider__progress--color) var(--fui-Slider__rail--offset),\n      var(--fui-Slider__progress--color) calc(var(--fui-Slider__rail--offset) + var(--fui-Slider__rail--progress)),\n      var(--fui-Slider__rail--color) calc(var(--fui-Slider__rail--offset) + var(--fui-Slider__rail--progress))\n    );}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".f99sooz:before{content:'';}", ".fxf9f1y:before{position:absolute;}", ".f1ijinm9:before{background-image:repeating-linear-gradient(\n        var(--fui-Slider__rail--direction),\n        #0000 0%,\n        #0000 calc(var(--fui-Slider__rail--steps-percent) - 1px),\n        var(--colorNeutralBackground1) calc(var(--fui-Slider__rail--steps-percent) - 1px),\n        var(--colorNeutralBackground1) var(--fui-Slider__rail--steps-percent)\n      );}", ".fly5x3f{width:100%;}", ".f1cy86ho{height:var(--fui-Slider__rail--size);}", ".f1oqflmk:before{left:-1px;}", ".fimcj7z:before{right:-1px;}", ".fq8vbpg:before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f61axi9:before{width:var(--fui-Slider__rail--size);}", ".f1p8196g:before{top:-1px;}", ".f1t2u064:before{bottom:1px;}"]
 });
 /**
  * Styles for the thumb slot
  */
 
-exports.useThumbStyles = /*#__PURE__*/react_1.__styles({
+
+const useThumbStyles = /*#__PURE__*/react_1.__styles({
   "thumb": {
     "qhf8xq": "f1euv43f",
-    "a9b677": "fg8321j",
-    "Bqenvij": "f1lzqqms",
+    "a9b677": "f174ca62",
+    "Bqenvij": "f1yfdkfd",
     "Bkecrkj": "f1aehjj5",
     "oeaueh": "f1s6fcnf",
     "Bvjb7m6": "fdgv6k0",
@@ -174,8 +221,8 @@ exports.useThumbStyles = /*#__PURE__*/react_1.__styles({
     "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
     "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
     "Btl43ni": ["f1s8kh49", "f1djnp8u"],
-    "E5pizo": "f1u7hpx4",
-    "De3pzq": "f1hi3q3y",
+    "E5pizo": "fof7hq0",
+    "De3pzq": "foksa45",
     "Bz10aip": ["f13gfj74", "f1nfknbn"],
     "xx9plb": "fxf9f1y",
     "Bf8kmfk": "frdto5n",
@@ -188,10 +235,10 @@ exports.useThumbStyles = /*#__PURE__*/react_1.__styles({
     "B2r1szc": ["f13lz1i8", "fiow2ne"],
     "Bmqnesq": "f170vdtw",
     "rurcny": "f99sooz",
-    "dj0dih": "f1gz1mfd",
-    "D4ky5z": ["f51lb3k", "fd7wuyc"],
-    "k1i1uq": "f1mlyj7a",
-    "Bcasopp": ["fd7wuyc", "f51lb3k"],
+    "dj0dih": "f1i9s981",
+    "D4ky5z": ["fqfd43n", "fgpokn8"],
+    "k1i1uq": "f19s890",
+    "Bcasopp": ["fgpokn8", "fqfd43n"],
     "Bdixowu": "f1bwkb58",
     "cqycoz": ["fiio4mc", "fc8z0qo"],
     "Epwjcz": "f1m5ya7j",
@@ -202,10 +249,10 @@ exports.useThumbStyles = /*#__PURE__*/react_1.__styles({
     "Bohd3ja": ["f2jll41", "f1yx8xct"]
   },
   "disabled": {
-    "dj0dih": "f1gz1mfd",
-    "D4ky5z": ["f51lb3k", "fd7wuyc"],
-    "k1i1uq": "f1mlyj7a",
-    "Bcasopp": ["fd7wuyc", "f51lb3k"],
+    "dj0dih": "f1i9s981",
+    "D4ky5z": ["fqfd43n", "fgpokn8"],
+    "k1i1uq": "f19s890",
+    "Bcasopp": ["fgpokn8", "fqfd43n"],
     "Bdixowu": "f1bwkb58",
     "cqycoz": ["fiio4mc", "fc8z0qo"],
     "Epwjcz": "f1m5ya7j",
@@ -216,19 +263,20 @@ exports.useThumbStyles = /*#__PURE__*/react_1.__styles({
     "Bohd3ja": ["f16ep8jm", "f1yueqd5"]
   },
   "horizontal": {
-    "oyh7mz": ["f3ten88", "f81l3fp"]
+    "oyh7mz": ["foa2ioz", "fjmilum"]
   },
   "vertical": {
     "Bz10aip": "f5cv5a3",
-    "B5kzvoi": "ftu6jbq"
+    "B5kzvoi": "f1k2fpdo"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".fg8321j{width:var(--fui-slider-thumb-size);}", ".f1lzqqms{height:var(--fui-slider-thumb-size);}", ".f1aehjj5{pointer-events:none;}", ".f1s6fcnf{outline-style:none;}", ".fdgv6k0{forced-color-adjust:none;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1u7hpx4{box-shadow:0 0 0 calc(var(--fui-slider-thumb-size) * .2) var(--colorNeutralBackground1) inset;}", ".f1hi3q3y{background-color:var(--fui-slider-thumb-color);}", ".f13gfj74{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".f1nfknbn{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f170vdtw:before{box-sizing:border-box;}", ".f99sooz:before{content:'';}", ".f1gz1mfd:before{border-top-width:calc(var(--fui-slider-thumb-size) * .05);}", ".f51lb3k:before{border-right-width:calc(var(--fui-slider-thumb-size) * .05);}", ".fd7wuyc:before{border-left-width:calc(var(--fui-slider-thumb-size) * .05);}", ".f1mlyj7a:before{border-bottom-width:calc(var(--fui-slider-thumb-size) * .05);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".f3ten88{left:var(--fui-slider-thumb-position);}", ".f81l3fp{right:var(--fui-slider-thumb-position);}", ".f5cv5a3{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".ftu6jbq{bottom:var(--fui-slider-thumb-position);}"]
+  "d": [".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;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fof7hq0{box-shadow:0 0 0 calc(var(--fui-Slider__thumb--size) * .2) var(--colorNeutralBackground1) inset;}", ".foksa45{background-color:var(--fui-Slider__thumb--color);}", ".f13gfj74{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}", ".f1nfknbn{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f170vdtw:before{box-sizing:border-box;}", ".f99sooz:before{content:'';}", ".f1i9s981:before{border-top-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fqfd43n:before{border-right-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fgpokn8:before{border-left-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f19s890:before{border-bottom-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".foa2ioz{left:var(--fui-Slider__thumb--position);}", ".fjmilum{right:var(--fui-Slider__thumb--position);}", ".f5cv5a3{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}", ".f1k2fpdo{bottom:var(--fui-Slider__thumb--position);}"]
 });
 /**
  * Styles for the Input slot
  */
 
+
 const useInputStyles = /*#__PURE__*/react_1.__styles({
   "input": {
     "abs64n": "fk73vx1",
@@ -246,16 +294,16 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
     "Frg6f3": ["f1tyq0we", "f11qmguv"]
   },
   "horizontal": {
-    "Bqenvij": "f1lzqqms",
-    "a9b677": "f1sf2j80"
+    "Bqenvij": "f1yfdkfd",
+    "a9b677": "f1kl1iyt"
   },
   "vertical": {
-    "Bqenvij": "fb80yd4",
-    "a9b677": "fg8321j",
+    "Bqenvij": "fxc22c6",
+    "a9b677": "f174ca62",
     "Brp00wb": "f1r9mf01"
   }
 }, {
-  "d": [".fk73vx1{opacity:0;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1lzqqms{height:var(--fui-slider-thumb-size);}", ".f1sf2j80{width:calc(100% + var(--fui-slider-thumb-size));}", ".fb80yd4{height:calc(100% + var(--fui-slider-thumb-size));}", ".fg8321j{width:var(--fui-slider-thumb-size);}", ".f1r9mf01{-webkit-appearance:slider-vertical;}"]
+  "d": [".fk73vx1{opacity:0;}", ".fy0oii6{grid-row-start:slider;}", ".f11g2wli{grid-row-end:slider;}", ".f1xewaeb{grid-column-start:slider;}", ".f1xmzt6x{grid-column-end:slider;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f1kl1iyt{width:calc(100% + var(--fui-Slider__thumb--size));}", ".fxc22c6{height:calc(100% + var(--fui-Slider__thumb--size));}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1r9mf01{-webkit-appearance:slider-vertical;}"]
 });
 /**
  * Apply styling to the Slider slots based on the state
@@ -263,14 +311,15 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
 
 
 const useSliderStyles_unstable = state => {
-  const rootStyles = exports.useRootStyles();
-  const railStyles = exports.useRailStyles();
-  const thumbStyles = exports.useThumbStyles();
+  const rootStyles = useRootStyles();
+  const railStyles = useRailStyles();
+  const thumbStyles = useThumbStyles();
   const inputStyles = useInputStyles();
-  state.root.className = react_1.mergeClasses(exports.sliderClassName, rootStyles.root, state.vertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], state.vertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
-  state.rail.className = react_1.mergeClasses(railStyles.rail, state.vertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
-  state.thumb.className = react_1.mergeClasses(thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
-  state.input.className = react_1.mergeClasses(inputStyles.input, state.vertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
+  const isVertical = state.vertical;
+  state.root.className = react_1.mergeClasses(exports.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 = react_1.mergeClasses(exports.sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+  state.thumb.className = react_1.mergeClasses(exports.sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
+  state.input.className = react_1.mergeClasses(exports.sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
   return state;
 };
 

package/lib-commonjs/components/Slider/useSliderStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,eAAA,GAAkB,YAAlB;AAEb,MAAM,YAAY,GAAG,yBAArB;AACA,MAAM,WAAW,GAAG,wBAApB;AACA,MAAM,YAAY,GAAG,yBAArB;AACA,MAAM,gBAAgB,GAAG,6BAAzB;AACA,MAAM,aAAa,GAAG,0BAAtB;AAEa,OAAA,CAAA,gBAAA,GAAmB,6BAAnB;AACA,OAAA,CAAA,aAAA,GAAgB,0BAAhB;AACA,OAAA,CAAA,eAAA,GAAkB,4BAAlB;AACA,OAAA,CAAA,mBAAA,GAAsB,iCAAtB;AACA,OAAA,CAAA,gBAAA,GAAmB,6BAAnB;AAEb;;AAEG;;AACU,OAAA,CAAA,aAAA,gBAAgB,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB;AA6Eb;;AAEG;;AACU,OAAA,CAAA,aAAA,gBAAgB,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB;AAyDb;;AAEG;;AACU,OAAA,CAAA,cAAA,gBAAiB,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;AAsCb;;AAEG;;AACH,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAqBA;;AAEG;;;AACI,MAAM,wBAAwB,GAAI,KAAD,IAAoC;AAC1E,QAAM,UAAU,GAAG,OAAA,CAAA,aAAA,EAAnB;AACA,QAAM,UAAU,GAAG,OAAA,CAAA,aAAA,EAAnB;AACA,QAAM,WAAW,GAAG,OAAA,CAAA,cAAA,EAApB;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eADqB,EAErB,UAAU,CAAC,IAFU,EAGrB,KAAK,CAAC,QAAN,GAAiB,UAAU,CAAC,sBAA5B,GAAqD,UAAU,CAAC,wBAH3C,EAIrB,UAAU,CAAC,KAAK,CAAC,IAAP,CAJW,EAKrB,KAAK,CAAC,QAAN,GAAiB,UAAU,CAAC,QAA5B,GAAuC,UAAU,CAAC,UAL7B,EAMrB,KAAK,CAAC,QAAN,GAAiB,UAAU,CAAC,QAA5B,GAAuC,UAAU,CAAC,OAN7B,EAOrB,KAAK,CAAC,IAAN,CAAW,SAPU,CAAvB;AAUA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,UAAU,CAAC,IADU,EAErB,KAAK,CAAC,QAAN,GAAiB,UAAU,CAAC,QAA5B,GAAuC,UAAU,CAAC,UAF7B,EAGrB,KAAK,CAAC,IAAN,CAAW,SAHU,CAAvB;AAMA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,WAAW,CAAC,KADU,EAEtB,KAAK,CAAC,QAAN,GAAiB,WAAW,CAAC,QAA7B,GAAwC,WAAW,CAAC,UAF9B,EAGtB,KAAK,CAAC,QAAN,IAAkB,WAAW,CAAC,QAHR,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;AAOA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,WAAW,CAAC,KADU,EAEtB,KAAK,CAAC,QAAN,GAAiB,WAAW,CAAC,QAA7B,GAAwC,WAAW,CAAC,UAF9B,EAGtB,KAAK,CAAC,KAAN,CAAY,SAHU,CAAxB;AAMA,SAAO,KAAP;AACD,CApCM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState } from './Slider.types';\n\nexport const sliderClassName = 'fui-Slider';\n\nconst thumbSizeVar = `--fui-slider-thumb-size`;\nconst railSizeVar = `--fui-slider-rail-size`;\nconst railColorVar = `--fui-slider-rail-color`;\nconst progressColorVar = `--fui-slider-progress-color`;\nconst thumbColorVar = `--fui-slider-thumb-color`;\n\nexport const railDirectionVar = `--fui-slider-rail-direction`;\nexport const railOffsetVar = `--fui-slider-rail-offset`;\nexport const railProgressVar = `--fui-slider-rail-progress`;\nexport const railStepsPercentVar = `--fui-slider-rail-steps-percent`;\nexport const thumbPositionVar = `--fui-slider-thumb-position`;\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n  root: {\n    position: 'relative',\n    display: 'inline-grid',\n    gridTemplateAreas: '\"slider\"',\n    userSelect: 'none',\n    touchAction: 'none',\n    alignItems: 'center',\n    justifyItems: 'center',\n  },\n\n  small: {\n    [thumbSizeVar]: '16px',\n    [railSizeVar]: '2px',\n  },\n\n  medium: {\n    [thumbSizeVar]: '20px',\n    [railSizeVar]: '4px',\n  },\n\n  horizontal: {\n    minWidth: '120px',\n    height: `var(${thumbSizeVar})`,\n  },\n\n  vertical: {\n    width: `var(${thumbSizeVar})`,\n    minHeight: '120px',\n    gridTemplateColumns: `var(${thumbSizeVar})`,\n  },\n\n  enabled: {\n    [railColorVar]: tokens.colorNeutralStrokeAccessible,\n    [progressColorVar]: tokens.colorCompoundBrandBackground,\n    [thumbColorVar]: tokens.colorCompoundBrandBackground,\n    ':hover': {\n      [thumbColorVar]: tokens.colorBrandBackgroundHover,\n      [progressColorVar]: tokens.colorBrandBackgroundHover,\n    },\n    ':active': {\n      [thumbColorVar]: tokens.colorBrandBackgroundPressed,\n      [progressColorVar]: tokens.colorBrandBackgroundPressed,\n    },\n    '@media (forced-colors: active)': {\n      [railColorVar]: 'CanvasText',\n      [thumbColorVar]: 'Highlight',\n      [progressColorVar]: 'Highlight',\n      ':hover': {\n        [thumbColorVar]: 'Highlight',\n        [progressColorVar]: 'Highlight',\n      },\n    },\n  },\n\n  disabled: {\n    [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n    [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n    [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      [railColorVar]: 'GrayText',\n      [thumbColorVar]: 'GrayText',\n      [progressColorVar]: 'GrayText',\n    },\n  },\n\n  focusIndicatorHorizontal: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: { outlineOffset: { top: '6px', bottom: '6px', left: '10px', right: '10px' } },\n  }),\n\n  focusIndicatorVertical: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: { outlineOffset: { top: '10px', bottom: '10px', left: '6px', right: '6px' } },\n  }),\n});\n\n/**\n * Styles for the rail slot\n */\nexport const useRailStyles = makeStyles({\n  rail: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n    pointerEvents: 'none',\n    gridRowStart: 'slider',\n    gridRowEnd: 'slider',\n    gridColumnStart: 'slider',\n    gridColumnEnd: 'slider',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    // Background gradient represents the progress of the slider\n    backgroundImage: `linear-gradient(\n      var(${railDirectionVar}),\n      var(${railColorVar}) 0%,\n      var(${railColorVar}) var(${railOffsetVar}),\n      var(${progressColorVar}) var(${railOffsetVar}),\n      var(${progressColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar})),\n      var(${railColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar}))\n    )`,\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    ':before': {\n      content: \"''\",\n      position: 'absolute',\n      // Repeating gradient represents the steps if provided\n      backgroundImage: `repeating-linear-gradient(\n        var(${railDirectionVar}),\n        #0000 0%,\n        #0000 calc(var(${railStepsPercentVar}) - 1px),\n        ${tokens.colorNeutralBackground1} calc(var(${railStepsPercentVar}) - 1px),\n        ${tokens.colorNeutralBackground1} var(${railStepsPercentVar})\n      )`,\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${railSizeVar})`,\n    ':before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${railSizeVar})`,\n    height: '100%',\n    ':before': {\n      width: `var(${railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nexport const useThumbStyles = makeStyles({\n  thumb: {\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n    backgroundColor: `var(${thumbColorVar})`,\n    transform: 'translateX(-50%)',\n    ':before': {\n      position: 'absolute',\n      top: '0px',\n      left: '0px',\n      bottom: '0px',\n      right: '0px',\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      boxSizing: 'border-box',\n      content: \"''\",\n      ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n    },\n  },\n  disabled: {\n    ':before': {\n      ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n    },\n  },\n  horizontal: {\n    left: `var(${thumbPositionVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${thumbPositionVar})`,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    opacity: 0,\n    gridRowStart: 'slider',\n    gridRowEnd: 'slider',\n    gridColumnStart: 'slider',\n    gridColumnEnd: 'slider',\n    ...shorthands.padding(0),\n    ...shorthands.margin(0),\n  },\n  horizontal: {\n    height: `var(${thumbSizeVar})`,\n    width: `calc(100% + var(${thumbSizeVar}))`,\n  },\n  vertical: {\n    height: `calc(100% + var(${thumbSizeVar}))`,\n    width: `var(${thumbSizeVar})`,\n    '-webkit-appearance': 'slider-vertical',\n  },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n  const rootStyles = useRootStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    sliderClassName,\n    rootStyles.root,\n    state.vertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n    rootStyles[state.size!],\n    state.vertical ? rootStyles.vertical : rootStyles.horizontal,\n    state.disabled ? rootStyles.disabled : rootStyles.enabled,\n    state.root.className,\n  );\n\n  state.rail.className = mergeClasses(\n    railStyles.rail,\n    state.vertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.disabled && thumbStyles.disabled,\n    state.thumb.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputStyles.input,\n    state.vertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n  root: 'fui-Slider',\n  rail: 'fui-Slider__rail',\n  thumb: 'fui-Slider__thumb',\n  input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\n\nexport const sliderCSSVars = {\n  railDirectionVar: `--fui-Slider__rail--direction`,\n  railOffsetVar: `--fui-Slider__rail--offset`,\n  railProgressVar: `--fui-Slider__rail--progress`,\n  railStepsPercentVar: `--fui-Slider__rail--steps-percent`,\n  thumbPositionVar: `--fui-Slider__thumb--position`,\n};\n\nconst { railDirectionVar, railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar } = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    position: 'relative',\n    display: 'inline-grid',\n    gridTemplateAreas: '\"slider\"',\n    userSelect: 'none',\n    touchAction: 'none',\n    alignItems: 'center',\n    justifyItems: 'center',\n  },\n\n  small: {\n    [thumbSizeVar]: '16px',\n    [railSizeVar]: '2px',\n    minHeight: '24px',\n  },\n\n  medium: {\n    [thumbSizeVar]: '20px',\n    [railSizeVar]: '4px',\n    minHeight: '32px',\n  },\n\n  horizontal: {\n    minWidth: '120px',\n    height: `var(${thumbSizeVar})`,\n  },\n\n  vertical: {\n    width: `var(${thumbSizeVar})`,\n    minHeight: '120px',\n    gridTemplateColumns: `var(${thumbSizeVar})`,\n  },\n\n  enabled: {\n    [railColorVar]: tokens.colorNeutralStrokeAccessible,\n    [progressColorVar]: tokens.colorCompoundBrandBackground,\n    [thumbColorVar]: tokens.colorCompoundBrandBackground,\n    ':hover': {\n      [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n      [progressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n    },\n    ':active': {\n      [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n      [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n    },\n    '@media (forced-colors: active)': {\n      [railColorVar]: 'CanvasText',\n      [thumbColorVar]: 'Highlight',\n      [progressColorVar]: 'Highlight',\n      ':hover': {\n        [thumbColorVar]: 'Highlight',\n        [progressColorVar]: 'Highlight',\n      },\n    },\n  },\n\n  disabled: {\n    [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n    [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n    [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      [railColorVar]: 'GrayText',\n      [thumbColorVar]: 'GrayText',\n      [progressColorVar]: 'GrayText',\n    },\n  },\n\n  focusIndicatorHorizontal: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },\n  }),\n\n  focusIndicatorVertical: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },\n  }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n    pointerEvents: 'none',\n    gridRowStart: 'slider',\n    gridRowEnd: 'slider',\n    gridColumnStart: 'slider',\n    gridColumnEnd: 'slider',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    // Background gradient represents the progress of the slider\n    backgroundImage: `linear-gradient(\n      var(${railDirectionVar}),\n      var(${railColorVar}) 0%,\n      var(${railColorVar}) var(${railOffsetVar}),\n      var(${progressColorVar}) var(${railOffsetVar}),\n      var(${progressColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar})),\n      var(${railColorVar}) calc(var(${railOffsetVar}) + var(${railProgressVar}))\n    )`,\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    ':before': {\n      content: \"''\",\n      position: 'absolute',\n      // Repeating gradient represents the steps if provided\n      backgroundImage: `repeating-linear-gradient(\n        var(${railDirectionVar}),\n        #0000 0%,\n        #0000 calc(var(${railStepsPercentVar}) - 1px),\n        ${tokens.colorNeutralBackground1} calc(var(${railStepsPercentVar}) - 1px),\n        ${tokens.colorNeutralBackground1} var(${railStepsPercentVar})\n      )`,\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${railSizeVar})`,\n    ':before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${railSizeVar})`,\n    height: '100%',\n    ':before': {\n      width: `var(${railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n    backgroundColor: `var(${thumbColorVar})`,\n    transform: 'translateX(-50%)',\n    ':before': {\n      position: 'absolute',\n      top: '0px',\n      left: '0px',\n      bottom: '0px',\n      right: '0px',\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      boxSizing: 'border-box',\n      content: \"''\",\n      ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n    },\n  },\n  disabled: {\n    ':before': {\n      ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n    },\n  },\n  horizontal: {\n    left: `var(${thumbPositionVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${thumbPositionVar})`,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    opacity: 0,\n    gridRowStart: 'slider',\n    gridRowEnd: 'slider',\n    gridColumnStart: 'slider',\n    gridColumnEnd: 'slider',\n    ...shorthands.padding(0),\n    ...shorthands.margin(0),\n  },\n  horizontal: {\n    height: `var(${thumbSizeVar})`,\n    width: `calc(100% + var(${thumbSizeVar}))`,\n  },\n  vertical: {\n    height: `calc(100% + var(${thumbSizeVar}))`,\n    width: `var(${thumbSizeVar})`,\n    '-webkit-appearance': 'slider-vertical',\n  },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n  const rootStyles = useRootStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const isVertical = state.vertical;\n\n  state.root.className = mergeClasses(\n    sliderClassNames.root,\n    rootStyles.root,\n    isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n    rootStyles[state.size!],\n    isVertical ? rootStyles.vertical : rootStyles.horizontal,\n    state.disabled ? rootStyles.disabled : rootStyles.enabled,\n    state.root.className,\n  );\n\n  state.rail.className = mergeClasses(\n    sliderClassNames.rail,\n    railStyles.rail,\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    sliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.disabled && thumbStyles.disabled,\n    state.thumb.className,\n  );\n\n  state.input.className = mergeClasses(\n    sliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.d.ts

@@ -1 +1,2 @@
-export * from './Slider';
+export { Slider, renderSlider_unstable, sliderClassNames, useSliderState_unstable, useSliderStyles_unstable, useSlider_unstable, } from './Slider';
+export type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';