@fluentui-copilot/react-attachments 0.13.2 → 0.13.4

package/lib/components/utils/useProgressBarStyles.styles.raw.js

@@ -0,0 +1,42 @@
+import { makeStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+const indeterminateProgressBarReducedMotion = {
+    '0%': {
+        opacity: '.2'
+    },
+    '50%': {
+        opacity: '1'
+    },
+    '100%': {
+        opacity: '.2'
+    }
+};
+/**
+ * @internal
+ */ export const useProgressBarStyles = makeStyles({
+    progress: {
+        width: '100%',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '4px',
+        borderBottomLeftRadius: tokens.borderRadiusMedium,
+        borderBottomRightRadius: tokens.borderRadiusMedium
+    },
+    regularProgressBar: {
+        height: '100%',
+        backgroundImage: `linear-gradient(90deg, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%)`
+    },
+    indeterminateProgressBar: {
+        height: '100%',
+        backgroundColor: tokens.colorTransparentBackground,
+        backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%,  rgba(0,0,0,0))`,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            maxWidth: '100%',
+            animationIterationCount: 'infinite',
+            animationDuration: '3s',
+            animationName: indeterminateProgressBarReducedMotion
+        }
+    }
+});

package/lib/components/utils/useProgressBarStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useProgressBarStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nconst indeterminateProgressBarReducedMotion = {\n  '0%': {\n    opacity: '.2', // matches indeterminate bar width\n  },\n  '50%': {\n    opacity: '1',\n  },\n  '100%': {\n    opacity: '.2',\n  },\n};\n\n/**\n * @internal\n */\nexport const useProgressBarStyles = makeStyles({\n  progress: {\n    width: '100%',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: '4px',\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n  },\n  regularProgressBar: {\n    height: '100%',\n    backgroundImage: `linear-gradient(90deg, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%)`,\n  },\n  indeterminateProgressBar: {\n    height: '100%',\n    backgroundColor: tokens.colorTransparentBackground,\n    backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%,  rgba(0,0,0,0))`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      maxWidth: '100%',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationName: indeterminateProgressBarReducedMotion,\n    },\n  },\n});\n"],"names":["makeStyles","tokens","indeterminateProgressBarReducedMotion","opacity","useProgressBarStyles","progress","width","position","bottom","left","right","height","borderBottomLeftRadius","borderRadiusMedium","borderBottomRightRadius","regularProgressBar","backgroundImage","colorBrandFlair1","colorBrandFlair2","colorBrandFlair3","indeterminateProgressBar","backgroundColor","colorTransparentBackground","maxWidth","animationIterationCount","animationDuration","animationName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AACxD,SAASC,MAAM,QAAQ,2BAA2B;AAElD,MAAMC,wCAAwC;IAC5C,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uBAAuBJ,WAAW;IAC7CK,UAAU;QACRC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,wBAAwBX,OAAOY,kBAAkB;QACjDC,yBAAyBb,OAAOY,kBAAkB;IACpD;IACAE,oBAAoB;QAClBJ,QAAQ;QACRK,iBAAiB,CAAC,uBAAuB,EAAEf,OAAOgB,gBAAgB,CAAC,MAAM,EAAEhB,OAAOiB,gBAAgB,CAAC,MAAM,EAAEjB,OAAOkB,gBAAgB,CAAC,KAAK,CAAC;IAC3I;IACAC,0BAA0B;QACxBT,QAAQ;QACRU,iBAAiBpB,OAAOqB,0BAA0B;QAClDN,iBAAiB,CAAC,yCAAyC,EAAEf,OAAOgB,gBAAgB,CAAC,MAAM,EAAEhB,OAAOiB,gBAAgB,CAAC,MAAM,EAAEjB,OAAOkB,gBAAgB,CAAC,qBAAqB,CAAC;QAC3K,sDAAsD;YACpDI,UAAU;YACVC,yBAAyB;YACzBC,mBAAmB;YACnBC,eAAexB;QACjB;IACF;AACF,GAAG"}

package/lib/contexts/attachmentListContext.js

@@ -1,10 +1,9 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const AttachmentListContext = createContext(undefined);
 const attachmentListContextDefaultValue = {
-  onAttachmentDismiss: () => null,
-  shouldUseOverflow: false,
-  numberOfAttachments: 0
+    onAttachmentDismiss: ()=>null,
+    shouldUseOverflow: false,
+    numberOfAttachments: 0
 };
 export const AttachmentListProvider = AttachmentListContext.Provider;
-export const useAttachmentListContext_unstable = selector => useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));
-//# sourceMappingURL=attachmentListContext.js.map
+export const useAttachmentListContext_unstable = (selector)=>useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue)=>selector(ctx));

package/lib/contexts/attachmentOverflowMenuContext.js

@@ -1,10 +1,9 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const AttachmentOverflowMenuContext = createContext(undefined);
 const overflowMenuContextDefaultValue = {
-  isOverflowing: false,
-  overflowButtonRef: undefined,
-  overflowCount: 0
+    isOverflowing: false,
+    overflowButtonRef: undefined,
+    overflowCount: 0
 };
 export const AttachmentOverflowMenuProvider = AttachmentOverflowMenuContext.Provider;
-export const useAttachmentOverflowMenuContext_unstable = selector => useContextSelector(AttachmentOverflowMenuContext, (ctx = overflowMenuContextDefaultValue) => selector(ctx));
-//# sourceMappingURL=attachmentOverflowMenuContext.js.map
+export const useAttachmentOverflowMenuContext_unstable = (selector)=>useContextSelector(AttachmentOverflowMenuContext, (ctx = overflowMenuContextDefaultValue)=>selector(ctx));

package/lib/index.js

