@fluentui-copilot/react-attachments 0.11.2 → 0.12.1

package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js

@@ -29,16 +29,36 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", nul
 const useOverflowMenuButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rvxcmzt", null, [
     ".rvxcmzt{display:inline-flex;}"
 ]);
+const useOverflowMenuPopoverNextStyles = (0, _reactcomponents.__styles)({
+    borderRadius: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1pwvjsv"
+    }
+}, {
+    d: [
+        [
+            ".f1pwvjsv{border-radius:var(--borderRadius4XL);}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
 const useAttachmentListStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseClassName = useRootBaseClassName();
     const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
+    const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();
+    const { designVersion } = state;
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
     if (state.menuList) {
         state.menuList.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuList, state.menuList.className);
     }
     if (state.menuPopover) {
-        state.menuPopover.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuPopover, state.menuPopover.className);
+        state.menuPopover.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuPopover, designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius, state.menuPopover.className);
     }
     if (state.overflowMenuButton) {
         state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);

package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n  root: 'fai-AttachmentList',\n  menuList: 'fai-AttachmentList__menuList',\n  menuPopover: 'fai-AttachmentList__menuPopover',\n  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'flex',\n  flexDirection: 'row',\n  flexShrink: 0,\n  flexWrap: 'wrap',\n  rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.menuList) {\n    state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n  }\n  if (state.menuPopover) {\n    state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);\n  }\n\n  if (state.overflowMenuButton) {\n    state.overflowMenuButton.className = mergeClasses(\n      attachmentListClassNames.overflowMenuButton,\n      overflowMenuButtonClassName,\n      state.overflowMenuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["attachmentListClassNames","flexWrap","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","state","useOverflowMenuButtonBaseClassName","display","className","mergeClasses","rootBaseClassName","overflowMenuButtonClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAYXC,gCAAU;eAAVA;;;iCAjBoC;AAK/B,MAAMD,2BAAgE;UAC3EE;cACAC;iBACAC;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;AAIzCR,MAAAA,mCAAUS,CAAAA;;IAIZ,MAAMC,oBAAAA;UACJC,8BAASD;IACXD,MAAAR,IAAA,CAAAW,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,yBAAAE,IAAA,EAAAa,mBAAAL,MAAAR,IAAA,CAAAW,SAAA;IAEA,IAAAH,MAAAP,QAAA,EAAA;;IAEC;QAECO,MAAAN,WAAA,EAAA;QAEAM,MAAMK,WAAAA,CAAAA,SAAoBT,GAAAA,IAAAA,6BAAAA,EAAAA,yBAAAA,WAAAA,EAAAA,MAAAA,WAAAA,CAAAA,SAAAA;;QAG1BI,MAAMR,kBAAiBY,EAAAA;QAEvBJ,MAAIA,kBAAgB,CAAAG,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,yBAAAK,kBAAA,EAAAW,6BAAAN,MAAAL,kBAAA,CAAAQ,SAAA;;WAEpBH;6DAE6CV"}
+{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n  root: 'fai-AttachmentList',\n  menuList: 'fai-AttachmentList__menuList',\n  menuPopover: 'fai-AttachmentList__menuPopover',\n  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'flex',\n  flexDirection: 'row',\n  flexShrink: 0,\n  flexWrap: 'wrap',\n  rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n});\n\nconst useOverflowMenuPopoverNextStyles = makeStyles({\n  borderRadius: {\n    borderRadius: tokens.borderRadius4XL,\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n  const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();\n  const { designVersion } = state;\n\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.menuList) {\n    state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n  }\n  if (state.menuPopover) {\n    state.menuPopover.className = mergeClasses(\n      attachmentListClassNames.menuPopover,\n      designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius,\n      state.menuPopover.className,\n    );\n  }\n\n  if (state.overflowMenuButton) {\n    state.overflowMenuButton.className = mergeClasses(\n      attachmentListClassNames.overflowMenuButton,\n      overflowMenuButtonClassName,\n      state.overflowMenuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["attachmentListClassNames","useAttachmentListStyles_unstable","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","display","__styles","flexDirection","flexShrink","flexWrap","rowGap","tokens","B7oj6ja","Dimara","useOverflowMenuButtonBaseClassName","d","useOverflowMenuPopoverNextStyles","borderRadius","rootBaseClassName","overflowMenuButtonClassName","overflowMenuPopoverNextStyles","state","designVersion","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IA6BNC,gCAAMA;eAANA;;;iCAlC2C;AAK3C,MAAMD,2BAAgE;UAC3EE;cACAC;iBACAC;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;MACzCC,mCAASC,IAAAA,yBAAA,EAAA;kBACTC;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAQC;QACVC,SAAA;QAEAC,QAAMC;;AAEN,GAAA;IAEAC,GAAA;QAAMC;YAAAA;YAA8C;gBAClDC,GAAAA,CAAAA;;;;;AAQF,MAAOrB,mCAAMA,CAAAA;;UAIXsB,oBAAMC;UACNA,8BAAMC;UACNA,gCAA0BC;UAE1BA,EAEAC,aAAUxB;UAEVD,IAAA,CAAA0B,SAAA,GAAAC,IAAAA,6BAAA,EAAA7B,yBAAAE,IAAA,EAAAqB,mBAAAG,MAAAxB,IAAA,CAAA0B,SAAA;QACAF,MAAIA,QAAMtB,EAAAA;cACRsB,QAAMtB,CAAAA,SAAYwB,GAAAA,IAAAA,6BAAYC,EAAAA,yBAC5B7B,QAAyBI,EAAAA,MAAAA,QACzBuB,CAAAA,SAAAA;;QAKJD,MAAIA,WAAMrB,EAAAA;cACRqB,WAAMrB,CAAAA,SAAAA,GAAmBuB,IAAAA,6BAAYC,EAAAA,yBACnC7B,WAAyBK,EAAAA,kBACzBmB,UAAAA,8BACMnB,YAAAA,EAAmBuB,MAAAA,WAAS,CAAAA,SAAA;;QAItCF,MAAOA,kBAAAA,EAAAA;QACPA,MAAArB,kBAAA,CAAAuB,SAAA,GAAAC,IAAAA,6BAAA,EAAA7B,yBAAAK,kBAAA,EAAAmB,6BAAAE,MAAArB,kBAAA,CAAAuB,SAAA"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js

@@ -38,21 +38,47 @@ const useNextStyles = (0, _reactcomponents.__styles)({
         Bbmb7ep: 0,
         Btl43ni: 0,
         B7oj6ja: 0,
-        Dimara: "f1kijzfu"
+        Dimara: "f1kijzfu",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f3bhgqh",
+        sj55zd: "fkfq4zb",
+        De3pzq: "f16xq7d1",
+        eoavqd: "f8491dx",
+        Bi91k9c: "fnwyq0v",
+        Jwef8y: "f1h648pw",
+        lj723h: "flvvhsy",
+        ecr2s2: "fwdzr64"
     },
     canvas: {
+        sshi5w: "f1w5jphr",
         Byoj8tv: 0,
         uwmqm3: 0,
         z189sj: 0,
         z8tnut: 0,
-        B0ocmuz: "fg7z1me"
+        B0ocmuz: "f1nm7172"
     },
     sidecar: {
+        sshi5w: "f1nxs5xn",
         Byoj8tv: 0,
         uwmqm3: 0,
         z189sj: 0,
         z8tnut: 0,
-        B0ocmuz: "f1s87h8p"
+        B0ocmuz: "f1nm7172"
     }
 }, {
     d: [
@@ -63,17 +89,36 @@ const useNextStyles = (0, _reactcomponents.__styles)({
             }
         ],
         [
-            ".fg7z1me{padding:calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}",
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
+        ".f1w5jphr{min-height:40px;}",
+        [
+            ".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}",
             {
                 p: -1
             }
         ],
+        ".f1nxs5xn{min-height:32px;}",
         [
-            ".f1s87h8p{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}",
+            ".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}",
             {
                 p: -1
             }
         ]
+    ],
+    h: [
+        ".f8491dx:hover{cursor:pointer;}",
+        ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
+        ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}"
+    ],
+    a: [
+        ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}",
+        ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"
     ]
 });
 const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorSubtleBackground,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useNextStyles = makeStyles({\n  root: { borderRadius: tokens.borderRadiusXLarge },\n  canvas: {\n    padding: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS}`,\n  },\n  sidecar: {\n    padding: `calc(${tokens.spacingVerticalXS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS}`,\n  },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const { designVersion, mode } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    designVersion === 'next' && nextStyles[mode],\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentOverflowMenuButtonClassNames","borderRadius","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","border","strokeWidthThin","boxSizing","columnGap","cursor","display","flexWrap","fontSize","fontWeight","justifyContent","padding","verticalAlign","position","backgroundColor","z189sj","z8tnut","state","designVersion","sidecar","rootBaseClassName","progressBarStyles","useProgressBarStyles","nextStyles","useNextStyles","useAttachmentOverflowMenuButtonStyles_unstable","className","mergeClasses","bar","mode","elementType","renderByDefault","value","undefined","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;IA4CHC,8CAAuC;eAAvCA;;;iCArDgE;4CAErC;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;MAEZC,gBAAkBC,IAAAA,yBAAAA,EAAAA;UAClBR;QACAS,SAAAA;QACAC,SAAAA;QACAC,SAAQ;QACRC,SAAS;QACTC,QAAAA;;YAEAC;QACAC,SAAAA;QACAC,QAAAA;QACAC,QAAAA;QACAC,QAAAA;QACAC,SAAAA;;aAGER;iBACAS;gBACAf;QACFgB,QAAA;QACAC,QAAA;iBACEF;;;OAGF;QAAA;YAAA;YAAkC;oBAChC;;;;;YACmB;oBACnB;;;;;YACW;;;;;;MAOLpB,iDAAuCuB,CAAAA;;UAE7CN,EACFO,aAAA,EACAC,IAAAA;UAEAC,oBAAAvB;IACF,MAAAwB,oBAAAC,IAAAA,gDAAA;IAEA,MAAAC,aAAAC;;IAEC,IACDP,MAAOrB,QAAM6B,EAAAA;QAGXR,MAAArB,QAAA,CAAA8B,SAAA,GAAAC,IAAAA,6BAAA,EAAAlC,uCAAAG,QAAA,EAAAyB,kBAAAzB,QAAA,EAAAqB,MAAArB,QAAA,CAAA8B,SAAA;QAEA,MAAME,MAAEV,qBAAAA,CAAAA,QAAeW,CAAAA,MAASZ,QAAAA,CAAAA,GAAAA,EAAAA;YAEhCa,aAAMV;YACNW,iBAAMV;QACN;QAEAJ,IAAAA,KAAMtB;YAQN,IAAIsB,MAAMrB,QAAU,CAAAoC,KAAA,KAAAC,WAAA;gBAClBhB,IAAAA,SAAMrB,GAAS8B,IAAAA,6BAAYC,EAAAA,kBACzBlC,wBAAAA,EAAAA,IAAAA,SAAuCG;mBAKzC;oBAAgDkC,SAAAA,GAAAA,IAAAA,6BAAa,EAAAT,kBAAAa,kBAAA,EAAAN,IAAAF,SAAA;;kBAA6B9B,QAAA,CAAAgC,GAAA,GAAAA;;;;2EAKvCM"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorSubtleBackground,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useNextStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusXLarge,\n    border: 'none',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n  canvas: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  sidecar: {\n    minHeight: '32px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const { designVersion, mode } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    designVersion === 'next' && nextStyles[mode],\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentOverflowMenuButtonClassNames","nextStyles","useNextStyles","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","border","strokeWidthThin","borderRadius","boxSizing","columnGap","cursor","display","flexWrap","fontFamily","fontSize","fontWeight","justifyContent","padding","verticalAlign","position","ibv6hh","backgroundColor","Bekrc4i","i8vvqc","B4j52fo","irswps","ecr2s2","canvas","sidecar","p","a","state","bar","rootBaseClassName","progressBarStyles","useProgressBarStyles","className","mergeClasses","indeterminateProgressBar","designVersion","mode","slot","optional","value","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;IAiFLC,8CAAaC;eAAbD;;;iCA1FkE;4CAErC;AAO9B,MAAMD,yCAA4F;UACvGG;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;MAEZC,gBAAkBC,IAAAA,yBAAAA,EAAAA;UAClBC;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAQ;QACRC,SAAS;QACTC,QAAAA;QACAC,SAAAA;QACAC,SAAAA;QACAC,QAAAA;QACAC,SAAAA;QACAC,SAAS;QACTC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;gBACEV;gBACAW;gBACAlB;QACFmB,SAAA;QACAC,QAAA;gBACEF;gBACAlB;QACFqB,SAAA;QACAC,QAAA;gBACE;gBACEJ;gBACF;iBACA;gBACEA;gBACF;QACFK,QAAA;IACF;IAEAC,QAAM7B;QACJC,QAAM;iBACJQ;gBACAF;gBACAF;gBACAkB;iBACA;;;gBAGEA;iBACF;gBACA;gBACElB;gBACAkB;iBACF;;;;;;YAGW;oBACXJ;;SACF;QAAA;YAAA;YAAA;gBACAW,GAAAA,CAAAA;;;;QACa;QAAA;QAAA;YAAA;YAAA;oBACXX;;SACF;QAAA;QAAA;YAAA;YAAA;gBACFY,GAAA,CAAA;YAEA;SAAA;KAAA;;;;;;IAECC,GACD;QAAA;QACEC;KAAAA;;AAQA,MAAMlC,iDAAaC,CAAAA;;UAWjBiC,eAMMC;UAAoFC,oBAAAhC;UAC1FiC,oBAASC,IAAAA,gDAAA;uBACHJ;wBACEK,GAAAA,IAAAA,6BAAYC,EAAAA,uCAA+BC,IAAAA,EAAAA,mBAAuCC,kBAAA,UAAA1C,WAAAE,IAAA,EAAAwC,kBAAA,UAAA1C,UAAA,CAAA2C,KAAA,EAAAT,MAAAhC,IAAA,CAAAqC,SAAA;cACxFpC,QAAO,EAAA;sBACLgC,CAAAA,SAAII,GAASC,IAAAA,6BAAGA,EAAAA,uCAAmDL,QAAII,EAAAA,kBAASpC,QAAA,EAAA+B,MAAA/B,QAAA,CAAAoC,SAAA;oBAClFK,qBAAA,CAAAC,QAAA,CAAAX,MAAA/B,QAAA,CAAAgC,GAAA,EAAA;yBACMhC;6BACR;QACF;QAEA,IAAAgC,KAAOD;YACP,IAAAA,MAAA/B,QAAA,CAAA2C,KAAA,KAAAC,WAAA"}

package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuItem, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentProps } from '../Attachment';\n\nexport type AttachmentOverflowMenuItemSlots = {\n  root: NonNullable<Slot<typeof MenuItem>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * AttachmentOverflowMenuItem Props\n */\nexport type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> &\n  Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;\n\n/**\n * State used in rendering AttachmentOverflowMenuItem\n */\nexport type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> &\n  Pick<AttachmentOverflowMenuItemProps, 'imageOnly'> & {\n    isVisible: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAcA;;CAEC"}
+{"version":3,"sources":["AttachmentOverflowMenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuItem, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentProps } from '../Attachment';\nimport type { DesignVersion } from '@fluentui-copilot/react-provider';\n\nexport type AttachmentOverflowMenuItemSlots = {\n  root: NonNullable<Slot<typeof MenuItem>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * AttachmentOverflowMenuItem Props\n */\nexport type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> &\n  DesignVersion &\n  Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;\n\n/**\n * State used in rendering AttachmentOverflowMenuItem\n */\nexport type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> &\n  Pick<AttachmentOverflowMenuItemProps, 'imageOnly' | 'designVersion'> & {\n    isVisible: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC"}

package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js

@@ -13,12 +13,14 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
 const _attachmentListContext = require("../../contexts/attachmentListContext");
+const _reactprovider = require("@fluentui-copilot/react-provider");
 const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
     'use no memo';
     const { imageOnly, media } = props;
     const menuItemId = (0, _reactcomponents.useId)('attachment-', props.id);
     const isVisible = (0, _reactcomponents.useIsOverflowItemVisible)(menuItemId);
     const { onAttachmentDismiss } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
+    const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
     const root = _reactcomponents.slot.always({
         ref,
         icon: media,
@@ -51,6 +53,7 @@ const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
         root,
         progress,
         isVisible,
-        imageOnly
+        imageOnly,
+        designVersion
     };
 }; //# sourceMappingURL=useAttachmentOverflowMenuItem.js.map

package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MenuItem,\n  ProgressBar,\n  mergeCallbacks,\n  slot,\n  useId,\n  useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  'use no memo';\n\n  const { imageOnly, media } = props;\n  const menuItemId = useId('attachment-', props.id);\n  const isVisible = useIsOverflowItemVisible(menuItemId);\n  const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <Dismiss20Regular />, ...props, id: menuItemId },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev => {\n    onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  return {\n    components: {\n      root: MenuItem,\n      progress: ProgressBar,\n    },\n    root,\n    progress,\n    isVisible,\n    imageOnly,\n  };\n};\n"],"names":["useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","onAttachmentDismiss","media","icon","secondaryContent","menuItemId","useAttachmentListContext_unstable","context","elementType","MenuItem","root","onClick","content","progress","optional","ev","shape","children","slot","defaultProps","components","ProgressBar","isVisible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BEA;;;eAAAA;;;;iEA7BqB;iCAQhB;4BAC0B;uCACiB;AAmBhD,MAAAA,yCAAA,CAAAC,OAAAC;;UAIA,EACAC,SAAQC,EAERC,KAAA;UACSC,aAAMD,IAAAA,sBAAAA,EAAAA,eAAAA,MAAAA,EAAAA;UAAOE,YAAAA,IAAAA,yCAAkB,EAAAC;UAAsB,qBAAcA,KAAWC,IAAAA,wDACrF,EAAAC,CAAAA,UAAAA;UAAEC,OAAAA,qBAAAA,CAAAA,MAAaC,CAAAA;QAASV;QAE1BW,MAAKC;0BACHV,WAAAA,GAAAA,OAAAA,aAAAA,CAAAA,4BAAAA,EAAAA;gBAA4BW;;;qBAA+CH,yBAAA;;SAG7EE,OAAME,GAAAA,IAAAA,+BAAgBC,EAAAA,KAAShB,OAAMe,EAAAA,CAAAA;gCACrB,QAAAZ,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAc,IAAA;qBACZC,MAAOC,QAAA;;;;;UAKXJ,WAAAK,qBAAA,CAAAJ,QAAA,CAAAhB,MAAAe,QAAA,EAAA;QAEAM,cAAO;mBACLC;uBACEV;+BACUW,MAAAA,EAAAA;;qBAEZX,4BAAAA;;WAEAY;oBACAtB;YACFU,MAAAD,yBAAA;YACAI,UAAAQ,4BAAA"}
+{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MenuItem,\n  ProgressBar,\n  mergeCallbacks,\n  slot,\n  useId,\n  useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  'use no memo';\n\n  const { imageOnly, media } = props;\n  const menuItemId = useId('attachment-', props.id);\n  const isVisible = useIsOverflowItemVisible(menuItemId);\n  const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n  const designVersion = useDesignVersion(props.designVersion);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <Dismiss20Regular />, ...props, id: menuItemId },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev => {\n    onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  return {\n    components: {\n      root: MenuItem,\n      progress: ProgressBar,\n    },\n    root,\n    progress,\n    isVisible,\n    imageOnly,\n    designVersion,\n  };\n};\n"],"names":["useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","onAttachmentDismiss","media","icon","secondaryContent","menuItemId","designVersion","useDesignVersion","elementType","MenuItem","root","onClick","content","progress","optional","ev","shape","children","slot","defaultProps","components","ProgressBar","isVisible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8BEA;;;eAAAA;;;;iEA9BqB;iCAQhB;4BAC0B;uCACiB;+BAKjB;AAe/B,MAAAA,yCAAA,CAAAC,OAAAC;;UAIA,EACAC,SAAQC,EACRC,KAAA,KAEAJ;UACIC,aAAAA,IAAAA,sBAAAA,EAAAA,eAAAA,MAAAA,EAAAA;UAAKI,YAAMD,IAAAA,yCAAAA,EAAAA;UAAOE,qBAAgD,iEAAMC,EAAAA,CAAAA,UAAAA;UAC1EC,gBAAAC,IAAAA,+BAAA,EAAAT,MAAAQ,aAAA;UAAEE,OAAAA,qBAAAA,CAAAA,MAAaC,CAAAA;QAASV;QAE1BW,MAAKC;0BACHV,WAAAA,GAAAA,OAAAA,aAAAA,CAAAA,4BAAAA,EAAAA;gBAA4BW;;;qBAA+CH,yBAAA;;SAG7EE,OAAME,GAAAA,IAAAA,+BAAgBC,EAAAA,KAAShB,OAAMe,EAAAA,CAAAA;gCACrB,QAAAZ,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAc,IAAA;qBACZC,MAAOC,QAAA;;;;;UAKXJ,WAAAK,qBAAA,CAAAJ,QAAA,CAAAhB,MAAAe,QAAA,EAAA;QAEAM,cAAO;mBACLC;uBACEV;+BACUW,MAAAA,EAAAA;;qBAEZX,4BAAAA;;WAEAY;oBACAtB;kBACAM,yBAAAA;YACFO,UAAAQ,4BAAA;QACA"}

package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js

@@ -22,21 +22,63 @@ const attachmentOverflowMenuItemClassNames = {
     root: 'fai-AttachmentOverflowMenuItem',
     progress: 'fai-AttachmentOverflowMenuItem__progress'
 };
+const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
 const useStyles = (0, _reactcomponents.__styles)({
     imageOnly: {
         Bt984gj: "f122n59"
+    },
+    secondaryContent: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59"
     }
 }, {
     d: [
-        ".f122n59{align-items:center;}"
+        ".f122n59{align-items:center;}",
+        ".f22iagw{display:flex;}"
+    ]
+});
+const useNextStyles = (0, _reactcomponents.__styles)({
+    nextStyles: {
+        Dah5zi: 0,
+        B1tsrr9: 0,
+        qqdqy8: 0,
+        Bkh64rk: 0,
+        e3fwne: "f84qbf7",
+        Bw0xxkn: 0,
+        oeaueh: 0,
+        Bpd4iqm: 0,
+        Befb4lg: "f1bars0k"
+    }
+}, {
+    d: [
+        [
+            ".f84qbf7[data-fui-focus-visible]::after{border-radius:var(--borderRadiusXLarge);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1bars0k{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -1
+            }
+        ]
     ]
 });
 const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
     'use no memo';
-    const { imageOnly } = state;
+    const { imageOnly, designVersion } = state;
     const styles = useStyles();
+    const nextStyles = useNextStyles();
     const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
-    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, designVersion === 'next' && nextStyles.nextStyles, state.root.className);
+    const secondaryContent = _reactcomponents.slot.optional(state.root.secondaryContent, {
+        elementType: 'span'
+    });
+    if (secondaryContent) {
+        secondaryContent.className = (0, _reactcomponents.mergeClasses)(styles.secondaryContent, secondaryContent.className);
+        state.root.secondaryContent = secondaryContent;
+    }
     if (state.progress) {
         state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
         const bar = _reactcomponents.slot.optional(state.progress.bar, {

package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n  progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  'use no memo';\n\n  const { imageOnly } = state;\n  const styles = useStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuItemClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentOverflowMenuItemClassNames","styles","useStyles","root","progress","makeStyles","imageOnly","alignItems","d","state","elementType","renderByDefault","className","mergeClasses","bar","value","undefined","progressBarStyles","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,oCAAAA;eAAAA;;IAoBLC,4CAASC;eAATD;;;iCA5B+B;4CACF;AAO9B,MAAMD,uCAAwF;UACnGG;cACAC;AACF;AAEA,MAAMF,YAAYG,IAAAA,yBAAAA,EAAAA;eAChBC;iBACEC;;AAEJ,GAAA;IAEAC,GAAA;QAAA;KAAA;;AASE,MAAMP,+CAASC,CAAAA;;UASXO,WACFA;mBAMgDC;8BAAoBC,IAAAA,gDAAiB;UAAKR,IAAA,CAAAS,SAAA,GAAAC,IAAAA,6BAAA,EAAAb,qCAAAG,IAAA,EAAAG,aAAAL,OAAAK,SAAA,EAAAG,MAAAN,IAAA,CAAAS,SAAA;cACtFE,QAAK,EAAA;sBACHL,CAAAA,SAAML,GAASW,IAAAA,6BAAUC,EAAAA,qCAAWZ,QAAA,EAAAa,kBAAAb,QAAA,EAAAK,MAAAL,QAAA,CAAAQ,SAAA;oBACtCE,qBAAIF,CAAAA,QAAS,CAAAH,MAAGI,QAAAA,CAAaI,GAAAA,EAAAA;yBACxB;6BACDL;;iBAENH;gBACFA,MAAAL,QAAA,CAAAW,KAAA,KAAAC,WAAA;gBACFF,IAAAF,SAAA,GAAAC,IAAAA,6BAAA,EAAAI,kBAAAC,wBAAA,EAAAJ,IAAAF,SAAA;YAEA,OAAOH;gBACPK,IAAAF,SAAA,GAAAC,IAAAA,6BAAA,EAAAI,kBAAAE,kBAAA,EAAAL,IAAAF,SAAA"}
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot, tokens } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n  progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n  secondaryContent: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nconst useNextStyles = makeStyles({\n  nextStyles: {\n    [`[${FOCUS_VISIBLE_ATTR}]::after`]: {\n      borderRadius: tokens.borderRadiusXLarge,\n    },\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  'use no memo';\n\n  const { imageOnly, designVersion } = state;\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    designVersion === 'next' && nextStyles.nextStyles,\n    state.root.className,\n  );\n\n  const secondaryContent = slot.optional(state.root.secondaryContent, {\n    elementType: 'span',\n  });\n  if (secondaryContent) {\n    secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);\n    state.root.secondaryContent = secondaryContent;\n  }\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuItemClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentOverflowMenuItemClassNames","state","root","progress","FOCUS_VISIBLE_ATTR","useStyles","makeStyles","imageOnly","alignItems","secondaryContent","display","d","useNextStyles","borderRadius","outline","qqdqy8","Bkh64rk","e3fwne","oeaueh","Bpd4iqm","Befb4lg","useProgressBarStyles","elementType","renderByDefault","className","mergeClasses","regularProgressBar","designVersion","nextStyles","slot","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,oCAAAA;eAAAA;;IAsDPC,4CAAgB;eAAhBA;;;iCA9DyC;4CACV;AAO9B,MAAMD,uCAAwF;UACnGE;cACAC;AACF;AAEA,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYC,IAAAA,yBAAAA,EAAAA;eAChBC;iBACEC;;sBAEFC;gBACEC;iBACAF;;AAEJ,GAAA;IAEAG,GAAA;QAAMC;QAA2B;KAAA;;sBAExBR,IAAAA,yBAAAA,EAAAA;gBACHS;gBACF;iBACAC;QACFC,QAAA;QACFC,SAAA;QAEAC,QAAA;;QAGAC,QAAO;QAGLC,SAAA;QAEAC,SAAQb;;;OAGR;QAAA;YAAA;YAA0Bc;gBAE1BpB,GAAAA,CAAAA;;SAOA;QAAA;YAAA;YAAoE;oBAClEqB;;SACF;KAAA;;AAMA,MAAIrB,+CAAgBA,CAAAA;;qBAOkDsB,eAAsB;mBAEpFtB;uBACEuB;8BACCH,IAAAA,gDAAA;wBACDG,GAAAA,IAAAA,6BAAYC,EAAAA,qCAA+BC,IAAAA,EAAkBnB,aAAMiB,OAASjB,SAAA,EAAAoB,kBAAA,UAAAC,WAAAA,UAAA,EAAA3B,MAAAC,IAAA,CAAAsB,SAAA;6BAClFK,qBAAA,CAAAC,QAAA,CAAA7B,MAAAC,IAAA,CAAAO,gBAAA,EAAA;qBACAR;;QAEJQ,kBAAA;QAEAA,iBAAOR,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,OAAAA,gBAAAA,EAAAA,iBAAAA,SAAAA;QACPA,MAAAC,IAAA,CAAAO,gBAAA,GAAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.11.2",
+  "version": "0.12.1",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,9 +12,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "^0.10.2",
-    "@fluentui-copilot/react-utilities": "^0.0.5",
-    "@fluentui-copilot/tokens": "^0.3.7",
+    "@fluentui-copilot/react-provider": "^0.11.1",
+    "@fluentui-copilot/react-utilities": "^0.0.6",
+    "@fluentui-copilot/tokens": "^0.3.9",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {