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

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

@@ -1,175 +1,222 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheckboxStyles = exports.checkboxClassName = void 0;
-const react_make_styles_1 = require("@fluentui/react-make-styles");
-const react_tabster_1 = require("@fluentui/react-tabster");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCheckboxStyles_unstable = exports.checkboxClassName = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
 exports.checkboxClassName = 'fui-Checkbox';
-/**
- * Styles for the root slot
- */
-const useStyles = react_make_styles_1.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',
-        [`& .${exports.checkboxClassName}-indicator`]: {
-            borderColor: theme.colorNeutralStrokeDisabled,
-            color: theme.colorNeutralForegroundDisabled,
-            backgroundColor: theme.colorNeutralBackground1,
-        },
-        ':hover': {
-            [`& .${exports.checkboxClassName}-indicator`]: {
-                borderColor: theme.colorNeutralStrokeDisabled,
-                color: theme.colorNeutralForegroundDisabled,
-                backgroundColor: theme.colorNeutralBackground1,
-            },
-        },
-        ':active': {
-            [`& .${exports.checkboxClassName}-indicator`]: {
-                borderColor: theme.colorNeutralStrokeDisabled,
-                color: theme.colorNeutralForegroundDisabled,
-                backgroundColor: theme.colorNeutralBackground1,
-            },
-        },
-    }),
-    unchecked: theme => ({
-        color: theme.colorNeutralForeground3,
-        [`& .${exports.checkboxClassName}-indicator`]: {
-            borderColor: theme.colorNeutralStrokeAccessible,
-            '& > *': {
-                opacity: 0,
-            },
-        },
-        ':hover': {
-            color: theme.colorNeutralForeground2,
-            [`& .${exports.checkboxClassName}-indicator`]: {
-                borderColor: theme.colorNeutralStrokeAccessibleHover,
-            },
-        },
-        ':active': {
-            color: theme.colorNeutralForeground1,
-            [`& .${exports.checkboxClassName}-indicator`]: {
-                borderColor: theme.colorNeutralStrokeAccessiblePressed,
-            },
-        },
-    }),
-    checked: theme => ({
-        color: theme.colorNeutralForeground1,
-        // TODO: neutralForegroundInverted change to NeutralForegroundOnBrand once it's added
-        [`& .${exports.checkboxClassName}-indicator`]: {
-            backgroundColor: theme.colorCompoundBrandBackground,
-            color: theme.colorNeutralForegroundInverted,
-            borderColor: theme.colorBrandBackground,
-        },
-        ':active': {
-            [`& .${exports.checkboxClassName}-indicator`]: {
-                backgroundColor: theme.colorCompoundBrandBackgroundPressed,
-            },
-        },
-        ':hover': {
-            [`& .${exports.checkboxClassName}-indicator`]: {
-                backgroundColor: theme.colorCompoundBrandBackgroundHover,
-            },
-        },
-    }),
-    mixed: theme => ({
-        color: theme.colorNeutralForeground1,
-        [`& .${exports.checkboxClassName}-indicator`]: {
-            borderColor: theme.colorCompoundBrandStroke,
-            color: theme.colorCompoundBrandForeground1,
-        },
-        ':active': {
-            [`& .${exports.checkboxClassName}-indicator`]: {
-                borderColor: theme.colorCompoundBrandStrokePressed,
-                color: theme.colorCompoundBrandForeground1Pressed,
-            },
-        },
-        ':hover': {
-            [`& .${exports.checkboxClassName}-indicator`]: {
-                borderColor: theme.colorCompoundBrandStrokeHover,
-                color: theme.colorCompoundBrandForeground1Hover,
-            },
-        },
-    }),
-    focusIndicator: theme => react_tabster_1.createFocusOutlineStyle(theme, { style: { outlineOffset: '2px' }, selector: 'focus-within' }),
+const indicatorClassName = 'fui-Checkbox__indicator';
+const labelClassName = 'fui-Checkbox__label'; // 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';
+
+const useRootStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "qhf8xq": "f10pi13n",
+    "mc9l5x": "ftuwxu6",
+    "i8kkvl": "f4akndk",
+    "z8tnut": "fp9bwmr",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f150uoa4",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
+    "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"]
+  }
+}, {
+  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[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;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
-const useContainerStyles = react_make_styles_1.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__*/react_1.__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": "f1k6fduh",
+    "B26k0as": "f1yrrd5t",
+    "k0xvi9": "fvfr0er",
+    "Bqb28oy": "fcwiijr",
+    "Fszymg": ["f11s8ldy", "f37mzfx"],
+    "s5xoki": "forfpyi",
+    "cfw8t2": ["f37mzfx", "f11s8ldy"],
+    "b9fajx": "f1vd61pd",
+    "pff03s": "f1mzgjal",
+    "Bk0s23q": ["f1iwu0i3", "f6umev3"],
+    "Bfc5gcl": "femu9zt",
+    "a4vgqw": ["f6umev3", "f1iwu0i3"],
+    "Fum7gy": "f1s8s9qo",
+    "B5tev9i": "fuvx3by",
+    "ecjak0": ["fuqx993", "f1akce7s"],
+    "B006ete": "feccz1o",
+    "Bxlzfhf": ["f1akce7s", "fuqx993"],
+    "qzqrip": "fqgvcms",
+    "xmoia3": "f1wvbx6q",
+    "i1phtq": "fcsc0bc",
+    "Bi8r3f5": "fkf9h0q",
+    "yvncz7": ["faeo8p5", "f4rpdul"],
+    "D2mvea": "fsk3itm",
+    "Bjmkmyo": ["f4rpdul", "faeo8p5"],
+    "B525uqd": "f4wqdms",
+    "B5z3g6i": "ftufdon",
+    "Bwnzx1a": ["f1ni78ii", "f1pe82pw"],
+    "w3j1jp": "fxl8eb7",
+    "n2zbqb": ["f1pe82pw", "f1ni78ii"],
+    "Bek439x": "f12pgwe7",
+    "Bgt4g9q": "f1c5u0pt",
+    "Bkzkukt": ["fyfn4nz", "f1aaeu2t"],
+    "wg1kw8": "ffzx9q8",
+    "Bh7u92y": ["f1aaeu2t", "fyfn4nz"],
+    "B40413r": "f1rm0htn",
+    "B9f5amx": "fpb7n6l",
+    "gbnyp0": ["f1uwkm0d", "fakdbj6"],
+    "ilwfws": "f180qsza",
+    "Fk4w3x": ["fakdbj6", "f1uwkm0d"],
+    "tfmijd": "f3nyagc",
+    "Bketd8w": "f1eh922j",
+    "s1clob": ["f1f3l6lh", "faa1us6"],
+    "B8s8lrk": "f1g6jlfz",
+    "Bp3qae9": ["faa1us6", "f1f3l6lh"],
+    "c4h28b": "f1d2ycii",
+    "Bvff7ki": "f18ruat1",
+    "B0usqpl": ["f18b6ltw", "fd6ao2z"],
+    "ckdfsi": "fdz9k82",
+    "B2hfjzz": ["fd6ao2z", "f18b6ltw"],
+    "B0rx68v": "f8c3d4w",
+    "ezr58z": "fvxnmui",
+    "Bdfu378": "f1ceq7vh",
+    "fvfg5q": "f4ohyq5",
+    "Bbnnodr": ["f1kakd2g", "f3ulah5"],
+    "B7y28oj": "f5fda5m",
+    "Dpxclb": ["f3ulah5", "f1kakd2g"],
+    "E1kcat": "f1c3drxw"
+  }
+}, {
+  "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fcsc0bc:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"]
 });
