@fluentui/react-checkbox 9.0.6 → 9.0.7

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 (7) hide show
  1. package/CHANGELOG.json +30 -3
  2. package/CHANGELOG.md +15 -4
  3. package/lib/components/Checkbox/useCheckboxStyles.js +73 -53
  4. package/lib/components/Checkbox/useCheckboxStyles.js.map +1 -1
  5. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js +73 -53
  6. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map +1 -1
  7. package/package.json +2 -2
package/CHANGELOG.json CHANGED
@@ -2,7 +2,34 @@
2
2
  "name": "@fluentui/react-checkbox",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 20 Sep 2022 20:54:08 GMT",
5
+ "date": "Mon, 03 Oct 2022 22:22:46 GMT",
6
+ "tag": "@fluentui/react-checkbox_v9.0.7",
7
+ "version": "9.0.7",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "behowell@microsoft.com",
12
+ "package": "@fluentui/react-checkbox",
13
+ "commit": "d8219051250909d31767845375b6e1ed6a053856",
14
+ "comment": "fix: Checkbox's label shouldn't have a pointer cursor when disabled"
15
+ },
16
+ {
17
+ "author": "makotom@microsoft.com",
18
+ "package": "@fluentui/react-checkbox",
19
+ "commit": "e44263f522e3e690c49ac69e5eef8e522e6e0a4a",
20
+ "comment": "fix: Making the hidden input only cover the indicator and not also the label."
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-checkbox",
25
+ "comment": "Bump @fluentui/react-tabster to v9.1.2",
26
+ "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Tue, 20 Sep 2022 20:55:45 GMT",
6
33
  "tag": "@fluentui/react-checkbox_v9.0.6",
7
34
  "version": "9.0.6",
8
35
  "comments": {
@@ -11,13 +38,13 @@
11
38
  "author": "beachball",
12
39
  "package": "@fluentui/react-checkbox",
13
40
  "comment": "Bump @fluentui/react-label to v9.0.6",
14
- "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
41
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
15
42
  },
16
43
  {
17
44
  "author": "beachball",
18
45
  "package": "@fluentui/react-checkbox",
19
46
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
20
- "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
47
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
21
48
  }
22
49
  ]
23
50
  }
package/CHANGELOG.md CHANGED
@@ -1,18 +1,29 @@
1
1
  # Change Log - @fluentui/react-checkbox
2
2
 
