@fluentui/react-radio 9.0.5 → 9.0.7

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,49 @@
2
2
  "name": "@fluentui/react-radio",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 15 Sep 2022 09:44:39 GMT",
5
+ "date": "Mon, 03 Oct 2022 22:22:50 GMT",
6
+ "tag": "@fluentui/react-radio_v9.0.7",
7
+ "version": "9.0.7",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "humberto_makoto@hotmail.com",
12
+ "package": "@fluentui/react-radio",
13
+ "commit": "fcb2ee2d270e6f584c6dbbd45f39a50c994c38be",
14
+ "comment": "fix: Making the hidden input only cover the indicator and not also the label."
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-radio",
19
+ "comment": "Bump @fluentui/react-tabster to v9.1.2",
20
+ "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Tue, 20 Sep 2022 20:55:45 GMT",
27
+ "tag": "@fluentui/react-radio_v9.0.6",
28
+ "version": "9.0.6",
29
+ "comments": {
30
+ "patch": [
31
+ {
32
+ "author": "beachball",
33
+ "package": "@fluentui/react-radio",
34
+ "comment": "Bump @fluentui/react-label to v9.0.6",
35
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
36
+ },
37
+ {
38
+ "author": "beachball",
39
+ "package": "@fluentui/react-radio",
40
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
41
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
42
+ }
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "date": "Thu, 15 Sep 2022 09:49:18 GMT",
6
48
  "tag": "@fluentui/react-radio_v9.0.5",
7
49
  "version": "9.0.5",
8
50
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,32 @@
1
1
  # Change Log - @fluentui/react-radio
2
2
 
3
- This log was last generated on Thu, 15 Sep 2022 09:44:39 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 03 Oct 2022 22:22:50 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-radio_v9.0.7)
8
+
9
+ Mon, 03 Oct 2022 22:22:50 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.6..@fluentui/react-radio_v9.0.7)
11
+
12
+ ### Patches
13
+
14
+ - fix: Making the hidden input only cover the indicator and not also the label. ([PR #25025](https://github.com/microsoft/fluentui/pull/25025) by humberto_makoto@hotmail.com)
15
+ - Bump @fluentui/react-tabster to v9.1.2 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
16
+
17
+ ## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.6)
18
+
19
+ Tue, 20 Sep 2022 20:55:45 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.5..@fluentui/react-radio_v9.0.6)
21
+
22
+ ### Patches
23
+
24
+ - Bump @fluentui/react-label to v9.0.6 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
25
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
26
+
7
27
  ## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.5)
8
28
 
9
- Thu, 15 Sep 2022 09:44:39 GMT
29
+ Thu, 15 Sep 2022 09:49:18 GMT
10
30
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.4..@fluentui/react-radio_v9.0.5)
11
31
 
12
32
  ### Patches
