@fluentui/react-button 9.3.3 → 9.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "9.3.3",
+  "version": "9.3.5",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,26 +22,26 @@
     "test": "jest --passWithNoTests",
     "storybook": "start-storybook",
     "type-check": "tsc -b tsconfig.json",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
+    "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
     "@fluentui/a11y-testing": "^0.1.0",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-aria": "^9.3.13",
-    "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-shared-contexts": "^9.3.1",
-    "@fluentui/react-tabster": "^9.5.7",
-    "@fluentui/react-theme": "^9.1.6",
-    "@fluentui/react-utilities": "^9.7.0",
+    "@fluentui/keyboard-keys": "^9.0.2",
+    "@fluentui/react-aria": "^9.3.15",
+    "@fluentui/react-icons": "^2.0.196",
+    "@fluentui/react-shared-contexts": "^9.3.2",
+    "@fluentui/react-tabster": "^9.6.1",
+    "@fluentui/react-theme": "^9.1.7",
+    "@fluentui/react-utilities": "^9.7.2",
     "@griffel/react": "^1.5.2",
-    "tslib": "^2.1.0"
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
@@ -58,6 +58,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
     },

package/lib-amd/Button.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/Button/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=Button.js.map

package/lib-amd/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/Button.tsx"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Button/index';\n"]}

package/lib-amd/CompoundButton.js

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

package/lib-amd/CompoundButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CompoundButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/CompoundButton.ts"],"names":[],"mappings":";;;IAAA,uCAAkD","sourcesContent":["export * from './components/CompoundButton/index';\n"]}

package/lib-amd/MenuButton.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/MenuButton/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=MenuButton.js.map

package/lib-amd/MenuButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/MenuButton.ts"],"names":[],"mappings":";;;IAAA,uCAA8C","sourcesContent":["export * from './components/MenuButton/index';\n"]}

package/lib-amd/SplitButton.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/SplitButton/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=SplitButton.js.map

package/lib-amd/SplitButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SplitButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/SplitButton.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/SplitButton/index';\n"]}

package/lib-amd/ToggleButton.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/ToggleButton/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=ToggleButton.js.map

package/lib-amd/ToggleButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/ToggleButton.ts"],"names":[],"mappings":";;;IAAA,uCAAgD","sourcesContent":["export * from './components/ToggleButton/index';\n"]}

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

@@ -1,18 +0,0 @@
-define(["require", "exports", "react", "./renderButton", "./useButton", "./useButtonStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, renderButton_1, useButton_1, useButtonStyles_1, react_shared_contexts_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Button = void 0;
-    /**
-     * Buttons give people a way to trigger an action.
-     */
-    exports.Button = React.forwardRef(function (props, ref) {
-        var state = useButton_1.useButton_unstable(props, ref);
-        useButtonStyles_1.useButtonStyles_unstable(state);
-        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useButtonStyles_unstable;
-        useCustomStyles(state);
-        return renderButton_1.renderButton_unstable(state);
-        // Casting is required due to lack of distributive union to support unions on @types/react
-    });
-    exports.Button.displayName = 'Button';
-});
-//# sourceMappingURL=Button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/Button.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,MAAM,GAAqC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClF,IAAM,KAAK,GAAG,8BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE7C,0CAAwB,CAAC,KAAK,CAAC,CAAC;QAExB,IAA0B,eAAe,GAAK,oDAA4B,EAAE,yBAAnC,CAAoC;QACrF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,oCAAqB,CAAC,KAAK,CAAC,CAAC;QACpC,0FAA0F;IAC5F,CAAC,CAAqC,CAAC;IAEvC,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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  const { useButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(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"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, 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 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"]}

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

