npm - @fluentui-copilot/react-attachments - Versions diffs - 0.13.3 → 0.13.5 - Mend

@fluentui-copilot/react-attachments 0.13.3 → 0.13.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,22 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Thu, 17 Jul 2025 17:47:35 GMT",
+      "date": "Thu, 07 Aug 2025 18:08:38 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.13.4",
+      "version": "0.13.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "86afc24aa37e67484ec6680e5e9b84703addf179",
+            "comment": "fix: Fix Attachment focus outline border cut off"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Jul 2025 17:49:26 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.13.3",
       "version": "0.13.3",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,21 @@
 # Change Log - @fluentui-copilot/react-attachments
-This log was last generated on Thu, 17 Jul 2025 17:47:35 GMT and should not be manually modified.
+This log was last generated on Thu, 07 Aug 2025 18:08:38 GMT and should not be manually modified.
 <!-- Start content -->
+## [0.13.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.13.4)
+Thu, 07 Aug 2025 18:08:38 GMT
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.13.3..@fluentui-copilot/react-attachments_v0.13.4)
+### Patches
+- fix: Fix Attachment focus outline border cut off ([PR #3236](https://github.com/microsoft/fluentai/pull/3236) by jiangemma@microsoft.com)
 ## [0.13.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.13.3)
-Thu, 17 Jul 2025 17:47:35 GMT
+Thu, 17 Jul 2025 17:49:26 GMT
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.13.2..@fluentui-copilot/react-attachments_v0.13.3)
 ### Patches

package/lib/components/Attachment/useAttachmentStyles.styles.js CHANGED Viewed

@@ -28,11 +28,12 @@ const buttonBaseStyles = {
   justifyContent: 'center',
   ...createCustomFocusIndicatorStyle({
     outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+    outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,
     zIndex: 1
   }),
   verticalAlign: 'middle'
 };
-const usePrimaryActionBaseClassName = __resetStyles("rjo71rc", "rsix9pn", [".rjo71rc{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-right-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".rjo71rc[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".rsix9pn{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-left-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".rsix9pn[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"]);
+const usePrimaryActionBaseClassName = __resetStyles("r1cypics", "r1zmptn", [".r1cypics{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-right-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".r1cypics[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);z-index:1;}", ".r1zmptn{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-left-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".r1zmptn[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);z-index:1;}"]);
 const usePrimaryActionStyles = __styles({
   button: {
     eoavqd: "f8491dx",
@@ -52,9 +53,9 @@ const usePrimaryActionStyles = __styles({
     m: "(forced-colors: active)"
   }]]
 });
-const useDismissButtonBaseClassName = __resetStyles("r1v8xxbh", "ruebrp4", {
-  r: [".r1v8xxbh{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-top-right-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);}", ".r1v8xxbh[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r1v8xxbh:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}", ".r1v8xxbh:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}", ".ruebrp4{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-top-left-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);}", ".ruebrp4[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".ruebrp4:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}", ".ruebrp4:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}"],
-  s: ["@media (forced-colors: active){.r1v8xxbh:hover{background-color:HighlightText;}.r1v8xxbh:active{background-color:HighlightText;}}", "@media (forced-colors: active){.ruebrp4:hover{background-color:HighlightText;}.ruebrp4:active{background-color:HighlightText;}}"]
+const useDismissButtonBaseClassName = __resetStyles("r10lynrk", "r2f20ug", {
+  r: [".r10lynrk{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-top-right-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);}", ".r10lynrk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);z-index:1;}", ".r10lynrk:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}", ".r10lynrk:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}", ".r2f20ug{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-top-left-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);}", ".r2f20ug[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);z-index:1;}", ".r2f20ug:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}", ".r2f20ug:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}"],
+  s: ["@media (forced-colors: active){.r10lynrk:hover{background-color:HighlightText;}.r10lynrk:active{background-color:HighlightText;}}", "@media (forced-colors: active){.r2f20ug:hover{background-color:HighlightText;}.r2f20ug:active{background-color:HighlightText;}}"]
 });
 const useDismissButtonCurrentStyles = __styles({
   root: {
@@ -244,24 +245,18 @@ const usePrimaryDismissNextStyles = __styles({
     icvyot: 0,
     B4j52fo: 0,
     irswps: "f3bhgqh",
-    De3pzq: "f16xq7d1",
+    De3pzq: "f16xq7d1"
+  },
+  sharedInteractiveStyles: {
     Jwef8y: "f1h648pw",
-    ecr2s2: "fwdzr64",
-    Bpw7sjs: 0,
-    zppij7: 0,
-    ajd3u1: 0,
-    iqhfy: 0,
-    B7b6voy: "f1c9fnza"
+    ecr2s2: "fwdzr64"
   }
 }, {
   d: [[".f3bhgqh{border:none;}", {
     p: -2
   }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
   h: [".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}"],
-  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"],
-  i: [[".f1c9fnza:focus-visible{border-radius:var(--borderRadiusLarge);}", {
-    p: -1
-  }]]
+  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"]
 });
 const useRootNextStyles = __styles({
   root: {
@@ -282,6 +277,18 @@ const useRootNextStyles = __styles({
     p: -1
   }]]
 });
+const useFocusStyles = __styles({
+  primaryActionButton: {
+    B6xbmo0: ["f146y5a9", "f1k2ftg"],
+    kdpuga: ["f1ndz5i7", "f1co4qro"]
+  },
+  dismissButton: {
+    dm238s: ["f1k2ftg", "f146y5a9"],
+    Bw81rd7: ["f1co4qro", "f1ndz5i7"]
+  }
+}, {
+  d: [".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}"]
+});
 /**
  * Apply styling to the Attachment slots based on the state
  */
@@ -304,6 +311,7 @@ export const useAttachmentStyles_unstable = state => {
   const dismissButtonNextStyles = useDismissButtonNextStyles();
   const primaryDismissNextStyles = usePrimaryDismissNextStyles();
   const rootNextStyles = useRootNextStyles();
+  const focusStyles = useFocusStyles();
   const {
     imageOnly,
     primaryAction,
@@ -313,8 +321,8 @@ export const useAttachmentStyles_unstable = state => {
     dismissOnly
   } = state;
   state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
-  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
-  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, designVersion === 'current' && dismissButtonCurrentStyles.root, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly, designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary, state.dismissButton.className);
+  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryAction.as !== 'span' && !state.isLoading && primaryDismissNextStyles.sharedInteractiveStyles, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], focusStyles.primaryActionButton, state.primaryAction.className);
+  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, designVersion === 'current' && dismissButtonCurrentStyles.root, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryDismissNextStyles.sharedInteractiveStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly, designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary, focusStyles.dismissButton, state.dismissButton.className);
   if (state.media) {
     state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
   }

package/lib/components/Attachment/useAttachmentStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\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 color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\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});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useDismissButtonCurrentStyles = makeStyles({\n root: {\n ':hover': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useDismissIconNextStyles = makeStyles({\n dismissOnly: {\n ':hover': {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n root: {\n borderTopLeftRadius: tokens.borderRadiusXLarge,\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n },\n\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '32px',\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n ':hover': {\n color: tokens.colorNeutralForeground2,\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n\n borderLeftColor: tokens.colorNeutralStroke1,\n borderLeftWidth: tokens.strokeWidthThin,\n borderLeftStyle: 'solid',\n },\n withPrimary: {\n ':hover': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n },\n ':active': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n width: '40px',\n },\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n minHeight: '32px',\n width: '32px',\n },\n dismissOnly: {\n borderRadius: tokens.borderRadiusXLarge,\n width: 'unset',\n borderLeftColor: tokens.colorTransparentStroke,\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n sharedStyles: {\n border: 'none',\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n ':focus-visible': {\n borderRadius: tokens.borderRadiusLarge,\n },\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n },\n});\n\n/*\n Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const dismissIconNextStyles = useDismissIconNextStyles();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const primaryActionNextStyles = usePrimaryActionNextStyles();\n const dismissButtonNextStyles = useDismissButtonNextStyles();\n const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n const rootNextStyles = useRootNextStyles();\n const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;\n\n state.root.className = mergeClasses(\n attachmentClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n designVersion === 'current' && dismissButtonCurrentStyles.root,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\n designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\n designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useDismissButtonCurrentStyles","colorBrandForegroundLinkHover","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useDismissIconNextStyles","dismissOnly","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","withPrimary","spacingHorizontalMNudge","colorNeutralBackground3","usePrimaryDismissNextStyles","sharedStyles","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","borderRadiusLarge","useRootNextStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","dismissIconNextStyles","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\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 color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\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});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useDismissButtonCurrentStyles = makeStyles({\n root: {\n ':hover': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useDismissIconNextStyles = makeStyles({\n dismissOnly: {\n ':hover': {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n root: {\n borderTopLeftRadius: tokens.borderRadiusXLarge,\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n },\n\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '32px',\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n ':hover': {\n color: tokens.colorNeutralForeground2,\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n\n borderLeftColor: tokens.colorNeutralStroke1,\n borderLeftWidth: tokens.strokeWidthThin,\n borderLeftStyle: 'solid',\n },\n withPrimary: {\n ':hover': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n },\n ':active': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n width: '40px',\n },\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n minHeight: '32px',\n width: '32px',\n },\n dismissOnly: {\n borderRadius: tokens.borderRadiusXLarge,\n width: 'unset',\n borderLeftColor: tokens.colorTransparentStroke,\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n sharedStyles: {\n border: 'none',\n backgroundColor: tokens.colorNeutralBackground3,\n },\n sharedInteractiveStyles: {\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n },\n});\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n }),\n\n dismissButton: createCustomFocusIndicatorStyle({\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n }),\n});\n\n/*\n Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const dismissIconNextStyles = useDismissIconNextStyles();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const primaryActionNextStyles = usePrimaryActionNextStyles();\n const dismissButtonNextStyles = useDismissButtonNextStyles();\n const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n const rootNextStyles = useRootNextStyles();\n const focusStyles = useFocusStyles();\n const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;\n\n state.root.className = mergeClasses(\n attachmentClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' &&\n primaryAction.as !== 'span' &&\n !state.isLoading &&\n primaryDismissNextStyles.sharedInteractiveStyles,\n designVersion === 'next' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n focusStyles.primaryActionButton,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n designVersion === 'current' && dismissButtonCurrentStyles.root,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && primaryDismissNextStyles.sharedInteractiveStyles,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\n designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\n designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary,\n focusStyles.dismissButton,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useDismissButtonCurrentStyles","colorBrandForegroundLinkHover","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useDismissIconNextStyles","dismissOnly","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","withPrimary","spacingHorizontalMNudge","colorNeutralBackground3","usePrimaryDismissNextStyles","sharedStyles","sharedInteractiveStyles","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","useRootNextStyles","useFocusStyles","primaryActionButton","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","dismissIconNextStyles","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","focusStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/Attachment/useAttachmentStyles.styles.raw.js CHANGED Viewed

@@ -36,6 +36,7 @@ const buttonBaseStyles = {
     justifyContent: 'center',
     ...createCustomFocusIndicatorStyle({
         outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+        outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,
         zIndex: 1
     }),
     verticalAlign: 'middle'
@@ -251,15 +252,14 @@ const useDismissButtonNextStyles = makeStyles({
 const usePrimaryDismissNextStyles = makeStyles({
     sharedStyles: {
         border: 'none',
-        backgroundColor: tokens.colorNeutralBackground3,
+        backgroundColor: tokens.colorNeutralBackground3
+    },
+    sharedInteractiveStyles: {
         ':hover': {
             backgroundColor: tokens.colorNeutralBackground3Hover
         },
         ':active': {
             backgroundColor: tokens.colorNeutralBackground3Pressed
-        },
-        ':focus-visible': {
-            borderRadius: tokens.borderRadiusLarge
         }
     }
 });
@@ -269,6 +269,16 @@ const useRootNextStyles = makeStyles({
         borderRadius: tokens.borderRadiusXLarge
     }
 });
+const useFocusStyles = makeStyles({
+    primaryActionButton: createCustomFocusIndicatorStyle({
+        borderTopRightRadius: tokens.borderRadiusNone,
+        borderBottomRightRadius: tokens.borderRadiusNone
+    }),
+    dismissButton: createCustomFocusIndicatorStyle({
+        borderTopLeftRadius: tokens.borderRadiusNone,
+        borderBottomLeftRadius: tokens.borderRadiusNone
+    })
+});
 /**
  * Apply styling to the Attachment slots based on the state
  */ export const useAttachmentStyles_unstable = (state)=>{
@@ -289,10 +299,11 @@ const useRootNextStyles = makeStyles({
     const dismissButtonNextStyles = useDismissButtonNextStyles();
     const primaryDismissNextStyles = usePrimaryDismissNextStyles();
     const rootNextStyles = useRootNextStyles();
+    const focusStyles = useFocusStyles();
     const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;
     state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
-    state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
-    state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, designVersion === 'current' && dismissButtonCurrentStyles.root, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly, designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary, state.dismissButton.className);
+    state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryAction.as !== 'span' && !state.isLoading && primaryDismissNextStyles.sharedInteractiveStyles, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], focusStyles.primaryActionButton, state.primaryAction.className);
+    state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, designVersion === 'current' && dismissButtonCurrentStyles.root, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryDismissNextStyles.sharedInteractiveStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly, designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary, focusStyles.dismissButton, state.dismissButton.className);
     if (state.media) {
         state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
     }

package/lib/components/Attachment/useAttachmentStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\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 color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\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});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useDismissButtonCurrentStyles = makeStyles({\n root: {\n ':hover': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useDismissIconNextStyles = makeStyles({\n dismissOnly: {\n ':hover': {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n root: {\n borderTopLeftRadius: tokens.borderRadiusXLarge,\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n },\n\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '32px',\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n ':hover': {\n color: tokens.colorNeutralForeground2,\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n\n borderLeftColor: tokens.colorNeutralStroke1,\n borderLeftWidth: tokens.strokeWidthThin,\n borderLeftStyle: 'solid',\n },\n withPrimary: {\n ':hover': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n },\n ':active': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n width: '40px',\n },\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n minHeight: '32px',\n width: '32px',\n },\n dismissOnly: {\n borderRadius: tokens.borderRadiusXLarge,\n width: 'unset',\n borderLeftColor: tokens.colorTransparentStroke,\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n sharedStyles: {\n border: 'none',\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n ':focus-visible': {\n borderRadius: tokens.borderRadiusLarge,\n },\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n },\n});\n\n/*\n Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const dismissIconNextStyles = useDismissIconNextStyles();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const primaryActionNextStyles = usePrimaryActionNextStyles();\n const dismissButtonNextStyles = useDismissButtonNextStyles();\n const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n const rootNextStyles = useRootNextStyles();\n const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;\n\n state.root.className = mergeClasses(\n attachmentClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n designVersion === 'current' && dismissButtonCurrentStyles.root,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\n designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\n designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useDismissButtonCurrentStyles","colorBrandForegroundLinkHover","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useDismissIconNextStyles","dismissOnly","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","withPrimary","spacingHorizontalMNudge","colorNeutralBackground3","usePrimaryDismissNextStyles","sharedStyles","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","borderRadiusLarge","useRootNextStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","dismissIconNextStyles","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,+BAA+B,EAC/BC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,IAAI,EACJC,gBAAgB,QACX,6BAA6B;AACpC,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,oBAAoB,QAAQ,uCAAuC;AAI5E,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,eAAe;IACfC,eAAe;IACfC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,UAAU;AACZ,EAAE;AAEF,MAAMC,sBAAsB;AAC5B,MAAMC,wBAAwB;AAC9B,MAAMC,kBAAkB;AAExB,MAAMC,uBAAuBlB,gBAAgB;IAC3CmB,SAAS;IACTC,UAAU;IACVC,eAAe;IACfC,WAAW;IACXC,OAAO;IACPC,WAAW;IACXC,UAAU;AACZ;AAEA,MAAMC,mBAAsC;IAC1CC,YAAY;IACZC,iBAAiBvB,OAAOwB,qBAAqB;IAC7CC,QAAQ,CAAC,EAAEzB,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO2B,mBAAmB,CAAC,CAAC;IACvEC,cAAc5B,OAAO6B,kBAAkB;IACvCZ,WAAW;IACXa,WAAW9B,OAAO+B,uBAAuB;IACzCC,OAAOhC,OAAOiC,uBAAuB;IACrCC,QAAQ;IACRpB,SAAS;IACTC,UAAU;IACVoB,gBAAgB;IAChB,GAAGzC,gCAAgC;QACjC0C,SAAS,CAAC,EAAEpC,OAAOqC,gBAAgB,CAAC,OAAO,EAAErC,OAAOsC,iBAAiB,CAAC,CAAC;QACvEC,QAAQ;IACV,EAAE;IACFvB,eAAe;AACjB;AAEA,MAAMwB,gCAAgC7C,gBAAgB;IACpD,GAAG0B,gBAAgB;IACnBoB,sBAAsBzC,OAAO0C,gBAAgB;IAC7CC,yBAAyB3C,OAAO0C,gBAAgB;IAChDE,kBAAkB;IAClBC,UAAU,CAAC,KAAK,EAAEnC,oBAAoB,GAAG,EAAEE,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,GAAG,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC,CAAC;IAC9JC,SAAS,CAAC,EAAEhD,OAAOiD,iBAAiB,CAAC,CAAC,EAAEjD,OAAOkD,kBAAkB,CAAC,CAAC,EAAElD,OAAOiD,iBAAiB,CAAC,CAAC,EAAEjD,OAAOkD,kBAAkB,CAAC,CAAC;AAC9H;AAEA,MAAMC,yBAAyBvD,WAAW;IACxCwD,QAAQ;QACN,UAAU;YACRlB,QAAQ;YACRX,iBAAiBvB,OAAOqD,0BAA0B;YAClDrB,OAAOhC,OAAOsD,4BAA4B;QAC5C;QACA,WAAW;YACT/B,iBAAiBvB,OAAOuD,4BAA4B;YACpDvB,OAAOhC,OAAOwD,8BAA8B;QAC9C;QACA,kCAAkC;YAChC,UAAU;gBACRjC,iBAAiB;YACnB;YACA,WAAW;gBACTA,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,MAAMkC,gCAAgC9D,gBAAgB;IACpD,GAAG0B,gBAAgB;IAEnB2B,SAAS,CAAC,EAAEhD,OAAOiD,iBAAiB,CAAC,CAAC,EAAEjD,OAAO+C,mBAAmB,CAAC,CAAC,EAAE/C,OAAOiD,iBAAiB,CAAC,CAAC,EAAEjD,OAAO+C,mBAAmB,CAAC,CAAC;IAC9HF,UAAU,CAAC,KAAK,EAAEjC,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,IAAI,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC;IACrIW,UAAU,CAAC,KAAK,EAAE9C,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,IAAI,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC;IAErI,WAAW;IACXY,iBAAiB3D,OAAO2B,mBAAmB;IAC3CiC,qBAAqB5D,OAAO0C,gBAAgB;IAC5CmB,wBAAwB7D,OAAO0C,gBAAgB;IAE/CD,sBAAsBzC,OAAO6B,kBAAkB;IAC/Cc,yBAAyB3C,OAAO6B,kBAAkB;IAElD,UAAU;QACRK,QAAQ;QACRX,iBAAiBvB,OAAOqD,0BAA0B;QAClDrB,OAAOhC,OAAO8D,iCAAiC;IACjD;IACA,WAAW;QACTvC,iBAAiBvB,OAAOuD,4BAA4B;QACpDvB,OAAOhC,OAAO+D,mCAAmC;IACnD;IACA,kCAAkC;QAChC,UAAU;YACRxC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA,MAAMyC,gCAAgCpE,WAAW;IAC/CO,MAAM;QACJ,UAAU;YACR,CAAC,CAAC,GAAG,EAAED,qBAAqBM,WAAW,CAAC,CAAC,CAAC,EAAE;gBAC1CwB,OAAOhC,OAAOiE,6BAA6B;YAC7C;QACF;IACF;AACF;AAEA,MAAMC,wBAAwBvE,gBAAgB;IAC5C2B,YAAY;IACZR,SAAS;IACTqD,UAAUvD;IACVwD,QAAQxD;IACRyD,YAAYzD;IACZM,OAAON;AACT;AAEA,MAAM0D,0BAA0B3E,gBAAgB;IAC9C4E,WAAW;IACXC,cAAc;IACdC,YAAY;IACZ,GAAG1E,iBAAiB2E,KAAK;AAC3B;AAEA,MAAMC,8BAA8BhF,gBAAgB;IAClD2B,YAAY;IACZM,cAAc5B,OAAO4E,oBAAoB;IACzCnD,QAAQ,CAAC,EAAEzB,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO6E,sBAAsB,CAAC,CAAC;IAC1E5D,WAAW;IACXe,OAAOhC,OAAOiC,uBAAuB;IACrCnB,SAAS;IACTqD,UAAUvD;IACVwD,QAAQ,CAAC,KAAK,EAAExD,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8E,kBAAkB,CAAC,CAAC,CAAC;IACjG3C,gBAAgB;IAChBU,UAAU,CAAC,KAAK,EAAEjC,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,CAAC,CAAC;IACrGY,UAAU,CAAC,KAAK,EAAE9C,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,CAAC,CAAC;IACrGE,SAAS,CAAC,KAAK,EAAEhD,OAAO8E,kBAAkB,CAAC,WAAW,EAAE9E,OAAO8C,oBAAoB,CAAC,KAAK,CAAC;AAC5F;AAEA,MAAMiC,2BAA2BnF,WAAW;IAC1CoF,aAAa;QACX,UAAU;YACRhD,OAAOhC,OAAO8D,iCAAiC;QACjD;QACA,WAAW;YACT9B,OAAOhC,OAAO+D,mCAAmC;QACnD;IACF;AACF;AAEA,MAAMkB,qBAAqBrF,WAAW;IACpCQ,eAAe;QACb4C,SAAS;IACX;IACAzC,SAAS;QACP8D,YAAY;IACd;AACF;AAEA,OAAO,MAAMa,oBAAoBtF,WAAW;IAC1CuF,UAAU;QACRtC,UAAU;QACV3B,OAAO;IACT;AACF,GAAG;AAEH,MAAMkE,iBAAiBxF,WAAW;IAChCQ,eAAe;QACbyC,UAAU,CAAC,KAAK,EAAEnC,oBAAoB,GAAG,EAAEC,sBAAsB,GAAG,EAAEX,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,GAAG,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC,CAAC;QACpKC,SAAS,CAAC,EAAEhD,OAAO8E,kBAAkB,CAAC,CAAC,EAAE9E,OAAO+B,uBAAuB,CAAC,CAAC,EAAE/B,OAAO8E,kBAAkB,CAAC,CAAC,EAAE9E,OAAO+B,uBAAuB,CAAC,CAAC;IAC1I;IACAzB,OAAO;QACL6D,UAAUxD;QACVyD,QAAQzD;QACR0D,YAAY1D;QACZO,OAAOP;IACT;IACAJ,SAAS;QACP,GAAGR,iBAAiBsF,QAAQ;IAC9B;IACAhF,eAAe;QACb2C,SAAS,CAAC,EAAEhD,OAAO8E,kBAAkB,CAAC,CAAC,EAAE9E,OAAO8C,oBAAoB,CAAC,CAAC;QACtED,UAAU,CAAC,KAAK,EAAElC,sBAAsB,GAAG,EAAEX,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,IAAI,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC;QAC3IW,UAAU,CAAC,KAAK,EAAE/C,sBAAsB,GAAG,EAAEX,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,IAAI,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC;IAC7I;IACAvC,aAAa;QACX2D,UAAUxD;QACVyD,QAAQ,CAAC,KAAK,EAAEzD,sBAAsB,GAAG,EAAEX,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8E,kBAAkB,CAAC,CAAC,CAAC;QACvGjC,UAAU,CAAC,KAAK,EAAElC,sBAAsB,GAAG,EAAEX,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,CAAC,CAAC;QAC3GY,UAAU,CAAC,KAAK,EAAE/C,sBAAsB,GAAG,EAAEX,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,CAAC,CAAC;IAC7G;AACF;AAEA,MAAMwC,6BAA6B1F,WAAW;IAC5CO,MAAM;QACJyD,qBAAqB5D,OAAOuF,kBAAkB;QAC9C1B,wBAAwB7D,OAAOuF,kBAAkB;IACnD;IACAC,QAAQ;QACNxC,SAAS,CAAC,EAAEhD,OAAOyF,mBAAmB,CAAC,CAAC,EAAEzF,OAAOkD,kBAAkB,CAAC,CAAC;QACrEwC,WAAW;IACb;IAEAC,SAAS;QACP3C,SAAS,CAAC,EAAEhD,OAAOyF,mBAAmB,CAAC,CAAC,EAAEzF,OAAOkD,kBAAkB,CAAC,CAAC;QACrEwC,WAAW;IACb;AACF;AAEA,MAAME,6BAA6BhG,WAAW;IAC5CO,MAAM;QACJsC,sBAAsBzC,OAAOuF,kBAAkB;QAC/C5C,yBAAyB3C,OAAOuF,kBAAkB;QAClD,UAAU;YACRvD,OAAOhC,OAAO6F,uBAAuB;QACvC;QACA,WAAW;YACT7D,OAAOhC,OAAOwD,8BAA8B;QAC9C;QAEAG,iBAAiB3D,OAAO2B,mBAAmB;QAC3CmE,iBAAiB9F,OAAO0B,eAAe;QACvCqE,iBAAiB;IACnB;IACAC,aAAa;QACX,UAAU;YACR,CAAC,CAAC,GAAG,EAAE9F,qBAAqBM,WAAW,CAAC,CAAC,CAAC,EAAE;gBAC1CwB,OAAOhC,OAAO6F,uBAAuB;YACvC;QACF;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAE3F,qBAAqBM,WAAW,CAAC,CAAC,CAAC,EAAE;gBAC1CwB,OAAOhC,OAAOwD,8BAA8B;YAC9C;QACF;IACF;IACAgC,QAAQ;QACNxC,SAAS,CAAC,EAAEhD,OAAOyF,mBAAmB,CAAC,CAAC,EAAEzF,OAAOkD,kBAAkB,CAAC,CAAC;QACrEwC,WAAW;QACXxE,OAAO;IACT;IACAyE,SAAS;QACP3C,SAAS,CAAC,EAAEhD,OAAOyF,mBAAmB,CAAC,CAAC,EAAEzF,OAAOiG,uBAAuB,CAAC,CAAC;QAC1EP,WAAW;QACXxE,OAAO;IACT;IACA8D,aAAa;QACXpD,cAAc5B,OAAOuF,kBAAkB;QACvCrE,OAAO;QACPyC,iBAAiB3D,OAAO6E,sBAAsB;QAC9CtD,iBAAiBvB,OAAOkG,uBAAuB;QAC/C,UAAU;YACR3E,iBAAiBvB,OAAOkG,uBAAuB;QACjD;QACA,WAAW;YACT3E,iBAAiBvB,OAAOkG,uBAAuB;QACjD;IACF;AACF;AAEA,MAAMC,8BAA8BvG,WAAW;IAC7CwG,cAAc;QACZ3E,QAAQ;QACRF,iBAAiBvB,OAAOkG,uBAAuB;QAC/C,UAAU;YACR3E,iBAAiBvB,OAAOqG,4BAA4B;QACtD;QACA,WAAW;YACT9E,iBAAiBvB,OAAOsG,8BAA8B;QACxD;QACA,kBAAkB;YAChB1E,cAAc5B,OAAOuG,iBAAiB;QACxC;IACF;AACF;AAEA,MAAMC,oBAAoB5G,WAAW;IACnCO,MAAM;QACJiC,SAAS,CAAC,EAAEpC,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO6E,sBAAsB,CAAC,CAAC;QAC3EjD,cAAc5B,OAAOuF,kBAAkB;IACzC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMkB,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,oBAAoB9F;IAC1B,MAAM+F,6BAA6BpE;IACnC,MAAMqE,6BAA6BpD;IACnC,MAAMqD,6BAA6B9C;IACnC,MAAM+C,qBAAqB7C;IAC3B,MAAM8C,uBAAuB1C;IAC7B,MAAM2C,2BAA2BtC;IACjC,MAAMuC,wBAAwBnC;IAC9B,MAAMoC,oBAAoBlH;IAC1B,MAAMmH,sBAAsBjE;IAC5B,MAAMkE,kBAAkBpC;IACxB,MAAMqC,cAAclC;IACpB,MAAMmC,0BAA0BjC;IAChC,MAAMkC,0BAA0B5B;IAChC,MAAM6B,2BAA2BtB;IACjC,MAAMuB,iBAAiBlB;IACvB,MAAM,EAAEmB,SAAS,EAAEvH,aAAa,EAAEwH,IAAI,EAAEC,IAAI,EAAEC,aAAa,EAAE9C,WAAW,EAAE,GAAG0B;IAE7EA,MAAMvG,IAAI,CAAC4H,SAAS,GAAGlI,aACrBK,qBAAqBC,IAAI,EACzBwG,mBACAmB,kBAAkB,UAAUJ,eAAevH,IAAI,EAC/CuG,MAAMvG,IAAI,CAAC4H,SAAS;IAEtBrB,MAAMtG,aAAa,CAAC2H,SAAS,GAAGlI,aAC9BK,qBAAqBE,aAAa,EAClCwG,4BACAgB,SAAS,WAAWN,YAAYlH,aAAa,EAC7CA,cAAc4H,EAAE,KAAK,UAAU,CAACtB,MAAMuB,SAAS,IAAIb,oBAAoBhE,MAAM,EAC7EuE,aAAaN,gBAAgBjH,aAAa,EAC1C0H,kBAAkB,UAAUL,yBAAyBrB,YAAY,EACjE0B,kBAAkB,UAAUP,wBAAwBpH,IAAI,EACxD2H,kBAAkB,UAAUP,uBAAuB,CAACM,KAAK,EACzDnB,MAAMtG,aAAa,CAAC2H,SAAS;IAE/BrB,MAAMrG,aAAa,CAAC0H,SAAS,GAAGlI,aAC9BK,qBAAqBG,aAAa,EAClCwG,4BACAiB,kBAAkB,aAAahB,2BAA2B3G,IAAI,EAC9DyH,SAAS,WAAWN,YAAYjH,aAAa,EAC7CyH,kBAAkB,UAAUL,yBAAyBrB,YAAY,EACjE0B,kBAAkB,UAAUN,wBAAwBrH,IAAI,EACxD2H,kBAAkB,UAAUN,uBAAuB,CAACK,KAAK,EACzDC,kBAAkB,UAAU9C,eAAewC,wBAAwBxC,WAAW,EAC9E8C,kBAAkB,UAAU,CAAC9C,eAAewC,wBAAwBxB,WAAW,EAC/EU,MAAMrG,aAAa,CAAC0H,SAAS;IAE/B,IAAIrB,MAAMpG,KAAK,EAAE;QACfoG,MAAMpG,KAAK,CAACyH,SAAS,GAAGlI,aACtBK,qBAAqBI,KAAK,EAC1ByG,oBACAa,SAAS,WAAWN,YAAYhH,KAAK,EACrCoG,MAAMpG,KAAK,CAACyH,SAAS;IAEzB;IACArB,MAAMnG,OAAO,CAACwH,SAAS,GAAGlI,aACxBK,qBAAqBK,OAAO,EAC5ByG,sBACAY,SAAS,WAAWN,YAAY/G,OAAO,EACvCoH,aAAaN,gBAAgB9G,OAAO,EACpCmG,MAAMnG,OAAO,CAACwH,SAAS;IAEzBrB,MAAMlG,WAAW,CAACuH,SAAS,GAAGlI,aAC5BK,qBAAqBM,WAAW,EAChCyG,0BACAW,SAAS,WAAWN,YAAY9G,WAAW,EAC3CsH,kBAAkB,UAAU9C,eAAekC,sBAAsBlC,WAAW,EAC5E0B,MAAMlG,WAAW,CAACuH,SAAS;IAG7B,IAAIrB,MAAMjG,QAAQ,EAAE;QAClBiG,MAAMjG,QAAQ,CAACsH,SAAS,GAAGlI,aACzBK,qBAAqBO,QAAQ,EAC7B0G,kBAAkB1G,QAAQ,EAC1BiG,MAAMjG,QAAQ,CAACsH,SAAS;QAG1B,MAAMG,MAAMpI,KAAKqI,QAAQ,CAACzB,MAAMjG,QAAQ,CAACyH,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIxB,MAAMjG,QAAQ,CAAC6H,KAAK,KAAKC,WAAW;gBACtCL,IAAIH,SAAS,GAAGlI,aAAasH,kBAAkBqB,wBAAwB,EAAEN,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,GAAGlI,aAAasH,kBAAkBsB,kBAAkB,EAAEP,IAAIH,SAAS;YAClF;YACArB,MAAMjG,QAAQ,CAACyH,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOxB;AACT,EAAE"}
1	+ {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\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 color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\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});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useDismissButtonCurrentStyles = makeStyles({\n root: {\n ':hover': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useDismissIconNextStyles = makeStyles({\n dismissOnly: {\n ':hover': {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n root: {\n borderTopLeftRadius: tokens.borderRadiusXLarge,\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n },\n\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '32px',\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n ':hover': {\n color: tokens.colorNeutralForeground2,\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n\n borderLeftColor: tokens.colorNeutralStroke1,\n borderLeftWidth: tokens.strokeWidthThin,\n borderLeftStyle: 'solid',\n },\n withPrimary: {\n ':hover': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n },\n ':active': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n width: '40px',\n },\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n minHeight: '32px',\n width: '32px',\n },\n dismissOnly: {\n borderRadius: tokens.borderRadiusXLarge,\n width: 'unset',\n borderLeftColor: tokens.colorTransparentStroke,\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n sharedStyles: {\n border: 'none',\n backgroundColor: tokens.colorNeutralBackground3,\n },\n sharedInteractiveStyles: {\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n },\n});\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n }),\n\n dismissButton: createCustomFocusIndicatorStyle({\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n }),\n});\n\n/*\n Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const dismissIconNextStyles = useDismissIconNextStyles();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const primaryActionNextStyles = usePrimaryActionNextStyles();\n const dismissButtonNextStyles = useDismissButtonNextStyles();\n const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n const rootNextStyles = useRootNextStyles();\n const focusStyles = useFocusStyles();\n const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;\n\n state.root.className = mergeClasses(\n attachmentClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' &&\n primaryAction.as !== 'span' &&\n !state.isLoading &&\n primaryDismissNextStyles.sharedInteractiveStyles,\n designVersion === 'next' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n focusStyles.primaryActionButton,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n designVersion === 'current' && dismissButtonCurrentStyles.root,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && primaryDismissNextStyles.sharedInteractiveStyles,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\n designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\n designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary,\n focusStyles.dismissButton,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useDismissButtonCurrentStyles","colorBrandForegroundLinkHover","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useDismissIconNextStyles","dismissOnly","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","withPrimary","spacingHorizontalMNudge","colorNeutralBackground3","usePrimaryDismissNextStyles","sharedStyles","sharedInteractiveStyles","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","useRootNextStyles","useFocusStyles","primaryActionButton","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","dismissIconNextStyles","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","focusStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { __styles, mergeClasses, slot, tokens } from '@fluentui/react-components';
+import { __styles, mergeClasses, slot } from '@fluentui/react-components';
 import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
+import { tokens } from '@fluentui-copilot/tokens';
 export const attachmentOverflowMenuItemClassNames = {
   root: 'fai-AttachmentOverflowMenuItem',
   progress: 'fai-AttachmentOverflowMenuItem__progress'
@@ -18,18 +19,25 @@ const useStyles = __styles({
 });
 const useNextStyles = __styles({
   nextStyles: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fxe958b",
     Dah5zi: 0,
     B1tsrr9: 0,
     qqdqy8: 0,
     Bkh64rk: 0,
-    e3fwne: "f84qbf7",
+    e3fwne: "f8ydpu5",
     Bw0xxkn: 0,
     oeaueh: 0,
     Bpd4iqm: 0,
     Befb4lg: "f1bars0k"
   }
 }, {
-  d: [[".f84qbf7[data-fui-focus-visible]::after{border-radius:var(--borderRadiusXLarge);}", {
+  d: [[".fxe958b{border-radius:20px;}", {
+    p: -1
+  }], [".f8ydpu5[data-fui-focus-visible]::after{border-radius:20px;}", {
     p: -1
   }], [".f1bars0k{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
     p: -1

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":["makeStyles","mergeClasses","slot","~~tokens~~","~~useProgressBarStyles~~","attachmentOverflowMenuItemClassNames","root","progress","FOCUS_VISIBLE_ATTR","useStyles","imageOnly","alignItems","secondaryContent","display","useNextStyles","nextStyles","borderRadius","~~borderRadiusXLarge","~~outline","strokeWidthThin","colorTransparentStroke","useAttachmentOverflowMenuItemStyles_unstable","state","designVersion","styles","progressBarStyles","className","optional","elementType","bar","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,~~EAAEC,MAAM,~~QAAQ,6BAA6B;~~AACpF~~,SAASC,oBAAoB,QAAQ,uCAAuC;~~AAO5E~~,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,YAAY;IACd;IACAC,kBAAkB;QAChBC,SAAS;QACTF,YAAY;IACd;AACF;AAEA,MAAMG,gBAAgBd,WAAW;IAC/Be,YAAY;~~QACV~~,CAAC,CAAC,CAAC,~~EAAEP~~,mBAAmB,QAAQ,CAAC,CAAC,EAAE;YAClCQ,~~cAAcb,OAAOc,kBAAkB~~;~~QACzC~~;QACAC,SAAS,CAAC,~~EAAEf~~,~~OAAOgB~~,eAAe,CAAC,OAAO,~~EAAEhB~~,~~OAAOiB~~,sBAAsB,CAAC,CAAC;IAC7E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAM,~~EAAEZ~~,SAAS,~~EAAEa~~,aAAa,EAAE,GAAGD;IACrC,MAAME,~~SAASf~~;IACf,MAAMM,aAAaD;IACnB,~~MAAMW~~,oBAAoBrB;IAE1BkB,~~MAAMhB~~,IAAI,~~CAACoB~~,SAAS,~~GAAGzB~~,aACrBI,qCAAqCC,IAAI,EACzCI,~~aAAac~~,~~OAAOd~~,SAAS,~~EAC7Ba~~,kBAAkB,~~UAAUR~~,WAAWA,UAAU,~~EACjDO~~,~~MAAMhB~~,IAAI,~~CAACoB~~,SAAS;IAGtB,~~MAAMd~~,mBAAmBV,~~KAAKyB~~,QAAQ,CAACL,~~MAAMhB~~,IAAI,CAACM,gBAAgB,EAAE;~~QAClEgB~~,aAAa;IACf;IACA,~~IAAIhB~~,kBAAkB;QACpBA,~~iBAAiBc~~,SAAS,~~GAAGzB~~,~~aAAauB~~,~~OAAOZ~~,gBAAgB,EAAEA,~~iBAAiBc~~,SAAS;QAC7FJ,~~MAAMhB~~,IAAI,CAACM,gBAAgB,GAAGA;IAChC;IAEA,~~IAAIU~~,~~MAAMf~~,QAAQ,EAAE;~~QAClBe~~,~~MAAMf~~,QAAQ,~~CAACmB~~,SAAS,~~GAAGzB~~,aACzBI,qCAAqCE,QAAQ,~~EAC7CkB~~,~~kBAAkBlB~~,QAAQ,~~EAC1Be~~,~~MAAMf~~,QAAQ,~~CAACmB~~,SAAS;QAG1B,MAAMG,~~MAAM3B~~,~~KAAKyB~~,QAAQ,CAACL,~~MAAMf~~,QAAQ,~~CAACsB~~,GAAG,EAAE;YAAED,aAAa;YAAOE,iBAAiB;QAAK;QAC1F,IAAID,KAAK;YACP,IAAIP,~~MAAMf~~,QAAQ,~~CAACwB~~,KAAK,KAAKC,WAAW;gBACtCH,IAAIH,SAAS,~~GAAGzB~~,~~aAAawB~~,kBAAkBQ,wBAAwB,EAAEJ,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,~~GAAGzB~~,~~aAAawB~~,kBAAkBS,kBAAkB,EAAEL,IAAIH,SAAS;YAClF;YACAJ,~~MAAMf~~,QAAQ,~~CAACsB~~,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}
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';\nimport { tokens } from '@fluentui-copilot/tokens';\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 borderRadius: '20px',\n [`[${FOCUS_VISIBLE_ATTR}]::after`]: {\n borderRadius: '20px',\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":["makeStyles","mergeClasses","slot","useProgressBarStyles","tokens","attachmentOverflowMenuItemClassNames","root","progress","FOCUS_VISIBLE_ATTR","useStyles","imageOnly","alignItems","secondaryContent","display","useNextStyles","nextStyles","borderRadius","outline","strokeWidthThin","colorTransparentStroke","useAttachmentOverflowMenuItemStyles_unstable","state","designVersion","styles","progressBarStyles","className","optional","elementType","bar","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,QAAQ,uCAAuC;AAM5E,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,YAAY;IACd;IACAC,kBAAkB;QAChBC,SAAS;QACTF,YAAY;IACd;AACF;AAEA,MAAMG,gBAAgBd,WAAW;IAC/Be,YAAY;QACVC,cAAc;QACd,CAAC,CAAC,CAAC,EAAER,mBAAmB,QAAQ,CAAC,CAAC,EAAE;YAClCQ,cAAc;QAChB;QACAC,SAAS,CAAC,EAAEb,OAAOc,eAAe,CAAC,OAAO,EAAEd,OAAOe,sBAAsB,CAAC,CAAC;IAC7E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAM,EAAEX,SAAS,EAAEY,aAAa,EAAE,GAAGD;IACrC,MAAME,SAASd;IACf,MAAMM,aAAaD;IACnB,MAAMU,oBAAoBrB;IAE1BkB,MAAMf,IAAI,CAACmB,SAAS,GAAGxB,aACrBI,qCAAqCC,IAAI,EACzCI,aAAaa,OAAOb,SAAS,EAC7BY,kBAAkB,UAAUP,WAAWA,UAAU,EACjDM,MAAMf,IAAI,CAACmB,SAAS;IAGtB,MAAMb,mBAAmBV,KAAKwB,QAAQ,CAACL,MAAMf,IAAI,CAACM,gBAAgB,EAAE;QAClEe,aAAa;IACf;IACA,IAAIf,kBAAkB;QACpBA,iBAAiBa,SAAS,GAAGxB,aAAasB,OAAOX,gBAAgB,EAAEA,iBAAiBa,SAAS;QAC7FJ,MAAMf,IAAI,CAACM,gBAAgB,GAAGA;IAChC;IAEA,IAAIS,MAAMd,QAAQ,EAAE;QAClBc,MAAMd,QAAQ,CAACkB,SAAS,GAAGxB,aACzBI,qCAAqCE,QAAQ,EAC7CiB,kBAAkBjB,QAAQ,EAC1Bc,MAAMd,QAAQ,CAACkB,SAAS;QAG1B,MAAMG,MAAM1B,KAAKwB,QAAQ,CAACL,MAAMd,QAAQ,CAACqB,GAAG,EAAE;YAAED,aAAa;YAAOE,iBAAiB;QAAK;QAC1F,IAAID,KAAK;YACP,IAAIP,MAAMd,QAAQ,CAACuB,KAAK,KAAKC,WAAW;gBACtCH,IAAIH,SAAS,GAAGxB,aAAauB,kBAAkBQ,wBAAwB,EAAEJ,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,GAAGxB,aAAauB,kBAAkBS,kBAAkB,EAAEL,IAAIH,SAAS;YAClF;YACAJ,MAAMd,QAAQ,CAACqB,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { makeStyles, mergeClasses, slot, tokens } from '@fluentui/react-components';
+import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';
 import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
+import { tokens } from '@fluentui-copilot/tokens';
 export const attachmentOverflowMenuItemClassNames = {
     root: 'fai-AttachmentOverflowMenuItem',
     progress: 'fai-AttachmentOverflowMenuItem__progress'
@@ -16,8 +17,9 @@ const useStyles = makeStyles({
 });
 const useNextStyles = makeStyles({
     nextStyles: {
+        borderRadius: '20px',
         [`[${FOCUS_VISIBLE_ATTR}]::after`]: {
-            borderRadius: tokens.borderRadiusXLarge
+            borderRadius: '20px'
         },
         outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
     }