@@ -16,11 +16,7 @@ const indicatorSize = '16px';
16
16
  const useRootStyles = /*#__PURE__*/__styles({
17
17
  "base": {
18
18
  "mc9l5x": "ftuwxu6",
19
- "qhf8xq": "f10pi13n",
20
- "z8tnut": "f1kwiid1",
21
- "z189sj": ["f1vdfbxk", "f1f5gg8d"],
22
- "Byoj8tv": "f5b47ha",
23
- "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
19
+ "qhf8xq": "f10pi13n"
24
20
  },
25
21
  "vertical": {
26
22
  "Beiy3e4": "f1vx9l62",
@@ -29,37 +25,37 @@ const useRootStyles = /*#__PURE__*/__styles({
29
25
  "focusIndicator": {
30
26
  "Brovlpu": "ftqa4ok",
31
27
  "B486eqv": "f2hkw1w",
32
- "Brlowmp": "fck78tx",
33
- "Fxwv4m": ["f8gneoz", "f14g6lul"],
34
- "Bkrqzay": "f1tc23yq",
35
- "Bg2fdrq": ["f14g6lul", "f8gneoz"],
36
- "Bhpuztq": "ffjpq3d",
37
- "Hxt1dp": "fo0h4cx",
38
- "Fwynku": "f1vef9e5",
39
- "nwv0sh": "fob2zhe",
40
- "sewbek": "ftqc7yw",
41
- "Bmcqtu5": ["fbod6wy", "f4eroa4"],
42
- "Iuyy0o": "flecwt7",
43
- "B1jyaxe": ["f4eroa4", "fbod6wy"],
44
- "Gic0m5": "fzb327l",
45
- "B8s345i": ["f1s2knrb", "f6wuwpp"],
46
- "Btrf9ny": "f1g8ecfq",
47
- "Bz0zc98": ["f6wuwpp", "f1s2knrb"],
48
- "Bdowj5x": ["f1hnqdjl", "fk9eigt"],
49
- "zit2e2": ["fk9eigt", "f1hnqdjl"],
50
- "xdtxim": ["f1g8yfuc", "f1kv2i3z"],
51
- "mjwzc8": ["f1kv2i3z", "f1g8yfuc"],
52
- "Bdlkd80": "ffthsbc",
53
- "mrk28m": ["f1nq9gk1", "f1pmlwz5"],
54
- "Byzfkqq": "f1naw2e2",
55
- "Bnh9nsd": ["f1pmlwz5", "f1nq9gk1"],
56
- "r9zwrz": "fmtt8yl",
57
- "B4yg94n": "fr8phvc",
58
- "glb4xk": ["f5m5r8m", "f1bizo4j"],
59
- "mla9w6": ["f1bizo4j", "f5m5r8m"]
28
+ "n9p9qa": "f1fu8s9w",
29
+ "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
30
+ "r10ruj": "f1c1apvh",
31
+ "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
32
+ "gjlbkn": "fyrlc8h",
33
+ "B1kt0iq": "f28z38y",
34
+ "Boi8ppg": "f1edqc4x",
35
+ "Btfhvw2": "f19bnj08",
36
+ "B55xfkk": "f17wg1r9",
37
+ "i1dkbe": ["fgiioun", "fnx45sh"],
38
+ "Bozs2tv": "f1ljqnps",
39
+ "snkem8": ["fnx45sh", "fgiioun"],
40
+ "Bjilewg": "fsacsau",
41
+ "wht04d": ["flcxmxr", "f138axrn"],
42
+ "vikdft": "f1f4bc3q",
43
+ "Bwdhxlo": ["f138axrn", "flcxmxr"],
44
+ "B167d6d": ["f5m7f7q", "f175edhc"],
45
+ "Bpdw69r": ["f175edhc", "f5m7f7q"],
46
+ "Bsdv7io": ["fhfahiz", "fnreirl"],
47
+ "Bd353ur": ["fnreirl", "fhfahiz"],
48
+ "Bcnuwmc": "fn9i64i",
49
+ "dyfsa2": ["f1pylbqb", "f3dy9ja"],
50
+ "Bdcx1rh": "f1v06qdr",
51
+ "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
52
+ "Bbretkc": "fm1yk70",
53
+ "rnyfg7": "f1itvegt",
54
+ "Bg18gms": ["f17e4q3j", "foxjjqz"],
55
+ "Bym00rn": ["foxjjqz", "f17e4q3j"]
60
56
  }
61
57
  }, {
62
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".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;}"],
58
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".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;}"],
63
59
  "f": [".ftqa4ok:focus{outline-style:none;}"],
64
60
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
65
61
  });
@@ -78,6 +74,7 @@ const useInputStyles = /*#__PURE__*/__styles({
78
74
  "Frg6f3": ["f1tyq0we", "f11qmguv"],
79
75
  "abs64n": "fk73vx1",
80
76
  "By9lhj9": "fg45n87",
77
+ "G3n25n": "flqpbns",
81
78
  "Bojc29n": "fhb1dn5",
82
79
  "p8xby4": "fiegpko",
83
80
  "Bmzgt9v": "fdi60kf",
@@ -111,14 +108,21 @@ const useInputStyles = /*#__PURE__*/__styles({
111
108
  "yhmu5n": ["fapcpph", "f1v1lrlm"],
112
109
  "Blcfbx4": "fgnwcez",
113
110
  "yksgid": "f1l3wt4b",
111
+ "B59a1ph": "f16lpvpn",
114
112
  "B78hamy": "fdubm5j",
115
113
  "t61w4e": ["f11to73e", "f9u8p8h"],
116
114
  "Dvncu9": "fw62pkm",
117
115
  "qbflri": ["f9u8p8h", "f11to73e"],
118
116
  "Byzt4r9": "fqaqzd4"
117
+ },
118
+ "after": {
119
+ "a9b677": "fwr58v7"
120
+ },
121
+ "below": {
122
+ "Bqenvij": "f1je6zif"
119
123
  }
120
124
  }, {
121
- "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;}", ".fg45n87:enabled{cursor:pointer;}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".fiegpko:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".fdi60kf:enabled:not(:checked)~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fz3jc1r:enabled:not(:checked)~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1fwo01y:enabled:not(:checked)~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1m2gv5u:enabled:not(:checked)~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".ft7ju8s:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".f1ofw0le:enabled:not(:checked):hover~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".fothmfx:enabled:not(:checked):hover~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13qgzgl:enabled:not(:checked):hover~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fp5vmb3:enabled:not(:checked):hover~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1snis2b:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".ff9psms:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1fg9ko4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqj7xkg:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vebft2:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vtc7ej:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".f1fj62aq:enabled:checked~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".fc4i2ph:enabled:checked~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f137d5x6:enabled:checked~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f1v2xs8c:enabled:checked~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f14bpgh5:enabled:checked~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1ariq71:enabled:checked:hover~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fu58av6:enabled:checked:hover~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1qj5h2v:enabled:checked:hover~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".fptcwjq:enabled:checked:hover~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".filss48:enabled:checked:hover~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".frtrqgn:enabled:checked:hover:active~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f1v1lrlm:enabled:checked:hover:active~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fapcpph:enabled:checked:hover:active~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f49ptgb:enabled:checked:hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".fgnwcez:enabled:checked:hover:active~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1l3wt4b:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);}", ".fdubm5j:disabled~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f11to73e:disabled~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f9u8p8h:disabled~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fw62pkm:disabled~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fqaqzd4:disabled~.fui-Radio__indicator{color:var(--colorNeutralForegroundDisabled);}"]
125
+ "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;}", ".fg45n87:enabled{cursor:pointer;}", ".flqpbns:enabled~.fui-Radio__label{cursor:pointer;}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".fiegpko:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".fdi60kf:enabled:not(:checked)~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fz3jc1r:enabled:not(:checked)~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1fwo01y:enabled:not(:checked)~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1m2gv5u:enabled:not(:checked)~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".ft7ju8s:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".f1ofw0le:enabled:not(:checked):hover~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".fothmfx:enabled:not(:checked):hover~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13qgzgl:enabled:not(:checked):hover~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fp5vmb3:enabled:not(:checked):hover~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1snis2b:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".ff9psms:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1fg9ko4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqj7xkg:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vebft2:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vtc7ej:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".f1fj62aq:enabled:checked~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".fc4i2ph:enabled:checked~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f137d5x6:enabled:checked~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f1v2xs8c:enabled:checked~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f14bpgh5:enabled:checked~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1ariq71:enabled:checked:hover~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fu58av6:enabled:checked:hover~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1qj5h2v:enabled:checked:hover~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".fptcwjq:enabled:checked:hover~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".filss48:enabled:checked:hover~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".frtrqgn:enabled:checked:hover:active~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f1v1lrlm:enabled:checked:hover:active~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fapcpph:enabled:checked:hover:active~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f49ptgb:enabled:checked:hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".fgnwcez:enabled:checked:hover:active~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1l3wt4b:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);}", ".f16lpvpn:disabled~.fui-Radio__label{cursor:default;}", ".fdubm5j:disabled~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f11to73e:disabled~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f9u8p8h:disabled~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fw62pkm:disabled~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fqaqzd4:disabled~.fui-Radio__indicator{color:var(--colorNeutralForegroundDisabled);}", ".fwr58v7{width:calc(16px + 2 * var(--spacingHorizontalS));}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
122
126
  });
123
127
 
124
128
  const useIndicatorStyles = /*#__PURE__*/__styles({
@@ -145,28 +149,36 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
145
149
  "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
146
150
  "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
147
151
  "Btl43ni": ["f1s8kh49", "f1djnp8u"],
152
+ "B6of3ja": "frnwi6n",
153
+ "t21cq0": ["f1vcna3q", "foyynoy"],
154
+ "jrapky": "fqcjy3b",
155
+ "Frg6f3": ["foyynoy", "f1vcna3q"],
148
156
  "Bkfmm31": "f1w9h62z",
149
157
  "Bkecrkj": "f1aehjj5"
150
158
  }
151
159
  }, {
152
- "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".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;}", ".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);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}"]
160
+ "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".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;}", ".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);}", ".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;}"]
153
161
  });
