@fluentui/react-checkbox 9.1.56 → 9.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +27 -2
  2. package/lib/components/Checkbox/useCheckboxStyles.styles.js +29 -50
  3. package/lib/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
  4. package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js +44 -146
  5. package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
  6. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,12 +1,37 @@
1
1
  # Change Log - @fluentui/react-checkbox
2
2
 
3
- This log was last generated on Tue, 14 Nov 2023 17:48:36 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 30 Nov 2023 13:37:55 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.2.1)
8
+
9
+ Thu, 30 Nov 2023 13:37:55 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.2.0..@fluentui/react-checkbox_v9.2.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-field to v9.1.43 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
15
+ - Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
16
+ - Bump @fluentui/react-label to v9.1.51 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
17
+ - Bump @fluentui/react-tabster to v9.15.0 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
18
+
19
+ ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.2.0)
20
+
21
+ Mon, 20 Nov 2023 09:55:08 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.56..@fluentui/react-checkbox_v9.2.0)
23
+
24
+ ### Minor changes
25
+
26
+ - fix: Replace child selectors with css vars in Checkbox styles ([PR #29796](https://github.com/microsoft/fluentui/pull/29796) by behowell@microsoft.com)
27
+ - Bump @fluentui/react-field to v9.1.42 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
28
+ - Bump @fluentui/react-label to v9.1.50 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
29
+ - Bump @fluentui/react-shared-contexts to v9.13.0 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
30
+ - Bump @fluentui/react-tabster to v9.14.6 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
31
+
7
32
  ## [9.1.56](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.56)
8
33
 
9
- Tue, 14 Nov 2023 17:48:36 GMT
34
+ Tue, 14 Nov 2023 17:51:27 GMT
10
35
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.55..@fluentui/react-checkbox_v9.1.56)
11
36
 
12
37
  ### Patches
package/lib/components/Checkbox/useCheckboxStyles.styles.js CHANGED
@@ -7,6 +7,12 @@ export const checkboxClassNames = {
7
7
  input: 'fui-Checkbox__input',
8
8
  indicator: 'fui-Checkbox__indicator'
9
9
  };
10
+ // CSS variables used internally in Checkbox's styles
11
+ const vars = {
12
+ indicatorColor: '--fui-Checkbox__indicator--color',
13
+ indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
14
+ indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
15
+ };
10
16
  // The indicator size is used by the indicator and label styles
11
17
  const indicatorSizeMedium = '16px';
12
18
  const indicatorSizeLarge = '20px';
@@ -14,71 +20,44 @@ const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1qaeuiq", "rm0k3vm", [
14
20
  const useRootStyles = /*#__PURE__*/__styles({
15
21
  unchecked: {
16
22
  Bi91k9c: "f3p8bqa",
17
- ns3gzv: "ffqb913",
18
- n5iecx: ["f42z0vd", "f1j37kh1"],
19
- Bq2lx2j: "f10v6cc1",
20
- Bv7p3up: ["f1j37kh1", "f42z0vd"],
23
+ pv5h1i: "fium13f",
21
24
  lj723h: "f1r2dosr",
22
- B6u2zzw: "f1oarbgq",
23
- Be5wueo: ["fo8gord", "f18ci1af"],
24
- Cgwcxn: "fviagcr",
25
- Btnvhkj: ["f18ci1af", "fo8gord"]
25
+ Hnthvo: "f1729es6"
26
26
  },
27
27
  checked: {
28
28
  sj55zd: "f19n0e5",
29
- Bvs3sgl: "f5opsb9",
30
- opw9sb: "fpaw01r",
31
- C5wppx: "f1gqj827",
32
- B32epof: ["fub94a2", "f13mj44e"],
33
- Bphahg7: "f1qq5vh1",
34
- Jctw66: ["f13mj44e", "fub94a2"],
35
- Bq0zqd5: "f5x9vvn",
36
- ns3gzv: "fub8hyy",
37
- n5iecx: ["fffzknn", "f172bh4s"],
38
- Bq2lx2j: "f6tipb1",
39
- Bv7p3up: ["f172bh4s", "fffzknn"],
40
- Bgesukf: "f8adco2",
41
- B6u2zzw: "f1lepnt8",
42
- Be5wueo: ["f80ygm0", "frrkusm"],
43
- Cgwcxn: "f1gg953z",
44
- Btnvhkj: ["frrkusm", "f80ygm0"]
29
+ wkncrt: "f35ds98",
30
+ zxk7z7: "f12mnkne",
31
+ Hmsnfy: "fei9a8h",
32
+ e6czan: "fix56y3",
33
+ pv5h1i: "f1bcv2js",
34
+ qbydtz: "f7dr4go",
35
+ Hnthvo: "f1r5cpua"
45
36
  },
46
37
  mixed: {
47
38
  sj55zd: "f19n0e5",
48
- C5wppx: "f12fgbth",
49
- B32epof: ["f171e6fm", "fttsnhr"],
50
- Bphahg7: "f1fyk1ks",
51
- Jctw66: ["fttsnhr", "f171e6fm"],
52
- opw9sb: "fvvg2h8",
53
- ns3gzv: "f1nlwys0",
54
- n5iecx: ["f1bhstg2", "f6tsdgz"],
55
- Bq2lx2j: "fqxbw9v",
56
- Bv7p3up: ["f6tsdgz", "f1bhstg2"],
57
- cc1l3s: "f1r38qqt",
58
- B6u2zzw: "f12q3i2l",
59
- Be5wueo: ["f9g1hxu", "f1o4ic5t"],
60
- Cgwcxn: "f1c3thm1",
61
- Btnvhkj: ["f1o4ic5t", "f9g1hxu"],
62
- km5s60: "ffd07pq"
39
+ Hmsnfy: "f1l27tf0",
40
+ zxk7z7: "fcilktj",
41
+ pv5h1i: "f1lphd54",
42
+ Bunfa6h: "f1obkvq7",
43
+ Hnthvo: "f2gmbuh",
44
+ B15ykmv: "f1oy4fa1"
63
45
  },
64
46
  disabled: {
65
47
  Bceei9c: "f158kwzp",
66
48
  sj55zd: "f1s2aq7o",
67
- C5wppx: "fgiuqeu",
68
- B32epof: ["f1q4sfkt", "f71co73"],
69
- Bphahg7: "f1u7lsiy",
70
- Jctw66: ["f71co73", "f1q4sfkt"],
71
- opw9sb: "f3vxa14",
49
+ Hmsnfy: "f1w7mfl5",
50
+ zxk7z7: "fcoafq6",
72
51
  Bbusuzp: "f1dcs8yz",
73
- B7bxudy: "f1lmtjkn"
52
+ mrqfp9: "fxb3eh3"
74
53
  }
75
54
  }, {
76
- h: [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".ffqb913:hover>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f42z0vd:hover>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1j37kh1:hover>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f10v6cc1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f5x9vvn:hover>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}"],
77
- a: [".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".f1oarbgq:active>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fo8gord:active>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f18ci1af:active>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fviagcr:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f8adco2:active>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}"],
78
- d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f5opsb9>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fpaw01r>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}", ".f1gqj827>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".fub94a2>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f13mj44e>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f158kwzp{cursor:default;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fgiuqeu>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1q4sfkt>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"],
55
+ h: [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}", ".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}", ".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}", ".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}", ".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}"],
56
+ a: [".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}", ".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}", ".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}", ".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}", ".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}"],
57
+ d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}", ".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}", ".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}", ".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}", ".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}", ".f158kwzp{cursor:default;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}", ".fcoafq6{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundDisabled);}"],
79
58
  m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
