@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

package/lib-amd/components/Button/useButtonClasses.js

@@ -1,417 +0,0 @@
-define(["require", "exports", "tslib", "@fluentui/react-theme-provider", "@fluentui/style-utilities"], function (require, exports, tslib_1, react_theme_provider_1, style_utilities_1) {
-    "use strict";
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var GlobalClassNames = {
-        root: 'ms-Button',
-        icon: 'ms-Button-icon',
-    };
-    exports.ButtonSizeVariants = {
-        size_smallest: {
-            height: 'var(--button-size-smallest)',
-            minHeight: 'var(--button-size-smallest)',
-        },
-        size_smaller: {
-            height: 'var(--button-size-smaller)',
-            minHeight: 'var(--button-size-smaller)',
-        },
-        size_small: {
-            height: 'var(--button-size-small)',
-            minHeight: 'var(--button-size-small)',
-        },
-        size_large: {
-            height: 'var(--button-size-large)',
-            minHeight: 'var(--button-size-large)',
-        },
-        size_larger: {
-            height: 'var(--button-size-larger)',
-            minHeight: 'var(--button-size-larger)',
-        },
-        size_largest: {
-            height: 'var(--button-size-largest)',
-            minHeight: 'var(--button-size-largest)',
-        },
-    };
-    exports.useButtonClasses = react_theme_provider_1.makeVariantClasses({
-        name: 'Button',
-        prefix: '--button',
-        styles: {
-            root: [
-                GlobalClassNames.root,
-                (_a = {
-                        cursor: 'pointer',
-                        alignItems: 'center',
-                        borderStyle: 'solid',
-                        display: 'inline-flex',
-                        justifyContent: 'center',
-                        outline: 'none',
-                        position: 'relative',
-                        userSelect: 'none',
-                        boxSizing: 'border-box',
-                        verticalAlign: 'middle',
-                        textDecoration: 'none',
-                        background: 'var(--button-background)',
-                        color: 'var(--button-contentColor)',
-                        borderColor: 'var(--button-borderColor)',
-                        borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',
-                        borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',
-                        borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',
-                        borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',
-                        borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',
-                        borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',
-                        borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',
-                        borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',
-                        boxShadow: 'var(--button-boxShadow)',
-                        width: 'var(--button-width)',
-                        maxWidth: 'var(--button-maxWidth)',
-                        minWidth: 'var(--button-minWidth)',
-                        height: 'var(--button-height)',
-                        minHeight: 'var(--button-minHeight)',
-                        paddingLeft: 'var(--button-paddingLeft)',
-                        paddingRight: 'var(--button-paddingRight)',
-                        paddingTop: 'var(--button-paddingTop)',
-                        paddingBottom: 'var(--button-paddingBottom)',
-                        transition: 'var(--button-transition)',
-                        whiteSpace: 'var(--button-whiteSpace)',
-                        fontFamily: 'var(--button-fontFamily)',
-                        fontSize: 'var(--button-fontSize)',
-                        fontWeight: 'var(--button-fontWeight)',
-                        WebkitFontSmoothing: 'antialiased',
-                        MozOsxFontSmoothing: 'grayscale',
-                        ':global(.ms-Fabric--isFocusVisible) &:focus::after': (_b = {
-                                content: '""',
-                                position: 'absolute',
-                                left: -1,
-                                right: -1,
-                                top: -1,
-                                bottom: -1,
-                                borderWidth: 'var(--button-focusWidth, 2px)',
-                                borderStyle: 'solid',
-                                borderColor: 'var(--button-focusColor, black)',
-                                borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',
-                                borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',
-                                borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',
-                                borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',
-                                boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',
-                                zIndex: 1
-                            },
-                            _b[style_utilities_1.EdgeChromiumHighContrastSelector] = {
-                                borderColor: 'var(--button-highContrast-focusColor)',
-                                boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',
-                            },
-                            _b)
-                    },
-                    _a['& > *:not(:first-child)'] = {
-                        marginLeft: 'var(--button-contentGap)',
-                    },
-                    _a[style_utilities_1.EdgeChromiumHighContrastSelector] = (_c = {
-                            forcedColorAdjust: 'var(--button-forcedColorAdjust)',
-                            background: 'var(--button-highContrast-background)',
-                            borderColor: 'var(--button-highContrast-borderColor)',
-                            color: 'var(--button-highContrast-contentColor)'
-                        },
-                        _c["." + GlobalClassNames.icon] = {
-                            color: 'var(--button-highContrast-iconColor)',
-                        },
-                        _c),
-                    _a['&:hover'] = (_d = {
-                            background: 'var(--button-hovered-background, var(--button-background))',
-                            color: 'var(--button-hovered-contentColor, var(--button-contentColor))',
-                            borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',
-                            boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))'
-                        },
-                        _d["." + GlobalClassNames.icon] = {
-                            color: 'var(--button-hovered-iconColor, var(--button-iconColor))',
-                        },
-                        _d[style_utilities_1.EdgeChromiumHighContrastSelector] = (_e = {
-                                background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',
-                                borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',
-                                color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))'
-                            },
-                            _e["." + GlobalClassNames.icon] = {
-                                color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',
-                            },
-                            _e),
-                        _d),
-                    _a['&:active'] = (_f = {
-                            background: 'var(--button-pressed-background, var(--button-hovered-background))',
-                            color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',
-                            borderColor: 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',
-                            boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',
-                            transform: 'var(--button-pressed-transform)',
-                            transition: 'var(--button-pressed-transition)'
-                        },
-                        _f["." + GlobalClassNames.icon] = {
-                            color: 'var(--button-pressed-iconColor, var(--button-iconColor))',
-                        },
-                        _f[style_utilities_1.EdgeChromiumHighContrastSelector] = (_g = {
-                                background: 'var(--button-highContrast-pressed-background, ' +
-                                    'var(--button-highContrast-hovered-background, ' +
-                                    'var(--button-highContrast-background)))',
-                                borderColor: 'var(--button-highContrast-pressed-borderColor, ' +
-                                    'var(--button-highContrast-hovered-borderColor, ' +
-                                    'var(--button-highContrast-borderColor)))',
-                                color: 'var(--button-highContrast-pressed-contentColor, ' +
-                                    'var(--button-highContrast-hovered-contentColor, ' +
-                                    'var(--button-highContarst-contentColor)))'
-                            },
-                            _g["." + GlobalClassNames.icon] = {
-                                color: 'var(--button-highContrast-pressed-iconColor, ' +
-                                    'var(--button-highContrast-hovered-iconColor, ' +
-                                    'var(--button-highContrast-iconColor)))',
-                            },
-                            _g),
-                        _f),
-                    _a['&[aria-disabled=true]'] = (_h = {
-                            pointerEvents: 'none',
-                            opacity: 'var(--button-disabled-opacity)',
-                            backgroundColor: 'var(--button-disabled-background)',
-                            color: 'var(--button-disabled-contentColor)',
-                            borderColor: 'var(--button-disabled-borderColor)',
-                            boxShadow: 'var(--button-disabled-boxShadow)'
-                        },
-                        _h["." + GlobalClassNames.icon] = {
-                            color: 'var(--button-disabled-iconColor)',
-                        },
-                        _h[style_utilities_1.EdgeChromiumHighContrastSelector] = (_j = {
-                                background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',
-                                borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',
-                                color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))'
-                            },
-                            _j["." + GlobalClassNames.icon] = {
-                                color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',
-                            },
-                            _j),
-                        _h),
-                    _a),
-            ],
-            icon: [
-                GlobalClassNames.icon,
-                {
-                    color: 'var(--button-iconColor)',
-                    display: 'flex',
-                    flexShrink: 0,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: 'var(--button-iconSize)',
-                    height: 'var(--button-iconSize)',
-                    fontSize: 'var(--button-iconSize, inherit)',
-                    fontWeight: 'normal',
-                    lineHeight: '1',
-                },
-            ],
-            content: {
-                lineHeight: '1',
-            },
-        },
-        variants: function (theme) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
-            var fonts = theme.fonts, effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;
-            return tslib_1.__assign({ root: {
-                    size: {
-                        smallest: '24px',
-                        smaller: '24px',
-                        small: '24px',
-                        regular: '32px',
-                        large: '40px',
-                        larger: '48px',
-                        largest: '64px',
-                    },
-                    // Sizing tokens
-                    iconSize: (_b = (_a = fonts) === null || _a === void 0 ? void 0 : _a.mediumPlus) === null || _b === void 0 ? void 0 : _b.fontSize,
-                    borderWidth: '1px',
-                    boxShadow: 'none',
-                    borderRadius: (_c = effects) === null || _c === void 0 ? void 0 : _c.roundedCorner2,
-                    paddingLeft: '20px',
-                    paddingRight: '20px',
-                    paddingTop: '0',
-                    paddingBottom: '0',
-                    margin: '0',
-                    width: 'auto',
-                    minWidth: '96px',
-                    maxWidth: '280px',
-                    minHeight: 'var(--button-size-regular)',
-                    contentGap: '8px',
-                    // Font tokens
-                    fontWeight: '600',
-                    fontSize: (_e = (_d = fonts) === null || _d === void 0 ? void 0 : _d.medium) === null || _e === void 0 ? void 0 : _e.fontSize,
-                    fontFamily: (_g = (_f = fonts) === null || _f === void 0 ? void 0 : _f.medium) === null || _g === void 0 ? void 0 : _g.fontFamily,
-                    // Color tokens
-                    focusColor: (_h = palette) === null || _h === void 0 ? void 0 : _h.black,
-                    focusInnerColor: (_j = palette) === null || _j === void 0 ? void 0 : _j.white,
-                    background: (_k = semanticColors) === null || _k === void 0 ? void 0 : _k.buttonBackground,
-                    borderColor: (_l = semanticColors) === null || _l === void 0 ? void 0 : _l.buttonBorder,
-                    contentColor: (_m = semanticColors) === null || _m === void 0 ? void 0 : _m.buttonText,
-                    iconColor: 'inherit',
-                    hovered: {
-                        background: (_o = semanticColors) === null || _o === void 0 ? void 0 : _o.buttonBackgroundHovered,
-                        contentColor: (_p = semanticColors) === null || _p === void 0 ? void 0 : _p.buttonTextHovered,
-                    },
-                    pressed: {
-                        background: (_q = semanticColors) === null || _q === void 0 ? void 0 : _q.buttonBackgroundPressed,
-                        contentColor: (_r = semanticColors) === null || _r === void 0 ? void 0 : _r.buttonTextPressed,
-                    },
-                    disabled: {
-                        background: (_s = semanticColors) === null || _s === void 0 ? void 0 : _s.buttonBackgroundDisabled,
-                        borderColor: (_t = semanticColors) === null || _t === void 0 ? void 0 : _t.buttonBorderDisabled,
-                        contentColor: (_u = semanticColors) === null || _u === void 0 ? void 0 : _u.buttonTextDisabled,
-                    },
-                    highContrast: {
-                        borderColor: 'WindowText',
-                        contentColor: 'WindowText',
-                        iconColor: 'WindowText',
-                        hovered: {
-                            borderColor: 'Highlight',
-                            contentColor: 'Highlight',
-                            iconColor: 'Highlight',
-                        },
-                        pressed: {
-                            borderColor: 'Highlight',
-                            contentColor: 'WindowText',
-                            iconColor: 'WindowText',
-                        },
-                        disabled: {
-                            background: 'Window',
-                            borderColor: 'GrayText',
-                            contentColor: 'GrayText',
-                            iconColor: 'GrayText',
-                        },
-                    },
-                }, circular: {
-                    borderRadius: '50000px',
-                }, block: {
-                    width: '100%',
-                    maxWidth: 'none',
-                }, iconOnly: {
-                    minWidth: 'var(--button-height)',
-                    width: 'var(--button-height, var(--button-minHeight))',
-                    paddingTop: '0',
-                    paddingBottom: '0',
-                    paddingLeft: '0',
-                    paddingRight: '0',
-                }, primary: {
-                    background: 'var(--color-brand-background)',
-                    borderColor: 'var(--color-brand-borderColor)',
-                    contentColor: 'var(--color-brand-contentColor)',
-                    iconColor: 'inherit',
-                    forcedColorAdjust: 'none',
-                    hovered: {
-                        background: 'var(--color-brand-hovered-background)',
-                        borderColor: 'var(--color-brand-hovered-borderColor)',
-                        contentColor: 'var(--color-brand-hovered-contentColor)',
-                    },
-                    pressed: {
-                        background: 'var(--color-brand-pressed-background)',
-                        borderColor: 'var(--color-brand-pressed-borderColor)',
-                        contentColor: 'var(--color-brand-pressed-contentColor)',
-                    },
-                    highContrast: {
-                        background: 'WindowText',
-                        borderColor: 'WindowText',
-                        contentColor: 'Window',
-                        focusColor: 'WindowText',
-                        focusInnerColor: 'Window',
-                        iconColor: 'Window',
-                        hovered: {
-                            background: 'Highlight',
-                            borderColor: 'Highlight',
-                            contentColor: 'Window',
-                            iconColor: 'Window',
-                        },
-                        pressed: {
-                            background: 'WindowText',
-                            borderColor: 'WindowText',
-                            contentColor: 'Window',
-                            iconColor: 'Window',
-                        },
-                        disabled: {
-                            background: 'Window',
-                            borderColor: 'GrayText',
-                            contentColor: 'GrayText',
-                            iconColor: 'GrayText',
-                        },
-                    },
-                }, 
-                // TODO: no references to palette.
-                ghost: {
-                    background: 'transparent',
-                    borderColor: 'transparent',
-                    contentColor: (_v = palette) === null || _v === void 0 ? void 0 : _v.neutralPrimary,
-                    fontWeight: 'normal',
-                    iconColor: (_w = palette) === null || _w === void 0 ? void 0 : _w.themeDarkAlt,
-                    forcedColorAdjust: 'none',
-                    disabled: {
-                        background: (_x = semanticColors) === null || _x === void 0 ? void 0 : _x.disabledBackground,
-                        contentColor: (_y = palette) === null || _y === void 0 ? void 0 : _y.neutralTertiary,
-                        iconColor: 'inherit',
-                    },
-                    expanded: {
-                        contentColor: (_z = palette) === null || _z === void 0 ? void 0 : _z.themePrimary,
-                    },
-                    focused: {
-                        contentColor: (_0 = palette) === null || _0 === void 0 ? void 0 : _0.neutralPrimary,
-                        iconColor: (_1 = palette) === null || _1 === void 0 ? void 0 : _1.themeDarkAlt,
-                    },
-                    hovered: {
-                        background: (_2 = palette) === null || _2 === void 0 ? void 0 : _2.neutralLighter,
-                        contentColor: (_3 = palette) === null || _3 === void 0 ? void 0 : _3.themePrimary,
-                        iconColor: (_4 = palette) === null || _4 === void 0 ? void 0 : _4.themePrimary,
-                    },
-                    pressed: {
-                        background: (_5 = palette) === null || _5 === void 0 ? void 0 : _5.neutralLight,
-                        contentColor: (_6 = palette) === null || _6 === void 0 ? void 0 : _6.black,
-                        iconColor: (_7 = palette) === null || _7 === void 0 ? void 0 : _7.themeDarker,
-                    },
-                    highContrast: {
-                        background: 'Window',
-                        borderColor: 'transparent',
-                        contentColor: 'WindowText',
-                        iconColor: 'WindowText',
-                        hovered: {
-                            background: 'Window',
-                            borderColor: 'transparent',
-                            contentColor: 'Highlight',
-                            iconColor: 'Highlight',
-                        },
-                        pressed: {
-                            background: 'Window',
-                            borderColor: 'transparent',
-                            contentColor: 'Highlight',
-                            iconColor: 'Highlight',
-                        },
-                        disabled: {
-                            background: 'Window',
-                            borderColor: 'transparent',
-                            contentColor: 'GrayText',
-                            iconColor: 'GrayText',
-                        },
-                    },
-                }, 
-                // TODO: no references to palette.
-                transparent: {
-                    background: 'transparent',
-                    borderColor: 'transparent',
-                    contentColor: (_8 = palette) === null || _8 === void 0 ? void 0 : _8.neutralPrimary,
-                    fontWeight: 'normal',
-                    iconColor: (_9 = palette) === null || _9 === void 0 ? void 0 : _9.themeDarkAlt,
-                    disabled: {
-                        background: 'transparent',
-                        borderColor: 'transparent',
-                        contentColor: palette.neutralTertiary,
-                        iconColor: 'inherit',
-                    },
-                    hovered: {
-                        background: 'transparent',
-                        contentColor: (_10 = palette) === null || _10 === void 0 ? void 0 : _10.themePrimary,
-                        iconColor: (_11 = palette) === null || _11 === void 0 ? void 0 : _11.themePrimary,
-                    },
-                    pressed: {
-                        background: 'transparent',
-                        contentColor: (_12 = palette) === null || _12 === void 0 ? void 0 : _12.black,
-                        iconColor: (_13 = palette) === null || _13 === void 0 ? void 0 : _13.themeDarker,
-                    },
-                } }, exports.ButtonSizeVariants);
-        },
-    });
-});
-//# sourceMappingURL=useButtonClasses.js.map

