npm - @fluentui/react-checkbox - Versions diffs - 9.0.14 → 9.0.15 - Mend

@fluentui/react-checkbox 9.0.14 → 9.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.json +54 -1
package/CHANGELOG.md +16 -2
package/lib/components/Checkbox/useCheckboxStyles.js +17 -165
package/lib/components/Checkbox/useCheckboxStyles.js.map +1 -1
package/lib-amd/components/Checkbox/useCheckboxStyles.js +88 -37
package/lib-amd/components/Checkbox/useCheckboxStyles.js.map +1 -1
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js +16 -164
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map +1 -1
package/package.json +7 -6

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,60 @@
   "name": "@fluentui/react-checkbox",
   "entries": [
     {
-      "date": "Mon, 05 Dec 2022 18:25:37 GMT",
+      "date": "Tue, 20 Dec 2022 14:55:47 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.15",
+      "version": "9.0.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "9c6efea1aea75e3e0d7355a729785ade9af638c5",
+            "comment": "chore: Update Checkbox to use griffel reset styles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.11",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.0.13",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.3.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-theme to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-utilities to v9.3.0",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          }
+        ],
+        "none": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "9693ad97624e44786c6fa0418c7f5e8fa407af2a",
+            "comment": "chore: Add Checkbox bundle size test"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Dec 2022 18:29:39 GMT",
       "tag": "@fluentui/react-checkbox_v9.0.14",
       "version": "9.0.14",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-checkbox