154
162
 
155
163
  const useLabelStyles = /*#__PURE__*/__styles({
156
164
  "base": {
157
- "qb2dma": "f7nlbp4"
165
+ "qb2dma": "f7nlbp4",
166
+ "z8tnut": "f1kwiid1",
167
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
168
+ "Byoj8tv": "f5b47ha",
169
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
158
170
  },
159
171
  "after": {
160
- "Frg6f3": ["f199hnxi", "fkujibs"],
172
+ "uwmqm3": ["fruq291", "f7x41pl"],
161
173
  "B6of3ja": "fjzwpt6",
162
174
  "jrapky": "fh6j2fo"
163
175
  },
164
176
  "below": {
165
- "B6of3ja": "f1mevb6",
177
+ "z8tnut": "f1ywm7hm",
166
178
  "fsow6f": "f17mccla"
167
179
  }
168
180
  }, {
169
- "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1mevb6{margin-top:var(--spacingVerticalM);}", ".f17mccla{text-align:center;}"]
181
+ "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f17mccla{text-align:center;}"]
170
182
  });
171
183
  /**
172
184
  * Apply styling to the Radio slots based on the state
@@ -174,16 +186,19 @@ const useLabelStyles = /*#__PURE__*/__styles({
174
186
 
175
187
 
176
188
  export const useRadioStyles_unstable = state => {
189
+ const {
190
+ labelPosition
191
+ } = state;
177
192
  const rootStyles = useRootStyles();
178
- state.root.className = mergeClasses(radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
193
+ state.root.className = mergeClasses(radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, labelPosition === 'below' && rootStyles.vertical, state.root.className);
179
194
  const inputStyles = useInputStyles();
180
- state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);
195
+ state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, inputStyles[labelPosition], state.input.className);
181
196
  const indicatorStyles = useIndicatorStyles();
182
197
  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
183
198
  const labelStyles = useLabelStyles();
184
199
 
185
200
  if (state.label) {
186
- state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[state.labelPosition], state.label.className);
201
+ state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
187
202
  }
188
203
  };