3
- This log was last generated on Tue, 20 Sep 2022 20:54:08 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 03 Oct 2022 22:22:46 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.7)
8
+
9
+ Mon, 03 Oct 2022 22:22:46 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.6..@fluentui/react-checkbox_v9.0.7)
11
+
12
+ ### Patches
13
+
14
+ - fix: Checkbox's label shouldn't have a pointer cursor when disabled ([PR #25018](https://github.com/microsoft/fluentui/pull/25018) by behowell@microsoft.com)
15
+ - fix: Making the hidden input only cover the indicator and not also the label. ([PR #24638](https://github.com/microsoft/fluentui/pull/24638) by makotom@microsoft.com)
16
+ - Bump @fluentui/react-tabster to v9.1.2 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
17
+
7
18
  ## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.6)
8
19
 
9
- Tue, 20 Sep 2022 20:54:08 GMT
20
+ Tue, 20 Sep 2022 20:55:45 GMT
10
21
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.5..@fluentui/react-checkbox_v9.0.6)
11
22
 
12
23
  ### Patches
13
24
 
14
- - Bump @fluentui/react-label to v9.0.6 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
15
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
25
+ - Bump @fluentui/react-label to v9.0.6 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
26
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
16
27
 
17
28
  ## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.5)
18
29
 
package/lib/components/Checkbox/useCheckboxStyles.js CHANGED
@@ -15,61 +15,55 @@ const useRootStyles = /*#__PURE__*/__styles({
15
15
  "base": {
16
16
  "qhf8xq": "f10pi13n",
17
17
  "mc9l5x": "ftuwxu6",
18
- "z8tnut": "f1kwiid1",
19
- "z189sj": ["f1vdfbxk", "f1f5gg8d"],
20
- "Byoj8tv": "f5b47ha",
21
- "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
22
18
  "Brovlpu": "ftqa4ok",
23
19
  "B486eqv": "f2hkw1w",
24
- "Brlowmp": "fck78tx",
25
- "Fxwv4m": ["f8gneoz", "f14g6lul"],
26
- "Bkrqzay": "f1tc23yq",
27
- "Bg2fdrq": ["f14g6lul", "f8gneoz"],
28
- "Bhpuztq": "ffjpq3d",
29
- "Hxt1dp": "fo0h4cx",
30
- "Fwynku": "f1vef9e5",
31
- "nwv0sh": "fob2zhe",
32
- "sewbek": "ftqc7yw",
33
- "Bmcqtu5": ["fbod6wy", "f4eroa4"],
34
- "Iuyy0o": "flecwt7",
35
- "B1jyaxe": ["f4eroa4", "fbod6wy"],
36
- "Gic0m5": "fzb327l",
37
- "B8s345i": ["f1s2knrb", "f6wuwpp"],
38
- "Btrf9ny": "f1g8ecfq",
39
- "Bz0zc98": ["f6wuwpp", "f1s2knrb"],
40
- "Bdowj5x": ["f1hnqdjl", "fk9eigt"],
41
- "zit2e2": ["fk9eigt", "f1hnqdjl"],
42
- "xdtxim": ["f1g8yfuc", "f1kv2i3z"],
43
- "mjwzc8": ["f1kv2i3z", "f1g8yfuc"],
44
- "Bdlkd80": "ffthsbc",
45
- "mrk28m": ["f1nq9gk1", "f1pmlwz5"],
46
- "Byzfkqq": "f1naw2e2",
47
- "Bnh9nsd": ["f1pmlwz5", "f1nq9gk1"],
48
- "r9zwrz": "fmtt8yl",
49
- "B4yg94n": "fr8phvc",
50
- "glb4xk": ["f5m5r8m", "f1bizo4j"],
51
- "mla9w6": ["f1bizo4j", "f5m5r8m"]
20
+ "n9p9qa": "f1fu8s9w",
21
+ "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
22
+ "r10ruj": "f1c1apvh",
23
+ "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
24
+ "gjlbkn": "fyrlc8h",
25
+ "B1kt0iq": "f28z38y",
26
+ "Boi8ppg": "f1edqc4x",
27
+ "Btfhvw2": "f19bnj08",
28
+ "B55xfkk": "f17wg1r9",
29
+ "i1dkbe": ["fgiioun", "fnx45sh"],
30
+ "Bozs2tv": "f1ljqnps",
31
+ "snkem8": ["fnx45sh", "fgiioun"],
32
+ "Bjilewg": "fsacsau",
33
+ "wht04d": ["flcxmxr", "f138axrn"],
34
+ "vikdft": "f1f4bc3q",
35
+ "Bwdhxlo": ["f138axrn", "flcxmxr"],
36
+ "B167d6d": ["f5m7f7q", "f175edhc"],
37
+ "Bpdw69r": ["f175edhc", "f5m7f7q"],
38
+ "Bsdv7io": ["fhfahiz", "fnreirl"],
39
+ "Bd353ur": ["fnreirl", "fhfahiz"],
40
+ "Bcnuwmc": "fn9i64i",
41
+ "dyfsa2": ["f1pylbqb", "f3dy9ja"],
42
+ "Bdcx1rh": "f1v06qdr",
43
+ "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
44
+ "Bbretkc": "fm1yk70",
45
+ "rnyfg7": "f1itvegt",
46
+ "Bg18gms": ["f17e4q3j", "foxjjqz"],
47
+ "Bym00rn": ["foxjjqz", "f17e4q3j"]
52
48
  }
53
49
  }, {
54
- "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fck78tx.fui-focus-within:focus-within{border-top-color:transparent;}", ".f8gneoz.fui-focus-within:focus-within{border-right-color:transparent;}", ".f14g6lul.fui-focus-within:focus-within{border-left-color:transparent;}", ".f1tc23yq.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".ffjpq3d.fui-focus-within:focus-within::after{content:\"\";}", ".fo0h4cx.fui-focus-within:focus-within::after{position:absolute;}", ".f1vef9e5.fui-focus-within:focus-within::after{pointer-events:none;}", ".fob2zhe.fui-focus-within:focus-within::after{z-index:1;}", ".ftqc7yw.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fbod6wy.fui-focus-within:focus-within::after{border-right-style:solid;}", ".f4eroa4.fui-focus-within:focus-within::after{border-left-style:solid;}", ".flecwt7.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fzb327l.fui-focus-within:focus-within::after{border-top-width:2px;}", ".f1s2knrb.fui-focus-within:focus-within::after{border-right-width:2px;}", ".f6wuwpp.fui-focus-within:focus-within::after{border-left-width:2px;}", ".f1g8ecfq.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".f1hnqdjl.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fk9eigt.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1g8yfuc.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1kv2i3z.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".ffthsbc.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1nq9gk1.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f1pmlwz5.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1naw2e2.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fmtt8yl.fui-focus-within:focus-within::after{top:-2px;}", ".fr8phvc.fui-focus-within:focus-within::after{bottom:-2px;}", ".f5m5r8m.fui-focus-within:focus-within::after{left:-2px;}", ".f1bizo4j.fui-focus-within:focus-within::after{right:-2px;}"],
50
+ "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}"],
55
51
  "f": [".ftqa4ok:focus{outline-style:none;}"],
56
52
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
57
53
  });
58
54
 
59
55
  const useInputStyles = /*#__PURE__*/__styles({
60
56
  "base": {
61
- "qhf8xq": "f1euv43f",
62
- "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
63
- "Bhzewxz": "f15twtuk",
64
- "a9b677": "fly5x3f",
65
- "Bqenvij": "f1l02sjl",
66
57
  "B7ck84d": "f1ewtqcl",
58
+ "Bceei9c": "f1k6fduh",
59
+ "Bqenvij": "f1l02sjl",
67
60
  "B6of3ja": "f1hu3pq6",
68
61
  "t21cq0": ["f11qmguv", "f1tyq0we"],
69
62
  "jrapky": "f19f4twv",
70
63
  "Frg6f3": ["f1tyq0we", "f11qmguv"],
71
64
  "abs64n": "fk73vx1",
72
- "Bceei9c": "f1k6fduh",
65
+ "qhf8xq": "f1euv43f",
66
+ "Bhzewxz": "f15twtuk",
73
67
  "B26k0as": "f1yrrd5t",
74
68
  "k0xvi9": "fvfr0er",
75
69
  "Bqb28oy": "fcwiijr",
@@ -120,6 +114,7 @@ const useInputStyles = /*#__PURE__*/__styles({
120
114
  "B2hfjzz": ["fd6ao2z", "f18b6ltw"],
121
115
  "B0rx68v": "f8c3d4w",
122
116
  "ezr58z": "fvxnmui",
117
+ "B8h3e3j": "fds6yy4",
123
118
  "Bdfu378": "f1ceq7vh",
124
119
  "Bhmh25c": "f2zvonr",
125
120
  "fvfg5q": "f4ohyq5",
@@ -129,9 +124,21 @@ const useInputStyles = /*#__PURE__*/__styles({
129
124
  "E1kcat": "f1c3drxw",
130
125
  "Bt6osj6": "f8cdtmm",
131
126
  "Jop56w": "f8701xt"
127
+ },
128
+ "before": {
129
+ "j35jbq": ["f1e31b4d", "f1vgc2s3"]
130
+ },
131
+ "after": {
132
+ "oyh7mz": ["f1vgc2s3", "f1e31b4d"]
133
+ },
134
+ "medium": {
135
+ "a9b677": "fwr58v7"
136
+ },
137
+ "large": {
138
+ "a9b677": "f1mq5jt6"
132
139
  }
133
140
  }, {
134
- "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".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;}", ".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);}"],
141
+ "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));}"],
135
142
  "m": [["@media (forced-colors: active){.f2zvonr:disabled~.fui-Checkbox__label{color:GrayText;}}", {
136
143
  "m": "(forced-colors: active)"
137
144
  }], ["@media (forced-colors: active){.f8cdtmm:disabled~.fui-Checkbox__indicator{color:GrayText;}}", {
@@ -163,18 +170,22 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
163
170
  "Beyfa6y": ["fi2rrw2", "f1g3puop"],
164
171
  "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
165
172
  "Btl43ni": ["f1s4nn1u", "f1rstyi9"],
173
+ "B6of3ja": "frnwi6n",
174
+ "t21cq0": ["f1vcna3q", "foyynoy"],
175
+ "jrapky": "fqcjy3b",
176
+ "Frg6f3": ["foyynoy", "f1vcna3q"],
166
177
  "Bkfmm31": "f1w9h62z",
167
178
  "Bkecrkj": "f1aehjj5"
168
179
  },
169
180
  "medium": {
170
- "a9b677": "fjw5fx7",
181
+ "Be2twd7": "f1ugzwwg",
171
182
  "Bqenvij": "fd461yt",
172
- "Be2twd7": "f1ugzwwg"
183
+ "a9b677": "fjw5fx7"
173
184
  },
174
185
  "large": {
175
- "a9b677": "f64fuq3",
186
+ "Be2twd7": "f4ybsrx",
176
187
  "Bqenvij": "fjamq6b",
177
- "Be2twd7": "f4ybsrx"
188
+ "a9b677": "f64fuq3"
178
189
  },
179
190
  "circular": {
180
191
  "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
@@ -183,20 +194,24 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
183
194
  "Btl43ni": ["f1s8kh49", "f1djnp8u"]
184
195
  }
185
196
  }, {
186
- "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);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f4ybsrx{font-size:16px;}", ".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);}"]
197
+ "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);}"]
187
198
  });
188
199
 
189
200
  const useLabelStyles = /*#__PURE__*/__styles({
190
201
  "base": {
191
202
  "qb2dma": "f7nlbp4",
192
- "Bceei9c": "fpo1scq",
193
- "sj55zd": "f1ym3bx4"
203
+ "sj55zd": "f1ym3bx4",
204
+ "Bceei9c": "f1k6fduh",
205
+ "z8tnut": "f1kwiid1",
206
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
207
+ "Byoj8tv": "f5b47ha",
208
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
194
209
  },
195
210
  "before": {
196
- "t21cq0": ["fkujibs", "f199hnxi"]
211
+ "z189sj": ["f7x41pl", "fruq291"]
197
212
  },
198
213
  "after": {
199
- "Frg6f3": ["f199hnxi", "fkujibs"]
214
+ "uwmqm3": ["fruq291", "f7x41pl"]
200
215
  },
201
216
  "medium": {
202
217
  "B6of3ja": "fjzwpt6",
@@ -207,7 +222,7 @@ const useLabelStyles = /*#__PURE__*/__styles({
207
222
  "jrapky": "f49ad5g"
208
223
  }
209
224
  }, {
210
- "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".fpo1scq{cursor:inherit;}", ".f1ym3bx4{color:inherit;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".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);}"]
225
+ "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);}"]
211
226
  });
212
227
  /**
213
228
  * Apply styling to the Checkbox slots based on the state
@@ -217,18 +232,23 @@ const useLabelStyles = /*#__PURE__*/__styles({
217
232
  export const useCheckboxStyles_unstable = state => {
218
233
  const rootStyles = useRootStyles();
219
234
  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);
235
+ const {
236
+ labelPosition,
237
+ shape,
238
+ size
239
+ } = state;
220
240
  const inputStyles = useInputStyles();
221
- state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);
241
+ state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, inputStyles[size], inputStyles[labelPosition], state.input.className);
222
242
  const indicatorStyles = useIndicatorStyles();
223
243
 
224
244
  if (state.indicator) {
225
- state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
245
+ state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[size], shape === 'circular' && indicatorStyles.circular, state.indicator.className);
226
246
  }
227
247
 
228
248
  const labelStyles = useLabelStyles();
229
249
 
230
250
  if (state.label) {
231
- state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[state.size], labelStyles[state.labelPosition], state.label.className);
251
+ state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
232
252
  }
233
253
 
234
254
  return state;
package/lib/components/Checkbox/useCheckboxStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n cursor: 'pointer',\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 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\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 fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n width: indicatorSizeMedium,\n height: indicatorSizeMedium,\n fontSize: '12px',\n },\n\n large: {\n width: indicatorSizeLarge,\n height: indicatorSizeLarge,\n fontSize: '16px',\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'inherit',\n color: 'inherit',\n },\n\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[state.size],\n state.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[state.size],\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["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/"}
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js CHANGED
@@ -25,61 +25,55 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
25
25
  "base": {
26
26
  "qhf8xq": "f10pi13n",
27
27
  "mc9l5x": "ftuwxu6",
28
- "z8tnut": "f1kwiid1",
29
- "z189sj": ["f1vdfbxk", "f1f5gg8d"],
30
- "Byoj8tv": "f5b47ha",
31
- "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
32
28
  "Brovlpu": "ftqa4ok",
33
29
  "B486eqv": "f2hkw1w",
34
- "Brlowmp": "fck78tx",
35
- "Fxwv4m": ["f8gneoz", "f14g6lul"],
36
- "Bkrqzay": "f1tc23yq",
37
- "Bg2fdrq": ["f14g6lul", "f8gneoz"],
38
- "Bhpuztq": "ffjpq3d",
39
- "Hxt1dp": "fo0h4cx",
40
- "Fwynku": "f1vef9e5",
41
- "nwv0sh": "fob2zhe",
42
- "sewbek": "ftqc7yw",
43
- "Bmcqtu5": ["fbod6wy", "f4eroa4"],
44
- "Iuyy0o": "flecwt7",
45
- "B1jyaxe": ["f4eroa4", "fbod6wy"],
46
- "Gic0m5": "fzb327l",
47
- "B8s345i": ["f1s2knrb", "f6wuwpp"],
48
- "Btrf9ny": "f1g8ecfq",
49
- "Bz0zc98": ["f6wuwpp", "f1s2knrb"],
50
- "Bdowj5x": ["f1hnqdjl", "fk9eigt"],
51
- "zit2e2": ["fk9eigt", "f1hnqdjl"],
52
- "xdtxim": ["f1g8yfuc", "f1kv2i3z"],
53
- "mjwzc8": ["f1kv2i3z", "f1g8yfuc"],
54
- "Bdlkd80": "ffthsbc",
55
- "mrk28m": ["f1nq9gk1", "f1pmlwz5"],
56
- "Byzfkqq": "f1naw2e2",
57
- "Bnh9nsd": ["f1pmlwz5", "f1nq9gk1"],
58
- "r9zwrz": "fmtt8yl",
59
- "B4yg94n": "fr8phvc",
60
- "glb4xk": ["f5m5r8m", "f1bizo4j"],
61
- "mla9w6": ["f1bizo4j", "f5m5r8m"]
30
+ "n9p9qa": "f1fu8s9w",
31
+ "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
32
+ "r10ruj": "f1c1apvh",
33
+ "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
34
+ "gjlbkn": "fyrlc8h",
35
+ "B1kt0iq": "f28z38y",
36
+ "Boi8ppg": "f1edqc4x",
37
+ "Btfhvw2": "f19bnj08",
38
+ "B55xfkk": "f17wg1r9",
39
+ "i1dkbe": ["fgiioun", "fnx45sh"],
40
+ "Bozs2tv": "f1ljqnps",
41
+ "snkem8": ["fnx45sh", "fgiioun"],
42
+ "Bjilewg": "fsacsau",
43
+ "wht04d": ["flcxmxr", "f138axrn"],
44
+ "vikdft": "f1f4bc3q",
45
+ "Bwdhxlo": ["f138axrn", "flcxmxr"],
46
+ "B167d6d": ["f5m7f7q", "f175edhc"],
47
+ "Bpdw69r": ["f175edhc", "f5m7f7q"],
48
+ "Bsdv7io": ["fhfahiz", "fnreirl"],
49
+ "Bd353ur": ["fnreirl", "fhfahiz"],
50
+ "Bcnuwmc": "fn9i64i",
51
+ "dyfsa2": ["f1pylbqb", "f3dy9ja"],
52
+ "Bdcx1rh": "f1v06qdr",
53
+ "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
54
+ "Bbretkc": "fm1yk70",
55
+ "rnyfg7": "f1itvegt",
56
+ "Bg18gms": ["f17e4q3j", "foxjjqz"],
57
+ "Bym00rn": ["foxjjqz", "f17e4q3j"]
62
58
  }