@@ -6,4 +6,3 @@ export { AttachmentOverflowMenuContext, AttachmentOverflowMenuProvider, useAttac
 export { AttachmentOverflowMenuButton, attachmentOverflowMenuButtonClassNames, renderAttachmentOverflowMenuButton_unstable, useAttachmentOverflowMenuButtonStyles_unstable, useAttachmentOverflowMenuButton_unstable } from './AttachmentOverflowMenuButton';
 export { AttachmentOverflowMenuItem, attachmentOverflowMenuItemClassNames, renderAttachmentOverflowMenuItem_unstable, useAttachmentOverflowMenuItemStyles_unstable, useAttachmentOverflowMenuItem_unstable } from './AttachmentOverflowMenuItem';
 export { AgentTag, renderAgentTag_unstable, useAgentTag_unstable, agentTagClassNames, useAgentTagStyles_unstable } from './AgentTag';
-//# sourceMappingURL=index.js.map

package/lib-commonjs/AgentTag.js

@@ -26,4 +26,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/AgentTag/index");
- //# sourceMappingURL=AgentTag.js.map

package/lib-commonjs/Attachment.js

@@ -29,4 +29,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/Attachment/index");
- //# sourceMappingURL=Attachment.js.map

package/lib-commonjs/AttachmentList.js

@@ -26,4 +26,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/AttachmentList/index");
- //# sourceMappingURL=AttachmentList.js.map

package/lib-commonjs/AttachmentOverflowMenu.js

@@ -23,4 +23,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/AttachmentOverflowMenu/index");
- //# sourceMappingURL=AttachmentOverflowMenu.js.map

package/lib-commonjs/AttachmentOverflowMenuButton.js

@@ -26,4 +26,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/AttachmentOverflowMenuButton/index");
- //# sourceMappingURL=AttachmentOverflowMenuButton.js.map

package/lib-commonjs/AttachmentOverflowMenuItem.js

@@ -26,4 +26,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/AttachmentOverflowMenuItem/index");
- //# sourceMappingURL=AttachmentOverflowMenuItem.js.map

package/lib-commonjs/components/AgentTag/AgentTag.js

@@ -18,4 +18,4 @@ const AgentTag = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _useAgentTagStylesstyles.useAgentTagStyles_unstable)(state);
     return (0, _renderAgentTag.renderAgentTag_unstable)(state);
 });
-AgentTag.displayName = 'AgentTag'; //# sourceMappingURL=AgentTag.js.map
+AgentTag.displayName = 'AgentTag';

package/lib-commonjs/components/AgentTag/AgentTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AgentTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAgentTag_unstable } from './useAgentTag';\nimport { renderAgentTag_unstable } from './renderAgentTag';\nimport { useAgentTagStyles_unstable } from './useAgentTagStyles.styles';\nimport type { AgentTagProps } from './AgentTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// AgentTag component - TODO: add more docs\nexport const AgentTag: ForwardRefComponent<AgentTagProps> = React.forwardRef((props, ref) => {\n  const state = useAgentTag_unstable(props, ref);\n\n  useAgentTagStyles_unstable(state);\n  return renderAgentTag_unstable(state);\n});\n\nAgentTag.displayName = 'AgentTag';\n"],"names":["AgentTag","React","forwardRef","props","state","useAgentTag_unstable","useAgentTagStyles_unstable","renderAgentTag_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;6BACc;gCACG;yCACG;AAKpC,MAAMA,WAAAA,WAAAA,GAAAA,OAA+CC,UAAMC,CAAU,CAACC,OAACA;UAC5EC,QAAMA,IAAAA,iCAAQC,EAAAA,OAAqBF;2DAEnCG,EAAAA;WACAC,IAAAA,uCAAOA,EAAAA;AACT;AAEAP,SAASQ,WAAW,GAAG"}
+{"version":3,"sources":["AgentTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAgentTag_unstable } from './useAgentTag';\nimport { renderAgentTag_unstable } from './renderAgentTag';\nimport { useAgentTagStyles_unstable } from './useAgentTagStyles.styles';\nimport type { AgentTagProps } from './AgentTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// AgentTag component - TODO: add more docs\nexport const AgentTag: ForwardRefComponent<AgentTagProps> = React.forwardRef((props, ref) => {\n  const state = useAgentTag_unstable(props, ref);\n\n  useAgentTagStyles_unstable(state);\n  return renderAgentTag_unstable(state);\n});\n\nAgentTag.displayName = 'AgentTag';\n"],"names":["AgentTag","React","forwardRef","props","ref","state","useAgentTag_unstable","useAgentTagStyles_unstable","renderAgentTag_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;6BACc;gCACG;yCACG;AAKpC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAC3B,OAAOG,IAAAA,uCAAAA,EAAwBH;AACjC;AAEAL,SAASS,WAAW,GAAG"}

package/lib-commonjs/components/AgentTag/AgentTag.types.js

@@ -4,4 +4,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=AgentTag.types.js.map

package/lib-commonjs/components/AgentTag/index.js

@@ -29,4 +29,3 @@ const _AgentTag = require("./AgentTag");
 const _renderAgentTag = require("./renderAgentTag");
 const _useAgentTag = require("./useAgentTag");
 const _useAgentTagStylesstyles = require("./useAgentTagStyles.styles");
- //# sourceMappingURL=index.js.map

package/lib-commonjs/components/AgentTag/renderAgentTag.js

@@ -11,4 +11,4 @@ Object.defineProperty(exports, "renderAgentTag_unstable", {
 const _Attachment = require("../Attachment");
 const renderAgentTag_unstable = (state)=>{
     return (0, _Attachment.renderAttachment_unstable)(state);
-}; //# sourceMappingURL=renderAgentTag.js.map
+};

package/lib-commonjs/components/AgentTag/renderAgentTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAgentTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { renderAttachment_unstable } from '../Attachment';\nimport type { AgentTagState } from './AgentTag.types';\n\n/**\n * Render the final JSX of AgentTag\n */\nexport const renderAgentTag_unstable = (state: AgentTagState) => {\n  return renderAttachment_unstable(state);\n};\n"],"names":["renderAttachment_unstable","state"],"rangeMappings":";;;;;;;;;;;;","mappings":";;;;+BAUSA;;;eAAAA;;;4BATT;AASE,MAAOA,0BAA0BC,CAAAA;IACjC,OAAAD,IAAAA,qCAAA,EAAAC"}
+{"version":3,"sources":["renderAgentTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { renderAttachment_unstable } from '../Attachment';\nimport type { AgentTagState } from './AgentTag.types';\n\n/**\n * Render the final JSX of AgentTag\n */\nexport const renderAgentTag_unstable = (state: AgentTagState) => {\n  return renderAttachment_unstable(state);\n};\n"],"names":["renderAgentTag_unstable","state","renderAttachment_unstable"],"rangeMappings":";;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;AAQO,MAAMA,0BAA0B,CAACC;IACtC,OAAOC,IAAAA,qCAAAA,EAA0BD;AACnC"}

package/lib-commonjs/components/AgentTag/useAgentTag.js

@@ -16,4 +16,4 @@ const useAgentTag_unstable = (props, ref)=>{
         designVersion: 'next'
     }, ref);
     return state;
-}; //# sourceMappingURL=useAgentTag.js.map
+};