package/lib-amd/components/Button/useButtonClasses.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonClasses.js","sourceRoot":"../src/","sources":["components/Button/useButtonClasses.ts"],"names":[],"mappings":";;;;IAKA,IAAM,gBAAgB,GAAG;QACvB,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,gBAAgB;KACvB,CAAC;IAEW,QAAA,kBAAkB,GAAG;QAChC,aAAa,EAAE;YACb,MAAM,EAAE,6BAA6B;YACrC,SAAS,EAAE,6BAA6B;SACzC;QAED,YAAY,EAAE;YACZ,MAAM,EAAE,4BAA4B;YACpC,SAAS,EAAE,4BAA4B;SACxC;QAED,UAAU,EAAE;YACV,MAAM,EAAE,0BAA0B;YAClC,SAAS,EAAE,0BAA0B;SACtC;QAED,UAAU,EAAE;YACV,MAAM,EAAE,0BAA0B;YAClC,SAAS,EAAE,0BAA0B;SACtC;QAED,WAAW,EAAE;YACX,MAAM,EAAE,2BAA2B;YACnC,SAAS,EAAE,2BAA2B;SACvC;QAED,YAAY,EAAE;YACZ,MAAM,EAAE,4BAA4B;YACpC,SAAS,EAAE,4BAA4B;SACxC;KACF,CAAC;IAEW,QAAA,gBAAgB,GAAG,yCAAkB,CAA8B;QAC9E,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,UAAU;QAElB,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,gBAAgB,CAAC,IAAI;;wBAEnB,MAAM,EAAE,SAAS;wBACjB,UAAU,EAAE,QAAQ;wBACpB,WAAW,EAAE,OAAO;wBACpB,OAAO,EAAE,aAAa;wBACtB,cAAc,EAAE,QAAQ;wBACxB,OAAO,EAAE,MAAM;wBACf,QAAQ,EAAE,UAAU;wBACpB,UAAU,EAAE,MAAM;wBAClB,SAAS,EAAE,YAAY;wBACvB,aAAa,EAAE,QAAQ;wBACvB,cAAc,EAAE,MAAM;wBACtB,UAAU,EAAE,0BAA0B;wBACtC,KAAK,EAAE,4BAA4B;wBAEnC,WAAW,EAAE,2BAA2B;wBACxC,mBAAmB,EAAE,+DAA+D;wBACpF,oBAAoB,EAAE,gEAAgE;wBACtF,sBAAsB,EAAE,kEAAkE;wBAC1F,uBAAuB,EAAE,mEAAmE;wBAC5F,eAAe,EAAE,0DAA0D;wBAC3E,gBAAgB,EAAE,2DAA2D;wBAC7E,cAAc,EAAE,yDAAyD;wBACzE,iBAAiB,EAAE,4DAA4D;wBAC/E,SAAS,EAAE,yBAAyB;wBAEpC,KAAK,EAAE,qBAAqB;wBAC5B,QAAQ,EAAE,wBAAwB;wBAClC,QAAQ,EAAE,wBAAwB;wBAClC,MAAM,EAAE,sBAAsB;wBAC9B,SAAS,EAAE,yBAAyB;wBAEpC,WAAW,EAAE,2BAA2B;wBACxC,YAAY,EAAE,4BAA4B;wBAC1C,UAAU,EAAE,0BAA0B;wBACtC,aAAa,EAAE,6BAA6B;wBAE5C,UAAU,EAAE,0BAA0B;wBACtC,UAAU,EAAE,0BAA0B;wBAEtC,UAAU,EAAE,0BAA0B;wBACtC,QAAQ,EAAE,wBAAwB;wBAClC,UAAU,EAAE,0BAA0B;wBACtC,mBAAmB,EAAE,aAAa;wBAClC,mBAAmB,EAAE,WAAW;wBAEhC,oDAAoD;gCAClD,OAAO,EAAE,IAAI;gCACb,QAAQ,EAAE,UAAU;gCACpB,IAAI,EAAE,CAAC,CAAC;gCACR,KAAK,EAAE,CAAC,CAAC;gCACT,GAAG,EAAE,CAAC,CAAC;gCACP,MAAM,EAAE,CAAC,CAAC;gCACV,WAAW,EAAE,+BAA+B;gCAC5C,WAAW,EAAE,OAAO;gCACpB,WAAW,EAAE,iCAAiC;gCAC9C,mBAAmB,EAAE,+DAA+D;gCACpF,oBAAoB,EAAE,gEAAgE;gCACtF,sBAAsB,EAAE,kEAAkE;gCAC1F,uBAAuB,EAAE,mEAAmE;gCAC5F,SAAS,EAAE,qFAAqF;gCAChG,MAAM,EAAE,CAAC;;4BAET,GAAC,kDAAgC,IAAG;gCAClC,WAAW,EAAE,uCAAuC;gCACpD,SAAS,EAAE,2FAA2F;6BACvG;+BACF;;oBAED,GAAC,yBAAyB,IAAG;wBAC3B,UAAU,EAAE,0BAA0B;qBACvC;oBAED,GAAC,kDAAgC;4BAC/B,iBAAiB,EAAE,iCAAiC;4BAEpD,UAAU,EAAE,uCAAuC;4BACnD,WAAW,EAAE,wCAAwC;4BACrD,KAAK,EAAE,yCAAyC;;wBAEhD,GAAC,MAAI,gBAAgB,CAAC,IAAM,IAAG;4BAC7B,KAAK,EAAE,sCAAsC;yBAC9C;2BACF;oBAED,aAAS;4BACP,UAAU,EAAE,4DAA4D;4BACxE,KAAK,EAAE,gEAAgE;4BACvE,WAAW,EAAE,8DAA8D;4BAC3E,SAAS,EAAE,0DAA0D;;wBAErE,GAAC,MAAI,gBAAgB,CAAC,IAAM,IAAG;4BAC7B,KAAK,EAAE,0DAA0D;yBAClE;wBAED,GAAC,kDAAgC;gCAC/B,UAAU,EAAE,sFAAsF;gCAClG,WAAW,EAAE,wFAAwF;gCACrG,KAAK,EAAE,0FAA0F;;4BACjG,GAAC,MAAI,gBAAgB,CAAC,IAAM,IAAG;gCAC7B,KAAK,EAAE,+EAA+E;6BACvF;+BACF;2BACF;oBAED,cAAU;4BACR,UAAU,EAAE,oEAAoE;4BAChF,KAAK,EAAE,oGAAoG;4BAC3G,WAAW,EACT,iGAAiG;4BACnG,SAAS,EAAE,2FAA2F;4BAEtG,SAAS,EAAE,iCAAiC;4BAC5C,UAAU,EAAE,kCAAkC;;wBAE9C,GAAC,MAAI,gBAAgB,CAAC,IAAM,IAAG;4BAC7B,KAAK,EAAE,0DAA0D;yBAClE;wBAED,GAAC,kDAAgC;gCAC/B,UAAU,EACR,gDAAgD;oCAChD,gDAAgD;oCAChD,yCAAyC;gCAC3C,WAAW,EACT,iDAAiD;oCACjD,iDAAiD;oCACjD,0CAA0C;gCAC5C,KAAK,EACH,kDAAkD;oCAClD,kDAAkD;oCAClD,2CAA2C;;4BAC7C,GAAC,MAAI,gBAAgB,CAAC,IAAM,IAAG;gCAC7B,KAAK,EACH,+CAA+C;oCAC/C,+CAA+C;oCAC/C,wCAAwC;6BAC3C;+BACF;2BACF;oBAED,2BAAuB;4BACrB,aAAa,EAAE,MAAM;4BACrB,OAAO,EAAE,gCAAgC;4BACzC,eAAe,EAAE,mCAAmC;4BACpD,KAAK,EAAE,qCAAqC;4BAC5C,WAAW,EAAE,oCAAoC;4BACjD,SAAS,EAAE,kCAAkC;;wBAE7C,GAAC,MAAI,gBAAgB,CAAC,IAAM,IAAG;4BAC7B,KAAK,EAAE,kCAAkC;yBAC1C;wBAED,GAAC,kDAAgC;gCAC/B,UAAU,EAAE,uFAAuF;gCACnG,WAAW,EAAE,yFAAyF;gCACtG,KAAK,EAAE,2FAA2F;;4BAClG,GAAC,MAAI,gBAAgB,CAAC,IAAM,IAAG;gCAC7B,KAAK,EAAE,gFAAgF;6BACxF;+BACF;2BACF;;aAEJ;YAED,IAAI,EAAE;gBACJ,gBAAgB,CAAC,IAAI;gBACrB;oBACE,KAAK,EAAE,yBAAyB;oBAChC,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,CAAC;oBACb,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,KAAK,EAAE,wBAAwB;oBAC/B,MAAM,EAAE,wBAAwB;oBAChC,QAAQ,EAAE,iCAAiC;oBAC3C,UAAU,EAAE,QAAQ;oBACpB,UAAU,EAAE,GAAG;iBAChB;aACF;YAED,OAAO,EAAE;gBACP,UAAU,EAAE,GAAG;aAChB;SACF;QAED,QAAQ,EAAE,UAAC,KAAY;;YACb,IAAA,mBAAK,EAAE,uBAAO,EAAE,uBAAO,EAAE,qCAAc,CAAW;YAE1D,0BACE,IAAI,EAAE;oBACJ,IAAI,EAAE;wBACJ,QAAQ,EAAE,MAAM;wBAChB,OAAO,EAAE,MAAM;wBACf,KAAK,EAAE,MAAM;wBACb,OAAO,EAAE,MAAM;wBACf,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,OAAO,EAAE,MAAM;qBAChB;oBAED,gBAAgB;oBAChB,QAAQ,EAAE,YAAA,KAAK,0CAAE,UAAU,0CAAE,QAAkB;oBAC/C,WAAW,EAAE,KAAK;oBAClB,SAAS,EAAE,MAAM;oBACjB,YAAY,QAAE,OAAO,0CAAE,cAAc;oBACrC,WAAW,EAAE,MAAM;oBACnB,YAAY,EAAE,MAAM;oBACpB,UAAU,EAAE,GAAG;oBACf,aAAa,EAAE,GAAG;oBAClB,MAAM,EAAE,GAAG;oBACX,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,MAAM;oBAChB,QAAQ,EAAE,OAAO;oBACjB,SAAS,EAAE,4BAA4B;oBACvC,UAAU,EAAE,KAAK;oBAEjB,cAAc;oBACd,UAAU,EAAE,KAAK;oBACjB,QAAQ,EAAE,YAAA,KAAK,0CAAE,MAAM,0CAAE,QAAkB;oBAC3C,UAAU,cAAE,KAAK,0CAAE,MAAM,0CAAE,UAAU;oBAErC,eAAe;oBACf,UAAU,QAAE,OAAO,0CAAE,KAAK;oBAC1B,eAAe,QAAE,OAAO,0CAAE,KAAK;oBAC/B,UAAU,QAAE,cAAc,0CAAE,gBAAgB;oBAC5C,WAAW,QAAE,cAAc,0CAAE,YAAY;oBACzC,YAAY,QAAE,cAAc,0CAAE,UAAU;oBACxC,SAAS,EAAE,SAAS;oBAEpB,OAAO,EAAE;wBACP,UAAU,QAAE,cAAc,0CAAE,uBAAuB;wBACnD,YAAY,QAAE,cAAc,0CAAE,iBAAiB;qBAChD;oBAED,OAAO,EAAE;wBACP,UAAU,QAAE,cAAc,0CAAE,uBAAuB;wBACnD,YAAY,QAAE,cAAc,0CAAE,iBAAiB;qBAChD;oBAED,QAAQ,EAAE;wBACR,UAAU,QAAE,cAAc,0CAAE,wBAAwB;wBACpD,WAAW,QAAE,cAAc,0CAAE,oBAAoB;wBACjD,YAAY,QAAE,cAAc,0CAAE,kBAAkB;qBACjD;oBAED,YAAY,EAAE;wBACZ,WAAW,EAAE,YAAY;wBACzB,YAAY,EAAE,YAAY;wBAC1B,SAAS,EAAE,YAAY;wBAEvB,OAAO,EAAE;4BACP,WAAW,EAAE,WAAW;4BACxB,YAAY,EAAE,WAAW;4BACzB,SAAS,EAAE,WAAW;yBACvB;wBAED,OAAO,EAAE;4BACP,WAAW,EAAE,WAAW;4BACxB,YAAY,EAAE,YAAY;4BAC1B,SAAS,EAAE,YAAY;yBACxB;wBAED,QAAQ,EAAE;4BACR,UAAU,EAAE,QAAQ;4BACpB,WAAW,EAAE,UAAU;4BACvB,YAAY,EAAE,UAAU;4BACxB,SAAS,EAAE,UAAU;yBACtB;qBACF;iBACF,EAED,QAAQ,EAAE;oBACR,YAAY,EAAE,SAAS;iBACxB,EAED,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,MAAM;iBACjB,EAED,QAAQ,EAAE;oBACR,QAAQ,EAAE,sBAAsB;oBAChC,KAAK,EAAE,+CAA+C;oBACtD,UAAU,EAAE,GAAG;oBACf,aAAa,EAAE,GAAG;oBAClB,WAAW,EAAE,GAAG;oBAChB,YAAY,EAAE,GAAG;iBAClB,EAED,OAAO,EAAE;oBACP,UAAU,EAAE,+BAA+B;oBAC3C,WAAW,EAAE,gCAAgC;oBAC7C,YAAY,EAAE,iCAAiC;oBAC/C,SAAS,EAAE,SAAS;oBACpB,iBAAiB,EAAE,MAAM;oBAEzB,OAAO,EAAE;wBACP,UAAU,EAAE,uCAAuC;wBACnD,WAAW,EAAE,wCAAwC;wBACrD,YAAY,EAAE,yCAAyC;qBACxD;oBAED,OAAO,EAAE;wBACP,UAAU,EAAE,uCAAuC;wBACnD,WAAW,EAAE,wCAAwC;wBACrD,YAAY,EAAE,yCAAyC;qBACxD;oBAED,YAAY,EAAE;wBACZ,UAAU,EAAE,YAAY;wBACxB,WAAW,EAAE,YAAY;wBACzB,YAAY,EAAE,QAAQ;wBACtB,UAAU,EAAE,YAAY;wBACxB,eAAe,EAAE,QAAQ;wBACzB,SAAS,EAAE,QAAQ;wBAEnB,OAAO,EAAE;4BACP,UAAU,EAAE,WAAW;4BACvB,WAAW,EAAE,WAAW;4BACxB,YAAY,EAAE,QAAQ;4BACtB,SAAS,EAAE,QAAQ;yBACpB;wBAED,OAAO,EAAE;4BACP,UAAU,EAAE,YAAY;4BACxB,WAAW,EAAE,YAAY;4BACzB,YAAY,EAAE,QAAQ;4BACtB,SAAS,EAAE,QAAQ;yBACpB;wBAED,QAAQ,EAAE;4BACR,UAAU,EAAE,QAAQ;4BACpB,WAAW,EAAE,UAAU;4BACvB,YAAY,EAAE,UAAU;4BACxB,SAAS,EAAE,UAAU;yBACtB;qBACF;iBACF;gBAED,kCAAkC;gBAClC,KAAK,EAAE;oBACL,UAAU,EAAE,aAAa;oBACzB,WAAW,EAAE,aAAa;oBAC1B,YAAY,QAAE,OAAO,0CAAE,cAAc;oBACrC,UAAU,EAAE,QAAQ;oBACpB,SAAS,QAAE,OAAO,0CAAE,YAAY;oBAChC,iBAAiB,EAAE,MAAM;oBAEzB,QAAQ,EAAE;wBACR,UAAU,QAAE,cAAc,0CAAE,kBAAkB;wBAC9C,YAAY,QAAE,OAAO,0CAAE,eAAe;wBACtC,SAAS,EAAE,SAAS;qBACrB;oBAED,QAAQ,EAAE;wBACR,YAAY,QAAE,OAAO,0CAAE,YAAY;qBACpC;oBAED,OAAO,EAAE;wBACP,YAAY,QAAE,OAAO,0CAAE,cAAc;wBACrC,SAAS,QAAE,OAAO,0CAAE,YAAY;qBACjC;oBAED,OAAO,EAAE;wBACP,UAAU,QAAE,OAAO,0CAAE,cAAc;wBACnC,YAAY,QAAE,OAAO,0CAAE,YAAY;wBACnC,SAAS,QAAE,OAAO,0CAAE,YAAY;qBACjC;oBAED,OAAO,EAAE;wBACP,UAAU,QAAE,OAAO,0CAAE,YAAY;wBACjC,YAAY,QAAE,OAAO,0CAAE,KAAK;wBAC5B,SAAS,QAAE,OAAO,0CAAE,WAAW;qBAChC;oBAED,YAAY,EAAE;wBACZ,UAAU,EAAE,QAAQ;wBACpB,WAAW,EAAE,aAAa;wBAC1B,YAAY,EAAE,YAAY;wBAC1B,SAAS,EAAE,YAAY;wBAEvB,OAAO,EAAE;4BACP,UAAU,EAAE,QAAQ;4BACpB,WAAW,EAAE,aAAa;4BAC1B,YAAY,EAAE,WAAW;4BACzB,SAAS,EAAE,WAAW;yBACvB;wBAED,OAAO,EAAE;4BACP,UAAU,EAAE,QAAQ;4BACpB,WAAW,EAAE,aAAa;4BAC1B,YAAY,EAAE,WAAW;4BACzB,SAAS,EAAE,WAAW;yBACvB;wBAED,QAAQ,EAAE;4BACR,UAAU,EAAE,QAAQ;4BACpB,WAAW,EAAE,aAAa;4BAC1B,YAAY,EAAE,UAAU;4BACxB,SAAS,EAAE,UAAU;yBACtB;qBACF;iBACF;gBAED,kCAAkC;gBAClC,WAAW,EAAE;oBACX,UAAU,EAAE,aAAa;oBACzB,WAAW,EAAE,aAAa;oBAC1B,YAAY,QAAE,OAAO,0CAAE,cAAc;oBACrC,UAAU,EAAE,QAAQ;oBACpB,SAAS,QAAE,OAAO,0CAAE,YAAY;oBAEhC,QAAQ,EAAE;wBACR,UAAU,EAAE,aAAa;wBACzB,WAAW,EAAE,aAAa;wBAC1B,YAAY,EAAE,OAAO,CAAC,eAAe;wBACrC,SAAS,EAAE,SAAS;qBACrB;oBAED,OAAO,EAAE;wBACP,UAAU,EAAE,aAAa;wBACzB,YAAY,SAAE,OAAO,4CAAE,YAAY;wBACnC,SAAS,SAAE,OAAO,4CAAE,YAAY;qBACjC;oBAED,OAAO,EAAE;wBACP,UAAU,EAAE,aAAa;wBACzB,YAAY,SAAE,OAAO,4CAAE,KAAK;wBAC5B,SAAS,SAAE,OAAO,4CAAE,WAAW;qBAChC;iBACF,IAEE,0BAAkB,EACrB;QACJ,CAAC;KACF,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';\nimport { ButtonState, ButtonVariants } from './Button.types';\n\nconst GlobalClassNames = {\n  root: 'ms-Button',\n  icon: 'ms-Button-icon',\n};\n\nexport const ButtonSizeVariants = {\n  size_smallest: {\n    height: 'var(--button-size-smallest)',\n    minHeight: 'var(--button-size-smallest)',\n  },\n\n  size_smaller: {\n    height: 'var(--button-size-smaller)',\n    minHeight: 'var(--button-size-smaller)',\n  },\n\n  size_small: {\n    height: 'var(--button-size-small)',\n    minHeight: 'var(--button-size-small)',\n  },\n\n  size_large: {\n    height: 'var(--button-size-large)',\n    minHeight: 'var(--button-size-large)',\n  },\n\n  size_larger: {\n    height: 'var(--button-size-larger)',\n    minHeight: 'var(--button-size-larger)',\n  },\n\n  size_largest: {\n    height: 'var(--button-size-largest)',\n    minHeight: 'var(--button-size-largest)',\n  },\n};\n\nexport const useButtonClasses = makeVariantClasses<ButtonState, ButtonVariants>({\n  name: 'Button',\n  prefix: '--button',\n\n  styles: {\n    root: [\n      GlobalClassNames.root,\n      {\n        cursor: 'pointer',\n        alignItems: 'center',\n        borderStyle: 'solid',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        outline: 'none',\n        position: 'relative',\n        userSelect: 'none',\n        boxSizing: 'border-box',\n        verticalAlign: 'middle',\n        textDecoration: 'none',\n        background: 'var(--button-background)',\n        color: 'var(--button-contentColor)',\n\n        borderColor: 'var(--button-borderColor)',\n        borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n        borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n        borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n        borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n        borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',\n        borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',\n        borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',\n        borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',\n        boxShadow: 'var(--button-boxShadow)',\n\n        width: 'var(--button-width)',\n        maxWidth: 'var(--button-maxWidth)',\n        minWidth: 'var(--button-minWidth)',\n        height: 'var(--button-height)',\n        minHeight: 'var(--button-minHeight)',\n\n        paddingLeft: 'var(--button-paddingLeft)',\n        paddingRight: 'var(--button-paddingRight)',\n        paddingTop: 'var(--button-paddingTop)',\n        paddingBottom: 'var(--button-paddingBottom)',\n\n        transition: 'var(--button-transition)',\n        whiteSpace: 'var(--button-whiteSpace)',\n\n        fontFamily: 'var(--button-fontFamily)',\n        fontSize: 'var(--button-fontSize)',\n        fontWeight: 'var(--button-fontWeight)',\n        WebkitFontSmoothing: 'antialiased',\n        MozOsxFontSmoothing: 'grayscale',\n\n        ':global(.ms-Fabric--isFocusVisible) &:focus::after': {\n          content: '\"\"',\n          position: 'absolute',\n          left: -1,\n          right: -1,\n          top: -1,\n          bottom: -1,\n          borderWidth: 'var(--button-focusWidth, 2px)',\n          borderStyle: 'solid',\n          borderColor: 'var(--button-focusColor, black)',\n          borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n          borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n          borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n          borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n          boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',\n          zIndex: 1,\n\n          [EdgeChromiumHighContrastSelector]: {\n            borderColor: 'var(--button-highContrast-focusColor)',\n            boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',\n          },\n        },\n\n        ['& > *:not(:first-child)']: {\n          marginLeft: 'var(--button-contentGap)',\n        },\n\n        [EdgeChromiumHighContrastSelector]: {\n          forcedColorAdjust: 'var(--button-forcedColorAdjust)',\n\n          background: 'var(--button-highContrast-background)',\n          borderColor: 'var(--button-highContrast-borderColor)',\n          color: 'var(--button-highContrast-contentColor)',\n\n          [`.${GlobalClassNames.icon}`]: {\n            color: 'var(--button-highContrast-iconColor)',\n          },\n        },\n\n        '&:hover': {\n          background: 'var(--button-hovered-background, var(--button-background))',\n          color: 'var(--button-hovered-contentColor, var(--button-contentColor))',\n          borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',\n          boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))',\n\n          [`.${GlobalClassNames.icon}`]: {\n            color: 'var(--button-hovered-iconColor, var(--button-iconColor))',\n          },\n\n          [EdgeChromiumHighContrastSelector]: {\n            background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',\n            borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',\n            color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))',\n            [`.${GlobalClassNames.icon}`]: {\n              color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',\n            },\n          },\n        },\n\n        '&:active': {\n          background: 'var(--button-pressed-background, var(--button-hovered-background))',\n          color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',\n          borderColor:\n            'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',\n          boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',\n\n          transform: 'var(--button-pressed-transform)',\n          transition: 'var(--button-pressed-transition)',\n\n          [`.${GlobalClassNames.icon}`]: {\n            color: 'var(--button-pressed-iconColor, var(--button-iconColor))',\n          },\n\n          [EdgeChromiumHighContrastSelector]: {\n            background:\n              'var(--button-highContrast-pressed-background, ' +\n              'var(--button-highContrast-hovered-background, ' +\n              'var(--button-highContrast-background)))',\n            borderColor:\n              'var(--button-highContrast-pressed-borderColor, ' +\n              'var(--button-highContrast-hovered-borderColor, ' +\n              'var(--button-highContrast-borderColor)))',\n            color:\n              'var(--button-highContrast-pressed-contentColor, ' +\n              'var(--button-highContrast-hovered-contentColor, ' +\n              'var(--button-highContarst-contentColor)))',\n            [`.${GlobalClassNames.icon}`]: {\n              color:\n                'var(--button-highContrast-pressed-iconColor, ' +\n                'var(--button-highContrast-hovered-iconColor, ' +\n                'var(--button-highContrast-iconColor)))',\n            },\n          },\n        },\n\n        '&[aria-disabled=true]': {\n          pointerEvents: 'none',\n          opacity: 'var(--button-disabled-opacity)',\n          backgroundColor: 'var(--button-disabled-background)',\n          color: 'var(--button-disabled-contentColor)',\n          borderColor: 'var(--button-disabled-borderColor)',\n          boxShadow: 'var(--button-disabled-boxShadow)',\n\n          [`.${GlobalClassNames.icon}`]: {\n            color: 'var(--button-disabled-iconColor)',\n          },\n\n          [EdgeChromiumHighContrastSelector]: {\n            background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',\n            borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',\n            color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))',\n            [`.${GlobalClassNames.icon}`]: {\n              color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',\n            },\n          },\n        },\n      },\n    ],\n\n    icon: [\n      GlobalClassNames.icon,\n      {\n        color: 'var(--button-iconColor)',\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: 'var(--button-iconSize)',\n        height: 'var(--button-iconSize)',\n        fontSize: 'var(--button-iconSize, inherit)',\n        fontWeight: 'normal',\n        lineHeight: '1',\n      },\n    ],\n\n    content: {\n      lineHeight: '1',\n    },\n  },\n\n  variants: (theme: Theme): ButtonVariants => {\n    const { fonts, effects, palette, semanticColors } = theme;\n\n    return {\n      root: {\n        size: {\n          smallest: '24px',\n          smaller: '24px',\n          small: '24px',\n          regular: '32px',\n          large: '40px',\n          larger: '48px',\n          largest: '64px',\n        },\n\n        // Sizing tokens\n        iconSize: fonts?.mediumPlus?.fontSize as string,\n        borderWidth: '1px',\n        boxShadow: 'none',\n        borderRadius: effects?.roundedCorner2,\n        paddingLeft: '20px',\n        paddingRight: '20px',\n        paddingTop: '0',\n        paddingBottom: '0',\n        margin: '0',\n        width: 'auto',\n        minWidth: '96px',\n        maxWidth: '280px',\n        minHeight: 'var(--button-size-regular)',\n        contentGap: '8px',\n\n        // Font tokens\n        fontWeight: '600',\n        fontSize: fonts?.medium?.fontSize as string,\n        fontFamily: fonts?.medium?.fontFamily,\n\n        // Color tokens\n        focusColor: palette?.black,\n        focusInnerColor: palette?.white,\n        background: semanticColors?.buttonBackground,\n        borderColor: semanticColors?.buttonBorder,\n        contentColor: semanticColors?.buttonText,\n        iconColor: 'inherit',\n\n        hovered: {\n          background: semanticColors?.buttonBackgroundHovered,\n          contentColor: semanticColors?.buttonTextHovered,\n        },\n\n        pressed: {\n          background: semanticColors?.buttonBackgroundPressed,\n          contentColor: semanticColors?.buttonTextPressed,\n        },\n\n        disabled: {\n          background: semanticColors?.buttonBackgroundDisabled,\n          borderColor: semanticColors?.buttonBorderDisabled,\n          contentColor: semanticColors?.buttonTextDisabled,\n        },\n\n        highContrast: {\n          borderColor: 'WindowText',\n          contentColor: 'WindowText',\n          iconColor: 'WindowText',\n\n          hovered: {\n            borderColor: 'Highlight',\n            contentColor: 'Highlight',\n            iconColor: 'Highlight',\n          },\n\n          pressed: {\n            borderColor: 'Highlight',\n            contentColor: 'WindowText',\n            iconColor: 'WindowText',\n          },\n\n          disabled: {\n            background: 'Window',\n            borderColor: 'GrayText',\n            contentColor: 'GrayText',\n            iconColor: 'GrayText',\n          },\n        },\n      },\n\n      circular: {\n        borderRadius: '50000px',\n      },\n\n      block: {\n        width: '100%',\n        maxWidth: 'none',\n      },\n\n      iconOnly: {\n        minWidth: 'var(--button-height)',\n        width: 'var(--button-height, var(--button-minHeight))',\n        paddingTop: '0',\n        paddingBottom: '0',\n        paddingLeft: '0',\n        paddingRight: '0',\n      },\n\n      primary: {\n        background: 'var(--color-brand-background)',\n        borderColor: 'var(--color-brand-borderColor)',\n        contentColor: 'var(--color-brand-contentColor)',\n        iconColor: 'inherit',\n        forcedColorAdjust: 'none',\n\n        hovered: {\n          background: 'var(--color-brand-hovered-background)',\n          borderColor: 'var(--color-brand-hovered-borderColor)',\n          contentColor: 'var(--color-brand-hovered-contentColor)',\n        },\n\n        pressed: {\n          background: 'var(--color-brand-pressed-background)',\n          borderColor: 'var(--color-brand-pressed-borderColor)',\n          contentColor: 'var(--color-brand-pressed-contentColor)',\n        },\n\n        highContrast: {\n          background: 'WindowText',\n          borderColor: 'WindowText',\n          contentColor: 'Window',\n          focusColor: 'WindowText',\n          focusInnerColor: 'Window',\n          iconColor: 'Window',\n\n          hovered: {\n            background: 'Highlight',\n            borderColor: 'Highlight',\n            contentColor: 'Window',\n            iconColor: 'Window',\n          },\n\n          pressed: {\n            background: 'WindowText',\n            borderColor: 'WindowText',\n            contentColor: 'Window',\n            iconColor: 'Window',\n          },\n\n          disabled: {\n            background: 'Window',\n            borderColor: 'GrayText',\n            contentColor: 'GrayText',\n            iconColor: 'GrayText',\n          },\n        },\n      },\n\n      // TODO: no references to palette.\n      ghost: {\n        background: 'transparent',\n        borderColor: 'transparent',\n        contentColor: palette?.neutralPrimary,\n        fontWeight: 'normal',\n        iconColor: palette?.themeDarkAlt,\n        forcedColorAdjust: 'none',\n\n        disabled: {\n          background: semanticColors?.disabledBackground,\n          contentColor: palette?.neutralTertiary,\n          iconColor: 'inherit',\n        },\n\n        expanded: {\n          contentColor: palette?.themePrimary,\n        },\n\n        focused: {\n          contentColor: palette?.neutralPrimary,\n          iconColor: palette?.themeDarkAlt,\n        },\n\n        hovered: {\n          background: palette?.neutralLighter,\n          contentColor: palette?.themePrimary,\n          iconColor: palette?.themePrimary,\n        },\n\n        pressed: {\n          background: palette?.neutralLight,\n          contentColor: palette?.black,\n          iconColor: palette?.themeDarker,\n        },\n\n        highContrast: {\n          background: 'Window',\n          borderColor: 'transparent',\n          contentColor: 'WindowText',\n          iconColor: 'WindowText',\n\n          hovered: {\n            background: 'Window',\n            borderColor: 'transparent',\n            contentColor: 'Highlight',\n            iconColor: 'Highlight',\n          },\n\n          pressed: {\n            background: 'Window',\n            borderColor: 'transparent',\n            contentColor: 'Highlight',\n            iconColor: 'Highlight',\n          },\n\n          disabled: {\n            background: 'Window',\n            borderColor: 'transparent',\n            contentColor: 'GrayText',\n            iconColor: 'GrayText',\n          },\n        },\n      },\n\n      // TODO: no references to palette.\n      transparent: {\n        background: 'transparent',\n        borderColor: 'transparent',\n        contentColor: palette?.neutralPrimary,\n        fontWeight: 'normal',\n        iconColor: palette?.themeDarkAlt,\n\n        disabled: {\n          background: 'transparent',\n          borderColor: 'transparent',\n          contentColor: palette.neutralTertiary,\n          iconColor: 'inherit',\n        },\n\n        hovered: {\n          background: 'transparent',\n          contentColor: palette?.themePrimary,\n          iconColor: palette?.themePrimary,\n        },\n\n        pressed: {\n          background: 'transparent',\n          contentColor: palette?.black,\n          iconColor: palette?.themeDarker,\n        },\n      },\n\n      ...ButtonSizeVariants,\n    };\n  },\n});\n"]}