-This log was last generated on Mon, 05 Dec 2022 18:25:37 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Dec 2022 14:55:47 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.15)
+Tue, 20 Dec 2022 14:55:47 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.14..@fluentui/react-checkbox_v9.0.15)
+### Patches
+- chore: Update Checkbox to use griffel reset styles ([PR #25984](https://github.com/microsoft/fluentui/pull/25984) by behowell@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.11 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-label to v9.0.13 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-tabster to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
 ## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.14)
-Mon, 05 Dec 2022 18:25:37 GMT
+Mon, 05 Dec 2022 18:29:39 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.13..@fluentui/react-checkbox_v9.0.14)
 ### Patches

package/lib/components/Checkbox/useCheckboxStyles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { shorthands, __styles, mergeClasses } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 export const checkboxClassNames = {
@@ -11,177 +11,27 @@ export const checkboxClassNames = {
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
-const useRootStyles = /*#__PURE__*/__styles({
-  "base": {
-    "qhf8xq": "f10pi13n",
-    "mc9l5x": "ftuwxu6",
-    "Brovlpu": "ftqa4ok",
-    "B486eqv": "f2hkw1w",
-    "Bssx7fj": "f1b1k54r",
-    "uh7if5": ["f4ne723", "fqqcjud"],
-    "clntm0": "fh7aioi",
-    "Dlk2r6": ["fqqcjud", "f4ne723"],
-    "B2j2mmj": "ffht0p2",
-    "wigs8": "f1p0ul1q",
-    "pbfy6t": "f1c901ms",
-    "B0v4ure": "f1alokd7",
-    "ghq09": "f78i1la",
-    "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
-    "Bwckmig": "f8k7e5g",
-    "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
-    "Bbgo44z": "f1pmxfrl",
-    "Bil7v7r": ["fszkfcr", "f1ap5ily"],
-    "skfxo0": "f57dp0y",
-    "jo1ztg": ["f1ap5ily", "fszkfcr"],
-    "Ba3ybja": ["f11dm2qb", "f136rfnd"],
-    "az1dzo": ["f136rfnd", "f11dm2qb"],
-    "vppk2z": ["fdsq1qd", "f1khssms"],
-    "B6352mv": ["f1khssms", "fdsq1qd"],
-    "nr063g": "fq4eyks",
-    "Blmvk6g": ["f1ya6x16", "ftuszwa"],
-    "Bsiemmq": "f1e2iu44",
-    "B98u21t": ["ftuszwa", "f1ya6x16"],
-    "B2pnrqr": "f1xkdug0",
-    "Bhhzhcn": "f1m1ywml",
-    "Bec0n69": ["f7u4kgv", "f1a36mvi"],
-    "B29w5g4": ["f1a36mvi", "f7u4kgv"]
-  }
-}, {
-  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}"],
-  "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
-});
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1o1qdo1", "r1niodl4", [".r1o1qdo1{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1o1qdo1:focus{outline-style:none;}", ".r1o1qdo1:focus-visible{outline-style:none;}", ".r1o1qdo1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1o1qdo1[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:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1niodl4{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1niodl4:focus{outline-style:none;}", ".r1niodl4:focus-visible{outline-style:none;}", ".r1niodl4[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1niodl4[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:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
+const useInputBaseClassName = /*#__PURE__*/__resetStyles("rfcvz6l", null, [".rfcvz6l{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".rfcvz6l:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".rfcvz6l:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".rfcvz6l:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rfcvz6l:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rfcvz6l:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rfcvz6l:disabled{cursor:default;}", ".rfcvz6l:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__label{color:GrayText;}}", ".rfcvz6l:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
 const useInputStyles = /*#__PURE__*/__styles({
-  "base": {
-    "B7ck84d": "f1ewtqcl",
-    "Bceei9c": "f1k6fduh",
-    "Bqenvij": "f1l02sjl",
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f11qmguv", "f1tyq0we"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"],
-    "abs64n": "fk73vx1",
-    "qhf8xq": "f1euv43f",
-    "Bhzewxz": "f15twtuk",
-    "B26k0as": "f1yrrd5t",
-    "k0xvi9": "fvfr0er",
-    "Bqb28oy": "fcwiijr",
-    "Fszymg": ["f11s8ldy", "f37mzfx"],
-    "s5xoki": "forfpyi",
-    "cfw8t2": ["f37mzfx", "f11s8ldy"],
-    "b9fajx": "f1vd61pd",
-    "pff03s": "f1mzgjal",
-    "Bk0s23q": ["f1iwu0i3", "f6umev3"],
-    "Bfc5gcl": "femu9zt",
-    "a4vgqw": ["f6umev3", "f1iwu0i3"],
-    "Fum7gy": "f1s8s9qo",
-    "B5tev9i": "fuvx3by",
-    "ecjak0": ["fuqx993", "f1akce7s"],
-    "B006ete": "feccz1o",
-    "Bxlzfhf": ["f1akce7s", "fuqx993"],
-    "qzqrip": "fqgvcms",
-    "xmoia3": "f1wvbx6q",
-    "i1phtq": "fxmj0gd",
-    "Bi8r3f5": "fkf9h0q",
-    "yvncz7": ["faeo8p5", "f4rpdul"],
-    "D2mvea": "fsk3itm",
-    "Bjmkmyo": ["f4rpdul", "faeo8p5"],
-    "B525uqd": "f4wqdms",
-    "B5z3g6i": "ftufdon",
-    "Bwnzx1a": ["f1ni78ii", "f1pe82pw"],
-    "w3j1jp": "fxl8eb7",
-    "n2zbqb": ["f1pe82pw", "f1ni78ii"],
-    "Bek439x": "f12pgwe7",
-    "Bgt4g9q": "f1c5u0pt",
-    "Bkzkukt": ["fyfn4nz", "f1aaeu2t"],
-    "wg1kw8": "ffzx9q8",
-    "Bh7u92y": ["f1aaeu2t", "fyfn4nz"],
-    "B40413r": "f1rm0htn",
-    "B9f5amx": "fpb7n6l",
-    "gbnyp0": ["f1uwkm0d", "fakdbj6"],
-    "ilwfws": "f180qsza",
-    "Fk4w3x": ["fakdbj6", "f1uwkm0d"],
-    "tfmijd": "f3nyagc",
-    "Bketd8w": "f1eh922j",
-    "s1clob": ["f1f3l6lh", "faa1us6"],
-    "B8s8lrk": "f1g6jlfz",
-    "Bp3qae9": ["faa1us6", "f1f3l6lh"],
-    "c4h28b": "f1d2ycii",
-    "Bvff7ki": "f18ruat1",
-    "B0usqpl": ["f18b6ltw", "fd6ao2z"],
-    "ckdfsi": "fdz9k82",
-    "B2hfjzz": ["fd6ao2z", "f18b6ltw"],
-    "B0rx68v": "f8c3d4w",
-    "ezr58z": "fvxnmui",
-    "B8h3e3j": "fds6yy4",
-    "Bdfu378": "f1ceq7vh",
-    "Bhmh25c": "f2zvonr",
-    "fvfg5q": "f4ohyq5",
-    "Bbnnodr": ["f1kakd2g", "f3ulah5"],
-    "B7y28oj": "f5fda5m",
-    "Dpxclb": ["f3ulah5", "f1kakd2g"],
-    "E1kcat": "f1c3drxw",
-    "Bt6osj6": "f8cdtmm",
-    "Jop56w": "f8701xt"
-  },
   "before": {
     "j35jbq": ["f1e31b4d", "f1vgc2s3"]
   },
   "after": {
     "oyh7mz": ["f1vgc2s3", "f1e31b4d"]
   },
-  "medium": {
-    "a9b677": "fwr58v7"
-  },
   "large": {
     "a9b677": "f1mq5jt6"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fxmj0gd:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".fds6yy4:disabled~.fui-Checkbox__label{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".fwr58v7{width:calc(16px + 2 * var(--spacingHorizontalS));}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"],
-  "m": [["@media (forced-colors: active){.f2zvonr:disabled~.fui-Checkbox__label{color:GrayText;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f8cdtmm:disabled~.fui-Checkbox__indicator{color:GrayText;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f8701xt:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}", {
-    "m": "(forced-colors: active)"
-  }]]
+  "d": [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
 });
+const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1jvlehe", null, [".r1jvlehe{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
 const useIndicatorStyles = /*#__PURE__*/__styles({
-  "base": {
-    "qb2dma": "fjgzulp",
-    "B7ck84d": "f1ewtqcl",
-    "Bnnss6s": "fi64zpg",
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "Brf1p80": "f4d9j23",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "f1sil6mw",
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "Bbmb7ep": ["f1g3puop", "fi2rrw2"],
-    "Beyfa6y": ["fi2rrw2", "f1g3puop"],
-    "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
-    "Btl43ni": ["f1s4nn1u", "f1rstyi9"],
-    "B6of3ja": "frnwi6n",
-    "t21cq0": ["f1vcna3q", "foyynoy"],
-    "jrapky": "fqcjy3b",
-    "Frg6f3": ["foyynoy", "f1vcna3q"],
-    "Bkfmm31": "f1w9h62z",
-    "Bkecrkj": "f1aehjj5"
-  },
-  "medium": {
-    "Be2twd7": "f1ugzwwg",
-    "Bqenvij": "fd461yt",
-    "a9b677": "fjw5fx7"
-  },
   "large": {
     "Be2twd7": "f4ybsrx",
     "Bqenvij": "fjamq6b",
@@ -194,13 +44,13 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
     "Btl43ni": ["f1s8kh49", "f1djnp8u"]
   }
 }, {
-  "d": [".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}", ".f1ugzwwg{font-size:12px;}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
-});
+  "d": [".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
+}); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
 const useLabelStyles = /*#__PURE__*/__styles({
   "base": {
     "qb2dma": "f7nlbp4",
-    "sj55zd": "f1ym3bx4",
     "Bceei9c": "f1k6fduh",
     "z8tnut": "f1kwiid1",
     "z189sj": ["f1vdfbxk", "f1f5gg8d"],
@@ -222,7 +72,7 @@ const useLabelStyles = /*#__PURE__*/__styles({
     "jrapky": "f49ad5g"
   }
 }, {
-  "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1ym3bx4{color:inherit;}", ".f1k6fduh{cursor:pointer;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
+  "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
 });
 /**
  * Apply styling to the Checkbox slots based on the state
@@ -230,19 +80,21 @@ const useLabelStyles = /*#__PURE__*/__styles({
 export const useCheckboxStyles_unstable = state => {
-  const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);
   const {
     labelPosition,
     shape,
     size
   } = state;
+  const rootBaseClassName = useRootBaseClassName();
+  state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);
+  const inputBaseClassName = useInputBaseClassName();
   const inputStyles = useInputStyles();
-  state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, inputStyles[size], inputStyles[labelPosition], state.input.className);
+  state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
+  const indicatorBaseClassName = useIndicatorBaseClassName();
   const indicatorStyles = useIndicatorStyles();
   if (state.indicator) {
-    state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[size], shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+    state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
   }
   const labelStyles = useLabelStyles();

package/lib/components/Checkbox/useCheckboxStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n },\n\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\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 checkbox.\n medium: {\n width: `calc(${indicatorSizeMedium} + 2 ${tokens.spacingHorizontalS})`,\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n },\n\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const { labelPosition, shape, size } = state;\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputStyles.base,\n inputStyles[size],\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[size],\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"AAAA,kCAAsC,YAAtC,EAAoD,UAApD,QAAsE,gBAAtE;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,KAAK,EAAE,qBAFwD;EAG/D,KAAK,EAAE,qBAHwD;EAI/D,SAAS,EAAE;AAJoD,CAA1D,C,CAOP;;AACA,MAAM,mBAAmB,GAAG,MAA5B;AACA,MAAM,kBAAkB,GAAG,MAA3B;;AAEA,MAAM,oBAAoB,gBAAG,6uEAA7B;;AAMA,MAAM,qBAAqB,gBAAG,i3FAA9B;;AAyHA,MAAM,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAaA,MAAM,yBAAyB,gBAAG,2rBAAlC;;AAqBA,MAAM,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B,C,CAYA;;;AACA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AA0BA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,aAAF;IAAiB,KAAjB;IAAwB;EAAxB,IAAiC,KAAvC;EAEA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,iBAA1B,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAnC;EAEA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,kBAAkB,CAAC,KADe,EAElC,kBAFkC,EAGlC,IAAI,KAAK,OAAT,IAAoB,WAAW,CAAC,KAHE,EAIlC,WAAW,CAAC,aAAD,CAJuB,EAKlC,KAAK,CAAC,KAAN,CAAY,SALsB,CAApC;EAQA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;EACA,MAAM,eAAe,GAAG,kBAAkB,EAA1C;;EACA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,kBAAkB,CAAC,SADmB,EAEtC,sBAFsC,EAGtC,IAAI,KAAK,OAAT,IAAoB,eAAe,CAAC,KAHE,EAItC,KAAK,KAAK,UAAV,IAAwB,eAAe,CAAC,QAJF,EAKtC,KAAK,CAAC,SAAN,CAAgB,SALsB,CAAxC;EAOD;;EAED,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,kBAAkB,CAAC,KADe,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,IAAD,CAHuB,EAIlC,WAAW,CAAC,aAAD,CAJuB,EAKlC,KAAK,CAAC,KAAN,CAAY,SALsB,CAApC;EAOD;;EAED,OAAO,KAAP;AACD,CAxCM","sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\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 top: 0,\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 checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-amd/components/Checkbox/useCheckboxStyles.js CHANGED Viewed

@@ -12,58 +12,94 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabste
     // The indicator size is used by the indicator and label styles
     var indicatorSizeMedium = '16px';
     var indicatorSizeLarge = '20px';
-    var useRootStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ position: 'relative', display: 'inline-flex' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })),
-    });
-    var useInputStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', cursor: 'pointer', height: '100%' }, react_1.shorthands.margin(0)), (_a = { opacity: 0, position: 'absolute', top: 0 }, _a[":not(:checked):not(:indeterminate) ~ ." + exports.checkboxClassNames.indicator + " > *"] = {
+    var useRootBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ position: 'relative', display: 'inline-flex' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })));
+    var useInputBaseClassName = react_1.makeResetStyles((_a = {
+            boxSizing: 'border-box',
+            cursor: 'pointer',
+            height: '100%',
+            margin: 0,
+            opacity: 0,
+            position: 'absolute',
+            top: 0,
+            // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
+            // This is done so that clicking on that "empty space" still toggles the checkbox.
+            width: "calc(" + indicatorSizeMedium + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")"
+        },
+        // When unchecked, hide the the checkmark icon (child of the indicator slot)
+        _a[":not(:checked):not(:indeterminate) ~ ." + exports.checkboxClassNames.indicator + " > *"] = {
             opacity: 0,
-        },
+        },
         // Colors for the unchecked state
         _a[':enabled:not(:checked):not(:indeterminate)'] = (_b = {},
             _b["& ~ ." + exports.checkboxClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForeground3,
             },
-            _b["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessible)),
+            _b["& ~ ." + exports.checkboxClassNames.indicator] = {
+                borderColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
+            },
             _b[':hover'] = (_c = {},
                 _c["& ~ ." + exports.checkboxClassNames.label] = {
                     color: react_theme_1.tokens.colorNeutralForeground2,
                 },
-                _c["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessibleHover)),
+                _c["& ~ ." + exports.checkboxClassNames.indicator] = {
+                    borderColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
+                },
                 _c),
             _b[':active:hover'] = (_d = {},
                 _d["& ~ ." + exports.checkboxClassNames.label] = {
                     color: react_theme_1.tokens.colorNeutralForeground1,
                 },
-                _d["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessiblePressed)),
+                _d["& ~ ." + exports.checkboxClassNames.indicator] = {
+                    borderColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
+                },
                 _d),
-            _b),
+            _b),
         // Colors for the checked state
         _a[':enabled:checked:not(:indeterminate)'] = (_e = {},
             _e["& ~ ." + exports.checkboxClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForeground1,
             },
-            _e["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground, color: react_theme_1.tokens.colorNeutralForegroundInverted }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackground)),
+            _e["& ~ ." + exports.checkboxClassNames.indicator] = {
+                backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground,
+                color: react_theme_1.tokens.colorNeutralForegroundInverted,
+                borderColor: react_theme_1.tokens.colorCompoundBrandBackground,
+            },
             _e[':hover'] = (_f = {},
-                _f["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackgroundHover)),
+                _f["& ~ ." + exports.checkboxClassNames.indicator] = {
+                    backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover,
+                    borderColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover,
+                },
                 _f),
             _e[':active:hover'] = (_g = {},
-                _g["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackgroundPressed)),
+                _g["& ~ ." + exports.checkboxClassNames.indicator] = {
+                    backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
+                    borderColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
+                },
                 _g),
-            _e),
+            _e),
         // Colors for the mixed state
         _a[':enabled:indeterminate'] = (_h = {},
             _h["& ~ ." + exports.checkboxClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForeground1,
             },
-            _h["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStroke)), { color: react_theme_1.tokens.colorCompoundBrandForeground1 }),
+            _h["& ~ ." + exports.checkboxClassNames.indicator] = {
+                borderColor: react_theme_1.tokens.colorCompoundBrandStroke,
+                color: react_theme_1.tokens.colorCompoundBrandForeground1,
+            },
             _h[':hover'] = (_j = {},
-                _j["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokeHover)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Hover }),
+                _j["& ~ ." + exports.checkboxClassNames.indicator] = {
+                    borderColor: react_theme_1.tokens.colorCompoundBrandStrokeHover,
+                    color: react_theme_1.tokens.colorCompoundBrandForeground1Hover,
+                },
                 _j),
             _h[':active:hover'] = (_k = {},
-                _k["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokePressed)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed }),
+                _k["& ~ ." + exports.checkboxClassNames.indicator] = {
+                    borderColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
+                    color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed,
+                },
                 _k),
-            _h), _a[':disabled'] = (_l = {
+            _h),
+        _a[':disabled'] = (_l = {
                 cursor: 'default'
             },
             _l["& ~ ." + exports.checkboxClassNames.label] = {
@@ -73,37 +109,49 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabste
                     color: 'GrayText',
                 },
             },
-            _l["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, '@media (forced-colors: active)': {
+            _l["& ~ ." + exports.checkboxClassNames.indicator] = {
+                borderColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                '@media (forced-colors: active)': {
                     color: 'GrayText',
-                } }),
+                },
+            },
             _l["& ~ ." + exports.checkboxClassNames.indicator + " svg"] = {
                 '@media (forced-colors: active)': {
                     color: 'GrayText',
                 },
             },
-            _l), _a)),
+            _l),
+        _a));
+    var useInputStyles = react_1.makeStyles({
         before: {
             right: 0,
         },
         after: {
             left: 0,
         },
-        // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
-        // This is done so that clicking on that "empty space" still toggles the checkbox.
-        medium: {
-            width: "calc(" + indicatorSizeMedium + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
-        },
         large: {
             width: "calc(" + indicatorSizeLarge + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
         },
     });
+    var useIndicatorBaseClassName = react_1.makeResetStyles({
+        alignSelf: 'flex-start',
+        boxSizing: 'border-box',
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        border: react_theme_1.tokens.strokeWidthThin + ' solid',
+        borderRadius: react_theme_1.tokens.borderRadiusSmall,
+        margin: react_theme_1.tokens.spacingVerticalS + ' ' + react_theme_1.tokens.spacingHorizontalS,
+        fill: 'currentColor',
+        pointerEvents: 'none',
+        fontSize: '12px',
+        height: indicatorSizeMedium,
+        width: indicatorSizeMedium,
+    });
     var useIndicatorStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignSelf: 'flex-start', boxSizing: 'border-box', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, react_1.shorthands.overflow('hidden')), react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall)), react_1.shorthands.margin(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)), { fill: 'currentColor', pointerEvents: 'none' }),
