npm - @fluentui/react-button - Versions diffs - 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230228-0425.1 - Mend

@fluentui/react-button 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230228-0425.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (134) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Thu, 23 Feb 2023 21:23:06 GMT",
-      "tag": "@fluentui/react-button_v0.0.0-nightly-20230223-2115.1",
-      "version": "0.0.0-nightly-20230223-2115.1",
+      "date": "Tue, 28 Feb 2023 04:34:30 GMT",
+      "tag": "@fluentui/react-button_v0.0.0-nightly-20230228-0425.1",
+      "version": "0.0.0-nightly-20230228-0425.1",
       "comments": {
         "prerelease": [
           {
@@ -16,38 +16,38 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230223-2115.1",
-            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230228-0425.1",
+            "commit": "8c1594112af8a99c5f4d2da191968d9247bdb269"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230223-2115.1",
-            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
+            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230228-0425.1",
+            "commit": "8c1594112af8a99c5f4d2da191968d9247bdb269"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230223-2115.1",
-            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230228-0425.1",
+            "commit": "8c1594112af8a99c5f4d2da191968d9247bdb269"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230223-2115.1",
-            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230228-0425.1",
+            "commit": "8c1594112af8a99c5f4d2da191968d9247bdb269"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230223-2115.1",
-            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230228-0425.1",
+            "commit": "8c1594112af8a99c5f4d2da191968d9247bdb269"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230223-2115.1",
-            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230228-0425.1",
+            "commit": "8c1594112af8a99c5f4d2da191968d9247bdb269"
           }
         ]
       }

package/CHANGELOG.md CHANGED Viewed

@@ -1,23 +1,23 @@
 # Change Log - @fluentui/react-button
-This log was last generated on Thu, 23 Feb 2023 21:23:06 GMT and should not be manually modified.
+This log was last generated on Tue, 28 Feb 2023 04:34:30 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20230223-2115.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20230223-2115.1)
+## [0.0.0-nightly-20230228-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20230228-0425.1)
-Thu, 23 Feb 2023 21:23:06 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.2.5..@fluentui/react-button_v0.0.0-nightly-20230223-2115.1)
+Tue, 28 Feb 2023 04:34:30 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.2.5..@fluentui/react-button_v0.0.0-nightly-20230228-0425.1)
 ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/8c1594112af8a99c5f4d2da191968d9247bdb269) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20230228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/8c1594112af8a99c5f4d2da191968d9247bdb269) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/8c1594112af8a99c5f4d2da191968d9247bdb269) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/8c1594112af8a99c5f4d2da191968d9247bdb269) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/8c1594112af8a99c5f4d2da191968d9247bdb269) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/8c1594112af8a99c5f4d2da191968d9247bdb269) by beachball)
 ## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.2.5)

package/lib/Button.js.map CHANGED Viewed

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

package/lib/CompoundButton.js.map CHANGED Viewed

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

package/lib/MenuButton.js.map CHANGED Viewed

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

package/lib/SplitButton.js.map CHANGED Viewed

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

package/lib/ToggleButton.js.map CHANGED Viewed

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

package/lib/components/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,~~YAAYA~~,~~WAAW~~;~~AACvB~~,SAASC,qBAAqB,QAAQ;~~AACtC~~,SAASC,kBAAkB,QAAQ;~~AACnC~~,SAASC,wBAAwB,QAAQ;~~AAIzC~~;;;AAGA,OAAO,MAAMC,~~sBAA2CJ~~,~~MAAMK~~,UAAU,CAAC,CAACC,~~OAAOC~~,~~QAAQ~~;~~EACvF~~,MAAMC,~~QAAQN~~,~~mBAAmBI~~,~~OAAOC~~;~~EAExCJ~~,~~yBAAyBK~~;~~EAEzB~~,OAAOP,~~sBAAsBO~~;~~EAC7B~~;AACF;;~~AAEAJ~~,~~OAAOK~~,WAAW,GAAG","names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","Button","forwardRef","props","ref","state","displayName"],"sources":["~~../../../~~src/components/Button/Button.tsx"],"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';\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 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"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,wBAAwB,QAAQ,mBAAmB;AAI5D;;;AAGA,OAAO,MAAMC,MAAM,gBAAqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGN,kBAAkB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAE5CJ,wBAAwB,CAACK,KAAK,CAAC;EAE/B,OAAOP,qBAAqB,CAACO,KAAK,CAAC;EACnC;AACF,CAAC,CAAqC;;AAEtCJ,MAAM,CAACK,WAAW,GAAG,QAAQ","names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","Button","forwardRef","props","ref","state","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/Button.tsx"],"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';\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 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/components/Button/Button.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA~~","~~names~~":[],"sources":["~~../../../~~src/components/Button/Button.types.ts"],"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"]}
1	+ {"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/components/Button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA,cAAc;AAGd,cAAc;AACd,cAAc;AACd,SAASA,gBAAgB,EAAEC,wBAAwB,QAAQ~~","~~names~~":["~~buttonClassNames~~","~~useButtonStyles_unstable"],"~~sources":["~~../../../~~src/components/Button/index.ts"],"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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC","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/components/Button/renderButton.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@swc/helpers/src/_extends.mjs";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
@@ -13,6 +12,12 @@ export const renderButton_unstable = state => {
     iconOnly,
     iconPosition
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root), iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, _extends({}, slotProps.icon)), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, _extends({}, slotProps.icon)));
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }));
 };
 //# sourceMappingURL=renderButton.js.map