package/lib-amd/components/Button/useButtonState.d.ts

@@ -1,6 +0,0 @@
-import { ButtonState } from './Button.types';
-/**
- * The useButton hook processes the Button draft state.
- * @param draftState - Button draft state to mutate.
- */
-export declare const useButtonState: (draftState: ButtonState) => void;

package/lib-amd/components/Button/useButtonState.js

@@ -1,32 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * The useButton hook processes the Button draft state.
-     * @param draftState - Button draft state to mutate.
-     */
-    exports.useButtonState = function (draftState) {
-        // Update the button's tab-index, keyboard handling, and aria attributes.
-        if (draftState.as !== 'button') {
-            draftState.role = 'button';
-            if (draftState.as !== 'a') {
-                var onKeyDown_1 = draftState.onKeyDown, onClick_1 = draftState.onClick;
-                draftState['data-isFocusable'] = true;
-                draftState.tabIndex = 0;
-                draftState.onKeyDown = function (ev) {
-                    if (onKeyDown_1) {
-                        onKeyDown_1(ev);
-                    }
-                    if (!ev.defaultPrevented && onClick_1 && (ev.which === 20 || ev.which === 13)) {
-                        // Translate the keydown enter/space to a click.
-                        ev.preventDefault();
-                        ev.stopPropagation();
-                        ev.target.click();
-                    }
-                };
-            }
-        }
-        draftState.disabled = draftState['aria-disabled'] = draftState.disabled || draftState.loading;
-    };
-});
-//# sourceMappingURL=useButtonState.js.map