189
204
  //# sourceMappingURL=useRadioStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAApD,C,CAOP;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAtB;;AAeA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAsFA,MAAM,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B;;AAoBA,MAAM,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAoBA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,cAHsB,EAIjC,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAQA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,eAAe,CAAC,KAAjB,EAAwB,WAAW,CAAC,IAApC,EAA0C,KAAK,CAAC,KAAN,CAAY,SAAtD,CAApC;EAEA,MAAM,eAAe,GAAG,kBAAkB,EAA1C;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,eAAe,CAAC,SAAjB,EAA4B,eAAe,CAAC,IAA5C,EAAkD,KAAK,CAAC,SAAN,CAAgB,SAAlE,CAAxC;EAEA,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,KAAK,CAAC,aAAP,CAHuB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAMD;AACF,CAzBM","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\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\n ':enabled': {\n cursor: 'pointer',\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\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.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n },\n\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n marginTop: tokens.spacingVerticalM,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\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\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n after: {\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n },\n below: {\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\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.borderRadiusCircular),\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const { labelPosition } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputStyles.base,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
@@ -26,11 +26,7 @@ const indicatorSize = '16px';
26
26
  const useRootStyles = /*#__PURE__*/react_1.__styles({
27
27
  "base": {
28
28
  "mc9l5x": "ftuwxu6",
29
- "qhf8xq": "f10pi13n",
30
- "z8tnut": "f1kwiid1",
31
- "z189sj": ["f1vdfbxk", "f1f5gg8d"],
32
- "Byoj8tv": "f5b47ha",
33
- "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
29
+ "qhf8xq": "f10pi13n"
34
30
  },
35
31
  "vertical": {
36
32
  "Beiy3e4": "f1vx9l62",
@@ -39,37 +35,37 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
39
35
  "focusIndicator": {
40
36
  "Brovlpu": "ftqa4ok",
41
37
  "B486eqv": "f2hkw1w",
42
- "Brlowmp": "fck78tx",
43
- "Fxwv4m": ["f8gneoz", "f14g6lul"],
44
- "Bkrqzay": "f1tc23yq",
45
- "Bg2fdrq": ["f14g6lul", "f8gneoz"],
46
- "Bhpuztq": "ffjpq3d",
47
- "Hxt1dp": "fo0h4cx",
48
- "Fwynku": "f1vef9e5",
49
- "nwv0sh": "fob2zhe",
50
- "sewbek": "ftqc7yw",
51
- "Bmcqtu5": ["fbod6wy", "f4eroa4"],
52
- "Iuyy0o": "flecwt7",
53
- "B1jyaxe": ["f4eroa4", "fbod6wy"],
54
- "Gic0m5": "fzb327l",
55
- "B8s345i": ["f1s2knrb", "f6wuwpp"],
56
- "Btrf9ny": "f1g8ecfq",
57
- "Bz0zc98": ["f6wuwpp", "f1s2knrb"],
58
- "Bdowj5x": ["f1hnqdjl", "fk9eigt"],
59
- "zit2e2": ["fk9eigt", "f1hnqdjl"],
60
- "xdtxim": ["f1g8yfuc", "f1kv2i3z"],
61
- "mjwzc8": ["f1kv2i3z", "f1g8yfuc"],
62
- "Bdlkd80": "ffthsbc",
63
- "mrk28m": ["f1nq9gk1", "f1pmlwz5"],
64
- "Byzfkqq": "f1naw2e2",
65
- "Bnh9nsd": ["f1pmlwz5", "f1nq9gk1"],
66
- "r9zwrz": "fmtt8yl",
67
- "B4yg94n": "fr8phvc",
68
- "glb4xk": ["f5m5r8m", "f1bizo4j"],
69
- "mla9w6": ["f1bizo4j", "f5m5r8m"]
38
+ "n9p9qa": "f1fu8s9w",
39
+ "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
40
+ "r10ruj": "f1c1apvh",
41
+ "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
42
+ "gjlbkn": "fyrlc8h",
43
+ "B1kt0iq": "f28z38y",
44
+ "Boi8ppg": "f1edqc4x",
45
+ "Btfhvw2": "f19bnj08",
46
+ "B55xfkk": "f17wg1r9",
47
+ "i1dkbe": ["fgiioun", "fnx45sh"],
48
+ "Bozs2tv": "f1ljqnps",
49
+ "snkem8": ["fnx45sh", "fgiioun"],
50
+ "Bjilewg": "fsacsau",
51
+ "wht04d": ["flcxmxr", "f138axrn"],
52
+ "vikdft": "f1f4bc3q",
53
+ "Bwdhxlo": ["f138axrn", "flcxmxr"],
54
+ "B167d6d": ["f5m7f7q", "f175edhc"],
55
+ "Bpdw69r": ["f175edhc", "f5m7f7q"],
56
+ "Bsdv7io": ["fhfahiz", "fnreirl"],
57
+ "Bd353ur": ["fnreirl", "fhfahiz"],
58
+ "Bcnuwmc": "fn9i64i",
59
+ "dyfsa2": ["f1pylbqb", "f3dy9ja"],
60
+ "Bdcx1rh": "f1v06qdr",
61
+ "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
62
+ "Bbretkc": "fm1yk70",
63
+ "rnyfg7": "f1itvegt",
64
+ "Bg18gms": ["f17e4q3j", "foxjjqz"],
65
+ "Bym00rn": ["foxjjqz", "f17e4q3j"]
70
66
  }
71
67
  }, {
72
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".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;}"],
68
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".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;}"],
73
69
  "f": [".ftqa4ok:focus{outline-style:none;}"],
74
70
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
75
71
  });
