@fluentui/react-button 0.0.0-nightly-20220714-0418.1 → 0.0.0-nightly-20221007-1237.1

package/lib/components/ToggleButton/useToggleButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nexport const useCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n  highContrastFocusStyles: createCustomFocusIndicatorStyle({\n    ...shorthands.border('1px', 'solid', 'HighlightText'),\n    outlineColor: 'Highlight',\n  }),\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nexport const useDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const checkedStyles = useCheckedStyles();\n  const disabledStyles = useDisabledStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Checked styles\n    checked && checkedStyles.base,\n    checked && checkedStyles.highContrast,\n    appearance && checked && checkedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && disabledStyles.base,\n    appearance && (disabled || disabledFocusable) && disabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(toggleButtonClassNames.icon, state.icon.className);\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n  highContrastFocusStyles: createCustomFocusIndicatorStyle({\n    ...shorthands.border('1px', 'solid', 'HighlightText'),\n    outlineColor: 'Highlight',\n  }),\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Appearance variations\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const checkedStyles = useCheckedStyles();\n  const disabledStyles = useDisabledStyles();\n  const iconStyles = useIconStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Checked styles\n    checked && checkedStyles.base,\n    checked && checkedStyles.highContrast,\n    appearance && checked && checkedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && disabledStyles.base,\n    appearance && (disabled || disabledFocusable) && disabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      appearance === 'subtle' && iconStyles.subtle,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":""}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SACE,cADF,EAEE,wBAFF,EAGE,6BAHF,EAIE,gCAJF,EAKE,0BALF,QAMO,kBANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,0BAFF,EAGE,qBAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,YADF,EAEE,2BAFF,EAGE,sBAHF,EAIE,8BAJF,EAKE,wBALF,QAMO,gBANP;AASA,SAAS,cAAT,QAA+B,eAA/B","sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SACE,cADF,EAEE,wBAFF,EAGE,6BAHF,EAIE,gCAJF,EAKE,0BALF,QAMO,kBANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,0BAFF,EAGE,qBAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,YADF,EAEE,2BAFF,EAGE,sBAHF,EAIE,8BAJF,EAKE,wBALF,QAMO,gBANP;AASA,SAAS,cAAT,QAA+B,eAA/B","sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"],"sourceRoot":""}

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useToggleState';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useToggleState';\n"]}