80
59
  m: "(forced-colors: active)"
81
- }], ["@media (forced-colors: active){.f1lmtjkn>.fui-Checkbox__indicator{color:GrayText;}}", {
60
+ }], ["@media (forced-colors: active){.fxb3eh3{--fui-Checkbox__indicator--color:GrayText;}}", {
82
61
  m: "(forced-colors: active)"
83
62
  }]]
84
63
  });
@@ -96,7 +75,7 @@ const useInputStyles = /*#__PURE__*/__styles({
96
75
  }, {
97
76
  d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
98
77
  });
99
- const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rrh91wr", null, [".rrh91wr{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
78
+ const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rl7ci6d", null, [".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
100
79
  const useIndicatorStyles = /*#__PURE__*/__styles({
101
80
  large: {
102
81
  Be2twd7: "f4ybsrx",
package/lib/components/Checkbox/useCheckboxStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useRootStyles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n cursor: 'pointer',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover)\n }\n },\n ':active': {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed)\n }\n }\n },\n checked: {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n ':hover': {\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover)\n }\n },\n ':active': {\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed)\n }\n }\n },\n mixed: {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1\n },\n ':hover': {\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover\n }\n },\n ':active': {\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n }\n },\n disabled: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [`> .${checkboxClassNames.indicator}`]: {\n color: 'GrayText'\n }\n }\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0\n },\n after: {\n left: 0\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n border: tokens.strokeWidthThin + ' solid ' + tokens.colorNeutralStrokeAccessible,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'inherit',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\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 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 * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n const { checked, disabled, labelPosition, shape, size } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n cursor: 'pointer',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n checked: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n }\n },\n mixed: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n ':hover': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n disabled: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [vars.indicatorColor]: 'GrayText'\n }\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0\n },\n after: {\n left: 0\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n color: `var(${vars.indicatorColor})`,\n backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n borderStyle: 'solid',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'inherit',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\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 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 * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n const { checked, disabled, labelPosition, shape, size } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"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"}
package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js CHANGED
@@ -23,6 +23,12 @@ const checkboxClassNames = {
23
23
  input: 'fui-Checkbox__input',
24
24
  indicator: 'fui-Checkbox__indicator'
25
25
  };