@@ -88,6 +84,7 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
88
84
  "Frg6f3": ["f1tyq0we", "f11qmguv"],
89
85
  "abs64n": "fk73vx1",
90
86
  "By9lhj9": "fg45n87",
87
+ "G3n25n": "flqpbns",
91
88
  "Bojc29n": "fhb1dn5",
92
89
  "p8xby4": "fiegpko",
93
90
  "Bmzgt9v": "fdi60kf",
@@ -121,14 +118,21 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
121
118
  "yhmu5n": ["fapcpph", "f1v1lrlm"],
122
119
  "Blcfbx4": "fgnwcez",
123
120
  "yksgid": "f1l3wt4b",
121
+ "B59a1ph": "f16lpvpn",
124
122
  "B78hamy": "fdubm5j",
125
123
  "t61w4e": ["f11to73e", "f9u8p8h"],
126
124
  "Dvncu9": "fw62pkm",
127
125
  "qbflri": ["f9u8p8h", "f11to73e"],
128
126
  "Byzt4r9": "fqaqzd4"
127
+ },
128
+ "after": {
129
+ "a9b677": "fwr58v7"
130
+ },
131
+ "below": {
132
+ "Bqenvij": "f1je6zif"
129
133
  }
130
134
  }, {
131
- "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;}", ".fg45n87:enabled{cursor:pointer;}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".fiegpko:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".fdi60kf:enabled:not(:checked)~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fz3jc1r:enabled:not(:checked)~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1fwo01y:enabled:not(:checked)~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1m2gv5u:enabled:not(:checked)~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".ft7ju8s:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".f1ofw0le:enabled:not(:checked):hover~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".fothmfx:enabled:not(:checked):hover~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13qgzgl:enabled:not(:checked):hover~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fp5vmb3:enabled:not(:checked):hover~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1snis2b:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".ff9psms:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1fg9ko4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqj7xkg:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vebft2:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vtc7ej:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".f1fj62aq:enabled:checked~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".fc4i2ph:enabled:checked~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f137d5x6:enabled:checked~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f1v2xs8c:enabled:checked~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f14bpgh5:enabled:checked~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1ariq71:enabled:checked:hover~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fu58av6:enabled:checked:hover~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1qj5h2v:enabled:checked:hover~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".fptcwjq:enabled:checked:hover~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".filss48:enabled:checked:hover~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".frtrqgn:enabled:checked:hover:active~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f1v1lrlm:enabled:checked:hover:active~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fapcpph:enabled:checked:hover:active~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f49ptgb:enabled:checked:hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".fgnwcez:enabled:checked:hover:active~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1l3wt4b:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);}", ".fdubm5j:disabled~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f11to73e:disabled~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f9u8p8h:disabled~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fw62pkm:disabled~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fqaqzd4:disabled~.fui-Radio__indicator{color:var(--colorNeutralForegroundDisabled);}"]
135
+ "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;}", ".fg45n87:enabled{cursor:pointer;}", ".flqpbns:enabled~.fui-Radio__label{cursor:pointer;}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".fiegpko:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".fdi60kf:enabled:not(:checked)~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fz3jc1r:enabled:not(:checked)~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1fwo01y:enabled:not(:checked)~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1m2gv5u:enabled:not(:checked)~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".ft7ju8s:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".f1ofw0le:enabled:not(:checked):hover~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".fothmfx:enabled:not(:checked):hover~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13qgzgl:enabled:not(:checked):hover~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fp5vmb3:enabled:not(:checked):hover~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1snis2b:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".ff9psms:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1fg9ko4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqj7xkg:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vebft2:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vtc7ej:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".f1fj62aq:enabled:checked~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".fc4i2ph:enabled:checked~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f137d5x6:enabled:checked~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f1v2xs8c:enabled:checked~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f14bpgh5:enabled:checked~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1ariq71:enabled:checked:hover~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fu58av6:enabled:checked:hover~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1qj5h2v:enabled:checked:hover~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".fptcwjq:enabled:checked:hover~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".filss48:enabled:checked:hover~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".frtrqgn:enabled:checked:hover:active~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f1v1lrlm:enabled:checked:hover:active~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fapcpph:enabled:checked:hover:active~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f49ptgb:enabled:checked:hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".fgnwcez:enabled:checked:hover:active~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1l3wt4b:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);}", ".f16lpvpn:disabled~.fui-Radio__label{cursor:default;}", ".fdubm5j:disabled~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f11to73e:disabled~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f9u8p8h:disabled~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fw62pkm:disabled~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fqaqzd4:disabled~.fui-Radio__indicator{color:var(--colorNeutralForegroundDisabled);}", ".fwr58v7{width:calc(16px + 2 * var(--spacingHorizontalS));}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
132
136
  });
