@fluentui/react-button 9.3.33 → 9.3.35

package/CHANGELOG.json

@@ -2,7 +2,109 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Thu, 24 Aug 2023 10:23:08 GMT",
+      "date": "Tue, 05 Sep 2023 13:23:21 GMT",
+      "tag": "@fluentui/react-button_v9.3.35",
+      "version": "9.3.35",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "eea6d93a62249ba4fba3347fb291c67ee1a3fb24",
+            "comment": "chore: migrate package to use JSX importSource"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "b93c2ac22355b6cb6f33dd509c6cd9c21f4fffc8",
+            "comment": "bumps @swc/helpers version to 0.5.1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.4",
+            "commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-aria to v9.3.34",
+            "commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.4",
+            "commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.3",
+            "commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.12.6",
+            "commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-theme to v9.1.12",
+            "commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-utilities to v9.13.1",
+            "commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 29 Aug 2023 12:57:33 GMT",
+      "tag": "@fluentui/react-button_v9.3.34",
+      "version": "9.3.34",
+      "comments": {
+        "patch": [
+          {
+            "author": "mehars.6925@gmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "5d42a5f3e0515660da3f8dbe1de82a109191dd79",
+            "comment": "fix: Small Button now uses token for its border radius"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-aria to v9.3.33",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.3",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.12.5",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-utilities to v9.13.0",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 24 Aug 2023 10:26:35 GMT",
       "tag": "@fluentui/react-button_v9.3.33",
       "version": "9.3.33",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Thu, 24 Aug 2023 10:23:08 GMT and should not be manually modified.
+This log was last generated on Tue, 05 Sep 2023 13:23:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.35)
+
+Tue, 05 Sep 2023 13:23:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.34..@fluentui/react-button_v9.3.35)
+
+### Patches
+
+- chore: migrate package to use JSX importSource ([PR #28959](https://github.com/microsoft/fluentui/pull/28959) by bernardo.sunderhus@gmail.com)
+- bumps @swc/helpers version to 0.5.1 ([PR #28989](https://github.com/microsoft/fluentui/pull/28989) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.4 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
+- Bump @fluentui/react-aria to v9.3.34 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.4 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.3 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
+- Bump @fluentui/react-tabster to v9.12.6 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
+- Bump @fluentui/react-theme to v9.1.12 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
+- Bump @fluentui/react-utilities to v9.13.1 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
+
+## [9.3.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.34)
+
+Tue, 29 Aug 2023 12:57:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.33..@fluentui/react-button_v9.3.34)
+
+### Patches
+
+- fix: Small Button now uses token for its border radius ([PR #28589](https://github.com/microsoft/fluentui/pull/28589) by mehars.6925@gmail.com)
+- Bump @fluentui/react-aria to v9.3.33 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.3 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-tabster to v9.12.5 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-utilities to v9.13.0 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+
 ## [9.3.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.33)
 
-Thu, 24 Aug 2023 10:23:08 GMT 
+Thu, 24 Aug 2023 10:26:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.32..@fluentui/react-button_v9.3.33)
 
 ### Patches

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

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useButtonStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvF,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOR,sBAAsBQ;AAC7B,0FAA0F;AAC5F,GAAuC;AAEvCJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useButtonStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOR,sBAAsBQ;AAC7B,0FAA0F;AAC5F,GAAuC;AAEvCJ,OAAOK,WAAW,GAAG"}

package/lib/components/Button/renderButton.js

@@ -1,9 +1,15 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Renders a Button component by passing the state defined props to the appropriate slots.
  */ export const renderButton_unstable = (state)=>{
     assertSlots(state);
-    const { iconOnly , iconPosition  } = state;
-    return /*#__PURE__*/ createElement(state.root, null, iconPosition !== 'after' && state.icon && /*#__PURE__*/ createElement(state.icon, null), !iconOnly && state.root.children, iconPosition === 'after' && state.icon && /*#__PURE__*/ createElement(state.icon, null));
+    const { iconOnly, iconPosition } = state;
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            iconPosition !== 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            !iconOnly && state.root.children,
+            iconPosition === 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {})
+        ]
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } 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  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3DF,YAAyBE;IACzB,MAAM,EAAEC,SAAQ,EAAEC,aAAY,EAAE,GAAGF;IAEnC,qBACE,AAfJ,cAeKA,MAAMG,IAAI,QACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,AAhBjD,cAgBkDJ,MAAMI,IAAI,SACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ,EAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,AAlBjD,cAkBkDJ,MAAMI,IAAI;AAG5D,EAAE"}
+{"version":3,"sources":["renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}

package/lib/components/Button/useButton.js

@@ -7,8 +7,9 @@ import { useButtonContext } from '../../contexts/ButtonContext';
  * @param props - User provided props to the Button component.
  * @param ref - User provided ref to be passed to the Button component.
  */ export const useButton_unstable = (props, ref)=>{
-    const { size: contextSize  } = useButtonContext();
-    const { appearance ='secondary' , as ='button' , disabled =false , disabledFocusable =false , icon , iconPosition ='before' , shape ='rounded' , size =contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'  } = props;
+    var _iconShorthand;
+    const { size: contextSize } = useButtonContext();
+    const { appearance = 'secondary', as = 'button', disabled = false, disabledFocusable = false, icon, iconPosition = 'before', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
     const iconShorthand = slot.optional(icon, {
         elementType: 'span'
     });
@@ -20,7 +21,7 @@ import { useButtonContext } from '../../contexts/ButtonContext';
         iconPosition,
         shape,
         size,
-        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+        iconOnly: Boolean(((_iconShorthand = iconShorthand) === null || _iconShorthand === void 0 ? void 0 : _iconShorthand.children) && !props.children),
         components: {
             root: 'button',
             icon: 'span'

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

@@ -1 +1 @@
-{"version":3,"sources":["useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, slot } 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 = slot.optional(icon, { elementType: 'span' });\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size, // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition\n    components: { root: 'button', icon: 'span' },\n    root: slot.always(\n      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      { elementType: 'button' },\n    ),\n    icon: iconShorthand,\n  };\n};\n"],"names":["React","useARIAButtonShorthand","getNativeElementProps","slot","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","optional","elementType","iconOnly","Boolean","children","components","root","always","required","defaultProps","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,sBAAsB,QAAQ,uBAAuB;AACnF,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,gBAAgB,QAAQ,+BAA+B;AAGhE;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC,MACgB;IAChB,MAAM,EAAEC,MAAMC,YAAW,EAAE,GAAGL;IAC9B,MAAM,EACJM,YAAa,YAAW,EACxBC,IAAK,SAAQ,EACbC,UAAW,KAAK,CAAA,EAChBC,mBAAoB,KAAK,CAAA,EACzBC,KAAI,EACJC,cAAe,SAAQ,EACvBC,OAAQ,UAAS,EACjBR,MAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAC/B,GAAGH;IACJ,MAAMW,gBAAgBd,KAAKe,QAAQ,CAACJ,MAAM;QAAEK,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCT;QACAE;QACAC;QACAE;QACAC;QACAR;QACAY,UAAUC,QAAQJ,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAeK,QAAQ,AAAD,KAAK,CAAChB,MAAMgB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUV,MAAM;QAAO;QAC3CU,MAAMrB,KAAKsB,MAAM,CACfvB,sBACES,IACAV,uBAAiDK,OAAO;YACtDoB,UAAU,IAAI;YACdC,cAAc;gBACZpB,KAAKA;gBACLqB,MAAM;YACR;QACF,KAEF;YAAET,aAAa;QAAS;QAE1BL,MAAMG;IACR;AACF,EAAE"}
+{"version":3,"sources":["useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, slot } 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 = slot.optional(icon, { elementType: 'span' });\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size, // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition\n    components: { root: 'button', icon: 'span' },\n    root: slot.always(\n      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      { elementType: 'button' },\n    ),\n    icon: iconShorthand,\n  };\n};\n"],"names":["React","useARIAButtonShorthand","getNativeElementProps","slot","useButtonContext","useButton_unstable","props","ref","iconShorthand","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","optional","elementType","iconOnly","Boolean","children","components","root","always","required","defaultProps","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,sBAAsB,QAAQ,uBAAuB;AACnF,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,gBAAgB,QAAQ,+BAA+B;AAGhE;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;QAsBoBC;IApBpB,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGN;IAC9B,MAAM,EACJO,aAAa,WAAW,EACxBC,KAAK,QAAQ,EACbC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,QAAQ,SAAS,EACjBR,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAC/B,GAAGJ;IACJ,MAAME,gBAAgBL,KAAKe,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCR;QACAE;QACAC;QACAE;QACAC;QACAR;QACAW,UAAUC,QAAQb,EAAAA,iBAAAA,2BAAAA,qCAAAA,eAAec,QAAQ,KAAI,CAAChB,MAAMgB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUT,MAAM;QAAO;QAC3CS,MAAMrB,KAAKsB,MAAM,CACfvB,sBACEU,IACAX,uBAAiDK,OAAO;YACtDoB,UAAU;YACVC,cAAc;gBACZpB,KAAKA;gBACLqB,MAAM;YACR;QACF,KAEF;YAAET,aAAa;QAAS;QAE1BJ,MAAMP;IACR;AACF,EAAE"}

package/lib/components/Button/useButtonStyles.styles.js

@@ -148,10 +148,10 @@ const useRootStyles = /*#__PURE__*/__styles({
     z189sj: ["f1vdfbxk", "f1f5gg8d"],
     Byoj8tv: "f1jnq6q7",
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
-    Bbmb7ep: ["fclariu", "fyjfh2l"],
-    Beyfa6y: ["fyjfh2l", "fclariu"],
-    B7oj6ja: ["f11xeu6h", "f1knf8zw"],
-    Btl43ni: ["f1knf8zw", "f11xeu6h"],
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
     Bg96gwp: "fwrc4pm"
@@ -180,7 +180,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     z8tnut: "f1a1bwwz"
   }
 }, {
-  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fh7ncta{min-width:64px;}", ".f1khb0e9{padding-top:3px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1jnq6q7{padding-bottom:3px;}", ".fclariu{border-bottom-right-radius:3px;}", ".fyjfh2l{border-bottom-left-radius:3px;}", ".f11xeu6h{border-top-right-radius:3px;}", ".f1knf8zw{border-top-left-radius:3px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1brlhvm{padding-bottom:1px;}", ".f1sl3k7w{padding-top:1px;}", ".f14es27b{min-width:96px;}", ".fp9bwmr{padding-top:8px;}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".f150uoa4{padding-bottom:8px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fy7v416{padding-bottom:7px;}", ".f1a1bwwz{padding-top:7px;}"],
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fh7ncta{min-width:64px;}", ".f1khb0e9{padding-top:3px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1brlhvm{padding-bottom:1px;}", ".f1sl3k7w{padding-top:1px;}", ".f14es27b{min-width:96px;}", ".fp9bwmr{padding-top:8px;}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".f150uoa4{padding-bottom:8px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fy7v416{padding-bottom:7px;}", ".f1a1bwwz{padding-top:7px;}"],
   h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}", ".f1j98vj9:hover:active .fui-Icon-regular{display:none;}", ".fj8yq94:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
   m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
     m: "(forced-colors: active)"

package/lib/components/Button/useButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","r","s","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bk3fhr4","Bmfj8id","Bbdnnc7","em6i61","vm6p8p","x3br3k","Bx3q9su","xd2cci","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","c3iz72","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"sources":["useButtonStyles.styles.js"],"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';\nexport const buttonClassNames = {\n    root: 'fui-Button',\n    icon: 'fui-Button__icon'\n};\nconst iconSpacingVar = '--fui-Button__icon--spacing';\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    margin: 0,\n    overflow: 'hidden',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    fontFamily: tokens.fontFamilyBase,\n    outlineStyle: 'none',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        borderColor: tokens.colorNeutralStroke1Hover,\n        color: tokens.colorNeutralForeground1Hover,\n        cursor: 'pointer'\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        borderColor: tokens.colorNeutralStroke1Pressed,\n        color: tokens.colorNeutralForeground1Pressed,\n        outlineStyle: 'none'\n    },\n    padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n    minWidth: '96px',\n    borderRadius: tokens.borderRadiusMedium,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n    // Transition styles\n    transitionDuration: tokens.durationFaster,\n    transitionProperty: 'background, border, color',\n    transitionTimingFunction: tokens.curveEasyEase,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':focus': {\n            borderColor: 'ButtonText'\n        },\n        ':hover': {\n            backgroundColor: 'HighlightText',\n            borderColor: 'Highlight',\n            color: 'Highlight',\n            forcedColorAdjust: 'none'\n        },\n        ':hover:active': {\n            backgroundColor: 'HighlightText',\n            borderColor: 'Highlight',\n            color: 'Highlight',\n            forcedColorAdjust: 'none'\n        }\n    },\n    // Focus styles\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});\nconst useIconBaseClassName = makeResetStyles({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge\n});\nconst useRootStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\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        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            ...shorthands.borderColor('HighlightText'),\n            color: 'HighlightText',\n            forcedColorAdjust: 'none',\n            ':hover': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':hover:active': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Canvas',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                color: 'Canvas',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandHover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandPressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: tokens.colorTransparentBackgroundHover,\n                ...shorthands.borderColor('transparent'),\n                color: 'Highlight'\n            },\n            ':hover:active': {\n                backgroundColor: tokens.colorTransparentBackgroundHover,\n                ...shorthands.borderColor('transparent'),\n                color: 'Highlight'\n            }\n        }\n    },\n    // Shape variations\n    circular: {\n        ...shorthands.borderRadius(tokens.borderRadiusCircular)\n    },\n    rounded: {\n    },\n    square: {\n        ...shorthands.borderRadius(tokens.borderRadiusNone)\n    },\n    // Size variations\n    small: {\n        minWidth: '64px',\n        ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n        ...shorthands.borderRadius(buttonSpacingSmall),\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    },\n    large: {\n        minWidth: '96px',\n        ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        fontSize: tokens.fontSizeBase400,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase400\n    },\n    largeWithIcon: {\n        paddingBottom: buttonSpacingLargeWithIcon,\n        paddingTop: buttonSpacingLargeWithIcon\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            }\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\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            ':focus': {\n                ...shorthands.borderColor('GrayText')\n            },\n            ':hover': {\n                backgroundColor: 'ButtonFace',\n                ...shorthands.borderColor('GrayText'),\n                color: 'GrayText'\n            },\n            ':hover:active': {\n                backgroundColor: 'ButtonFace',\n                ...shorthands.borderColor('GrayText'),\n                color: 'GrayText'\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorTransparentBackground\n        }\n    },\n    primary: {\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active': {\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\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        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        }\n    }\n});\nconst useRootFocusStyles = makeStyles({\n    // Shape variations\n    circular: createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusCircular)\n    }),\n    rounded: {\n    },\n    square: createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusNone)\n    }),\n    // Primary styles\n    primary: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n        boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`\n    }),\n    // Size variations\n    small: createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusSmall)\n    }),\n    medium: {\n    },\n    large: createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusLarge)\n    })\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        ...shorthands.padding(buttonSpacingSmallWithIcon),\n        minWidth: '24px',\n        maxWidth: '24px'\n    },\n    medium: {\n        ...shorthands.padding(buttonSpacingMedium),\n        minWidth: '32px',\n        maxWidth: '32px'\n    },\n    large: {\n        ...shorthands.padding(buttonSpacingLargeWithIcon),\n        minWidth: '40px',\n        maxWidth: '40px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Size variations\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px',\n        [iconSpacingVar]: tokens.spacingHorizontalXS\n    },\n    medium: {\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px',\n        [iconSpacingVar]: tokens.spacingHorizontalSNudge\n    },\n    // Icon position variations\n    before: {\n        marginRight: `var(${iconSpacingVar})`\n    },\n    after: {\n        marginLeft: `var(${iconSpacingVar})`\n    }\n});\nexport const useButtonStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const iconBaseClassName = useIconBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const rootFocusStyles = useRootFocusStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const { appearance , disabled , disabledFocusable , icon , iconOnly , iconPosition , shape , size  } = state;\n    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles\n    appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","r","s","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bk3fhr4","Bmfj8id","Bbdnnc7","em6i61","vm6p8p","x3br3k","Bx3q9su","xd2cci","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","c3iz72","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"sources":["useButtonStyles.styles.js"],"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';\nexport const buttonClassNames = {\n    root: 'fui-Button',\n    icon: 'fui-Button__icon'\n};\nconst iconSpacingVar = '--fui-Button__icon--spacing';\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    margin: 0,\n    overflow: 'hidden',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    fontFamily: tokens.fontFamilyBase,\n    outlineStyle: 'none',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        borderColor: tokens.colorNeutralStroke1Hover,\n        color: tokens.colorNeutralForeground1Hover,\n        cursor: 'pointer'\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        borderColor: tokens.colorNeutralStroke1Pressed,\n        color: tokens.colorNeutralForeground1Pressed,\n        outlineStyle: 'none'\n    },\n    padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n    minWidth: '96px',\n    borderRadius: tokens.borderRadiusMedium,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n    // Transition styles\n    transitionDuration: tokens.durationFaster,\n    transitionProperty: 'background, border, color',\n    transitionTimingFunction: tokens.curveEasyEase,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':focus': {\n            borderColor: 'ButtonText'\n        },\n        ':hover': {\n            backgroundColor: 'HighlightText',\n            borderColor: 'Highlight',\n            color: 'Highlight',\n            forcedColorAdjust: 'none'\n        },\n        ':hover:active': {\n            backgroundColor: 'HighlightText',\n            borderColor: 'Highlight',\n            color: 'Highlight',\n            forcedColorAdjust: 'none'\n        }\n    },\n    // Focus styles\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});\nconst useIconBaseClassName = makeResetStyles({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge\n});\nconst useRootStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\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        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            ...shorthands.borderColor('HighlightText'),\n            color: 'HighlightText',\n            forcedColorAdjust: 'none',\n            ':hover': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':hover:active': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            },\n            [`& .${buttonClassNames.icon}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Canvas',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                color: 'Canvas',\n                [`& .${buttonClassNames.icon}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandHover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandPressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: tokens.colorTransparentBackgroundHover,\n                ...shorthands.borderColor('transparent'),\n                color: 'Highlight'\n            },\n            ':hover:active': {\n                backgroundColor: tokens.colorTransparentBackgroundHover,\n                ...shorthands.borderColor('transparent'),\n                color: 'Highlight'\n            }\n        }\n    },\n    // Shape variations\n    circular: {\n        ...shorthands.borderRadius(tokens.borderRadiusCircular)\n    },\n    rounded: {\n    },\n    square: {\n        ...shorthands.borderRadius(tokens.borderRadiusNone)\n    },\n    // Size variations\n    small: {\n        minWidth: '64px',\n        ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\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    },\n    large: {\n        minWidth: '96px',\n        ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        fontSize: tokens.fontSizeBase400,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase400\n    },\n    largeWithIcon: {\n        paddingBottom: buttonSpacingLargeWithIcon,\n        paddingTop: buttonSpacingLargeWithIcon\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            }\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\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            ':focus': {\n                ...shorthands.borderColor('GrayText')\n            },\n            ':hover': {\n                backgroundColor: 'ButtonFace',\n                ...shorthands.borderColor('GrayText'),\n                color: 'GrayText'\n            },\n            ':hover:active': {\n                backgroundColor: 'ButtonFace',\n                ...shorthands.borderColor('GrayText'),\n                color: 'GrayText'\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorTransparentBackground\n        }\n    },\n    primary: {\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active': {\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\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        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            ...shorthands.borderColor('transparent')\n        }\n    }\n});\nconst useRootFocusStyles = makeStyles({\n    // Shape variations\n    circular: createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusCircular)\n    }),\n    rounded: {\n    },\n    square: createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusNone)\n    }),\n    // Primary styles\n    primary: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n        boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`\n    }),\n    // Size variations\n    small: createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusSmall)\n    }),\n    medium: {\n    },\n    large: createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusLarge)\n    })\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        ...shorthands.padding(buttonSpacingSmallWithIcon),\n        minWidth: '24px',\n        maxWidth: '24px'\n    },\n    medium: {\n        ...shorthands.padding(buttonSpacingMedium),\n        minWidth: '32px',\n        maxWidth: '32px'\n    },\n    large: {\n        ...shorthands.padding(buttonSpacingLargeWithIcon),\n        minWidth: '40px',\n        maxWidth: '40px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Size variations\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px',\n        [iconSpacingVar]: tokens.spacingHorizontalXS\n    },\n    medium: {\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px',\n        [iconSpacingVar]: tokens.spacingHorizontalSNudge\n    },\n    // Icon position variations\n    before: {\n        marginRight: `var(${iconSpacingVar})`\n    },\n    after: {\n        marginLeft: `var(${iconSpacingVar})`\n    }\n});\nexport const useButtonStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const iconBaseClassName = useIconBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const rootFocusStyles = useRootFocusStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles\n    appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCompoundButton_unstable(props, ref);\n\n  useCompoundButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('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"],"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvG,MAAMC,QAAQP,2BAA2BK,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOR,8BAA8BQ;AACrC,0FAA0F;AAC5F,GAA+C;AAE/CJ,eAAeK,WAAW,GAAG"}
+{"version":3,"sources":["CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCompoundButton_unstable(props, ref);\n\n  useCompoundButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('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"],"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOR,8BAA8BQ;AACrC,0FAA0F;AAC5F,GAA+C;AAE/CJ,eAAeK,WAAW,GAAG"}

package/lib/components/CompoundButton/renderCompoundButton.js

@@ -1,9 +1,20 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */ export const renderCompoundButton_unstable = (state)=>{
     assertSlots(state);
-    const { iconOnly , iconPosition  } = state;
-    return /*#__PURE__*/ createElement(state.root, null, iconPosition !== 'after' && state.icon && /*#__PURE__*/ createElement(state.icon, null), !iconOnly && /*#__PURE__*/ createElement(state.contentContainer, null, state.root.children, state.secondaryContent && /*#__PURE__*/ createElement(state.secondaryContent, null)), iconPosition === 'after' && state.icon && /*#__PURE__*/ createElement(state.icon, null));
+    const { iconOnly, iconPosition } = state;
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            iconPosition !== 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            !iconOnly && /*#__PURE__*/ _jsxs(state.contentContainer, {
+                children: [
+                    state.root.children,
+                    state.secondaryContent && /*#__PURE__*/ _jsx(state.secondaryContent, {})
+                ]
+            }),
+            iconPosition === 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {})
+        ]
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } 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  assertSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && (\n        <state.contentContainer>\n          {state.root.children}\n          {state.secondaryContent && <state.secondaryContent />}\n        </state.contentContainer>\n      )}\n\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderCompoundButton_unstable","state","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3EF,YAAiCE;IACjC,MAAM,EAAEC,SAAQ,EAAEC,aAAY,EAAE,GAAGF;IAEnC,qBACE,AAfJ,cAeKA,MAAMG,IAAI,QACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,AAhBjD,cAgBkDJ,MAAMI,IAAI,SACrD,CAACH,0BACA,AAlBR,cAkBSD,MAAMK,gBAAgB,QACpBL,MAAMG,IAAI,CAACG,QAAQ,EACnBN,MAAMO,gBAAgB,kBAAI,AApBrC,cAoBsCP,MAAMO,gBAAgB,UAIrDL,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,AAxBjD,cAwBkDJ,MAAMI,IAAI;AAG5D,EAAE"}
+{"version":3,"sources":["renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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  assertSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && (\n        <state.contentContainer>\n          {state.root.children}\n          {state.secondaryContent && <state.secondaryContent />}\n        </state.contentContainer>\n      )}\n\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCompoundButton_unstable","state","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,0BACA,MAACD,MAAMK,gBAAgB;;oBACpBL,MAAMG,IAAI,CAACG,QAAQ;oBACnBN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;;;YAIrDL,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}

package/lib/components/CompoundButton/useCompoundButton.js

@@ -5,7 +5,7 @@ import { useButton_unstable } from '../Button/index';
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
  * @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 = ({ contentContainer , secondaryContent , ...props }, ref)=>{
+ */ export const useCompoundButton_unstable = ({ contentContainer, secondaryContent, ...props }, ref)=>{
     var _state_icon, _state_secondaryContent;
     const state = {
         // Button state

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

@@ -1 +1 @@
-{"version":3,"sources":["useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } 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: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\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"],"names":["React","slot","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxC,EAAEC,iBAAgB,EAAEC,iBAAgB,EAAE,GAAGC,OAA4B,EACrEC,MACwB;QAiBCC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,GAAGN,mBAAmBI,OAAOC,IAAI;QAEjC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,KAAKW,MAAM,CAACR,kBAAkB;YAAES,aAAa;QAAO;QACtER,kBAAkBJ,KAAKa,QAAQ,CAACT,kBAAkB;YAAEQ,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DL,MAAMO,QAAQ,GAAGC,QAAQR,CAAAA,CAAAA,cAAAA,MAAMG,IAAI,cAAVH,yBAAAA,KAAAA,IAAAA,YAAYS,QAAQ,AAAD,KAAK,CAACX,MAAMW,QAAQ,IAAI,CAACT,CAAAA,CAAAA,0BAAAA,MAAMH,gBAAgB,cAAtBG,qCAAAA,KAAAA,IAAAA,wBAAwBS,QAAQ,AAAD;IAEpG,OAAOT;AACT,EAAE"}
+{"version":3,"sources":["useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } 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: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\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"],"names":["React","slot","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxC,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAA4B,EACrEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,GAAGN,mBAAmBI,OAAOC,IAAI;QAEjC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,KAAKW,MAAM,CAACR,kBAAkB;YAAES,aAAa;QAAO;QACtER,kBAAkBJ,KAAKa,QAAQ,CAACT,kBAAkB;YAAEQ,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DL,MAAMO,QAAQ,GAAGC,QAAQR,EAAAA,cAAAA,MAAMG,IAAI,cAAVH,kCAAAA,YAAYS,QAAQ,KAAI,CAACX,MAAMW,QAAQ,IAAI,GAACT,0BAAAA,MAAMH,gBAAgB,cAAtBG,8CAAAA,wBAAwBS,QAAQ;IAErG,OAAOT;AACT,EAAE"}

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n    root: 'fui-CompoundButton',\n    icon: 'fui-CompoundButton__icon',\n    contentContainer: 'fui-CompoundButton__contentContainer',\n    secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\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            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        }\n    },\n    // Size variations\n    small: {\n        ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalS, tokens.spacingHorizontalMNudge, tokens.spacingHorizontalS),\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    medium: {\n        ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    large: {\n        ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        ...shorthands.padding(tokens.spacingHorizontalXS),\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        ...shorthands.padding(tokens.spacingHorizontalSNudge),\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    after: {\n        marginLeft: tokens.spacingHorizontalM\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: tokens.fontWeightRegular\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});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance , disabled , disabledFocusable , iconOnly , iconPosition , size  } = state;\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n    root: 'fui-CompoundButton',\n    icon: 'fui-CompoundButton__icon',\n    contentContainer: 'fui-CompoundButton__contentContainer',\n    secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\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            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        }\n    },\n    // Size variations\n    small: {\n        ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalS, tokens.spacingHorizontalMNudge, tokens.spacingHorizontalS),\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    medium: {\n        ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    large: {\n        ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        ...shorthands.padding(tokens.spacingHorizontalXS),\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        ...shorthands.padding(tokens.spacingHorizontalSNudge),\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    after: {\n        marginLeft: tokens.spacingHorizontalM\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: tokens.fontWeightRegular\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});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  useCustomStyleHook_unstable('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"],"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOR,0BAA0BQ;AACjC,0FAA0F;AAC5F,GAA2C;AAE3CJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  useCustomStyleHook_unstable('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"],"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOR,0BAA0BQ;AACjC,0FAA0F;AAC5F,GAA2C;AAE3CJ,WAAWK,WAAW,GAAG"}

package/lib/components/MenuButton/renderMenuButton.js

@@ -1,9 +1,16 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */ export const renderMenuButton_unstable = (state)=>{
+    var _icon;
     assertSlots(state);
-    const { icon , iconOnly  } = state;
-    return /*#__PURE__*/ createElement(state.root, null, state.icon && /*#__PURE__*/ createElement(state.icon, null), !iconOnly && state.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && state.menuIcon && /*#__PURE__*/ createElement(state.menuIcon, null));
+    const { icon, iconOnly } = state;
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            !iconOnly && state.root.children,
+            (!iconOnly || !((_icon = icon) === null || _icon === void 0 ? void 0 : _icon.children)) && state.menuIcon && /*#__PURE__*/ _jsx(state.menuIcon, {})
+        ]
+    });
 };