63
59
  }, {
64
- "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fck78tx.fui-focus-within:focus-within{border-top-color:transparent;}", ".f8gneoz.fui-focus-within:focus-within{border-right-color:transparent;}", ".f14g6lul.fui-focus-within:focus-within{border-left-color:transparent;}", ".f1tc23yq.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".ffjpq3d.fui-focus-within:focus-within::after{content:\"\";}", ".fo0h4cx.fui-focus-within:focus-within::after{position:absolute;}", ".f1vef9e5.fui-focus-within:focus-within::after{pointer-events:none;}", ".fob2zhe.fui-focus-within:focus-within::after{z-index:1;}", ".ftqc7yw.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fbod6wy.fui-focus-within:focus-within::after{border-right-style:solid;}", ".f4eroa4.fui-focus-within:focus-within::after{border-left-style:solid;}", ".flecwt7.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fzb327l.fui-focus-within:focus-within::after{border-top-width:2px;}", ".f1s2knrb.fui-focus-within:focus-within::after{border-right-width:2px;}", ".f6wuwpp.fui-focus-within:focus-within::after{border-left-width:2px;}", ".f1g8ecfq.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".f1hnqdjl.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fk9eigt.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1g8yfuc.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1kv2i3z.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".ffthsbc.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1nq9gk1.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f1pmlwz5.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1naw2e2.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fmtt8yl.fui-focus-within:focus-within::after{top:-2px;}", ".fr8phvc.fui-focus-within:focus-within::after{bottom:-2px;}", ".f5m5r8m.fui-focus-within:focus-within::after{left:-2px;}", ".f1bizo4j.fui-focus-within:focus-within::after{right:-2px;}"],
60
+ "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}"],
65
61
  "f": [".ftqa4ok:focus{outline-style:none;}"],
