@fluentui/react-slider 9.1.83 → 9.1.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +25 -2
  2. package/lib/components/Slider/useSliderState.js +6 -5
  3. package/lib/components/Slider/useSliderState.js.map +1 -1
  4. package/lib/components/Slider/useSliderStyles.styles.js +130 -81
  5. package/lib/components/Slider/useSliderStyles.styles.js.map +1 -1
  6. package/lib-commonjs/components/Slider/useSliderState.js +6 -5
  7. package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
  8. package/lib-commonjs/components/Slider/useSliderStyles.styles.js +169 -272
  9. package/lib-commonjs/components/Slider/useSliderStyles.styles.js.map +1 -1
  10. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,12 +1,35 @@
1
1
  # Change Log - @fluentui/react-slider
2
2
 
3
- This log was last generated on Mon, 20 May 2024 12:36:39 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 06 Jun 2024 15:22:21 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.85](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.85)
8
+
9
+ Thu, 06 Jun 2024 15:22:21 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.84..@fluentui/react-slider_v9.1.85)
11
+
12
+ ### Patches
13
+
14
+ - chore: ensure only state or defaultState is provided on useControllableState hook invocation ([PR #31461](https://github.com/microsoft/fluentui/pull/31461) by bernardo.sunderhus@gmail.com)
15
+ - Bump @fluentui/react-field to v9.1.67 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v9.0.39 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
17
+ - Bump @fluentui/react-tabster to v9.21.5 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
19
+
20
+ ## [9.1.84](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.84)
21
+
22
+ Thu, 23 May 2024 08:02:47 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.83..@fluentui/react-slider_v9.1.84)
24
+
25
+ ### Patches
26
+
27
+ - chore: replace usage of .shorthands() in styles ([PR #31449](https://github.com/microsoft/fluentui/pull/31449) by olfedias@microsoft.com)
28
+ - Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
29
+
7
30
  ## [9.1.83](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.83)
8
31
 
9
- Mon, 20 May 2024 12:36:39 GMT
32
+ Mon, 20 May 2024 12:45:04 GMT
10
33
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.82..@fluentui/react-slider_v9.1.83)
11
34
 
12
35
  ### Patches
package/lib/components/Slider/useSliderState.js CHANGED
@@ -7,14 +7,15 @@ const getPercent = (value, min, max)=>{
7
7
  return max === min ? 0 : (value - min) / (max - min) * 100;
8
8
  };
9
9
  export const useSliderState_unstable = (state, props)=>{
10
- const { defaultValue = 0, min = 0, max = 100, step, value } = props;
10
+ const { min = 0, max = 100, step } = props;
11
11
  const { dir } = useFluent();
12
12
  const [currentValue, setCurrentValue] = useControllableState({
13
- state: value !== undefined ? clamp(value, min, max) : undefined,
14
- defaultState: clamp(defaultValue, min, max),
13
+ state: props.value,
14
+ defaultState: props.defaultValue,
15
15
  initialState: 0
16
16
  });
17
- const valuePercent = getPercent(currentValue, min, max);
17
+ const clampedValue = clamp(currentValue, min, max);
18
+ const valuePercent = getPercent(clampedValue, min, max);
18
19
  const inputOnChange = state.input.onChange;
19
20
  const propsOnChange = props.onChange;
20
21
  const onChange = useEventCallback((ev)=>{
@@ -39,7 +40,7 @@ export const useSliderState_unstable = (state, props)=>{
39
40
  ...state.root.style
40
41
  };
41
42
  // Input Props
42
- state.input.value = currentValue;
43
+ state.input.value = clampedValue;
43
44
  state.input.onChange = onChange;
44
45
  return state;
45
46
  };
package/lib/components/Slider/useSliderState.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSliderState.tsx"],"sourcesContent":["import * 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 { SliderState, SliderProps } 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: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\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\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 rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${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"],"names":["React","clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","sliderCSSVars","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","getPercent","value","min","max","useSliderState_unstable","state","props","defaultValue","step","dir","currentValue","setCurrentValue","undefined","defaultState","initialState","valuePercent","inputOnChange","input","onChange","propsOnChange","ev","newValue","Number","target","rootVariables","vertical","root","style"],"mappings":"AAAA,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,OAAoBC;IAC1D,MAAM,EAAEC,eAAe,CAAC,EAAEL,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEK,IAAI,EAAEP,KAAK,EAAE,GAAGK;IAC9D,MAAM,EAAEG,GAAG,EAAE,GAAGd;IAChB,MAAM,CAACe,cAAcC,gBAAgB,GAAGnB,qBAAqB;QAC3Da,OAAOJ,UAAUW,YAAYrB,MAAMU,OAAOC,KAAKC,OAAOS;QACtDC,cAActB,MAAMgB,cAAcL,KAAKC;QACvCW,cAAc;IAChB;IACA,MAAMC,eAAef,WAAWU,cAAcR,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;QACvCU,gBAAgBpB,MAAM8B,UAAUnB,KAAKC;QAErC,IAAIa,iBAAiBA,kBAAkBG,eAAe;YACpDH,cAAcI;QAChB,OAAO,IAAID,eAAe;YACxBA,cAAcC,IAAI;gBAAEnB,OAAOoB;YAAS;QACtC;IACF;IAEA,MAAMG,gBAAgB;QACpB,CAACzB,mBAAmB,EAAEM,MAAMoB,QAAQ,GAAG,SAAShB,QAAQ,QAAQ,UAAU;QAC1E,CAACZ,sBAAsB,EAAEW,QAAQA,OAAO,IAAI,CAAC,EAAE,AAACA,OAAO,MAAQL,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAG;QAC/E,CAACJ,kBAAkB,EAAE,CAAC,EAAEiB,aAAa,CAAC,CAAC;IACzC;IAEA,aAAa;IACbV,MAAMqB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGnB,MAAMqB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdtB,MAAMY,KAAK,CAAChB,KAAK,GAAGS;IACpBL,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
1
+ {"version":3,"sources":["useSliderState.tsx"],"sourcesContent":["import * 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 { SliderState, SliderProps } 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: SliderState, props: SliderProps) => {\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 rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${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 = 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","rootVariables","vertical","root","style"],"mappings":"AAAA,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,OAAoBC;IAC1D,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,gBAAgB;QACpB,CAACzB,mBAAmB,EAAEM,MAAMoB,QAAQ,GAAG,SAASjB,QAAQ,QAAQ,UAAU;QAC1E,CAACX,sBAAsB,EAAEU,QAAQA,OAAO,IAAI,CAAC,EAAE,AAACA,OAAO,MAAQJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAG;QAC/E,CAACJ,kBAAkB,EAAE,CAAC,EAAEiB,aAAa,CAAC,CAAC;IACzC;IAEA,aAAa;IACbV,MAAMqB,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGH,aAAa;QAChB,GAAGnB,MAAMqB,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACdtB,MAAMY,KAAK,CAAChB,KAAK,GAAGa;IACpBT,MAAMY,KAAK,CAACC,QAAQ,GAAGA;IAEvB,OAAOb;AACT,EAAE"}
package/lib/components/Slider/useSliderStyles.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { shorthands, __styles, mergeClasses } from '@griffel/react';
1
+ import { __styles, mergeClasses } from '@griffel/react';
2
2
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
3
  import { tokens } from '@fluentui/react-theme';
4
4
  export const sliderClassNames = {
@@ -91,22 +91,28 @@ const useRootStyles = /*#__PURE__*/__styles({
91
91
  wigs8: "f1p0ul1q",
92
92
  pbfy6t: "f1c901ms",
93
93
  B0v4ure: "f1alokd7",
94
- ghq09: "f78i1la",
95
- B24cy0v: ["f1kvsw7t", "f1bw8brt"],
96
- Bwckmig: "f8k7e5g",
97
- Bvwlmkc: ["f1bw8brt", "f1kvsw7t"],
98
- Bbgo44z: "f1pmxfrl",
99
- Bil7v7r: ["fszkfcr", "f1ap5ily"],
100
- skfxo0: "f57dp0y",
101
- jo1ztg: ["f1ap5ily", "fszkfcr"],
102
- Ba3ybja: ["f11dm2qb", "f136rfnd"],
103
- az1dzo: ["f136rfnd", "f11dm2qb"],
104
- vppk2z: ["fdsq1qd", "f1khssms"],
105
- B6352mv: ["f1khssms", "fdsq1qd"],
106
- nr063g: "fq4eyks",
107
- Blmvk6g: ["f1ya6x16", "ftuszwa"],
108
- Bsiemmq: "f1e2iu44",
109
- B98u21t: ["ftuszwa", "f1ya6x16"],
94
+ Byrf0fs: 0,
95
+ Bsiemmq: 0,
96
+ Bwckmig: 0,
97
+ skfxo0: 0,
98
+ Iidy0u: 0,
99
+ B98u21t: 0,
100
+ Bvwlmkc: 0,
101
+ jo1ztg: 0,
102
+ Ba1iezr: 0,
103
+ Blmvk6g: 0,
104
+ B24cy0v: 0,
105
+ Bil7v7r: 0,
106
+ Br3gin4: 0,
107
+ nr063g: 0,
108
+ ghq09: 0,
109
+ Bbgo44z: 0,
110
+ Bseh09z: "fmj8fco",
111
+ az1dzo: 0,
112
+ Ba3ybja: 0,
113
+ B6352mv: 0,
114
+ vppk2z: 0,
115
+ Biaj6j7: "f1iwowo3",
110
116
  B2pnrqr: "f1pffoy2",
111
117
  B29w5g4: ["f1bmyog6", "f15fv2gd"],
112
118
  Bhhzhcn: "fs6b7xr",
@@ -127,29 +133,43 @@ const useRootStyles = /*#__PURE__*/__styles({
127
133
  wigs8: "f1p0ul1q",
128
134
  pbfy6t: "f1c901ms",
129
135
  B0v4ure: "f1alokd7",
130
- ghq09: "f78i1la",
131
- B24cy0v: ["f1kvsw7t", "f1bw8brt"],
132
- Bwckmig: "f8k7e5g",
133
- Bvwlmkc: ["f1bw8brt", "f1kvsw7t"],
134
- Bbgo44z: "f1pmxfrl",
135
- Bil7v7r: ["fszkfcr", "f1ap5ily"],
136
- skfxo0: "f57dp0y",
137
- jo1ztg: ["f1ap5ily", "fszkfcr"],
138
- Ba3ybja: ["f11dm2qb", "f136rfnd"],
139
- az1dzo: ["f136rfnd", "f11dm2qb"],
140
- vppk2z: ["fdsq1qd", "f1khssms"],
141
- B6352mv: ["f1khssms", "fdsq1qd"],
142
- nr063g: "fq4eyks",
143
- Blmvk6g: ["f1ya6x16", "ftuszwa"],
144
- Bsiemmq: "f1e2iu44",
145
- B98u21t: ["ftuszwa", "f1ya6x16"],
136
+ Byrf0fs: 0,
137
+ Bsiemmq: 0,
138
+ Bwckmig: 0,
139
+ skfxo0: 0,
140
+ Iidy0u: 0,
141
+ B98u21t: 0,
142
+ Bvwlmkc: 0,
143
+ jo1ztg: 0,
144
+ Ba1iezr: 0,
145
+ Blmvk6g: 0,
146
+ B24cy0v: 0,
147
+ Bil7v7r: 0,
148
+ Br3gin4: 0,
149
+ nr063g: 0,
150
+ ghq09: 0,
151
+ Bbgo44z: 0,
152
+ Bseh09z: "fmj8fco",
153
+ az1dzo: 0,
154
+ Ba3ybja: 0,
155
+ B6352mv: 0,
156
+ vppk2z: 0,
157
+ Biaj6j7: "f1iwowo3",
146
158
  B2pnrqr: "f1hxpdv8",
147
159
  B29w5g4: ["fm5xmfm", "femsgmt"],
148
160
  Bhhzhcn: "f1dmxpeg",
149
161
  Bec0n69: ["femsgmt", "fm5xmfm"]
150
162
  }
151
163
  }, {
152
- 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;}", ".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;}", ".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;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1pffoy2[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - -2px);}", ".f1bmyog6[data-fui-focus-within]:focus-within::after{right:calc(0px - 2px - 8px);}", ".f15fv2gd[data-fui-focus-within]:focus-within::after{left:calc(0px - 2px - 8px);}", ".fs6b7xr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 2px - -2px);}", ".f1hxpdv8[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - 6px);}", ".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);}", ".f1dmxpeg[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 2px - 6px);}"],
164
+ 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;}", ".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;}", ".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);}", {
165
+ p: -2
166
+ }], [".f1iwowo3[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusMedium);}", {
167
+ p: -1
168
+ }], ".f1pffoy2[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - -2px);}", ".f1bmyog6[data-fui-focus-within]:focus-within::after{right:calc(0px - 2px - 8px);}", ".f15fv2gd[data-fui-focus-within]:focus-within::after{left:calc(0px - 2px - 8px);}", ".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);}", {
169
+ p: -2
170
+ }], [".f1iwowo3[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusMedium);}", {
171
+ p: -1
172
+ }], ".f1hxpdv8[data-fui-focus-within]:focus-within::after{top:calc(0px - 2px - 6px);}", ".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);}", ".f1dmxpeg[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 2px - 6px);}"],
153
173
  h: [".faw1t00:hover{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundHover);}", ".fxdgx5:hover{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundHover);}"],