26
+ // CSS variables used internally in Checkbox's styles
27
+ const vars = {
28
+ indicatorColor: '--fui-Checkbox__indicator--color',
29
+ indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
30
+ indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
31
+ };
26
32
  // The indicator size is used by the indicator and label styles
27
33
  const indicatorSizeMedium = '16px';
28
34
  const indicatorSizeLarge = '20px';
@@ -41,173 +47,65 @@ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1qaeuiq",
41
47
  const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
42
48
  unchecked: {
43
49
  Bi91k9c: "f3p8bqa",
44
- ns3gzv: "ffqb913",
45
- n5iecx: [
46
- "f42z0vd",
47
- "f1j37kh1"
48
- ],
49
- Bq2lx2j: "f10v6cc1",
50
- Bv7p3up: [
51
- "f1j37kh1",
52
- "f42z0vd"
53
- ],
50
+ pv5h1i: "fium13f",
54
51
  lj723h: "f1r2dosr",
55
- B6u2zzw: "f1oarbgq",
56
- Be5wueo: [
57
- "fo8gord",
58
- "f18ci1af"
59
- ],
60
- Cgwcxn: "fviagcr",
61
- Btnvhkj: [
62
- "f18ci1af",
63
- "fo8gord"
64
- ]
52
+ Hnthvo: "f1729es6"
65
53
  },