66
62
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
67
63
  });
68
64
 
69
65
  const useInputStyles = /*#__PURE__*/react_1.__styles({
70
66
  "base": {
71
- "qhf8xq": "f1euv43f",
72
- "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
73
- "Bhzewxz": "f15twtuk",
74
- "a9b677": "fly5x3f",
75
- "Bqenvij": "f1l02sjl",
76
67
  "B7ck84d": "f1ewtqcl",
68
+ "Bceei9c": "f1k6fduh",
69
+ "Bqenvij": "f1l02sjl",
77
70
  "B6of3ja": "f1hu3pq6",
78
71
  "t21cq0": ["f11qmguv", "f1tyq0we"],
79
72
  "jrapky": "f19f4twv",
80
73
  "Frg6f3": ["f1tyq0we", "f11qmguv"],
81
74
  "abs64n": "fk73vx1",
82
- "Bceei9c": "f1k6fduh",
75
+ "qhf8xq": "f1euv43f",
76
+ "Bhzewxz": "f15twtuk",
83
77
  "B26k0as": "f1yrrd5t",
84
78
  "k0xvi9": "fvfr0er",
85
79
  "Bqb28oy": "fcwiijr",
@@ -130,6 +124,7 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
130
124
  "B2hfjzz": ["fd6ao2z", "f18b6ltw"],
131
125
  "B0rx68v": "f8c3d4w",
132
126
  "ezr58z": "fvxnmui",
127
+ "B8h3e3j": "fds6yy4",
133
128
  "Bdfu378": "f1ceq7vh",
134
129
  "Bhmh25c": "f2zvonr",
135
130
  "fvfg5q": "f4ohyq5",
@@ -139,9 +134,21 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
139
134
  "E1kcat": "f1c3drxw",
140
135
  "Bt6osj6": "f8cdtmm",
141
136
  "Jop56w": "f8701xt"
137
+ },
138
+ "before": {
139
+ "j35jbq": ["f1e31b4d", "f1vgc2s3"]
140
+ },
141
+ "after": {
142
+ "oyh7mz": ["f1vgc2s3", "f1e31b4d"]
143
+ },
144
+ "medium": {
145
+ "a9b677": "fwr58v7"
146
+ },
147
+ "large": {
148
+ "a9b677": "f1mq5jt6"
142
149
  }
143
150
  }, {
144
- "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".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;}", ".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);}"],
151
+ "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));}"],
145
152
  "m": [["@media (forced-colors: active){.f2zvonr:disabled~.fui-Checkbox__label{color:GrayText;}}", {
146
153
  "m": "(forced-colors: active)"
147
154
  }], ["@media (forced-colors: active){.f8cdtmm:disabled~.fui-Checkbox__indicator{color:GrayText;}}", {
@@ -173,18 +180,22 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
173
180
  "Beyfa6y": ["fi2rrw2", "f1g3puop"],
174
181
  "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
175
182
  "Btl43ni": ["f1s4nn1u", "f1rstyi9"],
183
+ "B6of3ja": "frnwi6n",
184
+ "t21cq0": ["f1vcna3q", "foyynoy"],
185
+ "jrapky": "fqcjy3b",
186
+ "Frg6f3": ["foyynoy", "f1vcna3q"],
176
187
  "Bkfmm31": "f1w9h62z",
177
188
  "Bkecrkj": "f1aehjj5"
178
189
  },
179
190
  "medium": {
180
- "a9b677": "fjw5fx7",
191
+ "Be2twd7": "f1ugzwwg",
181
192
  "Bqenvij": "fd461yt",
182
- "Be2twd7": "f1ugzwwg"
193
+ "a9b677": "fjw5fx7"
183
194
  },
184
195
  "large": {
185
- "a9b677": "f64fuq3",
196
+ "Be2twd7": "f4ybsrx",
186
197
  "Bqenvij": "fjamq6b",
187
- "Be2twd7": "f4ybsrx"
198
+ "a9b677": "f64fuq3"
188
199
  },
189
200
  "circular": {
190
201
  "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
@@ -193,20 +204,24 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
193
204
  "Btl43ni": ["f1s8kh49", "f1djnp8u"]
194
205
  }
195
206
  }, {
196
- "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);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f4ybsrx{font-size:16px;}", ".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);}"]
207
+ "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);}"]
197
208
  });
