@fluentui/react-button 9.10.1 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js

@@ -1,8 +1,8 @@
 'use client';
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { tokens } from '@fluentui/react-theme';
-import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { tokens } from "@fluentui/react-theme";
+import { mergeClasses, makeStyles, shorthands } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles.styles.js";
 export const menuButtonClassNames = {
     root: 'fui-MenuButton',
     icon: 'fui-MenuButton__icon',

package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  highContrast: {\n    // High contrast styles\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n      },\n    },\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"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"}
+{"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  highContrast: {\n    // High contrast styles\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n      },\n    },\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"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"}

package/lib/components/SplitButton/SplitButton.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { renderSplitButton_unstable } from './renderSplitButton';
-import { useSplitButton_unstable } from './useSplitButton';
-import { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { renderSplitButton_unstable } from "./renderSplitButton.js";
+import { useSplitButton_unstable } from "./useSplitButton.js";
+import { useSplitButtonStyles_unstable } from "./useSplitButtonStyles.styles.js";
+import { useCustomStyleHook_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.

package/lib/components/SplitButton/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,mCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}

package/lib/components/SplitButton/index.js

@@ -1,4 +1,4 @@
-export { SplitButton } from './SplitButton';
-export { renderSplitButton_unstable } from './renderSplitButton';
-export { useSplitButton_unstable } from './useSplitButton';
-export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';
+export { SplitButton } from "./SplitButton.js";
+export { renderSplitButton_unstable } from "./renderSplitButton.js";
+export { useSplitButton_unstable } from "./useSplitButton.js";
+export { splitButtonClassNames, useSplitButtonStyles_unstable } from "./useSplitButtonStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable } from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","useSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
+{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable } from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","useSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC"}

package/lib/components/SplitButton/renderSplitButton.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 SplitButton component by passing the state defined props to the appropriate slots.
  */ export const renderSplitButton_unstable = (state)=>{

package/lib/components/SplitButton/useSplitButton.js

@@ -1,6 +1,6 @@
-import { useId, slot } from '@fluentui/react-utilities';
-import { Button } from '../Button/Button';
-import { MenuButton } from '../MenuButton/MenuButton';
+import { useId, slot } from "@fluentui/react-utilities";
+import { Button } from "../Button/Button.js";
+import { MenuButton } from "../MenuButton/MenuButton.js";
 /**
  * Given user props, defines default props for the SplitButton and returns processed state.
  * @param props - User provided props to the SplitButton component.

package/lib/components/SplitButton/useSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n    ...rest\n  } = props;\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: MenuButton,\n  });\n  const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: Button,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n  // user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size, // Slots definition\n    components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n    root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"names":["useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","rest","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":"AACA,SAASA,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACf,GAAGC,MACJ,GAAGb;IACJ,MAAMc,SAASnB,MAAM;IAErB,MAAMoB,sBAAsBnB,KAAKoB,QAAQ,CAACR,YAAY;QACpDS,cAAc;YACZf;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAarB;IACf;IACA,MAAMsB,+BAA+BxB,KAAKoB,QAAQ,CAACN,qBAAqB;QACtEO,cAAc;YACZf;YACAC;YACAC;YACAC;YACAC;YACAC;YACAc,IAAIP,SAAS;YACbH;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAatB;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEkB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCnB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAU,YAAY;YAAEC,MAAM;YAAOf,YAAYV;YAAYY,qBAAqBb;QAAO;QAC/E0B,MAAM3B,KAAK4B,MAAM,CAAC;YAAEvB,KAAKA;YAAkC,GAAGY,IAAI;QAAC,GAAG;YAAEM,aAAa;QAAM;QAC3FX,YAAYO;QACZL,qBAAqBU;IACvB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n    ...rest\n  } = props;\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: MenuButton,\n  });\n  const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: Button,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n  // user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size, // Slots definition\n    components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n    root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"names":["useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","rest","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":"AACA,SAASA,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,UAAU,QAAQ,8BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACf,GAAGC,MACJ,GAAGb;IACJ,MAAMc,SAASnB,MAAM;IAErB,MAAMoB,sBAAsBnB,KAAKoB,QAAQ,CAACR,YAAY;QACpDS,cAAc;YACZf;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAarB;IACf;IACA,MAAMsB,+BAA+BxB,KAAKoB,QAAQ,CAACN,qBAAqB;QACtEO,cAAc;YACZf;YACAC;YACAC;YACAC;YACAC;YACAC;YACAc,IAAIP,SAAS;YACbH;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAatB;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEkB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCnB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAU,YAAY;YAAEC,MAAM;YAAOf,YAAYV;YAAYY,qBAAqBb;QAAO;QAC/E0B,MAAM3B,KAAK4B,MAAM,CAAC;YAAEvB,KAAKA;YAAkC,GAAGY,IAAI;QAAC,GAAG;YAAEM,aAAa;QAAM;QAC3FX,YAAYO;QACZL,qBAAqBU;IACvB;AACF,EAAE"}

package/lib/components/SplitButton/useSplitButtonStyles.styles.js

@@ -1,8 +1,8 @@
 'use client';
 
-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',

package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n    root: 'fui-SplitButton',\n    menuButton: 'fui-SplitButton__menuButton',\n    primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n    primaryActionButton: createCustomFocusIndicatorStyle({\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0\n    }),\n    menuButton: createCustomFocusIndicatorStyle({\n        borderLeftWidth: 0,\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0\n    })\n});\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'inline-flex',\n        justifyContent: 'stretch',\n        position: 'relative',\n        verticalAlign: 'middle',\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0\n        },\n        [`& .${splitButtonClassNames.menuButton}`]: {\n            borderLeftWidth: 0,\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            minWidth: MIN_TARGET_SIZE\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeOnBrand\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'HighlightText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorTransparentBackground\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundPressed\n            }\n        }\n    },\n    transparent: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorTransparentBackground\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundPressed\n            }\n        }\n    },\n    // Shape variations\n    circular: {},\n    rounded: {},\n    square: {},\n    // Disabled styles\n    disabled: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeDisabled\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'GrayText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, disabledFocusable } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n    if (state.menuButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n    }\n    if (state.primaryActionButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD;AACA;AACA,MAAMC,eAAe,GAAG,MAAM;AAC9B,MAAMC,cAAc,gBAAGT,QAAA;EAAAO,mBAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAL,UAAA;IAAAM,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGhB,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzD;EACAA,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE2C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACzC,UAAU,EAAE;IAClB;IACAyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE2C,WAAW,CAAC3C,UAAU,EAAEyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACxC,mBAAmB,EAAE;IAC3B;IACAwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAE0C,WAAW,CAAC1C,mBAAmB,EAAEwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { createCustomFocusIndicatorStyle } from \"@fluentui/react-tabster\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const splitButtonClassNames = {\n    root: 'fui-SplitButton',\n    menuButton: 'fui-SplitButton__menuButton',\n    primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n    primaryActionButton: createCustomFocusIndicatorStyle({\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0\n    }),\n    menuButton: createCustomFocusIndicatorStyle({\n        borderLeftWidth: 0,\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0\n    })\n});\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'inline-flex',\n        justifyContent: 'stretch',\n        position: 'relative',\n        verticalAlign: 'middle',\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0\n        },\n        [`& .${splitButtonClassNames.menuButton}`]: {\n            borderLeftWidth: 0,\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            minWidth: MIN_TARGET_SIZE\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeOnBrand\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'HighlightText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorTransparentBackground\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundPressed\n            }\n        }\n    },\n    transparent: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorTransparentBackground\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundHover\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorTransparentBackgroundPressed\n            }\n        }\n    },\n    // Shape variations\n    circular: {},\n    rounded: {},\n    square: {},\n    // Disabled styles\n    disabled: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeDisabled\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        },\n        ':hover:active,:active:focus-visible': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'GrayText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            },\n            ':hover:active,:active:focus-visible': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, disabledFocusable } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n    if (state.menuButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n    }\n    if (state.primaryActionButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD;AACA;AACA,MAAMC,eAAe,GAAG,MAAM;AAC9B,MAAMC,cAAc,gBAAGT,QAAA;EAAAO,mBAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAL,UAAA;IAAAM,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGhB,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzD;EACAA,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE2C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACzC,UAAU,EAAE;IAClB;IACAyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE2C,WAAW,CAAC3C,UAAU,EAAEyC,KAAK,CAACzC,UAAU,CAAC8C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACxC,mBAAmB,EAAE;IAC3B;IACAwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,GAAGnD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAE0C,WAAW,CAAC1C,mBAAmB,EAAEwC,KAAK,CAACxC,mBAAmB,CAAC6C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js

@@ -1,7 +1,7 @@
 'use client';
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
+import { makeStyles, 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',

package/lib/components/ToggleButton/ToggleButton.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { renderToggleButton_unstable } from './renderToggleButton';
-import { useToggleButton_unstable } from './useToggleButton';
-import { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { renderToggleButton_unstable } from "./renderToggleButton.js";
+import { useToggleButton_unstable } from "./useToggleButton.js";
+import { useToggleButtonStyles_unstable } from "./useToggleButtonStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */ export const ToggleButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,oCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

package/lib/components/ToggleButton/index.js

@@ -1,4 +1,4 @@
-export { ToggleButton } from './ToggleButton';
-export { renderToggleButton_unstable } from './renderToggleButton';
-export { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';
-export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
+export { ToggleButton } from "./ToggleButton.js";
+export { renderToggleButton_unstable } from "./renderToggleButton.js";
+export { useToggleButton_unstable, useToggleButtonBase_unstable } from "./useToggleButton.js";
+export { toggleButtonClassNames, useToggleButtonStyles_unstable } from "./useToggleButtonStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
+{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,oBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,uBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,oCAAiC"}

package/lib/components/ToggleButton/renderToggleButton.js

@@ -1 +1 @@
-export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
+export { renderButton_unstable as renderToggleButton_unstable } from "../Button/renderButton.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,yBAAyB"}
+{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,4BAAyB"}

package/lib/components/ToggleButton/useToggleButton.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n  props: ToggleButtonProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,sBAAsB;AAGjF;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcT,mBAAmBQ,aAAaJ;IAEpD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,+BAA+B,CAC1CP,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcR,uBAAuBO,aAAaJ;IAExD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE"}
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n  props: ToggleButtonProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;AAGA,SAASA,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,yBAAsB;AAGjF;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcT,mBAAmBQ,aAAaJ;IAEpD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,+BAA+B,CAC1CP,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcR,uBAAuBO,aAAaJ;IAExD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE"}

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

@@ -1,10 +1,10 @@
 'use client';
 
-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.styles';
+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.styles.js";
 export const toggleButtonClassNames = {
   root: 'fui-ToggleButton',
   icon: 'fui-ToggleButton__icon'

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

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useCheckedAccessibleStyles","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Dhobit","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bpkdmpa","ysa4qo","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const toggleButtonClassNames = {\n    root: 'fui-ToggleButton',\n    icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        color: tokens.colorNeutralForeground1Selected,\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            ...shorthands.borderColor('Highlight'),\n            color: 'HighlightText',\n            forcedColorAdjust: 'none',\n            ':hover': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':focus': {\n                border: '1px solid HighlightText',\n                outlineColor: 'Highlight'\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ...shorthands.borderWidth(tokens.strokeWidthThicker),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        })\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2Selected,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2BrandSelected,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandPressed\n        }\n    }\n});\nconst useCheckedAccessibleStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorBrandBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        }\n    },\n    // Appearance variations\n    outline: {\n        // There's no longer a reason to thicken the outline variant's border\n        ...shorthands.borderWidth(tokens.strokeWidthThin)\n    },\n    primary: {\n        // primary has an inner stroke for the checked style\n        outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n        outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n        // need to not have the default focus style that removes the outline\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n            outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`\n        })\n    },\n    subtle: {\n        // override subtle-appearance-specific icon color on hover\n        ':hover': {\n            [`& .${toggleButtonClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        }\n    },\n    transparent: {\n    },\n    secondary: {\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent')\n        }\n    }\n});\nconst useIconCheckedStyles = makeStyles({\n    // Appearance variations with isAccessible=false\n    subtleOrTransparent: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'auto'\n        }\n    }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n    // Do not use primary variant high contrast styles for toggle buttons\n    // otherwise there isn't enough difference between on/off states\n    base: {\n        '@media (forced-colors: active)': {\n            backgroundColor: 'ButtonFace',\n            ...shorthands.borderColor('ButtonBorder'),\n            color: 'ButtonText',\n            forcedColorAdjust: 'auto'\n        }\n    },\n    disabled: {\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText'),\n            color: 'GrayText',\n            ':focus': {\n                ...shorthands.borderColor('GrayText')\n            }\n        }\n    }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n    const rootCheckedStyles = useRootCheckedStyles();\n    const accessibleCheckedStyles = useCheckedAccessibleStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const iconCheckedStyles = useIconCheckedStyles();\n    const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n    const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n    checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles\n    isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n    state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,wBAAwB,QAAQ,kCAAkC;AAC3E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAA9D,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,MAAA;IAAAM,OAAA;IAAA6C,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAnE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA6C,SAAA;EAAAC,MAAA;IAAArE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA+C,WAAA;IAAAtE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAgD,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAC,CAAA;IAAAD,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA6G5B,CAAC;AACF,MAAME,0BAA0B,gBAAGlF,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAuC,OAAA;IAAAxD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA0D,OAAA;IAAAS,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAhB,MAAA;IAAAiB,MAAA;EAAA;EAAAhB,WAAA;EAAAF,SAAA;AAAA;EAAAG,CAAA;IAAAG,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAF,CAAA;AAAA,CA4ClC,CAAC;AACF,MAAMe,qBAAqB,gBAAG9F,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAuC,OAAA;EAAAK,OAAA;IAAAlE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA8C,SAAA;EAAAC,MAAA;IAAArE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAgD,WAAA;IAAAtE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAiD,CAAA;EAAAC,CAAA;AAAA,CAuD7B,CAAC;AACF,MAAMgB,oBAAoB,gBAAG/F,QAAA;EAAAgG,mBAAA;IAAApF,MAAA;EAAA;EAAAmB,YAAA;IAAAO,OAAA;EAAA;AAAA;EAAAwC,CAAA;EAAAE,CAAA;IAAAA,CAAA;EAAA;AAAA,CAW5B,CAAC;AACF,MAAMiB,4BAA4B,gBAAGjG,QAAA;EAAAM,IAAA;IAAA0B,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA4D,QAAA;IAAAjE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA2B,MAAA;IAAAJ,OAAA;IAAAR,OAAA;IAAAI,MAAA;EAAA;AAAA;EAAAwB,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAoBpC,CAAC;AACF,OAAO,MAAMmB,8BAA8B,GAAIC,KAAK,IAAG;EACnD,MAAMC,iBAAiB,GAAGhG,oBAAoB,CAAC,CAAC;EAChD,MAAMiG,uBAAuB,GAAGpB,0BAA0B,CAAC,CAAC;EAC5D,MAAMqB,kBAAkB,GAAGT,qBAAqB,CAAC,CAAC;EAClD,MAAMU,iBAAiB,GAAGT,oBAAoB,CAAC,CAAC;EAChD,MAAMU,yBAAyB,GAAGR,4BAA4B,CAAC,CAAC;EAChE,MAAM;IAAES,UAAU;IAAEC,OAAO;IAAET,QAAQ;IAAEU,iBAAiB;IAAEC;EAAa,CAAC,GAAGT,KAAK;EAChF;EACAA,KAAK,CAACjG,IAAI,CAAC2G,SAAS,GAAG/G,YAAY,CAACG,sBAAsB,CAACC,IAAI;EAAE;EACjEuG,UAAU,KAAK,SAAS,IAAID,yBAAyB,CAACnG,IAAI,EAAEoG,UAAU,KAAK,SAAS,KAAKR,QAAQ,IAAIU,iBAAiB,CAAC,IAAIH,yBAAyB,CAACP,QAAQ;EAAE;EAC/JS,OAAO,IAAIN,iBAAiB,CAAC/F,IAAI,EAAEqG,OAAO,IAAIN,iBAAiB,CAACtE,YAAY,EAAE2E,UAAU,IAAIC,OAAO,IAAIN,iBAAiB,CAACK,UAAU,CAAC;EAAE;EACtIG,YAAY,IAAIF,OAAO,IAAIL,uBAAuB,CAAChG,IAAI,EAAEuG,YAAY,IAAIH,UAAU,IAAIC,OAAO,IAAIL,uBAAuB,CAACI,UAAU,CAAC;EAAE;EACvI,CAACR,QAAQ,IAAIU,iBAAiB,KAAKL,kBAAkB,CAACjG,IAAI,EAAEoG,UAAU,KAAKR,QAAQ,IAAIU,iBAAiB,CAAC,IAAIL,kBAAkB,CAACG,UAAU,CAAC;EAAE;EAC7IN,KAAK,CAACjG,IAAI,CAAC2G,SAAS,CAAC;EACrB,IAAIV,KAAK,CAAChG,IAAI,EAAE;IACZ;IACAgG,KAAK,CAAChG,IAAI,CAAC0G,SAAS,GAAG/G,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEuG,OAAO,IAAI,CAACE,YAAY,KAAKH,UAAU,KAAK,QAAQ,IAAIA,UAAU,KAAK,aAAa,CAAC,IAAIF,iBAAiB,CAACR,mBAAmB,EAAEQ,iBAAiB,CAACzE,YAAY,EAAEqE,KAAK,CAAChG,IAAI,CAAC0G,SAAS,CAAC;EAC1P;EACA7G,wBAAwB,CAACmG,KAAK,CAAC;EAC/B,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useCheckedAccessibleStyles","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Dhobit","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bpkdmpa","ysa4qo","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from \"@fluentui/react-icons\";\nimport { createCustomFocusIndicatorStyle } from \"@fluentui/react-tabster\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { shorthands, mergeClasses, makeStyles } from \"@griffel/react\";\nimport { useButtonStyles_unstable } from \"../Button/useButtonStyles.styles.js\";\nexport const toggleButtonClassNames = {\n    root: 'fui-ToggleButton',\n    icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        color: tokens.colorNeutralForeground1Selected,\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            ...shorthands.borderColor('Highlight'),\n            color: 'HighlightText',\n            forcedColorAdjust: 'none',\n            ':hover': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':hover:active,:active:focus-visible': {\n                backgroundColor: 'HighlightText',\n                ...shorthands.borderColor('Highlight'),\n                color: 'Highlight'\n            },\n            ':focus': {\n                border: '1px solid HighlightText',\n                outlineColor: 'Highlight'\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ...shorthands.borderWidth(tokens.strokeWidthThicker),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        })\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2Selected,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForeground2BrandSelected,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandHover\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForeground2BrandPressed\n        }\n    }\n});\nconst useCheckedAccessibleStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorBrandBackground,\n        ...shorthands.borderColor('transparent'),\n        color: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            ...shorthands.borderColor('transparent'),\n            color: tokens.colorNeutralForegroundOnBrand\n        }\n    },\n    // Appearance variations\n    outline: {\n        // There's no longer a reason to thicken the outline variant's border\n        ...shorthands.borderWidth(tokens.strokeWidthThin)\n    },\n    primary: {\n        // primary has an inner stroke for the checked style\n        outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n        outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n        // need to not have the default focus style that removes the outline\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n            outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`\n        })\n    },\n    subtle: {\n        // override subtle-appearance-specific icon color on hover\n        ':hover': {\n            [`& .${toggleButtonClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        }\n    },\n    transparent: {\n    },\n    secondary: {\n    }\n});\nconst useRootDisabledStyles = makeStyles({\n    // Base styles\n    base: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent')\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor('transparent'),\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            ...shorthands.borderColor('transparent')\n        },\n        ':hover:active,:active:focus-visible': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            ...shorthands.borderColor('transparent')\n        }\n    }\n});\nconst useIconCheckedStyles = makeStyles({\n    // Appearance variations with isAccessible=false\n    subtleOrTransparent: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'auto'\n        }\n    }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n    // Do not use primary variant high contrast styles for toggle buttons\n    // otherwise there isn't enough difference between on/off states\n    base: {\n        '@media (forced-colors: active)': {\n            backgroundColor: 'ButtonFace',\n            ...shorthands.borderColor('ButtonBorder'),\n            color: 'ButtonText',\n            forcedColorAdjust: 'auto'\n        }\n    },\n    disabled: {\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText'),\n            color: 'GrayText',\n            ':focus': {\n                ...shorthands.borderColor('GrayText')\n            }\n        }\n    }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n    const rootCheckedStyles = useRootCheckedStyles();\n    const accessibleCheckedStyles = useCheckedAccessibleStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const iconCheckedStyles = useIconCheckedStyles();\n    const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n    const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n    checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles\n    isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n    state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.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, mergeClasses, makeStyles } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
+import { shorthands, mergeClasses, makeStyles } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles.styles.js";
 export const toggleButtonClassNames = {
     root: 'fui-ToggleButton',
     icon: 'fui-ToggleButton__icon'

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active,:active:focus-visible': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        border: '1px solid HighlightText',\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useCheckedAccessibleStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    // There's no longer a reason to thicken the outline variant's border\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n  },\n\n  primary: {\n    // primary has an inner stroke for the checked style\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n    outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n\n    // need to not have the default focus style that removes the outline\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n      outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`,\n    }),\n  },\n\n  subtle: {\n    // override subtle-appearance-specific icon color on hover\n    ':hover': {\n      [`& .${toggleButtonClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n\n  transparent: {\n    /* No styles */\n  },\n\n  secondary: {\n    /* No styles */\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations with isAccessible=false\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n    },\n  },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n  // Do not use primary variant high contrast styles for toggle buttons\n  // otherwise there isn't enough difference between on/off states\n  base: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('ButtonBorder'),\n      color: 'ButtonText',\n      forcedColorAdjust: 'auto',\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const accessibleCheckedStyles = useCheckedAccessibleStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n  const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n  const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base,\n    appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Opt-in accessible checked styles\n    isAccessible && checked && accessibleCheckedStyles.base,\n    isAccessible && appearance && checked && accessibleCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      checked &&\n        !isAccessible &&\n        (appearance === 'subtle' || appearance === 'transparent') &&\n        iconCheckedStyles.subtleOrTransparent,\n      iconCheckedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useCheckedAccessibleStyles","colorBrandBackground","outlineOffset","strokeWidthThickest","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active,:active:focus-visible': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        border: '1px solid HighlightText',\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useCheckedAccessibleStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    // There's no longer a reason to thicken the outline variant's border\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n  },\n\n  primary: {\n    // primary has an inner stroke for the checked style\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n    outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n\n    // need to not have the default focus style that removes the outline\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n      outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`,\n    }),\n  },\n\n  subtle: {\n    // override subtle-appearance-specific icon color on hover\n    ':hover': {\n      [`& .${toggleButtonClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n\n  transparent: {\n    /* No styles */\n  },\n\n  secondary: {\n    /* No styles */\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations with isAccessible=false\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n    },\n  },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n  // Do not use primary variant high contrast styles for toggle buttons\n  // otherwise there isn't enough difference between on/off states\n  base: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('ButtonBorder'),\n      color: 'ButtonText',\n      forcedColorAdjust: 'auto',\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const accessibleCheckedStyles = useCheckedAccessibleStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n  const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n  const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base,\n    appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Opt-in accessible checked styles\n    isAccessible && checked && accessibleCheckedStyles.base,\n    isAccessible && appearance && checked && accessibleCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      checked &&\n        !isAccessible &&\n        (appearance === 'subtle' || appearance === 'transparent') &&\n        iconCheckedStyles.subtleOrTransparent,\n      iconCheckedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useCheckedAccessibleStyles","colorBrandBackground","outlineOffset","strokeWidthThickest","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}

package/lib/contexts/ButtonContext.js

@@ -1,5 +1,5 @@
 'use client';
-import * as React from 'react';
+import * as React from "react";
 const buttonContext = React.createContext(undefined);
 const buttonContextDefaultValue = {};
 /**

package/lib/contexts/index.js

@@ -1 +1 @@
-export { ButtonContextProvider, useButtonContext } from './ButtonContext';
+export { ButtonContextProvider, useButtonContext } from "./ButtonContext.js";

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { ButtonContextValue } from './ButtonContext';\nexport { ButtonContextProvider, useButtonContext } from './ButtonContext';\n"],"names":["ButtonContextProvider","useButtonContext"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,kBAAkB"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { ButtonContextValue } from './ButtonContext';\nexport { ButtonContextProvider, useButtonContext } from './ButtonContext';\n"],"names":["ButtonContextProvider","useButtonContext"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,qBAAkB"}

package/lib/index.js

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