-        medium: {
-            fontSize: '12px',
-            height: indicatorSizeMedium,
-            width: indicatorSizeMedium,
-        },
         large: {
             fontSize: '16px',
             height: indicatorSizeLarge,
@@ -111,8 +159,9 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabste
         },
         circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
     });
+    // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
     var useLabelStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ alignSelf: 'center', color: 'inherit', cursor: 'pointer' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)),
+        base: tslib_1.__assign({ alignSelf: 'center', cursor: 'pointer' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)),
         before: {
             paddingRight: react_theme_1.tokens.spacingHorizontalXS,
         },
@@ -134,14 +183,16 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabste
      * Apply styling to the Checkbox slots based on the state
      */
     var useCheckboxStyles_unstable = function (state) {
-        var rootStyles = useRootStyles();
-        state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootStyles.base, state.root.className);
         var labelPosition = state.labelPosition, shape = state.shape, size = state.size;
+        var rootBaseClassName = useRootBaseClassName();
+        state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootBaseClassName, state.root.className);
+        var inputBaseClassName = useInputBaseClassName();
         var inputStyles = useInputStyles();
-        state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputStyles.base, inputStyles[size], inputStyles[labelPosition], state.input.className);
+        state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
+        var indicatorBaseClassName = useIndicatorBaseClassName();
         var indicatorStyles = useIndicatorStyles();
         if (state.indicator) {
-            state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[size], shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+            state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
         }
         var labelStyles = useLabelStyles();
         if (state.label) {

package/lib-amd/components/Checkbox/useCheckboxStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCheckboxStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n },\n\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\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 checkbox.\n medium: {\n width: `calc(${indicatorSizeMedium} + 2 ${tokens.spacingHorizontalS})`,\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n },\n\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const { labelPosition, shape, size } = state;\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputStyles.base,\n inputStyles[size],\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[size],\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"file":"useCheckboxStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\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 top: 0,\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 checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}

package/lib-commonjs/components/Checkbox/useCheckboxStyles.js CHANGED Viewed

@@ -21,177 +21,27 @@ exports.checkboxClassNames = {
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
-const useRootStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "qhf8xq": "f10pi13n",
-    "mc9l5x": "ftuwxu6",
-    "Brovlpu": "ftqa4ok",
-    "B486eqv": "f2hkw1w",
-    "Bssx7fj": "f1b1k54r",
-    "uh7if5": ["f4ne723", "fqqcjud"],
-    "clntm0": "fh7aioi",
-    "Dlk2r6": ["fqqcjud", "f4ne723"],
-    "B2j2mmj": "ffht0p2",
-    "wigs8": "f1p0ul1q",
-    "pbfy6t": "f1c901ms",
-    "B0v4ure": "f1alokd7",
-    "ghq09": "f78i1la",
-    "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
-    "Bwckmig": "f8k7e5g",
-    "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
-    "Bbgo44z": "f1pmxfrl",
-    "Bil7v7r": ["fszkfcr", "f1ap5ily"],
-    "skfxo0": "f57dp0y",
-    "jo1ztg": ["f1ap5ily", "fszkfcr"],
-    "Ba3ybja": ["f11dm2qb", "f136rfnd"],
-    "az1dzo": ["f136rfnd", "f11dm2qb"],
-    "vppk2z": ["fdsq1qd", "f1khssms"],
-    "B6352mv": ["f1khssms", "fdsq1qd"],
-    "nr063g": "fq4eyks",
-    "Blmvk6g": ["f1ya6x16", "ftuszwa"],
-    "Bsiemmq": "f1e2iu44",
-    "B98u21t": ["ftuszwa", "f1ya6x16"],
-    "B2pnrqr": "f1xkdug0",
-    "Bhhzhcn": "f1m1ywml",
-    "Bec0n69": ["f7u4kgv", "f1a36mvi"],
-    "B29w5g4": ["f1a36mvi", "f7u4kgv"]
-  }
-}, {
-  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}"],
-  "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
-});
+const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1o1qdo1", "r1niodl4", [".r1o1qdo1{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1o1qdo1:focus{outline-style:none;}", ".r1o1qdo1:focus-visible{outline-style:none;}", ".r1o1qdo1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1o1qdo1[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:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1niodl4{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1niodl4:focus{outline-style:none;}", ".r1niodl4:focus-visible{outline-style:none;}", ".r1niodl4[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1niodl4[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:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
+const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("rfcvz6l", null, [".rfcvz6l{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".rfcvz6l:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".rfcvz6l:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".rfcvz6l:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rfcvz6l:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rfcvz6l:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rfcvz6l:disabled{cursor:default;}", ".rfcvz6l:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__label{color:GrayText;}}", ".rfcvz6l:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
 const useInputStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "B7ck84d": "f1ewtqcl",
-    "Bceei9c": "f1k6fduh",
-    "Bqenvij": "f1l02sjl",
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f11qmguv", "f1tyq0we"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"],
-    "abs64n": "fk73vx1",
-    "qhf8xq": "f1euv43f",
-    "Bhzewxz": "f15twtuk",
-    "B26k0as": "f1yrrd5t",
-    "k0xvi9": "fvfr0er",
-    "Bqb28oy": "fcwiijr",
-    "Fszymg": ["f11s8ldy", "f37mzfx"],
-    "s5xoki": "forfpyi",
-    "cfw8t2": ["f37mzfx", "f11s8ldy"],
-    "b9fajx": "f1vd61pd",
-    "pff03s": "f1mzgjal",
-    "Bk0s23q": ["f1iwu0i3", "f6umev3"],
-    "Bfc5gcl": "femu9zt",
-    "a4vgqw": ["f6umev3", "f1iwu0i3"],
-    "Fum7gy": "f1s8s9qo",
-    "B5tev9i": "fuvx3by",
-    "ecjak0": ["fuqx993", "f1akce7s"],
-    "B006ete": "feccz1o",
-    "Bxlzfhf": ["f1akce7s", "fuqx993"],
-    "qzqrip": "fqgvcms",
-    "xmoia3": "f1wvbx6q",
-    "i1phtq": "fxmj0gd",
-    "Bi8r3f5": "fkf9h0q",
-    "yvncz7": ["faeo8p5", "f4rpdul"],
-    "D2mvea": "fsk3itm",
-    "Bjmkmyo": ["f4rpdul", "faeo8p5"],
-    "B525uqd": "f4wqdms",
-    "B5z3g6i": "ftufdon",
-    "Bwnzx1a": ["f1ni78ii", "f1pe82pw"],
-    "w3j1jp": "fxl8eb7",
-    "n2zbqb": ["f1pe82pw", "f1ni78ii"],
-    "Bek439x": "f12pgwe7",
-    "Bgt4g9q": "f1c5u0pt",
-    "Bkzkukt": ["fyfn4nz", "f1aaeu2t"],
-    "wg1kw8": "ffzx9q8",
-    "Bh7u92y": ["f1aaeu2t", "fyfn4nz"],
-    "B40413r": "f1rm0htn",
-    "B9f5amx": "fpb7n6l",
-    "gbnyp0": ["f1uwkm0d", "fakdbj6"],
-    "ilwfws": "f180qsza",
-    "Fk4w3x": ["fakdbj6", "f1uwkm0d"],
-    "tfmijd": "f3nyagc",
-    "Bketd8w": "f1eh922j",
-    "s1clob": ["f1f3l6lh", "faa1us6"],
-    "B8s8lrk": "f1g6jlfz",
-    "Bp3qae9": ["faa1us6", "f1f3l6lh"],
-    "c4h28b": "f1d2ycii",
-    "Bvff7ki": "f18ruat1",
-    "B0usqpl": ["f18b6ltw", "fd6ao2z"],
-    "ckdfsi": "fdz9k82",
-    "B2hfjzz": ["fd6ao2z", "f18b6ltw"],
-    "B0rx68v": "f8c3d4w",
-    "ezr58z": "fvxnmui",
-    "B8h3e3j": "fds6yy4",
-    "Bdfu378": "f1ceq7vh",
-    "Bhmh25c": "f2zvonr",
-    "fvfg5q": "f4ohyq5",
-    "Bbnnodr": ["f1kakd2g", "f3ulah5"],
-    "B7y28oj": "f5fda5m",
-    "Dpxclb": ["f3ulah5", "f1kakd2g"],
-    "E1kcat": "f1c3drxw",
-    "Bt6osj6": "f8cdtmm",
-    "Jop56w": "f8701xt"
-  },
   "before": {
     "j35jbq": ["f1e31b4d", "f1vgc2s3"]
   },
   "after": {
     "oyh7mz": ["f1vgc2s3", "f1e31b4d"]
   },
-  "medium": {
-    "a9b677": "fwr58v7"
-  },
   "large": {
     "a9b677": "f1mq5jt6"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fxmj0gd:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".fds6yy4:disabled~.fui-Checkbox__label{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".fwr58v7{width:calc(16px + 2 * var(--spacingHorizontalS));}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"],
-  "m": [["@media (forced-colors: active){.f2zvonr:disabled~.fui-Checkbox__label{color:GrayText;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f8cdtmm:disabled~.fui-Checkbox__indicator{color:GrayText;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f8701xt:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}", {
-    "m": "(forced-colors: active)"
-  }]]
+  "d": [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
 });
+const useIndicatorBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1jvlehe", null, [".r1jvlehe{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
 const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "qb2dma": "fjgzulp",
-    "B7ck84d": "f1ewtqcl",
-    "Bnnss6s": "fi64zpg",
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "Brf1p80": "f4d9j23",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "f1sil6mw",
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "Bbmb7ep": ["f1g3puop", "fi2rrw2"],
-    "Beyfa6y": ["fi2rrw2", "f1g3puop"],
-    "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
-    "Btl43ni": ["f1s4nn1u", "f1rstyi9"],
-    "B6of3ja": "frnwi6n",
-    "t21cq0": ["f1vcna3q", "foyynoy"],
-    "jrapky": "fqcjy3b",
-    "Frg6f3": ["foyynoy", "f1vcna3q"],
-    "Bkfmm31": "f1w9h62z",
-    "Bkecrkj": "f1aehjj5"
-  },
-  "medium": {
-    "Be2twd7": "f1ugzwwg",
-    "Bqenvij": "fd461yt",
-    "a9b677": "fjw5fx7"
-  },
   "large": {
     "Be2twd7": "f4ybsrx",
     "Bqenvij": "fjamq6b",
@@ -204,13 +54,13 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
     "Btl43ni": ["f1s8kh49", "f1djnp8u"]
   }
 }, {
-  "d": [".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}", ".f1ugzwwg{font-size:12px;}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
-});
+  "d": [".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
+}); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "qb2dma": "f7nlbp4",
-    "sj55zd": "f1ym3bx4",
     "Bceei9c": "f1k6fduh",
     "z8tnut": "f1kwiid1",
     "z189sj": ["f1vdfbxk", "f1f5gg8d"],
@@ -232,7 +82,7 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
     "jrapky": "f49ad5g"
   }
 }, {
-  "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1ym3bx4{color:inherit;}", ".f1k6fduh{cursor:pointer;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
+  "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
 });
 /**
  * Apply styling to the Checkbox slots based on the state
@@ -240,19 +90,21 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
 const useCheckboxStyles_unstable = state => {
-  const rootStyles = useRootStyles();
-  state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootStyles.base, state.root.className);
   const {
     labelPosition,
     shape,
     size
   } = state;
+  const rootBaseClassName = useRootBaseClassName();
+  state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootBaseClassName, state.root.className);
+  const inputBaseClassName = useInputBaseClassName();
   const inputStyles = useInputStyles();
-  state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputStyles.base, inputStyles[size], inputStyles[labelPosition], state.input.className);
+  state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
+  const indicatorBaseClassName = useIndicatorBaseClassName();
   const indicatorStyles = useIndicatorStyles();
   if (state.indicator) {
-    state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[size], shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+    state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
   }
   const labelStyles = useLabelStyles();

package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n },\n\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\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 checkbox.\n medium: {\n width: `calc(${indicatorSizeMedium} + 2 ${tokens.spacingHorizontalS})`,\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n },\n\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const { labelPosition, shape, size } = state;\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputStyles.base,\n inputStyles[size],\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[size],\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\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 top: 0,\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 checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.0.14",
+  "version": "9.0.15",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,6 +13,7 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -30,12 +31,12 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.10",
+    "@fluentui/react-field": "9.0.0-alpha.11",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.12",
-    "@fluentui/react-tabster": "^9.3.2",
-    "@fluentui/react-theme": "^9.1.3",
-    "@fluentui/react-utilities": "^9.2.2",
+    "@fluentui/react-label": "^9.0.13",
+    "@fluentui/react-tabster": "^9.3.3",
+    "@fluentui/react-theme": "^9.1.4",
+    "@fluentui/react-utilities": "^9.3.0",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },