@fluentui/react-button 9.5.3 → 9.6.1

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Fri, 27 Jun 2025 13:36:33 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.6.1)
+
+Mon, 28 Jul 2025 18:44:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.6.0..@fluentui/react-button_v9.6.1)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.16.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.6.0)
+
+Thu, 17 Jul 2025 13:49:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.5.3..@fluentui/react-button_v9.6.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.5.3)
 
-Fri, 27 Jun 2025 13:36:33 GMT 
+Fri, 27 Jun 2025 13:39:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.5.2..@fluentui/react-button_v9.5.3)
 
 ### Patches

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button/index';\nexport {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
+{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button/index';\nexport {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}

package/lib/CompoundButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
+{"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}

package/lib/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './components/MenuButton/index';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
+{"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './components/MenuButton/index';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}

package/lib/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

package/lib/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type { ToggleButtonProps, ToggleButtonState } from './components/ToggleButton/index';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
+{"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type { ToggleButtonProps, ToggleButtonState } from './components/ToggleButton/index';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable"],"mappings":"AACA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.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"],"rangeMappings":";;;;;;;;;;;;;;","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"}
+{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.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/Button.types.js.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","buttonClassNames","useButtonStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAGlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}
+{"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","buttonClassNames","useButtonStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAGlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { 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"],"rangeMappings":";;;;;;;;;;;;;;","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"}
+{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { 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.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, 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<ARIAButtonSlotProps<'a'>>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: as === 'button' ? 'button' : undefined,\n      },\n    }),\n    icon: iconShorthand,\n  };\n};\n"],"names":["React","useARIAButtonProps","getIntrinsicElementProps","slot","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","optional","elementType","iconOnly","Boolean","children","components","root","always","defaultProps","type","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,gBAAgB,QAAQ,+BAA+B;AAGhE;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EACJM,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,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,oCAAAA,cAAeK,QAAQ,KAAI,CAAChB,MAAMgB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUV,MAAM;QAAO;QAC3CU,MAAMrB,KAAKsB,MAAM,CAA2BvB,yBAAyBS,IAAIV,mBAAmBK,MAAMK,EAAE,EAAEL,SAAS;YAC7Ga,aAAa;YACbO,cAAc;gBACZnB,KAAKA;gBACLoB,MAAMhB,OAAO,WAAW,WAAWiB;YACrC;QACF;QACAd,MAAMG;IACR;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, 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<ARIAButtonSlotProps<'a'>>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: as === 'button' ? 'button' : undefined,\n      },\n    }),\n    icon: iconShorthand,\n  };\n};\n"],"names":["React","useARIAButtonProps","getIntrinsicElementProps","slot","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","optional","elementType","iconOnly","Boolean","children","components","root","always","defaultProps","type","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,gBAAgB,QAAQ,+BAA+B;AAGhE;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EACJM,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,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,oCAAAA,cAAeK,QAAQ,KAAI,CAAChB,MAAMgB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUV,MAAM;QAAO;QAC3CU,MAAMrB,KAAKsB,MAAM,CAA2BvB,yBAAyBS,IAAIV,mBAAmBK,MAAMK,EAAE,EAAEL,SAAS;YAC7Ga,aAAa;YACbO,cAAc;gBACZnB,KAAKA;gBACLoB,MAAMhB,OAAO,WAAW,WAAWiB;YACrC;QACF;QACAd,MAAMG;IACR;AACF,EAAE"}

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

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