package/lib-commonjs/components/AgentTag/useAgentTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAgentTag.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AgentTagProps, AgentTagState } from './AgentTag.types';\nimport { useAttachment_unstable } from '..';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render AgentTag.\n *\n * The returned state can be modified with hooks such as useAgentTagStyles_unstable,\n * before being passed to renderAgentTag_unstable.\n *\n * @param props - props from this instance of AgentTag\n * @param ref - reference to root HTMLElement of AgentTag\n */\nexport const useAgentTag_unstable = (props: AgentTagProps, ref: React.Ref<HTMLDivElement>): AgentTagState => {\n  const state = useAttachment_unstable({ ...props, dismissOnly: true, designVersion: 'next' }, ref);\n\n  return state;\n};\n"],"names":["state","useAttachment_unstable","ref","dismissOnly","designVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBQA;;;eAAAA;;;kBAd+B;AAcrC,MAAMA,uBAAQC,CAAAA,OAAuBC;UAAEF,QAAQC,IAAAA,wBAAA,EAAA;gBAAEE;qBAAmBC;QAAsBA,eAAGF;OAE7FA;IACA,OAAAF"}
+{"version":3,"sources":["useAgentTag.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AgentTagProps, AgentTagState } from './AgentTag.types';\nimport { useAttachment_unstable } from '..';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render AgentTag.\n *\n * The returned state can be modified with hooks such as useAgentTagStyles_unstable,\n * before being passed to renderAgentTag_unstable.\n *\n * @param props - props from this instance of AgentTag\n * @param ref - reference to root HTMLElement of AgentTag\n */\nexport const useAgentTag_unstable = (props: AgentTagProps, ref: React.Ref<HTMLDivElement>): AgentTagState => {\n  const state = useAttachment_unstable({ ...props, dismissOnly: true, designVersion: 'next' }, ref);\n\n  return state;\n};\n"],"names":["useAgentTag_unstable","props","ref","state","useAttachment_unstable","dismissOnly","designVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;kBAb0B;AAahC,MAAMA,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,QAAQC,IAAAA,wBAAAA,EAAuB;QAAE,GAAGH,KAAK;QAAEI,aAAa;QAAMC,eAAe;IAAO,GAAGJ;IAE7F,OAAOC;AACT"}

package/lib-commonjs/components/AgentTag/useAgentTagStyles.styles.raw.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    agentTagClassNames: function() {
+        return agentTagClassNames;
+    },
+    useAgentTagStyles_unstable: function() {
+        return useAgentTagStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _ = require("..");
+const _tokens = require("@fluentui-copilot/tokens");
+const agentTagClassNames = {
+    root: 'fai-AgentTag',
+    primaryAction: 'fai-AgentTag__primaryAction',
+    dismissIcon: 'fai-AgentTag__dismissIcon',
+    dismissButton: 'fai-AgentTag__dismissButton',
+    media: 'fai-AgentTag__media',
+    content: 'fai-AgentTag__content',
+    progress: 'fai-AgentTag__progress'
+};
+const useMediaStyles = (0, _reactcomponents.makeStyles)({
+    canvas: {
+        width: '24px',
+        height: '24px'
+    },
+    sidecar: {
+        width: '20px',
+        height: '20px'
+    }
+});
+const useContentStyles = (0, _reactcomponents.makeStyles)({
+    canvas: {
+        ..._tokens.typographyStyles.subtitle2,
+        color: _tokens.tokens.colorNeutralForeground2
+    },
+    sidecar: {
+        ..._tokens.typographyStyles.body1Strong,
+        color: _tokens.tokens.colorNeutralForeground2
+    }
+});
+const useDismissButtonStyles = (0, _reactcomponents.makeStyles)({
+    canvas: {
+        borderRadius: _tokens.tokens.borderRadius2XL,
+        paddingLeft: _tokens.tokens.spacingHorizontalL,
+        paddingRight: _tokens.tokens.spacingHorizontalM
+    },
+    sidecar: {
+        paddingLeft: _tokens.tokens.spacingHorizontalM,
+        paddingRight: _tokens.tokens.spacingHorizontalS,
+        borderRadius: _tokens.tokens.borderRadiusXLarge
+    }
+});
+const useAgentTagStyles_unstable = (state)=>{
+    'use no memo';
+    const { mode } = state;
+    const contentStyles = useContentStyles();
+    const dismissButtonStyles = useDismissButtonStyles();
+    const mediaStyles = useMediaStyles();
+    state.root.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.root, state.root.className);
+    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.primaryAction, state.primaryAction.className);
+    state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.dismissIcon, state.dismissIcon.className);
+    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.dismissButton, dismissButtonStyles[mode], state.dismissButton.className);
+    if (state.media) {
+        state.media.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.media, mediaStyles[mode], state.media.className);
+    }
+    state.content.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.content, contentStyles[mode], state.content.className);
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.progress, state.progress.className);
+    }
+    (0, _.useAttachmentStyles_unstable)(state);
+    return state;
+};

