@fluentui/react-button 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.1

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","createElement","root","children","menuIcon"],"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA0BE,KAAA;EACvD,MAAM;IAAEG,IAAA;IAAMC;EAAQ,CAAE,GAAGJ,KAAA;EAE3B,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3BL,KAAA,CAAME,IAAI,iBAAIN,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,GAC5C,CAACC,QAAA,IAAYF,SAAA,CAAUI,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACH,QAAA,IAAY,CAACD,IAAA,EAAMI,QAAO,KAAMN,KAAA,CAAMO,QAAQ,iBAAIX,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMO,QAAQ,EAAKN,SAAA,CAAUM,QAAQ;AAGjG"}
+{"version":3,"names":["React","getSlots","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","createElement","root","children","menuIcon"],"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA0BE,KAAA;EACvD,MAAM;IAAEG,IAAA;IAAMC;EAAQ,CAAE,GAAGJ,KAAA;EAE3B,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3BL,KAAA,CAAME,IAAI,iBAAIN,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,GAC5C,CAACC,QAAA,IAAYF,SAAA,CAAUI,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACH,QAAA,IAAY,EAACD,IAAA,aAAAA,IAAA,uBAAAA,IAAA,CAAMI,QAAQ,CAAD,KAAMN,KAAA,CAAMO,QAAQ,iBAAIX,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMO,QAAQ,EAAKN,SAAA,CAAUM,QAAQ;AAGjG"}

package/lib/components/MenuButton/useMenuButton.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { ChevronDownRegular } from "@fluentui/react-icons";
-import { resolveShorthand } from "@fluentui/react-utilities";
-import { useButton_unstable } from "../Button/index";
+import * as React from 'react';
+import { ChevronDownRegular } from '@fluentui/react-icons';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useButton_unstable } from '../Button/index';
 /**
  * Given user props, returns the final state for a MenuButton.
  */
@@ -10,7 +10,8 @@ export const useMenuButton_unstable = ({
   ...props
 }, ref) => {
   const buttonState = useButton_unstable(props, ref);
-  buttonState.root["aria-expanded"] = props["aria-expanded"] ?? false;
+  var _props_ariaexpanded;
+  buttonState.root['aria-expanded'] = (_props_ariaexpanded = props['aria-expanded']) !== null && _props_ariaexpanded !== void 0 ? _props_ariaexpanded : false;
   return {
     // Button state
     ...buttonState,
@@ -18,9 +19,9 @@ export const useMenuButton_unstable = ({
     iconOnly: Boolean(!props.children),
     // Slots definition
     components: {
-      root: "button",
-      icon: "span",
-      menuIcon: "span"
+      root: 'button',
+      icon: 'span',
+      menuIcon: 'span'
     },
     menuIcon: resolveShorthand(menuIcon, {
       defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","defaultProps","createElement","required"],"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  { menuIcon, ...props }: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CACpC;EAAEC,QAAA;EAAU,GAAGC;AAAA,CAAwB,EACvCC,GAAA,KACoB;EACpB,MAAMC,WAAA,GAAcL,kBAAA,CAAmBG,KAAA,EAAOC,GAAA;EAC9CC,WAAA,CAAYC,IAAI,CAAC,gBAAgB,GAAGH,KAAK,CAAC,gBAAgB,IAAI,KAAK;EAEnE,OAAO;IACL;IACA,GAAGE,WAAW;IAEd;IACAE,QAAA,EAAUC,OAAA,CAAQ,CAACL,KAAA,CAAMM,QAAQ;IAEjC;IACAC,UAAA,EAAY;MACVJ,IAAA,EAAM;MACNK,IAAA,EAAM;MACNT,QAAA,EAAU;IACZ;IAEAA,QAAA,EAAUH,gBAAA,CAAiBG,QAAA,EAAU;MACnCU,YAAA,EAAc;QACZH,QAAA,eAAUZ,KAAA,CAAAgB,aAAA,CAACf,kBAAA;MACb;MACAgB,QAAA,EAAU;IACZ;EACF;AACF"}
+{"version":3,"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","_props_ariaexpanded","root","iconOnly","Boolean","children","components","icon","defaultProps","createElement","required"],"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  { menuIcon, ...props }: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CACpC;EAAEC,QAAA;EAAU,GAAGC;AAAA,CAAwB,EACvCC,GAAA,KACoB;EACpB,MAAMC,WAAA,GAAcL,kBAAA,CAAmBG,KAAA,EAAOC,GAAA;MACVE,mBAAA;EAApCD,WAAA,CAAYE,IAAI,CAAC,gBAAgB,GAAG,CAAAD,mBAAA,GAAAH,KAAK,CAAC,gBAAgB,cAAtBG,mBAAA,cAAAA,mBAAA,GAA0B,KAAK;EAEnE,OAAO;IACL;IACA,GAAGD,WAAW;IAEd;IACAG,QAAA,EAAUC,OAAA,CAAQ,CAACN,KAAA,CAAMO,QAAQ;IAEjC;IACAC,UAAA,EAAY;MACVJ,IAAA,EAAM;MACNK,IAAA,EAAM;MACNV,QAAA,EAAU;IACZ;IAEAA,QAAA,EAAUH,gBAAA,CAAiBG,QAAA,EAAU;MACnCW,YAAA,EAAc;QACZH,QAAA,eAAUb,KAAA,CAAAiB,aAAA,CAAChB,kBAAA;MACb;MACAiB,QAAA,EAAU;IACZ;EACF;AACF"}

package/lib/components/MenuButton/useMenuButtonStyles.js

@@ -1,11 +1,11 @@
-import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
-import { tokens } from "@fluentui/react-theme";
-import { mergeClasses, __styles, shorthands } from "@griffel/react";
-import { useButtonStyles_unstable } from "../Button/useButtonStyles";
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles';
 export const menuButtonClassNames = {
-  root: "fui-MenuButton",
-  icon: "fui-MenuButton__icon",
-  menuIcon: "fui-MenuButton__menuIcon"
+  root: 'fui-MenuButton',
+  icon: 'fui-MenuButton__icon',
+  menuIcon: 'fui-MenuButton__menuIcon'
 };
 const useRootExpandedStyles = /*#__PURE__*/__styles({
   base: {
@@ -94,16 +94,16 @@ export const useMenuButtonStyles_unstable = state => {
   const rootExpandedStyles = useRootExpandedStyles();
   const iconExpandedStyles = useIconExpandedStyles();
   const menuIconStyles = useMenuIconStyles();
-  state.root.className = mergeClasses(menuButtonClassNames.root, state.root["aria-expanded"] && rootExpandedStyles.base, state.root["aria-expanded"] && rootExpandedStyles[state.appearance], state.root.className);
+  state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
   if (state.icon) {
-    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root["aria-expanded"] && iconExpandedStyles[state.appearance], state.icon.className);
+    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance], state.icon.className);
   }
   if (state.menuIcon) {
     state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
   }
   useButtonStyles_unstable({
     ...state,
-    iconPosition: "before"
+    iconPosition: 'before'
   });
   return state;
 };

package/lib/components/SplitButton/SplitButton.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { renderSplitButton_unstable } from "./renderSplitButton";
-import { useSplitButton_unstable } from "./useSplitButton";
-import { useSplitButtonStyles_unstable } from "./useSplitButtonStyles";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { renderSplitButton_unstable } from './renderSplitButton';
+import { useSplitButton_unstable } from './useSplitButton';
+import { useSplitButtonStyles_unstable } from './useSplitButtonStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
  * action, while interacting with the second one opens a menu with secondary actions.
@@ -18,5 +18,5 @@ export const SplitButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Casting is required due to lack of distributive union to support unions on @types/react
 });
 
-SplitButton.displayName = "SplitButton";
+SplitButton.displayName = 'SplitButton';
 //# sourceMappingURL=SplitButton.js.map

package/lib/components/SplitButton/index.js

@@ -1,6 +1,6 @@
-export * from "./SplitButton";
-export * from "./SplitButton.types";
-export * from "./renderSplitButton";
-export * from "./useSplitButton";
-export { splitButtonClassNames, useSplitButtonStyles_unstable } from "./useSplitButtonStyles";
+export * from './SplitButton';
+export * from './SplitButton.types';
+export * from './renderSplitButton';
+export * from './useSplitButton';
+export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/SplitButton/renderSplitButton.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
  */

package/lib/components/SplitButton/useSplitButton.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { getNativeElementProps, resolveShorthand, useId } from "@fluentui/react-utilities";
-import { Button } from "../Button/Button";
-import { MenuButton } from "../MenuButton/MenuButton";
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { Button } from '../Button/Button';
+import { MenuButton } from '../MenuButton/MenuButton';
 /**
  * Given user props, defines default props for the SplitButton and returns processed state.
  * @param props - User provided props to the SplitButton component.
@@ -9,19 +9,19 @@ import { MenuButton } from "../MenuButton/MenuButton";
  */
 export const useSplitButton_unstable = (props, ref) => {
   const {
-    appearance = "secondary",
+    appearance = 'secondary',
     children,
     disabled = false,
     disabledFocusable = false,
     icon,
-    iconPosition = "before",
+    iconPosition = 'before',
     menuButton,
     menuIcon,
     primaryActionButton,
-    shape = "rounded",
-    size = "medium"
+    shape = 'rounded',
+    size = 'medium'
   } = props;
-  const baseId = useId("splitButton-");
+  const baseId = useId('splitButton-');
   const menuButtonShorthand = resolveShorthand(menuButton, {
     defaultProps: {
       appearance,
@@ -41,7 +41,7 @@ export const useSplitButton_unstable = (props, ref) => {
       disabledFocusable,
       icon,
       iconPosition,
-      id: baseId + "__primaryActionButton",
+      id: baseId + '__primaryActionButton',
       shape,
       size
     },
@@ -49,8 +49,8 @@ export const useSplitButton_unstable = (props, ref) => {
   });
   // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
   // by the user.
-  if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand["aria-label"] && !menuButtonShorthand["aria-labelledby"]) {
-    menuButtonShorthand["aria-labelledby"] = primaryActionButtonShorthand.id;
+  if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
+    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
   }
   return {
     // Props passed at the top-level
@@ -62,11 +62,11 @@ export const useSplitButton_unstable = (props, ref) => {
     size,
     // Slots definition
     components: {
-      root: "div",
+      root: 'div',
       menuButton: MenuButton,
       primaryActionButton: Button
     },
-    root: getNativeElementProps("div", {
+    root: getNativeElementProps('div', {
       ref,
       ...props
     }),

package/lib/components/SplitButton/useSplitButtonStyles.js

@@ -1,10 +1,10 @@
-import { __styles, mergeClasses } from "@griffel/react";
-import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
-import { tokens } from "@fluentui/react-theme";
+import { __styles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
 export const splitButtonClassNames = {
-  root: "fui-SplitButton",
-  menuButton: "fui-SplitButton__menuButton",
-  primaryActionButton: "fui-SplitButton__primaryActionButton"
+  root: 'fui-SplitButton',
+  menuButton: 'fui-SplitButton__menuButton',
+  primaryActionButton: 'fui-SplitButton__primaryActionButton'
 };
 const useFocusStyles = /*#__PURE__*/__styles({
   primaryActionButton: {

package/lib/components/ToggleButton/ToggleButton.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { renderToggleButton_unstable } from "./renderToggleButton";
-import { useToggleButton_unstable } from "./useToggleButton";
-import { useToggleButtonStyles_unstable } from "./useToggleButtonStyles";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { renderToggleButton_unstable } from './renderToggleButton';
+import { useToggleButton_unstable } from './useToggleButton';
+import { useToggleButtonStyles_unstable } from './useToggleButtonStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
@@ -17,5 +17,5 @@ export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Casting is required due to lack of distributive union to support unions on @types/react
 });
 
-ToggleButton.displayName = "ToggleButton";
+ToggleButton.displayName = 'ToggleButton';
 //# sourceMappingURL=ToggleButton.js.map

package/lib/components/ToggleButton/index.js

@@ -1,6 +1,6 @@
-export * from "./ToggleButton";
-export * from "./ToggleButton.types";
-export * from "./renderToggleButton";
-export * from "./useToggleButton";
-export { toggleButtonClassNames, useToggleButtonStyles_unstable } from "./useToggleButtonStyles";
+export * from './ToggleButton';
+export * from './ToggleButton.types';
+export * from './renderToggleButton';
+export * from './useToggleButton';
+export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/ToggleButton/renderToggleButton.js

@@ -1,2 +1,2 @@
-export { renderButton_unstable as renderToggleButton_unstable } from "../Button/renderButton";
+export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
 //# sourceMappingURL=renderToggleButton.js.map

package/lib/components/ToggleButton/useToggleButton.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { useToggleState } from "../../utils/useToggleState";
-import { useButton_unstable } from "../Button/useButton";
+import * as React from 'react';
+import { useToggleState } from '../../utils/useToggleState';
+import { useButton_unstable } from '../Button/useButton';
 /**
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
  * processed state.

package/lib/components/ToggleButton/useToggleButtonStyles.js

@@ -1,11 +1,11 @@
-import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
-import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
-import { tokens } from "@fluentui/react-theme";
-import { shorthands, mergeClasses, __styles } from "@griffel/react";
-import { useButtonStyles_unstable } from "../Button/useButtonStyles";
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles';
 export const toggleButtonClassNames = {
-  root: "fui-ToggleButton",
-  icon: "fui-ToggleButton__icon"
+  root: 'fui-ToggleButton',
+  icon: 'fui-ToggleButton__icon'
 };
 const useRootCheckedStyles = /*#__PURE__*/__styles({
   base: {
@@ -370,7 +370,7 @@ export const useToggleButtonStyles_unstable = state => {
   } = state;
   state.root.className = mergeClasses(toggleButtonClassNames.root,
   // Primary high contrast styles
-  appearance === "primary" && primaryHighContrastStyles.base, appearance === "primary" && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
+  appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
   // Checked styles
   checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
   // Disabled styles
@@ -378,7 +378,7 @@ export const useToggleButtonStyles_unstable = state => {
   // User provided class name
   state.root.className);
   if (state.icon) {
-    state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance === "subtle" || appearance === "transparent") && iconCheckedStyles.subtleOrTransparent, state.icon.className);
+    state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, state.icon.className);
   }
   useButtonStyles_unstable(state);
   return state;

package/lib/contexts/ButtonContext.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 const buttonContext = /*#__PURE__*/React.createContext(undefined);
 const buttonContextDefaultValue = {};
 /**
@@ -6,9 +6,10 @@ const buttonContextDefaultValue = {};
  * Internal context provider used to update default values between internal components
  */
 export const ButtonContextProvider = buttonContext.Provider;
+var _React_useContext;
 /**
  * @internal
  * Internal context hook used to update default values between internal components
  */
-export const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;
+export const useButtonContext = () => (_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;
 //# sourceMappingURL=ButtonContext.js.map

package/lib/contexts/ButtonContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"sources":["../../src/contexts/ButtonContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n  size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,MAAMC,aAAA,gBAAgBD,KAAA,CAAME,aAAa,CAAiCC,SAAA;AAU1E,MAAMC,yBAAA,GAAgD,CAAC;AAEvD;;;;AAIA,OAAO,MAAMC,qBAAA,GAAwBJ,aAAA,CAAcK,QAAQ;AAE3D;;;;AAIA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAAMP,KAAA,CAAMQ,UAAU,CAACP,aAAA,KAAkBG,yBAAA"}
+{"version":3,"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","_React_useContext","useButtonContext","useContext"],"sources":["../../src/contexts/ButtonContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n  size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,MAAMC,aAAA,gBAAgBD,KAAA,CAAME,aAAa,CAAiCC,SAAA;AAU1E,MAAMC,yBAAA,GAAgD,CAAC;AAEvD;;;;AAIA,OAAO,MAAMC,qBAAA,GAAwBJ,aAAA,CAAcK,QAAQ;IAMrBC,iBAAA;AAJtC;;;;AAIA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAAM,CAAAD,iBAAA,GAAAP,KAAA,CAAMS,UAAU,CAACR,aAAA,eAAjBM,iBAAA,cAAAA,iBAAA,GAAmCH,yBAAyB"}

package/lib/contexts/index.js

@@ -1,2 +1,2 @@
-export * from "./ButtonContext";
+export * from './ButtonContext';
 //# sourceMappingURL=index.js.map

package/lib/index.js

@@ -1,8 +1,8 @@
-export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from "./Button";
-export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from "./CompoundButton";
-export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from "./MenuButton";
-export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from "./SplitButton";
-export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from "./ToggleButton";
-export { useToggleState } from "./utils/index";
-export { ButtonContextProvider, useButtonContext } from "./contexts/index";
+export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
+export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
+export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
+export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
+export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
+export { useToggleState } from './utils/index';
+export { ButtonContextProvider, useButtonContext } from './contexts/index';
 //# sourceMappingURL=index.js.map

package/lib/utils/index.js

@@ -1,2 +1,2 @@
-export * from "./useToggleState";
+export * from './useToggleState';
 //# sourceMappingURL=index.js.map

package/lib/utils/useToggleState.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { mergeCallbacks, useControllableState, useEventCallback } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
 export function useToggleState(props, state) {
   const {
     checked,
@@ -16,7 +16,7 @@ export function useToggleState(props, state) {
     defaultState: defaultChecked,
     initialState: false
   });
-  const isCheckboxTypeRole = role === "menuitemcheckbox" || role === "checkbox";
+  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
   const onToggleClick = React.useCallback(ev => {
     if (!disabled && !disabledFocusable) {
       if (ev.defaultPrevented) {
@@ -30,7 +30,7 @@ export function useToggleState(props, state) {
     checked: checkedValue,
     root: {
       ...state.root,
-      [isCheckboxTypeRole ? "aria-checked" : "aria-pressed"]: checkedValue,
+      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
       onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
     }
   };

package/lib-commonjs/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/Button.js"],"sourcesContent":["export * from \"./components/Button/index\";\n//# sourceMappingURL=Button.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,kCAAkC"}
+{"version":3,"sources":["../lib/Button.js"],"sourcesContent":["export * from './components/Button/index';\n//# sourceMappingURL=Button.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,kCAAkC"}

package/lib-commonjs/CompoundButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/CompoundButton.js"],"sourcesContent":["export * from \"./components/CompoundButton/index\";\n//# sourceMappingURL=CompoundButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,0CAA0C"}
+{"version":3,"sources":["../lib/CompoundButton.js"],"sourcesContent":["export * from './components/CompoundButton/index';\n//# sourceMappingURL=CompoundButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,0CAA0C"}

package/lib-commonjs/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/MenuButton.js"],"sourcesContent":["export * from \"./components/MenuButton/index\";\n//# sourceMappingURL=MenuButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
+{"version":3,"sources":["../lib/MenuButton.js"],"sourcesContent":["export * from './components/MenuButton/index';\n//# sourceMappingURL=MenuButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}

package/lib-commonjs/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/SplitButton.js"],"sourcesContent":["export * from \"./components/SplitButton/index\";\n//# sourceMappingURL=SplitButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,uCAAuC"}
+{"version":3,"sources":["../lib/SplitButton.js"],"sourcesContent":["export * from './components/SplitButton/index';\n//# sourceMappingURL=SplitButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,uCAAuC"}

package/lib-commonjs/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/ToggleButton.js"],"sourcesContent":["export * from \"./components/ToggleButton/index\";\n//# sourceMappingURL=ToggleButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,wCAAwC"}
+{"version":3,"sources":["../lib/ToggleButton.js"],"sourcesContent":["export * from './components/ToggleButton/index';\n//# sourceMappingURL=ToggleButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,wCAAwC"}

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

@@ -20,6 +20,6 @@ const Button = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     return (0, _renderButton.renderButton_unstable)(state);
 // Casting is required due to lack of distributive union to support unions on @types/react
 });
-Button.displayName = "Button"; //# sourceMappingURL=Button.js.map
+Button.displayName = 'Button'; //# sourceMappingURL=Button.js.map
 
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Button/Button.js"],"sourcesContent":["import * as React from \"react\";\nimport { renderButton_unstable } from \"./renderButton\";\nimport { useButton_unstable } from \"./useButton\";\nimport { useButtonStyles_unstable } from \"./useButtonStyles\";\nimport { useCustomStyleHooks_unstable } from \"@fluentui/react-shared-contexts\";\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n  useButtonStyles_unstable(state);\n  const {\n    useButtonStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n});\n\nButton.displayName = \"Button\";\n//# sourceMappingURL=Button.js.map"],"names":["Button","React","forwardRef","props","ref","state","useButton_unstable","useButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderButton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;8BACe;2BACH;iCACM;qCACI;AAItC,MAAMA,SAAS,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAClE,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxCG,IAAAA,yCAAwB,EAACF;IACzB,MAAM,EACJE,0BAA0BC,gBAAe,EAC1C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,mCAAqB,EAACL;AAC7B,0FAA0F;AAC5F;AAEAL,OAAOW,WAAW,GAAG,UACrB,kCAAkC"}
+{"version":3,"sources":["../../../lib/components/Button/Button.js"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n  useButtonStyles_unstable(state);\n  const {\n    useButtonStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n});\n\nButton.displayName = 'Button';\n//# sourceMappingURL=Button.js.map"],"names":["Button","React","forwardRef","props","ref","state","useButton_unstable","useButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderButton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;8BACe;2BACH;iCACM;qCACI;AAItC,MAAMA,SAAS,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAClE,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxCG,IAAAA,yCAAwB,EAACF;IACzB,MAAM,EACJE,0BAA0BC,gBAAe,EAC1C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,mCAAqB,EAACL;AAC7B,0FAA0F;AAC5F;AAEAL,OAAOW,WAAW,GAAG,UACrB,kCAAkC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Button/index.js"],"sourcesContent":["export * from \"./Button\";\nexport * from \"./renderButton\";\nexport * from \"./useButton\";\nexport { buttonClassNames, useButtonStyles_unstable } from \"./useButtonStyles\";\n//# sourceMappingURL=index.js.map"],"names":["buttonClassNames","useButtonStyles_unstable"],"mappings":";;;;;;;;;;;IAGSA,gBAAgB,MAAhBA,iCAAgB;IAAEC,wBAAwB,MAAxBA,yCAAwB;;;oBAHrC;oBACA;oBACA;iCAC6C;CAC3D,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/Button/index.js"],"sourcesContent":["export * from './Button';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n//# sourceMappingURL=index.js.map"],"names":["buttonClassNames","useButtonStyles_unstable"],"mappings":";;;;;;;;;;;IAGSA,gBAAgB,MAAhBA,iCAAgB;IAAEC,wBAAwB,MAAxBA,yCAAwB;;;oBAHrC;oBACA;oBACA;iCAC6C;CAC3D,iCAAiC"}

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

@@ -12,7 +12,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
 const renderButton_unstable = (state)=>{
     const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
     const { iconOnly , iconPosition  } = state;
-    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, iconPosition !== "after" && slots.icon && /*#__PURE__*/ _react.createElement(slots.icon, slotProps.icon), !iconOnly && state.root.children, iconPosition === "after" && slots.icon && /*#__PURE__*/ _react.createElement(slots.icon, slotProps.icon));
+    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/ _react.createElement(slots.icon, slotProps.icon), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/ _react.createElement(slots.icon, slotProps.icon));
 }; //# sourceMappingURL=renderButton.js.map
 
 //# sourceMappingURL=renderButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Button/renderButton.js"],"sourcesContent":["import * as React from \"react\";\nimport { getSlots } from \"@fluentui/react-utilities\";\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  const {\n    iconOnly,\n    iconPosition\n  } = state;\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, iconPosition !== \"after\" && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !iconOnly && state.root.children, iconPosition === \"after\" && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon));\n};\n//# sourceMappingURL=renderButton.js.map"],"names":["renderButton_unstable","state","slots","slotProps","getSlots","iconOnly","iconPosition","React","createElement","root","icon","children"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,wBAAwBC,CAAAA,QAAS;IAC5C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,MAAM,EACJI,SAAQ,EACRC,aAAY,EACb,GAAGL;IACJ,OAAO,WAAW,GAAEM,OAAMC,aAAa,CAACN,MAAMO,IAAI,EAAEN,UAAUM,IAAI,EAAEH,iBAAiB,WAAWJ,MAAMQ,IAAI,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACN,MAAMQ,IAAI,EAAEP,UAAUO,IAAI,GAAG,CAACL,YAAYJ,MAAMQ,IAAI,CAACE,QAAQ,EAAEL,iBAAiB,WAAWJ,MAAMQ,IAAI,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACN,MAAMQ,IAAI,EAAEP,UAAUO,IAAI;AACrT,GACA,wCAAwC"}
+{"version":3,"sources":["../../../lib/components/Button/renderButton.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  const {\n    iconOnly,\n    iconPosition\n  } = state;\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon));\n};\n//# sourceMappingURL=renderButton.js.map"],"names":["renderButton_unstable","state","slots","slotProps","getSlots","iconOnly","iconPosition","React","createElement","root","icon","children"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,wBAAwBC,CAAAA,QAAS;IAC5C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,MAAM,EACJI,SAAQ,EACRC,aAAY,EACb,GAAGL;IACJ,OAAO,WAAW,GAAEM,OAAMC,aAAa,CAACN,MAAMO,IAAI,EAAEN,UAAUM,IAAI,EAAEH,iBAAiB,WAAWJ,MAAMQ,IAAI,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACN,MAAMQ,IAAI,EAAEP,UAAUO,IAAI,GAAG,CAACL,YAAYJ,MAAMQ,IAAI,CAACE,QAAQ,EAAEL,iBAAiB,WAAWJ,MAAMQ,IAAI,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACN,MAAMQ,IAAI,EAAEP,UAAUO,IAAI;AACrT,GACA,wCAAwC"}

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

@@ -13,7 +13,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
 const _buttonContext = require("../../contexts/ButtonContext");
 const useButton_unstable = (props, ref)=>{
     const { size: contextSize  } = (0, _buttonContext.useButtonContext)();
-    const { appearance ="secondary" , as ="button" , disabled =false , disabledFocusable =false , icon , iconPosition ="before" , shape ="rounded" , size =contextSize ?? "medium"  } = props;
+    const { appearance ='secondary' , as ='button' , disabled =false , disabledFocusable =false , icon , iconPosition ='before' , shape ='rounded' , size =contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'  } = props;
     const iconShorthand = (0, _reactUtilities.resolveShorthand)(icon);
     return {
         // Props passed at the top-level
@@ -24,17 +24,17 @@ const useButton_unstable = (props, ref)=>{
         shape,
         size,
         // State calculated from a set of props
-        iconOnly: Boolean(iconShorthand?.children && !props.children),
+        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
         // Slots definition
         components: {
-            root: "button",
-            icon: "span"
+            root: 'button',
+            icon: 'span'
         },
         root: (0, _reactUtilities.getNativeElementProps)(as, (0, _reactAria.useARIAButtonShorthand)(props, {
             required: true,
             defaultProps: {
                 ref: ref,
-                type: "button"
+                type: 'button'
             }
         })),
         icon: iconShorthand

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Button/useButton.js"],"sourcesContent":["import * as React from \"react\";\nimport { useARIAButtonShorthand } from \"@fluentui/react-aria\";\nimport { getNativeElementProps, resolveShorthand } from \"@fluentui/react-utilities\";\nimport { useButtonContext } from \"../../contexts/ButtonContext\";\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 = (props, ref) => {\n  const {\n    size: contextSize\n  } = useButtonContext();\n  const {\n    appearance = \"secondary\",\n    as = \"button\",\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = \"before\",\n    shape = \"rounded\",\n    size = contextSize ?? \"medium\"\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n    // Slots definition\n    components: {\n      root: \"button\",\n      icon: \"span\"\n    },\n    root: getNativeElementProps(as, useARIAButtonShorthand(props, {\n      required: true,\n      defaultProps: {\n        ref: ref,\n        type: \"button\"\n      }\n    })),\n    icon: iconShorthand\n  };\n};\n//# sourceMappingURL=useButton.js.map"],"names":["useButton_unstable","props","ref","size","contextSize","useButtonContext","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","resolveShorthand","iconOnly","Boolean","children","components","root","getNativeElementProps","useARIAButtonShorthand","required","defaultProps","type"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;2BACgB;gCACiB;+BACvB;AAM1B,MAAMA,qBAAqB,CAACC,OAAOC,MAAQ;IAChD,MAAM,EACJC,MAAMC,YAAW,EAClB,GAAGC,IAAAA,+BAAgB;IACpB,MAAM,EACJC,YAAa,YAAW,EACxBC,IAAK,SAAQ,EACbC,UAAW,KAAK,CAAA,EAChBC,mBAAoB,KAAK,CAAA,EACzBC,KAAI,EACJC,cAAe,SAAQ,EACvBC,OAAQ,UAAS,EACjBT,MAAOC,eAAe,SAAQ,EAC/B,GAAGH;IACJ,MAAMY,gBAAgBC,IAAAA,gCAAgB,EAACJ;IACvC,OAAO;QACL,gCAAgC;QAChCJ;QACAE;QACAC;QACAE;QACAC;QACAT;QACA,uCAAuC;QACvCY,UAAUC,QAAQH,eAAeI,YAAY,CAAChB,MAAMgB,QAAQ;QAC5D,mBAAmB;QACnBC,YAAY;YACVC,MAAM;YACNT,MAAM;QACR;QACAS,MAAMC,IAAAA,qCAAqB,EAACb,IAAIc,IAAAA,iCAAsB,EAACpB,OAAO;YAC5DqB,UAAU,IAAI;YACdC,cAAc;gBACZrB,KAAKA;gBACLsB,MAAM;YACR;QACF;QACAd,MAAMG;IACR;AACF,GACA,qCAAqC"}
+{"version":3,"sources":["../../../lib/components/Button/useButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\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 = (props, ref) => {\n  const {\n    size: contextSize\n  } = 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 !== null && contextSize !== void 0 ? contextSize : 'medium'\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n    // State calculated from a set of props\n    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span'\n    },\n    root: getNativeElementProps(as, useARIAButtonShorthand(props, {\n      required: true,\n      defaultProps: {\n        ref: ref,\n        type: 'button'\n      }\n    })),\n    icon: iconShorthand\n  };\n};\n//# sourceMappingURL=useButton.js.map"],"names":["useButton_unstable","props","ref","size","contextSize","useButtonContext","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","resolveShorthand","iconOnly","Boolean","children","components","root","getNativeElementProps","useARIAButtonShorthand","required","defaultProps","type"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;2BACgB;gCACiB;+BACvB;AAM1B,MAAMA,qBAAqB,CAACC,OAAOC,MAAQ;IAChD,MAAM,EACJC,MAAMC,YAAW,EAClB,GAAGC,IAAAA,+BAAgB;IACpB,MAAM,EACJC,YAAa,YAAW,EACxBC,IAAK,SAAQ,EACbC,UAAW,KAAK,CAAA,EAChBC,mBAAoB,KAAK,CAAA,EACzBC,KAAI,EACJC,cAAe,SAAQ,EACvBC,OAAQ,UAAS,EACjBT,MAAOC,gBAAgB,IAAI,IAAIA,gBAAgB,KAAK,IAAIA,cAAc,QAAQ,CAAA,EAC/E,GAAGH;IACJ,MAAMY,gBAAgBC,IAAAA,gCAAgB,EAACJ;IACvC,OAAO;QACL,gCAAgC;QAChCJ;QACAE;QACAC;QACAE;QACAC;QACAT;QACA,uCAAuC;QACvCY,UAAUC,QAAQ,AAACH,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcI,QAAQ,AAAD,KAAM,CAAChB,MAAMgB,QAAQ;QAC3H,mBAAmB;QACnBC,YAAY;YACVC,MAAM;YACNT,MAAM;QACR;QACAS,MAAMC,IAAAA,qCAAqB,EAACb,IAAIc,IAAAA,iCAAsB,EAACpB,OAAO;YAC5DqB,UAAU,IAAI;YACdC,cAAc;gBACZrB,KAAKA;gBACLsB,MAAM;YACR;QACF;QACAd,MAAMG;IACR;AACF,GACA,qCAAqC"}

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

@@ -14,15 +14,15 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const buttonClassNames = {
-    root: "fui-Button",
-    icon: "fui-Button__icon"
+    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";
+const iconSpacingVar = '--fui-Button__icon--spacing';
+const buttonSpacingSmall = '3px';
+const buttonSpacingSmallWithIcon = '1px';
+const buttonSpacingMedium = '5px';
+const buttonSpacingLarge = '8px';
+const buttonSpacingLargeWithIcon = '7px';
 const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rsawnvh", "r1eny37h", [
     ".rsawnvh{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}",
     ".rsawnvh:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}",
@@ -1136,9 +1136,9 @@ const useButtonStyles_unstable = (state)=>{
     const rootIconOnlyStyles = useRootIconOnlyStyles();
     const iconStyles = useIconStyles();
     const { appearance , disabled , disabledFocusable , icon , iconOnly , iconPosition , shape , size  } = state;
-    state.root.className = (0, _react.mergeClasses)(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === "small" && rootStyles.smallWithIcon, icon && size === "large" && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles
+    state.root.className = (0, _react.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
+    appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
     iconOnly && rootIconOnlyStyles[size], // User provided class name
     state.root.className);
     if (state.icon) {