feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-button/lib-commonjs/components/Button/Button.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Button", {
+    enumerable: true,
+    get: function() {
+        return Button;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderButton = require("./renderButton");
+const _useButton = require("./useButton");
+const _useButtonStylesstyles = require("./useButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Button = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useButton.useButton_unstable)(props, ref);
+    (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useButtonStyles_unstable')(state);
+    return (0, _renderButton.renderButton_unstable)(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+Button.displayName = 'Button';

node_modules/@fluentui/react-button/lib-commonjs/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useButtonStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BACO,iBAAiB;2BACpB,cAAc;uCACR,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQP,6BAAAA,EAAmBK,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOR,mCAAAA,EAAsBQ;AAC7B,0FAA0F;AAC5F,GAAuC;AAEvCJ,OAAOK,WAAW,GAAG"}

node_modules/@fluentui/react-button/lib-commonjs/components/Button/Button.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-button/lib-commonjs/components/Button/Button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n  /**\n   * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n  /**\n   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n   */\n  icon?: Slot<'span'>;\n};\n\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n  /**\n   * A button can have its content and borders styled for greater emphasis or to be subtle.\n   * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n   * - 'primary': Emphasizes the button as a primary action.\n   * - 'outline': Removes background styling.\n   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   * - 'transparent': Removes background and border styling.\n   *\n   * @default 'secondary'\n   */\n  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n  /**\n   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * A button can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A button can format its icon to appear before or after its content.\n   *\n   * @default 'before'\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A button can be rounded, circular, or square.\n   *\n   * @default 'rounded'\n   */\n  shape?: 'rounded' | 'circular' | 'square';\n\n  /**\n   * A button supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: ButtonSize;\n};\n\nexport type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n  Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n    /**\n     * A button can contain only an icon.\n     *\n     * @default false\n     */\n    iconOnly: boolean;\n  };\n\nexport type ButtonBaseState = DistributiveOmit<ButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-button/lib-commonjs/components/Button/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Button: function() {
+        return _Button.Button;
+    },
+    buttonClassNames: function() {
+        return _useButtonStylesstyles.buttonClassNames;
+    },
+    renderButton_unstable: function() {
+        return _renderButton.renderButton_unstable;
+    },
+    useButtonBase_unstable: function() {
+        return _useButton.useButtonBase_unstable;
+    },
+    useButtonStyles_unstable: function() {
+        return _useButtonStylesstyles.useButtonStyles_unstable;
+    },
+    useButton_unstable: function() {
+        return _useButton.useButton_unstable;
+    }
+});
+const _Button = require("./Button");
+const _renderButton = require("./renderButton");
+const _useButton = require("./useButton");
+const _useButtonStylesstyles = require("./useButtonStyles.styles");

node_modules/@fluentui/react-button/lib-commonjs/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonBaseProps, ButtonProps, ButtonSlots, ButtonBaseState, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable, useButtonBase_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","useButtonBase_unstable","buttonClassNames","useButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAKNI,uCAAgB;;;eAFhBH,mCAAqB;;;eACDE,iCAAsB;;;eACxBE,+CAAwB;;;eAD1CH,6BAAkB;;;wBAJJ,WAAW;8BAGI,iBAAiB;2BACI,cAAc;uCACd,2BAA2B"}