package/lib-commonjs/components/AgentTag/useAgentTagStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAgentTagStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { AgentTagSlots, AgentTagState } from './AgentTag.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { useAttachmentStyles_unstable } from '..';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\n\nexport const agentTagClassNames: SlotClassNames<AgentTagSlots> = {\n  root: 'fai-AgentTag',\n  primaryAction: 'fai-AgentTag__primaryAction',\n  dismissIcon: 'fai-AgentTag__dismissIcon',\n  dismissButton: 'fai-AgentTag__dismissButton',\n  media: 'fai-AgentTag__media',\n  content: 'fai-AgentTag__content',\n  progress: 'fai-AgentTag__progress',\n};\n\nconst useMediaStyles = makeStyles({\n  canvas: {\n    width: '24px',\n    height: '24px',\n  },\n  sidecar: { width: '20px', height: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n  canvas: {\n    ...typographyStyles.subtitle2,\n    color: tokens.colorNeutralForeground2,\n  },\n  sidecar: {\n    ...typographyStyles.body1Strong,\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useDismissButtonStyles = makeStyles({\n  canvas: {\n    borderRadius: tokens.borderRadius2XL,\n    paddingLeft: tokens.spacingHorizontalL,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n  sidecar: {\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalS,\n    borderRadius: tokens.borderRadiusXLarge,\n  },\n});\n\n/**\n * Apply styling to the AgentTag slots based on the state\n */\nexport const useAgentTagStyles_unstable = (state: AgentTagState): AgentTagState => {\n  'use no memo';\n\n  const { mode } = state;\n\n  const contentStyles = useContentStyles();\n  const dismissButtonStyles = useDismissButtonStyles();\n  const mediaStyles = useMediaStyles();\n\n  state.root.className = mergeClasses(agentTagClassNames.root, state.root.className);\n\n  state.primaryAction.className = mergeClasses(agentTagClassNames.primaryAction, state.primaryAction.className);\n\n  state.dismissIcon.className = mergeClasses(agentTagClassNames.dismissIcon, state.dismissIcon.className);\n\n  state.dismissButton.className = mergeClasses(\n    agentTagClassNames.dismissButton,\n    dismissButtonStyles[mode],\n    state.dismissButton.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(agentTagClassNames.media, mediaStyles[mode], state.media.className);\n  }\n\n  state.content.className = mergeClasses(agentTagClassNames.content, contentStyles[mode], state.content.className);\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(agentTagClassNames.progress, state.progress.className);\n  }\n\n  useAttachmentStyles_unstable(state);\n\n  return state;\n};\n"],"names":["agentTagClassNames","useAgentTagStyles_unstable","root","primaryAction","dismissIcon","dismissButton","media","content","progress","useMediaStyles","makeStyles","canvas","width","height","sidecar","useContentStyles","typographyStyles","subtitle2","color","tokens","colorNeutralForeground2","body1Strong","useDismissButtonStyles","borderRadius","borderRadius2XL","paddingLeft","spacingHorizontalL","paddingRight","spacingHorizontalM","spacingHorizontalS","borderRadiusXLarge","state","mode","contentStyles","dismissButtonStyles","mediaStyles","className","mergeClasses","useAttachmentStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,kBAAAA;eAAAA;;IA6CAC,0BAAAA;eAAAA;;;iCAnD4B;kBAGI;wBACJ;AAElC,MAAMD,qBAAoD;IAC/DE,MAAM;IACNC,eAAe;IACfC,aAAa;IACbC,eAAe;IACfC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ;AAEA,MAAMC,iBAAiBC,IAAAA,2BAAAA,EAAW;IAChCC,QAAQ;QACNC,OAAO;QACPC,QAAQ;IACV;IACAC,SAAS;QAAEF,OAAO;QAAQC,QAAQ;IAAO;AAC3C;AAEA,MAAME,mBAAmBL,IAAAA,2BAAAA,EAAW;IAClCC,QAAQ;QACN,GAAGK,wBAAAA,CAAiBC,SAAS;QAC7BC,OAAOC,cAAAA,CAAOC,uBAAuB;IACvC;IACAN,SAAS;QACP,GAAGE,wBAAAA,CAAiBK,WAAW;QAC/BH,OAAOC,cAAAA,CAAOC,uBAAuB;IACvC;AACF;AAEA,MAAME,yBAAyBZ,IAAAA,2BAAAA,EAAW;IACxCC,QAAQ;QACNY,cAAcJ,cAAAA,CAAOK,eAAe;QACpCC,aAAaN,cAAAA,CAAOO,kBAAkB;QACtCC,cAAcR,cAAAA,CAAOS,kBAAkB;IACzC;IACAd,SAAS;QACPW,aAAaN,cAAAA,CAAOS,kBAAkB;QACtCD,cAAcR,cAAAA,CAAOU,kBAAkB;QACvCN,cAAcJ,cAAAA,CAAOW,kBAAkB;IACzC;AACF;AAKO,MAAM7B,6BAA6B,CAAC8B;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,gBAAgBlB;IACtB,MAAMmB,sBAAsBZ;IAC5B,MAAMa,cAAc1B;IAEpBsB,MAAM7B,IAAI,CAACkC,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBE,IAAI,EAAE6B,MAAM7B,IAAI,CAACkC,SAAS;IAEjFL,MAAM5B,aAAa,CAACiC,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBG,aAAa,EAAE4B,MAAM5B,aAAa,CAACiC,SAAS;IAE5GL,MAAM3B,WAAW,CAACgC,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBI,WAAW,EAAE2B,MAAM3B,WAAW,CAACgC,SAAS;IAEtGL,MAAM1B,aAAa,CAAC+B,SAAS,GAAGC,IAAAA,6BAAAA,EAC9BrC,mBAAmBK,aAAa,EAChC6B,mBAAmB,CAACF,KAAK,EACzBD,MAAM1B,aAAa,CAAC+B,SAAS;IAG/B,IAAIL,MAAMzB,KAAK,EAAE;QACfyB,MAAMzB,KAAK,CAAC8B,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBM,KAAK,EAAE6B,WAAW,CAACH,KAAK,EAAED,MAAMzB,KAAK,CAAC8B,SAAS;IACzG;IAEAL,MAAMxB,OAAO,CAAC6B,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBO,OAAO,EAAE0B,aAAa,CAACD,KAAK,EAAED,MAAMxB,OAAO,CAAC6B,SAAS;IAE/G,IAAIL,MAAMvB,QAAQ,EAAE;QAClBuB,MAAMvB,QAAQ,CAAC4B,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBQ,QAAQ,EAAEuB,MAAMvB,QAAQ,CAAC4B,SAAS;IAC/F;IAEAE,IAAAA,8BAAAA,EAA6BP;IAE7B,OAAOA;AACT"}