package/lib/components/Button/renderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";AAAA,~~YAAYA~~,~~WAAW~~;~~AACvB~~,SAASC,QAAQ,QAAQ;~~AAGzB~~;;;AAGA,OAAO,MAAMC,~~wBAAyBC~~,~~SAAuB~~;~~EAC3D~~,MAAM;IAAEC;~~IAAOC~~;EAAS,CAAE,GAAGJ,~~SAAsBE~~;~~EACnD~~,MAAM;IAAEG;~~IAAUC~~;EAAY,CAAE,GAAGJ;~~EAEnC~~,oBACEH,oBAACI,~~MAAMI~~,IAAI,~~eAAKH~~,~~UAAUG~~,~~IAAI~~,GAC3BD,~~iBAAiB~~,~~WAAWH~~,~~MAAMK~~,IAAI,iBAAIT,oBAACI,~~MAAMK~~,IAAI,~~eAAKJ~~,~~UAAUI~~,~~IAAI~~,~~IACxE~~,CAACH,~~YAAYH~~,~~MAAMK~~,IAAI,CAACE,QAAQ,EAChCH,~~iBAAiB~~,~~WAAWH~~,~~MAAMK~~,IAAI,iBAAIT,oBAACI,~~MAAMK~~,IAAI,~~eAAKJ~~,~~UAAUI~~,~~IAAI~~;~~AAG/E~~","names":["React","getSlots","renderButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","children"],"sources":["~~../../../~~src/components/Button/renderButton.tsx"],"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"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EACzD,MAAM;IAAEG,QAAQ;IAAEC;EAAY,CAAE,GAAGJ,KAAK;EAExC,oBACEH,oBAACI,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BD,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACK,IAAI,iBAAIT,oBAACI,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EAC5E,CAACH,QAAQ,IAAIH,KAAK,CAACK,IAAI,CAACE,QAAQ,EAChCH,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACK,IAAI,iBAAIT,oBAACI,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CAClE;AAEjB,CAAC","names":["React","getSlots","renderButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","children"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/renderButton.tsx"],"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/components/Button/useButton.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useARIAButtonShorthand } from '@fluentui/react-aria';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 import { useButtonContext } from '../../contexts/ButtonContext';
@@ -19,7 +18,7 @@ export const useButton_unstable = (props, ref) => {
     icon,
     iconPosition = 'before',
     shape = 'rounded',
-    size = contextSize ?? 'medium'
+    size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'
   } = props;
   const iconShorthand = resolveShorthand(icon);
   return {

package/lib/components/Button/useButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"~~AAAA~~,~~YAAYA~~,~~WAAW;AACvB~~,~~SAA8BC~~,sBAAsB~~,QAAQ~~;~~AAC5D~~,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;~~AACxD~~,SAASC,gBAAgB,QAAQ;~~AAGjC~~;;;;;AAKA,OAAO,MAAMC,~~qBAAqB~~,CAChCC,~~OACAC~~,~~QACgB~~;~~EAChB~~,MAAM;IAAEC,~~MAAMC~~;EAAW,CAAE,GAAGL;~~EAC9B~~,MAAM;IACJM,~~aAAa~~;~~IACbC~~,~~KAAK~~;~~IACLC~~,~~WAAW~~,KAAK;IAChBC,~~oBAAoB~~,KAAK;IACzBC~~;IACAC~~,~~eAAe~~;~~IACfC~~,QAAQ;~~IACRR~~,~~OAAOC~~,~~eAAe~~;EAAQ,CAC/B,GAAGH;~~EACJ~~,MAAMW,~~gBAAgBd~~,~~iBAAiBW~~;~~EAEvC~~,OAAO;IACL;IACAJ;~~IACAE~~;~~IACAC~~;~~IACAE~~;~~IACAC~~;~~IACAR~~;~~IAEA~~;IACAU,~~UAAUC~~,~~QAAQF~~,~~6EAAeG~~,QAAQ,KAAI,CAACd,~~MAAMc~~,QAAQ;~~IAE5D~~;IACAC,~~YAAY~~;MACVC,~~MAAM~~;~~MACNR~~,~~MAAM~~;~~IACR~~;~~IAEAQ~~,~~MAAMpB~~,~~sBACJS~~,~~IACAV~~,~~uBAAiDK~~,~~OAAO~~;MACtDiB,~~UAAU~~,IAAI;MACdC,~~cAAc~~;QACZjB,~~KAAKA~~;~~QACLkB~~,~~MAAM~~;~~MACR~~;~~IACF~~;~~IAEFX~~,~~MAAMG;EACR;AACF~~","names":["~~React","~~useARIAButtonShorthand","getNativeElementProps","resolveShorthand","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","iconOnly","Boolean","children","components","root","required","defaultProps","type"],"sources":["~~../../../~~src/components/Button/useButton.ts"],"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"]}
1	+ {"version":3,"mappings":"AACA,SAA8BA,sBAAsB,QAAQ,sBAAsB;AAClF,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnF,SAASC,gBAAgB,QAAQ,8BAA8B;AAG/D;;;;;AAKA,OAAO,MAAMC,kBAAkB,GAAG,CAChCC,KAAkB,EAClBC,GAAqD,KACtC;EACf,MAAM;IAAEC,IAAI,EAAEC;EAAW,CAAE,GAAGL,gBAAgB,EAAE;EAChD,MAAM;IACJM,UAAU,GAAG,WAAW;IACxBC,EAAE,GAAG,QAAQ;IACbC,QAAQ,GAAG,KAAK;IAChBC,iBAAiB,GAAG,KAAK;IACzBC,IAAI;IACJC,YAAY,GAAG,QAAQ;IACvBC,KAAK,GAAG,SAAS;IACjBR,IAAI,GAAGC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAQ,CAC/B,GAAGH,KAAK;EACT,MAAMW,aAAa,GAAGd,gBAAgB,CAACW,IAAI,CAAC;EAE5C,OAAO;IACL;IACAJ,UAAU;IACVE,QAAQ;IACRC,iBAAiB;IACjBE,YAAY;IACZC,KAAK;IACLR,IAAI;IAEJ;IACAU,QAAQ,EAAEC,OAAO,CAAC,cAAa,aAAbF,aAAa,uBAAbA,aAAa,CAAEG,QAAQ,KAAI,CAACd,KAAK,CAACc,QAAQ,CAAC;IAE7D;IACAC,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdR,IAAI,EAAE;KACP;IAEDQ,IAAI,EAAEpB,qBAAqB,CACzBS,EAAE,EACFV,sBAAsB,CAA2BK,KAAK,EAAE;MACtDiB,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZjB,GAAG,EAAEA,GAAuD;QAC5DkB,IAAI,EAAE;;KAET,CAAC,CACH;IACDX,IAAI,EAAEG;GACP;AACH,CAAC","names":["useARIAButtonShorthand","getNativeElementProps","resolveShorthand","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","iconOnly","Boolean","children","components","root","required","defaultProps","type"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButton.ts"],"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/components/Button/useButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ;AAC1D,SAASC,+BAA+B,QAAQ;AAChD,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,2BAA+BC,YAAY,QAAQ;AAItE,OAAO,MAAMC,mBAAgD;EAC3DC,MAAM;EACNC,MAAM;AACR;AAEA,MAAMC,iBAAiB;AAEvB,MAAMC,qBAAqB;AAC3B,MAAMC,6BAA6B;AACnC,MAAMC,sBAAsB;AAC5B,MAAMC,qBAAqB;AAC3B,MAAMC,6BAA6B;AAEnC,MAAMC,oCAAuBC,g/IAoG7B;AAEA,MAAMC,oCAAuBD,qbAU7B;AAEA,MAAME,6BAAgBC;EAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;EAAAA;AAAAA;EAAAA;EAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;AAAAA,EA0ItB;AAEA,MAAMC,qCAAwBD;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;AAAAA;EAAAA;EAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;AAAAA,EAuH9B;AAEA,MAAME,kCAAqBF;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;AAAAA;EAAAA;EAAAA;EAAAA;AAAAA,EA4B3B;AAEA,MAAMG,qCAAwBH;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;AAAAA;EAAAA;AAAAA,EAoB9B;AAEA,MAAMI,6BAAgBJ;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;EAAAA;EAAAA;IAAAA;EAAAA;AAAAA;EAAAA;AAAAA,EA2BtB;AAEA,OAAO,MAAMK,2BAA4BC,SAAoC;EAC3E,MAAMC,oBAAoBX;EAC1B,MAAMY,oBAAoBV;EAE1B,MAAMW,aAAaV;EACnB,MAAMW,qBAAqBT;EAC3B,MAAMU,kBAAkBT;EACxB,MAAMU,qBAAqBT;EAC3B,MAAMU,aAAaT;EAEnB,MAAM;IAAEU;IAAYC;IAAUC;IAAmB3B;IAAM4B;IAAUC;IAAcC;IAAOC;EAAI,CAAE,GAAGd;EAE/FA,MAAMlB,IAAI,CAACiC,SAAS,GAAGnC,aACrBC,iBAAiBC,IAAI,EACrBmB,mBAEAO,cAAcL,UAAU,CAACK,WAAW,EAEpCL,UAAU,CAACW,KAAK,EAChB/B,QAAQ+B,SAAS,WAAWX,WAAWa,aAAa,EACpDjC,QAAQ+B,SAAS,WAAWX,WAAWc,aAAa,EACpDd,UAAU,CAACU,MAAM;EAGjB;EAACJ,aAAYC,iBAAgB,KAAMN,mBAAmBc,IAAI,EAC1D,CAACT,YAAYC,iBAAgB,KAAMN,mBAAmBe,YAAY,EAClEX,eAAeC,YAAYC,iBAAgB,KAAMN,kBAAkB,CAACI,WAAW;EAE/E;EACAA,eAAe,aAAaH,gBAAgBe,OAAO,EACnDf,eAAe,CAACS,KAAK,EACrBT,eAAe,CAACQ,MAAM;EAEtB;EACAF,YAAYL,kBAAkB,CAACQ,KAAK;EAEpC;EACAd,MAAMlB,IAAI,CAACiC,SAAS;EAGtB,IAAIf,MAAMjB,IAAI,EAAE;IACdiB,MAAMjB,IAAI,CAACgC,SAAS,GAAGnC,aACrBC,iBAAiBE,IAAI,EACrBmB,mBACAF,MAAMlB,IAAI,CAACuC,QAAQ,KAAKC,aAAatB,MAAMlB,IAAI,CAACuC,QAAQ,KAAK,IAAI,IAAId,UAAU,CAACK,aAAa,EAC7FL,UAAU,CAACO,KAAK,EAChBd,MAAMjB,IAAI,CAACgC,SAAS;EAExB;EAEA,OAAOf;AACT","names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","makeResetStyles","useIconBaseClassName","useRootStyles","makeStyles","useRootDisabledStyles","useRootFocusStyles","useRootIconOnlyStyles","useIconStyles","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","smallWithIcon","largeWithIcon","base","highContrast","primary","children","undefined"],"sources":["../../../src/components/Button/useButtonStyles.ts"],"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"]}
1	+ {"version":3,"mappings":"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","names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","useIconBaseClassName","useRootStyles","useRootDisabledStyles","useRootFocusStyles","useRootIconOnlyStyles","useIconStyles","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","smallWithIcon","largeWithIcon","base","highContrast","primary","children","undefined"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"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/components/CompoundButton/CompoundButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,~~YAAYA~~,~~WAAW~~;~~AACvB~~,SAASC,6BAA6B,QAAQ;~~AAC9C~~,SAASC,0BAA0B,QAAQ;~~AAC3C~~,SAASC,gCAAgC,QAAQ;~~AAIjD~~;;;AAGA,OAAO,MAAMC,~~8BAA2DJ~~,~~MAAMK~~,UAAU,CAAC,CAACC,~~OAAOC~~,~~QAAQ~~;~~EACvG~~,MAAMC,~~QAAQN~~,~~2BAA2BI~~,~~OAAOC~~;~~EAEhDJ~~,~~iCAAiCK~~;~~EAEjC~~,OAAOP,~~8BAA8BO~~;~~EACrC~~;AACF;;~~AAEAJ~~,~~eAAeK~~,WAAW,GAAG","names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"sources":["~~../../../~~src/components/CompoundButton/CompoundButton.tsx"],"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';\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 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"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,gCAAgC,QAAQ,2BAA2B;AAI5E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGN,0BAA0B,CAACI,KAAK,EAAEC,GAAG,CAAC;EAEpDJ,gCAAgC,CAACK,KAAK,CAAC;EAEvC,OAAOP,6BAA6B,CAACO,KAAK,CAAC;EAC3C;AACF,CAAC,CAA6C;;AAE9CJ,cAAc,CAACK,WAAW,GAAG,gBAAgB","names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx"],"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';\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 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/components/CompoundButton/CompoundButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA~~","~~names~~":[],"sources":["~~../../../~~src/components/CompoundButton/CompoundButton.types.ts"],"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"]}
1	+ {"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/components/CompoundButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,wBAAwB,EAAEC,gCAAgC,QAAQ~~","~~names~~":["~~compoundButtonClassNames~~","~~useCompoundButtonStyles_unstable"],"~~sources":["~~../../../~~src/components/CompoundButton/index.ts"],"sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}

package/lib/components/CompoundButton/renderCompoundButton.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@swc/helpers/src/_extends.mjs";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
@@ -13,6 +12,16 @@ export const renderCompoundButton_unstable = state => {
     iconOnly,
     iconPosition
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root), iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, _extends({}, slotProps.icon)), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, _extends({}, slotProps.contentContainer), slotProps.root.children, slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, _extends({}, slotProps.secondaryContent))), iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, _extends({}, slotProps.icon)));
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, {
+    ...slotProps.contentContainer
+  }, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, {
+    ...slotProps.secondaryContent
+  })), iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }));
 };
 //# sourceMappingURL=renderCompoundButton.js.map

package/lib/components/CompoundButton/renderCompoundButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";AAAA,~~YAAYA~~,~~WAAW~~;~~AACvB~~,SAASC,QAAQ,QAAQ;~~AAGzB~~;;;AAGA,OAAO,MAAMC,~~gCAAiCC~~,~~SAA+B~~;~~EAC3E~~,MAAM;IAAEC;~~IAAOC~~;EAAS,CAAE,GAAGJ,~~SAA8BE~~;~~EAC3D~~,MAAM;IAAEG;~~IAAUC~~;EAAY,CAAE,GAAGJ;~~EAEnC~~,oBACEH,oBAACI,~~MAAMI~~,IAAI,~~eAAKH~~,~~UAAUG~~,~~IAAI~~,GAC3BD,~~iBAAiB~~,~~WAAWH~~,~~MAAMK~~,IAAI,iBAAIT,oBAACI,~~MAAMK~~,IAAI,~~eAAKJ~~,~~UAAUI~~,~~IAAI~~,~~IACxE~~,CAACH,~~yBACAN~~,oBAACI,~~MAAMM~~,gBAAgB,~~eAAKL~~,~~UAAUK~~,~~gBAAgB~~,GACnDL,~~UAAUG~~,IAAI,CAACG,QAAQ,EACvBP,~~MAAMQ~~,gBAAgB,iBAAIZ,oBAACI,~~MAAMQ~~,gBAAgB,~~eAAKP~~,~~UAAUO~~,~~gBAAgB~~,~~KAGpFL~~,~~iBAAiB~~,~~WAAWH~~,~~MAAMK~~,IAAI,iBAAIT,oBAACI,~~MAAMK~~,IAAI,~~eAAKJ~~,~~UAAUI~~,~~IAAI~~;~~AAG/E~~","names":["React","getSlots","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"sources":["~~../../../~~src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/*\n Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n const { slots, slotProps } = getSlots<CompoundButtonSlots>(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 && (\n <slots.contentContainer {...slotProps.contentContainer}>\n {slotProps.root.children}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.contentContainer>\n )}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAsBE,KAAK,CAAC;EACjE,MAAM;IAAEG,QAAQ;IAAEC;EAAY,CAAE,GAAGJ,KAAK;EAExC,oBACEH,oBAACI,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BD,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACK,IAAI,iBAAIT,oBAACI,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EAC5E,CAACH,QAAQ,iBACRN,oBAACI,KAAK,CAACM,gBAAgB;IAAA,GAAKL,SAAS,CAACK;EAAgB,GACnDL,SAAS,CAACG,IAAI,CAACG,QAAQ,EACvBP,KAAK,CAACQ,gBAAgB,iBAAIZ,oBAACI,KAAK,CAACQ,gBAAgB;IAAA,GAAKP,SAAS,CAACO;EAAgB,EAAI,CAExF,EACAL,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACK,IAAI,iBAAIT,oBAACI,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CAClE;AAEjB,CAAC","names":["React","getSlots","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/*\n Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n const { slots, slotProps } = getSlots<CompoundButtonSlots>(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 && (\n <slots.contentContainer {...slotProps.contentContainer}>\n {slotProps.root.children}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.contentContainer>\n )}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"]}

package/lib/components/CompoundButton/useCompoundButton.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { useButton_unstable } from '../Button/index';
 /**
@@ -6,13 +5,12 @@ import { useButton_unstable } from '../Button/index';
  * @param props - User provided props to the CompoundButton component.
  * @param ref - User provided ref to be passed to the CompoundButton component.
  */
-export const useCompoundButton_unstable = (param, ref) => {
-  let {
-    contentContainer,
-    secondaryContent,
-    ...props
-  } = param;
-  var _state_icon, _state_secondaryContent;
+export const useCompoundButton_unstable = ({
+  contentContainer,
+  secondaryContent,
+  ...props
+}, ref) => {
+  var _a, _b;
   const state = {
     // Button state
     ...useButton_unstable(props, ref),
@@ -29,7 +27,7 @@ export const useCompoundButton_unstable = (param, ref) => {
     secondaryContent: resolveShorthand(secondaryContent)
   };
   // Recalculate iconOnly to take into account secondaryContent.
-  state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
+  state.iconOnly = Boolean(((_a = state.icon) === null || _a === void 0 ? void 0 : _a.children) && !props.children && !((_b = state.secondaryContent) === null || _b === void 0 ? void 0 : _b.children));
   return state;
 };
 //# sourceMappingURL=useCompoundButton.js.map

package/lib/components/CompoundButton/useCompoundButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"~~AAAA~~,~~YAAYA~~,~~WAAW;AACvB,SAASC,~~gBAAgB,QAAQ;~~AACjC~~,SAASC,kBAAkB,QAAQ;~~AAGnC~~;;;;;AAKA,OAAO,MAAMC,~~6BAA6B~~,~~QAExCC~~,~~QACwB~~;~~MAFxB~~;~~IAAEC~~;~~IAAkBC;IAAkB~~,GAAGC;~~EAAAA~~,~~CAA4B;MAmB5CC~~,~~aAA4CA;EAhBrE~~,~~MAAMA~~,~~QAA6B~~;IACjC;IACA,GAAGN,~~mBAAmBK~~,~~OAAOH~~,~~IAAI~~;IAEjC;~~IACAK~~,~~YAAY~~;MACVC,~~MAAM~~;~~MACNC~~,MAAM;~~MACNN~~,~~kBAAkB~~;~~MAClBC~~,~~kBAAkB~~;~~IACpB~~;~~IACAD~~,~~kBAAkBJ~~,~~iBAAiBI~~,~~kBAAkB~~;~~MAAEO~~,~~UAAU~~;~~IAAK~~;~~IACtEN~~,~~kBAAkBL~~,~~iBAAiBK~~;~~EACrC~~;~~EAEA~~;~~EACAE~~,~~MAAMK~~,QAAQ,GAAGC,~~QAAQN~~,~~sBAAMG~~,IAAI,~~cAAVH~~,~~8CAAYO,~~QAAQ,KAAI,~~CAACR~~,~~MAAMQ~~,QAAQ,IAAI,~~EAACP~~,~~iCAAMF~~,gBAAgB,~~cAAtBE~~,~~sEAAwBO,~~QAAQ,~~CAAD~~;~~EAEpG~~,OAAOP;~~AACT~~","names":["~~React","~~resolveShorthand","useButton_unstable","useCompoundButton_unstable","~~ref","~~contentContainer","secondaryContent","props","state","components","root","icon","required","iconOnly","Boolean","children"],"sources":["~~../../../~~src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/*\n Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): CompoundButtonState => {\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,iBAAiB;AAGpD;;;;;AAKA,OAAO,MAAMC,0BAA0B,GAAG,CACxC;EAAEC,gBAAgB;EAAEC,gBAAgB;EAAE,GAAGC;AAAK,CAAuB,EACrEC,GAAqD,KAC9B;;EACvB,MAAMC,KAAK,GAAwB;IACjC;IACA,GAAGN,kBAAkB,CAACI,KAAK,EAAEC,GAAG,CAAC;IAEjC;IACAE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,IAAI,EAAE,MAAM;MACZP,gBAAgB,EAAE,MAAM;MACxBC,gBAAgB,EAAE;KACnB;IACDD,gBAAgB,EAAEH,gBAAgB,CAACG,gBAAgB,EAAE;MAAEQ,QAAQ,EAAE;IAAI,CAAE,CAAC;IACxEP,gBAAgB,EAAEJ,gBAAgB,CAACI,gBAAgB;GACpD;EAED;EACAG,KAAK,CAACK,QAAQ,GAAGC,OAAO,CAAC,YAAK,CAACH,IAAI,0CAAEI,QAAQ,KAAI,CAACT,KAAK,CAACS,QAAQ,IAAI,EAAC,WAAK,CAACV,gBAAgB,0CAAEU,QAAQ,EAAC;EAEtG,OAAOP,KAAK;AACd,CAAC","names":["resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","required","iconOnly","Boolean","children"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/*\n Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): CompoundButtonState => {\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"]}

package/lib/components/CompoundButton/useCompoundButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ;AACvB,SAASC,UAAU,EAAEC,YAAY,kBAAoB;AACrD,SAASC,wBAAwB,QAAQ;AAIzC,OAAO,MAAMC,2BAAgE;EAC3EC,MAAM;EACNC,MAAM;EACNC,kBAAkB;EAClBC,kBAAkB;AACpB;AAEA,MAAMC,6BAAgBC;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;EAAAA;AAAAA;EAAAA;EAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;IAAAA;EAAAA;AAAAA,EAwKtB;AAEA,MAAMC,qCAAwBD;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;IAAAA;EAAAA;AAAAA;EAAAA;AAAAA,EAoB9B;AAEA,MAAME,6BAAgBF;EAAAA;IAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;EAAAA;EAAAA;IAAAA;EAAAA;AAAAA;EAAAA;AAAAA,EAetB;AAEA,MAAMG,yCAA4BH;EAAAA;IAAAA;IAAAA;IAAAA;EAAAA;AAAAA;EAAAA;AAAAA,EAOlC;AAEA,MAAMI,yCAA4BJ;EAAAA;IAAAA;IAAAA;EAAAA;EAAAA;IAAAA;EAAAA;EAAAA;IAAAA;EAAAA;EAAAA;IAAAA;EAAAA;AAAAA;EAAAA;AAAAA,EAiBlC;AAEA,OAAO,MAAMK,mCAAoCC,SAAoD;EACnG,MAAMC,aAAaR;EACnB,MAAMS,qBAAqBP;EAC3B,MAAMQ,aAAaP;EACnB,MAAMQ,yBAAyBP;EAC/B,MAAMQ,yBAAyBP;EAE/B,MAAM;IAAEQ;IAAYC;IAAUC;IAAmBC;IAAUC;IAAcC;EAAI,CAAE,GAAGX;EAElFA,MAAMX,IAAI,CAACuB,SAAS,GAAG1B,aACrBE,yBAAyBC,IAAI;EAE7B;EACAY,WAAWY,IAAI,EACfZ,WAAWa,YAAY,EACvBR,cAAcL,UAAU,CAACK,WAAW,EACpCL,UAAU,CAACU,KAAK;EAGhB;EAACJ,aAAYC,iBAAgB,KAAMP,WAAWM,QAAQ,EACtD,CAACA,YAAYC,iBAAgB,KAAMP,WAAWc,oBAAoB;EAElE;EACAN,YAAYP,kBAAkB,CAACS,KAAK;EAEpC;EACAX,MAAMX,IAAI,CAACuB,SAAS;EAGtBZ,MAAMT,gBAAgB,CAACqB,SAAS,GAAG1B,aACjCE,yBAAyBG,gBAAgB,EACzCa,uBAAuBS,IAAI,EAC3Bb,MAAMT,gBAAgB,CAACqB,SAAS;EAGlC,IAAIZ,MAAMV,IAAI,EAAE;IACdU,MAAMV,IAAI,CAACsB,SAAS,GAAG1B,aACrBE,yBAAyBE,IAAI,EAC7Ba,WAAWU,IAAI,EACfb,MAAMX,IAAI,CAAC2B,QAAQ,KAAKC,aAAajB,MAAMX,IAAI,CAAC2B,QAAQ,KAAK,IAAI,IAAIb,UAAU,CAACO,aAAa,EAC7FV,MAAMV,IAAI,CAACsB,SAAS;EAExB;EAEA,IAAIZ,MAAMR,gBAAgB,EAAE;IAC1BQ,MAAMR,gBAAgB,CAACoB,SAAS,GAAG1B,aACjCE,yBAAyBI,gBAAgB,EACzCa,uBAAuBQ,IAAI,EAC3BR,sBAAsB,CAACM,KAAK,EAC5BX,MAAMR,gBAAgB,CAACoB,SAAS;EAEpC;EAEAzB,yBAAyBa;EAEzB,OAAOA;AACT","names":["tokens","shorthands","mergeClasses","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","makeStyles","useRootIconOnlyStyles","useIconStyles","useContentContainerStyles","useSecondaryContentStyles","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","size","className","base","highContrast","disabledHighContrast","children","undefined"],"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles /\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText',\n },\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n\n // Size variations\n small: {\n ...shorthands.padding(\n tokens.spacingHorizontalS,\n tokens.spacingHorizontalS,\n tokens.spacingHorizontalMNudge,\n tokens.spacingHorizontalS,\n ),\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n medium: {\n ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(tokens.spacingHorizontalXS),\n\n maxWidth: '48px',\n minWidth: '48px',\n },\n medium: {\n ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n maxWidth: '52px',\n minWidth: '52px',\n },\n large: {\n ...shorthands.padding(tokens.spacingHorizontalS),\n\n maxWidth: '56px',\n minWidth: '56px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px',\n },\n\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n});\n\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular,\n },\n\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200,\n },\n medium: {\n fontSize: tokens.fontSizeBase200,\n },\n large: {\n fontSize: tokens.fontSizeBase300,\n },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n state.root.className = mergeClasses(\n compoundButtonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\n appearance && rootStyles[appearance],\n rootStyles[size],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast,\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n state.contentContainer.className = mergeClasses(\n compoundButtonClassNames.contentContainer,\n contentContainerStyles.base,\n state.contentContainer.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n compoundButtonClassNames.icon,\n iconStyles.base,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n state.icon.className,\n );\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n compoundButtonClassNames.secondaryContent,\n secondaryContentStyles.base,\n secondaryContentStyles[size],\n state.secondaryContent.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"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","names":["tokens","shorthands","mergeClasses","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","useRootIconOnlyStyles","useIconStyles","useContentContainerStyles","useSecondaryContentStyles","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","size","className","base","highContrast","disabledHighContrast","children","undefined"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles /\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText',\n },\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n\n // Size variations\n small: {\n ...shorthands.padding(\n tokens.spacingHorizontalS,\n tokens.spacingHorizontalS,\n tokens.spacingHorizontalMNudge,\n tokens.spacingHorizontalS,\n ),\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n medium: {\n ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(tokens.spacingHorizontalXS),\n\n maxWidth: '48px',\n minWidth: '48px',\n },\n medium: {\n ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n maxWidth: '52px',\n minWidth: '52px',\n },\n large: {\n ...shorthands.padding(tokens.spacingHorizontalS),\n\n maxWidth: '56px',\n minWidth: '56px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px',\n },\n\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n});\n\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular,\n },\n\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200,\n },\n medium: {\n fontSize: tokens.fontSizeBase200,\n },\n large: {\n fontSize: tokens.fontSizeBase300,\n },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n state.root.className = mergeClasses(\n compoundButtonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\n appearance && rootStyles[appearance],\n rootStyles[size],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootStyles.disabled,\n (disabled \|\| disabledFocusable) && rootStyles.disabledHighContrast,\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n state.contentContainer.className = mergeClasses(\n compoundButtonClassNames.contentContainer,\n contentContainerStyles.base,\n state.contentContainer.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n compoundButtonClassNames.icon,\n iconStyles.base,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n state.icon.className,\n );\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n compoundButtonClassNames.secondaryContent,\n secondaryContentStyles.base,\n secondaryContentStyles[size],\n state.secondaryContent.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"]}

package/lib/components/MenuButton/MenuButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,~~YAAYA~~,~~WAAW~~;~~AACvB~~,SAASC,yBAAyB,QAAQ;~~AAC1C~~,SAASC,sBAAsB,QAAQ;~~AACvC~~,SAASC,4BAA4B,QAAQ;~~AAI7C~~;;;;AAIA,OAAO,MAAMC,~~0BAAmDJ~~,~~MAAMK~~,UAAU,CAAC,CAACC,~~OAAOC~~,~~QAAQ~~;~~EAC/F~~,MAAMC,~~QAAQN~~,~~uBAAuBI~~,~~OAAOC~~;~~EAE5CJ~~,~~6BAA6BK~~;~~EAE7B~~,OAAOP,~~0BAA0BO~~;~~EACjC~~;AACF;;~~AAEAJ~~,~~WAAWK~~,WAAW,GAAG","names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"sources":["~~../../../~~src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n const state = useMenuButton_unstable(props, ref);\n\n useMenuButtonStyles_unstable(state);\n\n return renderMenuButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"]}
1	+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,4BAA4B,QAAQ,uBAAuB;AAIpE;;;;AAIA,OAAO,MAAMC,UAAU,gBAAyCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGN,sBAAsB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAEhDJ,4BAA4B,CAACK,KAAK,CAAC;EAEnC,OAAOP,yBAAyB,CAACO,KAAK,CAAC;EACvC;AACF,CAAC,CAAyC;;AAE1CJ,UAAU,CAACK,WAAW,GAAG,YAAY","names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n const state = useMenuButton_unstable(props, ref);\n\n useMenuButtonStyles_unstable(state);\n\n return renderMenuButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"]}

package/lib/components/MenuButton/MenuButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA~~","~~names~~":[],"sources":["~~../../../~~src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /*\n Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' \| 'disabledFocusable' \| 'disabled' \| 'shape' \| 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components' \| 'iconPosition'>;\n"]}
1	+ {"version":3,"file":"MenuButton.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/MenuButton.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 MenuButtonSlots = ButtonSlots & {\n /*\n Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' \| 'disabledFocusable' \| 'disabled' \| 'shape' \| 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components' \| 'iconPosition'>;\n"]}

package/lib/components/MenuButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,oBAAoB,EAAEC,4BAA4B,QAAQ~~","~~names~~":["~~menuButtonClassNames~~","~~useMenuButtonStyles_unstable"],"~~sources":["~~../../../~~src/components/MenuButton/index.ts"],"sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}

package/lib/components/MenuButton/renderMenuButton.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@swc/helpers/src/_extends.mjs";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
@@ -13,6 +12,12 @@ export const renderMenuButton_unstable = state => {
     icon,
     iconOnly
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root), slots.icon && /*#__PURE__*/React.createElement(slots.icon, _extends({}, slotProps.icon)), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/React.createElement(slots.menuIcon, _extends({}, slotProps.menuIcon)));
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
+    ...slotProps.icon
+  }), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/React.createElement(slots.menuIcon, {
+    ...slotProps.menuIcon
+  }));
 };
 //# sourceMappingURL=renderMenuButton.js.map