@fluentui/react-switch 9.1.80 → 9.1.81
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.
- package/CHANGELOG.md +12 -2
- package/lib/components/Switch/useSwitchStyles.styles.js +3 -3
- package/lib/components/Switch/useSwitchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.styles.js +31 -31
- package/lib-commonjs/components/Switch/useSwitchStyles.styles.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 09 May 2024 19:31:57 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.81](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.81)
|
|
8
|
+
|
|
9
|
+
Thu, 09 May 2024 19:31:57 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.80..@fluentui/react-switch_v9.1.81)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Add HC hover active styling to Switch. ([PR #31283](https://github.com/microsoft/fluentui/pull/31283) by ololubek@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.21.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.1.80](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.80)
|
|
8
18
|
|
|
9
|
-
Mon, 06 May 2024 12:
|
|
19
|
+
Mon, 06 May 2024 12:55:01 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.79..@fluentui/react-switch_v9.1.80)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
@@ -38,9 +38,9 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
38
38
|
}, {
|
|
39
39
|
d: [".f1hu3pq6{margin-top:0;}"]
|
|
40
40
|
});
|
|
41
|
-
const useInputBaseClassName = /*#__PURE__*/__resetStyles("
|
|
42
|
-
r: [".
|
|
43
|
-
s: ["@media (forced-colors: active){.
|
|
41
|
+
const useInputBaseClassName = /*#__PURE__*/__resetStyles("rsji9ng", "r15xih98", {
|
|
42
|
+
r: [".rsji9ng{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rsji9ng:checked~.fui-Switch__indicator>*{transform:translateX(20px);}", ".rsji9ng:disabled{cursor:default;}", ".rsji9ng:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rsji9ng:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rsji9ng:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rsji9ng:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rsji9ng:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rsji9ng:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rsji9ng:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rsji9ng:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", ".r15xih98{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r15xih98:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}", ".r15xih98:disabled{cursor:default;}", ".r15xih98:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r15xih98:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r15xih98:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r15xih98:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r15xih98:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r15xih98:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r15xih98:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r15xih98:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r15xih98:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"],
|
|
43
|
+
s: ["@media (forced-colors: active){.rsji9ng:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rsji9ng:disabled~.fui-Switch__label{color:GrayText;}.rsji9ng:hover{color:CanvasText;}.rsji9ng:hover:active{color:CanvasText;}.rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}", "@media (forced-colors: active){.r15xih98:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r15xih98:disabled~.fui-Switch__label{color:GrayText;}.r15xih98:hover{color:CanvasText;}.r15xih98:hover:active{color:CanvasText;}.r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"]
|
|
44
44
|
});
|
|
45
45
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
46
46
|
before: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","z8tnut","z189sj","Byoj8tv","uwmqm3","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':enabled:checked': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%'\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","z8tnut","z189sj","Byoj8tv","uwmqm3","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%'\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -79,40 +79,40 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
79
79
|
".f1hu3pq6{margin-top:0;}"
|
|
80
80
|
]
|
|
81
81
|
});
|
|
82
|
-
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
82
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rsji9ng", "r15xih98", {
|
|
83
83
|
r: [
|
|
84
|
-
".
|
|
85
|
-
".
|
|
86
|
-
".
|
|
87
|
-
".
|
|
88
|
-
".
|
|
89
|
-
".
|
|
90
|
-
".
|
|
91
|
-
".
|
|
92
|
-
".
|
|
93
|
-
".
|
|
94
|
-
".
|
|
95
|
-
".
|
|
96
|
-
".
|
|
97
|
-
".
|
|
98
|
-
".
|
|
99
|
-
".
|
|
100
|
-
".
|
|
101
|
-
".
|
|
102
|
-
".
|
|
103
|
-
".
|
|
104
|
-
".
|
|
105
|
-
".
|
|
106
|
-
".
|
|
107
|
-
".
|
|
108
|
-
".
|
|
109
|
-
".
|
|
110
|
-
".
|
|
111
|
-
".
|
|
84
|
+
".rsji9ng{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
|
85
|
+
".rsji9ng:checked~.fui-Switch__indicator>*{transform:translateX(20px);}",
|
|
86
|
+
".rsji9ng:disabled{cursor:default;}",
|
|
87
|
+
".rsji9ng:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
|
|
88
|
+
".rsji9ng:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
|
|
89
|
+
".rsji9ng:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
|
|
90
|
+
".rsji9ng:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
|
|
91
|
+
".rsji9ng:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
|
92
|
+
".rsji9ng:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
|
93
|
+
".rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
|
|
94
|
+
".rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
|
|
95
|
+
".rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
|
|
96
|
+
".rsji9ng:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
|
|
97
|
+
".rsji9ng:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
|
|
98
|
+
".r15xih98{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
|
99
|
+
".r15xih98:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}",
|
|
100
|
+
".r15xih98:disabled{cursor:default;}",
|
|
101
|
+
".r15xih98:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
|
|
102
|
+
".r15xih98:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
|
|
103
|
+
".r15xih98:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
|
|
104
|
+
".r15xih98:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
|
|
105
|
+
".r15xih98:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
|
106
|
+
".r15xih98:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
|
107
|
+
".r15xih98:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
|
|
108
|
+
".r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
|
|
109
|
+
".r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
|
|
110
|
+
".r15xih98:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
|
|
111
|
+
".r15xih98:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"
|
|
112
112
|
],
|
|
113
113
|
s: [
|
|
114
|
-
"@media (forced-colors: active){.
|
|
115
|
-
"@media (forced-colors: active){.
|
|
114
|
+
"@media (forced-colors: active){.rsji9ng:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rsji9ng:disabled~.fui-Switch__label{color:GrayText;}.rsji9ng:hover{color:CanvasText;}.rsji9ng:hover:active{color:CanvasText;}.rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}",
|
|
115
|
+
"@media (forced-colors: active){.r15xih98:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r15xih98:disabled~.fui-Switch__label{color:GrayText;}.r15xih98:hover{color:CanvasText;}.r15xih98:hover:active{color:CanvasText;}.r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"
|
|
116
116
|
]
|
|
117
117
|
});
|
|
118
118
|
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1i56xw0\", \"rk4yt03\", {\n r: [\".r1i56xw0{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}\", \".r1i56xw0:focus{outline-style:none;}\", \".r1i56xw0:focus-visible{outline-style:none;}\", \".r1i56xw0[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1i56xw0[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rk4yt03{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}\", \".rk4yt03:focus{outline-style:none;}\", \".rk4yt03:focus-visible{outline-style:none;}\", \".rk4yt03[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rk4yt03[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.r1i56xw0[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rk4yt03[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d: [\".f1vx9l62{flex-direction:column;}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"r1c3hft5\", null, {\n r: [\".r1c3hft5{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}\", \".r1c3hft5>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}\"],\n s: [\"@media screen and (prefers-reduced-motion: reduce){.r1c3hft5{transition-duration:0.01ms;}}\", \"@media (forced-colors: active){.r1c3hft5{color:CanvasText;}.r1c3hft5>i{forced-color-adjust:none;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r1c3hft5>*{transition-duration:0.01ms;}}\"]\n});\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n labelAbove: {\n B6of3ja: \"f1hu3pq6\"\n }\n}, {\n d: [\".f1hu3pq6{margin-top:0;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"rgbriuz\", \"rpexbfe\", {\n r: [\".rgbriuz{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}\", \".rgbriuz:checked~.fui-Switch__indicator>*{transform:translateX(20px);}\", \".rgbriuz:disabled{cursor:default;}\", \".rgbriuz:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}\", \".rgbriuz:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}\", \".rgbriuz:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}\", \".rgbriuz:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}\", \".rgbriuz:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rgbriuz:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rgbriuz:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}\", \".rgbriuz:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}\", \".rgbriuz:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}\", \".rgbriuz:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}\", \".rgbriuz:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}\", \".rpexbfe{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}\", \".rpexbfe:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}\", \".rpexbfe:disabled{cursor:default;}\", \".rpexbfe:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}\", \".rpexbfe:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}\", \".rpexbfe:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}\", \".rpexbfe:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}\", \".rpexbfe:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rpexbfe:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rpexbfe:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}\", \".rpexbfe:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}\", \".rpexbfe:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}\", \".rpexbfe:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}\", \".rpexbfe:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}\"],\n s: [\"@media (forced-colors: active){.rgbriuz:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rgbriuz:disabled~.fui-Switch__label{color:GrayText;}.rgbriuz:hover{color:CanvasText;}.rgbriuz:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rgbriuz:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}\", \"@media (forced-colors: active){.rpexbfe:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rpexbfe:disabled~.fui-Switch__label{color:GrayText;}.rpexbfe:hover{color:CanvasText;}.rpexbfe:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rpexbfe:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}\"]\n});\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n Bhzewxz: \"f15twtuk\"\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n Bhzewxz: \"f15twtuk\"\n },\n above: {\n B5kzvoi: \"f1yab3r1\",\n Bqenvij: \"f1aar7gd\",\n a9b677: \"fly5x3f\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}\", \".fly5x3f{width:100%;}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n Bceei9c: \"f1k6fduh\",\n jrapky: \"f49ad5g\",\n B6of3ja: \"f1xlvstr\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n above: {\n z8tnut: \"f1ywm7hm\",\n Byoj8tv: \"f14wxoun\",\n a9b677: \"fly5x3f\"\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n }\n}, {\n d: [\".f1k6fduh{cursor:pointer;}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\", \".fly5x3f{width:100%;}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\"]\n});\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = state => {\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const {\n label,\n labelPosition\n } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useSwitchStyles.styles.js.map"],"names":["switchClassNames","switchClassName","useSwitchStyles_unstable","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","z8tnut","z189sj","Byoj8tv","uwmqm3","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,gBAAgB;eAAhBA;;IASAC,eAAe;eAAfA;;IA6EAC,wBAAwB;eAAxBA;;;uBAvFqD;AAC3D,MAAMF,mBAAmB;IAC9BG,MAAM;IACNC,WAAW;IACXC,OAAO;IACPC,OAAO;AACT;AAIO,MAAML,kBAAkBD,iBAAiBG,IAAI;AACpD,+CAA+C;AAC/C,MAAMI,4BAA4B;AAClC,MAAMC,cAAc;AACpB,MAAMC,aAAa;AACnB,MAAMC,YAAYF,cAAcD;AAChC,MAAMI,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAC7EC,GAAG;QAAC;QAAkG;QAAwC;QAAgD;QAA6K;QAA+vB;QAAiG;QAAuC;QAA+C;QAA4K;KAA6vB;IAC1sEC,GAAG;QAAC;QAA4M;KAA0M;AAC5Z;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,UAAU;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;KAAoC;AAC1C;AACA,MAAMC,4BAA4B,WAAW,GAAER,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAC7EC,GAAG;QAAC;QAAuY;KAAwI;IACnhBC,GAAG;QAAC;QAA8F;QAAsG;KAA+F;AACzS;AACA,MAAMO,qBAAqB,WAAW,GAAEL,IAAAA,eAAQ,EAAC;IAC/CM,YAAY;QACVC,SAAS;IACX;AACF,GAAG;IACDJ,GAAG;QAAC;KAA2B;AACjC;AACA,MAAMK,wBAAwB,WAAW,GAAEZ,IAAAA,oBAAa,EAAC,WAAW,WAAW;IAC7EC,GAAG;QAAC;QAAqJ;QAA0E;QAAsC;QAA0F;QAAqG;QAAsJ;QAA4F;QAAsK;QAAiL;QAAiM;QAA2K;QAAoL;QAA2G;QAAgK;QAAqJ;QAA2E;QAAsC;QAA0F;QAAqG;QAAsJ;QAA4F;QAAsK;QAAiL;QAAiM;QAA2K;QAAoL;QAA2G;KAA+J;IACpnHC,GAAG;QAAC;QAAiY;KAAgY;AACvwB;AACA,MAAMW,iBAAiB,WAAW,GAAET,IAAAA,eAAQ,EAAC;IAC3CU,QAAQ;QACNC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;IACX;IACAC,OAAO;QACLC,QAAQ;YAAC;YAAY;SAAW;QAChCF,SAAS;IACX;IACAG,OAAO;QACLC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDf,GAAG;QAAC;QAAuB;QAAsB;QAAqB;QAAwB;QAA2D;KAAwB;AACnL;AACA,mGAAmG;AACnG,MAAMgB,iBAAiB,WAAW,GAAEnB,IAAAA,eAAQ,EAAC;IAC3CoB,MAAM;QACJC,SAAS;QACTC,QAAQ;QACRf,SAAS;QACTgB,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAX,OAAO;QACLQ,QAAQ;QACRE,SAAS;QACTP,QAAQ;IACV;IACAL,OAAO;QACLa,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAhB,QAAQ;QACNc,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDrB,GAAG;QAAC;QAA8B;QAAwE;QAAsE;QAAmD;QAAuD;QAAsD;QAAqD;QAAoD;QAAuD;QAAyB;QAAsD;KAAsD;AACvnB;AAIO,MAAMjB,2BAA2ByC,CAAAA;IACtC,MAAMC,oBAAoBjC;IAC1B,MAAMkC,aAAa9B;IACnB,MAAM+B,yBAAyB1B;IAC/B,MAAM2B,kBAAkB1B;IACxB,MAAM2B,qBAAqBxB;IAC3B,MAAMyB,cAAcxB;IACpB,MAAMyB,cAAcf;IACpB,MAAM,EACJ7B,KAAK,EACL6C,aAAa,EACd,GAAGR;IACJA,MAAMxC,IAAI,CAACiD,SAAS,GAAGC,IAAAA,mBAAY,EAACrD,iBAAiBG,IAAI,EAAEyC,mBAAmBO,kBAAkB,WAAWN,WAAW5B,QAAQ,EAAE0B,MAAMxC,IAAI,CAACiD,SAAS;IACpJT,MAAMvC,SAAS,CAACgD,SAAS,GAAGC,IAAAA,mBAAY,EAACrD,iBAAiBI,SAAS,EAAE0C,wBAAwBxC,SAAS6C,kBAAkB,WAAWJ,gBAAgBzB,UAAU,EAAEqB,MAAMvC,SAAS,CAACgD,SAAS;IACxLT,MAAMtC,KAAK,CAAC+C,SAAS,GAAGC,IAAAA,mBAAY,EAACrD,iBAAiBK,KAAK,EAAE2C,oBAAoB1C,SAAS2C,WAAW,CAACE,cAAc,EAAER,MAAMtC,KAAK,CAAC+C,SAAS;IAC3I,IAAIT,MAAMrC,KAAK,EAAE;QACfqC,MAAMrC,KAAK,CAAC8C,SAAS,GAAGC,IAAAA,mBAAY,EAACrD,iBAAiBM,KAAK,EAAE4C,YAAYd,IAAI,EAAEc,WAAW,CAACC,cAAc,EAAER,MAAMrC,KAAK,CAAC8C,SAAS;IAClI;IACA,OAAOT;AACT,GACA,kDAAkD"}
|
|
1
|
+
{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1i56xw0\", \"rk4yt03\", {\n r: [\".r1i56xw0{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}\", \".r1i56xw0:focus{outline-style:none;}\", \".r1i56xw0:focus-visible{outline-style:none;}\", \".r1i56xw0[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1i56xw0[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rk4yt03{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}\", \".rk4yt03:focus{outline-style:none;}\", \".rk4yt03:focus-visible{outline-style:none;}\", \".rk4yt03[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rk4yt03[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.r1i56xw0[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rk4yt03[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d: [\".f1vx9l62{flex-direction:column;}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"r1c3hft5\", null, {\n r: [\".r1c3hft5{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}\", \".r1c3hft5>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}\"],\n s: [\"@media screen and (prefers-reduced-motion: reduce){.r1c3hft5{transition-duration:0.01ms;}}\", \"@media (forced-colors: active){.r1c3hft5{color:CanvasText;}.r1c3hft5>i{forced-color-adjust:none;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r1c3hft5>*{transition-duration:0.01ms;}}\"]\n});\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n labelAbove: {\n B6of3ja: \"f1hu3pq6\"\n }\n}, {\n d: [\".f1hu3pq6{margin-top:0;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"rsji9ng\", \"r15xih98\", {\n r: [\".rsji9ng{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}\", \".rsji9ng:checked~.fui-Switch__indicator>*{transform:translateX(20px);}\", \".rsji9ng:disabled{cursor:default;}\", \".rsji9ng:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}\", \".rsji9ng:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}\", \".rsji9ng:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}\", \".rsji9ng:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}\", \".rsji9ng:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rsji9ng:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}\", \".rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}\", \".rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}\", \".rsji9ng:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}\", \".rsji9ng:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}\", \".r15xih98{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}\", \".r15xih98:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}\", \".r15xih98:disabled{cursor:default;}\", \".r15xih98:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}\", \".r15xih98:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}\", \".r15xih98:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}\", \".r15xih98:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}\", \".r15xih98:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r15xih98:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r15xih98:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}\", \".r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}\", \".r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}\", \".r15xih98:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}\", \".r15xih98:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}\"],\n s: [\"@media (forced-colors: active){.rsji9ng:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rsji9ng:disabled~.fui-Switch__label{color:GrayText;}.rsji9ng:hover{color:CanvasText;}.rsji9ng:hover:active{color:CanvasText;}.rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}\", \"@media (forced-colors: active){.r15xih98:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r15xih98:disabled~.fui-Switch__label{color:GrayText;}.r15xih98:hover{color:CanvasText;}.r15xih98:hover:active{color:CanvasText;}.r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}\"]\n});\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n Bhzewxz: \"f15twtuk\"\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n Bhzewxz: \"f15twtuk\"\n },\n above: {\n B5kzvoi: \"f1yab3r1\",\n Bqenvij: \"f1aar7gd\",\n a9b677: \"fly5x3f\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}\", \".fly5x3f{width:100%;}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n Bceei9c: \"f1k6fduh\",\n jrapky: \"f49ad5g\",\n B6of3ja: \"f1xlvstr\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n above: {\n z8tnut: \"f1ywm7hm\",\n Byoj8tv: \"f14wxoun\",\n a9b677: \"fly5x3f\"\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n }\n}, {\n d: [\".f1k6fduh{cursor:pointer;}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\", \".fly5x3f{width:100%;}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\"]\n});\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = state => {\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const {\n label,\n labelPosition\n } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useSwitchStyles.styles.js.map"],"names":["switchClassNames","switchClassName","useSwitchStyles_unstable","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","z8tnut","z189sj","Byoj8tv","uwmqm3","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.81",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@fluentui/react-jsx-runtime": "^9.0.37",
|
|
39
39
|
"@fluentui/react-label": "^9.1.69",
|
|
40
40
|
"@fluentui/react-shared-contexts": "^9.18.0",
|
|
41
|
-
"@fluentui/react-tabster": "^9.21.
|
|
41
|
+
"@fluentui/react-tabster": "^9.21.2",
|
|
42
42
|
"@fluentui/react-theme": "^9.1.19",
|
|
43
43
|
"@fluentui/react-utilities": "^9.18.8",
|
|
44
44
|
"@griffel/react": "^1.5.14",
|