@fluentui/react-button 9.3.15 → 9.3.17

package/lib/components/CompoundButton/renderCompoundButton.js

@@ -1,17 +1,9 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
- */
-export const renderCompoundButton_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  const {
-    iconOnly,
-    iconPosition
-  } = state;
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), !iconOnly && /*#__PURE__*/createElement(slots.contentContainer, slotProps.contentContainer, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/createElement(slots.secondaryContent, slotProps.secondaryContent)), iconPosition === 'after' && slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon));
+ */ export const renderCompoundButton_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    const { iconOnly , iconPosition  } = state;
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !iconOnly && /*#__PURE__*/ createElement(slots.contentContainer, slotProps.contentContainer, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/ createElement(slots.secondaryContent, slotProps.secondaryContent)), iconPosition === 'after' && slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon));
 };
-//# sourceMappingURL=renderCompoundButton.js.map

package/lib/components/CompoundButton/renderCompoundButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlotsNext<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {slotProps.root.children}\n          {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA+B;EAC3E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAkCE,KAAA;EAC/D,MAAM;IAAEG,QAAA;IAAUC;EAAY,CAAE,GAAGJ,KAAA;EAEnC,oBACEH,aAfJ,CAeKI,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,EAC3BD,YAAA,KAAiB,WAAWH,KAAA,CAAMK,IAAI,iBAAIT,aAhBjD,CAgBkDI,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,GACxE,CAACH,QAAA,iBACAN,aAlBR,CAkBSI,KAAA,CAAMM,gBAAgB,EAAKL,SAAA,CAAUK,gBAAgB,EACnDL,SAAA,CAAUG,IAAI,CAACG,QAAQ,EACvBP,KAAA,CAAMQ,gBAAgB,iBAAIZ,aApBrC,CAoBsCI,KAAA,CAAMQ,gBAAgB,EAAKP,SAAA,CAAUO,gBAAgB,IAGpFL,YAAA,KAAiB,WAAWH,KAAA,CAAMK,IAAI,iBAAIT,aAvBjD,CAuBkDI,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAG/E"}
+{"version":3,"sources":["renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlotsNext<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {slotProps.root.children}\n          {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAkCE;IAC/D,MAAM,EAAEG,SAAQ,EAAEC,aAAY,EAAE,GAAGJ;IAEnC,qBACE,AAfJ,cAeKC,MAAMI,IAAI,EAAKH,UAAUG,IAAI,EAC3BD,iBAAiB,WAAWH,MAAMK,IAAI,kBAAI,AAhBjD,cAgBkDL,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,GACxE,CAACH,0BACA,AAlBR,cAkBSF,MAAMM,gBAAgB,EAAKL,UAAUK,gBAAgB,EACnDL,UAAUG,IAAI,CAACG,QAAQ,EACvBP,MAAMQ,gBAAgB,kBAAI,AApBrC,cAoBsCR,MAAMQ,gBAAgB,EAAKP,UAAUO,gBAAgB,IAGpFL,iBAAiB,WAAWH,MAAMK,IAAI,kBAAI,AAvBjD,cAuBkDL,MAAMK,IAAI,EAAKJ,UAAUI,IAAI;AAG/E,EAAE"}

package/lib/components/CompoundButton/useCompoundButton.js

@@ -5,30 +5,24 @@ import { useButton_unstable } from '../Button/index';
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
  * @param props - User provided props to the CompoundButton component.
  * @param ref - User provided ref to be passed to the CompoundButton component.
- */
-export const useCompoundButton_unstable = ({
-  contentContainer,
-  secondaryContent,
-  ...props
-}, ref) => {
-  var _state_icon, _state_secondaryContent;
-  const state = {
-    // Button state
-    ...useButton_unstable(props, ref),
-    // Slots definition
-    components: {
-      root: 'button',
-      icon: 'span',
-      contentContainer: 'span',
-      secondaryContent: 'span'
-    },
-    contentContainer: resolveShorthand(contentContainer, {
-      required: true
-    }),
-    secondaryContent: resolveShorthand(secondaryContent)
-  };
-  // Recalculate iconOnly to take into account secondaryContent.
-  state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
-  return state;
+ */ export const useCompoundButton_unstable = ({ contentContainer , secondaryContent , ...props }, ref)=>{
+    var _state_icon, _state_secondaryContent;
+    const state = {
+        // Button state
+        ...useButton_unstable(props, ref),
+        // Slots definition
+        components: {
+            root: 'button',
+            icon: 'span',
+            contentContainer: 'span',
+            secondaryContent: 'span'
+        },
+        contentContainer: resolveShorthand(contentContainer, {
+            required: true
+        }),
+        secondaryContent: resolveShorthand(secondaryContent)
+    };
+    // Recalculate iconOnly to take into account secondaryContent.
+    state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
+    return state;
 };
-//# sourceMappingURL=useCompoundButton.js.map

package/lib/components/CompoundButton/useCompoundButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","_state_icon","_state_secondaryContent","state","components","root","icon","required","iconOnly","Boolean","children"],"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const state: CompoundButtonState = {\n    // Button state\n    ...useButton_unstable(props, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: resolveShorthand(contentContainer, { required: true }),\n    secondaryContent: resolveShorthand(secondaryContent),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;;;AAKA,OAAO,MAAMC,0BAAA,GAA6BA,CACxC;EAAEC,gBAAA;EAAkBC,gBAAA;EAAkB,GAAGC;AAAA,CAA4B,EACrEC,GAAA,KACwB;MAiBCC,WAAA,EAA4CC,uBAAA;EAhBrE,MAAMC,KAAA,GAA6B;IACjC;IACA,GAAGR,kBAAA,CAAmBI,KAAA,EAAOC,GAAA,CAAI;IAEjC;IACAI,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,IAAA,EAAM;MACNT,gBAAA,EAAkB;MAClBC,gBAAA,EAAkB;IACpB;IACAD,gBAAA,EAAkBH,gBAAA,CAAiBG,gBAAA,EAAkB;MAAEU,QAAA,EAAU;IAAK;IACtET,gBAAA,EAAkBJ,gBAAA,CAAiBI,gBAAA;EACrC;EAEA;EACAK,KAAA,CAAMK,QAAQ,GAAGC,OAAA,CAAQ,EAAAR,WAAA,GAAAE,KAAA,CAAMG,IAAI,cAAVL,WAAA,uBAAAA,WAAA,CAAYS,QAAQ,KAAI,CAACX,KAAA,CAAMW,QAAQ,IAAI,EAAC,CAAAR,uBAAA,GAAAC,KAAA,CAAML,gBAAgB,cAAtBI,uBAAA,uBAAAA,uBAAA,CAAwBQ,QAAQ,CAAD;EAEpG,OAAOP,KAAA;AACT"}
+{"version":3,"sources":["useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const state: CompoundButtonState = {\n    // Button state\n    ...useButton_unstable(props, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: resolveShorthand(contentContainer, { required: true }),\n    secondaryContent: resolveShorthand(secondaryContent),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"],"names":["React","resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","required","iconOnly","Boolean","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxC,EAAEC,iBAAgB,EAAEC,iBAAgB,EAAE,GAAGC,OAA4B,EACrEC,MACwB;QAiBCC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,GAAGN,mBAAmBI,OAAOC,IAAI;QAEjC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,iBAAiBG,kBAAkB;YAAEQ,UAAU,IAAI;QAAC;QACtEP,kBAAkBJ,iBAAiBI;IACrC;IAEA,8DAA8D;IAC9DG,MAAMK,QAAQ,GAAGC,QAAQN,CAAAA,CAAAA,cAAAA,MAAMG,IAAI,cAAVH,yBAAAA,KAAAA,IAAAA,YAAYO,QAAQ,AAAD,KAAK,CAACT,MAAMS,QAAQ,IAAI,CAACP,CAAAA,CAAAA,0BAAAA,MAAMH,gBAAgB,cAAtBG,qCAAAA,KAAAA,IAAAA,wBAAwBO,QAAQ,AAAD;IAEpG,OAAOP;AACT,EAAE"}

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.styles.ts"],"sourcesContent":["import { 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 { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalS),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const compoundButtonClassNames = {\n    root: 'fui-CompoundButton',\n    icon: 'fui-CompoundButton__icon',\n    contentContainer: 'fui-CompoundButton__contentContainer',\n    secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        }\n    },\n    // High contrast styles\n    highContrast: {\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        }\n    },\n    // Size variations\n    small: {\n        ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalS, tokens.spacingHorizontalMNudge, tokens.spacingHorizontalS),\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    medium: {\n        ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    large: {\n        ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        ...shorthands.padding(tokens.spacingHorizontalXS),\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        ...shorthands.padding(tokens.spacingHorizontalSNudge),\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    after: {\n        marginLeft: tokens.spacingHorizontalM\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: tokens.fontWeightRegular\n    },\n    // Size variations\n    small: {\n        fontSize: tokens.fontSizeBase200\n    },\n    medium: {\n        fontSize: tokens.fontSizeBase200\n    },\n    large: {\n        fontSize: tokens.fontSizeBase300\n    }\n});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance , disabled , disabledFocusable , iconOnly , iconPosition , size  } = state;\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // User provided class name\n    state.root.className);\n    state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/MenuButton/MenuButton.js

@@ -6,14 +6,11 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
  * menus.
- */
-export const MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuButton_unstable(props, ref);
-  useMenuButtonStyles_unstable(state);
-  useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);
-  return renderMenuButton_unstable(state);
-  // Casting is required due to lack of distributive union to support unions on @types/react
+ */ export const MenuButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useMenuButton_unstable(props, ref);
+    useMenuButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);
+    return renderMenuButton_unstable(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
 });
-
 MenuButton.displayName = 'MenuButton';
-//# sourceMappingURL=MenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,4BAA4B,QAAQ;AAG7C,SAASC,2BAA2B,QAAQ;AAE5C;;;;AAIA,OAAO,MAAMC,UAAA,gBAAmDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQP,sBAAA,CAAuBK,KAAA,EAAOC,GAAA;EAE5CL,4BAAA,CAA6BM,KAAA;EAE7BL,2BAAA,CAA4B,gCAAgCK,KAAA;EAE5D,OAAOR,yBAAA,CAA0BQ,KAAA;EACjC;AACF;;AAEAJ,UAAA,CAAWK,WAAW,GAAG"}
+{"version":3,"sources":["MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOR,0BAA0BQ;AACjC,0FAA0F;AAC5F,GAA2C;AAE3CJ,WAAWK,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=MenuButton.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"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"],"mappings":"AAAA"}
+{"version":3,"sources":["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"}

package/lib/components/MenuButton/index.js

@@ -3,4 +3,3 @@ export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
 export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["menuButtonClassNames","useMenuButtonStyles_unstable"],"sources":["../../../src/components/MenuButton/index.ts"],"sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,oBAAoB,EAAEC,4BAA4B,QAAQ"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":"AAAA,cAAc,qBAAqB;AACnC,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,SAASA,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

package/lib/components/MenuButton/renderMenuButton.js

@@ -1,17 +1,9 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
- */
-export const renderMenuButton_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  const {
-    icon,
-    iconOnly
-  } = state;
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/createElement(slots.menuIcon, slotProps.menuIcon));
+ */ export const renderMenuButton_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    const { icon , iconOnly  } = state;
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/ createElement(slots.menuIcon, slotProps.menuIcon));
 };
-//# sourceMappingURL=renderMenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","root","children","menuIcon"],"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlotsNext<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA8BE,KAAA;EAC3D,MAAM;IAAEG,IAAA;IAAMC;EAAQ,CAAE,GAAGJ,KAAA;EAE3B,oBACEH,aAfJ,CAeKI,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,EAC3BJ,KAAA,CAAME,IAAI,iBAAIN,aAhBrB,CAgBsBI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,GAC5C,CAACC,QAAA,IAAYF,SAAA,CAAUG,IAAI,CAACC,QAAQ,EACpC,CAAC,CAACF,QAAA,IAAY,EAACD,IAAA,aAAAA,IAAA,uBAAAA,IAAA,CAAMG,QAAQ,CAAD,KAAML,KAAA,CAAMM,QAAQ,iBAAIV,aAlB3D,CAkB4DI,KAAA,CAAMM,QAAQ,EAAKL,SAAA,CAAUK,QAAQ;AAGjG"}
+{"version":3,"sources":["renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlotsNext<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && slotProps.root.children}\n      {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","root","children","menuIcon"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAC3D,MAAM,EAAEG,KAAI,EAAEC,SAAQ,EAAE,GAAGJ;IAE3B,qBACE,AAfJ,cAeKC,MAAMI,IAAI,EAAKH,UAAUG,IAAI,EAC3BJ,MAAME,IAAI,kBAAI,AAhBrB,cAgBsBF,MAAME,IAAI,EAAKD,UAAUC,IAAI,GAC5C,CAACC,YAAYF,UAAUG,IAAI,CAACC,QAAQ,EACpC,AAAC,CAAA,CAACF,YAAY,CAACD,CAAAA,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAMG,QAAQ,AAAD,CAAA,KAAML,MAAMM,QAAQ,kBAAI,AAlB3D,cAkB4DN,MAAMM,QAAQ,EAAKL,UAAUK,QAAQ;AAGjG,EAAE"}

package/lib/components/MenuButton/useMenuButton.js

@@ -4,31 +4,26 @@ import { resolveShorthand } from '@fluentui/react-utilities';
 import { useButton_unstable } from '../Button/index';
 /**
  * Given user props, returns the final state for a MenuButton.
- */
-export const useMenuButton_unstable = ({
-  menuIcon,
-  ...props
-}, ref) => {
-  const buttonState = useButton_unstable(props, ref);
-  var _props_ariaexpanded;
-  buttonState.root['aria-expanded'] = (_props_ariaexpanded = props['aria-expanded']) !== null && _props_ariaexpanded !== void 0 ? _props_ariaexpanded : false;
-  return {
-    // Button state
-    ...buttonState,
-    // State calculated from a set of props
-    iconOnly: Boolean(!props.children),
-    // Slots definition
-    components: {
-      root: 'button',
-      icon: 'span',
-      menuIcon: 'span'
-    },
-    menuIcon: resolveShorthand(menuIcon, {
-      defaultProps: {
-        children: /*#__PURE__*/React.createElement(ChevronDownRegular, null)
-      },
-      required: true
-    })
-  };
+ */ export const useMenuButton_unstable = ({ menuIcon , ...props }, ref)=>{
+    const buttonState = useButton_unstable(props, ref);
+    var _props_ariaexpanded;
+    buttonState.root['aria-expanded'] = (_props_ariaexpanded = props['aria-expanded']) !== null && _props_ariaexpanded !== void 0 ? _props_ariaexpanded : false;
+    return {
+        // Button state
+        ...buttonState,
+        // State calculated from a set of props
+        iconOnly: Boolean(!props.children),
+        // Slots definition
+        components: {
+            root: 'button',
+            icon: 'span',
+            menuIcon: 'span'
+        },
+        menuIcon: resolveShorthand(menuIcon, {
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
+            },
+            required: true
+        })
+    };
 };
-//# sourceMappingURL=useMenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","_props_ariaexpanded","root","iconOnly","Boolean","children","components","icon","defaultProps","createElement","required"],"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  { menuIcon, ...props }: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CACpC;EAAEC,QAAA;EAAU,GAAGC;AAAA,CAAwB,EACvCC,GAAA,KACoB;EACpB,MAAMC,WAAA,GAAcL,kBAAA,CAAmBG,KAAA,EAAOC,GAAA;MACVE,mBAAA;EAApCD,WAAA,CAAYE,IAAI,CAAC,gBAAgB,GAAG,CAAAD,mBAAA,GAAAH,KAAK,CAAC,gBAAgB,cAAtBG,mBAAA,cAAAA,mBAAA,GAA0B,KAAK;EAEnE,OAAO;IACL;IACA,GAAGD,WAAW;IAEd;IACAG,QAAA,EAAUC,OAAA,CAAQ,CAACN,KAAA,CAAMO,QAAQ;IAEjC;IACAC,UAAA,EAAY;MACVJ,IAAA,EAAM;MACNK,IAAA,EAAM;MACNV,QAAA,EAAU;IACZ;IAEAA,QAAA,EAAUH,gBAAA,CAAiBG,QAAA,EAAU;MACnCW,YAAA,EAAc;QACZH,QAAA,eAAUb,KAAA,CAAAiB,aAAA,CAAChB,kBAAA;MACb;MACAiB,QAAA,EAAU;IACZ;EACF;AACF"}
+{"version":3,"sources":["useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  { menuIcon, ...props }: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n  buttonState.root['aria-expanded'] = props['aria-expanded'] ?? false;\n\n  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      menuIcon: 'span',\n    },\n\n    menuIcon: resolveShorthand(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      required: true,\n    }),\n  };\n};\n"],"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","defaultProps","required"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpC,EAAEC,SAAQ,EAAE,GAAGC,OAAwB,EACvCC,MACoB;IACpB,MAAMC,cAAcL,mBAAmBG,OAAOC;QACVD;IAApCE,YAAYC,IAAI,CAAC,gBAAgB,GAAGH,CAAAA,sBAAAA,KAAK,CAAC,gBAAgB,cAAtBA,iCAAAA,sBAA0B,KAAK;IAEnE,OAAO;QACL,eAAe;QACf,GAAGE,WAAW;QAEd,uCAAuC;QACvCE,UAAUC,QAAQ,CAACL,MAAMM,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACVJ,MAAM;YACNK,MAAM;YACNT,UAAU;QACZ;QAEAA,UAAUH,iBAAiBG,UAAU;YACnCU,cAAc;gBACZH,wBAAU,oBAACX;YACb;YACAe,UAAU,IAAI;QAChB;IACF;AACF,EAAE"}

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","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["../../../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["import { 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});\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  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    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\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"],"mappings":"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"}
+{"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","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":["import { 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});\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    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        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance], state.icon.className);\n    }\n    if (state.menuIcon) {\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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"}

package/lib/components/SplitButton/SplitButton.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,uBAAuB,QAAQ;AACxC,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,2BAA2B,QAAQ;AAE5C;;;;AAIA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQP,uBAAA,CAAwBK,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9BL,2BAAA,CAA4B,iCAAiCK,KAAA;EAE7D,OAAOR,0BAAA,CAA2BQ,KAAA;EAClC;AACF;;AAEAJ,WAAA,CAAYK,WAAW,GAAG"}
+{"version":3,"sources":["SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjG,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}

package/lib/components/SplitButton/SplitButton.types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=SplitButton.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root'> &\n  Omit<MenuButtonProps, 'root'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"mappings":"AAAA"}
+{"version":3,"sources":["SplitButton.types.ts"],"sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root'> &\n  Omit<MenuButtonProps, 'root'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"names":[],"mappings":"AAAA,WA4B4D"}

package/lib/components/SplitButton/index.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["splitButtonClassNames","useSplitButtonStyles_unstable"],"sources":["../../../src/components/SplitButton/index.ts"],"sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,qBAAqB,EAAEC,6BAA6B,QAAQ"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["splitButtonClassNames","useSplitButtonStyles_unstable"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,SAASA,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

package/lib/components/SplitButton/renderSplitButton.js

@@ -1,13 +1,8 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
- */
-export const renderSplitButton_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.primaryActionButton && /*#__PURE__*/createElement(slots.primaryActionButton, slotProps.primaryActionButton), slots.menuButton && /*#__PURE__*/createElement(slots.menuButton, slotProps.menuButton));
+ */ export const renderSplitButton_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.primaryActionButton && /*#__PURE__*/ createElement(slots.primaryActionButton, slotProps.primaryActionButton), slots.menuButton && /*#__PURE__*/ createElement(slots.menuButton, slotProps.menuButton));
 };
-//# sourceMappingURL=renderSplitButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderSplitButton_unstable","state","slots","slotProps","root","primaryActionButton","menuButton"],"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlotsNext<SplitButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n      {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA+BE,KAAA;EAE5D,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,mBAAmB,iBAAIP,aAfpC,CAeqCI,KAAA,CAAMG,mBAAmB,EAAKF,SAAA,CAAUE,mBAAmB,GACzFH,KAAA,CAAMI,UAAU,iBAAIR,aAhB3B,CAgB4BI,KAAA,CAAMI,UAAU,EAAKH,SAAA,CAAUG,UAAU;AAGrE"}
+{"version":3,"sources":["renderSplitButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlotsNext<SplitButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n      {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderSplitButton_unstable","state","slots","slotProps","root","primaryActionButton","menuButton"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA+BE;IAE5D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,mBAAmB,kBAAI,AAfpC,cAeqCH,MAAMG,mBAAmB,EAAKF,UAAUE,mBAAmB,GACzFH,MAAMI,UAAU,kBAAI,AAhB3B,cAgB4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU;AAGrE,EAAE"}