@fluentui/react-button 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { DistributiveOmit } from '@fluentui/react-utilities';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -13,33 +13,28 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Button: ForwardRefComponent<ButtonProps>;
 
-export declare type ButtonBaseProps = DistributiveOmit<ButtonProps, ButtonDesignPropNames>;
+export declare type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;
 
-export declare type ButtonBaseState = DistributiveOmit<ButtonState, ButtonDesignPropNames>;
+export declare type ButtonBaseState = DistributiveOmit<ButtonState, 'appearance' | 'size' | 'shape'>;
 
 export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
 
 /**
- * @internal
  * Internal context provider used to update default values between internal components
+ *
+ * @internal
  */
 export declare const ButtonContextProvider: React_2.Provider<ButtonContextValue | undefined>;
 
 /**
- * @internal
  * Internal context value used to update default values between internal components
+ *
+ * @internal
  */
 export declare interface ButtonContextValue {
     size?: ButtonSize;
 }
 
-/**
- * Internal use only: lists prop names related to Button design for use within Button components.
- *
- * @internal
- */
-declare type ButtonDesignPropNames = 'appearance' | 'size' | 'shape';
-
 export declare type ButtonProps = ComponentProps<ButtonSlots> & {
     /**
      * A button can have its content and borders styled for greater emphasis or to be subtle.
@@ -116,10 +111,6 @@ export declare type ButtonState = ComponentState<ButtonSlots> & Required<Pick<Bu
  */
 export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
 
-export declare type CompoundButtonBaseProps = DistributiveOmit<CompoundButtonProps, ButtonDesignPropNames>;
-
-export declare type CompoundButtonBaseState = DistributiveOmit<CompoundButtonState, ButtonDesignPropNames>;
-
 export declare const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
 
 export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
@@ -143,9 +134,15 @@ export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> &
  */
 export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
 
-export declare type MenuButtonBaseProps = DistributiveOmit<MenuButtonProps, ButtonDesignPropNames>;
+/**
+ * MenuButton Props without the `appearance`/`size`/`shape` styling props, for headless usage.
+ */
+export declare type MenuButtonBaseProps = ComponentProps<MenuButtonSlots> & Pick<ButtonBaseProps, 'disabled' | 'disabledFocusable'>;
 
-export declare type MenuButtonBaseState = DistributiveOmit<MenuButtonState, ButtonDesignPropNames>;
+/**
+ * MenuButton State without the `appearance`/`size`/`shape` styling props, for headless usage.
+ */
+export declare type MenuButtonBaseState = ComponentState<MenuButtonSlots> & Omit<ButtonBaseState, keyof ButtonSlots | 'components' | 'iconPosition'>;
 
 export declare const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
 
@@ -163,7 +160,7 @@ export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<But
 /**
  * Renders a Button component by passing the state defined props to the appropriate slots.
  */
-declare const renderButton_unstable: (state: ButtonState) => JSXElement;
+declare const renderButton_unstable: (state: ButtonBaseState) => JSXElement;
 export { renderButton_unstable }
 export { renderButton_unstable as renderToggleButton_unstable }
 
@@ -175,7 +172,7 @@ export declare const renderCompoundButton_unstable: (state: CompoundButtonState)
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */
-export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSXElement;
+export declare const renderMenuButton_unstable: (state: MenuButtonBaseState) => JSXElement;
 
 /**
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
@@ -188,10 +185,6 @@ export declare const renderSplitButton_unstable: (state: SplitButtonState) => JS
  */
 export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;
 
-export declare type SplitButtonBaseProps = DistributiveOmit<SplitButtonProps, ButtonDesignPropNames>;
-
-export declare type SplitButtonBaseState = DistributiveOmit<SplitButtonState, ButtonDesignPropNames>;
-
 export declare const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
 
 export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root' | 'as'> & Omit<MenuButtonProps, 'root' | 'as'>;
@@ -218,9 +211,9 @@ export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<B
  */
 export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
 
-export declare type ToggleButtonBaseProps = DistributiveOmit<ToggleButtonProps, ButtonDesignPropNames>;
+export declare type ToggleButtonBaseProps = ButtonBaseProps & Pick<ToggleButtonProps, 'defaultChecked' | 'checked' | 'isAccessible'>;
 
-export declare type ToggleButtonBaseState = DistributiveOmit<ToggleButtonState, ButtonDesignPropNames>;
+export declare type ToggleButtonBaseState = ButtonBaseState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;
 
 export declare const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
 
@@ -240,9 +233,15 @@ export declare type ToggleButtonProps = ButtonProps & {
      * @default false
      */
     checked?: boolean;
+    /**
+     * Defines whether the `ToggleButton` should use the alternate selected styles that have adequate contrast with the rest style
+     *
+     * @default false
+     */
+    isAccessible?: boolean;
 };
 
-export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;
+export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;
 
 /**
  * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
@@ -252,15 +251,17 @@ export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButton
 export declare const useButton_unstable: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
 
 /**
- * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * Base hook for Button component, which manages state related to slots structure and ARIA attributes.
+ *
  * @param props - User provided props to the Button component.
  * @param ref - User provided ref to be passed to the Button component.
  */
-export declare const useButtonBase_unstable: (props: ButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonBaseState;
+export declare const useButtonBase_unstable: (props: ButtonBaseProps, ref?: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonBaseState;
 
 /**
- * @internal
  * Internal context hook used to update default values between internal components
+ *
+ * @internal
  */
 export declare const useButtonContext: () => ButtonContextValue;
 
@@ -273,24 +274,28 @@ export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonSta
  */
 export declare const useCompoundButton_unstable: (props: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
 
-/**
- * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
- * @param props - User provided props to the CompoundButton component.
- * @param ref - User provided ref to be passed to the CompoundButton component.
- */
-export declare const useCompoundButtonBase_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonBaseState;
-
 export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;
 
 /**
- * Given user props, returns the final state for a MenuButton.
+ * Given user props, returns the final state for a MenuButton by adding the
+ * `appearance`/`size`/`shape` styling props on top of the base state.
+ *
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
  */
 export declare const useMenuButton_unstable: (props: MenuButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
 
 /**
- * Given user props, returns the final state for a MenuButton.
+ * Base hook for MenuButton.
+ *
+ * The `menuIcon` slot ships no icon of its own and only renders when a consumer
+ * provides one, so headless consumers can supply their own visuals. The styled
+ * `useMenuButton_unstable` adds the default chevron on top of this.
+ *
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
  */
-export declare const useMenuButtonBase_unstable: ({ menuIcon, ...props }: MenuButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonBaseState;
+export declare const useMenuButtonBase_unstable: (props: MenuButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonBaseState;
 
 export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
 
@@ -301,17 +306,10 @@ export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => M
  */
 export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
 
-/**
- * Given user props, defines default props for the SplitButton and returns processed state.
- * @param props - User provided props to the SplitButton component.
- * @param ref - User provided ref to be passed to the SplitButton component.
- */
-export declare const useSplitButtonBase_unstable: (props: SplitButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonBaseState;
-
 export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
 
 /**
- * Given user props, defines default props for the ToggleButton, calls `useToggleButtonBase_unstable` and adds design-related props, and returns
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
  * processed state.
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
@@ -319,15 +317,15 @@ export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) =>
 export declare const useToggleButton_unstable: (props: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
 
 /**
- * Given user props, defines base props (including behavioral and structural ones) for the ToggleButton returns
- * processed state.
+ * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.
+ *
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */
-export declare const useToggleButtonBase_unstable: (props: ToggleButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonBaseState;
+export declare const useToggleButtonBase_unstable: (props: ToggleButtonProps, ref?: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonBaseState;
 
 export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
 
-export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
+export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable' | 'isAccessible'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root' | 'isAccessible'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
 
 export { }

package/lib/Button.js

@@ -1 +1 @@
-export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, useButtonBase_unstable } from './components/Button/index';
+export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, useButtonBase_unstable } from "./components/Button/index.js";

package/lib/Button.js.map

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

package/lib/CompoundButton.js

@@ -1 +1 @@
-export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable, useCompoundButtonBase_unstable } from './components/CompoundButton/index';
+export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from "./components/CompoundButton/index.js";

package/lib/CompoundButton.js.map

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

package/lib/MenuButton.js

@@ -1 +1 @@
-export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable, useMenuButtonBase_unstable } from './components/MenuButton/index';
+export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable, useMenuButtonBase_unstable } from "./components/MenuButton/index.js";

package/lib/MenuButton.js.map

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

package/lib/SplitButton.js

@@ -1 +1 @@
-export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable, useSplitButtonBase_unstable } from './components/SplitButton/index';
+export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from "./components/SplitButton/index.js";

package/lib/SplitButton.js.map

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

package/lib/ToggleButton.js

@@ -1 +1 @@
-export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, useToggleButtonBase_unstable } from './components/ToggleButton/index';
+export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, useToggleButtonBase_unstable } from "./components/ToggleButton/index.js";

package/lib/ToggleButton.js.map

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

package/lib/components/Button/Button.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { renderButton_unstable } from './renderButton';
-import { useButton_unstable } from './useButton';
-import { useButtonStyles_unstable } from './useButtonStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { renderButton_unstable } from "./renderButton.js";
+import { useButton_unstable } from "./useButton.js";
+import { useButtonStyles_unstable } from "./useButtonStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Buttons give people a way to trigger an action.
  */ export const Button = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

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

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

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

package/lib/components/Button/index.js

@@ -1,5 +1,4 @@
-export { Button } from './Button';
-export { renderButton_unstable } from './renderButton';
-export { useButton_unstable } from './useButton';
-export { useButtonBase_unstable } from './useButtonBase';
-export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';
+export { Button } from "./Button.js";
+export { renderButton_unstable } from "./renderButton.js";
+export { useButton_unstable, useButtonBase_unstable } from "./useButton.js";
+export { buttonClassNames, useButtonStyles_unstable } from "./useButtonStyles.styles.js";

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

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

package/lib/components/Button/renderButton.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Renders a Button component by passing the state defined props to the appropriate slots.
  */ export const renderButton_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\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): JSXElement => {\n  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}
+{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { ButtonSlots, ButtonBaseState } 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: ButtonBaseState): JSXElement => {\n  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}

package/lib/components/Button/useButton.js

@@ -1,20 +1,49 @@
 'use client';
-import * as React from 'react';
-import { useButtonContext } from '../../contexts/ButtonContext';
-import { useButtonBase_unstable } from './useButtonBase';
+import { useButtonContext } from "../../contexts/ButtonContext.js";
+import { useARIAButtonProps } from "@fluentui/react-aria";
+import { slot } from "@fluentui/react-utilities";
 /**
  * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
  * @param props - User provided props to the Button component.
  * @param ref - User provided ref to be passed to the Button component.
  */ export const useButton_unstable = (props, ref)=>{
     const { size: contextSize } = useButtonContext();
-    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
-    const state = useButtonBase_unstable(props, ref);
+    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...buttonProps } = props;
+    const state = useButtonBase_unstable(buttonProps, ref);
     return {
-        // Props passed at the top-level
         appearance,
         shape,
         size,
         ...state
     };
 };