package/lib-commonjs/components/Attachment/Attachment.js

@@ -20,4 +20,4 @@ const Attachment = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _reactprovider.useCustomStyleHook)('useAttachmentStyles')(state);
     return (0, _renderAttachment.renderAttachment_unstable)(state);
 });
-Attachment.displayName = 'Attachment'; //# sourceMappingURL=Attachment.js.map
+Attachment.displayName = 'Attachment';

package/lib-commonjs/components/Attachment/Attachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Attachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachment_unstable } from './useAttachment';\nimport { renderAttachment_unstable } from './renderAttachment';\nimport { useAttachmentStyles_unstable } from './useAttachmentStyles.styles';\nimport type { AttachmentProps } from './Attachment.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Attachment component - TODO: add more docs\nexport const Attachment: ForwardRefComponent<AttachmentProps> = React.forwardRef((props, ref) => {\n  const state = useAttachment_unstable(props, ref);\n\n  useAttachmentStyles_unstable(state);\n  useCustomStyleHook('useAttachmentStyles')(state);\n\n  return renderAttachment_unstable(state);\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["Attachment","React","forwardRef","props","state","useAttachment_unstable","useAttachmentStyles_unstable","useCustomStyleHook","renderAttachment_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;+BACgB;kCACG;2CACG;+BAGV;AAG5B,MAAMA,aAAAA,WAAAA,GAAAA,OAAmDC,UAAMC,CAAU,CAACC,OAACA;UAChFC,QAAMA,IAAAA,qCAAQC,EAAAA,OAAuBF;+DAErCG,EAAAA;yCACAC,EAAAA,uBAAmBH;WAEnBI,IAAAA,2CAAOA,EAAAA;AACT;AAEAR,WAAWS,WAAW,GAAG"}
+{"version":3,"sources":["Attachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachment_unstable } from './useAttachment';\nimport { renderAttachment_unstable } from './renderAttachment';\nimport { useAttachmentStyles_unstable } from './useAttachmentStyles.styles';\nimport type { AttachmentProps } from './Attachment.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Attachment component - TODO: add more docs\nexport const Attachment: ForwardRefComponent<AttachmentProps> = React.forwardRef((props, ref) => {\n  const state = useAttachment_unstable(props, ref);\n\n  useAttachmentStyles_unstable(state);\n  useCustomStyleHook('useAttachmentStyles')(state);\n\n  return renderAttachment_unstable(state);\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["Attachment","React","forwardRef","props","ref","state","useAttachment_unstable","useAttachmentStyles_unstable","useCustomStyleHook","renderAttachment_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;+BACgB;kCACG;2CACG;+BAGV;AAG5B,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7BG,IAAAA,iCAAAA,EAAmB,uBAAuBH;IAE1C,OAAOI,IAAAA,2CAAAA,EAA0BJ;AACnC;AAEAL,WAAWU,WAAW,GAAG"}

package/lib-commonjs/components/Attachment/Attachment.types.js

@@ -4,4 +4,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=Attachment.types.js.map

package/lib-commonjs/components/Attachment/index.js

@@ -32,4 +32,3 @@ const _Attachment = require("./Attachment");
 const _renderAttachment = require("./renderAttachment");
 const _useAttachment = require("./useAttachment");
 const _useAttachmentStylesstyles = require("./useAttachmentStyles.styles");
- //# sourceMappingURL=index.js.map

package/lib-commonjs/components/Attachment/renderAttachment.js

@@ -47,4 +47,4 @@ const renderDismissOnly = (state)=>{
             ]
         })
     });
-}; //# sourceMappingURL=renderAttachment.js.map
+};