@@ -1,11 +0,0 @@
-define(["require", "exports", "tslib", "./Button", "./renderButton", "./useButton", "./useButtonStyles"], function (require, exports, tslib_1, Button_1, renderButton_1, useButton_1, useButtonStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useButtonStyles_unstable = exports.buttonClassNames = void 0;
-    tslib_1.__exportStar(Button_1, exports);
-    tslib_1.__exportStar(renderButton_1, exports);
-    tslib_1.__exportStar(useButton_1, exports);
-    Object.defineProperty(exports, "buttonClassNames", { enumerable: true, get: function () { return useButtonStyles_1.buttonClassNames; } });
-    Object.defineProperty(exports, "useButtonStyles_unstable", { enumerable: true, get: function () { return useButtonStyles_1.useButtonStyles_unstable; } });
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/index.ts"],"names":[],"mappings":";;;;IAAA,wCAAyB;IAGzB,8CAA+B;IAC/B,2CAA4B;IACnB,mHAAA,gBAAgB,OAAA;IAAE,2HAAA,wBAAwB,OAAA","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n"]}

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

@@ -1,18 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.renderButton_unstable = void 0;
-    /**
-     * Renders a Button component by passing the state defined props to the appropriate slots.
-     */
-    var renderButton_unstable = function (state) {
-        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
-        var iconOnly = state.iconOnly, iconPosition = state.iconPosition;
-        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-            iconPosition !== 'after' && slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
-            !iconOnly && state.root.children,
-            iconPosition === 'after' && slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
-    };
-    exports.renderButton_unstable = renderButton_unstable;
-});
-//# sourceMappingURL=renderButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAClD,IAAA,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEzC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC5E,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ;YAChC,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAClE,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,qBAAqB,yBAWhC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\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) => {\n  const { slots, slotProps } = getSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -1,41 +0,0 @@
-define(["require", "exports", "@fluentui/react-aria", "@fluentui/react-utilities", "../../contexts/ButtonContext"], function (require, exports, react_aria_1, react_utilities_1, ButtonContext_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useButton_unstable = void 0;
-    /**
-     * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
-     * @param props - User provided props to the Button component.
-     * @param ref - User provided ref to be passed to the Button component.
-     */
-    var useButton_unstable = function (props, ref) {
-        var contextSize = ButtonContext_1.useButtonContext().size;
-        var _a = props.appearance, appearance = _a === void 0 ? 'secondary' : _a, _b = props.as, as = _b === void 0 ? 'button' : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.disabledFocusable, disabledFocusable = _d === void 0 ? false : _d, icon = props.icon, _e = props.iconPosition, iconPosition = _e === void 0 ? 'before' : _e, _f = props.shape, shape = _f === void 0 ? 'rounded' : _f, _g = props.size, size = _g === void 0 ? contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' : _g;
-        var iconShorthand = react_utilities_1.resolveShorthand(icon);
-        return {
-            // Props passed at the top-level
-            appearance: appearance,
-            disabled: disabled,
-            disabledFocusable: disabledFocusable,
-            iconPosition: iconPosition,
-            shape: shape,
-            size: size,
-            // State calculated from a set of props
-            iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
-            // Slots definition
-            components: {
-                root: 'button',
-                icon: 'span',
-            },
-            root: react_utilities_1.getNativeElementProps(as, react_aria_1.useARIAButtonShorthand(props, {
-                required: true,
-                defaultProps: {
-                    ref: ref,
-                    type: 'button',
-                },
-            })),
-            icon: iconShorthand,
-        };
-    };
-    exports.useButton_unstable = useButton_unstable;
-});
-//# sourceMappingURL=useButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButton.ts"],"names":[],"mappings":";;;;IAMA;;;;OAIG;IACI,IAAM,kBAAkB,GAAG,UAChC,KAAkB,EAClB,GAAqD;QAE7C,IAAM,WAAW,GAAK,gCAAgB,EAAE,KAAvB,CAAwB;QAE/C,IAAA,KAQE,KAAK,WARiB,EAAxB,UAAU,mBAAG,WAAW,KAAA,EACxB,KAOE,KAAK,GAPM,EAAb,EAAE,mBAAG,QAAQ,KAAA,EACb,KAME,KAAK,SANS,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAKE,KAAK,kBALkB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,IAAI,GAIF,KAAK,KAJH,EACJ,KAGE,KAAK,aAHgB,EAAvB,YAAY,mBAAG,QAAQ,KAAA,EACvB,KAEE,KAAK,MAFU,EAAjB,KAAK,mBAAG,SAAS,KAAA,EACjB,KACE,KAAK,KADuB,EAA9B,IAAI,mBAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,QAAQ,KAAA,CACtB;QACV,IAAM,aAAa,GAAG,kCAAgB,CAAC,IAAI,CAAC,CAAC;QAE7C,OAAO;YACL,gCAAgC;YAChC,UAAU,YAAA;YACV,QAAQ,UAAA;YACR,iBAAiB,mBAAA;YACjB,YAAY,cAAA;YACZ,KAAK,OAAA;YACL,IAAI,MAAA;YAEJ,uCAAuC;YACvC,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YAE7D,mBAAmB;YACnB,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;aACb;YAED,IAAI,EAAE,uCAAqB,CACzB,EAAE,EACF,mCAAsB,CAA2B,KAAK,EAAE;gBACtD,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,GAAG,EAAE,GAAuD;oBAC5D,IAAI,EAAE,QAAQ;iBACf;aACF,CAAC,CACH;YACD,IAAI,EAAE,aAAa;SACpB,CAAC;IACJ,CAAC,CAAC;IA/CW,QAAA,kBAAkB,sBA+C7B","sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { 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 {\n    appearance = 'secondary',\n    as = 'button',\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = contextSize ?? 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as,\n      useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n        required: true,\n        defaultProps: {\n          ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n          type: 'button',\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"]}

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