+/**
+ * Base hook for Button component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */ export const useButtonBase_unstable = (props, ref)=>{
+    const { icon, iconPosition = 'before', ...buttonProps } = props;
+    const iconShorthand = slot.optional(icon, {
+        elementType: 'span'
+    });
+    var _props_disabled, _props_disabledFocusable;
+    return {
+        disabled: (_props_disabled = props.disabled) !== null && _props_disabled !== void 0 ? _props_disabled : false,
+        disabledFocusable: (_props_disabledFocusable = props.disabledFocusable) !== null && _props_disabledFocusable !== void 0 ? _props_disabledFocusable : false,
+        iconPosition,
+        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+        components: {
+            root: 'button',
+            icon: 'span'
+        },
+        root: slot.always(useARIAButtonProps(buttonProps.as, buttonProps), {
+            elementType: 'button',
+            defaultProps: {
+                ref: ref,
+                type: props.as !== 'a' ? 'button' : undefined
+            }
+        }),
+        icon: iconShorthand
+    };
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ButtonProps, ButtonState } from './Button.types';\nimport { useButtonBase_unstable } from './useButtonBase';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n  const state = useButtonBase_unstable(props, ref);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    shape,\n    size,\n    ...state,\n  };\n};\n"],"names":["React","useButtonContext","useButtonBase_unstable","useButton_unstable","props","ref","size","contextSize","appearance","shape","state"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE,SAASC,sBAAsB,QAAQ,kBAAkB;AAEzD;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGN;IAC9B,MAAM,EAAEO,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGH;IACxF,MAAMM,QAAQR,uBAAuBE,OAAOC;IAE5C,OAAO;QACL,gCAAgC;QAChCG;QACAC;QACAH;QACA,GAAGI,KAAK;IACV;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;\n  const state = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Button component, which manages state related to slots structure and ARIA attributes.\n *\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 useButtonBase_unstable = (\n  props: ButtonBaseProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonBaseState => {\n  const { icon, iconPosition = 'before', ...buttonProps } = props;\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n\n  return {\n    disabled: props.disabled ?? false,\n    disabledFocusable: props.disabledFocusable ?? false,\n    iconPosition,\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n    components: { root: 'button', icon: 'span' },\n    root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(buttonProps.as, buttonProps), {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: props.as !== 'a' ? 'button' : undefined,\n      },\n    }),\n    icon: iconShorthand,\n  };\n};\n"],"names":["useButtonContext","useARIAButtonProps","slot","useButton_unstable","props","ref","size","contextSize","appearance","shape","buttonProps","state","useButtonBase_unstable","icon","iconPosition","iconShorthand","optional","elementType","disabled","disabledFocusable","iconOnly","Boolean","children","components","root","always","as","defaultProps","type","undefined"],"mappings":"AAAA;AAGA,SAASA,gBAAgB,QAAQ,kCAA+B;AAEhE,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,IAAI,QAAQ,4BAA4B;AAGjD;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGP;IAC9B,MAAM,EAAEQ,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGG,aAAa,GAAGN;IACxG,MAAMO,QAAQC,uBAAuBF,aAAaL;IAElD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGK,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,yBAAyB,CACpCR,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGJ,aAAa,GAAGN;IAC1D,MAAMW,gBAAgBb,KAAKc,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;QAGpDb,iBACSA;IAFrB,OAAO;QACLc,UAAUd,CAAAA,kBAAAA,MAAMc,QAAQ,cAAdd,6BAAAA,kBAAkB;QAC5Be,mBAAmBf,CAAAA,2BAAAA,MAAMe,iBAAiB,cAAvBf,sCAAAA,2BAA2B;QAC9CU;QACAM,UAAUC,QAAQN,CAAAA,0BAAAA,oCAAAA,cAAeO,QAAQ,KAAI,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMtB,KAAKuB,MAAM,CAA2BxB,mBAAmBS,YAAYgB,EAAE,EAAEhB,cAAc;YAC3FO,aAAa;YACbU,cAAc;gBACZtB,KAAKA;gBACLuB,MAAMxB,MAAMsB,EAAE,KAAK,MAAM,WAAWG;YACtC;QACF;QACAhB,MAAME;IACR;AACF,EAAE"}

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

@@ -1,9 +1,9 @@
 'use client';
 
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
-import { shorthands, __styles, __resetStyles, mergeClasses } from '@griffel/react';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
+import { shorthands, __styles, __resetStyles, mergeClasses } from "@griffel/react";
 export const buttonClassNames = {
   root: 'fui-Button',
   icon: 'fui-Button__icon'
@@ -518,8 +518,6 @@ const useIconStyles = /*#__PURE__*/__styles({
   d: [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"]
 });
 export const useButtonStyles_unstable = state => {
-  'use no memo';
-
   const rootBaseClassName = useRootBaseClassName();
   const iconBaseClassName = useIconBaseClassName();
   const rootStyles = useRootStyles();
@@ -537,6 +535,7 @@ export const useButtonStyles_unstable = state => {
     shape,
     size
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape],
   // Disabled styles
   (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
@@ -547,6 +546,7 @@ export const useButtonStyles_unstable = state => {
   // User provided class name
   state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
   }
   return state;