package/lib-commonjs/components/Attachment/renderAttachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  const { id, shouldUseOverflow, designVersion, dismissOnly } = state;\n\n  const attachment = designVersion === 'next' && dismissOnly ? renderDismissOnly(state) : renderAttachment(state);\n\n  return shouldUseOverflow ? (\n    <OverflowItem id={id} key={id}>\n      {attachment}\n    </OverflowItem>\n  ) : (\n    attachment\n  );\n};\n\nconst renderAttachment = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n\nconst renderDismissOnly = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.dismissButton>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["id","designVersion","attachment","state","renderAttachment","assertSlots","progress","root","dismissButton","_jsx","dismissIcon","renderDismissOnly","children","_jsxs","media","content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUUA;;;eAAAA;;;4BATV;iCAE0C;AAOxC,MAAQA,4BAAuBC,CAAAA;UAE/B,EAEAD,EAAA,mBACoBA,4BAIlBE,EAEF,GAAAC;IAEF,MAAMC,aAAAA,kBAAoBD,UAAAA,cAAAA,kBAAAA,SAAAA,iBAAAA;WACxBE,oBAA6BF,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,6BAAAA,EAAAA;QAE7BH,IAAAA;;;;yBAGOG,CAAAA;;sBAEAA,GAAAA,IAAAA,gBAAMG,EAAAA,MAAQC,IAAA,EAAA;;;;;;;;;+CAEjBJ,MAACA,aAAMK,EAAAA;qCACL,GAAAC,IAAAA,eAAA,EAAAN,MAAAO,WAAOA,EAAAA,CAAAA;;;;;AAIf,MAAAC,oBAAAR,CAAAA;IAEAE,IAAAA,4BAAMM,EAAAA;WACJN,WAA6BF,GAAAA,IAAAA,eAAAA,EAAAA,MAAAA,IAAAA,EAAAA;QAE7BS,UAAA,WACE,GAAAC,IAAAA,gBAACV,EAAAA,MAAMI,aAAI,EAAA;;sBACTO,KAAA,IAAA,CAAAX,MAACA,SAAMK,IAAAA,WAAa,GAAAC,IAAAA,eAAA,EAAAN,MAAAW,KAAA,EAAA,CAAA;gBAAA,WAAA,GAAAL,IAAAA,eAAA,EAAAN,MAAAY,OAAA,EAAA,CAAA;gBAAAZ,MAAAG,QAAA,IAAA,WAAA,GAAAG,IAAAA,eAAA,EAAAN,MAAAG,QAAA,EAAA,CAAA;gBAAA,WAAA,GAAAG,IAAAA,eAAA,EAAAN,MAAAO,WAAA,EAAA,CAAA;aAAA;;;+CAGH"}
+{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  const { id, shouldUseOverflow, designVersion, dismissOnly } = state;\n\n  const attachment = designVersion === 'next' && dismissOnly ? renderDismissOnly(state) : renderAttachment(state);\n\n  return shouldUseOverflow ? (\n    <OverflowItem id={id} key={id}>\n      {attachment}\n    </OverflowItem>\n  ) : (\n    attachment\n  );\n};\n\nconst renderAttachment = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n\nconst renderDismissOnly = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.dismissButton>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["renderAttachment_unstable","state","id","shouldUseOverflow","designVersion","dismissOnly","attachment","renderDismissOnly","renderAttachment","_jsx","OverflowItem","assertSlots","_jsxs","root","primaryAction","media","imageOnly","content","progress","dismissButton","dismissIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;iCAE0C;AAMnC,MAAMA,4BAA4B,CAACC;IACxC,MAAM,EAAEC,EAAE,EAAEC,iBAAiB,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGJ;IAE9D,MAAMK,aAAaF,kBAAkB,UAAUC,cAAcE,kBAAkBN,SAASO,iBAAiBP;IAEzG,OAAOE,oBAAAA,WAAAA,GACLM,IAAAA,eAAA,EAACC,6BAAAA,EAAAA;QAAaR,IAAIA;kBACfI;OADwBJ,MAI3BI;AAEJ;AAEA,MAAME,mBAAmB,CAACP;IACxBU,IAAAA,4BAAAA,EAA6BV;IAE7B,OAAA,WAAA,GACEW,IAAAA,gBAAA,EAACX,MAAMY,IAAI,EAAA;;0BACTD,IAAAA,gBAAA,EAACX,MAAMa,aAAa,EAAA;;oBACjBb,MAAMc,KAAK,IAAI,CAACd,MAAMe,SAAS,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACR,MAAMc,KAAK,EAAA,CAAA;kCAChDN,IAAAA,eAAA,EAACR,MAAMgB,OAAO,EAAA,CAAA;oBACbhB,MAAMiB,QAAQ,IAAA,WAAA,GAAIT,IAAAA,eAAA,EAACR,MAAMiB,QAAQ,EAAA,CAAA;;;0BAEpCT,IAAAA,eAAA,EAACR,MAAMkB,aAAa,EAAA;0BAClB,WAAA,GAAAV,IAAAA,eAAA,EAACR,MAAMmB,WAAW,EAAA,CAAA;;;;AAI1B;AAEA,MAAMb,oBAAoB,CAACN;IACzBU,IAAAA,4BAAAA,EAA6BV;IAE7B,OAAA,WAAA,GACEQ,IAAAA,eAAA,EAACR,MAAMY,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,gBAAA,EAACX,MAAMkB,aAAa,EAAA;;gBACjBlB,MAAMc,KAAK,IAAI,CAACd,MAAMe,SAAS,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACR,MAAMc,KAAK,EAAA,CAAA;8BAChDN,IAAAA,eAAA,EAACR,MAAMgB,OAAO,EAAA,CAAA;gBACbhB,MAAMiB,QAAQ,IAAA,WAAA,GAAIT,IAAAA,eAAA,EAACR,MAAMiB,QAAQ,EAAA,CAAA;8BAClCT,IAAAA,eAAA,EAACR,MAAMmB,WAAW,EAAA,CAAA;;;;AAI1B"}

package/lib-commonjs/components/Attachment/useAttachment.js

@@ -100,4 +100,4 @@ const useAttachment_unstable = (props, ref)=>{
         state.components.primaryAction = 'span';
     }
     return state;
-}; //# sourceMappingURL=useAttachment.js.map
+};