-const useInputStyles = react_make_styles_1.makeStyles({
-    input: {
-        opacity: 0,
-        position: 'absolute',
-        margin: 0,
-        padding: 0,
-        cursor: 'pointer',
-    },
-    disabled: {
-        cursor: 'not-allowed',
-    },
+
+const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "qb2dma": "fjgzulp",
+    "B7ck84d": "f1ewtqcl",
+    "Bnnss6s": "fi64zpg",
+    "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59",
+    "Brf1p80": "f4d9j23",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "Bbmb7ep": ["f1g3puop", "fi2rrw2"],
+    "Beyfa6y": ["fi2rrw2", "f1g3puop"],
+    "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
+    "Btl43ni": ["f1s4nn1u", "f1rstyi9"],
+    "Bkfmm31": "f1w9h62z",
+    "Bkecrkj": "f1aehjj5"
+  },
+  "medium": {
+    "a9b677": "fjw5fx7",
+    "Bqenvij": "fd461yt",
+    "Be2twd7": "f1ugzwwg"
+  },
+  "large": {
+    "a9b677": "f64fuq3",
+    "Bqenvij": "fjamq6b",
+    "Be2twd7": "f4ybsrx"
+  },
+  "circular": {
+    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
+    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
+    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
+    "Btl43ni": ["f1s8kh49", "f1djnp8u"]
+  }
+}, {
+  "d": [".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f4ybsrx{font-size:16px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
 });