66
54
  checked: {
67
55
  sj55zd: "f19n0e5",
68
- Bvs3sgl: "f5opsb9",
69
- opw9sb: "fpaw01r",
70
- C5wppx: "f1gqj827",
71
- B32epof: [
72
- "fub94a2",
73
- "f13mj44e"
74
- ],
75
- Bphahg7: "f1qq5vh1",
76
- Jctw66: [
77
- "f13mj44e",
78
- "fub94a2"
79
- ],
80
- Bq0zqd5: "f5x9vvn",
81
- ns3gzv: "fub8hyy",
82
- n5iecx: [
83
- "fffzknn",
84
- "f172bh4s"
85
- ],
86
- Bq2lx2j: "f6tipb1",
87
- Bv7p3up: [
88
- "f172bh4s",
89
- "fffzknn"
90
- ],
91
- Bgesukf: "f8adco2",
92
- B6u2zzw: "f1lepnt8",
93
- Be5wueo: [
94
- "f80ygm0",
95
- "frrkusm"
96
- ],
97
- Cgwcxn: "f1gg953z",
98
- Btnvhkj: [
99
- "frrkusm",
100
- "f80ygm0"
101
- ]
56
+ wkncrt: "f35ds98",
57
+ zxk7z7: "f12mnkne",
58
+ Hmsnfy: "fei9a8h",
59
+ e6czan: "fix56y3",
60
+ pv5h1i: "f1bcv2js",
61
+ qbydtz: "f7dr4go",
62
+ Hnthvo: "f1r5cpua"
102
63
  },
103
64
  mixed: {
104
65
  sj55zd: "f19n0e5",
105
- C5wppx: "f12fgbth",
106
- B32epof: [
107
- "f171e6fm",
108
- "fttsnhr"
109
- ],
110
- Bphahg7: "f1fyk1ks",
111
- Jctw66: [
112
- "fttsnhr",
113
- "f171e6fm"
114
- ],
115
- opw9sb: "fvvg2h8",
116
- ns3gzv: "f1nlwys0",
117
- n5iecx: [
118
- "f1bhstg2",
119
- "f6tsdgz"
120
- ],
121
- Bq2lx2j: "fqxbw9v",
122
- Bv7p3up: [
123
- "f6tsdgz",
124
- "f1bhstg2"
125
- ],
126
- cc1l3s: "f1r38qqt",
127
- B6u2zzw: "f12q3i2l",
128
- Be5wueo: [
129
- "f9g1hxu",
130
- "f1o4ic5t"
131
- ],
132
- Cgwcxn: "f1c3thm1",
133
- Btnvhkj: [
134
- "f1o4ic5t",
135
- "f9g1hxu"
136
- ],
137
- km5s60: "ffd07pq"
66
+ Hmsnfy: "f1l27tf0",
67
+ zxk7z7: "fcilktj",
68
+ pv5h1i: "f1lphd54",
69
+ Bunfa6h: "f1obkvq7",
70
+ Hnthvo: "f2gmbuh",
71
+ B15ykmv: "f1oy4fa1"
138
72
  },
139
73
  disabled: {
140
74
  Bceei9c: "f158kwzp",
141
75
  sj55zd: "f1s2aq7o",
142
- C5wppx: "fgiuqeu",
143
- B32epof: [
144
- "f1q4sfkt",
145
- "f71co73"
146
- ],
147
- Bphahg7: "f1u7lsiy",
148
- Jctw66: [
149
- "f71co73",
150
- "f1q4sfkt"
151
- ],
152
- opw9sb: "f3vxa14",
76
+ Hmsnfy: "f1w7mfl5",
77
+ zxk7z7: "fcoafq6",
153
78
  Bbusuzp: "f1dcs8yz",
154
- B7bxudy: "f1lmtjkn"
79
+ mrqfp9: "fxb3eh3"
155
80
  }