package/lib-commonjs/components/Attachment/useAttachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { children, imageOnly, size = 'medium', dismissOnly = false } = props;\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\n\n  const mode = useCopilotMode(props.mode);\n  const designVersion = useDesignVersion(props.designVersion);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n      id: attachmentId,\n    }),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    defaultProps: { as: dismissOnly ? 'span' : undefined },\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Remove attachment' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n      onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n    },\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: size === 'small' ? <Dismiss12Regular /> : <Dismiss20Regular />,\n    },\n    elementType: 'span',\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  const state: AttachmentState = {\n    id: attachmentId,\n    size,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n      progress: ProgressBar,\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    progress,\n    imageOnly,\n    isLoading,\n    shouldUseOverflow,\n    mode,\n    designVersion,\n    dismissOnly,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["children","size","ref","attachmentId","imageOnly","isLoading","mode","useCopilotMode","dismissOnly","designVersion","props","useAttachmentListContext_unstable","context","elementType","useId","id","progress","primaryAction","slot","always","defaultProps","useDesignVersion","as","undefined","dismissButton","onAttachmentDismiss","media","onClick","mergeCallbacks","ev","dismissIcon","content","thickness","React","createElement","Dismiss12Regular","Dismiss20Regular","components","root","shouldUseOverflow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBUA;;;eAAAA;;;;iEAjBa;iCAC4D;4BAChC;uCACD;+BAED;AAY/C,MAAQA,yBAAqBC,CAAAA,OAAOC;UACpC,EACAF,QAAMG,EACNC,SAAMC,EAENJ,OAAMK,QAAOC,EACbC,cAAMC,KAAAA,KAENC;UAEIR,qBACQ,mBACJC,KACNQ,IAAAA,wDACA,EAAAC,CAAAA,UAAAA;UAAEC,eAAaC,IAAAA,sBAAA,EAAA,eAAAJ,MAAAK,EAAA;UAAMV,YAAA,CAAA,CAAAK,MAAAM,QAAA;UAGvBV,OAAMW,IAAAA,6BAAgBC,EAAAA,MAAKC,IAAOT;UAChCU,gBAAcC,IAAAA,+BAAA,EAAAX,MAAAD,aAAA;iBAAEa,qBAAId,CAAAA,MAAAA,CAAAA,IAAAA,yCAAuBe,EAAAA,OAAAA;;gBAC3CV;QACFE,IAAAZ;QAEA;qBACEiB;;UAAkDH,gBAAAC,qBAAA,CAAAC,MAAA,CAAAT,MAAAO,aAAA,EAAA;sBAClDJ;YACFS,IAAAd,cAAA,SAAAe;QAEAC;qBAGIC;;0BAA+CC,qBAAAA,CAAAA,MAAAA,CAAAA,MAAAA,aAAAA,EAAAA;sBAAWvB;0BAAa;QACzE;QAGFU,aAAMa;;kBAAyDC,OAAA,GAAAC,IAAAA,+BAAA,EAAAJ,cAAAG,OAAA,EAAAE,CAAAA;QAE/DJ,wBAAqBN,QAAOT,wBAAe,KAAA,IAAA,KAAA,IAAAe,oBAAAI,IAAA;qBACzCT;;gBAEAjB;;;UAIFuB,QAAMI,qBAAAA,CAAAA,QAAmBX,CAAAA,MAAOT,KAAAA,EAAMoB;qBACpCV;;UAEAW,UAAAb,qBAAA,CAAAC,MAAA,CAAAT,MAAAqB,OAAA,EAAA;sBACAlB;YACFb,UAAAU,MAAAV,QAAA;QAEA;qBACEoB;;wBAEEY,qBAAW,CAAAb,MAAA,CAAAT,MAAAoB,WAAA,EAAA;sBACX;sBACF7B,SAAA,UAAA,WAAA,GAAAgC,OAAAC,aAAA,CAAAC,4BAAA,EAAA,QAAA,WAAA,GAAAF,OAAAC,aAAA,CAAAE,4BAAA,EAAA;;QAEFvB,aAAA;;UAGEE,WAAIZ,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,QAAAA,EAAAA;sBACJF;mBACAoC;uBACEC;+BACArB,MAAeF,EAAA;;qBAEfW,4BAAO;;kBAEPI;;;oBAIFQ;kBACArB;2BACAO;2BACAE;mBACAK;qBACAD;yBACAd;sBACAZ,4BAAAA;;;;;;QAMF2B;QAEAD;;QAEA1B;QAEAC;QACAkC"}
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { children, imageOnly, size = 'medium', dismissOnly = false } = props;\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\n\n  const mode = useCopilotMode(props.mode);\n  const designVersion = useDesignVersion(props.designVersion);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n      id: attachmentId,\n    }),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    defaultProps: { as: dismissOnly ? 'span' : undefined },\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Remove attachment' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n      onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n    },\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: size === 'small' ? <Dismiss12Regular /> : <Dismiss20Regular />,\n    },\n    elementType: 'span',\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  const state: AttachmentState = {\n    id: attachmentId,\n    size,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n      progress: ProgressBar,\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    progress,\n    imageOnly,\n    isLoading,\n    shouldUseOverflow,\n    mode,\n    designVersion,\n    dismissOnly,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["useAttachment_unstable","props","ref","children","imageOnly","size","dismissOnly","onAttachmentDismiss","shouldUseOverflow","useAttachmentListContext_unstable","context","attachmentId","useId","id","isLoading","progress","mode","useCopilotMode","designVersion","useDesignVersion","root","slot","always","getIntrinsicElementProps","elementType","primaryAction","defaultProps","as","undefined","dismissButton","onClick","mergeCallbacks","ev","content","media","optional","dismissIcon","React","createElement","Dismiss12Regular","Dismiss20Regular","shape","thickness","ProgressBar","state","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;iCAC4D;4BAChC;uCACD;+BAED;AAW1C,MAAMA,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAEC,cAAc,KAAK,EAAE,GAAGL;IACtE,MAAM,EAAEM,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,wDAAAA,EAAkCC,CAAAA,UAAWA;IAChG,MAAMC,eAAeC,IAAAA,sBAAAA,EAAM,eAAeX,MAAMY,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACb,MAAMc,QAAQ;IAElC,MAAMC,OAAOC,IAAAA,6BAAAA,EAAehB,MAAMe,IAAI;IACtC,MAAME,gBAAgBC,IAAAA,+BAAAA,EAAiBlB,MAAMiB,aAAa;IAE1D,MAAME,OAAOC,qBAAAA,CAAKC,MAAM,CACtBC,IAAAA,yCAAAA,EAAyB,OAAO;QAC9BrB;QACA,GAAGD,KAAK;QACRY,IAAIF;IACN,IACA;QAAEa,aAAa;IAAM;IAGvB,MAAMC,gBAAgBJ,qBAAAA,CAAKC,MAAM,CAACrB,MAAMwB,aAAa,EAAE;QACrDC,cAAc;YAAEC,IAAIrB,cAAc,SAASsB;QAAU;QACrDJ,aAAa;IACf;IAEA,MAAMK,gBAAgBR,qBAAAA,CAAKC,MAAM,CAACrB,MAAM4B,aAAa,EAAE;QACrDH,cAAc;YAAE,cAAc;QAAoB;QAClDF,aAAa;IACf;IAEAK,cAAcC,OAAO,GAAGC,IAAAA,+BAAAA,EACtBF,cAAcC,OAAO,EACrB,CAACE;QACCzB,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAsByB,IAAI;YAAEC,SAAS9B;YAAU+B;YAAOrB,IAAIF;QAAa;IACzE;IAGF,MAAMuB,QAAQb,qBAAAA,CAAKc,QAAQ,CAAClC,MAAMiC,KAAK,EAAE;QAAEV,aAAa;IAAO;IAE/D,MAAMS,UAAUZ,qBAAAA,CAAKC,MAAM,CAACrB,MAAMgC,OAAO,EAAE;QACzCP,cAAc;YACZvB,UAAUF,MAAME,QAAQ;QAC1B;QACAqB,aAAa;IACf;IAEA,MAAMY,cAAcf,qBAAAA,CAAKC,MAAM,CAACrB,MAAMmC,WAAW,EAAE;QACjDV,cAAc;YACZvB,UAAUE,SAAS,UAAA,WAAA,GAAUgC,OAAAC,aAAA,CAACC,4BAAAA,EAAAA,QAAAA,WAAAA,GAAsBF,OAAAC,aAAA,CAACE,4BAAAA,EAAAA;QACvD;QACAhB,aAAa;IACf;IAEA,MAAMT,WAAWM,qBAAAA,CAAKc,QAAQ,CAAClC,MAAMc,QAAQ,EAAE;QAC7CW,cAAc;YACZe,OAAO;YACPC,WAAW;YACX,mBAAmBzC,MAAMY,EAAE;QAC7B;QACAW,aAAamB,4BAAAA;IACf;IAEA,MAAMC,QAAyB;QAC7B/B,IAAIF;QACJN;QACAwC,YAAY;YACVzB,MAAM;YACNK,eAAe;YACfI,eAAe;YACfK,OAAO;YACPD,SAAS;YACTG,aAAa;YACbrB,UAAU4B,4BAAAA;QACZ;QAEAvB;QACAK;QACAI;QACAK;QACAD;QACAG;QACArB;QACAX;QACAU;QACAN;QACAQ;QACAE;QACAZ;IACF;IAEA,IAAIsC,MAAMnB,aAAa,CAACE,EAAE,KAAK,QAAQ;QACrCiB,MAAMC,UAAU,CAACpB,aAAa,GAAG;IACnC;IAEA,OAAOmB;AACT"}

