@fluentui/react-button 9.9.2 → 9.10.0

package/lib/components/MenuButton/MenuButton.types.js

@@ -1 +1,3 @@
-export { };
+/**
+ * MenuButton State without the `appearance`/`size`/`shape` styling props, for headless usage.
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"],"names":[],"mappings":"AAaA,WACuE"}
+{"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n\n/**\n * MenuButton Props without the `appearance`/`size`/`shape` styling props, for headless usage.\n */\nexport type MenuButtonBaseProps = ComponentProps<MenuButtonSlots> &\n  Pick<ButtonBaseProps, 'disabled' | 'disabledFocusable'>;\n\n/**\n * MenuButton State without the `appearance`/`size`/`shape` styling props, for headless usage.\n */\nexport type MenuButtonBaseState = ComponentState<MenuButtonSlots> &\n  Omit<ButtonBaseState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"],"names":[],"mappings":"AAsBA;;CAEC,GACD,WAC2E"}

package/lib/components/MenuButton/index.js

@@ -1,4 +1,4 @@
 export { MenuButton } from './MenuButton';
 export { renderMenuButton_unstable } from './renderMenuButton';
-export { useMenuButton_unstable } from './useMenuButton';
+export { useMenuButton_unstable, useMenuButtonBase_unstable } from './useMenuButton';
 export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":"AACA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
