@fluentui/react-button 9.0.0-alpha.10 → 9.0.0-alpha.100

package/lib/components/Button/useButtonStyles.js

@@ -1,382 +1,354 @@
-import { ax, makeStylesCompat } from '@fluentui/react-make-styles';
-// TODO: These are named in design specs but not hoisted to global/alias yet.
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; // TODO: These are named in design specs but not hoisted to global/alias yet.
 //       We're tracking these here to determine how we can hoist them.
-var buttonSpacing = {
-    smallest: '2px',
-    smaller: '4px',
-    small: '6px',
-    medium: '8px',
-    large: '12px',
-    larger: '16px',
+
+export var buttonSpacing = {
+  smallest: '2px',
+  smaller: '4px',
+  small: '6px',
+  medium: '8px',
+  large: '12px',
+  larger: '16px'
 };
-// We do not want a combinatorial explosion of component variables for variants (bg, bgPrimary, etc)
-// We want a fixed interface of variables for a given component and to alter those between variants
-export var makeButtonTokens = function (theme) { return ({
-    base: {
-        // TODO: these are not in the global/alias theme currently
-        // When they are shown in the token UI, we need to make it clear there is no global/alias mapping support
-        height: '32px',
-        paddingX: buttonSpacing.large,
-        paddingY: '0',
-        minWidth: '96px',
-        maxWidth: '280px',
-        color: theme.alias.color.neutral.neutralForeground1,
-        content2Color: theme.alias.color.neutral.neutralForeground2,
-        background: theme.alias.color.neutral.neutralBackground1,
-        backgroundPressed: theme.alias.color.neutral.neutralBackground1,
-        borderRadius: theme.global.borderRadius.medium,
-        borderWidth: theme.global.strokeWidth.thin,
-        borderColor: theme.alias.color.neutral.neutralStroke1,
-        backgroundHover: theme.alias.color.neutral.neutralBackground1Hover,
-        borderColorHover: theme.alias.color.neutral.neutralStroke1Hover,
-        backgroundActive: theme.alias.color.neutral.neutralBackground1Pressed,
-        borderColorActive: theme.alias.color.neutral.neutralStroke1Pressed,
-        fontWeight: theme.global.type.fontWeights.semibold,
-        fontSize: theme.global.type.fontSizes.base[300],
-        lineHeight: theme.global.type.lineHeights.base[300],
-        iconSpacing: buttonSpacing.small,
-        iconWidth: '20px',
-        iconHeight: '20px',
-    },
-    disabled: {
-        background: theme.alias.color.neutral.neutralBackgroundDisabled,
-        borderColor: theme.alias.color.neutral.neutralStrokeDisabled,
-        color: theme.alias.color.neutral.neutralForegroundDisabled,
-        content2Color: theme.alias.color.neutral.neutralForegroundDisabled,
-    },
-    small: {
-        paddingX: buttonSpacing.medium,
-        borderRadius: theme.global.borderRadius.small,
-        // TODO: design spec says minWidth "can be toggled off", consider prop like compact?
-        minWidth: '64px',
-        height: '24px',
-        fontSize: theme.global.type.fontSizes.base[200],
-        lineHeight: theme.global.type.fontSizes.base[200],
-        fontWeight: theme.global.type.fontWeights.regular,
-    },
-    large: {
-        paddingX: buttonSpacing.larger,
-        height: '40px',
-        borderRadius: theme.global.borderRadius.medium,
-        fontSize: theme.global.type.fontSizes.base[400],
-        // TODO: 24px is not on the global ramp of line heights
-        //       22px = theme.global.type.lineHeights.base[400]
-        //       28px = theme.global.type.lineHeights.base[500]
-        lineHeight: '24px',
-        iconWidth: '24px',
-        iconHeight: '24px',
-        iconSpacing: buttonSpacing.small,
-    },
-    // TODO: Would be ideal to automate a check to ensure when a variant is accessed, all the tokens are accessed as well.
-    //       If not, it means there is cruft in the variant tokens definition.
-    //       All tokens in a variant should be mapped to some style property.
-    iconOnly: {
-        paddingX: buttonSpacing.small,
-        paddingY: buttonSpacing.small,
-        minWidth: '32px',
-        maxWidth: '32px',
-    },
-    // TODO: combinatorial "variants" is wrong, we already have iconOnly and small.
-    //       we essentially need to update component token mappings based on variant matchers.
-    //       fow the sake of progress for now, we're extending variants to have combinations.
-    iconOnlySmall: {
-        paddingX: buttonSpacing.smallest,
-        paddingY: buttonSpacing.smallest,
-        borderRadius: theme.global.borderRadius.small,
-        minWidth: '24px',
-        maxWidth: '24px',
-    },
-    iconOnlyLarge: {
-        paddingX: buttonSpacing.small,
-        paddingY: buttonSpacing.small,
-        borderRadius: theme.global.borderRadius.medium,
-        minWidth: '40px',
-        maxWidth: '40px',
-    },
-    primary: {
-        color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
-        background: theme.alias.color.brand.brandBackground,
-        borderColor: 'transparent',
-        borderColorHover: 'transparent',
-        borderColorActive: 'transparent',
-        backgroundHover: theme.alias.color.brand.brandBackgroundHover,
-        backgroundPressed: theme.alias.color.brand.brandBackgroundPressed,
-        // TODO: spec calls out "shadow 4 __brand__", are we missing tokens?
-        shadow: theme.alias.shadow.shadow4,
-        // TODO: spec calls out "shadow 2 __darker__", are we missing tokens?
-        shadowPressed: theme.alias.shadow.shadow2,
-    },
-    primaryDisabled: {
-        background: theme.alias.color.neutral.neutralBackgroundDisabled,
-        // borderColor: theme.alias.color.neutral.neutralStrokeDisabled,
-        color: theme.alias.color.neutral.neutralForegroundDisabled,
-        content2Color: theme.alias.color.neutral.neutralForegroundDisabled,
-        shadow: 'none',
-        shadowPressed: 'none',
-    },
-}); };
-var useRootStyles = makeStylesCompat([
-    [
-        null,
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                // TODO: remove unsafe property: https://caniuse.com/?search=gap
-                gap: buttonTokens.base.iconSpacing,
-                // // TODO: 1) ask designers what our vertical align strategy is
-                // //       2) enforce with conformance for inline elements
-                verticalAlign: 'text-bottom',
-                margin: 0,
-                padding: buttonTokens.base.paddingY + " " + buttonTokens.base.paddingX,
-                height: buttonTokens.base.height,
-                minWidth: buttonTokens.base.minWidth,
-                maxWidth: buttonTokens.base.maxWidth,
-                color: buttonTokens.base.color,
-                borderStyle: 'solid',
-                borderRadius: buttonTokens.base.borderRadius,
-                borderWidth: buttonTokens.base.borderWidth,
-                borderColor: buttonTokens.base.borderColor,
-                background: buttonTokens.base.background,
-                outline: 'none',
-                ':hover': {
-                    background: buttonTokens.base.backgroundHover,
-                    borderColor: buttonTokens.base.borderColorHover,
-                    cursor: 'pointer',
-                },
-                ':active': {
-                    background: buttonTokens.base.backgroundActive,
-                    borderColor: buttonTokens.base.borderColorActive,
-                    outline: 'none',
-                },
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var size = _a.size;
-            return size === 'small';
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                padding: buttonTokens.small.paddingX + " " + buttonTokens.small.paddingY,
-                minWidth: buttonTokens.small.minWidth,
-                height: buttonTokens.small.height,
-                borderRadius: buttonTokens.small.borderRadius,
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var size = _a.size;
-            return size === 'large';
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                gap: buttonTokens.large.iconSpacing,
-                padding: buttonTokens.large.paddingX + " " + buttonTokens.large.paddingY,
-                height: buttonTokens.large.height,
-                borderRadius: buttonTokens.large.borderRadius,
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var disabled = _a.disabled;
-            return disabled;
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                background: buttonTokens.disabled.background,
-                borderColor: buttonTokens.disabled.borderColor,
-                color: buttonTokens.disabled.color,
-                ':hover': {
-                    background: buttonTokens.disabled.background,
-                    borderColor: buttonTokens.disabled.borderColor,
-                    cursor: 'default',
-                },
-                ':active': {
-                    background: buttonTokens.disabled.background,
-                    borderColor: buttonTokens.disabled.borderColor,
-                },
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var primary = _a.primary;
-            return primary;
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                background: buttonTokens.primary.background,
-                color: buttonTokens.primary.color,
-                borderColor: buttonTokens.primary.borderColor,
-                // TODO: spec calls out "shadow 4 __darker__", are we missing tokens?
-                boxShadow: buttonTokens.primary.shadow,
-                ':hover': {
-                    background: buttonTokens.primary.backgroundHover,
-                    borderColor: buttonTokens.primary.borderColorHover,
-                },
-                ':active': {
-                    background: buttonTokens.primary.backgroundPressed,
-                    // TODO: spec calls out "shadow 2 __darker__", are we missing tokens?
-                    boxShadow: buttonTokens.primary.shadow,
-                    borderColor: buttonTokens.primary.borderColorActive,
-                },
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var primary = _a.primary, disabled = _a.disabled;
-            return primary && disabled;
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                background: buttonTokens.primaryDisabled.background,
-                color: buttonTokens.primaryDisabled.color,
-                boxShadow: buttonTokens.primaryDisabled.shadow,
-                ':hover': {
-                    background: buttonTokens.primaryDisabled.background,
-                    cursor: 'default',
-                },
-                ':active': {
-                    boxShadow: buttonTokens.primaryDisabled.shadowPressed,
-                },
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var iconOnly = _a.iconOnly;
-            return iconOnly;
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                padding: buttonTokens.iconOnly.paddingX,
-                minWidth: buttonTokens.iconOnly.minWidth,
-                maxWidth: buttonTokens.iconOnly.maxWidth,
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var iconOnly = _a.iconOnly, size = _a.size;
-            return iconOnly && size === 'small';
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                padding: buttonTokens.iconOnlySmall.paddingX + " " + buttonTokens.iconOnlySmall.paddingY,
-                minWidth: buttonTokens.iconOnlySmall.minWidth,
-                maxWidth: buttonTokens.iconOnlySmall.maxWidth,
-                borderRadius: buttonTokens.iconOnlySmall.borderRadius,
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var iconOnly = _a.iconOnly, size = _a.size;
-            return iconOnly && size === 'large';
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                padding: buttonTokens.iconOnlyLarge.paddingX + " " + buttonTokens.iconOnlyLarge.paddingY,
-                minWidth: buttonTokens.iconOnlyLarge.minWidth,
-                maxWidth: buttonTokens.iconOnlyLarge.maxWidth,
-                borderRadius: buttonTokens.iconOnlyLarge.borderRadius,
-            };
-        },
-    ],
-]);
-var useChildrenStyles = makeStylesCompat([
-    [
-        null,
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-                whiteSpace: 'nowrap',
-                // TODO: This is "Body, Strong (?)" token in the design spec (14px size, 20px line, semibold weight)
-                //      There are some type aliases in the figma not in our theme as well, not sure if this maps to alias or not
-                fontWeight: buttonTokens.base.fontWeight,
-                fontSize: buttonTokens.base.fontSize,
-                lineHeight: buttonTokens.base.lineHeight,
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var size = _a.size;
-            return size === 'small';
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                fontSize: buttonTokens.small.fontSize,
-                fontWeight: buttonTokens.small.fontWeight,
-                lineHeight: buttonTokens.small.lineHeight,
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var size = _a.size;
-            return size === 'large';
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                fontSize: buttonTokens.large.fontSize,
-                lineHeight: buttonTokens.large.lineHeight,
-            };
-        },
-    ],
-]);
-var useIconStyles = makeStylesCompat([
-    [
-        null,
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: buttonTokens.base.iconHeight,
-                width: buttonTokens.base.iconWidth,
-            };
-        },
-    ],
-    [
-        function (_a) {
-            var size = _a.size;
-            return size === 'large';
-        },
-        function (theme) {
-            var buttonTokens = makeButtonTokens(theme);
-            return {
-                width: buttonTokens.large.iconWidth,
-                height: buttonTokens.large.iconHeight,
-            };
-        },
-    ],
-]);
-export var useButtonStyles = function (state, selectors) {
-    state.className = ax(state.className, useRootStyles(selectors));
-    state.children = state.children || { className: '' };
-    state.icon = state.icon || { className: '' };
-    state.children.className = ax(state.children.className, useChildrenStyles(selectors));
-    state.icon.className = ax(state.icon.className, useIconStyles(selectors));
+
+var useRootStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23",
+    "ha4doy": "fmrv4ls",
+    "B6of3ja": "f1hu3pq6",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "f19f4twv",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"],
+    "B2u0y6b": "f1n52uh2",
+    "Bpg54ce": "f1a3p1vp",
+    "ygn44y": "f1cmbuwj",
+    "Huce71": "fz5stix",
+    "ayd6f0": "fcm7iae",
+    "sj55zd": "f19n0e5",
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "Bahqtrf": "fk6fouc",
+    "oeaueh": "f1s6fcnf",
+    "v4pbla": "f56u8ty",
+    "Bgoe8wy": "fvcxoqz",
+    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
+    "oetu4i": "f1xlaoq0",
+    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
+    "Bi91k9c": "fax3udt",
+    "eoavqd": "f8491dx",
+    "vv34bc": "fzgy25m",
+    "B6oc9vd": "fvs00aa",
+    "ak43y8": ["f1assf6x", "f4ruux4"],
+    "wmxk5l": "fumykes",
+    "B50zh58": ["f4ruux4", "f1assf6x"],
+    "lj723h": "f1r2dosr",
+    "zwc60e": "fb0xa7e"
+  },
+  "block": {
+    "B2u0y6b": "f6dzj5z",
+    "a9b677": "fly5x3f"
+  },
+  "outline": {
+    "ayd6f0": "f1gjiv6l",
+    "v4pbla": "f62j56f",
+    "vv34bc": "flt377r"
+  },
+  "primary": {
+    "ayd6f0": "f1tdnksq",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "f1phragk",
+    "v4pbla": "f1fitrdm",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f1rq72xc",
+    "vv34bc": "f4ihffn",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f18otbis"
+  },
+  "subtle": {
+    "ayd6f0": "f11q0hf9",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "fkfq4zb",
+    "v4pbla": "f4wzgrt",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f139oj5f",
+    "vv34bc": "f1be4e1d",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f19au66r"
+  },
+  "transparent": {
+    "ayd6f0": "f1gjiv6l",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "fkfq4zb",
+    "v4pbla": "f62j56f",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f139oj5f",
+    "vv34bc": "flt377r",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f19au66r"
+  },
+  "circular": {
+    "Dimara": "f44lkw9"
+  },
+  "rounded": {},
+  "square": {
+    "Dimara": "f1fabniw"
+  },
+  "small": {
+    "rmohyg": "f4xv25i",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
+    "Bqenvij": "frvgh55",
+    "Bf4jedk": "fh7ncta",
+    "Dimara": "fq9zq91",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm"
+  },
+  "medium": {
+    "rmohyg": "f19jf40t",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f11qrl6u", "fjlbh76"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "Bqenvij": "f1d2rq10",
+    "Bf4jedk": "f14es27b",
+    "Dimara": "ft85np5",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "large": {
+    "rmohyg": "f19jf40t",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f1gbmcue", "f1rh9g5y"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1rh9g5y", "f1gbmcue"],
+    "Bqenvij": "fbhnoac",
+    "Bf4jedk": "f14es27b",
+    "Dimara": "ft85np5",
+    "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "faaz57k"
+  }
+}, {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fmrv4ls{vertical-align:middle;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1n52uh2{max-width:280px;}", ".f1a3p1vp{overflow:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}", ".fcm7iae{background:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1s6fcnf{outline-style:none;}", ".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}", ".f1gjiv6l{background:var(--colorTransparentBackground);}", ".f1tdnksq{background:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f11q0hf9{background:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".f1fabniw{border-radius:var(--borderRadiusNone);}", ".f4xv25i{gap:4px;}", ".f1g0x7ka{padding-top:0;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1qch9an{padding-bottom:0;}", ".frvgh55{height:24px;}", ".fh7ncta{min-width:64px;}", ".fq9zq91{border-radius:var(--borderRadiusSmall);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f19jf40t{gap:6px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1d2rq10{height:32px;}", ".f14es27b{min-width:96px;}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fbhnoac{height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
+  "h": [".f56u8ty:hover{background:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".f8491dx:hover{cursor:pointer;}", ".f62j56f:hover{background:var(--colorTransparentBackgroundHover);}", ".f1fitrdm:hover{background:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f4wzgrt:hover{background:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
+  "a": [".fzgy25m:active{background:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fb0xa7e:active{outline-style:none;}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".f4ihffn:active{background:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1be4e1d:active{background:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
+});
+
+var useRootDisabledStyles = /*#__PURE__*/__styles({
+  "base": {
+    "ayd6f0": "fqst6tg",
+    "g2u3we": "f1jj8ep1",
+    "h3c5rm": ["f15xbau", "fy0fskl"],
+    "B9xav0g": "f4ikngz",
+    "zhjwy3": ["fy0fskl", "f15xbau"],
+    "sj55zd": "f1s2aq7o",
+    "Bceei9c": "fdrzuqr",
+    "v4pbla": "f1nil5o8",
+    "Bgoe8wy": "f12mpcsy",
+    "Bwzppfd": ["f1gwvigk", "f18rmfxp"],
+    "oetu4i": "f1jnshp0",
+    "gg5e9n": ["f18rmfxp", "f1gwvigk"],
+    "Bi91k9c": "fvgxktp",
+    "eoavqd": "fphbwmw",
+    "vv34bc": "fkqx3al",
+    "B6oc9vd": "fdi4vxw",
+    "ak43y8": ["f4ryxzl", "fkdgpbx"],
+    "wmxk5l": "fcmhn06",
+    "B50zh58": ["fkdgpbx", "f4ryxzl"],
+    "lj723h": "f19wldhg",
+    "Bwh3duv": "fq67hom"
+  },
+  "outline": {
+    "ayd6f0": "f1gjiv6l",
+    "v4pbla": "f62j56f",
+    "vv34bc": "flt377r"
+  },
+  "primary": {
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  },
+  "subtle": {
+    "ayd6f0": "f1k2sg7s",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "v4pbla": "f1vc35iv",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "vv34bc": "f17oliv9",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  },
+  "transparent": {
+    "ayd6f0": "f1k2sg7s",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "v4pbla": "f1vc35iv",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "vv34bc": "f17oliv9",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  }
+}, {
+  "d": [".fqst6tg{background:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1gjiv6l{background:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1k2sg7s{background:none;}"],
+  "h": [".f1nil5o8:hover{background:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f62j56f:hover{background:var(--colorTransparentBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1vc35iv:hover{background:none;}"],
+  "a": [".fkqx3al:active{background:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".fq67hom:active{cursor:not-allowed;}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f17oliv9:active{background:none;}"]
+});
+
+var useRootFocusStyles = /*#__PURE__*/__styles({
+  "base": {},
+  "circular": {},
+  "rounded": {},
+  "primary": {},
+  "square": {},
+  "small": {},
+  "medium": {},
+  "large": {}
+}, {});
+
+var useRootIconOnlyStyles = /*#__PURE__*/__styles({
+  "small": {
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["f8wuabp", "fycuoez"],
+    "Byoj8tv": "f1y2xyjm",
+    "uwmqm3": ["fycuoez", "f8wuabp"],
+    "Bf4jedk": "f107v6xj",
+    "B2u0y6b": "f17iyk3w"
+  },
+  "medium": {
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["f8wuabp", "fycuoez"],
+    "Byoj8tv": "f1y2xyjm",
+    "uwmqm3": ["fycuoez", "f8wuabp"],
+    "Bf4jedk": "fwbmr0d",
+    "B2u0y6b": "f44c6la"
+  },
+  "large": {
+    "z8tnut": "f1xp5gbu",
+    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "Byoj8tv": "f1d7kygh",
+    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "Bf4jedk": "f12clzc2",
+    "B2u0y6b": "fjy1crr"
+  }
+}, {
+  "d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f107v6xj{min-width:28px;}", ".f17iyk3w{max-width:28px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
+});
+
+var useIconStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23"
+  },
+  "small": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "medium": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "large": {
+    "Be2twd7": "f1rt2boy",
+    "Bqenvij": "frvgh55",
+    "a9b677": "fq4mcun"
+  }
+}, {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
+});
+
+export var useButtonStyles = function (state) {
+  var rootStyles = useRootStyles();
+  var rootDisabledStyles = useRootDisabledStyles();
+  var rootFocusStyles = useRootFocusStyles();
+  var rootIconOnlyStyles = useRootIconOnlyStyles();
+  var iconStyles = useIconStyles();
+  var appearance = state.appearance,
+      block = state.block,
+      disabled = state.disabled,
+      disabledFocusable = state.disabledFocusable,
+      iconOnly = state.iconOnly,
+      shape = state.shape,
+      size = state.size;
+  state.root.className = mergeClasses( // Root styles
+  rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
+  (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
+  rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
+  iconOnly && rootIconOnlyStyles[size], // User provided class name
+  state.root.className);
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);
+  }
+
+  return state;
 };
 //# sourceMappingURL=useButtonStyles.js.map