@@ -1,227 +0,0 @@
-define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react-tabster", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_icons_1, react_tabster_1, react_theme_1, react_1) {
-    "use strict";
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useButtonStyles_unstable = exports.buttonClassNames = void 0;
-    exports.buttonClassNames = {
-        root: 'fui-Button',
-        icon: 'fui-Button__icon',
-    };
-    var iconSpacingVar = '--fui-Button__icon--spacing';
-    var buttonSpacingSmall = '3px';
-    var buttonSpacingSmallWithIcon = '1px';
-    var buttonSpacingMedium = '5px';
-    var buttonSpacingLarge = '8px';
-    var buttonSpacingLargeWithIcon = '7px';
-    var useRootBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ alignItems: 'center', boxSizing: 'border-box', display: 'inline-flex', justifyContent: 'center', textDecorationLine: 'none', verticalAlign: 'middle', margin: 0, overflow: 'hidden', backgroundColor: react_theme_1.tokens.colorNeutralBackground1, color: react_theme_1.tokens.colorNeutralForeground1, border: react_theme_1.tokens.strokeWidthThin + " solid " + react_theme_1.tokens.colorNeutralStroke1, fontFamily: react_theme_1.tokens.fontFamilyBase, outlineStyle: 'none', ':hover': (_a = {
-                backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
-                borderColor: react_theme_1.tokens.colorNeutralStroke1Hover,
-                color: react_theme_1.tokens.colorNeutralForeground1Hover,
-                cursor: 'pointer'
-            },
-            _a["& ." + react_icons_1.iconFilledClassName] = {
-                display: 'inline',
-            },
-            _a["& ." + react_icons_1.iconRegularClassName] = {
-                display: 'none',
-            },
-            _a), ':hover:active': (_b = {
-                backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed,
-                borderColor: react_theme_1.tokens.colorNeutralStroke1Pressed,
-                color: react_theme_1.tokens.colorNeutralForeground1Pressed,
-                outlineStyle: 'none'
-            },
-            _b["& ." + react_icons_1.iconFilledClassName] = {
-                display: 'inline',
-            },
-            _b["& ." + react_icons_1.iconRegularClassName] = {
-                display: 'none',
-            },
-            _b), padding: buttonSpacingMedium + " " + react_theme_1.tokens.spacingHorizontalM, minWidth: '96px', borderRadius: react_theme_1.tokens.borderRadiusMedium, fontSize: react_theme_1.tokens.fontSizeBase300, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase300, 
-        // Transition styles
-        transitionDuration: react_theme_1.tokens.durationFaster, transitionProperty: 'background, border, color', transitionTimingFunction: react_theme_1.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': {
-                backgroundColor: 'HighlightText',
-                borderColor: 'Highlight',
-                color: 'Highlight',
-                forcedColorAdjust: 'none',
-            },
-        } }, react_tabster_1.createCustomFocusIndicatorStyle({
-        borderColor: react_theme_1.tokens.colorTransparentStroke,
-        borderRadius: react_theme_1.tokens.borderRadiusMedium,
-        outline: react_theme_1.tokens.strokeWidthThick + " solid " + react_theme_1.tokens.colorTransparentStroke,
-        boxShadow: "\n      " + react_theme_1.tokens.shadow4 + ",\n      0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 + "\n    ",
-        zIndex: 1,
-    })));
-    var useIconBaseClassName = react_1.makeResetStyles((_c = {
-            alignItems: 'center',
-            display: 'inline-flex',
-            justifyContent: 'center',
-            fontSize: '20px',
-            height: '20px',
-            width: '20px'
-        },
-        _c[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalSNudge,
-        _c));
-    var useRootStyles = react_1.makeStyles({
-        // Appearance variations
-        outline: {
-            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
-            ':hover': {
-                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover,
-            },
-            ':hover:active': {
-                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed,
-            },
-        },
-        primary: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }), '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'Highlight' }, react_1.shorthands.borderColor('HighlightText')), { color: 'HighlightText', forcedColorAdjust: 'none', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight' }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight' }) }) }),
-        secondary: {
-        /* The secondary styles are exactly the same as the base styles. */
-        },
-        subtle: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover }, react_1.shorthands.borderColor('transparent')), (_d = { color: react_theme_1.tokens.colorNeutralForeground2Hover }, _d["& ." + exports.buttonClassNames.icon] = {
-                color: react_theme_1.tokens.colorNeutralForeground2BrandHover,
-            }, _d)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed }, react_1.shorthands.borderColor('transparent')), (_e = { color: react_theme_1.tokens.colorNeutralForeground2Pressed }, _e["& ." + exports.buttonClassNames.icon] = {
-                color: react_theme_1.tokens.colorNeutralForeground2BrandPressed,
-            }, _e)) }),
-        transparent: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2BrandHover }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2BrandPressed }) }),
-        // Shape variations
-        circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
-        rounded: {
-        /* The borderRadius rounded styles are handled in the size variations */
-        },
-        square: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
-        // Size variations
-        small: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ minWidth: '64px' }, react_1.shorthands.padding(buttonSpacingSmall, react_theme_1.tokens.spacingHorizontalS)), react_1.shorthands.borderRadius(buttonSpacingSmall)), { fontSize: react_theme_1.tokens.fontSizeBase200, fontWeight: react_theme_1.tokens.fontWeightRegular, lineHeight: react_theme_1.tokens.lineHeightBase200 }),
-        smallWithIcon: {
-            paddingBottom: buttonSpacingSmallWithIcon,
-            paddingTop: buttonSpacingSmallWithIcon,
-        },
-        medium: {
-        /* defined in base styles */
-        },
-        large: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ minWidth: '96px' }, react_1.shorthands.padding(buttonSpacingLarge, react_theme_1.tokens.spacingHorizontalL)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase400, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
-        largeWithIcon: {
-            paddingBottom: buttonSpacingLargeWithIcon,
-            paddingTop: buttonSpacingLargeWithIcon,
-        },
-    });
-    var useRootDisabledStyles = react_1.makeStyles({
-        // Base styles
-        base: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_f = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _f["& ." + react_icons_1.iconFilledClassName] = {
-                display: 'none',
-            }, _f["& ." + react_icons_1.iconRegularClassName] = {
-                display: 'inline',
-            }, _f)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_g = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _g["& ." + react_icons_1.iconFilledClassName] = {
-                display: 'none',
-            }, _g["& ." + react_icons_1.iconRegularClassName] = {
-                display: 'inline',
-            }, _g)) }),
-        // High contrast styles
-        highContrast: {
-            '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'ButtonFace' }, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText', ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'ButtonFace' }, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'ButtonFace' }, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }) }),
-        },
-        // Appearance variations
-        outline: {
-            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
-            ':hover': {
-                backgroundColor: react_theme_1.tokens.colorTransparentBackground,
-            },
-            ':hover:active': {
-                backgroundColor: react_theme_1.tokens.colorTransparentBackground,
-            },
-        },
-        primary: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')) }),
-        secondary: {
-        /* The secondary styles are exactly the same as the base styles. */
-        },
-        subtle: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')) }),
-        transparent: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')) }),
-    });
-    var useRootFocusStyles = react_1.makeStyles({
-        // Shape variations
-        circular: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular))),
-        rounded: {
-        /* The rounded styles are exactly the same as the base styles. */
-        },
-        square: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone))),
-        // Primary styles
-        primary: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralForegroundOnBrand)), { boxShadow: react_theme_1.tokens.shadow2 + ", 0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 })),
-        // Size variations
-        small: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall))),
-        medium: {
-        /* defined in base styles */
-        },
-        large: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusLarge))),
-    });
-    var useRootIconOnlyStyles = react_1.makeStyles({
-        // Size variations
-        small: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingSmallWithIcon)), { minWidth: '24px', maxWidth: '24px' }),
-        medium: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingMedium)), { minWidth: '32px', maxWidth: '32px' }),
-        large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingLargeWithIcon)), { minWidth: '40px', maxWidth: '40px' }),
-    });
-    var useIconStyles = react_1.makeStyles({
-        // Size variations
-        small: (_h = {
-                fontSize: '20px',
-                height: '20px',
-                width: '20px'
-            },
-            _h[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalXS,
-            _h),
-        medium: {
-        /* defined in base styles */
-        },
-        large: (_j = {
-                fontSize: '24px',
-                height: '24px',
-                width: '24px'
-            },
-            _j[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalSNudge,
-            _j),
-        // Icon position variations
-        before: {
-            marginRight: "var(" + iconSpacingVar + ")",
-        },
-        after: {
-            marginLeft: "var(" + iconSpacingVar + ")",
-        },
-    });
-    var useButtonStyles_unstable = function (state) {
-        var rootBaseClassName = useRootBaseClassName();
-        var iconBaseClassName = useIconBaseClassName();
-        var rootStyles = useRootStyles();
-        var rootDisabledStyles = useRootDisabledStyles();
-        var rootFocusStyles = useRootFocusStyles();
-        var rootIconOnlyStyles = useRootIconOnlyStyles();
-        var iconStyles = useIconStyles();
-        var appearance = state.appearance, disabled = state.disabled, disabledFocusable = state.disabledFocusable, icon = state.icon, iconOnly = state.iconOnly, iconPosition = state.iconPosition, shape = state.shape, size = state.size;
-        state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], 
-        // Disabled styles
-        (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], 
-        // Focus styles
-        appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], 
-        // Icon-only styles
-        iconOnly && rootIconOnlyStyles[size], 
-        // User provided class name
-        state.root.className);
-        if (state.icon) {
-            state.icon.className = react_1.mergeClasses(exports.buttonClassNames.icon, iconBaseClassName, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
-        }
-        return state;
-    };
-    exports.useButtonStyles_unstable = useButtonStyles_unstable;
-});
-//# sourceMappingURL=useButtonStyles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Button',\n  icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  textDecorationLine: 'none',\n  verticalAlign: 'middle',\n\n  margin: 0,\n  overflow: 'hidden',\n\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n  fontFamily: tokens.fontFamilyBase,\n  outlineStyle: 'none',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground1Hover,\n\n    cursor: 'pointer',\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground1Pressed,\n\n    outlineStyle: 'none',\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n  minWidth: '96px',\n  borderRadius: tokens.borderRadiusMedium,\n\n  fontSize: tokens.fontSizeBase300,\n  fontWeight: tokens.fontWeightSemibold,\n  lineHeight: tokens.lineHeightBase300,\n\n  // Transition styles\n\n  transitionDuration: tokens.durationFaster,\n  transitionProperty: 'background, border, color',\n  transitionTimingFunction: tokens.curveEasyEase,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  // High contrast styles\n\n  '@media (forced-colors: active)': {\n    ':focus': {\n      borderColor: 'ButtonText',\n    },\n\n    ':hover': {\n      backgroundColor: 'HighlightText',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n      forcedColorAdjust: 'none',\n    },\n\n    ':hover:active': {\n      backgroundColor: 'HighlightText',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  // Focus styles\n\n  ...createCustomFocusIndicatorStyle({\n    borderColor: tokens.colorTransparentStroke,\n    borderRadius: tokens.borderRadiusMedium,\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n\n  fontSize: '20px',\n  height: '20px',\n  width: '20px',\n\n  [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('HighlightText'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n\n  // Size variations\n  small: {\n    minWidth: '64px',\n    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n    ...shorthands.borderRadius(buttonSpacingSmall),\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  smallWithIcon: {\n    paddingBottom: buttonSpacingSmallWithIcon,\n    paddingTop: buttonSpacingSmallWithIcon,\n  },\n  medium: {\n    /* defined in base styles */\n  },\n  large: {\n    minWidth: '96px',\n    ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase400,\n  },\n  largeWithIcon: {\n    paddingBottom: buttonSpacingLargeWithIcon,\n    paddingTop: buttonSpacingLargeWithIcon,\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'ButtonFace',\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'ButtonFace',\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  // Shape variations\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {\n    /* The rounded styles are exactly the same as the base styles. */\n  },\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  }),\n\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  }),\n  medium: {\n    /* defined in base styles */\n  },\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(buttonSpacingSmallWithIcon),\n\n    minWidth: '24px',\n    maxWidth: '24px',\n  },\n  medium: {\n    ...shorthands.padding(buttonSpacingMedium),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.padding(buttonSpacingLargeWithIcon),\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Size variations\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalXS,\n  },\n  medium: {\n    /* defined in base styles */\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: `var(${iconSpacingVar})`,\n  },\n  after: {\n    marginLeft: `var(${iconSpacingVar})`,\n  },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n    rootBaseClassName,\n\n    appearance && rootStyles[appearance],\n\n    rootStyles[size],\n    icon && size === 'small' && rootStyles.smallWithIcon,\n    icon && size === 'large' && rootStyles.largeWithIcon,\n    rootStyles[shape],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // Focus styles\n    appearance === 'primary' && rootFocusStyles.primary,\n    rootFocusStyles[size],\n    rootFocusStyles[shape],\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      buttonClassNames.icon,\n      iconBaseClassName,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}

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