node_modules/@fluentui/react-button/lib-commonjs/components/Button/renderButton.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderButton_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderButton_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    const { iconOnly, iconPosition } = state;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            iconPosition !== 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+            !iconOnly && state.root.children,
+            iconPosition === 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-button/lib-commonjs/components/Button/renderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState): JSXElement => {\n  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":";;;;+BAWaC;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;AAQjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAG5D,EAAE"}

node_modules/@fluentui/react-button/lib-commonjs/components/Button/useButton.js

@@ -0,0 +1,60 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useButtonBase_unstable: function() {
+        return useButtonBase_unstable;
+    },
+    useButton_unstable: function() {
+        return useButton_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _ButtonContext = require("../../contexts/ButtonContext");
+const _reactaria = require("@fluentui/react-aria");
+const _reactutilities = require("@fluentui/react-utilities");
+const useButton_unstable = (props, ref)=>{
+    const { size: contextSize } = (0, _ButtonContext.useButtonContext)();
+    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...buttonProps } = props;
+    const state = useButtonBase_unstable(buttonProps, ref);
+    return {
+        appearance,
+        shape,
+        size,
+        ...state
+    };
+};
+const useButtonBase_unstable = (props, ref)=>{
+    const { icon, iconPosition = 'before', ...buttonProps } = props;
+    const iconShorthand = _reactutilities.slot.optional(icon, {
+        elementType: 'span'
+    });
+    var _props_disabled, _props_disabledFocusable;
+    return {
+        disabled: (_props_disabled = props.disabled) !== null && _props_disabled !== void 0 ? _props_disabled : false,
+        disabledFocusable: (_props_disabledFocusable = props.disabledFocusable) !== null && _props_disabledFocusable !== void 0 ? _props_disabledFocusable : false,
+        iconPosition,
+        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+        components: {
+            root: 'button',
+            icon: 'span'
+        },
+        root: _reactutilities.slot.always((0, _reactaria.useARIAButtonProps)(buttonProps.as, buttonProps), {
+            elementType: 'button',
+            defaultProps: {
+                ref: ref,
+                type: props.as !== 'a' ? 'button' : undefined
+            }
+        }),
+        icon: iconShorthand
+    };
+};

node_modules/@fluentui/react-button/lib-commonjs/components/Button/useButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;\n  const state = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Button component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButtonBase_unstable = (\n  props: ButtonBaseProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonBaseState => {\n  const { icon, iconPosition = 'before', ...buttonProps } = props;\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n\n  return {\n    disabled: props.disabled ?? false,\n    disabledFocusable: props.disabledFocusable ?? false,\n    iconPosition,\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n    components: { root: 'button', icon: 'span' },\n    root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(buttonProps.as, buttonProps), {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: props.as !== 'a' ? 'button' : undefined,\n      },\n    }),\n    icon: iconShorthand,\n  };\n};\n"],"names":["React","useButtonContext","useARIAButtonProps","slot","useButton_unstable","props","ref","size","contextSize","appearance","shape","buttonProps","state","useButtonBase_unstable","icon","iconPosition","iconShorthand","optional","elementType","disabled","disabledFocusable","iconOnly","Boolean","children","components","root","always","as","defaultProps","type","undefined"],"mappings":"AAAA;;;;;;;;;;;;0BAmCaa;eAAAA;;sBAtBAT;;;;;iEAXU,QAAQ;+BACE,+BAA+B;2BACR,uBAAuB;gCAC1D,4BAA4B;AAQ1C,MAAMA,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGP,mCAAAA;IAC9B,MAAM,EAAEQ,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGG,aAAa,GAAGN;IACxG,MAAMO,QAAQC,uBAAuBF,aAAaL;IAElD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGK,KAAK;IACV;AACF,EAAE;AAQK,+BAA+B,CACpCP,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGJ,aAAa,GAAGN;IAC1D,MAAMW,gBAAgBb,oBAAAA,CAAKc,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;QAGpDb,iBACSA;IAFrB,OAAO;QACLc,UAAUd,mBAAAA,MAAMc,QAAQ,AAARA,MAAQ,QAAdd,oBAAAA,KAAAA,IAAAA,kBAAkB;QAC5Be,mBAAmBf,CAAAA,2BAAAA,MAAMe,iBAAAA,AAAiB,MAAA,QAAvBf,6BAAAA,KAAAA,IAAAA,2BAA2B;QAC9CU;QACAM,UAAUC,QAAQN,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeO,QAAAA,AAAQ,KAAI,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMtB,oBAAAA,CAAKuB,MAAM,KAA2BxB,6BAAAA,EAAmBS,YAAYgB,EAAE,EAAEhB,cAAc;YAC3FO,aAAa;YACbU,cAAc;gBACZtB,KAAKA;gBACLuB,MAAMxB,MAAMsB,EAAE,KAAK,MAAM,WAAWG;YACtC;QACF;QACAhB,MAAME;IACR;AACF,EAAE"}

node_modules/@fluentui/react-button/lib-commonjs/components/Button/useButtonStyles.styles.raw.js