+{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type {\n  MenuButtonBaseProps,\n  MenuButtonBaseState,\n  MenuButtonProps,\n  MenuButtonSlots,\n  MenuButtonState,\n} from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable, useMenuButtonBase_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":"AAOA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState): JSXElement => {\n  assertSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {(!iconOnly || !icon?.children) && state.menuIcon && <state.menuIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuButton_unstable","state","icon","iconOnly","root","children","menuIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAC7B,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGF;IAE3B,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMC,IAAI,kBAAI,KAACD,MAAMC,IAAI;YACzB,CAACC,YAAYF,MAAMG,IAAI,CAACC,QAAQ;YAC/B,CAAA,CAACF,YAAY,EAACD,iBAAAA,2BAAAA,KAAMG,QAAQ,CAAD,KAAMJ,MAAMK,QAAQ,kBAAI,KAACL,MAAMK,QAAQ;;;AAG1E,EAAE"}
+{"version":3,"sources":["../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { MenuButtonSlots, MenuButtonBaseState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonBaseState): JSXElement => {\n  assertSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {(!iconOnly || !icon?.children) && state.menuIcon && <state.menuIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuButton_unstable","state","icon","iconOnly","root","children","menuIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAC7B,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGF;IAE3B,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMC,IAAI,kBAAI,KAACD,MAAMC,IAAI;YACzB,CAACC,YAAYF,MAAMG,IAAI,CAACC,QAAQ;YAC/B,CAAA,CAACF,YAAY,EAACD,iBAAAA,2BAAAA,KAAMG,QAAQ,CAAD,KAAMJ,MAAMK,QAAQ,kBAAI,KAACL,MAAMK,QAAQ;;;AAG1E,EAAE"}

package/lib/components/MenuButton/useMenuButton.js

@@ -2,12 +2,16 @@
 import * as React from 'react';
 import { ChevronDownRegular } from '@fluentui/react-icons';
 import { slot } from '@fluentui/react-utilities';
-import { useButton_unstable } from '../Button/index';
+import { useButtonContext } from '../../contexts/ButtonContext';
+import { useButtonBase_unstable } from '../Button/index';
 /**
- * Given user props, returns the final state for a MenuButton.
- */ export const useMenuButton_unstable = (props, ref)=>{
+ * Base hook for MenuButton.
+ *
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
+ */ export const useMenuButtonBase_unstable = (props, ref)=>{
     const { menuIcon, ...buttonProps } = props;
-    const buttonState = useButton_unstable(buttonProps, ref);
+    const buttonState = useButtonBase_unstable(buttonProps, ref);
     return {
         ...buttonState,
         iconOnly: Boolean(!props.children),
@@ -31,3 +35,20 @@ import { useButton_unstable } from '../Button/index';
         })
     };
 };
+/**
+ * Given user props, returns the final state for a MenuButton by adding the
+ * `appearance`/`size`/`shape` styling props on top of the base state.
+ *
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
+ */ export const useMenuButton_unstable = (props, ref)=>{
+    const { size: contextSize } = useButtonContext();
+    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
+    const baseState = useMenuButtonBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        appearance,
+        shape,
+        size
+    };
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  props: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const { menuIcon, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return {\n    ...buttonState,\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...buttonState.components,\n      menuIcon: 'span',\n    },\n\n    root: {\n      ...buttonState.root,\n      // force aria-expanded to be a boolean, not a string\n      'aria-expanded': props['aria-expanded']\n        ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n        : false,\n    },\n\n    menuIcon: slot.optional(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","ChevronDownRegular","slot","useButton_unstable","useMenuButton_unstable","props","ref","menuIcon","buttonProps","buttonState","iconOnly","Boolean","children","components","root","optional","defaultProps","renderByDefault","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,aAAa,GAAGH;IACrC,MAAMI,cAAcN,mBAAmBK,aAAaF;IAEpD,OAAO;QACL,GAAGG,WAAW;QACdC,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,YAAYI,UAAU;YACzBN,UAAU;QACZ;QAEAO,MAAM;YACJ,GAAGL,YAAYK,IAAI;YACnB,oDAAoD;YACpD,iBAAiBT,KAAK,CAAC,gBAAgB,GACnCA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;QACN;QAEAE,UAAUL,KAAKa,QAAQ,CAACR,UAAU;YAChCS,cAAc;gBACZJ,wBAAU,oBAACX;YACb;YACAgB,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { MenuButtonBaseProps, MenuButtonBaseState, MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Base hook for MenuButton.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButtonBase_unstable = (\n  props: MenuButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonBaseState => {\n  const { menuIcon, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    ...buttonState,\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...buttonState.components,\n      menuIcon: 'span',\n    },\n\n    root: {\n      ...buttonState.root,\n      // force aria-expanded to be a boolean, not a string\n      'aria-expanded': props['aria-expanded']\n        ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n        : false,\n    },\n\n    menuIcon: slot.optional(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n\n/**\n * Given user props, returns the final state for a MenuButton by adding the\n * `appearance`/`size`/`shape` styling props on top of the base state.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton_unstable = (\n  props: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...baseProps } = props;\n  const baseState = useMenuButtonBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    appearance,\n    shape,\n    size,\n  };\n};\n"],"names":["React","ChevronDownRegular","slot","useButtonContext","useButtonBase_unstable","useMenuButtonBase_unstable","props","ref","menuIcon","buttonProps","buttonState","iconOnly","Boolean","children","components","root","optional","defaultProps","renderByDefault","elementType","useMenuButton_unstable","size","contextSize","appearance","shape","baseProps","baseState"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;;;;CAKC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,aAAa,GAAGH;IACrC,MAAMI,cAAcN,uBAAuBK,aAAaF;IAExD,OAAO;QACL,GAAGG,WAAW;QACdC,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,YAAYI,UAAU;YACzBN,UAAU;QACZ;QAEAO,MAAM;YACJ,GAAGL,YAAYK,IAAI;YACnB,oDAAoD;YACpD,iBAAiBT,KAAK,CAAC,gBAAgB,GACnCA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;QACN;QAEAE,UAAUN,KAAKc,QAAQ,CAACR,UAAU;YAChCS,cAAc;gBACZJ,wBAAU,oBAACZ;YACb;YACAiB,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,yBAAyB,CACpCd,OACAC;IAEA,MAAM,EAAEc,MAAMC,WAAW,EAAE,GAAGnB;IAC9B,MAAM,EAAEoB,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGG,WAAW,GAAGnB;IACtG,MAAMoB,YAAYrB,2BAA2BoB,WAAWlB;IAExD,OAAO;QACL,GAAGmB,SAAS;QACZH;QACAC;QACAH;IACF;AACF,EAAE"}

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

@@ -99,8 +99,6 @@ const useMenuIconStyles = /*#__PURE__*/__styles({
   d: [".fez10in{line-height:0;}", ".f1ugzwwg{font-size:12px;}", ".fvblgha{height:12px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".frx94fk{width:12px;}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fjw5fx7{width:16px;}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}"]
 });
 export const useMenuButtonStyles_unstable = state => {
-  'use no memo';
-
   const rootExpandedStyles = useRootExpandedStyles();
   const iconExpandedStyles = useIconExpandedStyles();
   const menuIconStyles = useMenuIconStyles();

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

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","Bahaeuw","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n    root: 'fui-MenuButton',\n    icon: 'fui-MenuButton__icon',\n    menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n    base: {\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\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});\nconst useIconExpandedStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\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});\nconst useMenuIconStyles = makeStyles({\n    base: {\n        lineHeight: 0\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    // Not-icon only\n    notIconOnly: {\n        marginLeft: tokens.spacingHorizontalXS\n    }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootExpandedStyles = useRootExpandedStyles();\n    const iconExpandedStyles = useIconExpandedStyles();\n    const menuIconStyles = useMenuIconStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n    }\n    if (state.menuIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n    }\n    useButtonStyles_unstable({\n        ...state,\n        iconPosition: 'before'\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","Bahaeuw","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n    root: 'fui-MenuButton',\n    icon: 'fui-MenuButton__icon',\n    menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n    base: {\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\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});\nconst useIconExpandedStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\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});\nconst useMenuIconStyles = makeStyles({\n    base: {\n        lineHeight: 0\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    // Not-icon only\n    notIconOnly: {\n        marginLeft: tokens.spacingHorizontalXS\n    }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n    const rootExpandedStyles = useRootExpandedStyles();\n    const iconExpandedStyles = useIconExpandedStyles();\n    const menuIconStyles = useMenuIconStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n    }\n    if (state.menuIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n    }\n    useButtonStyles_unstable({\n        ...state,\n        iconPosition: 'before'\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -94,7 +94,6 @@ const useMenuIconStyles = makeStyles({
     }
 });
 export const useMenuButtonStyles_unstable = (state)=>{
-    'use no memo';
     const rootExpandedStyles = useRootExpandedStyles();
     const iconExpandedStyles = useIconExpandedStyles();
     const menuIconStyles = useMenuIconStyles();

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  'use no memo';\n\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/useSplitButtonStyles.styles.js

@@ -88,8 +88,6 @@ const useRootStyles = /*#__PURE__*/__styles({
   }]]
 });
 export const useSplitButtonStyles_unstable = state => {
-  'use no memo';
-
   const rootStyles = useRootStyles();
   const focusStyles = useFocusStyles();
   const {

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    'use no memo';\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,aAAa;;EACb,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

@@ -144,7 +144,6 @@ const useRootStyles = makeStyles({
     }
 });
 export const useSplitButtonStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
     const focusStyles = useFocusStyles();
     const { appearance, disabled, disabledFocusable } = state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\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';\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: MIN_TARGET_SIZE,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\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\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundPressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\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';\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: MIN_TARGET_SIZE,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\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\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundPressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active,:active:focus-visible': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active,:active:focus-visible': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}

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

@@ -386,8 +386,6 @@ const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
   }]]
 });
 export const useToggleButtonStyles_unstable = state => {
-  'use no memo';
-
   const rootCheckedStyles = useRootCheckedStyles();
   const accessibleCheckedStyles = useCheckedAccessibleStyles();
   const rootDisabledStyles = useRootDisabledStyles();

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    'use no memo';\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":[]}
+{"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":"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","ignoreList":[]}

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

@@ -253,7 +253,6 @@ const usePrimaryHighContrastStyles = makeStyles({
     }
 });
 export const useToggleButtonStyles_unstable = (state)=>{
-    'use no memo';
     const rootCheckedStyles = useRootCheckedStyles();
     const accessibleCheckedStyles = useCheckedAccessibleStyles();
     const rootDisabledStyles = useRootDisabledStyles();

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  'use no memo';\n\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/index.js

@@ -1,6 +1,6 @@
 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 } from './MenuButton';
+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';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n  useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n  useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseProps,\n  ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,iBAAiB;AAQxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n  useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n  useMenuButtonBase_unstable,\n} from './MenuButton';\nexport type {\n  MenuButtonProps,\n  MenuButtonSlots,\n  MenuButtonState,\n  MenuButtonBaseProps,\n  MenuButtonBaseState,\n} from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n  useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseProps,\n  ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,eAAe;AAQtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,iBAAiB;AAQxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB"}