@fluentui/react-menu 9.18.0 → 9.19.0

package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { type SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\n\nexport const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots> = {\n  root: 'fui-MenuItemSwitch',\n  icon: 'fui-MenuItemSwitch__icon',\n  content: 'fui-MenuItemSwitch__content',\n  secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n  switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n  subText: 'fui-MenuItemSwitch__subText',\n};\n\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSize}px`,\n  height: `${trackHeight}px`,\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidth}px`,\n  marginRight: tokens.spacingHorizontalXS,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  color: tokens.colorNeutralStrokeAccessible,\n  ':hover': {\n    color: tokens.colorNeutralStrokeAccessibleHover,\n    borderColor: tokens.colorNeutralStrokeAccessibleHover,\n  },\n\n  ':hover:active': {\n    color: tokens.colorNeutralStrokeAccessiblePressed,\n    borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n  },\n  [`& .${circleFilledClassName}`]: {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useSwitchIndicatorStyles = makeStyles({\n  checked: {\n    [`& .${circleFilledClassName}`]: {\n      transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n    },\n\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    color: tokens.colorNeutralForegroundInverted,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n\n    ':hover': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n});\n\nconst useMultilineStyles = makeStyles({\n  switch: {\n    alignSelf: 'center',\n  },\n});\n\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */\nexport const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {\n  'use no memo';\n\n  const { checked, subText } = state;\n  const multiline = !!subText;\n  const switchIndicatorStyles = useSwitchIndicatorStyles();\n  const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n  const multilineStyles = useMultilineStyles();\n  state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemSwitchClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n  }\n\n  if (state.switchIndicator) {\n    state.switchIndicator.className = mergeClasses(\n      menuItemSwitchClassNames.switchIndicator,\n      switchIndicatorBaseStyles,\n      checked && switchIndicatorStyles.checked,\n      state.switchIndicator.className,\n      multiline && multilineStyles.switch,\n    );\n  }\n\n  useMenuItemStyles_unstable({\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      checkmark: 'span',\n      submenuIndicator: 'span',\n    },\n    checkmark: undefined,\n    submenuIndicator: undefined,\n    hasSubmenu: false,\n    persistOnClick: true,\n  });\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralStrokeAccessible","lineHeight","boxSizing","fill","flexShrink","fontSize","height","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","marginRight","spacingHorizontalXS","color","colorNeutralStrokeAccessibleHover","borderColor","colorNeutralStrokeAccessiblePressed","useSwitchIndicatorStyles","checked","transform","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","useMultilineStyles","switch","alignSelf","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/MenuList/useMenuListStyles.styles.raw.js

@@ -0,0 +1,22 @@
+import { mergeClasses, makeStyles } from '@griffel/react';
+export const menuListClassNames = {
+    root: 'fui-MenuList'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2px'
+    },
+    hasMenuContext: {
+        height: '100%'
+    }
+});
+/**
+ * Apply styling to the Menu slots based on the state
+ */ export const useMenuListStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
+    return state;
+};

package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuListClassNames.root,\n    styles.root,\n    state.hasMenuContext && styles.hasMenuContext,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYH,WAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGb,aACrBE,mBAAmBC,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAC7CG,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT,EAAE"}

package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js

@@ -0,0 +1,31 @@
+import { mergeClasses, makeStyles } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { createSlideStyles } from '@fluentui/react-positioning';
+export const menuPopoverClassNames = {
+    root: 'fui-MenuPopover'
+};
+const useStyles = makeStyles({
+    root: {
+        borderRadius: tokens.borderRadiusMedium,
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+        boxSizing: 'border-box',
+        minWidth: '138px',
+        maxWidth: '300px',
+        overflowX: 'hidden',
+        width: 'max-content',
+        boxShadow: `${tokens.shadow16}`,
+        padding: '4px',
+        border: `1px solid ${tokens.colorTransparentStroke}`,
+        ...typographyStyles.body1,
+        ...createSlideStyles(10)
+    }
+});
+/**
+ * Apply styling to the Menu slots based on the state
+ */ export const useMenuPopoverStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createSlideStyles } from '@fluentui/react-positioning';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n  root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    minWidth: '138px',\n    maxWidth: '300px',\n    overflowX: 'hidden',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    padding: '4px',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    ...typographyStyles.body1,\n    ...createSlideStyles(10),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","createSlideStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAGjE,SAASC,iBAAiB,QAAQ,8BAA8B;AAEhE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,cAAcN,OAAOO,kBAAkB;QACvCC,iBAAiBR,OAAOS,uBAAuB;QAC/CC,OAAOV,OAAOW,uBAAuB;QACrCC,WAAW;QACXC,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,OAAO;QACPC,WAAW,CAAC,EAAEjB,OAAOkB,QAAQ,CAAC,CAAC;QAC/BC,SAAS;QACTC,QAAQ,CAAC,UAAU,EAAEpB,OAAOqB,sBAAsB,CAAC,CAAC;QACpD,GAAGpB,iBAAiBqB,KAAK;QACzB,GAAGpB,kBAAkB,GAAG;IAC1B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMqB,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,GAAG5B,aAAaK,sBAAsBC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACjG,OAAOF;AACT,EAAE"}

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js

