@fluentui-copilot/react-attachments 0.12.1 → 0.12.3

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  assertSlots<AttachmentSlots>(state);\n  const { id, shouldUseOverflow } = state;\n\n  const attachment = (\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  return shouldUseOverflow ? (\n    <OverflowItem id={id} key={id}>\n      {attachment}\n    </OverflowItem>\n  ) : (\n    attachment\n  );\n};\n"],"names":["assertSlots","state","id","_jsxs","imageOnly","progress","media","_jsx","content","shouldUseOverflow","attachment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BATF;iCAE0C;AAOxCA,MAAAA,4BAA6BC,CAAAA;oCACrBC,EAAED;UAEV;uBAGOA,WAAW,GAAAE,IAAAA,gBAAKF,EAAAA,MAAMG,IAAAA,EAAS;;gDAChCH,MAACA,aAAa,EAAA;;0BACbA,KAAMI,IAAAA,CAAAA,MAAQD,SAAA,IAAI,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,MAAQC,KAAA,EAAA,CAAA;oBAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAN,MAAAO,OAAA,EAAA,CAAA;oBAAAP,MAAAI,QAAA,IAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAN,MAAAI,QAAA,EAAA,CAAA;iBAAA;;;;;;;;;;OAOxCH,MAAOO;+CAEFC"}
+{"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"}

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

@@ -15,7 +15,7 @@ const _reacticons = require("@fluentui/react-icons");
 const _attachmentListContext = require("../../contexts/attachmentListContext");
 const _reactprovider = require("@fluentui-copilot/react-provider");
 const useAttachment_unstable = (props, ref)=>{
-    const { children, imageOnly, size = 'medium' } = props;
+    const { children, imageOnly, size = 'medium', dismissOnly = false } = props;
     const { onAttachmentDismiss, shouldUseOverflow } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
     const attachmentId = (0, _reactcomponents.useId)('attachment-', props.id);
     const isLoading = !!props.progress;
@@ -29,6 +29,9 @@ const useAttachment_unstable = (props, ref)=>{
         elementType: 'div'
     });
     const primaryAction = _reactcomponents.slot.always(props.primaryAction, {
+        defaultProps: {
+            as: dismissOnly ? 'span' : undefined
+        },
         elementType: 'button'
     });
     const dismissButton = _reactcomponents.slot.always(props.dismissButton, {
@@ -90,7 +93,8 @@ const useAttachment_unstable = (props, ref)=>{
         isLoading,
         shouldUseOverflow,
         mode,
-        designVersion
+        designVersion,
+        dismissOnly
     };
     if (state.primaryAction.as === 'span') {
         state.components.primaryAction = 'span';

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' } = 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    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  };\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","props","useId","id","elementType","progress","designVersion","primaryAction","getIntrinsicElementProps","dismissButton","defaultProps","slot","always","media","mergeCallbacks","onClick","ev","onAttachmentDismiss","content","optional","dismissIcon","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,KACbC;UAEA,qBAEIN,mBACQ,iEACJC,EAAAA,CAAAA,UAAAA;UAENA,eAAAM,IAAAA,sBAAA,EAAA,eAAAD,MAAAE,EAAA;UAAEC,YAAAA,CAAa,CAAAH,MAAAI,QAAA;UAAMN,OAAAC,IAAAA,6BAAA,EAAAC,MAAAF,IAAA;UAGvBO,gBAAMC,IAAAA,+BAA4BN,EAAAA,MAAMM,aAAe;UACrDH,OAAAA,qBAAAA,CAAAA,MAAa,CAAAI,IAAAA,yCAAA,EAAA,OAAA;QACfb;QAEA,GAAAM,KAAMQ;YACJC;;qBAAkD;;UAEpDH,gBAAAI,qBAAA,CAAAC,MAAA,CAAAX,MAAAM,aAAA,EAAA;QAEAE,aAAAA;;0BAGyChB,qBAAAA,CAAAA,MAAAA,CAAAA,MAAAA,aAAAA,EAAAA;sBAAUoB;0BAAWjB;;QAC5DQ,aAAA;;kBAGyCA,OAAa,GAAAU,IAAAA,+BAAA,EAAAL,cAAAM,OAAA,EAAAC,CAAAA;QAAOC,wBAAA,QAAAA,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAD,IAAA;YAE/DE,SAAMA;;;;;UAKNL,QAAAF,qBAAA,CAAAQ,QAAA,CAAAlB,MAAAY,KAAA,EAAA;QAEAT,aAAMgB;;oBAEF3B,qBAAUC,CAAAA,MAAAA,CAAAA,MAASwB,OAAA,EAAA;sBACrB;sBACAd,MAAaX,QAAA;QACf;QAEAW,aAAMC;;wBAEKM,qBAAA,CAAAC,MAAA,CAAAX,MAAAmB,WAAA,EAAA;sBACPC;sBACA3B,SAAA,UAAmBO,WAAQ,GAAAqB,OAAAC,aAAA,CAAAC,4BAAA,EAAA,QAAA,WAAA,GAAAF,OAAAC,aAAA,CAAAE,4BAAA,EAAA;;qBAE7BrB;;UAGFC,WAA+BM,qBAAA,CAAAQ,QAAA,CAAAlB,MAAAI,QAAA,EAAA;sBACzBT;mBACJF;uBACAgC;+BACQzB,MAAAE,EAAA;;qBAENM,4BAAe;;kBAEfS;;;oBAGF;kBAEAS;2BACApB;2BACAE;mBACAI;qBACAK;yBACAE;sBACAf,4BAAAA;;;;;;QAMFa;QAEAE;;QAEAvB;QAEAC;QACA8B"}
+{"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"}

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

@@ -317,6 +317,18 @@ const useDismissButtonNextStyles = (0, _reactcomponents.__styles)({
         B0ocmuz: "f19d5dog",
         sshi5w: "f1nxs5xn",
         a9b677: "f1szoe96"
+    },
+    dismissOnly: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1kijzfu",
+        a9b677: "fkyq1ak",
+        zhjwy3: [
+            "fjscplz",
+            "f1gn591s"
+        ]
     }
 }, {
     d: [
@@ -345,7 +357,16 @@ const useDismissButtonNextStyles = (0, _reactcomponents.__styles)({
             }
         ],
         ".f1nxs5xn{min-height:32px;}",
-        ".f1szoe96{width:32px;}"
+        ".f1szoe96{width:32px;}",
+        [
+            ".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
+            {
+                p: -1
+            }
+        ],
+        ".fkyq1ak{width:unset;}",
+        ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
+        ".f1gn591s{border-right-color:var(--colorTransparentStroke);}"
     ],
     h: [
         ".f3p8bqa:hover{color:var(--colorNeutralForeground2);}",
@@ -455,10 +476,10 @@ const useAttachmentStyles_unstable = (state)=>{
     const dismissButtonNextStyles = useDismissButtonNextStyles();
     const primaryDismissNextStyles = usePrimaryDismissNextStyles();
     const rootNextStyles = useRootNextStyles();
-    const { imageOnly, primaryAction, size, mode, designVersion } = state;
+    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, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], state.dismissButton.className);
+    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly, state.dismissButton.className);
     if (state.media) {
         state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
     }

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

@@ -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    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  ':focus': {\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\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 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      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    ':focus': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderLeftWidth: tokens.strokeWidthThin,\n    borderLeftStyle: 'solid',\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});\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 mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\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 } = 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    size === 'small' && smallStyles.dismissButton,\n    designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n    designVersion === 'next' && dismissButtonNextStyles.root,\n    designVersion === 'next' && dismissButtonNextStyles[mode],\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    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":["attachmentClassNames","imageOnlyStyles","useImageOnlyStyles","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","colorNeutralForeground2BrandHover","uwmqm3","z189sj","a9b677","Byoj8tv","useMediaBaseClassName","fontSize","height","lineHeight","Be2twd7","useContentBaseClassName","overflowX","textOverflow","whiteSpace","d","useDismissIconBaseClassName","borderRadiusCircular","border","sshi5w","overflow","width","useSmallStyles","typographyStyles","B25qdkm","spacingVerticalXXS","canvas","minHeight","p","useDismissButtonNextStyles","borderLeftWidth","borderLeftStyle","g2u3we","Jwef8y","sidecar","iqhfy","B7b6voy","borderRadiusLarge","Bw0xxkn","oeaueh","Bpd4iqm","useRootNextStyles","Btl43ni","B7oj6ja","Dimara","rootBaseClassName","dismissButtonNextStyles","primaryActionBaseClassName","usePrimaryDismissNextStyles","dismissButtonBaseClassName","mediaBaseClassName","state","mergeClasses","className","smallStyles","elementType","renderByDefault","designVersion","rootNextStyles","progressBarStyles","regularProgressBar","bar","size","as","isLoading","primaryActionStyles","imageOnly","primaryDismissNextStyles","sharedStyles","primaryActionNextStyles","mode","dismissIconBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAaaA,oBAAAA;eAAAA;;IAsRLC,4BAAkBC;eAAlBD;;IApMNE,iBAAwBC;eAAxBD;;;iCAzFgB;wBAEK;4CACc;AAI9B,MAAMH,uBAAwD;UACnEK;mBACAC;mBACAC;WACAC;aACAC;iBACAC;cACAC;AACF;AAEA,MAAMC,sBAAsB;AAC5B,MAAMC,wBAAwB;AAC9B,MAAMC,kBAAkB;AAExB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,mBAAS;gBACC;qBACKC,cAAA,CAAAC,qBAAA;YACfC,CAAAA,EAAAA,cAAW,CAAAC,eAAA,CAAA,OAAA,EAAAH,cAAA,CAAAd,mBAAA,CAAA,CAAA;kBACJc,cAAA,CAAAI,kBAAA;eACPC;eACAC,cAAU,CAAAC,uBAAA;IACZC,OAAAR,cAAA,CAAAS,uBAAA;IAEAC,QAAMC;aACJC;cACAC;oBACWb;OACXc,IAAAA,gDAAqBV,EAAAA;QACrBF,SAAAA,CAAAA,EAAWF,cAAA,CAAAe,gBAAA,CAAA,OAAA,EAAAf,cAAA,CAAAgB,iBAAA,CAAA,CAAA;QACXC,QAAAA;MACAT;mBACQ;;MAERU,gCAAUC,IAAAA,8BAAA,EAAA,WAAA,WAAA;IAAA;IAAA;IAAA;IAAA;CAAA;MACVC,yBAAgBC,IAAAA,yBAAA,EAAA;YACbC;gBACDC;gBACAC;QACFC,SAAE;QACFC,QAAAA;QACFC,QAAA;QAEAC,SAAMC;QACJC,QAAGnB;;;OAGHoB;QAAAA;QAAkB;QAAA;KAAA;OAClBC;QAAAA;QAAuE7B;KAAiE8B;OACxIC;QAAAA;YAAAA;YAA4EC;gBAC9EC,GAAA;YAEA;SAAA;QAAMC;YAAAA;YAAoC;gBACxCC,GAAAA;;;;;sCAG4BC,IAAAA,8BAAAA,EAAAA,YAA0B,YAAA;;;QACR;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;;;QAC5C;KAAA;;8BAEmBvC,IAAAA,8BAAOwC,EAAAA,YAAAA,MAAAA;IAAAA;CAA4B;gCACtCC,IAAAA,8BAAAA,EAAAA,WAA8B,MAAA;IAAA;CAAA;oCAC9CtB,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;2BACAE,IAAAA,yBAAA,EAAA;mBACE;;gBAEA;gBACA;;iBAEA;;aAEJ;QACFqB,SAAA;IAEA;;OAGER;QAAAA;YAAAA;YAAmBC;gBACnBH,GAAAA,CAAAA;;SACAW;QAAAA;KAAkB/C;;AAGlBX,MAAAA,oBAAwBC,IAAAA,yBAAAA,EAAAA;cACxB0D;QACAC,SAAAA;QAEAC,QAAAA;;;;;QAIU;KAAA;;uBAEMC,IAAAA,yBAAAA,EAAAA;mBACPjE;iBACL0B;iBACF;QACFwC,QAAA;QACAC,QAAA;gBACEpC;iBACAL;;WAEF;iBACO;iBACHA;iBACF;QACF0C,QAAA;;aAEE;iBACErC;iBACF;iBACA;iBACEA;;mBAEJ;QACFsC,SAAA;QAEAH,QAAMI;QACJxC,QAAAA;QACAb,QAAAA;QACAsD,SAAAA;QACAC,SAAQ1D;QACR2D,SAAAA;;IAEF/D,aAAA;QAEAgE,SAAMC;QACJC,SAAAA;QACAC,SAAAA;QACAC,SAAAA;;AAEF,GAAA;IAEAC,GAAA;QAAMC;QAA8C;YAAA;YAAA;gBAClDlD,GAAAA,CAAAA;;SACAE;QAAAA;QAAqBiD;QAAoB;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBACzCC,GAAAA,CAAAA;;SACA9D;QAAAA;QAAW;QAAA;QAAA;QAAA;KAAA;;MAEXH,6BAASsB,IAAAA,yBAAA,EAAA;UACTgC;QACAC,SAAS;YAAA;YAAO1D;SAAgB;QAChCwB,SAAAA;YAAAA;YAAgB;SAAA;;YAEhBuB;QACAT,SAAS;QACXc,QAAA;QAEAC,QAAMjE;QACJI,QAAAA;iBACE8C;QACF+B,QAAA;;aAEEV;QACFJ,SAAA;QACFH,QAAA;QAEAC,QAAO;QACLiB,QAAAA;iBACElC;gBACAmC;;AAEJ,GAAG;IAEHN,GAAA;QAAMO;QAA4B;QAAA;QAAA;QAAA;YAAA;YAAA;gBAChChF,GAAAA,CAAAA;;;;QACoBM;YAAAA;YAAoFM;oBACtGkC;;SACF;QAAA;KAAA;;mCAEYvC,IAAAA,yBAAAA,EAAAA;UACV2D;iBACAC;YAAAA;YAAY5D;SAAAA;iBACZwE;YAAAA;YAAOxE;SAAAA;QACT8B,SAAA;QACAlC,SAAS;gBACJ8E;QACLC,SAAA;QACAjF,QAAAA;YAAAA;YAAe;SAAA;gBACb6C;YAAAA;YAAYlC;SAAOuE;gBACnBvC;YAAAA;YAAgB;SAAErC;;YAEpB;QACAH,SAAAA;gBACE6D;gBACAC;gBACAtB;iBACAW;QACFsB,QAAA;QACFf,QAAA;IAEA;aACQ;iBACJN;gBACAC;QACFI,QAAA;QACAuB,QAAQ;iBACNtC;gBACAuC;QACFvB,QAAA;;;;;QAIa;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBACbwB,GAAA,CAAA;YACF;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAEAA,GAAMC,CAAAA;;SACJxF;QAAAA;QAAM;KAAA;;;QAC2C;KAAA;;;KACG;;;KACxC;;oCAEDL,IAAAA,yBAAqBU,EAAAA;kBAC1BgB;iBACF;iBACF;gBACA;iBACEA;iBACF;gBACA;gBACE;;gBAEA;gBACF;gBAEAvB;iBACA2F;gBACAC;QACFC,QAAA;QACAN,QAAQ;iBACNtC;gBACAuC;gBACAN;QACFY,QAAA;QACAC,QAAAA;iBACE9C;gBACAuC;gBACAN;QACFc,OAAA;QACFC,SAAA;IAEA;;;;;YAEY;oBACRrE;;;;KACU;;;KAC4C;;;KACtD;;;;YACW;;;;;;0BAIKb,IAAAA,yBAAOmF,EAAAA;UACvB;QACFC,SAAA;QACFC,QAAA;QAEAC,SAAMC;QACJpG,SAAM;iBACJoC;iBACAT;QACF0E,SAAA;QACFC,SAAA;QAEAC,QAAA;;GAEC;OAEC;QAAA;YAAA;YAAA;gBAEAhB,GAAA,CAAA;;SACA;QAAA;YAAA;YAAmC7C;gBACnC6C,GAAA,CAAA;;SACA;KAAA;;AAKA,MAAM3F,+BAAkBC,CAAAA;;UAGxB2G,oBAAMC;UACNC,6BAAiCC;UACjCC,6BAAuBR;UACvBS,qBAAmB5G;UAEnB6G,uBAAuBC;UAMvBD,2BAA6BnC;UAW7BmC,oBAAoBE,IAAAA,gDAAYD;UAS5BD,sBAAa5D;UACf4D,kBAAYE;UAMdC,cAAAhC;UACA6B,0BAA0BC;UAO1BD,0BAA8BC;UAO1BD,2BAAgBH;UAClBG,iBAAeE;UAMf,WAAgDE,eAAoBC,MAAsB,MAC1F,eACML;cAEJ,CAAAE,SAAO,GAAAD,IAAAA,6BAAA,EAAApH,qBAAAK,IAAA,EAAAwG,mBAAAY,kBAAA,UAAAC,eAAArH,IAAA,EAAA8G,MAAA9G,IAAA,CAAAgH,SAAA;uBACDA,CAAAA,SAAS,GAAGD,IAAAA,6BAAaO,EAAAA,qBAAkBC,aAAkB,EAAEC,4BAAaC,SAAA,WAAAR,YAAAhH,aAAA,EAAAA,cAAAyH,EAAA,KAAA,UAAA,CAAAZ,MAAAa,SAAA,IAAAC,oBAAAzE,MAAA,EAAA0E,aAAAjI,gBAAAK,aAAA,EAAAmH,kBAAA,UAAAU,yBAAAC,YAAA,EAAAX,kBAAA,UAAAY,wBAAAhI,IAAA,EAAAoH,kBAAA,UAAAY,uBAAA,CAAAC,KAAA,EAAAnB,MAAA7G,aAAA,CAAA+G,SAAA;uBAClF,CAAAA,SAAA,GAAAD,IAAAA,6BAAA,EAAApH,qBAAAO,aAAA,EAAA0G,4BAAAa,SAAA,WAAAR,YAAA/G,aAAA,EAAAkH,kBAAA,UAAAU,yBAAAC,YAAA,EAAAX,kBAAA,UAAAX,wBAAAzG,IAAA,EAAAoH,kBAAA,UAAAX,uBAAA,CAAAwB,KAAA,EAAAnB,MAAA5G,aAAA,CAAA8G,SAAA;cACAF,KAAAA,EAAMxG;cACRH,KAAA,CAAA6G,SAAA,GAAAD,IAAAA,6BAAA,EAAApH,qBAAAQ,KAAA,EAAA0G,oBAAAY,SAAA,WAAAR,YAAA9G,KAAA,EAAA2G,MAAA3G,KAAA,CAAA6G,SAAA;;UAGF5G,OAAO0G,CAAAA,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,qBAAAA,OAAAA,EAAAA,sBAAAA,SAAAA,WAAAA,YAAAA,OAAAA,EAAAA,aAAAA,gBAAAA,OAAAA,EAAAA,MAAAA,OAAAA,CAAAA,SAAAA;IACPA,MAAAzG,WAAA,CAAA2G,SAAA,GAAAD,IAAAA,6BAAA,EAAApH,qBAAAU,WAAA,EAAA6H,0BAAAT,SAAA,WAAAR,YAAA5G,WAAA,EAAAyG,MAAAzG,WAAA,CAAA2G,SAAA"}
+{"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    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  ':focus': {\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\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 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      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    ':focus': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderLeftWidth: tokens.strokeWidthThin,\n    borderLeftStyle: 'solid',\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  },\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 mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\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    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    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    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":["attachmentClassNames","imageOnly","size","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","colorNeutralForeground2BrandHover","uwmqm3","z189sj","a9b677","Byoj8tv","useMediaBaseClassName","fontSize","height","lineHeight","Be2twd7","useContentBaseClassName","overflowX","textOverflow","whiteSpace","d","useDismissIconBaseClassName","borderRadiusCircular","border","useImageOnlyStyles","sshi5w","overflow","width","useSmallStyles","typographyStyles","B25qdkm","spacingVerticalXXS","canvas","minHeight","Bbmb7ep","Btl43ni","B7oj6ja","useDismissButtonNextStyles","borderBottomRightRadius","borderLeftWidth","borderLeftStyle","oivjwe","ibv6hh","sidecar","i8vvqc","dismissOnly","De3pzq","Jwef8y","ecr2s2","usePrimaryDismissNextStyles","sharedStyles","p","Bw0xxkn","oeaueh","Bpd4iqm","Beyfa6y","rootBaseClassName","primaryActionBaseClassName","Dimara","dismissButtonBaseClassName","mode","state","className","mergeClasses","mediaBaseClassName","useProgressBarStyles","imageOnlyStyles","optional","elementType","usePrimaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","bar","designVersion","rootNextStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/AttachmentList/useAttachmentList.js

@@ -73,9 +73,13 @@ const useAttachmentList_unstable = (props, ref)=>{
     const attachmentOverflowMenuItems = _react.useMemo(()=>{
         if (resolvedChildren && Array.isArray(resolvedChildren)) {
             return resolvedChildren.filter((child)=>/*#__PURE__*/ _react.isValidElement(child)).map((child)=>child.props).map((attachment)=>{
+                const dismissButton = _reactcomponents.slot.optional(attachment.dismissButton, {
+                    elementType: 'button'
+                });
                 return /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuItem.AttachmentOverflowMenuItem, {
                     ...attachment,
-                    key: attachment.id
+                    key: attachment.id,
+                    onClick: dismissButton === null || dismissButton === void 0 ? void 0 : dismissButton.onClick
                 });
             });
         }

package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MenuList,\n  MenuPopover,\n  getIntrinsicElementProps,\n  slot,\n  useArrowNavigationGroup,\n  useEventCallback,\n  useFocusFinders,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n  props: AttachmentListProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n  const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const [setTimeout] = useTimeout();\n  const { targetDocument } = useFluent();\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n  const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n    if (!onAttachmentDismiss) {\n      return;\n    }\n\n    onAttachmentDismiss(e, data);\n\n    // set focus after attachment dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next attachment only if the active element is within the current attachment list\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        // focus on the overflow button if the next focusable element is the overflow button.\n        // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n        if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n          setTimeout(() => {\n            findLastFocusable(innerRef.current as HTMLElement)?.focus();\n          }, 0);\n        } else {\n          next.focus();\n        }\n      } else {\n        const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    } else {\n      // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n      setTimeout(() => {\n        findLastFocusable(innerRef.current as HTMLElement)?.focus();\n      }, 0);\n    }\n  });\n\n  const styles = useOverflowStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    children,\n    maxVisibleItems: maxVisibleAttachments,\n    overflowClassName: styles.overflow,\n  });\n\n  const attachmentOverflowMenuItems = React.useMemo(() => {\n    if (resolvedChildren && Array.isArray(resolvedChildren)) {\n      return resolvedChildren\n        .filter(child => React.isValidElement(child))\n        .map(child => (child as React.ReactElement).props)\n        .map(attachment => {\n          return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n        });\n    }\n    return [];\n  }, [resolvedChildren]);\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n  return {\n    designVersion,\n    onAttachmentDismiss: handleAttachmentDismiss,\n    shouldUseOverflow,\n    overflowMenuProps,\n    components: {\n      root: 'div',\n      menuList: MenuList,\n      menuPopover: MenuPopover,\n      overflowMenuButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        'aria-label': 'Attachments',\n        ref: useMergedRefs(ref, innerRef),\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    menuList: slot.optional(props.menuList, {\n      defaultProps: { children: attachmentOverflowMenuItems },\n      elementType: MenuList,\n      renderByDefault: true,\n    }),\n    menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n    overflowMenuButton: slot.optional(props.overflowMenuButton, {\n      defaultProps: { children: <AttachmentOverflowMenuButton /> },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n  };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","designVersion","overflowMenuProps","findNextFocusable","innerRef","useDesignVersion","next","container","useEventCallback","e","data","findLastFocusable","current","_innerRef_current","contains","activeElement","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","attachmentOverflowMenuItems","resolvedChildren","child","React","isValidElement","attachment","useOverflowMaxVisibleItems","overflow","useMemo","arrowNavigationProps","useArrowNavigationGroup","circular","filter","map","axis","createElement","AttachmentOverflowMenuItem","memorizeCurrent","key","id","shouldUseOverflow","components","menuList","overflowMenuButton","undefined","handleAttachmentDismiss","MenuPopover","slot","defaultProps","MenuList","renderByDefault","menuPopover","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkCUA;;;eAAAA;;;;iEAlCa;iCAUhB;qCACyC;gCACrB;iCACgB;4BACT;8CACW;6DACU;4CACZ;+BAEV;AAe/B,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,EAERF,mBAAMG,EACNC,iBAAQC,KACRN;qBASMO,OAAAA,MAAAA,CAAAA;UARJ,CAAAL,WAAKD,GAAAA,IAAAA,0BAAAA;0BAEL,gDAEAA;UAEAG,gBAAAI,IAAAA,+BAAA,EAAAR,MAAqCI,aAAA;UACrC,mBACIG,mBACF,mBACME,yCAAyDC;oCAA4BC,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;4BAGEX,GAAAA;6CACEY;8BAAAA,mBAAAA,QAAAA,mBAAkBP,KAASQ,IAAO,KAAA,IAAAZ,eAAlCW,aAAAA;iCACCP,SAAAQ,OAAA,MAAA,QAAAC,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,CAAAC,gBAAA;wGACE;2CACKA,eAAA;2BACZX,SAAAQ,OAAA;;sBAEA;qGAAyG;0HAAC;yBAC1GI,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,qBAAAP,kBAAAP,SAAAQ,OAAA,CAAA,MAAA,QAAAM,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;8BACEY;;mBAEJ;gBACF,MAAAK,OAAAI,kBAAAL,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAM,aAAA,EAAA;oBAEMC,WAASC,SAAAA,OAAAA;gBACf;gBACE5B,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAAA,KAAAA;;eAEA6B;YACF,+IAAA;YAEAzB,WAAM0B;gBACJ,IAAIC;sCACKA,kBACGC,SAAAA,OAAAA,CAAAA,MAASC,QAAMC,uBAClBF,KAAAA,IAAUA,KAA6B9B,IAAKqB,mBAC5CY,KAAAA;;;;;6BAELC,IAAAA,2CAAA,EAAA;;yBAEKnC;QACX4B,mBAAGF,OAAAU,QAAA;;UAAkBP,8BAAAG,OAAAK,OAAA,CAAA;QAErB,IAAAP,oBAAMQ,MAAuBC,OAAAA,CAAAA,mBAAwB;mBACnDC,iBAAUC,MAAA,CAAAV,CAAAA,QAAA,WAAA,GAAAC,OAAAC,cAAA,CAAAF,QAAAW,GAAA,CAAAX,CAAAA,QAAAA,MAAA9B,KAAA,EAAAyC,GAAA,CAAAR,CAAAA;gBACVS,OAAM,WAAA,GAAAX,OAAAY,aAAA,CAAAC,sDAAA,EAAA;oBACNC,GAAAA,UAAAA;oBACFC,KAAAb,WAAAc,EAAA;gBAEA;YAEA;;eAEE9C,EAAAA;;;KACA+C;UACA3C,uBAAAA,IAAAA,wCAAAA,EAAAA;kBACA4C;;yBAEEC;;8BAEAC,0BAAoBC;WACtB;;6BAGIC;;;oBAGGhB;kBACH;sBACAvC,yBAAU+B;yBAEZyB,4BAAA;gCAAe;;cAEjBJ,qBAAAA,CAAAA,MAAUK,CAAAA,IAAAA,yCAA4B,EAAA,OAAE;0BACtCC;mDAAgB1D,EAAAA,KAAU8B;kBAA4B;mCACzC6B;oBACbC;sBACF7B;YACA8B;yBAAgDC;;kBAAgDL,qBAAA,CAAAM,QAAA,CAAA7D,MAAAkD,QAAA,EAAA;0BAChGC;0BACEK;;yBAA2DC,yBAAA;6BAC3DG;;qBAEFL,qBAAA,CAAAM,QAAA,CAAA7D,MAAA2D,WAAA,EAAA;YACFC,aAAAN,4BAAA;YACAI,iBAAA"}
+{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MenuList,\n  MenuPopover,\n  getIntrinsicElementProps,\n  slot,\n  useArrowNavigationGroup,\n  useEventCallback,\n  useFocusFinders,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment/Attachment.types';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n  props: AttachmentListProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n  const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const [setTimeout] = useTimeout();\n  const { targetDocument } = useFluent();\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n  const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n    if (!onAttachmentDismiss) {\n      return;\n    }\n\n    onAttachmentDismiss(e, data);\n\n    // set focus after attachment dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next attachment only if the active element is within the current attachment list\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        // focus on the overflow button if the next focusable element is the overflow button.\n        // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n        if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n          setTimeout(() => {\n            findLastFocusable(innerRef.current as HTMLElement)?.focus();\n          }, 0);\n        } else {\n          next.focus();\n        }\n      } else {\n        const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    } else {\n      // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n      setTimeout(() => {\n        findLastFocusable(innerRef.current as HTMLElement)?.focus();\n      }, 0);\n    }\n  });\n\n  const styles = useOverflowStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    children,\n    maxVisibleItems: maxVisibleAttachments,\n    overflowClassName: styles.overflow,\n  });\n\n  const attachmentOverflowMenuItems = React.useMemo(() => {\n    if (resolvedChildren && Array.isArray(resolvedChildren)) {\n      return resolvedChildren\n        .filter(child => React.isValidElement(child))\n        .map(child => (child as React.ReactElement).props)\n        .map((attachment: AttachmentProps) => {\n          const dismissButton = slot.optional(attachment.dismissButton, { elementType: 'button' });\n          return (\n            <AttachmentOverflowMenuItem\n              {...attachment}\n              key={attachment.id}\n              onClick={dismissButton?.onClick as AttachmentProps['onClick']}\n            />\n          );\n        });\n    }\n    return [];\n  }, [resolvedChildren]);\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n  return {\n    designVersion,\n    onAttachmentDismiss: handleAttachmentDismiss,\n    shouldUseOverflow,\n    overflowMenuProps,\n    components: {\n      root: 'div',\n      menuList: MenuList,\n      menuPopover: MenuPopover,\n      overflowMenuButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        'aria-label': 'Attachments',\n        ref: useMergedRefs(ref, innerRef),\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    menuList: slot.optional(props.menuList, {\n      defaultProps: { children: attachmentOverflowMenuItems },\n      elementType: MenuList,\n      renderByDefault: true,\n    }),\n    menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n    overflowMenuButton: slot.optional(props.overflowMenuButton, {\n      defaultProps: { children: <AttachmentOverflowMenuButton /> },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n  };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","designVersion","overflowMenuProps","findNextFocusable","innerRef","useDesignVersion","next","container","useEventCallback","e","data","findLastFocusable","current","_innerRef_current","contains","activeElement","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","attachmentOverflowMenuItems","resolvedChildren","child","React","isValidElement","attachment","onClick","useMemo","Array","isArray","filter","map","elementType","circular","createElement","AttachmentOverflowMenuItem","axis","memorizeCurrent","id","dismissButton","shouldUseOverflow","components","menuList","overflowMenuButton","undefined","handleAttachmentDismiss","arrowNavigationProps","MenuPopover","slot","defaultProps","MenuList","renderByDefault","menuPopover","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/index.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    AgentTag: function() {
+        return _AgentTag.AgentTag;
+    },
     Attachment: function() {
         return _Attachment.Attachment;
     },
@@ -45,6 +48,9 @@ _export(exports, {
     AttachmentTagList: function() {
         return _AttachmentTagList.AttachmentTagList;
     },
+    agentTagClassNames: function() {
+        return _AgentTag.agentTagClassNames;
+    },
     attachmentClassNames: function() {
         return _Attachment.attachmentClassNames;
     },
@@ -66,6 +72,9 @@ _export(exports, {
     attachmentTagListClassNames: function() {
         return _AttachmentTagList.attachmentTagListClassNames;
     },
+    renderAgentTag_unstable: function() {
+        return _AgentTag.renderAgentTag_unstable;
+    },
     renderAttachmentList_unstable: function() {
         return _AttachmentList.renderAttachmentList_unstable;
     },
@@ -90,6 +99,12 @@ _export(exports, {
     renderAttachment_unstable: function() {
         return _Attachment.renderAttachment_unstable;
     },
+    useAgentTagStyles_unstable: function() {
+        return _AgentTag.useAgentTagStyles_unstable;
+    },
+    useAgentTag_unstable: function() {
+        return _AgentTag.useAgentTag_unstable;
+    },
     useAttachmentListContext_unstable: function() {
         return _attachmentListContext.useAttachmentListContext_unstable;
     },
@@ -152,4 +167,5 @@ const _AttachmentOverflowMenu = require("./AttachmentOverflowMenu");
 const _attachmentOverflowMenuContext = require("./contexts/attachmentOverflowMenuContext");
 const _AttachmentOverflowMenuButton = require("./AttachmentOverflowMenuButton");
 const _AttachmentOverflowMenuItem = require("./AttachmentOverflowMenuItem");
+const _AgentTag = require("./AgentTag");
  //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { AttachmentTagProps, AttachmentTagSlots, AttachmentTagState } from './AttachmentTag';\nexport {\n  AttachmentTag,\n  attachmentTagClassNames,\n  renderAttachmentTag_unstable,\n  useAttachmentTagStyles_unstable,\n  useAttachmentTag_unstable,\n} from './AttachmentTag';\nexport type {\n  AttachmentTagDismissedData,\n  AttachmentTagListProps,\n  AttachmentTagListSlots,\n  AttachmentTagListState,\n} from './AttachmentTagList';\nexport {\n  AttachmentTagList,\n  attachmentTagListClassNames,\n  renderAttachmentTagList_unstable,\n  useAttachmentTagListStyles_unstable,\n  useAttachmentTagList_unstable,\n} from './AttachmentTagList';\n\nexport type { AttachmentTagItemProps, AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem';\nexport {\n  AttachmentTagItem,\n  attachmentTagItemClassNames,\n  renderAttachmentTagItem_unstable,\n  useAttachmentTagItemStyles_unstable,\n  useAttachmentTagItem_unstable,\n} from './AttachmentTagItem';\n\nexport type {\n  AttachmentListProps,\n  AttachmentListSlots,\n  AttachmentListState,\n  AttachmentDismissedData,\n} from './AttachmentList';\nexport {\n  AttachmentList,\n  attachmentListClassNames,\n  renderAttachmentList_unstable,\n  useAttachmentListStyles_unstable,\n  useAttachmentList_unstable,\n} from './AttachmentList';\nexport type { AttachmentListContextValue } from './contexts/attachmentListContext';\nexport {\n  AttachmentListContext,\n  AttachmentListProvider,\n  useAttachmentListContext_unstable,\n} from './contexts/attachmentListContext';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment';\nexport {\n  Attachment,\n  attachmentClassNames,\n  renderAttachment_unstable,\n  useAttachmentStyles_unstable,\n  useAttachment_unstable,\n} from './Attachment';\n\nexport type {\n  AttachmentOverflowMenuProps,\n  AttachmentOverflowMenuSlots,\n  AttachmentOverflowMenuState,\n} from './AttachmentOverflowMenu';\nexport {\n  AttachmentOverflowMenu,\n  renderAttachmentOverflowMenu_unstable,\n  useAttachmentOverflowMenu_unstable,\n} from './AttachmentOverflowMenu';\n\nexport type { AttachmentOverflowMenuContextValue } from './contexts/attachmentOverflowMenuContext';\nexport {\n  AttachmentOverflowMenuContext,\n  AttachmentOverflowMenuProvider,\n  useAttachmentOverflowMenuContext_unstable,\n} from './contexts/attachmentOverflowMenuContext';\n\nexport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton';\nexport {\n  AttachmentOverflowMenuButton,\n  attachmentOverflowMenuButtonClassNames,\n  renderAttachmentOverflowMenuButton_unstable,\n  useAttachmentOverflowMenuButtonStyles_unstable,\n  useAttachmentOverflowMenuButton_unstable,\n} from './AttachmentOverflowMenuButton';\n\nexport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem';\nexport {\n  AttachmentOverflowMenuItem,\n  attachmentOverflowMenuItemClassNames,\n  renderAttachmentOverflowMenuItem_unstable,\n  useAttachmentOverflowMenuItemStyles_unstable,\n  useAttachmentOverflowMenuItem_unstable,\n} from './AttachmentOverflowMenuItem';\n"],"names":["Attachment","AttachmentList","AttachmentListContext","AttachmentListProvider","AttachmentOverflowMenu","AttachmentOverflowMenuButton","AttachmentOverflowMenuContext","AttachmentOverflowMenuItem","AttachmentOverflowMenuProvider","AttachmentTag","AttachmentTagItem","AttachmentTagList","attachmentClassNames","attachmentListClassNames","attachmentOverflowMenuButtonClassNames","attachmentOverflowMenuItemClassNames","attachmentTagClassNames","attachmentTagItemClassNames","attachmentTagListClassNames","renderAttachmentList_unstable","renderAttachmentOverflowMenuButton_unstable","renderAttachmentOverflowMenuItem_unstable","renderAttachmentOverflowMenu_unstable","renderAttachmentTagItem_unstable","renderAttachmentTagList_unstable","renderAttachmentTag_unstable","renderAttachment_unstable","useAttachmentListContext_unstable","useAttachmentListStyles_unstable","useAttachmentList_unstable","useAttachmentOverflowMenuButtonStyles_unstable","useAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuItemStyles_unstable","useAttachmentOverflowMenuItem_unstable","useAttachmentOverflowMenu_unstable","useAttachmentStyles_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","useAttachment_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoDEA,UAAU;eAAVA,sBAAU;;IAdVC,cAAc;eAAdA,8BAAc;;IAQdC,qBAAqB;eAArBA,4CAAqB;;IACrBC,sBAAsB;eAAtBA,6CAAsB;;IAkBtBC,sBAAsB;eAAtBA,8CAAsB;;IAkBtBC,4BAA4B;eAA5BA,0DAA4B;;IAX5BC,6BAA6B;eAA7BA,4DAA6B;;IAwB7BC,0BAA0B;eAA1BA,sDAA0B;;IAvB1BC,8BAA8B;eAA9BA,6DAA8B;;IAvE9BC,aAAa;eAAbA,4BAAa;;IAsBbC,iBAAiB;eAAjBA,oCAAiB;;IATjBC,iBAAiB;eAAjBA,oCAAiB;;IAsCjBC,oBAAoB;eAApBA,gCAAoB;;IAdpBC,wBAAwB;eAAxBA,wCAAwB;;IA6CxBC,sCAAsC;eAAtCA,oEAAsC;;IAatCC,oCAAoC;eAApCA,gEAAoC;;IA9FpCC,uBAAuB;eAAvBA,sCAAuB;;IAsBvBC,2BAA2B;eAA3BA,8CAA2B;;IAT3BC,2BAA2B;eAA3BA,8CAA2B;;IAwB3BC,6BAA6B;eAA7BA,6CAA6B;;IA6C7BC,2CAA2C;eAA3CA,yEAA2C;;IAa3CC,yCAAyC;eAAzCA,qEAAyC;;IAhCzCC,qCAAqC;eAArCA,6DAAqC;;IAxCrCC,gCAAgC;eAAhCA,mDAAgC;;IAThCC,gCAAgC;eAAhCA,mDAAgC;;IAbhCC,4BAA4B;eAA5BA,2CAA4B;;IAkD5BC,yBAAyB;eAAzBA,qCAAyB;;IANzBC,iCAAiC;eAAjCA,wDAAiC;;IAPjCC,gCAAgC;eAAhCA,gDAAgC;;IAChCC,0BAA0B;eAA1BA,0CAA0B;;IA4C1BC,8CAA8C;eAA9CA,4EAA8C;;IAC9CC,wCAAwC;eAAxCA,sEAAwC;;IAbxCC,yCAAyC;eAAzCA,wEAAyC;;IAyBzCC,4CAA4C;eAA5CA,wEAA4C;;IAC5CC,sCAAsC;eAAtCA,kEAAsC;;IAjCtCC,kCAAkC;eAAlCA,0DAAkC;;IAZlCC,4BAA4B;eAA5BA,wCAA4B;;IA5B5BC,mCAAmC;eAAnCA,sDAAmC;;IACnCC,6BAA6B;eAA7BA,gDAA6B;;IAV7BC,mCAAmC;eAAnCA,sDAAmC;;IACnCC,6BAA6B;eAA7BA,gDAA6B;;IAd7BC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAkDzBC,sBAAsB;eAAtBA,kCAAsB;;;+BAjDjB;mCAaA;mCASA;gCAcA;uCAMA;4BAQA;wCAWA;+CAOA;8CAaA;4CAaA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { AttachmentTagProps, AttachmentTagSlots, AttachmentTagState } from './AttachmentTag';\nexport {\n  AttachmentTag,\n  attachmentTagClassNames,\n  renderAttachmentTag_unstable,\n  useAttachmentTagStyles_unstable,\n  useAttachmentTag_unstable,\n} from './AttachmentTag';\nexport type {\n  AttachmentTagDismissedData,\n  AttachmentTagListProps,\n  AttachmentTagListSlots,\n  AttachmentTagListState,\n} from './AttachmentTagList';\nexport {\n  AttachmentTagList,\n  attachmentTagListClassNames,\n  renderAttachmentTagList_unstable,\n  useAttachmentTagListStyles_unstable,\n  useAttachmentTagList_unstable,\n} from './AttachmentTagList';\n\nexport type { AttachmentTagItemProps, AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem';\nexport {\n  AttachmentTagItem,\n  attachmentTagItemClassNames,\n  renderAttachmentTagItem_unstable,\n  useAttachmentTagItemStyles_unstable,\n  useAttachmentTagItem_unstable,\n} from './AttachmentTagItem';\n\nexport type {\n  AttachmentListProps,\n  AttachmentListSlots,\n  AttachmentListState,\n  AttachmentDismissedData,\n} from './AttachmentList';\nexport {\n  AttachmentList,\n  attachmentListClassNames,\n  renderAttachmentList_unstable,\n  useAttachmentListStyles_unstable,\n  useAttachmentList_unstable,\n} from './AttachmentList';\nexport type { AttachmentListContextValue } from './contexts/attachmentListContext';\nexport {\n  AttachmentListContext,\n  AttachmentListProvider,\n  useAttachmentListContext_unstable,\n} from './contexts/attachmentListContext';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment';\nexport {\n  Attachment,\n  attachmentClassNames,\n  renderAttachment_unstable,\n  useAttachmentStyles_unstable,\n  useAttachment_unstable,\n} from './Attachment';\n\nexport type {\n  AttachmentOverflowMenuProps,\n  AttachmentOverflowMenuSlots,\n  AttachmentOverflowMenuState,\n} from './AttachmentOverflowMenu';\nexport {\n  AttachmentOverflowMenu,\n  renderAttachmentOverflowMenu_unstable,\n  useAttachmentOverflowMenu_unstable,\n} from './AttachmentOverflowMenu';\n\nexport type { AttachmentOverflowMenuContextValue } from './contexts/attachmentOverflowMenuContext';\nexport {\n  AttachmentOverflowMenuContext,\n  AttachmentOverflowMenuProvider,\n  useAttachmentOverflowMenuContext_unstable,\n} from './contexts/attachmentOverflowMenuContext';\n\nexport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton';\nexport {\n  AttachmentOverflowMenuButton,\n  attachmentOverflowMenuButtonClassNames,\n  renderAttachmentOverflowMenuButton_unstable,\n  useAttachmentOverflowMenuButtonStyles_unstable,\n  useAttachmentOverflowMenuButton_unstable,\n} from './AttachmentOverflowMenuButton';\n\nexport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem';\nexport {\n  AttachmentOverflowMenuItem,\n  attachmentOverflowMenuItemClassNames,\n  renderAttachmentOverflowMenuItem_unstable,\n  useAttachmentOverflowMenuItemStyles_unstable,\n  useAttachmentOverflowMenuItem_unstable,\n} from './AttachmentOverflowMenuItem';\n\nexport {\n  AgentTag,\n  renderAgentTag_unstable,\n  useAgentTag_unstable,\n  agentTagClassNames,\n  useAgentTagStyles_unstable,\n} from './AgentTag';\nexport type { AgentTagProps, AgentTagSlots, AgentTagState } from './AgentTag';\n"],"names":["AgentTag","Attachment","AttachmentList","AttachmentListContext","AttachmentListProvider","AttachmentOverflowMenu","AttachmentOverflowMenuButton","AttachmentOverflowMenuContext","AttachmentOverflowMenuItem","AttachmentOverflowMenuProvider","AttachmentTag","AttachmentTagItem","AttachmentTagList","agentTagClassNames","attachmentClassNames","attachmentListClassNames","attachmentOverflowMenuButtonClassNames","attachmentOverflowMenuItemClassNames","attachmentTagClassNames","attachmentTagItemClassNames","attachmentTagListClassNames","renderAgentTag_unstable","renderAttachmentList_unstable","renderAttachmentOverflowMenuButton_unstable","renderAttachmentOverflowMenuItem_unstable","renderAttachmentOverflowMenu_unstable","renderAttachmentTagItem_unstable","renderAttachmentTagList_unstable","renderAttachmentTag_unstable","renderAttachment_unstable","useAgentTagStyles_unstable","useAgentTag_unstable","useAttachmentListContext_unstable","useAttachmentListStyles_unstable","useAttachmentList_unstable","useAttachmentOverflowMenuButtonStyles_unstable","useAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuItemStyles_unstable","useAttachmentOverflowMenuItem_unstable","useAttachmentOverflowMenu_unstable","useAttachmentStyles_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","useAttachment_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAwGEA,QAAQ;eAARA,kBAAQ;;IApDRC,UAAU;eAAVA,sBAAU;;IAdVC,cAAc;eAAdA,8BAAc;;IAQdC,qBAAqB;eAArBA,4CAAqB;;IACrBC,sBAAsB;eAAtBA,6CAAsB;;IAkBtBC,sBAAsB;eAAtBA,8CAAsB;;IAkBtBC,4BAA4B;eAA5BA,0DAA4B;;IAX5BC,6BAA6B;eAA7BA,4DAA6B;;IAwB7BC,0BAA0B;eAA1BA,sDAA0B;;IAvB1BC,8BAA8B;eAA9BA,6DAA8B;;IAvE9BC,aAAa;eAAbA,4BAAa;;IAsBbC,iBAAiB;eAAjBA,oCAAiB;;IATjBC,iBAAiB;eAAjBA,oCAAiB;;IA4FjBC,kBAAkB;eAAlBA,4BAAkB;;IAtDlBC,oBAAoB;eAApBA,gCAAoB;;IAdpBC,wBAAwB;eAAxBA,wCAAwB;;IA6CxBC,sCAAsC;eAAtCA,oEAAsC;;IAatCC,oCAAoC;eAApCA,gEAAoC;;IA9FpCC,uBAAuB;eAAvBA,sCAAuB;;IAsBvBC,2BAA2B;eAA3BA,8CAA2B;;IAT3BC,2BAA2B;eAA3BA,8CAA2B;;IAyF3BC,uBAAuB;eAAvBA,iCAAuB;;IAjEvBC,6BAA6B;eAA7BA,6CAA6B;;IA6C7BC,2CAA2C;eAA3CA,yEAA2C;;IAa3CC,yCAAyC;eAAzCA,qEAAyC;;IAhCzCC,qCAAqC;eAArCA,6DAAqC;;IAxCrCC,gCAAgC;eAAhCA,mDAAgC;;IAThCC,gCAAgC;eAAhCA,mDAAgC;;IAbhCC,4BAA4B;eAA5BA,2CAA4B;;IAkD5BC,yBAAyB;eAAzBA,qCAAyB;;IAsDzBC,0BAA0B;eAA1BA,oCAA0B;;IAF1BC,oBAAoB;eAApBA,8BAAoB;;IA1DpBC,iCAAiC;eAAjCA,wDAAiC;;IAPjCC,gCAAgC;eAAhCA,gDAAgC;;IAChCC,0BAA0B;eAA1BA,0CAA0B;;IA4C1BC,8CAA8C;eAA9CA,4EAA8C;;IAC9CC,wCAAwC;eAAxCA,sEAAwC;;IAbxCC,yCAAyC;eAAzCA,wEAAyC;;IAyBzCC,4CAA4C;eAA5CA,wEAA4C;;IAC5CC,sCAAsC;eAAtCA,kEAAsC;;IAjCtCC,kCAAkC;eAAlCA,0DAAkC;;IAZlCC,4BAA4B;eAA5BA,wCAA4B;;IA5B5BC,mCAAmC;eAAnCA,sDAAmC;;IACnCC,6BAA6B;eAA7BA,gDAA6B;;IAV7BC,mCAAmC;eAAnCA,sDAAmC;;IACnCC,6BAA6B;eAA7BA,gDAA6B;;IAd7BC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAkDzBC,sBAAsB;eAAtBA,kCAAsB;;;+BAjDjB;mCAaA;mCASA;gCAcA;uCAMA;4BAQA;wCAWA;+CAOA;8CAaA;4CAaA;0BAQA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,19 +12,19 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "^0.11.1",
-    "@fluentui-copilot/react-utilities": "^0.0.6",
-    "@fluentui-copilot/tokens": "^0.3.9",
+    "@fluentui-copilot/react-provider": "^0.11.2",
+    "@fluentui-copilot/react-utilities": "^0.0.7",
+    "@fluentui-copilot/tokens": "^0.3.10",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
-    "@fluentui/react-components": ">=9.55.1 <10.0.0",
-    "@fluentui/react-context-selector": ">=9.1.68 <10.0.0",
+    "@fluentui/keyboard-keys": ">=9.0.8 <10.0.0",
+    "@fluentui/react-components": ">=9.58.3 <10.0.0",
+    "@fluentui/react-context-selector": ">=9.1.76 <10.0.0",
     "@fluentui/react-icons": ">=2.0.260 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.45 <10.0.0",
-    "@fluentui/react-shared-contexts": ">=9.20.2 <10.0.0",
-    "@fluentui/react-utilities": ">=9.18.16 <10.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.0.50 <10.0.0",
+    "@fluentui/react-shared-contexts": ">=9.23.1 <10.0.0",
+    "@fluentui/react-utilities": ">=9.19.0 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",
     "@types/react-dom": ">=16.9.8 <19.0.0",
     "react": ">=16.14.0 <19.0.0",