@@ -1,18 +0,0 @@
-define(["require", "exports", "react", "./renderCompoundButton", "./useCompoundButton", "./useCompoundButtonStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, renderCompoundButton_1, useCompoundButton_1, useCompoundButtonStyles_1, react_shared_contexts_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.CompoundButton = void 0;
-    /**
-     * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
-     */
-    exports.CompoundButton = React.forwardRef(function (props, ref) {
-        var state = useCompoundButton_1.useCompoundButton_unstable(props, ref);
-        useCompoundButtonStyles_1.useCompoundButtonStyles_unstable(state);
-        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useCompoundButtonStyles_unstable;
-        useCustomStyles(state);
-        return renderCompoundButton_1.renderCompoundButton_unstable(state);
-        // Casting is required due to lack of distributive union to support unions on @types/react
-    });
-    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":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,cAAc,GAA6C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClG,IAAM,KAAK,GAAG,8CAA0B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAErD,0DAAgC,CAAC,KAAK,CAAC,CAAC;QAEhC,IAAkC,eAAe,GAAK,oDAA4B,EAAE,iCAAnC,CAAoC;QAC7F,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,oDAA6B,CAAC,KAAK,CAAC,CAAC;QAC5C,0FAA0F;IAC5F,CAAC,CAA6C,CAAC;IAE/C,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCompoundButton_unstable(props, ref);\n\n  useCompoundButtonStyles_unstable(state);\n\n  const { useCompoundButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderCompoundButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"]}

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":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Container that wraps the children and the secondaryContent slot.\n   */\n  contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components'>;\n"]}

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

