@fluentui/react-checkbox 9.0.0-beta.5 → 9.0.0-beta.6

package/lib/components/Checkbox/useCheckboxStyles.js

@@ -1,171 +1,229 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, __styles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
 export const checkboxClassName = 'fui-Checkbox';
+const indicatorClassName = 'fui-Checkbox-indicator'; // TODO replace these spacing constants with theme values once they're on the theme
+
+const spacingHorizontalS = '8px';
+const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
+
+const indicatorSizeMedium = '16px';
+const indicatorSizeLarge = '20px';
 /**
  * Styles for the root slot
  */
-const useStyles = makeStyles({
-    root: theme => ({
-        display: 'inline-flex',
-        position: 'relative',
-        alignSelf: 'flex-start',
-        alignItems: 'center',
-        padding: '4px',
-        userSelect: 'none',
-        cursor: 'pointer',
-    }),
-    disabled: theme => ({
-        color: theme.colorNeutralForegroundDisabled,
-        cursor: 'default',
-        [`& .${checkboxClassName}-indicator`]: {
-            borderColor: theme.colorNeutralStrokeDisabled,
-            color: theme.colorNeutralForegroundDisabled,
-            backgroundColor: theme.colorNeutralBackground1,
-        },
-        ':hover': {
-            [`& .${checkboxClassName}-indicator`]: {
-                borderColor: theme.colorNeutralStrokeDisabled,
-                color: theme.colorNeutralForegroundDisabled,
-                backgroundColor: theme.colorNeutralBackground1,
-            },
-        },
-        ':active': {
-            [`& .${checkboxClassName}-indicator`]: {
-                borderColor: theme.colorNeutralStrokeDisabled,
-                color: theme.colorNeutralForegroundDisabled,
-                backgroundColor: theme.colorNeutralBackground1,
-            },
-        },
-    }),
-    unchecked: theme => ({
-        color: theme.colorNeutralForeground3,
-        [`& .${checkboxClassName}-indicator`]: {
-            borderColor: theme.colorNeutralStrokeAccessible,
-            '& > *': {
-                opacity: 0,
-            },
-        },
-        ':hover': {
-            color: theme.colorNeutralForeground2,
-            [`& .${checkboxClassName}-indicator`]: {
-                borderColor: theme.colorNeutralStrokeAccessibleHover,
-            },
-        },
-        ':active': {
-            color: theme.colorNeutralForeground1,
-            [`& .${checkboxClassName}-indicator`]: {
-                borderColor: theme.colorNeutralStrokeAccessiblePressed,
-            },
-        },
-    }),
-    checked: theme => ({
-        color: theme.colorNeutralForeground1,
-        // TODO: neutralForegroundInverted change to NeutralForegroundOnBrand once it's added
-        [`& .${checkboxClassName}-indicator`]: {
-            backgroundColor: theme.colorCompoundBrandBackground,
-            color: theme.colorNeutralForegroundInverted,
-            borderColor: theme.colorBrandBackground,
-        },
-        ':active': {
-            [`& .${checkboxClassName}-indicator`]: {
-                backgroundColor: theme.colorCompoundBrandBackgroundPressed,
-            },
-        },
-        ':hover': {
-            [`& .${checkboxClassName}-indicator`]: {
-                backgroundColor: theme.colorCompoundBrandBackgroundHover,
-            },
-        },
-    }),
-    mixed: theme => ({
-        color: theme.colorNeutralForeground1,
-        [`& .${checkboxClassName}-indicator`]: {
-            borderColor: theme.colorCompoundBrandStroke,
-            color: theme.colorCompoundBrandForeground1,
-        },
-        ':active': {
-            [`& .${checkboxClassName}-indicator`]: {
-                borderColor: theme.colorCompoundBrandStrokePressed,
-                color: theme.colorCompoundBrandForeground1Pressed,
-            },
-        },
-        ':hover': {
-            [`& .${checkboxClassName}-indicator`]: {
-                borderColor: theme.colorCompoundBrandStrokeHover,
-                color: theme.colorCompoundBrandForeground1Hover,
-            },
-        },
-    }),
-    focusIndicator: theme => createFocusOutlineStyle(theme, { style: { outlineOffset: '2px' }, selector: 'focus-within' }),
+
+const useRootStyles = /*#__PURE__*/__styles({
+  "base": {
+    "qhf8xq": "f10pi13n",
+    "mc9l5x": "ftuwxu6",
+    "Beiy3e4": "f1063pyq",
+    "Bceei9c": "f1k6fduh",
+    "i8kkvl": "f4akndk",
+    "z8tnut": "fp9bwmr",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f150uoa4",
+    "uwmqm3": ["f177v4lu", "f19lj068"]
+  },
+  "disabled": {
+    "Bceei9c": "f158kwzp"
+  },
+  "focusIndicator": {
+    "B486eqv": "f2hkw1w",
+    "c2y4jd": "fsofd9k",
+    "B8vm7ur": "f12sql3b",
+    "f4hv8x": "f1i4q40k",
+    "Gpan81": "fcrbge9",
+    "z7afg": "ft464mn",
+    "rsjj6t": "fskqmiq",
+    "Bqsd8kq": "f2gy8jn",
+    "sfhsbh": "f1pke3uf",
+    "Bugh3ej": "f18xdlq9",
+    "hpanx6": "f1114nks",
+    "Bjkpy09": "f1unftzx",
+    "Jxg1p8": "f8rjbh6",
+    "Bc94xmo": ["fxfgh6q", "f8l10fm"],
+    "Bj23z95": ["f8l10fm", "fxfgh6q"]
+  },
+  "uncheckedColors": {
+    "sj55zd": "f11d4kpn",
+    "B2uuno9": "fwkyayc",
+    "qasus0": ["f7aqmyg", "ft2adke"],
+    "joesme": "f1w1qo1y",
+    "qcmoe7": ["ft2adke", "f7aqmyg"],
+    "Bi91k9c": "f3p8bqa",
+    "vpay66": "fft1thc",
+    "fgdpeo": ["f1w8do5y", "fepve6s"],
+    "ooapsn": "fdf0l0r",
+    "ev9ftv": ["fepve6s", "f1w8do5y"],
+    "Bfw6nra": "fesph6q",
+    "Brbcl2": "f1mhtrce",
+    "E16u1b": ["f17v52hn", "fg62ii9"],
+    "c4amgi": "f1r1cpih",
+    "Bepp5ky": ["fg62ii9", "f17v52hn"]
+  },
+  "checkedColors": {
+    "sj55zd": "f19n0e5",
+    "mrtg77": "f1nckptt",
+    "bxuuxi": "f19uhq4u",
+    "B2uuno9": "ffzu9nk",
+    "qasus0": ["f1g19ujf", "fvb8adx"],
+    "joesme": "f1emw82k",
+    "qcmoe7": ["fvb8adx", "f1g19ujf"],
+    "Bqcm5gq": "fc90h92",
+    "vpay66": "f1gd0goh",
+    "fgdpeo": ["f926psx", "f1pjby8k"],
+    "ooapsn": "f1b2jcp4",
+    "ev9ftv": ["f1pjby8k", "f926psx"],
+    "Bn43wis": "f8zpi21",
+    "Brbcl2": "f1irvqu2",
+    "E16u1b": ["f5uvb4g", "f1vydb2"],
+    "c4amgi": "fgkonep",
+    "Bepp5ky": ["f1vydb2", "f5uvb4g"]
+  },
+  "mixedColors": {
+    "sj55zd": "f19n0e5",
+    "B2uuno9": "fkebysb",
+    "qasus0": ["f1k0bg1", "f4oydaf"],
+    "joesme": "fi1mkuk",
+    "qcmoe7": ["f4oydaf", "f1k0bg1"],
+    "bxuuxi": "f1n04o3z",
+    "vpay66": "fdfakjf",
+    "fgdpeo": ["fvqbddr", "f1babrrv"],
+    "ooapsn": "f1jbek0d",
+    "ev9ftv": ["f1babrrv", "fvqbddr"],
+    "Iwvt79": "f1mps0ds",
+    "Brbcl2": "f1tallx",
+    "E16u1b": ["f9cmnyc", "f1skyj24"],
+    "c4amgi": "f12y7q7q",
+    "Bepp5ky": ["f1skyj24", "f9cmnyc"],
+    "Ewzbd8": "f135b915"
+  },
+  "disabledColors": {
+    "sj55zd": "f1s2aq7o",
+    "B2uuno9": "f1bezmwk",
+    "qasus0": ["fb9vlya", "f1ubioqa"],
+    "joesme": "fu4x4v",
+    "qcmoe7": ["f1ubioqa", "fb9vlya"],
+    "bxuuxi": "fpjy2vv"
+  }
+}, {
+  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1k6fduh{cursor:pointer;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f158kwzp{cursor:default;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fwkyayc .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f7aqmyg .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".ft2adke .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1w1qo1y .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1nckptt .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackground);}", ".f19uhq4u .fui-Checkbox-indicator{color:var(--colorNeutralForegroundOnBrand);}", ".ffzu9nk .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".f1g19ujf .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".fvb8adx .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".f1emw82k .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".fkebysb .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1k0bg1 .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f4oydaf .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".fi1mkuk .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f1n04o3z .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bezmwk .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".fb9vlya .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1ubioqa .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fu4x4v .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fpjy2vv .fui-Checkbox-indicator{color:var(--colorNeutralForegroundDisabled);}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "h": [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".fft1thc:hover .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1w8do5y:hover .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".fepve6s:hover .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fdf0l0r:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".fc90h92:hover .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".f1gd0goh:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f926psx:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pjby8k:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".f1b2jcp4:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".fdfakjf:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fvqbddr:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1babrrv:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1jbek0d:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1mps0ds:hover .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1Hover);}"],
+  "a": [".fesph6q:active:hover{color:var(--colorNeutralForeground1);}", ".f1mhtrce:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f17v52hn:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fg62ii9:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1r1cpih:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f8zpi21:active:hover .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1irvqu2:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".f5uvb4g:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1vydb2:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".fgkonep:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1tallx:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f9cmnyc:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".f1skyj24:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f12y7q7q:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f135b915:active:hover .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1Pressed);}"]
 });
-const useContainerStyles = makeStyles({
-    container: {
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    medium: {
-        width: '16px',
-        height: '16px',
-    },
-    large: {
-        width: '20px',
-        height: '20px',
-    },
-    // TODO: change marginLeft to Spacing horizontal M once it's added
-    before: theme => ({
-        marginLeft: '12px',
-    }),
-    // TODO: change marginRight to Spacing horizontal M once it's added
-    after: theme => ({
-        marginRight: '12px',
-    }),
+
+const useInputStyles = /*#__PURE__*/__styles({
+  "base": {
+    "qhf8xq": "f1euv43f",
+    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
+    "Bhzewxz": "f15twtuk",
+    "a9b677": "fly5x3f",
+    "Bqenvij": "f1l02sjl",
+    "B7ck84d": "f1ewtqcl",
+    "B6of3ja": "f1hu3pq6",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "f19f4twv",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"],
+    "abs64n": "fk73vx1",
+    "Bceei9c": "fpo1scq"
+  }
+}, {
+  "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;}", ".fpo1scq{cursor:inherit;}"]
 });
-const useInputStyles = makeStyles({
-    input: {
-        opacity: 0,
-        position: 'absolute',
-        margin: 0,
-        padding: 0,
-        cursor: 'pointer',
-    },
-    disabled: {
-        cursor: 'not-allowed',
-    },
+
+const useIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
+    "qb2dma": "fjgzulp",
+    "B7ck84d": "f1ewtqcl",
+    "Bnnss6s": "fi64zpg",
+    "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59",
+    "Brf1p80": "f4d9j23",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "Bbmb7ep": ["f1g3puop", "fi2rrw2"],
+    "Beyfa6y": ["fi2rrw2", "f1g3puop"],
+    "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
+    "Btl43ni": ["f1s4nn1u", "f1rstyi9"],
+    "Bkfmm31": "f1w9h62z",
+    "Bceei9c": "fpo1scq"
+  },
+  "medium": {
+    "a9b677": "fjw5fx7",
+    "Bqenvij": "fd461yt"
+  },
+  "large": {
+    "a9b677": "f64fuq3",
+    "Bqenvij": "fjamq6b"
+  },
+  "circular": {
+    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
+    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
+    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
+    "Btl43ni": ["f1s8kh49", "f1djnp8u"]
+  },
+  "unchecked": {
+    "Bm7m4lb": "f1byn578"
+  }
+}, {
+  "d": [".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1w9h62z{fill:currentColor;}", ".fpo1scq{cursor:inherit;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height: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);}", ".f1byn578>*{opacity:0;}"]
 });
-const useIndicatorStyles = makeStyles({
-    box: theme => ({
-        width: '100%',
-        height: '100%',
-        fill: 'currentColor',
-        overflow: 'hidden',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'absolute',
-        boxSizing: 'border-box',
-        borderStyle: 'solid',
-        borderRadius: theme.borderRadiusSmall,
-        borderWidth: theme.strokeWidthThin,
-    }),
-    circular: theme => ({
-        borderRadius: theme.borderRadiusCircular,
-    }),
+
+const useLabelStyles = /*#__PURE__*/__styles({
+  "base": {
+    "qb2dma": "f7nlbp4",
+    "famaaq": "f1xqy1su",
+    "Bceei9c": "fpo1scq",
+    "sj55zd": "f1ym3bx4"
+  },
+  "medium": {
+    "B6of3ja": "fjzwpt6",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "fh6j2fo",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"]
+  },
+  "large": {
+    "B6of3ja": "f1xlvstr",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "f49ad5g",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"]
+  }
+}, {
+  "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fpo1scq{cursor:inherit;}", ".f1ym3bx4{color:inherit;}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
 });
 /**
  * Apply styling to the Checkbox slots based on the state
  */
-export const useCheckboxStyles = (state) => {
-    const checkedState = state.checked === 'mixed' ? 'mixed' : state.checked ? 'checked' : 'unchecked';
-    const indicatorStyles = useIndicatorStyles();
-    const inputStyles = useInputStyles();
-    const containerStyles = useContainerStyles();
-    const styles = useStyles();
-    state.root.className = mergeClasses(checkboxClassName, styles.root, styles.focusIndicator, styles[checkedState], state.input.disabled && styles.disabled, state.root.className);
-    state.input.className = mergeClasses(containerStyles[state.size], inputStyles.input, state.input.disabled && inputStyles.disabled, state.input.className);
-    state.containerClassName = mergeClasses(containerStyles.container, containerStyles[state.size], state.hasLabel && containerStyles[state.labelPosition]);
-    state.indicator.className = mergeClasses(`${checkboxClassName}-indicator`, indicatorStyles.box, containerStyles[state.size], state.circular && indicatorStyles.circular, state.indicator.className);
-    return state;
+
+
+export const useCheckboxStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  state.root.className = mergeClasses(checkboxClassName, rootStyles.base, rootStyles.focusIndicator, state.input.disabled && rootStyles.disabled, // Pick exactly one of the color classes, based on `disabled` and `checked`
+  state.input.disabled ? rootStyles.disabledColors : state.checked === 'mixed' ? rootStyles.mixedColors : state.checked ? rootStyles.checkedColors : rootStyles.uncheckedColors, state.root.className);
+  const inputStyles = useInputStyles();
+  state.input.className = mergeClasses(inputStyles.base, state.input.className);
+  const indicatorStyles = useIndicatorStyles();
+
+  if (state.indicator) {
+    state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, indicatorStyles[state.size], state.circular && indicatorStyles.circular, !state.checked && indicatorStyles.unchecked, state.indicator.className);
+  }
+
+  const labelStyles = useLabelStyles();
+
+  if (state.label) {
+    state.label.className = mergeClasses(labelStyles.base, labelStyles[state.size], state.label.className);
+  }
+
+  return state;
 };
 //# sourceMappingURL=useCheckboxStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCheckboxStyles.js","sourceRoot":"","sources":["../../../src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib-commonjs/Checkbox.js

@@ -1,5 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./components/Checkbox/index"), exports);
 //# sourceMappingURL=Checkbox.js.map

package/lib-commonjs/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":";;;AAAA,sEAA4C"}
+{"version":3,"sources":["../src/Checkbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import type { CheckboxProps } from './Checkbox.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * A Checkbox component provides a way to represent options that can be selected
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
  */
 export declare const Checkbox: ForwardRefComponent<CheckboxProps>;

package/lib-commonjs/components/Checkbox/Checkbox.js

@@ -1,17 +1,27 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Checkbox = void 0;
-const React = require("react");
-const useCheckbox_1 = require("./useCheckbox");
-const renderCheckbox_1 = require("./renderCheckbox");
-const useCheckboxStyles_1 = require("./useCheckboxStyles");
+
+const React = /*#__PURE__*/require("react");
+
+const useCheckbox_1 = /*#__PURE__*/require("./useCheckbox");
+
+const renderCheckbox_1 = /*#__PURE__*/require("./renderCheckbox");
+
+const useCheckboxStyles_1 = /*#__PURE__*/require("./useCheckboxStyles");
 /**
- * A Checkbox component provides a way to represent options that can be selected
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
  */
-exports.Checkbox = React.forwardRef((props, ref) => {
-    const state = useCheckbox_1.useCheckbox(props, ref);
-    useCheckboxStyles_1.useCheckboxStyles(state);
-    return renderCheckbox_1.renderCheckbox(state);
+
+
+exports.Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCheckbox_1.useCheckbox_unstable(props, ref);
+  useCheckboxStyles_1.useCheckboxStyles_unstable(state);
+  return renderCheckbox_1.renderCheckbox_unstable(state);
 });
 exports.Checkbox.displayName = 'Checkbox';
 //# sourceMappingURL=Checkbox.js.map

package/lib-commonjs/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,+CAA4C;AAC5C,qDAAkD;AAClD,2DAAwD;AAIxD;;GAEG;AACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,yBAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEtC,qCAAiB,CAAC,KAAK,CAAC,CAAC;IACzB,OAAO,+BAAc,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;AAEA,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,SAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourceRoot":""}

package/lib-commonjs/components/Checkbox/Checkbox.types.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
-import { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
-import { LabelProps } from '@fluentui/react-label';
-export interface CheckboxCommons {
+import { Label } from '@fluentui/react-label';
+import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+interface CheckboxCommons {
     /**
-     * A checkbox can be rendered with a circular shape.
+     * Whether to render the checkbox in a circular shape instead of square.
+     * This variant is only recommended to be used in a tasks-style UI (checklist),
+     * since it otherwise could be confused for a `RadioItem`.
+     * @defaultvalue false
      */
-    circular: boolean | undefined;
+    circular: boolean;
     /**
      * A checkbox's state can be controlled.
      * @defaultvalue false
@@ -13,19 +16,14 @@ export interface CheckboxCommons {
     checked: 'mixed' | boolean;
     /**
      * Checkbox supports two different checkbox sizes.
-     * @defaultvalue 'medium'
+     * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
      * Determines whether the label should be positioned before or after the checkbox.
-     * @defaultvalue 'after'
+     * @defaultvalue after
      */
     labelPosition: 'before' | 'after';
-    /**
-     * Field required to pass className to container instead of input
-     * this will be solved by https://github.com/microsoft/fluentui/pull/18983
-     */
-    containerClassName?: string;
 }
 /**
  * Data for the onChange event for checkbox.
@@ -35,28 +33,36 @@ export interface CheckboxOnChangeData {
 }
 export declare type CheckboxSlots = {
     /**
-     * The root element of the checkbox is its `<label>`.
+     * The root element of the Checkbox.
      *
      * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.
      * All other native props will be applied to the primary slot: `input`
      */
-    root: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The Checkbox's label.
+     */
+    label?: Slot<typeof Label>;
     /**
      * Hidden input that handles the checkbox's functionality.
      *
      * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,
      * except `className` and `style`, which remain on the root slot.
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>>;
     /**
      * Renders the checkbox, with the checkmark icon as its child when checked.
      */
-    indicator: IntrinsicShorthandProps<'div'>;
+    indicator: Slot<'div'>;
 };
 /**
  * Checkbox Props
  */
-export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>, 'size' | 'checked' | 'defaultChecked'> & Partial<CheckboxCommons> & {
+export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'size' | 'checked' | 'defaultChecked' | 'onChange'> & Partial<CheckboxCommons> & {
+    /**
+     * Checkboxes don't support children. To add a label, use the `label` prop.
+     */
+    children?: never;
     /**
      * Callback to be called when the checked state value changes.
      */
@@ -69,6 +75,5 @@ export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>,
 /**
  * State used in rendering Checkbox
  */
-export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons & {
-    hasLabel: boolean;
-};
+export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;
+export {};

package/lib-commonjs/components/Checkbox/Checkbox.types.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=Checkbox.types.js.map

package/lib-commonjs/components/Checkbox/Checkbox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}