-const useIndicatorStyles = react_make_styles_1.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__*/react_1.__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
  */
-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 = react_make_styles_1.mergeClasses(exports.checkboxClassName, styles.root, styles.focusIndicator, styles[checkedState], state.input.disabled && styles.disabled, state.root.className);
-    state.input.className = react_make_styles_1.mergeClasses(containerStyles[state.size], inputStyles.input, state.input.disabled && inputStyles.disabled, state.input.className);
-    state.containerClassName = react_make_styles_1.mergeClasses(containerStyles.container, containerStyles[state.size], state.hasLabel && containerStyles[state.labelPosition]);
-    state.indicator.className = react_make_styles_1.mergeClasses(`${exports.checkboxClassName}-indicator`, indicatorStyles.box, containerStyles[state.size], state.circular && indicatorStyles.circular, state.indicator.className);
-    return state;
+
+
+const useCheckboxStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  state.root.className = react_1.mergeClasses(exports.checkboxClassName, rootStyles.base, state.root.className);
+  const inputStyles = useInputStyles();
+  state.input.className = react_1.mergeClasses(inputStyles.base, state.input.className);
+  const indicatorStyles = useIndicatorStyles();
+
+  if (state.indicator) {
+    state.indicator.className = react_1.mergeClasses(indicatorClassName, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+  }
+
+  const labelStyles = useLabelStyles();
+
+  if (state.label) {
+    state.label.className = react_1.mergeClasses(labelClassName, labelStyles.base, labelStyles[state.size], state.label.className);
+  }
+
+  return state;
 };
-exports.useCheckboxStyles = useCheckboxStyles;
+
+exports.useCheckboxStyles_unstable = useCheckboxStyles_unstable;
 //# sourceMappingURL=useCheckboxStyles.js.map

package/lib-commonjs/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":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxState } from './Checkbox.types';\n\nexport const checkboxClassName = 'fui-Checkbox';\nconst indicatorClassName = 'fui-Checkbox__indicator';\nconst labelClassName = 'fui-Checkbox__label';\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n    cursor: 'pointer',\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${indicatorClassName} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    width: indicatorSizeMedium,\n    height: indicatorSizeMedium,\n    fontSize: '12px',\n  },\n\n  large: {\n    width: indicatorSizeLarge,\n    height: indicatorSizeLarge,\n    fontSize: '16px',\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n    cursor: 'inherit',\n    color: 'inherit',\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the Checkbox, but preserves line height if the label wraps.\n  medium: {\n    ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n  large: {\n    ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(checkboxClassName, rootStyles.base, state.root.className);\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      indicatorClassName,\n      indicatorStyles.base,\n      indicatorStyles[state.size],\n      state.shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      labelClassName,\n      labelStyles.base,\n      labelStyles[state.size],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.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("./Checkbox"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,qDAA2B"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Checkbox';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.0.0-beta.5",
+  "version": "9.0.0-beta.9",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,16 +18,16 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-checkbox/src && yarn docs",
-    "storybook": "start-storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-checkbox/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-beta.4",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-beta.4",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -41,10 +41,12 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-beta.4",
-    "@fluentui/react-utilities": "9.0.0-beta.4",
-    "@fluentui/react-label": "9.0.0-beta.4",
-    "@fluentui/react-tabster": "9.0.0-beta.5",
+    "@fluentui/react-icons": "^2.0.159-beta.10",
+    "@fluentui/react-label": "9.0.0-beta.8",
+    "@fluentui/react-tabster": "9.0.0-rc.4",
+    "@fluentui/react-theme": "9.0.0-rc.3",
+    "@fluentui/react-utilities": "9.0.0-rc.4",
+    "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;

package/lib/common/isConformant.js

@@ -1,12 +0,0 @@
-import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
-import makeStylesTests from '@fluentui/react-conformance-make-styles';
-export function isConformant(testInfo) {
-    const defaultOptions = {
-        asPropHandlesRef: true,
-        componentPath: module.parent.filename.replace('.test', ''),
-        extraTests: makeStylesTests,
-        skipAsPropTests: true,
-    };
-    baseIsConformant(defaultOptions, testInfo);
-}
-//# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"","sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAmC,MAAM,6BAA6B,CAAC;AAChH,OAAO,eAAe,MAAM,yCAAyC,CAAC;AAEtE,MAAM,UAAU,YAAY,CAC1B,QAAyF;IAEzF,MAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;QAC5D,UAAU,EAAE,eAAqC;QACjD,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC"}

package/lib/components/Checkbox/DefaultIcons.d.ts

@@ -1,4 +0,0 @@
-export declare const Mixed12Regular: () => JSX.Element;
-export declare const Mixed16Regular: () => JSX.Element;
-export declare const Checkmark12Regular: () => JSX.Element;
-export declare const Checkmark16Regular: () => JSX.Element;

package/lib/components/Checkbox/DefaultIcons.js

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export const Mixed12Regular = () => (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", focusable: "false" },
-    React.createElement("rect", { width: "8", height: "8", x: "2", y: "2" })));
-export const Mixed16Regular = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false" },
-    React.createElement("rect", { width: "10", height: "10", x: "3", y: "3" })));
-export const Checkmark12Regular = () => (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("path", { d: "M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z" })));
-export const Checkmark16Regular = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("path", { d: "M13.8639 3.65609C14.0533 3.85704 14.0439 4.17348 13.8429 4.36288L5.91309 11.8368C5.67573 12.0605 5.30311 12.0536 5.07417 11.8213L2.39384 9.10093C2.20003 8.90422 2.20237 8.58765 2.39907 8.39384C2.59578 8.20003 2.91235 8.20237 3.10616 8.39908L5.51192 10.8407L13.1571 3.63517C13.358 3.44577 13.6745 3.45513 13.8639 3.65609Z" })));
-//# sourceMappingURL=DefaultIcons.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultIcons.js","sourceRoot":"","sources":["../../../src/components/Checkbox/DefaultIcons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAClC,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,OAAO;IAClG,8BAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,CACrC,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAClC,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,OAAO;IAClG,8BAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,CACvC,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CACtC,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;IAChF,8BAAM,CAAC,EAAC,6TAA6T,GAAG,CACpU,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CACtC,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;IAChF,8BAAM,CAAC,EAAC,kUAAkU,GAAG,CACzU,CACP,CAAC"}

package/lib-commonjs/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;

package/lib-commonjs/common/isConformant.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isConformant = void 0;
-const react_conformance_1 = require("@fluentui/react-conformance");
-const react_conformance_make_styles_1 = require("@fluentui/react-conformance-make-styles");
-function isConformant(testInfo) {
-    const defaultOptions = {
-        asPropHandlesRef: true,
-        componentPath: module.parent.filename.replace('.test', ''),
-        extraTests: react_conformance_make_styles_1.default,
-        skipAsPropTests: true,
-    };
-    react_conformance_1.isConformant(defaultOptions, testInfo);
-}
-exports.isConformant = isConformant;
-//# sourceMappingURL=isConformant.js.map

package/lib-commonjs/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"","sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;AAAA,mEAAgH;AAChH,2FAAsE;AAEtE,SAAgB,YAAY,CAC1B,QAAyF;IAEzF,MAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;QAC5D,UAAU,EAAE,uCAAqC;QACjD,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AAXD,oCAWC"}

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

@@ -1,4 +0,0 @@
-export declare const Mixed12Regular: () => JSX.Element;
-export declare const Mixed16Regular: () => JSX.Element;
-export declare const Checkmark12Regular: () => JSX.Element;
-export declare const Checkmark16Regular: () => JSX.Element;