@@ -1,12 +0,0 @@
-define(["require", "exports", "tslib", "./CompoundButton", "./CompoundButton.types", "./renderCompoundButton", "./useCompoundButton", "./useCompoundButtonStyles"], function (require, exports, tslib_1, CompoundButton_1, CompoundButton_types_1, renderCompoundButton_1, useCompoundButton_1, useCompoundButtonStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassNames = void 0;
-    tslib_1.__exportStar(CompoundButton_1, exports);
-    tslib_1.__exportStar(CompoundButton_types_1, exports);
-    tslib_1.__exportStar(renderCompoundButton_1, exports);
-    tslib_1.__exportStar(useCompoundButton_1, exports);
-    Object.defineProperty(exports, "compoundButtonClassNames", { enumerable: true, get: function () { return useCompoundButtonStyles_1.compoundButtonClassNames; } });
-    Object.defineProperty(exports, "useCompoundButtonStyles_unstable", { enumerable: true, get: function () { return useCompoundButtonStyles_1.useCompoundButtonStyles_unstable; } });
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/index.ts"],"names":[],"mappings":";;;;IAAA,gDAAiC;IACjC,sDAAuC;IACvC,sDAAuC;IACvC,mDAAoC;IAC3B,mIAAA,wBAAwB,OAAA;IAAE,2IAAA,gCAAgC,OAAA","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}