package/lib/utils/useToggleState.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useControllableState, useMergedEventCallbacks } from '@fluentui/react-utilities';
+import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
 export function useToggleState(props, state) {
   const {
     checked,
@@ -30,7 +30,7 @@ export function useToggleState(props, state) {
     checked: checkedValue,
     root: { ...state.root,
       [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
-      onClick: useMergedEventCallbacks(onClick, onToggleClick)
+      onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
     }
   };
 }

package/lib/utils/useToggleState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,uBAA/B,QAA8D,2BAA9D;AAIA,OAAM,SAAU,cAAV,CAIJ,KAJI,EAIuB,KAJvB,EAI0C;EAC9C,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC;EAArC,IAA2D,KAAjE;EACA,MAAM;IAAE,OAAF;IAAW;EAAX,IAAoB,KAAK,CAAC,IAAhC;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,OADoD;IAE3D,YAAY,EAAE,cAF6C;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAMA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,EAAE,IAAG;IACH,IAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;MACnC,IAAI,EAAE,CAAC,gBAAP,EAAyB;QACvB;MACD;;MAED,eAAe,CAAC,CAAC,YAAF,CAAf;IACD;EACF,CATmB,EAUpB,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,CAVoB,CAAtB;EAaA,OAAO,EACL,GAAG,KADE;IAGL,OAAO,EAAE,YAHJ;IAKL,IAAI,EAAE,EACJ,GAAG,KAAK,CAAC,IADL;MAEJ,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;MAGJ,OAAO,EAAE,uBAAuB,CAC9B,OAD8B,EAE9B,aAF8B;IAH5B;EALD,CAAP;AAcD","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n  TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n  TButtonState extends Pick<ButtonState, 'root'>,\n  TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n  const { checked, defaultChecked, disabled, disabledFocusable } = props;\n  const { onClick, role } = state.root;\n\n  const [checkedValue, setCheckedValue] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  const onToggleClick = React.useCallback(\n    ev => {\n      if (!disabled && !disabledFocusable) {\n        if (ev.defaultPrevented) {\n          return;\n        }\n\n        setCheckedValue(!checkedValue);\n      }\n    },\n    [checkedValue, disabled, disabledFocusable, setCheckedValue],\n  );\n\n  return {\n    ...state,\n\n    checked: checkedValue,\n\n    root: {\n      ...state.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: useMergedEventCallbacks(\n        onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>,\n        onToggleClick,\n      ),\n    },\n  } as TToggleButtonState;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/utils/useToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,oBAAzB,EAA+C,gBAA/C,QAAuE,2BAAvE;AAIA,OAAM,SAAU,cAAV,CAIJ,KAJI,EAIuB,KAJvB,EAI0C;EAC9C,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC;EAArC,IAA2D,KAAjE;EACA,MAAM;IAAE,OAAF;IAAW;EAAX,IAAoB,KAAK,CAAC,IAAhC;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,OADoD;IAE3D,YAAY,EAAE,cAF6C;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAMA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,EAAE,IAAG;IACH,IAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;MACnC,IAAI,EAAE,CAAC,gBAAP,EAAyB;QACvB;MACD;;MAED,eAAe,CAAC,CAAC,YAAF,CAAf;IACD;EACF,CATmB,EAUpB,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,CAVoB,CAAtB;EAaA,OAAO,EACL,GAAG,KADE;IAGL,OAAO,EAAE,YAHJ;IAKL,IAAI,EAAE,EACJ,GAAG,KAAK,CAAC,IADL;MAEJ,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;MAGJ,OAAO,EAAE,gBAAgB,CACvB,cAAc,CAAC,OAAD,EAA4E,aAA5E,CADS;IAHrB;EALD,CAAP;AAaD","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n  TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n  TButtonState extends Pick<ButtonState, 'root'>,\n  TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n  const { checked, defaultChecked, disabled, disabledFocusable } = props;\n  const { onClick, role } = state.root;\n\n  const [checkedValue, setCheckedValue] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  const onToggleClick = React.useCallback(\n    ev => {\n      if (!disabled && !disabledFocusable) {\n        if (ev.defaultPrevented) {\n          return;\n        }\n\n        setCheckedValue(!checkedValue);\n      }\n    },\n    [checkedValue, disabled, disabledFocusable, setCheckedValue],\n  );\n\n  return {\n    ...state,\n\n    checked: checkedValue,\n\n    root: {\n      ...state.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: useEventCallback(\n        mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n      ),\n    },\n  } as TToggleButtonState;\n}\n"],"sourceRoot":""}

package/lib-commonjs/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Button/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Button/index';\n"],"sourceRoot":""}

package/lib-commonjs/CompoundButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CompoundButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CompoundButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../src/CompoundButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CompoundButton/index';\n"],"sourceRoot":""}

package/lib-commonjs/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/MenuButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../src/MenuButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/MenuButton/index';\n"],"sourceRoot":""}

package/lib-commonjs/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SplitButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SplitButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../src/SplitButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SplitButton/index';\n"],"sourceRoot":""}

package/lib-commonjs/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToggleButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../src/ToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToggleButton/index';\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CALsF,CAMtF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CALsF,CAMtF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAA6B,KAAnC;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAH7C,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAA6B,KAAnC;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAH7C,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":""}

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

@@ -18,7 +18,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 const useButton_unstable = (props, ref) => {
   const {
     appearance = 'secondary',
-    as,
+    as = 'button',
     disabled = false,
     disabledFocusable = false,
     icon,
@@ -42,13 +42,11 @@ const useButton_unstable = (props, ref) => {
       root: 'button',
       icon: 'span'
     },
-    root: react_utilities_1.getNativeElementProps(as || 'button', react_aria_1.useARIAButton(props, {
+    root: react_utilities_1.getNativeElementProps(as, react_aria_1.useARIAButtonShorthand(props, {
       required: true,
       defaultProps: {
-        // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>
         ref: ref,
-        type: 'button' // This is added because the default for type is 'submit'
-
+        type: 'button'
       }
     })),
     icon: iconShorthand

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;EACf,MAAM;IACJ,UAAU,GAAG,WADT;IAEJ,EAFI;IAGJ,QAAQ,GAAG,KAHP;IAIJ,iBAAiB,GAAG,KAJhB;IAKJ,IALI;IAMJ,YAAY,GAAG,QANX;IAOJ,KAAK,GAAG,SAPJ;IAQJ,IAAI,GAAG;EARH,IASF,KATJ;EAUA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;EAEA,OAAO;IACL;IACA,UAFK;IAGL,QAHK;IAIL,iBAJK;IAKL,YALK;IAML,KANK;IAOL,IAPK;IASL;IACA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAVZ;IAYL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,QADI;MAEV,IAAI,EAAE;IAFI,CAbP;IAkBL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAmC,KAAnC,EAA0C;MACxC,QAAQ,EAAE,IAD8B;MAExC,YAAY,EAAE;QACZ;QACA,GAAG,EAAE,GAFO;QAGZ,IAAI,EAAE,QAHM,CAGI;;MAHJ;IAF0B,CAA1C,CAFI,CAlBD;IA6BL,IAAI,EAAE;EA7BD,CAAP;AA+BD,CA/CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\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 {\n    appearance = 'secondary',\n    as,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as || 'button',\n      useARIAButton<ARIAButtonSlotProps>(props, {\n        required: true,\n        defaultProps: {\n          // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>\n          ref: ref as React.Ref<HTMLButtonElement>,\n          type: 'button', // This is added because the default for type is 'submit'\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;EACf,MAAM;IACJ,UAAU,GAAG,WADT;IAEJ,EAAE,GAAG,QAFD;IAGJ,QAAQ,GAAG,KAHP;IAIJ,iBAAiB,GAAG,KAJhB;IAKJ,IALI;IAMJ,YAAY,GAAG,QANX;IAOJ,KAAK,GAAG,SAPJ;IAQJ,IAAI,GAAG;EARH,IASF,KATJ;EAUA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;EAEA,OAAO;IACL;IACA,UAFK;IAGL,QAHK;IAIL,iBAJK;IAKL,YALK;IAML,KANK;IAOL,IAPK;IASL;IACA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAVZ;IAYL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,QADI;MAEV,IAAI,EAAE;IAFI,CAbP;IAkBL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EADI,EAEJ,YAAA,CAAA,sBAAA,CAAiD,KAAjD,EAAwD;MACtD,QAAQ,EAAE,IAD4C;MAEtD,YAAY,EAAE;QACZ,GAAG,EAAE,GADO;QAEZ,IAAI,EAAE;MAFM;IAFwC,CAAxD,CAFI,CAlBD;IA4BL,IAAI,EAAE;EA5BD,CAAP;AA8BD,CA9CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\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 {\n    appearance = 'secondary',\n    as = 'button',\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as,\n      useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n        required: true,\n        defaultProps: {\n          ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n          type: 'button',\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"],"sourceRoot":""}

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

@@ -18,6 +18,8 @@ exports.buttonClassNames = {
   icon: 'fui-Button__icon'
 };
 const iconSpacingVar = '--fui-Button__icon--spacing';
+const buttonSpacingSmall = '3px';
+const buttonSpacingMedium = '5px';
 
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
@@ -29,11 +31,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "t21cq0": ["f11qmguv", "f1tyq0we"],
     "jrapky": "f19f4twv",
     "Frg6f3": ["f1tyq0we", "f11qmguv"],
-    "B2u0y6b": "f1n52uh2",
     "B68tc82": "f1p9o1ba",
     "Bmxbyg5": "f1sil6mw",
-    "ygn44y": "f1cmbuwj",
-    "Huce71": "fz5stix",
     "De3pzq": "fxugw4r",
     "sj55zd": "f19n0e5",
     "B4j52fo": "f192inf7",
@@ -69,6 +68,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "em6i61": "f1dfjoow",
     "vm6p8p": "f1j98vj9"
   },
+  "transition": {
+    "B3o57yi": "fg8tfde",
+    "Bmy1vo4": "fo99fu7",
+    "Bkqvd7p": "f1e1a42z",
+    "Hwfdqs": "f1onx1g3"
+  },
   "highContrast": {
     "G867l3": "f8rnyb3",
     "gdbnj": ["fhb3ry5", "f11223yd"],
@@ -127,13 +132,13 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
-    "Bi91k9c": "f139oj5f",
+    "Bi91k9c": "fnwyq0v",
     "iro3zm": "fsv2rcd",
     "b661bw": "f1h0usnq",
     "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
     "B9zn80p": "f16h9ulv",
     "Bpld233": ["fx2bmrt", "fs4ktlq"],
-    "B2d53fq": "f1fg1p5m"
+    "B2d53fq": "f1omzyqd"
   },
   "transparent": {
     "De3pzq": "f1c21dwh",
@@ -169,26 +174,24 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Btl43ni": ["f13av6d4", "f3fg2lr"]
   },
   "small": {
-    "z8tnut": "fztplxc",
+    "z8tnut": "f1khb0e9",
     "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "f9g1xly",
+    "Byoj8tv": "f1jnq6q7",
     "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "Bqenvij": "frvgh55",
     "Bf4jedk": "fh7ncta",
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "Bbmb7ep": ["fclariu", "fyjfh2l"],
+    "Beyfa6y": ["fyjfh2l", "fclariu"],
+    "B7oj6ja": ["f11xeu6h", "f1knf8zw"],
+    "Btl43ni": ["f1knf8zw", "f11xeu6h"],
     "Be2twd7": "fy9rknc",
     "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm"
   },
   "medium": {
-    "z8tnut": "fztplxc",
+    "z8tnut": "f1sbtcvk",
     "z189sj": ["fw5db7e", "f1uw59to"],
-    "Byoj8tv": "f9g1xly",
+    "Byoj8tv": "fdghr9",
     "uwmqm3": ["f1uw59to", "fw5db7e"],
-    "Bqenvij": "f1d2rq10",
     "Bf4jedk": "f14es27b",
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -199,11 +202,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
-    "z8tnut": "fztplxc",
+    "z8tnut": "f1kwiid1",
     "z189sj": ["fjodcmx", "fhx4nu"],
-    "Byoj8tv": "f9g1xly",
+    "Byoj8tv": "f5b47ha",
     "uwmqm3": ["fhx4nu", "fjodcmx"],
-    "Bqenvij": "fbhnoac",
     "Bf4jedk": "f14es27b",
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -214,9 +216,11 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Bg96gwp": "faaz57k"
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fmrv4ls{vertical-align:middle;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1n52uh2{max-width:280px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1s6fcnf{outline-style:none;}", ".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);}", ".fztplxc{padding-top:var(--spacingVerticalNone);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f9g1xly{padding-bottom:var(--spacingVerticalNone);}", ".frvgh55{height:24px;}", ".fh7ncta{min-width:64px;}", ".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);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1d2rq10{height:32px;}", ".f14es27b{min-width:96px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".fbhnoac{height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f8491dx:hover{cursor:pointer;}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fiu5zv5:hover:active{outline-style:none;}", ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}", ".f1j98vj9:hover:active .fui-Icon-regular{display:none;}", ".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);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
-  "m": [["@media (forced-colors: active){.f8rnyb3:focus{border-top-color:ButtonText;}}", {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fmrv4ls{vertical-align:middle;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1s6fcnf{outline-style:none;}", ".fg8tfde{transition-duration:100ms;}", ".fo99fu7{transition-property:background,border,color;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".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);}", ".f1khb0e9{padding-top:3px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1jnq6q7{padding-bottom:3px;}", ".fh7ncta{min-width:64px;}", ".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);}", ".f1sbtcvk{padding-top:5px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fdghr9{padding-bottom:5px;}", ".f14es27b{min-width:96px;}", ".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);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
+  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f8491dx:hover{cursor:pointer;}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fiu5zv5:hover:active{outline-style:none;}", ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}", ".f1j98vj9:hover:active .fui-Icon-regular{display:none;}", ".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);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
+  "m": [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media (forced-colors: active){.f8rnyb3:focus{border-top-color:ButtonText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fhb3ry5:focus{border-right-color:ButtonText;}.f11223yd:focus{border-left-color:ButtonText;}}", {
     "m": "(forced-colors: active)"
@@ -306,8 +310,8 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
   },
   "outline": {
     "De3pzq": "f1c21dwh",
-    "Jwef8y": "fjxutwb",
-    "iro3zm": "fwiml72"
+    "Jwef8y": "f9ql6rf",
+    "iro3zm": "f3h1zc4"
   },
   "primary": {
     "g2u3we": "f1p3nwhy",
@@ -325,42 +329,42 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
   },
   "secondary": {},
   "subtle": {
-    "De3pzq": "f3rmtva",
+    "De3pzq": "f1c21dwh",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
-    "Jwef8y": "f1cio4g9",
+    "Jwef8y": "f9ql6rf",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
-    "iro3zm": "fvaszet",
+    "iro3zm": "f3h1zc4",
     "b661bw": "f1h0usnq",
     "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
     "B9zn80p": "f16h9ulv",
     "Bpld233": ["fx2bmrt", "fs4ktlq"]
   },
   "transparent": {
-    "De3pzq": "f3rmtva",
+    "De3pzq": "f1c21dwh",
     "g2u3we": "f1p3nwhy",
     "h3c5rm": ["f11589ue", "f1pdflbu"],
     "B9xav0g": "f1q5o8ev",
     "zhjwy3": ["f1pdflbu", "f11589ue"],
-    "Jwef8y": "f1cio4g9",
+    "Jwef8y": "f9ql6rf",
     "Bgoe8wy": "f1s2uweq",
     "Bwzppfd": ["fr80ssc", "fecsdlb"],
     "oetu4i": "f1ukrpxl",
     "gg5e9n": ["fecsdlb", "fr80ssc"],
-    "iro3zm": "fvaszet",
+    "iro3zm": "f3h1zc4",
     "b661bw": "f1h0usnq",
     "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
     "B9zn80p": "f16h9ulv",
     "Bpld233": ["fx2bmrt", "fs4ktlq"]
   }
 }, {
-  "d": [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f3rmtva{background-color:transparent;}"],
-  "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".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;}", ".f1cio4g9:hover{background-color:transparent;}", ".fvaszet:hover:active{background-color:transparent;}"],
+  "d": [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}"],
+  "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".f3h1zc4:hover:active{background-color:var(--colorTransparentBackground);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".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;}"],
   "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
@@ -405,63 +409,71 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
 const useRootFocusStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "Brovlpu": "ftqa4ok",
-    "Bnmjwt4": "flfsvnh",
-    "Jopkrh": ["f1781m5e", "flvaaa9"],
-    "hhrs2v": "f50u1b5",
-    "B7jbng7": ["flvaaa9", "f1781m5e"],
-    "Bh48x57": "f19j8a82",
-    "B32s92o": "fgeg2qa",
-    "B5hngm5": "fhcq1yo",
-    "D4py6b": "f9ycirn",
-    "Bgwpjed": "fpt6wn7"
+    "B486eqv": "f2hkw1w",
+    "B8q5s1w": "f1rzxaq5",
+    "Bci5o5g": ["fipsau9", "f6jszy8"],
+    "n8qw10": "f1emqxbc",
+    "Bdrgwmp": ["f6jszy8", "fipsau9"],
+    "Bfpq7zp": "fr1u5pk",
+    "Bn4voq9": "f1p7hgxw",
+    "g9k6zt": "f9znhxp",
+    "j6ew2k": ["fvbipq7", "fvbipq7"],
+    "Bhxq17a": "f1vjpng2"
   },
   "circular": {
     "Brovlpu": "ftqa4ok",
-    "B8j0l6": ["f11yy61d", "f5edc3x"],
-    "Ekyhi": ["f5edc3x", "f11yy61d"],
-    "Bmrpcm6": ["f1aea4n", "f4jo73o"],
-    "Beswxhl": ["f4jo73o", "f1aea4n"]
+    "B486eqv": "f2hkw1w",
+    "kdpuga": ["fanj13w", "f1gou5sz"],
+    "Bw81rd7": ["f1gou5sz", "fanj13w"],
+    "B6xbmo0": ["fulf6x3", "foeb2x"],
+    "dm238s": ["foeb2x", "fulf6x3"]
   },
   "rounded": {},
   "square": {
     "Brovlpu": "ftqa4ok",
-    "B8j0l6": ["f5oco9f", "fiz44lb"],
-    "Ekyhi": ["fiz44lb", "f5oco9f"],
-    "Bmrpcm6": ["f1d1ywej", "flv4e1y"],
-    "Beswxhl": ["flv4e1y", "f1d1ywej"]
+    "B486eqv": "f2hkw1w",
+    "kdpuga": ["f1ndz5i7", "f1co4qro"],
+    "Bw81rd7": ["f1co4qro", "f1ndz5i7"],
+    "B6xbmo0": ["f146y5a9", "f1k2ftg"],
+    "dm238s": ["f1k2ftg", "f146y5a9"]
   },
   "primary": {
     "Brovlpu": "ftqa4ok",
-    "Bnmjwt4": "fbugrqt",
-    "Jopkrh": ["fhoxsto", "f19qf7vm"],
-    "hhrs2v": "f1tl0rof",
-    "B7jbng7": ["f19qf7vm", "fhoxsto"],
-    "D4py6b": "f15m8qn2"
+    "B486eqv": "f2hkw1w",
+    "B8q5s1w": "f15my96h",
+    "Bci5o5g": ["f8yq1e5", "f59w28j"],
+    "n8qw10": "f1mze7uc",
+    "Bdrgwmp": ["f59w28j", "f8yq1e5"],
+    "j6ew2k": "ftbnf46"
   },
   "small": {
     "Brovlpu": "ftqa4ok",
-    "B8j0l6": ["f1dzjeht", "f1fw97sp"],
-    "Ekyhi": ["f1fw97sp", "f1dzjeht"],
-    "Bmrpcm6": ["f1hr3vfr", "f1fepg9x"],
-    "Beswxhl": ["f1fepg9x", "f1hr3vfr"]
+    "B486eqv": "f2hkw1w",
+    "kdpuga": ["fg3gtdo", "fwii5mg"],
+    "Bw81rd7": ["fwii5mg", "fg3gtdo"],
+    "B6xbmo0": ["f1palphq", "f12nxie7"],
+    "dm238s": ["f12nxie7", "f1palphq"]
   },
   "medium": {
     "Brovlpu": "ftqa4ok",
-    "B8j0l6": ["f1ezw2km", "f18buiid"],
-    "Ekyhi": ["f18buiid", "f1ezw2km"],
-    "Bmrpcm6": ["f1hat8c3", "f10ee3ek"],
-    "Beswxhl": ["f10ee3ek", "f1hat8c3"]
+    "B486eqv": "f2hkw1w",
+    "kdpuga": ["f1o2ludy", "f1kjnpwc"],
+    "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
+    "B6xbmo0": ["fxmnebo", "f1witrsb"],
+    "dm238s": ["f1witrsb", "fxmnebo"]
   },
   "large": {
     "Brovlpu": "ftqa4ok",
-    "B8j0l6": ["f8iz5lg", "fzmqelg"],
-    "Ekyhi": ["fzmqelg", "f8iz5lg"],
-    "Bmrpcm6": ["f1ywuu4l", "f721nif"],
-    "Beswxhl": ["f721nif", "f1ywuu4l"]
+    "B486eqv": "f2hkw1w",
+    "kdpuga": ["ft3lys4", "f1la4x2g"],
+    "Bw81rd7": ["f1la4x2g", "ft3lys4"],
+    "B6xbmo0": ["f156y0zm", "fakimq4"],
+    "dm238s": ["fakimq4", "f156y0zm"]
   }
 }, {
   "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}", "[data-keyboard-nav] .f11yy61d:focus{border-bottom-right-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f5edc3x:focus{border-bottom-left-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f1aea4n:focus{border-top-right-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f4jo73o:focus{border-top-left-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f5oco9f:focus{border-bottom-right-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .fiz44lb:focus{border-bottom-left-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1d1ywej:focus{border-top-right-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .flv4e1y:focus{border-top-left-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .fbugrqt:focus{border-top-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .fhoxsto:focus{border-right-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f19qf7vm:focus{border-left-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f1tl0rof:focus{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f15m8qn2:focus{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1dzjeht:focus{border-bottom-right-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1fw97sp:focus{border-bottom-left-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1hr3vfr:focus{border-top-right-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1fepg9x:focus{border-top-left-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1ezw2km:focus{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f18buiid:focus{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1hat8c3:focus{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f10ee3ek:focus{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f8iz5lg:focus{border-bottom-right-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .fzmqelg:focus{border-bottom-left-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .f1ywuu4l:focus{border-top-right-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .f721nif:focus{border-top-left-radius:var(--borderRadiusLarge);}"]
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "d": [".f1rzxaq5[data-fui-focus-visible]{border-top-color:var(--colorTransparentStroke);}", ".fipsau9[data-fui-focus-visible]{border-right-color:var(--colorTransparentStroke);}", ".f6jszy8[data-fui-focus-visible]{border-left-color:var(--colorTransparentStroke);}", ".f1emqxbc[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStroke);}", ".fr1u5pk[data-fui-focus-visible]{outline-color:var(--colorTransparentStroke);}", ".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fvbipq7[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", ".f1vjpng2[data-fui-focus-visible]{z-index:1;}", ".fanj13w[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1gou5sz[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fulf6x3[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusCircular);}", ".foeb2x[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusCircular);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}", ".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}", ".f15my96h[data-fui-focus-visible]{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f8yq1e5[data-fui-focus-visible]{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f59w28j[data-fui-focus-visible]{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1mze7uc[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".ftbnf46[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", ".fg3gtdo[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fwii5mg[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1palphq[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusSmall);}", ".f12nxie7[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusSmall);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".ft3lys4[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusLarge);}", ".f1la4x2g[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusLarge);}", ".f156y0zm[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusLarge);}", ".fakimq4[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusLarge);}"]
 });
 
 const useRootIconOnlyStyles = /*#__PURE__*/react_1.__styles({
@@ -517,6 +529,10 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
     "a9b677": "fq4mcun",
     "Bqrlyyl": "f1exjqw5"
   },
+  "subtle": {
+    "Bi91k9c": "f139oj5f",
+    "B2d53fq": "f1fg1p5m"
+  },
   "before": {
     "t21cq0": ["f1nizpg2", "f1a695kz"]
   },
@@ -524,7 +540,8 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
     "Frg6f3": ["f1a695kz", "f1nizpg2"]
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"]
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"],
+  "h": [".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"]
 });
 
 const useButtonStyles_unstable = state => {
@@ -543,14 +560,14 @@ const useButtonStyles_unstable = state => {
     size
   } = state;
   state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, // Root styles
-  rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
+  rootStyles.base, rootStyles.transition, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
   (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
   rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
   iconOnly && rootIconOnlyStyles[size], // User provided class name
   state.root.className);
 
   if (state.icon) {
-    state.icon.className = react_1.mergeClasses(exports.buttonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
+    state.icon.className = react_1.mergeClasses(exports.buttonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], appearance === 'subtle' && iconStyles.subtle, iconStyles[size], state.icon.className);
   }
 
   return state;