@fluentui/react-switch 0.0.0-nightly-20240820-2210.1 → 0.0.0-nightly-20240822-1237.1
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 +33 -13
- package/lib/components/Switch/useSwitchStyles.styles.js +11 -11
- package/lib/components/Switch/useSwitchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.styles.js +47 -49
- package/lib-commonjs/components/Switch/useSwitchStyles.styles.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,26 +1,46 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 22 Aug 2024 12:42:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240822-1237.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20240822-1237.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.
|
|
9
|
+
Thu, 22 Aug 2024 12:42:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.92..@fluentui/react-switch_v0.0.0-nightly-20240822-1237.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
20
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
22
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240822-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/835b32703ba4fda793f066c48de34e5cc7435bf1) by beachball)
|
|
24
|
+
|
|
25
|
+
## [9.1.92](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.92)
|
|
26
|
+
|
|
27
|
+
Thu, 15 Aug 2024 13:49:46 GMT
|
|
28
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.91..@fluentui/react-switch_v9.1.92)
|
|
29
|
+
|
|
30
|
+
### Patches
|
|
31
|
+
|
|
32
|
+
- Bump @fluentui/react-field to v9.1.74 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
34
|
+
|
|
35
|
+
## [9.1.91](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.91)
|
|
36
|
+
|
|
37
|
+
Thu, 15 Aug 2024 08:22:17 GMT
|
|
38
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.90..@fluentui/react-switch_v9.1.91)
|
|
39
|
+
|
|
40
|
+
### Patches
|
|
41
|
+
|
|
42
|
+
- Bump @fluentui/react-field to v9.1.73 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
43
|
+
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
24
44
|
|
|
25
45
|
## [9.1.90](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.90)
|
|
26
46
|
|
|
@@ -27,9 +27,9 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
27
27
|
}, {
|
|
28
28
|
d: [".f1vx9l62{flex-direction:column;}"]
|
|
29
29
|
});
|
|
30
|
-
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("
|
|
31
|
-
r: [".
|
|
32
|
-
s: ["@media screen and (prefers-reduced-motion: reduce){.
|
|
30
|
+
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1c3hft5", null, {
|
|
31
|
+
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;}"],
|
|
32
|
+
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;}}"]
|
|
33
33
|
});
|
|
34
34
|
const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
35
35
|
labelAbove: {
|
|
@@ -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: {
|
|
@@ -72,20 +72,20 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
72
72
|
B0ocmuz: "f1f5q0n8"
|
|
73
73
|
},
|
|
74
74
|
above: {
|
|
75
|
-
z8tnut: "
|
|
76
|
-
Byoj8tv: "
|
|
75
|
+
z8tnut: "f1ywm7hm",
|
|
76
|
+
Byoj8tv: "f14wxoun",
|
|
77
77
|
a9b677: "fly5x3f"
|
|
78
78
|
},
|
|
79
79
|
after: {
|
|
80
|
-
uwmqm3: ["
|
|
80
|
+
uwmqm3: ["fruq291", "f7x41pl"]
|
|
81
81
|
},
|
|
82
82
|
before: {
|
|
83
|
-
z189sj: ["
|
|
83
|
+
z189sj: ["f7x41pl", "fruq291"]
|
|
84
84
|
}
|
|
85
85
|
}, {
|
|
86
86
|
d: [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
|
|
87
87
|
p: -1
|
|
88
|
-
}], ".
|
|
88
|
+
}], ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fly5x3f{width:100%;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"]
|
|
89
89
|
});
|
|
90
90
|
/**
|
|
91
91
|
* Apply styling to the Switch slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","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","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","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 } 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: `var(--1897, var(--1898, ${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: `var(--1899, var(--1900, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1901, var(--1902, ${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: `var(--1903, var(--1904, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1905, var(--1906, ${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: `var(--1907, var(--1908, ${tokens.colorNeutralForegroundDisabled}))`\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: `var(--1909, var(--1910, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--1911, var(--1912, ${tokens.colorNeutralStrokeAccessible}))`,\n borderColor: `var(--1913, var(--1914, ${tokens.colorNeutralStrokeAccessible}))`\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: `var(--1915, var(--1916, ${tokens.colorNeutralForeground1}))`\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--1917, var(--1918, ${tokens.colorNeutralStrokeAccessibleHover}))`,\n borderColor: `var(--1919, var(--1920, ${tokens.colorNeutralStrokeAccessibleHover}))`\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--1921, var(--1922, ${tokens.colorNeutralStrokeAccessiblePressed}))`,\n borderColor: `var(--1923, var(--1924, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--1925, var(--1926, ${tokens.colorCompoundBrandBackground}))`,\n color: `var(--1927, var(--1928, ${tokens.colorNeutralForegroundInverted}))`,\n borderColor: `var(--1929, var(--1930, ${tokens.colorTransparentStroke}))`\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--1931, var(--1932, ${tokens.colorCompoundBrandBackgroundHover}))`,\n borderColor: `var(--1933, var(--1934, ${tokens.colorTransparentStrokeInteractive}))`\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--1935, var(--1936, ${tokens.colorCompoundBrandBackgroundPressed}))`,\n borderColor: `var(--1937, var(--1938, ${tokens.colorTransparentStrokeInteractive}))`\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: `var(--1939, var(--1940, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--1941, var(--1942, ${tokens.colorNeutralBackgroundDisabled}))`,\n borderColor: `var(--1943, var(--1944, ${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 padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n above: {\n paddingTop: `var(--1945, var(--1946, ${tokens.spacingVerticalXS}))`,\n paddingBottom: `var(--1947, var(--1948, ${tokens.spacingVerticalXS}))`,\n width: '100%'\n },\n after: {\n paddingLeft: `var(--1949, var(--1950, ${tokens.spacingHorizontalXS}))`\n },\n before: {\n paddingRight: `var(--1951, var(--1952, ${tokens.spacingHorizontalXS}))`\n }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\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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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","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","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","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 } 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 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 'use no memo';\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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","ignoreList":[]}
|
|
@@ -59,15 +59,15 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
59
59
|
".f1vx9l62{flex-direction:column;}"
|
|
60
60
|
]
|
|
61
61
|
});
|
|
62
|
-
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
62
|
+
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1c3hft5", null, {
|
|
63
63
|
r: [
|
|
64
|
-
".
|
|
65
|
-
".
|
|
64
|
+
".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;}",
|
|
65
|
+
".r1c3hft5>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"
|
|
66
66
|
],
|
|
67
67
|
s: [
|
|
68
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
69
|
-
"@media (forced-colors: active){.
|
|
70
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
68
|
+
"@media screen and (prefers-reduced-motion: reduce){.r1c3hft5{transition-duration:0.01ms;}}",
|
|
69
|
+
"@media (forced-colors: active){.r1c3hft5{color:CanvasText;}.r1c3hft5>i{forced-color-adjust:none;}}",
|
|
70
|
+
"@media screen and (prefers-reduced-motion: reduce){.r1c3hft5>*{transition-duration:0.01ms;}}"
|
|
71
71
|
]
|
|
72
72
|
});
|
|
73
73
|
const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -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)({
|
|
@@ -158,20 +158,20 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
158
158
|
B0ocmuz: "f1f5q0n8"
|
|
159
159
|
},
|
|
160
160
|
above: {
|
|
161
|
-
z8tnut: "
|
|
162
|
-
Byoj8tv: "
|
|
161
|
+
z8tnut: "f1ywm7hm",
|
|
162
|
+
Byoj8tv: "f14wxoun",
|
|
163
163
|
a9b677: "fly5x3f"
|
|
164
164
|
},
|
|
165
165
|
after: {
|
|
166
166
|
uwmqm3: [
|
|
167
|
-
"
|
|
168
|
-
"
|
|
167
|
+
"fruq291",
|
|
168
|
+
"f7x41pl"
|
|
169
169
|
]
|
|
170
170
|
},
|
|
171
171
|
before: {
|
|
172
172
|
z189sj: [
|
|
173
|
-
"
|
|
174
|
-
"
|
|
173
|
+
"f7x41pl",
|
|
174
|
+
"fruq291"
|
|
175
175
|
]
|
|
176
176
|
}
|
|
177
177
|
}, {
|
|
@@ -185,13 +185,11 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
185
185
|
p: -1
|
|
186
186
|
}
|
|
187
187
|
],
|
|
188
|
-
".
|
|
189
|
-
".
|
|
188
|
+
".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
|
|
189
|
+
".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
|
|
190
190
|
".fly5x3f{width:100%;}",
|
|
191
|
-
".
|
|
192
|
-
".
|
|
193
|
-
".f14xasrd{padding-right:var(--1951, var(--1952, var(--spacingHorizontalXS)));}",
|
|
194
|
-
".f1adkzh7{padding-left:var(--1951, var(--1952, var(--spacingHorizontalXS)));}"
|
|
191
|
+
".fruq291{padding-left:var(--spacingHorizontalXS);}",
|
|
192
|
+
".f7x41pl{padding-right:var(--spacingHorizontalXS);}"
|
|
195
193
|
]
|
|
196
194
|
});
|
|
197
195
|
const useSwitchStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } 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: `var(--1897, var(--1898, ${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: `var(--1899, var(--1900, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1901, var(--1902, ${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: `var(--1903, var(--1904, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--1905, var(--1906, ${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: `var(--1907, var(--1908, ${tokens.colorNeutralForegroundDisabled}))`\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: `var(--1909, var(--1910, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--1911, var(--1912, ${tokens.colorNeutralStrokeAccessible}))`,\n borderColor: `var(--1913, var(--1914, ${tokens.colorNeutralStrokeAccessible}))`\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: `var(--1915, var(--1916, ${tokens.colorNeutralForeground1}))`\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--1917, var(--1918, ${tokens.colorNeutralStrokeAccessibleHover}))`,\n borderColor: `var(--1919, var(--1920, ${tokens.colorNeutralStrokeAccessibleHover}))`\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--1921, var(--1922, ${tokens.colorNeutralStrokeAccessiblePressed}))`,\n borderColor: `var(--1923, var(--1924, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--1925, var(--1926, ${tokens.colorCompoundBrandBackground}))`,\n color: `var(--1927, var(--1928, ${tokens.colorNeutralForegroundInverted}))`,\n borderColor: `var(--1929, var(--1930, ${tokens.colorTransparentStroke}))`\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--1931, var(--1932, ${tokens.colorCompoundBrandBackgroundHover}))`,\n borderColor: `var(--1933, var(--1934, ${tokens.colorTransparentStrokeInteractive}))`\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--1935, var(--1936, ${tokens.colorCompoundBrandBackgroundPressed}))`,\n borderColor: `var(--1937, var(--1938, ${tokens.colorTransparentStrokeInteractive}))`\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: `var(--1939, var(--1940, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--1941, var(--1942, ${tokens.colorNeutralBackgroundDisabled}))`,\n borderColor: `var(--1943, var(--1944, ${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 padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n above: {\n paddingTop: `var(--1945, var(--1946, ${tokens.spacingVerticalXS}))`,\n paddingBottom: `var(--1947, var(--1948, ${tokens.spacingVerticalXS}))`,\n width: '100%'\n },\n after: {\n paddingLeft: `var(--1949, var(--1950, ${tokens.spacingHorizontalXS}))`\n },\n before: {\n paddingRight: `var(--1951, var(--1952, ${tokens.spacingHorizontalXS}))`\n }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\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"],"names":["switchClassName","switchClassNames","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","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } 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 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 'use no memo';\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"],"names":["switchClassName","switchClassNames","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","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240822-1237.1",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,20 +26,20 @@
|
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
29
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240822-1237.1",
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240822-1237.1",
|
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-field": "0.0.0-nightly-20240822-1237.1",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.245",
|
|
37
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
42
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
37
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240822-1237.1",
|
|
38
|
+
"@fluentui/react-label": "0.0.0-nightly-20240822-1237.1",
|
|
39
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240822-1237.1",
|
|
40
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20240822-1237.1",
|
|
41
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240822-1237.1",
|
|
42
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240822-1237.1",
|
|
43
43
|
"@griffel/react": "^1.5.22",
|
|
44
44
|
"@swc/helpers": "^0.5.1"
|
|
45
45
|
},
|