@@ -0,0 +1,496 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    buttonClassNames: function() {
+        return buttonClassNames;
+    },
+    useButtonStyles_unstable: function() {
+        return useButtonStyles_unstable;
+    }
+});
+const _reacticons = require("@fluentui/react-icons");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const buttonClassNames = {
+    root: 'fui-Button',
+    icon: 'fui-Button__icon'
+};
+const iconSpacingVar = '--fui-Button__icon--spacing';
+const buttonSpacingSmall = '3px';
+const buttonSpacingSmallWithIcon = '1px';
+const buttonSpacingMedium = '5px';
+const buttonSpacingLarge = '8px';
+const buttonSpacingLargeWithIcon = '7px';
+/* Firefox has box shadow sizing issue at some zoom levels
+ * this will ensure the inset boxShadow is always uniform
+ * without affecting other browser platforms
+ */ const boxShadowStrokeWidthThinMoz = `calc(${_reacttheme.tokens.strokeWidthThin} + 0.25px)`;
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'middle',
+    margin: 0,
+    overflow: 'hidden',
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+    fontFamily: _reacttheme.tokens.fontFamilyBase,
+    outlineStyle: 'none',
+    ':hover': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
+        borderColor: _reacttheme.tokens.colorNeutralStroke1Hover,
+        color: _reacttheme.tokens.colorNeutralForeground1Hover,
+        cursor: 'pointer'
+    },
+    ':hover:active,:active:focus-visible': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
+        borderColor: _reacttheme.tokens.colorNeutralStroke1Pressed,
+        color: _reacttheme.tokens.colorNeutralForeground1Pressed,
+        outlineStyle: 'none'
+    },
+    padding: `${buttonSpacingMedium} ${_reacttheme.tokens.spacingHorizontalM}`,
+    minWidth: '96px',
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    fontSize: _reacttheme.tokens.fontSizeBase300,
+    fontWeight: _reacttheme.tokens.fontWeightSemibold,
+    lineHeight: _reacttheme.tokens.lineHeightBase300,
+    // Transition styles
+    transitionDuration: _reacttheme.tokens.durationFaster,
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: _reacttheme.tokens.curveEasyEase,
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        transitionDuration: '0.01ms'
+    },
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        ':focus': {
+            borderColor: 'ButtonText'
+        },
+        ':hover': {
+            backgroundColor: 'HighlightText',
+            borderColor: 'Highlight',
+            color: 'Highlight',
+            forcedColorAdjust: 'none'
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: 'HighlightText',
+            borderColor: 'Highlight',
+            color: 'Highlight',
+            forcedColorAdjust: 'none'
+        }
+    },
+    // Focus styles
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderColor: _reacttheme.tokens.colorStrokeFocus2,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        borderWidth: '1px',
+        outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2}
+      inset
+    `,
+        zIndex: 1
+    }),
+    // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
+    '@supports (-moz-appearance:button)': {
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2}
+      inset
+    `
+        })
+    }
+});
+const useIconBaseClassName = (0, _react.makeResetStyles)({
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    fontSize: '20px',
+    height: '20px',
+    width: '20px',
+    [iconSpacingVar]: _reacttheme.tokens.spacingHorizontalSNudge
+});
+const useRootStyles = (0, _react.makeStyles)({
+    // Appearance variations
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
+        }
+    },
+    primary: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Highlight',
+            ..._react.shorthands.borderColor('HighlightText'),
+            color: 'HighlightText',
+            forcedColorAdjust: 'none',
+            ':hover': {
+                backgroundColor: 'HighlightText',
+                ..._react.shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            },
+            ':hover:active,:active:focus-visible': {
+                backgroundColor: 'HighlightText',
+                ..._react.shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            }
+        }
+    },
+    secondary: {},
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForeground2Hover,
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'none'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2BrandHover
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForeground2Pressed,
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'none'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'Highlight'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                color: 'Highlight',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'Highlight'
+                }
+            }
+        }
+    },
+    transparent: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForeground2BrandHover,
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
+            ..._react.shorthands.borderColor('transparent'),
+            color: _reacttheme.tokens.colorNeutralForeground2BrandPressed,
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+                color: 'Highlight'
+            },
+            ':hover:active,:active:focus-visible': {
+                backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+                color: 'Highlight'
+            }
+        }
+    },
+    // Shape variations
+    circular: {
+        borderRadius: _reacttheme.tokens.borderRadiusCircular
+    },
+    rounded: {},
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    },
+    // Size variations
+    small: {
+        minWidth: '64px',
+        padding: `${buttonSpacingSmall} ${_reacttheme.tokens.spacingHorizontalS}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        fontWeight: _reacttheme.tokens.fontWeightRegular,
+        lineHeight: _reacttheme.tokens.lineHeightBase200
+    },
+    smallWithIcon: {
+        paddingBottom: buttonSpacingSmallWithIcon,
+        paddingTop: buttonSpacingSmallWithIcon
+    },
+    medium: {},
+    large: {
+        minWidth: '96px',
+        padding: `${buttonSpacingLarge} ${_reacttheme.tokens.spacingHorizontalL}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        fontSize: _reacttheme.tokens.fontSizeBase400,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        lineHeight: _reacttheme.tokens.lineHeightBase400
+    },
+    largeWithIcon: {
+        paddingBottom: buttonSpacingLargeWithIcon,
+        paddingTop: buttonSpacingLargeWithIcon
+    }
+});
+const useRootDisabledStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        [`& .${buttonClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        },
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed',
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed',
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        }
+    },
+    // High contrast styles
+    highContrast: {
+        '@media (forced-colors: active)': {
+            backgroundColor: 'ButtonFace',
+            ..._react.shorthands.borderColor('GrayText'),
+            color: 'GrayText',
+            [`& .${buttonClassNames.icon}`]: {
+                color: 'GrayText'
+            },
+            ':focus': {
+                ..._react.shorthands.borderColor('GrayText')
+            },
+            ':hover': {
+                backgroundColor: 'ButtonFace',
+                ..._react.shorthands.borderColor('GrayText'),
+                color: 'GrayText',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                backgroundColor: 'ButtonFace',
+                ..._react.shorthands.borderColor('GrayText'),
+                color: 'GrayText',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'GrayText'
+                }
+            }
+        }
+    },
+    // Appearance variations
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground
+        }
+    },
+    primary: {
+        ..._react.shorthands.borderColor('transparent'),
+        ':hover': {
+            ..._react.shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            ..._react.shorthands.borderColor('transparent')
+        }
+    },
+    secondary: {},
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            ..._react.shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            ..._react.shorthands.borderColor('transparent')
+        }
+    },
+    transparent: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            ..._react.shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            ..._react.shorthands.borderColor('transparent')
+        }
+    }
+});
+const useRootFocusStyles = (0, _react.makeStyles)({
+    // Shape variations
+    circular: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusCircular
+    }),
+    rounded: {},
+    square: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    }),
+    // Primary styles
+    primary: {
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorStrokeFocus2),
+            boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2} inset,  0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorNeutralForegroundOnBrand} inset`,
+            ':hover': {
+                boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorStrokeFocus2} inset`,
+                ..._react.shorthands.borderColor(_reacttheme.tokens.colorStrokeFocus2)
+            }
+        }),
+        // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
+        '@supports (-moz-appearance:button)': {
+            ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+                boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2} inset,  0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorNeutralForegroundOnBrand} inset`,
+                ':hover': {
+                    boxShadow: `${_reacttheme.tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${_reacttheme.tokens.colorStrokeFocus2} inset`
+                }
+            })
+        }
+    },
+    // Size variations
+    small: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusSmall
+    }),
+    medium: {},
+    large: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusLarge
+    })
+});
+const useRootIconOnlyStyles = (0, _react.makeStyles)({
+    // Size variations
+    small: {
+        padding: buttonSpacingSmallWithIcon,
+        minWidth: '24px',
+        maxWidth: '24px'
+    },
+    medium: {
+        padding: buttonSpacingMedium,
+        minWidth: '32px',
+        maxWidth: '32px'
+    },
+    large: {
+        padding: buttonSpacingLargeWithIcon,
+        minWidth: '40px',
+        maxWidth: '40px'
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    // Size variations
+    small: {
+        fontSize: '20px',
+        height: '20px',
+        width: '20px',
+        [iconSpacingVar]: _reacttheme.tokens.spacingHorizontalXS
+    },
+    medium: {},
+    large: {
+        fontSize: '24px',
+        height: '24px',
+        width: '24px',
+        [iconSpacingVar]: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    // Icon position variations
+    before: {
+        marginRight: `var(${iconSpacingVar})`
+    },
+    after: {
+        marginLeft: `var(${iconSpacingVar})`
+    }
+});
+const useButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const iconBaseClassName = useIconBaseClassName();
+    const rootStyles = useRootStyles();
+    const rootDisabledStyles = useRootDisabledStyles();
+    const rootFocusStyles = useRootFocusStyles();
+    const rootIconOnlyStyles = useRootIconOnlyStyles();
+    const iconStyles = useIconStyles();
+    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+    state.root.className = (0, _react.mergeClasses)(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], iconOnly && rootIconOnlyStyles[size], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
+    }
+    return state;
+};