156
81
  }, {
157
82
  h: [
158
83
  ".f3p8bqa:hover{color:var(--colorNeutralForeground2);}",
159
- ".ffqb913:hover>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}",
160
- ".f42z0vd:hover>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}",
161
- ".f1j37kh1:hover>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}",
162
- ".f10v6cc1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}",
163
- ".f5x9vvn:hover>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}",
164
- ".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}",
165
- ".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}",
166
- ".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}",
167
- ".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}",
168
- ".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}",
169
- ".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}",
170
- ".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}",
171
- ".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}",
172
- ".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}"
84
+ ".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}",
85
+ ".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}",
86
+ ".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}",
87
+ ".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}",
88
+ ".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}"
173
89
  ],
174
90
  a: [
175
91
  ".f1r2dosr:active{color:var(--colorNeutralForeground1);}",
176
- ".f1oarbgq:active>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}",
177
- ".fo8gord:active>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}",
178
- ".f18ci1af:active>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}",
179
- ".fviagcr:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}",
180
- ".f8adco2:active>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}",
181
- ".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}",
182
- ".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}",
183
- ".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}",
184
- ".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}",
185
- ".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}",
186
- ".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}",
187
- ".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}",
188
- ".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
189
- ".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}"
92
+ ".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}",
93
+ ".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}",
94
+ ".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}",
95
+ ".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}",
96
+ ".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}"
190
97
  ],
191
98
  d: [
192
99
  ".f19n0e5{color:var(--colorNeutralForeground1);}",
193
- ".f5opsb9>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}",
194
- ".fpaw01r>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}",
195
- ".f1gqj827>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}",
196
- ".fub94a2>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}",
197
- ".f13mj44e>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}",
198
- ".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}",
199
- ".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}",
200
- ".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}",
201
- ".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}",
202
- ".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}",
203
- ".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}",
100
+ ".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}",
101
+ ".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}",
102
+ ".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}",
103
+ ".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}",
104
+ ".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}",
204
105
  ".f158kwzp{cursor:default;}",
205
106
  ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
206
- ".fgiuqeu>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}",
207
- ".f1q4sfkt>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}",
208
- ".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}",
209
- ".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
210
- ".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"
107
+ ".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}",
108
+ ".fcoafq6{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundDisabled);}"
211
109
  ],
212
110
  m: [
213
111
  [
@@ -217,7 +115,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
217
115
  }
218
116
  ],
219
117
  [
220
- "@media (forced-colors: active){.f1lmtjkn>.fui-Checkbox__indicator{color:GrayText;}}",
118
+ "@media (forced-colors: active){.fxb3eh3{--fui-Checkbox__indicator--color:GrayText;}}",
221
119
  {
222
120
  m: "(forced-colors: active)"
223
121
  }
@@ -250,8 +148,8 @@ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
250
148
  ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"
251
149
  ]
252
150
  });
253
- const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rrh91wr", null, [
254
- ".rrh91wr{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"
151
+ const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rl7ci6d", null, [
152
+ ".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"
255
153
  ]);
256
154
  const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