133
137
 
134
138
  const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
@@ -155,28 +159,36 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
155
159
  "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
156
160
  "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
157
161
  "Btl43ni": ["f1s8kh49", "f1djnp8u"],
162
+ "B6of3ja": "frnwi6n",
163
+ "t21cq0": ["f1vcna3q", "foyynoy"],
164
+ "jrapky": "fqcjy3b",
165
+ "Frg6f3": ["foyynoy", "f1vcna3q"],
158
166
  "Bkfmm31": "f1w9h62z",
159
167
  "Bkecrkj": "f1aehjj5"
160
168
  }
161
169
  }, {
162
- "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".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;}", ".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);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}"]
170
+ "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".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;}", ".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);}", ".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;}"]
163
171
  });
164
172
 
165
173
  const useLabelStyles = /*#__PURE__*/react_1.__styles({
166
174
  "base": {
167
- "qb2dma": "f7nlbp4"
175
+ "qb2dma": "f7nlbp4",
176
+ "z8tnut": "f1kwiid1",
177
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
178
+ "Byoj8tv": "f5b47ha",
179
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
168
180
  },
169
181
  "after": {
170
- "Frg6f3": ["f199hnxi", "fkujibs"],
182
+ "uwmqm3": ["fruq291", "f7x41pl"],
171
183
  "B6of3ja": "fjzwpt6",
172
184
  "jrapky": "fh6j2fo"
173
185
  },
174
186
  "below": {
175
- "B6of3ja": "f1mevb6",
187
+ "z8tnut": "f1ywm7hm",
176
188
  "fsow6f": "f17mccla"
177
189
  }
178
190
  }, {
179
- "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1mevb6{margin-top:var(--spacingVerticalM);}", ".f17mccla{text-align:center;}"]
191
+ "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f17mccla{text-align:center;}"]
180
192
  });