package/lib-amd/components/Button/useButtonState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":";;;IAGA;;;OAGG;IACU,QAAA,cAAc,GAAG,UAAC,UAAuB;QACpD,yEAAyE;QACzE,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE;YAC9B,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;YAE3B,IAAI,UAAU,CAAC,EAAE,KAAK,GAAG,EAAE;gBACjB,IAAA,kCAAS,EAAE,8BAAO,CAAgB;gBAE1C,UAAU,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;gBACtC,UAAU,CAAC,QAAQ,GAAG,CAAC,CAAC;gBAExB,UAAU,CAAC,SAAS,GAAG,UAAC,EAAoC;oBAC1D,IAAI,WAAS,EAAE;wBACb,WAAS,CAAC,EAAE,CAAC,CAAC;qBACf;oBAED,IAAI,CAAC,EAAE,CAAC,gBAAgB,IAAI,SAAO,IAAI,CAAC,EAAE,CAAC,KAAK,KAAK,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,EAAE,CAAC,EAAE;wBAC3E,gDAAgD;wBAChD,EAAE,CAAC,cAAc,EAAE,CAAC;wBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;wBAEpB,EAAE,CAAC,MAAsB,CAAC,KAAK,EAAE,CAAC;qBACpC;gBACH,CAAC,CAAC;aACH;SACF;QAED,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,OAAO,CAAC;IAChG,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param draftState - Button draft state to mutate.\n */\nexport const useButtonState = (draftState: ButtonState) => {\n  // Update the button's tab-index, keyboard handling, and aria attributes.\n  if (draftState.as !== 'button') {\n    draftState.role = 'button';\n\n    if (draftState.as !== 'a') {\n      const { onKeyDown, onClick } = draftState;\n\n      draftState['data-isFocusable'] = true;\n      draftState.tabIndex = 0;\n\n      draftState.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n        if (onKeyDown) {\n          onKeyDown(ev);\n        }\n\n        if (!ev.defaultPrevented && onClick && (ev.which === 20 || ev.which === 13)) {\n          // Translate the keydown enter/space to a click.\n          ev.preventDefault();\n          ev.stopPropagation();\n\n          (ev.target as HTMLElement).click();\n        }\n      };\n    }\n  }\n\n  draftState.disabled = draftState['aria-disabled'] = draftState.disabled || draftState.loading;\n};\n"]}

package/lib-amd/components/CompoundButton/CompoundButton.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { CompoundButtonProps } from './CompoundButton.types';
-/**
- * Define a styled CompoundButton, using the `useCompoundButton` hook.
- * {@docCategory Button}
- */
-export declare const CompoundButton: React.ForwardRefExoticComponent<Pick<CompoundButtonProps, string | number> & React.RefAttributes<HTMLElement>>;

package/lib-amd/components/CompoundButton/CompoundButton.js

@@ -1,17 +0,0 @@
-define(["require", "exports", "react", "@fluentui/react-theme-provider", "@fluentui/utilities", "./useCompoundButton", "./useCompoundButtonClasses"], function (require, exports, React, react_theme_provider_1, utilities_1, useCompoundButton_1, useCompoundButtonClasses_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Define a styled CompoundButton, using the `useCompoundButton` hook.
-     * {@docCategory Button}
-     */
-    exports.CompoundButton = React.forwardRef(function (props, ref) {
-        var _a = useCompoundButton_1.useCompoundButton(props, ref), render = _a.render, state = _a.state;
-        useCompoundButtonClasses_1.useCompoundButtonClasses(state);
-        utilities_1.useFocusRects(state.ref);
-        react_theme_provider_1.useInlineTokens(state, '--button');
-        return render(state);
-    });
-    exports.CompoundButton.displayName = 'CompoundButton';
-});
-//# sourceMappingURL=CompoundButton.js.map

package/lib-amd/components/CompoundButton/CompoundButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;IAOA;;;OAGG;IACU,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAAmC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAA,sDAAiD,EAA/C,kBAAM,EAAE,gBAAuC,CAAC;QAExD,mDAAwB,CAAC,KAAK,CAAC,CAAC;QAChC,yBAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACzB,sCAAe,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QAEnC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useInlineTokens } from '@fluentui/react-theme-provider';\nimport { useFocusRects } from '@fluentui/utilities';\nimport { CompoundButtonProps } from './CompoundButton.types';\nimport { useCompoundButton } from './useCompoundButton';\nimport { useCompoundButtonClasses } from './useCompoundButtonClasses';\n\n/**\n * Define a styled CompoundButton, using the `useCompoundButton` hook.\n * {@docCategory Button}\n */\nexport const CompoundButton = React.forwardRef<HTMLElement, CompoundButtonProps>((props, ref) => {\n  const { render, state } = useCompoundButton(props, ref);\n\n  useCompoundButtonClasses(state);\n  useFocusRects(state.ref);\n  useInlineTokens(state, '--button');\n\n  return render(state);\n});\n\nCompoundButton.displayName = 'CompoundButton';\n"]}