257
155
  large: {
package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1qaeuiq\", \"rm0k3vm\", [\".r1qaeuiq{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r1qaeuiq:focus{outline-style:none;}\", \".r1qaeuiq:focus-visible{outline-style:none;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rm0k3vm{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".rm0k3vm:focus{outline-style:none;}\", \".rm0k3vm:focus-visible{outline-style:none;}\", \".rm0k3vm[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rm0k3vm[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n unchecked: {\n Bi91k9c: \"f3p8bqa\",\n ns3gzv: \"ffqb913\",\n n5iecx: [\"f42z0vd\", \"f1j37kh1\"],\n Bq2lx2j: \"f10v6cc1\",\n Bv7p3up: [\"f1j37kh1\", \"f42z0vd\"],\n lj723h: \"f1r2dosr\",\n B6u2zzw: \"f1oarbgq\",\n Be5wueo: [\"fo8gord\", \"f18ci1af\"],\n Cgwcxn: \"fviagcr\",\n Btnvhkj: [\"f18ci1af\", \"fo8gord\"]\n },\n checked: {\n sj55zd: \"f19n0e5\",\n Bvs3sgl: \"f5opsb9\",\n opw9sb: \"fpaw01r\",\n C5wppx: \"f1gqj827\",\n B32epof: [\"fub94a2\", \"f13mj44e\"],\n Bphahg7: \"f1qq5vh1\",\n Jctw66: [\"f13mj44e\", \"fub94a2\"],\n Bq0zqd5: \"f5x9vvn\",\n ns3gzv: \"fub8hyy\",\n n5iecx: [\"fffzknn\", \"f172bh4s\"],\n Bq2lx2j: \"f6tipb1\",\n Bv7p3up: [\"f172bh4s\", \"fffzknn\"],\n Bgesukf: \"f8adco2\",\n B6u2zzw: \"f1lepnt8\",\n Be5wueo: [\"f80ygm0\", \"frrkusm\"],\n Cgwcxn: \"f1gg953z\",\n Btnvhkj: [\"frrkusm\", \"f80ygm0\"]\n },\n mixed: {\n sj55zd: \"f19n0e5\",\n C5wppx: \"f12fgbth\",\n B32epof: [\"f171e6fm\", \"fttsnhr\"],\n Bphahg7: \"f1fyk1ks\",\n Jctw66: [\"fttsnhr\", \"f171e6fm\"],\n opw9sb: \"fvvg2h8\",\n ns3gzv: \"f1nlwys0\",\n n5iecx: [\"f1bhstg2\", \"f6tsdgz\"],\n Bq2lx2j: \"fqxbw9v\",\n Bv7p3up: [\"f6tsdgz\", \"f1bhstg2\"],\n cc1l3s: \"f1r38qqt\",\n B6u2zzw: \"f12q3i2l\",\n Be5wueo: [\"f9g1hxu\", \"f1o4ic5t\"],\n Cgwcxn: \"f1c3thm1\",\n Btnvhkj: [\"f1o4ic5t\", \"f9g1hxu\"],\n km5s60: \"ffd07pq\"\n },\n disabled: {\n Bceei9c: \"f158kwzp\",\n sj55zd: \"f1s2aq7o\",\n C5wppx: \"fgiuqeu\",\n B32epof: [\"f1q4sfkt\", \"f71co73\"],\n Bphahg7: \"f1u7lsiy\",\n Jctw66: [\"f71co73\", \"f1q4sfkt\"],\n opw9sb: \"f3vxa14\",\n Bbusuzp: \"f1dcs8yz\",\n B7bxudy: \"f1lmtjkn\"\n }\n}, {\n h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".ffqb913:hover>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f42z0vd:hover>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f1j37kh1:hover>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f10v6cc1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f5x9vvn:hover>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}\", \".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}\", \".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}\", \".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}\", \".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}\", \".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}\", \".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}\", \".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}\", \".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}\", \".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}\"],\n a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1oarbgq:active>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fo8gord:active>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f18ci1af:active>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fviagcr:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f8adco2:active>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}\", \".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}\", \".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}\", \".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}\", \".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}\"],\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f5opsb9>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}\", \".fpaw01r>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}\", \".f1gqj827>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}\", \".fub94a2>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}\", \".f13mj44e>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}\", \".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}\", \".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}\", \".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}\", \".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}\", \".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}\", \".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fgiuqeu>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f1q4sfkt>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1lmtjkn>.fui-Checkbox__indicator{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"ruo9svu\", null, [\".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"]\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"]\n },\n large: {\n a9b677: \"f1mq5jt6\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rrh91wr\", null, [\".rrh91wr{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n large: {\n Be2twd7: \"f4ybsrx\",\n Bqenvij: \"fjamq6b\",\n a9b677: \"f64fuq3\"\n },\n circular: {\n Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n }\n}, {\n d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n sj55zd: \"f1ym3bx4\",\n Bceei9c: \"fpo1scq\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n medium: {\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n large: {\n B6of3ja: \"f1xlvstr\",\n jrapky: \"f49ad5g\"\n }\n}, {\n d: [\".f7nlbp4{align-self:center;}\", \".f1ym3bx4{color:inherit;}\", \".fpo1scq{cursor:inherit;}\", \".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);}\"]\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = state => {\n const {\n checked,\n disabled,\n labelPosition,\n shape,\n size\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useCheckboxStyles.styles.js.map"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","useRootStyles","__styles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}
1
+ {"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1qaeuiq\", \"rm0k3vm\", [\".r1qaeuiq{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r1qaeuiq:focus{outline-style:none;}\", \".r1qaeuiq:focus-visible{outline-style:none;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rm0k3vm{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".rm0k3vm:focus{outline-style:none;}\", \".rm0k3vm:focus-visible{outline-style:none;}\", \".rm0k3vm[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rm0k3vm[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n unchecked: {\n Bi91k9c: \"f3p8bqa\",\n pv5h1i: \"fium13f\",\n lj723h: \"f1r2dosr\",\n Hnthvo: \"f1729es6\"\n },\n checked: {\n sj55zd: \"f19n0e5\",\n wkncrt: \"f35ds98\",\n zxk7z7: \"f12mnkne\",\n Hmsnfy: \"fei9a8h\",\n e6czan: \"fix56y3\",\n pv5h1i: \"f1bcv2js\",\n qbydtz: \"f7dr4go\",\n Hnthvo: \"f1r5cpua\"\n },\n mixed: {\n sj55zd: \"f19n0e5\",\n Hmsnfy: \"f1l27tf0\",\n zxk7z7: \"fcilktj\",\n pv5h1i: \"f1lphd54\",\n Bunfa6h: \"f1obkvq7\",\n Hnthvo: \"f2gmbuh\",\n B15ykmv: \"f1oy4fa1\"\n },\n disabled: {\n Bceei9c: \"f158kwzp\",\n sj55zd: \"f1s2aq7o\",\n Hmsnfy: \"f1w7mfl5\",\n zxk7z7: \"fcoafq6\",\n Bbusuzp: \"f1dcs8yz\",\n mrqfp9: \"fxb3eh3\"\n }\n}, {\n h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}\", \".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}\", \".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}\", \".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}\", \".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}\"],\n a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}\", \".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}\", \".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}\", \".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}\", \".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}\"],\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}\", \".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}\", \".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}\", \".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}\", \".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}\", \".fcoafq6{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundDisabled);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.fxb3eh3{--fui-Checkbox__indicator--color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"ruo9svu\", null, [\".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"]\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"]\n },\n large: {\n a9b677: \"f1mq5jt6\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rl7ci6d\", null, [\".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n large: {\n Be2twd7: \"f4ybsrx\",\n Bqenvij: \"fjamq6b\",\n a9b677: \"f64fuq3\"\n },\n circular: {\n Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n }\n}, {\n d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n sj55zd: \"f1ym3bx4\",\n Bceei9c: \"fpo1scq\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n medium: {\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n large: {\n B6of3ja: \"f1xlvstr\",\n jrapky: \"f49ad5g\"\n }\n}, {\n d: [\".f7nlbp4{align-self:center;}\", \".f1ym3bx4{color:inherit;}\", \".fpo1scq{cursor:inherit;}\", \".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);}\"]\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = state => {\n const {\n checked,\n disabled,\n labelPosition,\n shape,\n size\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useCheckboxStyles.styles.js.map"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","useRootStyles","__styles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-checkbox",
3
- "version": "9.1.56",
3
+ "version": "9.2.1",
4
4
  "description": "Fluent UI checkbox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -33,12 +33,12 @@
33
33
  "@fluentui/scripts-tasks": "*"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/react-field": "^9.1.41",
36
+ "@fluentui/react-field": "^9.1.43",
37
37
  "@fluentui/react-icons": "^2.0.217",
38
- "@fluentui/react-jsx-runtime": "^9.0.19",
39
- "@fluentui/react-label": "^9.1.49",
40
- "@fluentui/react-shared-contexts": "^9.12.0",
41
- "@fluentui/react-tabster": "^9.14.5",
38
+ "@fluentui/react-jsx-runtime": "^9.0.20",
39
+ "@fluentui/react-label": "^9.1.51",
40
+ "@fluentui/react-shared-contexts": "^9.13.0",
41
+ "@fluentui/react-tabster": "^9.15.0",
42
42
  "@fluentui/react-theme": "^9.1.16",
43
43
  "@fluentui/react-utilities": "^9.15.2",
44
44
  "@griffel/react": "^1.5.14",