@@ -0,0 +1,42 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';
+export const menuSplitGroupMultilineAttr = 'data-multiline';
+export const menuSplitGroupClassNames = {
+    root: 'fui-MenuSplitGroup'
+};
+/**
+ * Styles for the root slot
+ * TODO - remove the use of nested combinators to style child menu items
+ */ const useStyles = makeStyles({
+    root: {
+        [`[${menuSplitGroupMultilineAttr}]`]: {
+            [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {
+                alignSelf: 'center'
+            }
+        },
+        display: 'flex',
+        [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {
+            flex: 1
+        },
+        [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            paddingLeft: 0,
+            '::before': {
+                content: '""',
+                width: tokens.strokeWidthThin,
+                height: '20px',
+                backgroundColor: tokens.colorNeutralStroke1
+            }
+        }
+    }
+});
+/**
+ * Apply styling to the MenuSplitGroup slots based on the state
+ */ export const useMenuSplitGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n  root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */\nconst useStyles = makeStyles({\n  root: {\n    [`[${menuSplitGroupMultilineAttr}]`]: {\n      [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n        alignSelf: 'center',\n      },\n    },\n    display: 'flex',\n    [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n      flex: 1,\n    },\n    [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      '::before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '20px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","alignSelf","display","flex","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","content","width","strokeWidthThin","height","backgroundColor","colorNeutralStroke1","useMenuSplitGroupStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,kBAAkB,QAAQ,uCAAuC;AAI1E,OAAO,MAAMC,8BAA8B,iBAAiB;AAE5D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AACF;;;CAGC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAED,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDE,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEN,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDI,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEP,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDK,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOb,OAAOc,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBhB,OAAOiB,mBAAmB;YAC7C;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,yBAAyBC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACpG,OAAOF;AACT,EAAE"}

package/lib/selectable/useCheckmarkStyles.styles.raw.js

@@ -0,0 +1,24 @@
+import { mergeClasses, makeStyles } from '@griffel/react';
+const useStyles = makeStyles({
+    root: {
+        width: '16px',
+        height: '16px',
+        visibility: 'hidden',
+        flexShrink: 0
+    },
+    rootChecked: {
+        visibility: 'visible',
+        flexShrink: 0
+    }
+});
+/**
+ * Applies styles to a checkmark slot for selectable menu items
+ *
+ * @param state - should contain a `checkmark` slot
+ */ export const useCheckmarkStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    if (state.checkmark) {
+        state.checkmark.className = mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
+    }
+};

package/lib/selectable/useCheckmarkStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/selectable/useCheckmarkStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemState } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '16px',\n    height: '16px',\n    visibility: 'hidden',\n    flexShrink: 0,\n  },\n  rootChecked: {\n    visibility: 'visible',\n    flexShrink: 0,\n  },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles_unstable = (state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>) => {\n  'use no memo';\n\n  const styles = useStyles();\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(\n      styles.root,\n      state.checked && styles.rootChecked,\n      state.checkmark.className,\n    );\n  }\n};\n"],"names":["mergeClasses","makeStyles","useStyles","root","width","height","visibility","flexShrink","rootChecked","useCheckmarkStyles_unstable","state","styles","checkmark","className","checked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,MAAMC,YAAYD,WAAW;IAC3BE,MAAM;QACJC,OAAO;QACPC,QAAQ;QACRC,YAAY;QACZC,YAAY;IACd;IACAC,aAAa;QACXF,YAAY;QACZC,YAAY;IACd;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,SAAST;IACf,IAAIQ,MAAME,SAAS,EAAE;QACnBF,MAAME,SAAS,CAACC,SAAS,GAAGb,aAC1BW,OAAOR,IAAI,EACXO,MAAMI,OAAO,IAAIH,OAAOH,WAAW,EACnCE,MAAME,SAAS,CAACC,SAAS;IAE7B;AACF,EAAE"}

package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    menuDividerClassNames: function() {
+        return menuDividerClassNames;
+    },
+    useMenuDividerStyles_unstable: function() {
+        return useMenuDividerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const menuDividerClassNames = {
+    root: 'fui-MenuDivider'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        margin: '4px -5px 4px -5px',
+        width: 'auto',
+        borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`
+    }
+});
+const useMenuDividerStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(menuDividerClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuDivider/useMenuDividerStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n  root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    margin: '4px -5px 4px -5px',\n    width: 'auto',\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState) => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["menuDividerClassNames","useMenuDividerStyles_unstable","root","useStyles","makeStyles","margin","width","borderBottom","tokens","strokeWidthThin","colorNeutralStroke2","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,qBAAAA;eAAAA;;IAYAC,6BAAAA;eAAAA;;;uBAjB4B;4BAClB;AAIhB,MAAMD,wBAA0D;IACrEE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,QAAQ;QACRC,OAAO;QACPC,cAAc,CAAC,EAAEC,kBAAAA,CAAOC,eAAe,CAAC,OAAO,EAAED,kBAAAA,CAAOE,mBAAmB,CAAC,CAAC;IAC/E;AACF;AAEO,MAAMT,gCAAgC,CAACU;IAC5C;IAEA,MAAMC,SAAST;IACfQ,MAAMT,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAAA,EAAad,sBAAsBE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAEjG,OAAOF;AACT"}

package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    menuGroupClassNames: function() {
+        return menuGroupClassNames;
+    },
+    useMenuGroupStyles_unstable: function() {
+        return useMenuGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const menuGroupClassNames = {
+    root: 'fui-MenuGroup'
+};
+const useMenuGroupStyles_unstable = (state)=>{
+    'use no memo';
+    state.root.className = (0, _react.mergeClasses)(menuGroupClassNames.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n  root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["menuGroupClassNames","useMenuGroupStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAIAC,2BAAAA;eAAAA;;;uBAPgB;AAGtB,MAAMD,sBAAsD;IACjEE,MAAM;AACR;AAEO,MAAMD,8BAA8B,CAACE;IAC1C;IAEAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaL,oBAAoBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAElF,OAAOD;AACT"}

package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    menuGroupHeaderClassNames: function() {
+        return menuGroupHeaderClassNames;
+    },
+    useMenuGroupHeaderStyles_unstable: function() {
+        return useMenuGroupHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const menuGroupHeaderClassNames = {
+    root: 'fui-MenuGroupHeader'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        paddingLeft: '8px',
+        paddingRight: '8px',
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        height: '32px',
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
+const useMenuGroupHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(menuGroupHeaderClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable","root","useStyles","makeStyles","fontSize","tokens","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,yBAAAA;eAAAA;;IAiBAC,iCAAAA;eAAAA;;;uBAtB4B;4BAClB;AAIhB,MAAMD,4BAAkE;IAC7EE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,UAAUC,kBAAAA,CAAOC,eAAe;QAChCC,OAAOF,kBAAAA,CAAOG,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYN,kBAAAA,CAAOO,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEO,MAAMf,oCAAoC,CAACgB;IAChD;IAEA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAAA,EAAapB,0BAA0BE,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IAErG,OAAOF;AACT"}

package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js

@@ -0,0 +1,259 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    menuItemClassNames: function() {
+        return menuItemClassNames;
+    },
+    useMenuItemStyles_unstable: function() {
+        return useMenuItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacticons = require("@fluentui/react-icons");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const _index = require("../../selectable/index");
+const menuItemClassNames = {
+    root: 'fui-MenuItem',
+    icon: 'fui-MenuItem__icon',
+    checkmark: 'fui-MenuItem__checkmark',
+    submenuIndicator: 'fui-MenuItem__submenuIndicator',
+    content: 'fui-MenuItem__content',
+    secondaryContent: 'fui-MenuItem__secondaryContent',
+    subText: 'fui-MenuItem__subText'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    position: 'relative',
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    paddingRight: _reacttheme.tokens.spacingVerticalSNudge,
+    paddingLeft: _reacttheme.tokens.spacingVerticalSNudge,
+    paddingTop: _reacttheme.tokens.spacingVerticalSNudge,
+    paddingBottom: _reacttheme.tokens.spacingVerticalSNudge,
+    boxSizing: 'border-box',
+    maxWidth: '290px',
+    minHeight: '32px',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'start',
+    fontSize: _reacttheme.tokens.fontSizeBase300,
+    cursor: 'pointer',
+    gap: '4px',
+    ':hover': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
+        color: _reacttheme.tokens.colorNeutralForeground2Hover,
+        [`& .${_reacticons.iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${_reacticons.iconRegularClassName}`]: {
+            display: 'none'
+        },
+        [`& .${menuItemClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+        },
+        [`& .${menuItemClassNames.subText}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3Hover
+        }
+    },
+    ':hover:active': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
+        color: _reacttheme.tokens.colorNeutralForeground2Pressed,
+        [`& .${menuItemClassNames.subText}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3Pressed
+        }
+    },
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        ':hover': {
+            backgroundColor: 'Canvas',
+            borderColor: 'Highlight',
+            color: 'Highlight'
+        },
+        ...(0, _reacttabster.createFocusOutlineStyle)({
+            style: {
+                outlineColor: 'Highlight'
+            }
+        })
+    },
+    userSelect: 'none',
+    ...(0, _reacttabster.createFocusOutlineStyle)()
+});
+const useContentBaseStyles = (0, _react.makeResetStyles)({
+    paddingLeft: '2px',
+    paddingRight: '2px',
+    backgroundColor: 'transparent',
+    flexGrow: 1
+});
+const useSecondaryContentBaseStyles = (0, _react.makeResetStyles)({
+    paddingLeft: '2px',
+    paddingRight: '2px',
+    ..._reacttheme.typographyStyles.caption1,
+    lineHeight: _reacttheme.tokens.lineHeightBase300,
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    ':hover': {
+        color: _reacttheme.tokens.colorNeutralForeground3Hover
+    },
+    ':focus': {
+        color: _reacttheme.tokens.colorNeutralForeground3Hover
+    }
+});
+const useIconBaseStyles = (0, _react.makeResetStyles)({
+    width: '20px',
+    height: '20px',
+    fontSize: '20px',
+    lineHeight: 0,
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    flexShrink: 0
+});
+const useSubmenuIndicatorBaseStyles = (0, _react.makeResetStyles)({
+    width: '20px',
+    height: '20px',
+    fontSize: '20px',
+    lineHeight: 0,
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center'
+});
+const useSubtextBaseStyles = (0, _react.makeResetStyles)({
+    ..._reacttheme.typographyStyles.caption2,
+    color: _reacttheme.tokens.colorNeutralForeground3
+});
+const useStyles = (0, _react.makeStyles)({
+    checkmark: {
+        marginTop: '2px'
+    },
+    splitItemMain: {
+        flexGrow: 1
+    },
+    splitItemTrigger: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        paddingLeft: 0,
+        '::before': {
+            content: '""',
+            width: _reacttheme.tokens.strokeWidthThin,
+            height: '24px',
+            backgroundColor: _reacttheme.tokens.colorNeutralStroke1
+        }
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+            cursor: 'not-allowed',
+            [`& .${_reacticons.iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${_reacticons.iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${menuItemClassNames.icon}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            },
+            [`& .${menuItemClassNames.subText}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+            [`& .${menuItemClassNames.subText}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':focus': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            ':hover': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas',
+                [`& .${menuItemClassNames.icon}`]: {
+                    color: 'GrayText',
+                    backgroundColor: 'Canvas'
+                },
+                [`& .${menuItemClassNames.subText}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas',
+                [`& .${menuItemClassNames.subText}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':focus': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas'
+            }
+        }
+    }
+});
+const useSubTextStyles = (0, _react.makeStyles)({
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    }
+});
+const useMultilineStyles = (0, _react.makeStyles)({
+    content: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    secondaryContent: {
+        alignSelf: 'center'
+    },
+    submenuIndicator: {
+        alignSelf: 'center'
+    }
+});
+const useMenuItemStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootBaseStyles = useRootBaseStyles();
+    const contentBaseStyles = useContentBaseStyles();
+    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
+    const iconBaseStyles = useIconBaseStyles();
+    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
+    const multilineStyles = useMultilineStyles();
+    const subtextBaseStyles = useSubtextBaseStyles();
+    const subTextStyles = useSubTextStyles();
+    const multiline = !!state.subText;
+    state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
+    }
+    if (state.checkmark) {
+        state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
+    }
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
+    }
+    if (state.submenuIndicator) {
+        state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
+    }
+    if (state.subText) {
+        state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
+    }
+    (0, _index.useCheckmarkStyles_unstable)(state);
+    return state;
+};

package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItem/useMenuItemStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n  subText: 'fui-MenuItem__subText',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  borderRadius: tokens.borderRadiusMedium,\n  position: 'relative',\n  color: tokens.colorNeutralForeground2,\n  backgroundColor: tokens.colorNeutralBackground1,\n  paddingRight: tokens.spacingVerticalSNudge, // 6px\n  paddingLeft: tokens.spacingVerticalSNudge,\n  paddingTop: tokens.spacingVerticalSNudge,\n  paddingBottom: tokens.spacingVerticalSNudge,\n  boxSizing: 'border-box',\n  maxWidth: '290px',\n  minHeight: '32px',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'start',\n  fontSize: tokens.fontSizeBase300,\n  cursor: 'pointer',\n  gap: '4px',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n    [`& .${menuItemClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandSelected,\n    },\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n\n  // High contrast styles\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'Canvas',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n    },\n    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n  },\n\n  userSelect: 'none',\n  ...createFocusOutlineStyle(),\n});\n\nconst useContentBaseStyles = makeResetStyles({\n  paddingLeft: '2px',\n  paddingRight: '2px',\n  backgroundColor: 'transparent',\n  flexGrow: 1,\n});\n\nconst useSecondaryContentBaseStyles = makeResetStyles({\n  paddingLeft: '2px',\n  paddingRight: '2px',\n  ...typographyStyles.caption1,\n  lineHeight: tokens.lineHeightBase300,\n  color: tokens.colorNeutralForeground3,\n  ':hover': {\n    color: tokens.colorNeutralForeground3Hover,\n  },\n  ':focus': {\n    color: tokens.colorNeutralForeground3Hover,\n  },\n});\n\nconst useIconBaseStyles = makeResetStyles({\n  width: '20px',\n  height: '20px',\n  fontSize: '20px',\n  lineHeight: 0,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n  width: '20px',\n  height: '20px',\n  fontSize: '20px',\n  lineHeight: 0,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n});\n\nconst useSubtextBaseStyles = makeResetStyles({\n  ...typographyStyles.caption2,\n  color: tokens.colorNeutralForeground3,\n});\n\nconst useStyles = makeStyles({\n  checkmark: {\n    marginTop: '2px',\n  },\n\n  splitItemMain: {\n    flexGrow: 1,\n  },\n\n  splitItemTrigger: {\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n    paddingLeft: 0,\n    '::before': {\n      content: '\"\"',\n      width: tokens.strokeWidthThin,\n      height: '24px',\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n      backgroundColor: tokens.colorNeutralBackground1,\n      cursor: 'not-allowed',\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& .${menuItemClassNames.subText}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundDisabled,\n      backgroundColor: tokens.colorNeutralBackground1,\n\n      [`& .${menuItemClassNames.subText}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      ':hover': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n        [`& .${menuItemClassNames.icon}`]: {\n          color: 'GrayText',\n          backgroundColor: 'Canvas',\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':hover:active': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n        [`& .${menuItemClassNames.subText}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':focus': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useSubTextStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useMultilineStyles = makeStyles({\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  secondaryContent: {\n    alignSelf: 'center',\n  },\n\n  submenuIndicator: {\n    alignSelf: 'center',\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const contentBaseStyles = useContentBaseStyles();\n  const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n  const multilineStyles = useMultilineStyles();\n  const subtextBaseStyles = useSubtextBaseStyles();\n  const subTextStyles = useSubTextStyles();\n  const multiline = !!state.subText;\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    rootBaseStyles,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      menuItemClassNames.content,\n      contentBaseStyles,\n      state.content.className,\n      multiline && multilineStyles.content,\n    );\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      secondaryContentBaseStyles,\n      state.disabled && styles.disabled,\n      state.secondaryContent.className,\n      multiline && multilineStyles.secondaryContent,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      submenuIndicatorBaseStyles,\n      state.submenuIndicator.className,\n      multiline && multilineStyles.submenuIndicator,\n    );\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(\n      menuItemClassNames.subText,\n      state.disabled && subTextStyles.disabled,\n      state.subText.className,\n      subtextBaseStyles,\n    );\n  }\n\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n\n  return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","makeResetStyles","borderRadius","tokens","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","paddingRight","spacingVerticalSNudge","paddingLeft","paddingTop","paddingBottom","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","colorNeutralBackground1Hover","colorNeutralForeground2Hover","iconFilledClassName","iconRegularClassName","colorNeutralForeground2BrandSelected","colorNeutralForeground3Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","colorNeutralForeground3Pressed","borderColor","createFocusOutlineStyle","style","outlineColor","userSelect","useContentBaseStyles","flexGrow","useSecondaryContentBaseStyles","typographyStyles","caption1","lineHeight","lineHeightBase300","colorNeutralForeground3","useIconBaseStyles","width","height","justifyContent","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","caption2","useStyles","makeStyles","marginTop","splitItemMain","splitItemTrigger","borderTopLeftRadius","borderBottomLeftRadius","strokeWidthThin","colorNeutralStroke1","disabled","colorNeutralForegroundDisabled","useSubTextStyles","useMultilineStyles","flexDirection","alignSelf","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}