package/lib-amd/components/CompoundButton/CompoundButton.types.d.ts

@@ -1,33 +0,0 @@
-import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types';
-/**
- * {@docCategory Button}
- */
-export interface CompoundButtonProps extends ButtonProps {
-    /**
-     * Second line of text that describes the action this button takes.
-     */
-    secondaryContent?: ShorthandProps;
-    /**
-     * Container that wraps the children and secondaryContent slots.
-     */
-    contentContainer?: ShorthandProps;
-}
-/**
- * {@docCategory Button}
- */
-export interface CompoundButtonState extends CompoundButtonProps {
-}
-/**
- * {@docCategory Button}
- */
-export declare type CompoundButtonTokens = ButtonTokens & {
-    secondaryContentColor?: string;
-    secondaryContentFontSize?: string;
-    secondaryContentFontWeight?: string;
-    secondaryContentGap?: string;
-};
-/**
- * {@docCategory Button}
- */
-export declare type CompoundButtonVariants = ButtonVariants<CompoundButtonTokens>;

package/lib-amd/components/CompoundButton/CompoundButton.types.js

@@ -1,5 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
-//# sourceMappingURL=CompoundButton.types.js.map

package/lib-amd/components/CompoundButton/CompoundButton.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';\nimport { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types';\n\n/**\n * {@docCategory Button}\n */\nexport interface CompoundButtonProps extends ButtonProps {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: ShorthandProps;\n\n  /**\n   * Container that wraps the children and secondaryContent slots.\n   */\n  contentContainer?: ShorthandProps;\n}\n\n/**\n * {@docCategory Button}\n */\nexport interface CompoundButtonState extends CompoundButtonProps {}\n\n/**\n * {@docCategory Button}\n */\nexport type CompoundButtonTokens = ButtonTokens & {\n  secondaryContentColor?: string;\n  secondaryContentFontSize?: string;\n  secondaryContentFontWeight?: string;\n  secondaryContentGap?: string;\n};\n\n/**\n * {@docCategory Button}\n */\nexport type CompoundButtonVariants = ButtonVariants<CompoundButtonTokens>;\n"]}