154
174
  a: [".fii04fa:active{--fui-Slider__thumb--color:var(--colorCompoundBrandBackgroundPressed);}", ".f36hzz8:active{--fui-Slider__progress--color:var(--colorCompoundBrandBackgroundPressed);}"],
155
175
  m: [["@media (forced-colors: active){.f1volkfw{--fui-Slider__rail--color:CanvasText;}}", {
@@ -183,10 +203,11 @@ const useRootStyles = /*#__PURE__*/__styles({
183
203
  */
184
204
  const useRailStyles = /*#__PURE__*/__styles({
185
205
  rail: {
186
- Bbmb7ep: ["fnivh3a", "fc7yr5o"],
187
- Beyfa6y: ["fc7yr5o", "fnivh3a"],
188
- B7oj6ja: ["f1el4m67", "f8yange"],
189
- Btl43ni: ["f8yange", "f1el4m67"],
206
+ Beyfa6y: 0,
207
+ Bbmb7ep: 0,
208
+ Btl43ni: 0,
209
+ B7oj6ja: 0,
210
+ Dimara: "f1kijzfu",
190
211
  Bkecrkj: "f1aehjj5",
191
212
  Ijaq50: "faunodf",
192
213
  nk6f5a: "f88nxoq",
@@ -218,7 +239,9 @@ const useRailStyles = /*#__PURE__*/__styles({
218
239
  lawp4y: "febq2dz"
219
240
  }
220
241
  }, {
221
- 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;}", ".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;}", ".febq2dz::before{bottom:1px;}"],
242
+ d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
243
+ p: -1
244
+ }], ".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;}", ".febq2dz::before{bottom:1px;}"],
222
245
  m: [["@media (forced-colors: active){.fux3rle::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 );}}", {
223
246
  m: "(forced-colors: active)"
224
247
  }]]
@@ -238,10 +261,11 @@ const useThumbStyles = /*#__PURE__*/__styles({
238
261
  Bkecrkj: "f1aehjj5",
239
262
  oeaueh: "f1s6fcnf",
240
263
  Bvjb7m6: "fdgv6k0",
241
- Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
242
- Beyfa6y: ["f1nfllo7", "f8fbkgy"],
243
- B7oj6ja: ["f1djnp8u", "f1s8kh49"],
244
- Btl43ni: ["f1s8kh49", "f1djnp8u"],
264
+ Beyfa6y: 0,
265
+ Bbmb7ep: 0,
266
+ Btl43ni: 0,
267
+ B7oj6ja: 0,
268
+ Dimara: "f44lkw9",
245
269
  E5pizo: "fof7hq0",
246
270
  De3pzq: "foksa45",
247
271
  Brfgrao: "f1j7ml58",
@@ -249,38 +273,49 @@ const useThumbStyles = /*#__PURE__*/__styles({
249
273
  Fbdkly: ["f5zrw40", "f1ks5ppg"],
250
274
  lawp4y: "fto0uou",
251
275
  mdwyqc: ["f1ks5ppg", "f5zrw40"],
252
- Budzafs: ["feh19e8", "f3j3guj"],
253
- r59vdv: ["f3j3guj", "feh19e8"],
254
- n07z76: ["fo75joz", "f1yag6sl"],
255
- ck0cow: ["f1yag6sl", "fo75joz"],
276
+ r59vdv: 0,
277
+ Budzafs: 0,
278
+ ck0cow: 0,
279
+ n07z76: 0,
280
+ Gng75u: "fielpny",
256
281
  Bcvre1j: "fyl8oag",
257
282
  Ftih45: "fzhtfnv",
258
- B0qfbqy: "f1rponpz",
259
- B4f6apu: ["f1rvw2z1", "fjj0g3m"],
260
- y0oebl: "f1muowhs",
261
- uvfttm: ["fjj0g3m", "f1rvw2z1"],
262
- Bdkvgpv: "f163fonl",
263
- m598lv: ["f1yq6w5o", "f1jpmc5p"],
264
- qa3bma: "f11yjt3y",
265
- Bbv0w2i: ["f1jpmc5p", "f1yq6w5o"],
266
- Bq4z7u6: "f10tv6oz",
267
- Bk5zm6e: ["f16xp3sf", "f1seuxxq"],
268
- Bqjgrrk: "fwrmqbx",
269
- Bm6vgfq: ["f1seuxxq", "f16xp3sf"]
283
+ Bcgcnre: 0,
284
+ Bqjgrrk: 0,
285
+ qa3bma: 0,
286
+ y0oebl: 0,
287
+ Biqmznv: 0,
288
+ Bm6vgfq: 0,
289
+ Bbv0w2i: 0,
290
+ uvfttm: 0,
291
+ eqrjj: 0,
292
+ Bk5zm6e: 0,
293
+ m598lv: 0,
294
+ B4f6apu: 0,
295
+ ydt019: 0,
296
+ Bq4z7u6: 0,
297
+ Bdkvgpv: 0,
298
+ B0qfbqy: 0,
299
+ kj8mxx: "f1fsco4d"
270
300
  },
271
301
  disabled: {
272
- B0qfbqy: "f1rponpz",
273
- B4f6apu: ["f1rvw2z1", "fjj0g3m"],
274
- y0oebl: "f1muowhs",
275
- uvfttm: ["fjj0g3m", "f1rvw2z1"],
276
- Bdkvgpv: "f163fonl",
277
- m598lv: ["f1yq6w5o", "f1jpmc5p"],
278
- qa3bma: "f11yjt3y",
279
- Bbv0w2i: ["f1jpmc5p", "f1yq6w5o"],
280
- Bq4z7u6: "f1pw3ppl",
281
- Bk5zm6e: ["fxoq2z", "f1ykj0h9"],
282
- Bqjgrrk: "f1sz5gii",
283
- Bm6vgfq: ["f1ykj0h9", "fxoq2z"]
302
+ Bcgcnre: 0,
303
+ Bqjgrrk: 0,
304
+ qa3bma: 0,
305
+ y0oebl: 0,
306
+ Biqmznv: 0,
307
+ Bm6vgfq: 0,
308
+ Bbv0w2i: 0,
309
+ uvfttm: 0,
310
+ eqrjj: 0,
311
+ Bk5zm6e: 0,
312
+ m598lv: 0,
313
+ B4f6apu: 0,
314
+ ydt019: 0,
315
+ Bq4z7u6: 0,
316
+ Bdkvgpv: 0,
317
+ B0qfbqy: 0,
318
+ kj8mxx: "f1pv9hn4"
284
319
  },
285
320
  horizontal: {
286
321
  Bz10aip: ["f13gfj74", "f1nfknbn"],
@@ -291,7 +326,15 @@ const useThumbStyles = /*#__PURE__*/__styles({
291
326
  B5kzvoi: "feeniun"
292
327
  }
293
328
  }, {
294
- d: [".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;}", ".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);}", ".f1j7ml58::before{position:absolute;}", ".f14u7mkt::before{top:0px;}", ".f5zrw40::before{left:0px;}", ".f1ks5ppg::before{right:0px;}", ".fto0uou::before{bottom:0px;}", ".feh19e8::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f3j3guj::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fo75joz::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1yag6sl::before{border-top-left-radius:var(--borderRadiusCircular);}", ".fyl8oag::before{box-sizing:border-box;}", ".fzhtfnv::before{content:'';}", ".f1rponpz::before{border-top-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1rvw2z1::before{border-right-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".fjj0g3m::before{border-left-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f1muowhs::before{border-bottom-width:calc(var(--fui-Slider__thumb--size) * .05);}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fwrmqbx::before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1pw3ppl::before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".fxoq2z::before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f1ykj0h9::before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".f1sz5gii::before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".f13gfj74{transform:translateX(-50%);}", ".f1nfknbn{transform:translateX(50%);}", ".f1fj3zth{left:var(--fui-Slider--progress);}", ".fcf9u6w{right:var(--fui-Slider--progress);}", ".f5cv5a3{transform:translateY(50%);}", ".feeniun{bottom:var(--fui-Slider--progress);}"]
329
+ d: [".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);}", {
330
+ p: -1
331
+ }], ".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);}", {
332
+ p: -1
333
+ }], ".fyl8oag::before{box-sizing:border-box;}", ".fzhtfnv::before{content:'';}", [".f1fsco4d::before{border:calc(var(--fui-Slider__thumb--size) * .05) solid var(--colorNeutralStroke1);}", {
334
+ p: -2
335
+ }], [".f1pv9hn4::before{border:calc(var(--fui-Slider__thumb--size) * .05) solid var(--colorNeutralForegroundDisabled);}", {
336
+ p: -2
337
+ }], ".f13gfj74{transform:translateX(-50%);}", ".f1nfknbn{transform:translateX(50%);}", ".f1fj3zth{left:var(--fui-Slider--progress);}", ".fcf9u6w{right:var(--fui-Slider--progress);}", ".f5cv5a3{transform:translateY(50%);}", ".feeniun{bottom:var(--fui-Slider--progress);}"]
295
338
  });
296
339
  /**
297
340
  * Styles for the Input slot
@@ -304,14 +347,16 @@ const useInputStyles = /*#__PURE__*/__styles({
304
347
  nk6f5a: "f1nzqi2z",
305
348
  Br312pm: "fwpfdsa",
306
349
  Bw0ie65: "fuur7zz",
307
- z8tnut: "f1g0x7ka",
308
- z189sj: ["fhxju0i", "f1cnd47f"],
309
- Byoj8tv: "f1qch9an",
310
- uwmqm3: ["f1cnd47f", "fhxju0i"],
311
- B6of3ja: "f1hu3pq6",
312
- t21cq0: ["f11qmguv", "f1tyq0we"],
313
- jrapky: "f19f4twv",
314
- Frg6f3: ["f1tyq0we", "f11qmguv"]
350
+ Byoj8tv: 0,
351
+ uwmqm3: 0,
352
+ z189sj: 0,
353
+ z8tnut: 0,
354
+ B0ocmuz: "f1mk8lai",
355
+ jrapky: 0,
356
+ Frg6f3: 0,
357
+ t21cq0: 0,
358
+ B6of3ja: 0,
359
+ B74szlk: "f1s184ao"
315
360
  },
316
361
  disabled: {
317
362
  Bceei9c: "f158kwzp"
@@ -326,7 +371,11 @@ const useInputStyles = /*#__PURE__*/__styles({
326
371
  Brp00wb: "f1r9mf01"
327
372
  }
328
373
  }, {
329
- 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;}", ".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;}", ".f158kwzp{cursor:default;}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1r9mf01{-webkit-appearance:slider-vertical;}"]
374
+ 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;}", {
375
+ p: -1
376
+ }], [".f1s184ao{margin:0;}", {
377
+ p: -1
378
+ }], ".f158kwzp{cursor:default;}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1r9mf01{-webkit-appearance:slider-vertical;}"]
330
379
  });
331
380
  /**
332
381
  * Apply styling to the Slider slots based on the state
package/lib/components/Slider/useSliderStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["shorthands","__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbSizeVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderCSSVars","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","qhf8xq","mc9l5x","lpbzjs","Bt984gj","B7hvi0a","small","Bi64ftq","Ba19x4e","sshi5w","medium","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","enabled","B7wi8oa","B250r6j","Bpmy4es","Buw9y6v","Bq939m0","gjzr1t","tg7hqu","ypdvl1","Bw5jdd4","Bdjie01","Bvh9j6m","Bvsvvpo","disabled","focusIndicatorHorizontal","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","ghq09","B24cy0v","Bwckmig","Bvwlmkc","Bbgo44z","Bil7v7r","skfxo0","jo1ztg","Ba3ybja","az1dzo","vppk2z","B6352mv","nr063g","Blmvk6g","Bsiemmq","B98u21t","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","focusIndicatorVertical","d","h","a","m","f","i","useRailStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","Bvjb7m6","Bcmaq0h","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","Bbn5juq","Brdvuy1","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","E5pizo","De3pzq","Budzafs","r59vdv","n07z76","ck0cow","Bcvre1j","B0qfbqy","B4f6apu","y0oebl","uvfttm","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","z8tnut","z189sj","Byoj8tv","uwmqm3","B6of3ja","t21cq0","jrapky","Frg6f3","Brp00wb","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["useSliderStyles.styles.js"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const sliderClassNames = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input'\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`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`\n};\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center'\n },\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px'\n },\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`\n },\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`\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 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 focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '8px',\n right: '8px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '6px',\n bottom: '6px',\n left: '4px',\n right: '4px'\n }\n }\n })\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${sliderDirectionVar}),\n var(${progressColorVar}) 0%,\n var(${progressColorVar}) var(${sliderProgressVar}),\n var(${railColorVar}) var(${sliderProgressVar})\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(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\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 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 * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\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 '::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 transform: 'translateX(-50%)',\n left: `var(${sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${sliderProgressVar})`\n }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n ...shorthands.padding(0),\n ...shorthands.margin(0)\n },\n disabled: {\n cursor: 'default'\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical'\n }\n});\n/**\n * Apply styling to the Slider slots based on the state\n */ export const useSliderStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n 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);\n state.rail.className = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);\n state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbSizeVar","railSizeVar","railColorVar","progressColorVar","thumbColorVar","sliderCSSVars","sliderDirectionVar","sliderProgressVar","sliderStepsPercentVar","useRootStyles","qhf8xq","mc9l5x","lpbzjs","Bt984gj","B7hvi0a","small","Bi64ftq","Ba19x4e","sshi5w","medium","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","enabled","B7wi8oa","B250r6j","Bpmy4es","Buw9y6v","Bq939m0","gjzr1t","tg7hqu","ypdvl1","Bw5jdd4","Bdjie01","Bvh9j6m","Bvsvvpo","disabled","focusIndicatorHorizontal","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","focusIndicatorVertical","d","p","h","a","m","f","i","useRailStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","Bvjb7m6","Bcmaq0h","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","Bbn5juq","Brdvuy1","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","E5pizo","De3pzq","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Brp00wb","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"sources":["useSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const sliderClassNames = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input'\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`;\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`\n};\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center'\n },\n small: {\n [thumbSizeVar]: '16px',\n [railSizeVar]: '2px',\n minHeight: '24px'\n },\n medium: {\n [thumbSizeVar]: '20px',\n [railSizeVar]: '4px',\n minHeight: '32px'\n },\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`\n },\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`\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 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 focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '-2px',\n bottom: '-2px',\n left: '8px',\n right: '8px'\n }\n }\n }),\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineOffset: {\n top: '6px',\n bottom: '6px',\n left: '4px',\n right: '4px'\n }\n }\n })\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n rail: {\n borderRadius: tokens.borderRadiusXLarge,\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${sliderDirectionVar}),\n var(${progressColorVar}) 0%,\n var(${progressColorVar}) var(${sliderProgressVar}),\n var(${railColorVar}) var(${sliderProgressVar})\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(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\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 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 * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${thumbColorVar})`,\n '::before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`\n }\n },\n disabled: {\n '::before': {\n border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`\n }\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${sliderProgressVar})`\n }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0'\n },\n disabled: {\n cursor: 'default'\n },\n horizontal: {\n height: `var(${thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${thumbSizeVar})`,\n '-webkit-appearance': 'slider-vertical'\n }\n});\n/**\n * Apply styling to the Slider slots based on the state\n */ export const useSliderStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n 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);\n state.rail.className = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);\n state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib-commonjs/components/Slider/useSliderState.js CHANGED
@@ -18,14 +18,15 @@ const getPercent = (value, min, max)=>{
18
18
  return max === min ? 0 : (value - min) / (max - min) * 100;
19
19
  };
20
20
  const useSliderState_unstable = (state, props)=>{
21
- const { defaultValue = 0, min = 0, max = 100, step, value } = props;
21
+ const { min = 0, max = 100, step } = props;
22
22
  const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
23
23
  const [currentValue, setCurrentValue] = (0, _reactutilities.useControllableState)({
24
- state: value !== undefined ? (0, _reactutilities.clamp)(value, min, max) : undefined,
25
- defaultState: (0, _reactutilities.clamp)(defaultValue, min, max),
24
+ state: props.value,
25
+ defaultState: props.defaultValue,
26
26
  initialState: 0
27
27
  });
28
- const valuePercent = getPercent(currentValue, min, max);
28
+ const clampedValue = (0, _reactutilities.clamp)(currentValue, min, max);
29
+ const valuePercent = getPercent(clampedValue, min, max);
29
30
  const inputOnChange = state.input.onChange;
30
31
  const propsOnChange = props.onChange;
31
32
  const onChange = (0, _reactutilities.useEventCallback)((ev)=>{
@@ -50,7 +51,7 @@ const useSliderState_unstable = (state, props)=>{
50
51
  ...state.root.style
51
52
  };
52
53
  // Input Props
53
- state.input.value = currentValue;
54
+ state.input.value = clampedValue;
54
55
  state.input.onChange = onChange;
55
56
  return state;
56
57
  };
package/lib-commonjs/components/Slider/useSliderState.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSliderState.js"],"sourcesContent":["import * 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';\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\nconst getPercent = (value, min, max)=>{\n return max === min ? 0 : (value - min) / (max - min) * 100;\n};\nexport const useSliderState_unstable = (state, props)=>{\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\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 inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n const onChange = useEventCallback((ev)=>{\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, {\n value: newValue\n });\n }\n });\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`\n };\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style\n };\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n return state;\n};\n"],"names":["useSliderState_unstable","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","sliderCSSVars","getPercent","value","min","max","state","props","defaultValue","step","dir","useFluent","currentValue","setCurrentValue","useControllableState","undefined","clamp","defaultState","initialState","valuePercent","inputOnChange","input","onChange","propsOnChange","useEventCallback","ev","newValue","Number","target","rootVariables","vertical","root","style"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;gCACuC;qCACd;uCAClB;AAC9B,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGC,oCAAa;AACtF,MAAMC,aAAa,CAACC,OAAOC,KAAKC;IAC5B,OAAOA,QAAQD,MAAM,IAAI,AAACD,CAAAA,QAAQC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAK;AAC3D;AACO,MAAMP,0BAA0B,CAACS,OAAOC;IAC3C,MAAM,EAAEC,eAAe,CAAC,EAAEJ,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEI,IAAI,EAAEN,KAAK,EAAE,GAAGI;IAC9D,MAAM,EAAEG,GAAG,EAAE,GAAGC,IAAAA,uCAAS;IACzB,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,IAAAA,oCAAoB,EAAC;QACzDR,OAAOH,UAAUY,YAAYC,IAAAA,qBAAK,EAACb,OAAOC,KAAKC,OAAOU;QACtDE,cAAcD,IAAAA,qBAAK,EAACR,cAAcJ,KAAKC;QACvCa,cAAc;IAClB;IACA,MAAMC,eAAejB,WAAWU,cAAcR,KAAKC;IACnD,MAAMe,gBAAgBd,MAAMe,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBhB,MAAMe,QAAQ;IACpC,MAAMA,WAAWE,IAAAA,gCAAgB,EAAC,CAACC;QAC/B,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACzB,KAAK;QACvCU,gBAAgBG,IAAAA,qBAAK,EAACU,UAAUtB,KAAKC;QACrC,IAAIe,iBAAiBA,kBAAkBG,eAAe;YAClDH,cAAcK;QAClB,OAAO,IAAIF,eAAe;YACtBA,cAAcE,IAAI;gBACdtB,OAAOuB;YACX;QACJ;IACJ;IACA,MAAMG,gBAAgB;QAClB,CAAC7B,mBAAmB,EAAEM,MAAMwB,QAAQ,GAAG,SAASpB,QAAQ,QAAQ,UAAU;QAC1E,CAACZ,sBAAsB,EAAEW,QAAQA,OAAO,IAAI,CAAC,EAAEA,OAAO,MAAOJ,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAG;QAC7E,CAACL,kBAAkB,EAAE,CAAC,EAAEoB,aAAa,CAAC,CAAC;IAC3C;IACA,aAAa;IACbb,MAAMyB,IAAI,CAACC,KAAK,GAAG;QACf,GAAGH,aAAa;QAChB,GAAGvB,MAAMyB,IAAI,CAACC,KAAK;IACvB;IACA,cAAc;IACd1B,MAAMe,KAAK,CAAClB,KAAK,GAAGS;IACpBN,MAAMe,KAAK,CAACC,QAAQ,GAAGA;IACvB,OAAOhB;AACX"}
1
+ {"version":3,"sources":["useSliderState.js"],"sourcesContent":["import * 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';\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\nconst getPercent = (value, min, max)=>{\n return max === min ? 0 : (value - min) / (max - min) * 100;\n};\nexport const useSliderState_unstable = (state, props)=>{\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 const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n const onChange = useEventCallback((ev)=>{\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, {\n value: newValue\n });\n }\n });\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`\n };\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style\n };\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = onChange;\n return state;\n};\n"],"names":["useSliderState_unstable","sliderStepsPercentVar","sliderProgressVar","sliderDirectionVar","sliderCSSVars","getPercent","value","min","max","state","props","step","dir","useFluent","currentValue","setCurrentValue","useControllableState","defaultState","defaultValue","initialState","clampedValue","clamp","valuePercent","inputOnChange","input","onChange","propsOnChange","useEventCallback","ev","newValue","Number","target","rootVariables","vertical","root","style"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;gCACuC;qCACd;uCAClB;AAC9B,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAE,GAAGC,oCAAa;AACtF,MAAMC,aAAa,CAACC,OAAOC,KAAKC;IAC5B,OAAOA,QAAQD,MAAM,IAAI,AAACD,CAAAA,QAAQC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAK;AAC3D;AACO,MAAMP,0BAA0B,CAACS,OAAOC;IAC3C,MAAM,EAAEH,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAEG,IAAI,EAAE,GAAGD;IACrC,MAAM,EAAEE,GAAG,EAAE,GAAGC,IAAAA,uCAAS;IACzB,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,IAAAA,oCAAoB,EAAC;QACzDP,OAAOC,MAAMJ,KAAK;QAClBW,cAAcP,MAAMQ,YAAY;QAChCC,cAAc;IAClB;IACA,MAAMC,eAAeC,IAAAA,qBAAK,EAACP,cAAcP,KAAKC;IAC9C,MAAMc,eAAejB,WAAWe,cAAcb,KAAKC;IACnD,MAAMe,gBAAgBd,MAAMe,KAAK,CAACC,QAAQ;IAC1C,MAAMC,gBAAgBhB,MAAMe,QAAQ;IACpC,MAAMA,WAAWE,IAAAA,gCAAgB,EAAC,CAACC;QAC/B,MAAMC,WAAWC,OAAOF,GAAGG,MAAM,CAACzB,KAAK;QACvCS,gBAAgBM,IAAAA,qBAAK,EAACQ,UAAUtB,KAAKC;QACrC,IAAIe,iBAAiBA,kBAAkBG,eAAe;YAClDH,cAAcK;QAClB,OAAO,IAAIF,eAAe;YACtBA,cAAcE,IAAI;gBACdtB,OAAOuB;YACX;QACJ;IACJ;IACA,MAAMG,gBAAgB;QAClB,CAAC7B,mBAAmB,EAAEM,MAAMwB,QAAQ,GAAG,SAASrB,QAAQ,QAAQ,UAAU;QAC1E,CAACX,sBAAsB,EAAEU,QAAQA,OAAO,IAAI,CAAC,EAAEA,OAAO,MAAOH,CAAAA,MAAMD,GAAE,EAAG,CAAC,CAAC,GAAG;QAC7E,CAACL,kBAAkB,EAAE,CAAC,EAAEoB,aAAa,CAAC,CAAC;IAC3C;IACA,aAAa;IACbb,MAAMyB,IAAI,CAACC,KAAK,GAAG;QACf,GAAGH,aAAa;QAChB,GAAGvB,MAAMyB,IAAI,CAACC,KAAK;IACvB;IACA,cAAc;IACd1B,MAAMe,KAAK,CAAClB,KAAK,GAAGc;IACpBX,MAAMe,KAAK,CAACC,QAAQ,GAAGA;IACvB,OAAOhB;AACX"}