198
209
 
199
210
  const useLabelStyles = /*#__PURE__*/react_1.__styles({
200
211
  "base": {
201
212
  "qb2dma": "f7nlbp4",
202
- "Bceei9c": "fpo1scq",
203
- "sj55zd": "f1ym3bx4"
213
+ "sj55zd": "f1ym3bx4",
214
+ "Bceei9c": "f1k6fduh",
215
+ "z8tnut": "f1kwiid1",
216
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
217
+ "Byoj8tv": "f5b47ha",
218
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
204
219
  },
205
220
  "before": {
206
- "t21cq0": ["fkujibs", "f199hnxi"]
221
+ "z189sj": ["f7x41pl", "fruq291"]
207
222
  },
208
223
  "after": {
209
- "Frg6f3": ["f199hnxi", "fkujibs"]
224
+ "uwmqm3": ["fruq291", "f7x41pl"]
210
225
  },
211
226
  "medium": {
212
227
  "B6of3ja": "fjzwpt6",
@@ -217,7 +232,7 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
217
232
  "jrapky": "f49ad5g"
218
233
  }
219
234
  }, {
220
- "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".fpo1scq{cursor:inherit;}", ".f1ym3bx4{color:inherit;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".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);}"]
235
+ "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);}"]
221
236
  });