181
193
  /**
182
194
  * Apply styling to the Radio slots based on the state
@@ -184,16 +196,19 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
184
196
 
185
197
 
186
198
  const useRadioStyles_unstable = state => {
199
+ const {
200
+ labelPosition
201
+ } = state;
187
202
  const rootStyles = useRootStyles();
188
- state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
203
+ state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, labelPosition === 'below' && rootStyles.vertical, state.root.className);
189
204
  const inputStyles = useInputStyles();
190
- state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputStyles.base, state.input.className);
205
+ state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputStyles.base, inputStyles[labelPosition], state.input.className);
191
206
  const indicatorStyles = useIndicatorStyles();
192
207
  state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
193
208
  const labelStyles = useLabelStyles();
194
209
 
195
210
  if (state.label) {
196
- state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[state.labelPosition], state.label.className);
211
+ state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
197
212
  }
198
213
  };
199
214
 
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\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\n ':enabled': {\n cursor: 'pointer',\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\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.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n },\n\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n marginTop: tokens.spacingVerticalM,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\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\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n after: {\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n },\n below: {\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\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.borderRadiusCircular),\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const { labelPosition } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputStyles.base,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-radio",
3
- "version": "9.0.5",
3
+ "version": "9.0.7",
4
4
  "description": "Fluent UI Radio component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,13 +28,13 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.13"
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.14"
32
32
  },
33
33
  "dependencies": {
34
34
  "@fluentui/react-context-selector": "^9.0.3",
35
35
  "@fluentui/react-icons": "^2.0.175",
36
- "@fluentui/react-label": "^9.0.5",
37
- "@fluentui/react-tabster": "^9.1.1",
36
+ "@fluentui/react-label": "^9.0.6",
37
+ "@fluentui/react-tabster": "^9.1.2",
38
38
  "@fluentui/react-theme": "^9.1.0",
39
39
  "@fluentui/react-utilities": "^9.1.0",
40
40
  "@griffel/react": "^1.3.0",