package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js

@@ -51,15 +51,16 @@ const buttonBaseStyles = {
     justifyContent: 'center',
     ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
         outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorStrokeFocus2}`,
+        outlineOffset: `calc(${_tokens.tokens.strokeWidthThick} * -1)`,
         zIndex: 1
     }),
     verticalAlign: 'middle'
 };
-const usePrimaryActionBaseClassName = (0, _reactcomponents.__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 = (0, _reactcomponents.__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 = (0, _reactcomponents.__styles)({
     button: {
@@ -96,20 +97,20 @@ const usePrimaryActionStyles = (0, _reactcomponents.__styles)({
         ]
     ]
 });
-const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r1v8xxbh", "ruebrp4", {
+const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r10lynrk", "r2f20ug", {
     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);}"
+        ".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){.r1v8xxbh:hover{background-color:HighlightText;}.r1v8xxbh:active{background-color:HighlightText;}}",
-        "@media (forced-colors: active){.ruebrp4:hover{background-color:HighlightText;}.ruebrp4:active{background-color:HighlightText;}}"
+        "@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 = (0, _reactcomponents.__styles)({
@@ -422,14 +423,11 @@ const usePrimaryDismissNextStyles = (0, _reactcomponents.__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: [
@@ -446,14 +444,6 @@ const usePrimaryDismissNextStyles = (0, _reactcomponents.__styles)({
     ],
     a: [
         ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"
-    ],
-    i: [
-        [
-            ".f1c9fnza:focus-visible{border-radius:var(--borderRadiusLarge);}",
-            {
-                p: -1
-            }
-        ]
     ]
 });
 const useRootNextStyles = (0, _reactcomponents.__styles)({
@@ -484,6 +474,35 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
         ]
     ]
 });
+const useFocusStyles = (0, _reactcomponents.__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);}"
+    ]
+});
 const useAttachmentStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseClassName = useRootBaseClassName();
@@ -502,10 +521,11 @@ const useAttachmentStyles_unstable = (state)=>{
     const dismissButtonNextStyles = useDismissButtonNextStyles();
     const primaryDismissNextStyles = usePrimaryDismissNextStyles();
     const rootNextStyles = useRootNextStyles();
+    const focusStyles = useFocusStyles();
     const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
-    state.primaryAction.className = (0, _reactcomponents.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 = (0, _reactcomponents.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 = (0, _reactcomponents.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 = (0, _reactcomponents.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 = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
     }