222
237
  /**
223
238
  * Apply styling to the Checkbox slots based on the state
@@ -227,18 +242,23 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
227
242
  const useCheckboxStyles_unstable = state => {
228
243
  const rootStyles = useRootStyles();
229
244
  state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootStyles.base, state.root.className);
245
+ const {
246
+ labelPosition,
247
+ shape,
248
+ size
249
+ } = state;
230
250
  const inputStyles = useInputStyles();
231
- state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputStyles.base, state.input.className);
251
+ state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputStyles.base, inputStyles[size], inputStyles[labelPosition], state.input.className);
232
252
  const indicatorStyles = useIndicatorStyles();
233
253
 
234
254
  if (state.indicator) {
235
- state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
255
+ state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[size], shape === 'circular' && indicatorStyles.circular, state.indicator.className);
236
256
  }
237
257
 
238
258
  const labelStyles = useLabelStyles();
239
259
 
240
260
  if (state.label) {
241
- state.label.className = react_1.mergeClasses(exports.checkboxClassNames.label, labelStyles.base, labelStyles[state.size], labelStyles[state.labelPosition], state.label.className);
261
+ state.label.className = react_1.mergeClasses(exports.checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
242
262
  }
243
263
 
244
264
  return state;
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n cursor: 'pointer',\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 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\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 fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n width: indicatorSizeMedium,\n height: indicatorSizeMedium,\n fontSize: '12px',\n },\n\n large: {\n width: indicatorSizeLarge,\n height: indicatorSizeLarge,\n fontSize: '16px',\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'inherit',\n color: 'inherit',\n },\n\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[state.size],\n state.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[state.size],\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["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/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-checkbox",
3
- "version": "9.0.6",
3
+ "version": "9.0.7",
4
4
  "description": "Fluent UI checkbox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -33,7 +33,7 @@
33
33
  "dependencies": {
34
34
  "@fluentui/react-icons": "^2.0.175",
35
35
  "@fluentui/react-label": "^9.0.6",
36
- "@fluentui/react-tabster": "^9.1.1",
36
+ "@fluentui/react-tabster": "^9.1.2",
37
37
  "@fluentui/react-theme": "^9.1.0",
38
38
  "@fluentui/react-utilities": "^9.1.0",
39
39
  "@griffel/react": "^1.3.0",