package/lib-amd/components/CompoundButton/index.d.ts

@@ -1,4 +0,0 @@
-export * from './CompoundButton';
-export * from './CompoundButton.types';
-export * from './useCompoundButton';
-export * from './useCompoundButtonClasses';

package/lib-amd/components/CompoundButton/index.js

@@ -1,8 +0,0 @@
-define(["require", "exports", "tslib", "./CompoundButton", "./useCompoundButton", "./useCompoundButtonClasses"], function (require, exports, tslib_1, CompoundButton_1, useCompoundButton_1, useCompoundButtonClasses_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(CompoundButton_1, exports);
-    tslib_1.__exportStar(useCompoundButton_1, exports);
-    tslib_1.__exportStar(useCompoundButtonClasses_1, exports);
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/components/CompoundButton/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CompoundButton/index.ts"],"names":[],"mappings":";;;IAAA,gDAAiC;IAEjC,mDAAoC;IACpC,0DAA2C","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './useCompoundButton';\nexport * from './useCompoundButtonClasses';\n"]}

package/lib-amd/components/CompoundButton/renderCompoundButton.d.ts

@@ -1,5 +0,0 @@
-import { CompoundButtonState } from './CompoundButton.types';
-/**
- * Define the render function. Given the state of a button, renders it.
- */
-export declare const renderCompoundButton: (state: CompoundButtonState) => JSX.Element;