@fluentui-copilot/react-attachments 0.10.1 → 0.10.3

package/CHANGELOG.json

@@ -1,6 +1,48 @@
 {
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
+    {
+      "date": "Tue, 10 Dec 2024 20:20:52 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.10.3",
+      "version": "0.10.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "1510db365b4c9fca25b3222343f7835dd94cd439",
+            "comment": "feat: Add small variant"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 31 Oct 2024 17:41:08 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.10.2",
+      "version": "0.10.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "2d4f0c3ab9fffdea3666fa50f2a16d9d7dbadddd",
+            "comment": "fix: Fix slots that are possibly null/undefined"
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "0f44a6fe967de02cbfcb54cce985e46a944b945e",
+            "comment": "fix: rest, hover, and pressed state color changes to better align with v9 Tag component."
+          },
+          {
+            "author": "jiangemma@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "81a90760f46654eacd8da2d67e867f5415c18db1",
+            "comment": "chore: bump @fluentui dependencies to latest 9.55.1."
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 21 Aug 2024 00:26:06 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.10.0",

package/CHANGELOG.md

@@ -1,9 +1,29 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Wed, 21 Aug 2024 00:26:06 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Dec 2024 20:20:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.10.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.10.3)
+
+Tue, 10 Dec 2024 20:20:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.2..@fluentui-copilot/react-attachments_v0.10.3)
+
+### Patches
+
+- feat: Add small variant ([PR #2447](https://github.com/microsoft/fluentai/pull/2447) by jiangemma@microsoft.com)
+
+## [0.10.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.10.2)
+
+Thu, 31 Oct 2024 17:41:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.0..@fluentui-copilot/react-attachments_v0.10.2)
+
+### Patches
+
+- fix: Fix slots that are possibly null/undefined ([PR #2246](https://github.com/microsoft/fluentai/pull/2246) by jiangemma@microsoft.com)
+- fix: rest, hover, and pressed state color changes to better align with v9 Tag component. ([PR #2200](https://github.com/microsoft/fluentai/pull/2200) by tristan.watanabe@gmail.com)
+- chore: bump @fluentui dependencies to latest 9.55.1. ([PR #2243](https://github.com/microsoft/fluentai/pull/2243) by jiangemma@microsoft.com)
+
 ## [0.10.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.10.0)
 
 Wed, 21 Aug 2024 00:26:06 GMT 

package/dist/index.d.ts

@@ -157,6 +157,12 @@ export declare type AttachmentOverflowMenuState = MenuState & {
  */
 export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {
     imageOnly?: boolean;
+    /**
+     * An attachment supports different sizes.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
 };
 
 export declare type AttachmentSlots = {
@@ -172,7 +178,7 @@ export declare type AttachmentSlots = {
 /**
  * State used in rendering Attachment
  */
-export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id'>> & Pick<AttachmentProps, 'imageOnly'> & {
+export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id' | 'size'>> & Pick<AttachmentProps, 'imageOnly'> & {
     isLoading: boolean;
     shouldUseOverflow: boolean;
 };

package/lib/components/Attachment/Attachment.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAKI"}
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  imageOnly?: boolean;\n\n  /**\n   * An attachment supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id' | 'size'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA0BA;;CAEC,GACD,WAKI"}

package/lib/components/Attachment/useAttachment.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';
-import { Dismiss20Regular } from '@fluentui/react-icons';
+import { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';
 import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
  * Create the state required to render Attachment.
@@ -14,7 +14,8 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
 export const useAttachment_unstable = (props, ref) => {
   const {
     children,
-    imageOnly
+    imageOnly,
+    size = 'medium'
   } = props;
   const {
     onAttachmentDismiss,
@@ -56,7 +57,7 @@ export const useAttachment_unstable = (props, ref) => {
   });
   const dismissIcon = slot.always(props.dismissIcon, {
     defaultProps: {
-      children: /*#__PURE__*/React.createElement(Dismiss20Regular, null)
+      children: size === 'small' ? /*#__PURE__*/React.createElement(Dismiss12Regular, null) : /*#__PURE__*/React.createElement(Dismiss20Regular, null)
     },
     elementType: 'span'
   });
@@ -70,6 +71,7 @@ export const useAttachment_unstable = (props, ref) => {
   });
   const state = {
     id: attachmentId,
+    size,
     components: {
       root: 'div',
       primaryAction: 'button',

package/lib/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 { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\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 } = props;\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\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': 'Dismiss' },\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: <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    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  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["React","ProgressBar","getIntrinsicElementProps","mergeCallbacks","slot","useId","Dismiss20Regular","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","children","imageOnly","onAttachmentDismiss","shouldUseOverflow","context","attachmentId","id","isLoading","progress","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","content","media","optional","dismissIcon","shape","thickness","state","components","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AAChH,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAChC,MAAM,EAAEI,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGP,kCAAkCQ,CAAAA,UAAWA;IAChG,MAAMC,eAAeX,MAAM,eAAeI,MAAMQ,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACT,MAAMU,QAAQ;IAElC,MAAMC,OAAOhB,KAAKiB,MAAM,CACtBnB,yBAAyB,OAAO;QAC9BQ;QACA,GAAGD,KAAK;QACRQ,IAAID;IACN,IACA;QAAEM,aAAa;IAAM;IAGvB,MAAMC,gBAAgBnB,KAAKiB,MAAM,CAACZ,MAAMc,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBpB,KAAKiB,MAAM,CAACZ,MAAMe,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGvB,eACtBqB,cAAcE,OAAO,EACrB,CAACC;QACCd,gCAAAA,0CAAAA,oBAAsBc,IAAI;YAAEC,SAASjB;YAAUkB;YAAOZ,IAAID;QAAa;IACzE;IAGF,MAAMa,QAAQzB,KAAK0B,QAAQ,CAACrB,MAAMoB,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMM,UAAUxB,KAAKiB,MAAM,CAACZ,MAAMmB,OAAO,EAAE;QACzCH,cAAc;YACZd,UAAUF,MAAME,QAAQ;QAC1B;QACAW,aAAa;IACf;IAEA,MAAMS,cAAc3B,KAAKiB,MAAM,CAACZ,MAAMsB,WAAW,EAAE;QACjDN,cAAc;YACZd,wBAAU,oBAACL;QACb;QACAgB,aAAa;IACf;IAEA,MAAMH,WAAWf,KAAK0B,QAAQ,CAACrB,MAAMU,QAAQ,EAAE;QAC7CM,cAAc;YACZO,OAAO;YACPC,WAAW;YACX,mBAAmBxB,MAAMQ,EAAE;QAC7B;QACAK,aAAarB;IACf;IAEA,MAAMiC,QAAyB;QAC7BjB,IAAID;QACJmB,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPD,SAAS;YACTG,aAAa;YACbZ,UAAUlB;QACZ;QAEAmB;QACAG;QACAC;QACAK;QACAD;QACAG;QACAZ;QACAP;QACAM;QACAJ;IACF;IAEA,IAAIoB,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}
+{"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';\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 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': 'Dismiss' },\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  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["React","ProgressBar","getIntrinsicElementProps","mergeCallbacks","slot","useId","Dismiss12Regular","Dismiss20Regular","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","children","imageOnly","size","onAttachmentDismiss","shouldUseOverflow","context","attachmentId","id","isLoading","progress","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","content","media","optional","dismissIcon","shape","thickness","state","components","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AAChH,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,wBAAwB;AAC3E,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGJ;IACjD,MAAM,EAAEK,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGR,kCAAkCS,CAAAA,UAAWA;IAChG,MAAMC,eAAeb,MAAM,eAAeK,MAAMS,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACV,MAAMW,QAAQ;IAElC,MAAMC,OAAOlB,KAAKmB,MAAM,CACtBrB,yBAAyB,OAAO;QAC9BS;QACA,GAAGD,KAAK;QACRS,IAAID;IACN,IACA;QAAEM,aAAa;IAAM;IAGvB,MAAMC,gBAAgBrB,KAAKmB,MAAM,CAACb,MAAMe,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBtB,KAAKmB,MAAM,CAACb,MAAMgB,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGzB,eACtBuB,cAAcE,OAAO,EACrB,CAACC;QACCd,gCAAAA,0CAAAA,oBAAsBc,IAAI;YAAEC,SAASlB;YAAUmB;YAAOZ,IAAID;QAAa;IACzE;IAGF,MAAMa,QAAQ3B,KAAK4B,QAAQ,CAACtB,MAAMqB,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMM,UAAU1B,KAAKmB,MAAM,CAACb,MAAMoB,OAAO,EAAE;QACzCH,cAAc;YACZf,UAAUF,MAAME,QAAQ;QAC1B;QACAY,aAAa;IACf;IAEA,MAAMS,cAAc7B,KAAKmB,MAAM,CAACb,MAAMuB,WAAW,EAAE;QACjDN,cAAc;YACZf,UAAUE,SAAS,wBAAU,oBAACR,wCAAsB,oBAACC;QACvD;QACAiB,aAAa;IACf;IAEA,MAAMH,WAAWjB,KAAK4B,QAAQ,CAACtB,MAAMW,QAAQ,EAAE;QAC7CM,cAAc;YACZO,OAAO;YACPC,WAAW;YACX,mBAAmBzB,MAAMS,EAAE;QAC7B;QACAK,aAAavB;IACf;IAEA,MAAMmC,QAAyB;QAC7BjB,IAAID;QACJJ;QACAuB,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPD,SAAS;YACTG,aAAa;YACbZ,UAAUpB;QACZ;QAEAqB;QACAG;QACAC;QACAK;QACAD;QACAG;QACAZ;QACAR;QACAO;QACAJ;IACF;IAEA,IAAIoB,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}

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

@@ -10,11 +10,12 @@ export const attachmentClassNames = {
   progress: 'fai-Attachment__progress'
 };
 const ATTACHMENT_MAXWIDTH = '180px';
+const SMALL_ATTACHMENT_SIZE = '16px';
 const ATTACHMENT_SIZE = '20px';
 const useRootBaseClassName = __resetStyles("r16wonf3", null, [".r16wonf3{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;position:relative;}"]);
 const buttonBaseStyles = {
   alignItems: 'center',
-  backgroundColor: tokens.colorNeutralBackground1,
+  backgroundColor: tokens.colorSubtleBackground,
   border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
   borderRadius: tokens.borderRadiusMedium,
   boxSizing: 'border-box',
@@ -30,29 +31,29 @@ const buttonBaseStyles = {
   }),
   verticalAlign: 'middle'
 };
-const usePrimaryActionBaseClassName = __resetStyles("r1ng7ytw", "r154t9rh", [".r1ng7ytw{align-items:center;background-color:var(--colorNeutralBackground1);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);}", ".r1ng7ytw[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r154t9rh{align-items:center;background-color:var(--colorNeutralBackground1);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);}", ".r154t9rh[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"]);
+const usePrimaryActionBaseClassName = __resetStyles("rjo71rc", "rsix9pn", [".rjo71rc{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-right-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".rjo71rc[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".rsix9pn{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-left-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".rsix9pn[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"]);
 const usePrimaryActionStyles = __styles({
   button: {
     eoavqd: "f8491dx",
-    Jwef8y: "f1h648pw",
+    Jwef8y: "f1t94bn6",
     Bi91k9c: "fnwyq0v",
-    ecr2s2: "fwdzr64",
+    ecr2s2: "f1wfn5kd",
     lj723h: "flvvhsy",
     Bbkh6qg: "fkiggi6",
     Cnge2b: "f8zknr1"
   }
 }, {
-  h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}"],
-  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"],
+  h: [".f8491dx:hover{cursor:pointer;}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}"],
+  a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"],
   m: [["@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f8zknr1:active{background-color:HighlightText;}}", {
     m: "(forced-colors: active)"
   }]]
 });
-const useDismissButtonBaseClassName = __resetStyles("r1ky29as", "rhkudax", {
-  r: [".r1ky29as{align-items:center;background-color:var(--colorNeutralBackground1);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);}", ".r1ky29as[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r1ky29as:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}", ".r1ky29as:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}", ".r1ky29as:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}", ".r1ky29as:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}", ".rhkudax{align-items:center;background-color:var(--colorNeutralBackground1);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);}", ".rhkudax[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".rhkudax:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}", ".rhkudax:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}", ".rhkudax:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}", ".rhkudax:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}"],
-  s: ["@media (forced-colors: active){.r1ky29as:hover{background-color:HighlightText;}.r1ky29as:active{background-color:HighlightText;}}", "@media (forced-colors: active){.rhkudax:hover{background-color:HighlightText;}.rhkudax:active{background-color:HighlightText;}}"]
+const useDismissButtonBaseClassName = __resetStyles("r145yi8y", "r151el6p", {
+  r: [".r145yi8y{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);}", ".r145yi8y[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r145yi8y:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}", ".r145yi8y:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}", ".r145yi8y:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}", ".r145yi8y:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}", ".r151el6p{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);}", ".r151el6p[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r151el6p:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}", ".r151el6p:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}", ".r151el6p:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}", ".r151el6p:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}"],
+  s: ["@media (forced-colors: active){.r145yi8y:hover{background-color:HighlightText;}.r145yi8y:active{background-color:HighlightText;}}", "@media (forced-colors: active){.r151el6p:hover{background-color:HighlightText;}.r151el6p:active{background-color:HighlightText;}}"]
 });
 const useMediaBaseClassName = __resetStyles("r1a4a4my", null, [".r1a4a4my{align-items:center;display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}"]);
 const useContentBaseClassName = __resetStyles("rmt99gk", null, [".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
@@ -81,6 +82,49 @@ export const useOverflowStyles = __styles({
 }, {
   d: [".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}"]
 });
+const useSmallStyles = __styles({
+  primaryAction: {
+    B2u0y6b: "fyv37rf",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1o3rc9c"
+  },
+  media: {
+    Be2twd7: "f4ybsrx",
+    Bqenvij: "fd461yt",
+    Bg96gwp: "f104wqfl",
+    a9b677: "fjw5fx7"
+  },
+  content: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  dismissButton: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fnsh2i4",
+    B2u0y6b: "fatynhj",
+    Bf4jedk: "fydhda"
+  },
+  dismissIcon: {
+    Be2twd7: "f4ybsrx",
+    Bqenvij: "fzi9ji0",
+    B2u0y6b: "f11qte0n",
+    Bf4jedk: "fy1a5sw"
+  }
+}, {
+  d: [".fyv37rf{max-width:calc(180px - 16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));}", [".f1o3rc9c{padding:var(--spacingVerticalXXS) var(--spacingHorizontalSNudge) var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);}", {
+    p: -1
+  }], ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f104wqfl{line-height:16px;}", ".fjw5fx7{width:16px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".fnsh2i4{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXXS);}", {
+    p: -1
+  }], ".fatynhj{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}", ".fydhda{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}", ".fzi9ji0{height:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));}", ".f11qte0n{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}", ".fy1a5sw{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}"]
+});
 /**
  * Apply styling to the Attachment slots based on the state
  */
@@ -96,18 +140,20 @@ export const useAttachmentStyles_unstable = state => {
   const progressBarStyles = useProgressBarStyles();
   const primaryActionStyles = usePrimaryActionStyles();
   const imageOnlyStyles = useImageOnlyStyles();
+  const smallStyles = useSmallStyles();
   const {
     imageOnly,
-    primaryAction
+    primaryAction,
+    size
   } = state;
   state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);
-  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
-  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
+  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
+  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, state.dismissButton.className);
   if (state.media) {
-    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);
+    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
   }
-  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);
-  state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
+  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, size === 'small' && smallStyles.content, imageOnly && imageOnlyStyles.content, state.content.className);
+  state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, size === 'small' && smallStyles.dismissIcon, state.dismissIcon.className);
   if (state.progress) {
     state.progress.className = mergeClasses(attachmentClassNames.progress, progressBarStyles.progress, state.progress.className);
     const bar = slot.optional(state.progress.bar, {

package/lib/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  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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 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.colorNeutralBackground1,\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.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\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.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\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\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 { imageOnly, primaryAction } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","imageOnly","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  slot,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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\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 { imageOnly, primaryAction, size } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\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    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    size === 'small' && smallStyles.dismissButton,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(\n      attachmentClassNames.media,\n      mediaBaseClassName,\n      size === 'small' && smallStyles.media,\n      state.media.className,\n    );\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    size === 'small' && smallStyles.content,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    size === 'small' && smallStyles.dismissIcon,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","imageOnly","size","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,+BAA+B,EAC/BC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,IAAI,EACJC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AACpC,SAASC,oBAAoB,QAAQ,uCAAuC;AAI5E,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,eAAe;IACfC,eAAe;IACfC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,UAAU;AACZ,EAAE;AAEF,MAAMC,sBAAsB;AAC5B,MAAMC,wBAAwB;AAC9B,MAAMC,kBAAkB;AAExB,MAAMC,uBAAuBlB,gBAAgB;IAC3CmB,SAAS;IACTC,UAAU;IACVC,eAAe;IACfC,WAAW;IACXC,OAAO;IACPC,WAAW;IACXC,UAAU;AACZ;AAEA,MAAMC,mBAAsC;IAC1CC,YAAY;IACZC,iBAAiBxB,OAAOyB,qBAAqB;IAC7CC,QAAQ,CAAC,EAAE1B,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO4B,mBAAmB,CAAC,CAAC;IACvEC,cAAc7B,OAAO8B,kBAAkB;IACvCZ,WAAW;IACXa,WAAW/B,OAAOgC,uBAAuB;IACzCC,OAAOjC,OAAOkC,uBAAuB;IACrCC,QAAQ;IACRpB,SAAS;IACTC,UAAU;IACVoB,gBAAgB;IAChB,GAAGzC,gCAAgC;QACjC0C,SAAS,CAAC,EAAErC,OAAOsC,gBAAgB,CAAC,OAAO,EAAEtC,OAAOuC,iBAAiB,CAAC,CAAC;QACvEC,QAAQ;IACV,EAAE;IACFvB,eAAe;AACjB;AAEA,MAAMwB,gCAAgC7C,gBAAgB;IACpD,GAAG0B,gBAAgB;IACnBoB,sBAAsB1C,OAAO2C,gBAAgB;IAC7CC,yBAAyB5C,OAAO2C,gBAAgB;IAChDE,kBAAkB;IAClBC,UAAU,CAAC,KAAK,EAAEnC,oBAAoB,GAAG,EAAEE,gBAAgB,GAAG,EAAEb,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,GAAG,EAAE/C,OAAOgD,mBAAmB,CAAC,CAAC,CAAC;IAC9JC,SAAS,CAAC,EAAEjD,OAAOkD,iBAAiB,CAAC,CAAC,EAAElD,OAAOmD,kBAAkB,CAAC,CAAC,EAAEnD,OAAOkD,iBAAiB,CAAC,CAAC,EAAElD,OAAOmD,kBAAkB,CAAC,CAAC;AAC9H;AAEA,MAAMC,yBAAyBvD,WAAW;IACxCwD,QAAQ;QACN,UAAU;YACRlB,QAAQ;YACRX,iBAAiBxB,OAAOsD,0BAA0B;YAClDrB,OAAOjC,OAAOuD,4BAA4B;QAC5C;QACA,WAAW;YACT/B,iBAAiBxB,OAAOwD,4BAA4B;YACpDvB,OAAOjC,OAAOyD,8BAA8B;QAC9C;QACA,kCAAkC;YAChC,UAAU;gBACRjC,iBAAiB;YACnB;YACA,WAAW;gBACTA,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,MAAMkC,gCAAgC9D,gBAAgB;IACpD,GAAG0B,gBAAgB;IAEnB2B,SAAS,CAAC,EAAEjD,OAAOkD,iBAAiB,CAAC,CAAC,EAAElD,OAAOgD,mBAAmB,CAAC,CAAC,EAAEhD,OAAOkD,iBAAiB,CAAC,CAAC,EAAElD,OAAOgD,mBAAmB,CAAC,CAAC;IAC9HF,UAAU,CAAC,KAAK,EAAEjC,gBAAgB,GAAG,EAAEb,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,IAAI,EAAE/C,OAAOgD,mBAAmB,CAAC,CAAC;IACrIW,UAAU,CAAC,KAAK,EAAE9C,gBAAgB,GAAG,EAAEb,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,IAAI,EAAE/C,OAAOgD,mBAAmB,CAAC,CAAC;IAErI,WAAW;IACXY,iBAAiB5D,OAAO4B,mBAAmB;IAC3CiC,qBAAqB7D,OAAO2C,gBAAgB;IAC5CmB,wBAAwB9D,OAAO2C,gBAAgB;IAE/CD,sBAAsB1C,OAAO8B,kBAAkB;IAC/Cc,yBAAyB5C,OAAO8B,kBAAkB;IAElD,UAAU;QACRK,QAAQ;QACRX,iBAAiBxB,OAAOsD,0BAA0B;QAClDrB,OAAOjC,OAAO+D,iCAAiC;QAC/C,CAAC,CAAC,GAAG,EAAE5D,qBAAqBM,WAAW,CAAC,CAAC,CAAC,EAAE;YAC1CwB,OAAOjC,OAAOgE,6BAA6B;QAC7C;IACF;IACA,WAAW;QACTxC,iBAAiBxB,OAAOwD,4BAA4B;QACpDvB,OAAOjC,OAAOiE,mCAAmC;IACnD;IACA,UAAU;QACR,CAAC,CAAC,GAAG,EAAE9D,qBAAqBM,WAAW,CAAC,CAAC,CAAC,EAAE;YAC1CwB,OAAOjC,OAAO+D,iCAAiC;QACjD;IACF;IACA,kCAAkC;QAChC,UAAU;YACRvC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA,MAAM0C,wBAAwBtE,gBAAgB;IAC5C2B,YAAY;IACZR,SAAS;IACToD,UAAUtD;IACVuD,QAAQvD;IACRwD,YAAYxD;IACZM,OAAON;AACT;AAEA,MAAMyD,0BAA0B1E,gBAAgB;IAC9C2E,WAAW;IACXC,cAAc;IACdC,YAAY;IACZ,GAAGxE,iBAAiByE,KAAK;AAC3B;AAEA,MAAMC,8BAA8B/E,gBAAgB;IAClD2B,YAAY;IACZM,cAAc7B,OAAO4E,oBAAoB;IACzClD,QAAQ,CAAC,EAAE1B,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO6E,sBAAsB,CAAC,CAAC;IAC1E3D,WAAW;IACXe,OAAOjC,OAAOkC,uBAAuB;IACrCnB,SAAS;IACToD,UAAUtD;IACVuD,QAAQ,CAAC,KAAK,EAAEvD,gBAAgB,GAAG,EAAEb,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO8E,kBAAkB,CAAC,CAAC,CAAC;IACjG1C,gBAAgB;IAChBU,UAAU,CAAC,KAAK,EAAEjC,gBAAgB,GAAG,EAAEb,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,CAAC,CAAC;IACrGY,UAAU,CAAC,KAAK,EAAE9C,gBAAgB,GAAG,EAAEb,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,CAAC,CAAC;IACrGE,SAAS,CAAC,KAAK,EAAEjD,OAAO8E,kBAAkB,CAAC,WAAW,EAAE9E,OAAO+C,oBAAoB,CAAC,KAAK,CAAC;AAC5F;AAEA,MAAMgC,qBAAqBlF,WAAW;IACpCQ,eAAe;QACb4C,SAAS;IACX;IACAzC,SAAS;QACP6D,YAAY;IACd;AACF;AAEA,OAAO,MAAMW,oBAAoBnF,WAAW;IAC1CoF,UAAU;QACRnC,UAAU;QACV3B,OAAO;IACT;AACF,GAAG;AAEH,MAAM+D,iBAAiBrF,WAAW;IAChCQ,eAAe;QACbyC,UAAU,CAAC,KAAK,EAAEnC,oBAAoB,GAAG,EAAEC,sBAAsB,GAAG,EAAEZ,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,GAAG,EAAE/C,OAAOgD,mBAAmB,CAAC,CAAC,CAAC;QACpKC,SAAS,CAAC,EAAEjD,OAAO8E,kBAAkB,CAAC,CAAC,EAAE9E,OAAOgC,uBAAuB,CAAC,CAAC,EAAEhC,OAAO8E,kBAAkB,CAAC,CAAC,EAAE9E,OAAOgC,uBAAuB,CAAC,CAAC;IAC1I;IACAzB,OAAO;QACL4D,UAAUvD;QACVwD,QAAQxD;QACRyD,YAAYzD;QACZO,OAAOP;IACT;IACAJ,SAAS;QACP,GAAGP,iBAAiBkF,QAAQ;IAC9B;IACA7E,eAAe;QACb2C,SAAS,CAAC,EAAEjD,OAAO8E,kBAAkB,CAAC,CAAC,EAAE9E,OAAO+C,oBAAoB,CAAC,CAAC;QACtED,UAAU,CAAC,KAAK,EAAElC,sBAAsB,GAAG,EAAEZ,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,IAAI,EAAE/C,OAAOgD,mBAAmB,CAAC,CAAC;QAC3IW,UAAU,CAAC,KAAK,EAAE/C,sBAAsB,GAAG,EAAEZ,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,IAAI,EAAE/C,OAAOgD,mBAAmB,CAAC,CAAC;IAC7I;IACAvC,aAAa;QACX0D,UAAUvD;QACVwD,QAAQ,CAAC,KAAK,EAAExD,sBAAsB,GAAG,EAAEZ,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO8E,kBAAkB,CAAC,CAAC,CAAC;QACvGhC,UAAU,CAAC,KAAK,EAAElC,sBAAsB,GAAG,EAAEZ,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,CAAC,CAAC;QAC3GY,UAAU,CAAC,KAAK,EAAE/C,sBAAsB,GAAG,EAAEZ,OAAO2B,eAAe,CAAC,OAAO,EAAE3B,OAAO+C,oBAAoB,CAAC,CAAC,CAAC;IAC7G;AACF;AAEA;;CAEC,GACD,OAAO,MAAMqC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,oBAAoBxE;IAC1B,MAAMyE,6BAA6B9C;IACnC,MAAM+C,6BAA6B9B;IACnC,MAAM+B,qBAAqBvB;IAC3B,MAAMwB,uBAAuBpB;IAC7B,MAAMqB,2BAA2BhB;IACjC,MAAMiB,oBAAoB1F;IAC1B,MAAM2F,sBAAsBzC;IAC5B,MAAM0C,kBAAkBf;IACxB,MAAMgB,cAAcb;IACpB,MAAM,EAAEc,SAAS,EAAE3F,aAAa,EAAE4F,IAAI,EAAE,GAAGZ;IAE3CA,MAAMjF,IAAI,CAAC8F,SAAS,GAAGpG,aAAaK,qBAAqBC,IAAI,EAAEkF,mBAAmBD,MAAMjF,IAAI,CAAC8F,SAAS;IACtGb,MAAMhF,aAAa,CAAC6F,SAAS,GAAGpG,aAC9BK,qBAAqBE,aAAa,EAClCkF,4BACAU,SAAS,WAAWF,YAAY1F,aAAa,EAC7CA,cAAc8F,EAAE,KAAK,UAAU,CAACd,MAAMe,SAAS,IAAIP,oBAAoBxC,MAAM,EAC7E2C,aAAaF,gBAAgBzF,aAAa,EAC1CgF,MAAMhF,aAAa,CAAC6F,SAAS;IAE/Bb,MAAM/E,aAAa,CAAC4F,SAAS,GAAGpG,aAC9BK,qBAAqBG,aAAa,EAClCkF,4BACAS,SAAS,WAAWF,YAAYzF,aAAa,EAC7C+E,MAAM/E,aAAa,CAAC4F,SAAS;IAE/B,IAAIb,MAAM9E,KAAK,EAAE;QACf8E,MAAM9E,KAAK,CAAC2F,SAAS,GAAGpG,aACtBK,qBAAqBI,KAAK,EAC1BkF,oBACAQ,SAAS,WAAWF,YAAYxF,KAAK,EACrC8E,MAAM9E,KAAK,CAAC2F,SAAS;IAEzB;IACAb,MAAM7E,OAAO,CAAC0F,SAAS,GAAGpG,aACxBK,qBAAqBK,OAAO,EAC5BkF,sBACAO,SAAS,WAAWF,YAAYvF,OAAO,EACvCwF,aAAaF,gBAAgBtF,OAAO,EACpC6E,MAAM7E,OAAO,CAAC0F,SAAS;IAEzBb,MAAM5E,WAAW,CAACyF,SAAS,GAAGpG,aAC5BK,qBAAqBM,WAAW,EAChCkF,0BACAM,SAAS,WAAWF,YAAYtF,WAAW,EAC3C4E,MAAM5E,WAAW,CAACyF,SAAS;IAG7B,IAAIb,MAAM3E,QAAQ,EAAE;QAClB2E,MAAM3E,QAAQ,CAACwF,SAAS,GAAGpG,aACzBK,qBAAqBO,QAAQ,EAC7BkF,kBAAkBlF,QAAQ,EAC1B2E,MAAM3E,QAAQ,CAACwF,SAAS;QAG1B,MAAMG,MAAMtG,KAAKuG,QAAQ,CAACjB,MAAM3E,QAAQ,CAAC2F,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIhB,MAAM3E,QAAQ,CAAC+F,KAAK,KAAKC,WAAW;gBACtCL,IAAIH,SAAS,GAAGpG,aAAa8F,kBAAkBe,wBAAwB,EAAEN,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,GAAGpG,aAAa8F,kBAAkBgB,kBAAkB,EAAEP,IAAIH,SAAS;YAClF;YACAb,MAAM3E,QAAQ,CAAC2F,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOhB;AACT,EAAE"}

package/lib/components/AttachmentList/renderAttachmentList.js

@@ -17,7 +17,7 @@ export const renderAttachmentList_unstable = (state, contextValues) => {
   } = state;
   return /*#__PURE__*/_jsx(AttachmentListProvider, {
     value: contextValues.attachmentList,
-    children: shouldUseOverflow ? /*#__PURE__*/_jsx(Overflow, {
+    children: shouldUseOverflow && state.overflowMenuButton ? /*#__PURE__*/_jsx(Overflow, {
       ref: root.ref,
       children: /*#__PURE__*/_jsxs(state.root, {
         children: [root.children, /*#__PURE__*/_jsxs(AttachmentOverflowMenu, {

package/lib/components/AttachmentList/renderAttachmentList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuList, MenuPopover, Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n  const { attachments, overflowMenuProps, root, shouldUseOverflow } = state;\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      {shouldUseOverflow ? (\n        <Overflow ref={root.ref}>\n          <state.root>\n            {root.children}\n            <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n              <state.overflowMenuButton />\n              <MenuPopover>\n                <MenuList>\n                  {attachments.map(attachment => {\n                    return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n                  })}\n                </MenuList>\n              </MenuPopover>\n            </AttachmentOverflowMenu>\n          </state.root>\n        </Overflow>\n      ) : (\n        <state.root />\n      )}\n    </AttachmentListProvider>\n  );\n};\n"],"names":["MenuList","MenuPopover","Overflow","assertSlots","AttachmentListProvider","AttachmentOverflowMenu","AttachmentOverflowMenuItem","renderAttachmentList_unstable","state","contextValues","attachments","overflowMenuProps","root","shouldUseOverflow","value","attachmentList","ref","children","positioning","overflowMenuButton","map","attachment","key","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;;AAEjD,SAASA,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAC1F,SAASC,sBAAsB,QAAQ,uCAAuC;AAC9E,SAASC,sBAAsB,QAAQ,4BAA4B;AACnE,SAASC,0BAA0B,QAAQ,gCAAgC;AAG3E;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAN,YAAiCK;IACjC,MAAM,EAAEE,WAAW,EAAEC,iBAAiB,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGL;IAEpE,qBACE,KAACJ;QAAuBU,OAAOL,cAAcM,cAAc;kBACxDF,kCACC,KAACX;YAASc,KAAKJ,KAAKI,GAAG;sBACrB,cAAA,MAACR,MAAMI,IAAI;;oBACRA,KAAKK,QAAQ;kCACd,MAACZ;wBAAuBa,aAAa;wBAAU,GAAGP,iBAAiB;;0CACjE,KAACH,MAAMW,kBAAkB;0CACzB,KAAClB;0CACC,cAAA,KAACD;8CACEU,YAAYU,GAAG,CAACC,CAAAA;wCACf,qBAAO,eAACf;4CAA4B,GAAGe,UAAU;4CAAEC,KAAKD,WAAWE,EAAE;;oCACvE;;;;;;;2BAOV,KAACf,MAAMI,IAAI;;AAInB,EAAE"}
+{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuList, MenuPopover, Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n  const { attachments, overflowMenuProps, root, shouldUseOverflow } = state;\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      {shouldUseOverflow && state.overflowMenuButton ? (\n        <Overflow ref={root.ref}>\n          <state.root>\n            {root.children}\n            <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n              <state.overflowMenuButton />\n              <MenuPopover>\n                <MenuList>\n                  {attachments.map(attachment => {\n                    return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n                  })}\n                </MenuList>\n              </MenuPopover>\n            </AttachmentOverflowMenu>\n          </state.root>\n        </Overflow>\n      ) : (\n        <state.root />\n      )}\n    </AttachmentListProvider>\n  );\n};\n"],"names":["MenuList","MenuPopover","Overflow","assertSlots","AttachmentListProvider","AttachmentOverflowMenu","AttachmentOverflowMenuItem","renderAttachmentList_unstable","state","contextValues","attachments","overflowMenuProps","root","shouldUseOverflow","value","attachmentList","overflowMenuButton","ref","children","positioning","map","attachment","key","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;;AAEjD,SAASA,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAC1F,SAASC,sBAAsB,QAAQ,uCAAuC;AAC9E,SAASC,sBAAsB,QAAQ,4BAA4B;AACnE,SAASC,0BAA0B,QAAQ,gCAAgC;AAG3E;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAN,YAAiCK;IACjC,MAAM,EAAEE,WAAW,EAAEC,iBAAiB,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGL;IAEpE,qBACE,KAACJ;QAAuBU,OAAOL,cAAcM,cAAc;kBACxDF,qBAAqBL,MAAMQ,kBAAkB,iBAC5C,KAACd;YAASe,KAAKL,KAAKK,GAAG;sBACrB,cAAA,MAACT,MAAMI,IAAI;;oBACRA,KAAKM,QAAQ;kCACd,MAACb;wBAAuBc,aAAa;wBAAU,GAAGR,iBAAiB;;0CACjE,KAACH,MAAMQ,kBAAkB;0CACzB,KAACf;0CACC,cAAA,KAACD;8CACEU,YAAYU,GAAG,CAACC,CAAAA;wCACf,qBAAO,eAACf;4CAA4B,GAAGe,UAAU;4CAAEC,KAAKD,WAAWE,EAAE;;oCACvE;;;;;;;2BAOV,KAACf,MAAMI,IAAI;;AAInB,EAAE"}

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

@@ -4,9 +4,9 @@ export const attachmentOverflowMenuButtonClassNames = {
   root: 'fai-AttachmentOverflowMenuButton',
   progress: 'fai-AttachmentOverflowMenuButton__progress'
 };
-const useRootBaseClassName = __resetStyles("rn3o5tq", null, {
-  r: [".rn3o5tq{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;position:relative;}", ".rn3o5tq:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}", ".rn3o5tq:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"],
-  s: ["@media (forced-colors: active){.rn3o5tq:hover{background-color:HighlightText;}.rn3o5tq:active{background-color:HighlightText;}}"]
+const useRootBaseClassName = __resetStyles("r1o7ejxu", null, {
+  r: [".r1o7ejxu{color:var(--colorNeutralForeground1);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);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;position:relative;}", ".r1o7ejxu:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2Hover);}", ".r1o7ejxu:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2Pressed);}"],
+  s: ["@media (forced-colors: active){.r1o7ejxu:hover{background-color:HighlightText;}.r1o7ejxu:active{background-color:HighlightText;}}"]
 });
 /**
  * Apply styling to the AttachmentOverflowMenuButton slots based on the state

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\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/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC3G,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,cAAcf,OAAOgB,kBAAkB;IACvCC,WAAW;IACXC,WAAWlB,OAAOmB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYtB,iBAAiBuB,KAAK,CAACD,UAAU;IAC7CE,UAAUxB,iBAAiBuB,KAAK,CAACC,QAAQ;IACzCC,YAAYzB,iBAAiBuB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS,CAAC,EAAE5B,OAAO6B,iBAAiB,CAAC,CAAC,EAAE7B,OAAO8B,kBAAkB,CAAC,CAAC;IACnEC,eAAe;IACfC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBV,OAAOiC,4BAA4B;QACpD1B,OAAOP,OAAOkC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBV,OAAOmC,8BAA8B;QACtD5B,OAAOP,OAAOoC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAM2B,iDAAiD,CAC5DC;IAEA;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,oBAAoBtC;IAE1BoC,MAAMlC,IAAI,CAACqC,SAAS,GAAG3C,aACrBK,uCAAuCC,IAAI,EAC3CmC,mBACAD,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMjC,QAAQ,EAAE;QAClBiC,MAAMjC,QAAQ,CAACoC,SAAS,GAAG3C,aACzBK,uCAAuCE,QAAQ,EAC/CmC,kBAAkBnC,QAAQ,EAC1BiC,MAAMjC,QAAQ,CAACoC,SAAS;QAG1B,MAAMC,MAAM3C,KAAK4C,QAAQ,CAACL,MAAMjC,QAAQ,CAACqC,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAMjC,QAAQ,CAACyC,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAMjC,QAAQ,CAACqC,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorSubtleBackground,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC3G,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBV,OAAOW,qBAAqB;IAC7CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,cAAcf,OAAOgB,kBAAkB;IACvCC,WAAW;IACXC,WAAWlB,OAAOmB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYtB,iBAAiBuB,KAAK,CAACD,UAAU;IAC7CE,UAAUxB,iBAAiBuB,KAAK,CAACC,QAAQ;IACzCC,YAAYzB,iBAAiBuB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS,CAAC,EAAE5B,OAAO6B,iBAAiB,CAAC,CAAC,EAAE7B,OAAO8B,kBAAkB,CAAC,CAAC;IACnEC,eAAe;IACfC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBV,OAAOiC,0BAA0B;QAClD1B,OAAOP,OAAOkC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBV,OAAOmC,4BAA4B;QACpD5B,OAAOP,OAAOoC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAM2B,iDAAiD,CAC5DC;IAEA;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,oBAAoBtC;IAE1BoC,MAAMlC,IAAI,CAACqC,SAAS,GAAG3C,aACrBK,uCAAuCC,IAAI,EAC3CmC,mBACAD,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMjC,QAAQ,EAAE;QAClBiC,MAAMjC,QAAQ,CAACoC,SAAS,GAAG3C,aACzBK,uCAAuCE,QAAQ,EAC/CmC,kBAAkBnC,QAAQ,EAC1BiC,MAAMjC,QAAQ,CAACoC,SAAS;QAG1B,MAAMC,MAAM3C,KAAK4C,QAAQ,CAACL,MAAMjC,QAAQ,CAACqC,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAMjC,QAAQ,CAACyC,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAMjC,QAAQ,CAACqC,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  imageOnly?: boolean;\n\n  /**\n   * An attachment supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id' | 'size'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA0BA;;CAEC"}

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

@@ -14,7 +14,7 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
 const _attachmentListContext = require("../../contexts/attachmentListContext");
 const useAttachment_unstable = (props, ref)=>{
-    const { children, imageOnly } = props;
+    const { children, imageOnly, size = 'medium' } = props;
     const { onAttachmentDismiss, shouldUseOverflow } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
     const attachmentId = (0, _reactcomponents.useId)('attachment-', props.id);
     const isLoading = !!props.progress;
@@ -52,7 +52,7 @@ const useAttachment_unstable = (props, ref)=>{
     });
     const dismissIcon = _reactcomponents.slot.always(props.dismissIcon, {
         defaultProps: {
-            children: /*#__PURE__*/ _react.createElement(_reacticons.Dismiss20Regular, null)
+            children: size === 'small' ? /*#__PURE__*/ _react.createElement(_reacticons.Dismiss12Regular, null) : /*#__PURE__*/ _react.createElement(_reacticons.Dismiss20Regular, null)
         },
         elementType: 'span'
     });
@@ -66,6 +66,7 @@ const useAttachment_unstable = (props, ref)=>{
     });
     const state = {
         id: attachmentId,
+        size,
         components: {
             root: 'div',
             primaryAction: 'button',

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 { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\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 } = props;\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\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': 'Dismiss' },\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: <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    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  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["children","props","attachmentId","imageOnly","isLoading","ref","useAttachmentListContext_unstable","context","elementType","useId","id","progress","root","primaryAction","slot","always","onAttachmentDismiss","content","media","optional","onClick","ev","defaultProps","dismissIcon","shape","thickness","React","createElement","Dismiss20Regular","components","dismissButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCAC4D;4BAClD;uCACiB;AAahD,MAAQA,yBAAwBC,CAAAA,OAAAA;UAChC,EACAD,QAAME,EACNC,SAAMC,KAENH;UAEII,qBACQ,mBACJH,KACNI,IAAAA,wDACA,EAAAC,CAAAA,UAAAA;UAAEC,eAAaC,IAAAA,sBAAA,EAAA,eAAAR,MAAAS,EAAA;UAAMN,YAAA,CAAA,CAAAH,MAAAU,QAAA;UAGvBC,OAAMC,qBAAAA,CAAAA,MAAgBC,CAAAA,IAAAA,yCAAkBD,EAAAA,OAAe;;QAEvD,GAAAZ,KAAA;QAEAS,IAAAR;;qBACkB;;UAChBM,gBAAaM,qBAAA,CAAAC,MAAA,CAAAd,MAAAY,aAAA,EAAA;QACfL,aAAA;;UAKIQ,gBAAAA,qBAAAA,CAAAA,MAAAA,CAAAA,MAAAA,aAAAA,EAAAA;sBAA4BC;0BAAmBC;;qBAAwB;;kBAIrEA,OAAaC,GAAAA,IAAAA,+BAAeD,EAAAA,cAAOE,OAAA,EAAAC,CAAAA;gCAAe,QAAAL,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAK,IAAA;YAAOJ,SAAAjB;YAE/DkB;gBACEI;;;UAGAd,QAAAA,qBAAAA,CAAaW,QAAA,CAAAlB,MAAAiB,KAAA,EAAA;QACfV,aAAA;;UAGEc,UAAAA,qBAAc,CAAAP,MAAA,CAAAd,MAAAgB,OAAA,EAAA;sBACZjB;sBACFC,MAAAD,QAAA;;QAEFQ,aAAA;;UAGEc,cAAcR,qBAAA,CAAAC,MAAA,CAAAd,MAAAsB,WAAA,EAAA;sBACZC;sBACAC,WAAW,GAAAC,OAAAC,aAAA,CAAAC,4BAAA,EAAA;;qBAEb;;UAEFjB,WAAAG,qBAAA,CAAAK,QAAA,CAAAlB,MAAAU,QAAA,EAAA;QAEAW,cAA+B;mBACzBpB;uBACJ2B;+BACQ5B,MAAAS,EAAA;;qBAENoB,4BAAe;;kBAEfb;;oBAEAN;kBACF;2BAEAC;2BACAC;mBACAiB;qBACAZ;yBACAD;sBACAM,4BAAAA;;;;;QAKFL;QAEAD;;QAEAN;QAEAR;QACAC"}
+{"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';\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 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': 'Dismiss' },\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  };\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","root","slot","shouldUseOverflow","context","useId","props","id","primaryAction","always","elementType","getIntrinsicElementProps","dismissButton","defaultProps","media","mergeCallbacks","onClick","ev","onAttachmentDismiss","content","optional","dismissIcon","progress","thickness","React","createElement","Dismiss12Regular","Dismiss20Regular","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCAC4D;4BAChC;uCACD;AAahD,MAAQA,yBAAqBC,CAAAA,OAAOC;UACpC,EACAF,QAAMG,EACNC,SAAMC,EAENJ,OAAMK,QAAOC;UAGT,qBACIJ,EACNK,iBACA,iEAAe,EAAAC,CAAAA,UAAAA;UAAMN,eAAAO,IAAAA,sBAAA,EAAA,eAAAC,MAAAC,EAAA;UAGvBP,YAAMQ,CAAAA,CAAAA,MAAgBN,QAAKO;UACzBC,OAAAA,qBAAAA,CAAAA,MAAa,CAAAC,IAAAA,yCAAA,EAAA,OAAA;QACfd;QAEA,GAAAS,KAAMM;YACJC;;qBAAwC;;UAE1CL,gBAAAN,qBAAA,CAAAO,MAAA,CAAAH,MAAAE,aAAA,EAAA;QAEAI,aAAAA;;0BAGyCjB,qBAAAA,CAAAA,MAAAA,CAAAA,MAAAA,aAAAA,EAAAA;sBAAUmB;0BAAWhB;;QAC5DY,aAAA;;kBAGyCA,OAAa,GAAAK,IAAAA,+BAAA,EAAAH,cAAAI,OAAA,EAAAC,CAAAA;QAAOC,wBAAA,QAAAA,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAD,IAAA;YAE/DE,SAAMA;;;;;UAKNL,QAAAZ,qBAAA,CAAAkB,QAAA,CAAAd,MAAAQ,KAAA,EAAA;QAEAJ,aAAMW;;oBAEF1B,qBAAUC,CAAAA,MAAAA,CAAAA,MAASuB,OAAA,EAAA;sBACrB;sBACAT,MAAaf,QAAA;QACf;QAEAe,aAAMY;;wBAEKpB,qBAAA,CAAAO,MAAA,CAAAH,MAAAe,WAAA,EAAA;sBACPE;sBACA3B,SAAA,UAAmBU,WAAQ,GAAAkB,OAAAC,aAAA,CAAAC,4BAAA,EAAA,QAAA,WAAA,GAAAF,OAAAC,aAAA,CAAAE,4BAAA,EAAA;;qBAE7BjB;;UAGFY,WAA+BpB,qBAAA,CAAAkB,QAAA,CAAAd,MAAAgB,QAAA,EAAA;sBACzBxB;mBACJF;uBACAgC;+BACQtB,MAAAC,EAAA;;qBAENK,4BAAe;;kBAEfO;;;oBAGF;kBAEAlB;2BACAO;2BACAI;mBACAE;qBACAK;yBACAE;sBACAC,4BAAAA;;;;QAIFV;QAEAE;;QAEAO;QAEAC;QACAvB"}

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

@@ -31,13 +31,14 @@ const attachmentClassNames = {
     progress: 'fai-Attachment__progress'
 };
 const ATTACHMENT_MAXWIDTH = '180px';
+const SMALL_ATTACHMENT_SIZE = '16px';
 const ATTACHMENT_SIZE = '20px';
 const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r16wonf3", null, [
     ".r16wonf3{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;position:relative;}"
 ]);
 const buttonBaseStyles = {
     alignItems: 'center',
-    backgroundColor: _reactcomponents.tokens.colorNeutralBackground1,
+    backgroundColor: _reactcomponents.tokens.colorSubtleBackground,
     border: `${_reactcomponents.tokens.strokeWidthThin} solid ${_reactcomponents.tokens.colorNeutralStroke1}`,
     borderRadius: _reactcomponents.tokens.borderRadiusMedium,
     boxSizing: 'border-box',
@@ -53,18 +54,18 @@ const buttonBaseStyles = {
     }),
     verticalAlign: 'middle'
 };
-const usePrimaryActionBaseClassName = (0, _reactcomponents.__resetStyles)("r1ng7ytw", "r154t9rh", [
-    ".r1ng7ytw{align-items:center;background-color:var(--colorNeutralBackground1);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);}",
-    ".r1ng7ytw[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}",
-    ".r154t9rh{align-items:center;background-color:var(--colorNeutralBackground1);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);}",
-    ".r154t9rh[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"
+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 usePrimaryActionStyles = (0, _reactcomponents.__styles)({
     button: {
         eoavqd: "f8491dx",
-        Jwef8y: "f1h648pw",
+        Jwef8y: "f1t94bn6",
         Bi91k9c: "fnwyq0v",
-        ecr2s2: "fwdzr64",
+        ecr2s2: "f1wfn5kd",
         lj723h: "flvvhsy",
         Bbkh6qg: "fkiggi6",
         Cnge2b: "f8zknr1"
@@ -72,11 +73,11 @@ const usePrimaryActionStyles = (0, _reactcomponents.__styles)({
 }, {
     h: [
         ".f8491dx:hover{cursor:pointer;}",
-        ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}",
+        ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
         ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}"
     ],
     a: [
-        ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}",
+        ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}",
         ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"
     ],
     m: [
@@ -94,24 +95,24 @@ const usePrimaryActionStyles = (0, _reactcomponents.__styles)({
         ]
     ]
 });
-const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r1ky29as", "rhkudax", {
+const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r145yi8y", "r151el6p", {
     r: [
-        ".r1ky29as{align-items:center;background-color:var(--colorNeutralBackground1);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);}",
-        ".r1ky29as[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}",
-        ".r1ky29as:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}",
-        ".r1ky29as:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}",
-        ".r1ky29as:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}",
-        ".r1ky29as:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}",
-        ".rhkudax{align-items:center;background-color:var(--colorNeutralBackground1);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);}",
-        ".rhkudax[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}",
-        ".rhkudax:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}",
-        ".rhkudax:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}",
-        ".rhkudax:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}",
-        ".rhkudax:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}"
+        ".r145yi8y{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);}",
+        ".r145yi8y[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}",
+        ".r145yi8y:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}",
+        ".r145yi8y:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}",
+        ".r145yi8y:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}",
+        ".r145yi8y:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}",
+        ".r151el6p{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);}",
+        ".r151el6p[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}",
+        ".r151el6p:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}",
+        ".r151el6p:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}",
+        ".r151el6p:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}",
+        ".r151el6p:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}"
     ],
     s: [
-        "@media (forced-colors: active){.r1ky29as:hover{background-color:HighlightText;}.r1ky29as:active{background-color:HighlightText;}}",
-        "@media (forced-colors: active){.rhkudax:hover{background-color:HighlightText;}.rhkudax:active{background-color:HighlightText;}}"
+        "@media (forced-colors: active){.r145yi8y:hover{background-color:HighlightText;}.r145yi8y:active{background-color:HighlightText;}}",
+        "@media (forced-colors: active){.r151el6p:hover{background-color:HighlightText;}.r151el6p:active{background-color:HighlightText;}}"
     ]
 });
 const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("r1a4a4my", null, [
@@ -156,6 +157,72 @@ const useOverflowStyles = (0, _reactcomponents.__styles)({
         ".fly5x3f{width:100%;}"
     ]
 });
+const useSmallStyles = (0, _reactcomponents.__styles)({
+    primaryAction: {
+        B2u0y6b: "fyv37rf",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1o3rc9c"
+    },
+    media: {
+        Be2twd7: "f4ybsrx",
+        Bqenvij: "fd461yt",
+        Bg96gwp: "f104wqfl",
+        a9b677: "fjw5fx7"
+    },
+    content: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    },
+    dismissButton: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fnsh2i4",
+        B2u0y6b: "fatynhj",
+        Bf4jedk: "fydhda"
+    },
+    dismissIcon: {
+        Be2twd7: "f4ybsrx",
+        Bqenvij: "fzi9ji0",
+        B2u0y6b: "f11qte0n",
+        Bf4jedk: "fy1a5sw"
+    }
+}, {
+    d: [
+        ".fyv37rf{max-width:calc(180px - 16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));}",
+        [
+            ".f1o3rc9c{padding:var(--spacingVerticalXXS) var(--spacingHorizontalSNudge) var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);}",
+            {
+                p: -1
+            }
+        ],
+        ".f4ybsrx{font-size:16px;}",
+        ".fd461yt{height:16px;}",
+        ".f104wqfl{line-height:16px;}",
+        ".fjw5fx7{width:16px;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        [
+            ".fnsh2i4{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXXS);}",
+            {
+                p: -1
+            }
+        ],
+        ".fatynhj{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}",
+        ".fydhda{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}",
+        ".fzi9ji0{height:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));}",
+        ".f11qte0n{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}",
+        ".fy1a5sw{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}"
+    ]
+});
 const useAttachmentStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseClassName = useRootBaseClassName();
@@ -167,15 +234,16 @@ const useAttachmentStyles_unstable = (state)=>{
     const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
     const primaryActionStyles = usePrimaryActionStyles();
     const imageOnlyStyles = useImageOnlyStyles();
-    const { imageOnly, primaryAction } = state;
+    const smallStyles = useSmallStyles();
+    const { imageOnly, primaryAction, size } = state;
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, state.root.className);
-    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
-    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, 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, state.primaryAction.className);
+    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, state.dismissButton.className);
     if (state.media) {
-        state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, state.media.className);
+        state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
     }
-    state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);
-    state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
+    state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, size === 'small' && smallStyles.content, imageOnly && imageOnlyStyles.content, state.content.className);
+    state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissIcon, dismissIconBaseClassName, size === 'small' && smallStyles.dismissIcon, state.dismissIcon.className);
     if (state.progress) {
         state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.progress, progressBarStyles.progress, state.progress.className);
         const bar = _reactcomponents.slot.optional(state.progress.bar, {

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  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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 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.colorNeutralBackground1,\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.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\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.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\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\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 { imageOnly, primaryAction } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\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","useAttachmentStyles_unstable","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","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","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","state","colorNeutralForeground2BrandPressed","dismissButtonBaseClassName","useDismissButtonBaseClassName","mediaBaseClassName","useMediaBaseClassName","contentBaseClassName","colorNeutralForeground2BrandHover","progressBarStyles","useProgressBarStyles","primaryActionStyles","imageOnlyStyles","useImageOnlyStyles","rootBaseClassName","className","mergeClasses","primaryActionBaseClassName","as","isLoading","imageOnly","fontSize","height","lineHeight","width","elementType","useContentBaseClassName","overflowX","textOverflow","whiteSpace","value","undefined","typographyStyles","body1","indeterminateProgressBar","bar","useDismissIconBaseClassName","regularProgressBar","borderRadiusCircular","border"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  slot,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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\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 { imageOnly, primaryAction, size } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\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    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    size === 'small' && smallStyles.dismissButton,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(\n      attachmentClassNames.media,\n      mediaBaseClassName,\n      size === 'small' && smallStyles.media,\n      state.media.className,\n    );\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    size === 'small' && smallStyles.content,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    size === 'small' && smallStyles.dismissIcon,\n    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","justifyContent","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","__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","state","spacingVerticalXXS","primaryActionBaseClassName","useImageOnlyStyles","makeStyles","dismissIconBaseClassName","useProgressBarStyles","imageOnlyStyles","smallStyles","useSmallStyles","overflow","width","className","mergeClasses","rootBaseClassName","size","as","isLoading","primaryActionStyles","imageOnly","dismissButtonBaseClassName","contentBaseClassName","elementType","bar","value","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -19,7 +19,7 @@ const renderAttachmentList_unstable = (state, contextValues)=>{
     const { attachments, overflowMenuProps, root, shouldUseOverflow } = state;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_attachmentListContext.AttachmentListProvider, {
         value: contextValues.attachmentList,
-        children: shouldUseOverflow ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Overflow, {
+        children: shouldUseOverflow && state.overflowMenuButton ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Overflow, {
             ref: root.ref,
             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
                 children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuList, MenuPopover, Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n  const { attachments, overflowMenuProps, root, shouldUseOverflow } = state;\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      {shouldUseOverflow ? (\n        <Overflow ref={root.ref}>\n          <state.root>\n            {root.children}\n            <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n              <state.overflowMenuButton />\n              <MenuPopover>\n                <MenuList>\n                  {attachments.map(attachment => {\n                    return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n                  })}\n                </MenuList>\n              </MenuPopover>\n            </AttachmentOverflowMenu>\n          </state.root>\n        </Overflow>\n      ) : (\n        <state.root />\n      )}\n    </AttachmentListProvider>\n  );\n};\n"],"names":["assertSlots","state","attachments","contextValues","shouldUseOverflow","root","children","positioning","_jsx","Overflow","overflowMenuButton","attachment","MenuList"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBEA;;;eAAAA;;;4BAfF;;iCAE6D;uCACtB;wCACA;4CACI;AAUzCA,MAAAA,gCAAiCC,CAAAA,OAAAA;oCACzBC,EAAAA;UAER,aACiCC,mBAC5BC;sBAGMC,GAAAA,IAAAA,eAAKC,EAAAA,6CAAQ,EAAA;2CACd;sCAAwBC,WAAa,GAAAC,IAAAA,eAAA,EAAAC,yBAAA,EAAA;;;;;+BACnC,GAACR,IAAAA,gBAAAA,EAAMS,8CAAkB,EAAA;;;;uFAGJC,EAAAA,CAAAA;4BAAAA,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,4BAAAA,EAAAA;6EACfC,yBAAA,EAAA;;+FAAwDD,EAAAA,sDAAa,EAAA;;8DACvE;;;;;;;;;gDAOVV,MAACA,IAAAA,EAAMI,CAAAA;;AAIf"}
+{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuList, MenuPopover, Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n  const { attachments, overflowMenuProps, root, shouldUseOverflow } = state;\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      {shouldUseOverflow && state.overflowMenuButton ? (\n        <Overflow ref={root.ref}>\n          <state.root>\n            {root.children}\n            <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n              <state.overflowMenuButton />\n              <MenuPopover>\n                <MenuList>\n                  {attachments.map(attachment => {\n                    return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n                  })}\n                </MenuList>\n              </MenuPopover>\n            </AttachmentOverflowMenu>\n          </state.root>\n        </Overflow>\n      ) : (\n        <state.root />\n      )}\n    </AttachmentListProvider>\n  );\n};\n"],"names":["assertSlots","state","attachments","contextValues","shouldUseOverflow","root","children","positioning","overflowMenuButton","_jsx","Overflow","attachment","MenuList"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBEA;;;eAAAA;;;4BAfF;;iCAE6D;uCACtB;wCACA;4CACI;AAUzCA,MAAAA,gCAAiCC,CAAAA,OAAAA;oCACzBC,EAAAA;UAER,aACiCC,mBAC5BC;sBAGMC,GAAAA,IAAAA,eAAKC,EAAAA,6CAAQ,EAAA;2CACd;uCAAwBC,MAAaC,kBAAA,GAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAC,yBAAA,EAAA;;;;;+BACnC,GAACT,IAAAA,gBAAAA,EAAMO,8CAAkB,EAAA;;;;uFAGJG,EAAAA,CAAAA;4BAAAA,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,4BAAAA,EAAAA;6EACfC,yBAAA,EAAA;;+FAAwDD,EAAAA,sDAAa,EAAA;;8DACvE;;;;;;;;;gDAOVV,MAACA,IAAAA,EAAMI,CAAAA;;AAIf"}

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

@@ -22,14 +22,14 @@ const attachmentOverflowMenuButtonClassNames = {
     root: 'fai-AttachmentOverflowMenuButton',
     progress: 'fai-AttachmentOverflowMenuButton__progress'
 };
-const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rn3o5tq", null, {
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1o7ejxu", null, {
     r: [
-        ".rn3o5tq{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;position:relative;}",
-        ".rn3o5tq:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}",
-        ".rn3o5tq:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"
+        ".r1o7ejxu{color:var(--colorNeutralForeground1);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);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;position:relative;}",
+        ".r1o7ejxu:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2Hover);}",
+        ".r1o7ejxu:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2Pressed);}"
     ],
     s: [
-        "@media (forced-colors: active){.rn3o5tq:hover{background-color:HighlightText;}.rn3o5tq:active{background-color:HighlightText;}}"
+        "@media (forced-colors: active){.r1o7ejxu:hover{background-color:HighlightText;}.r1o7ejxu:active{background-color:HighlightText;}}"
     ]
 });
 const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\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/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentOverflowMenuButtonClassNames","columnGap","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","state","flexWrap","fontFamily","typographyStyles","fontSize","rootBaseClassName","className","fontWeight","justifyContent","mergeClasses","progressBarStyles","padding","tokens","spacingVerticalXS","verticalAlign","position","cursor","backgroundColor","colorNeutralBackground3Hover","colorNeutralForeground2Hover","indeterminateProgressBar","bar","regularProgressBar","colorNeutralForeground2Pressed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,sCAAAA;eAAAA;;IAYXC,8CAAyC;eAAzCA;;;iCApBoE;4CACjC;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,WAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;AAKZN,MAAAA,iDAAyCO,CAAAA;;UAGzCC,oBAAUL;UACVM,oBAAYC,IAAAA,gDAAuBD;UACnCE,IAAAA,CAAAA,SAAUD,GAAAA,IAAAA,6BAAuBC,EAAAA,uCAAQV,IAAA,EAAAW,mBAAAL,MAAAN,IAAA,CAAAY,SAAA;QACzCC,MAAAA,QAAYJ,EAAAA;QACZK,MAAAA,QAAAA,CAAAA,SAAgB,GAAAC,IAAAA,6BAAA,EAAAjB,uCAAAG,QAAA,EAAAe,kBAAAf,QAAA,EAAAK,MAAAL,QAAA,CAAAW,SAAA;QAChBK,MAAAA,MAAYC,qBAAAA,CAAAA,QAAOC,CAAAA,MAAAA,QAAqBD,CAAAA,GAAAA,EAAAA;YACxCE,aAAe;YACfC,iBAAU;QAEV;YACEC,KAAAA;gBACAC,MAAAA,QAAAA,CAAiBL,KAAAA,KAAOM,WAAAA;gBACxBpB,IAAAA,SAAOc,GAAOO,IAAAA,6BAAAA,EAAAA,kBAA4BC,wBAAA,EAAAC,IAAAf,SAAA;YAC5C,OAAA;gBACAe,IAAAf,SAAW,GAAAG,IAAAA,6BAAA,EAAAC,kBAAAY,kBAAA,EAAAD,IAAAf,SAAA;;kBAETR,QAAOc,CAAAA,GAAOW,GAAAA;QAChB;;WAEEvB;2EAEA"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorSubtleBackground,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentOverflowMenuButtonClassNames","columnGap","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","state","flexWrap","fontFamily","typographyStyles","fontSize","rootBaseClassName","className","fontWeight","justifyContent","mergeClasses","progressBarStyles","padding","tokens","spacingVerticalXS","verticalAlign","position","cursor","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground2Hover","indeterminateProgressBar","bar","regularProgressBar","colorNeutralForeground2Pressed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,sCAAAA;eAAAA;;IAYXC,8CAAyC;eAAzCA;;;iCApBoE;4CACjC;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;AAKZN,MAAAA,iDAAyCO,CAAAA;;UAGzCC,oBAAUL;UACVM,oBAAYC,IAAAA,gDAAuBD;UACnCE,IAAAA,CAAAA,SAAUD,GAAAA,IAAAA,6BAAuBC,EAAAA,uCAAQV,IAAA,EAAAW,mBAAAL,MAAAN,IAAA,CAAAY,SAAA;QACzCC,MAAAA,QAAYJ,EAAAA;QACZK,MAAAA,QAAAA,CAAAA,SAAgB,GAAAC,IAAAA,6BAAA,EAAAjB,uCAAAG,QAAA,EAAAe,kBAAAf,QAAA,EAAAK,MAAAL,QAAA,CAAAW,SAAA;QAChBK,MAAAA,MAAYC,qBAAAA,CAAAA,QAAOC,CAAAA,MAAAA,QAAqBD,CAAAA,GAAAA,EAAAA;YACxCE,aAAe;YACfC,iBAAU;QAEV;YACEC,KAAAA;gBACAC,MAAAA,QAAAA,CAAiBL,KAAAA,KAAOM,WAAAA;gBACxBpB,IAAAA,SAAOc,GAAOO,IAAAA,6BAAAA,EAAAA,kBAA4BC,wBAAA,EAAAC,IAAAf,SAAA;YAC5C,OAAA;gBACAe,IAAAf,SAAW,GAAAG,IAAAA,6BAAA,EAAAC,kBAAAY,kBAAA,EAAAD,IAAAf,SAAA;;kBAETR,QAAOc,CAAAA,GAAOW,GAAAA;QAChB;;WAEEvB;2EAEA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.10.1",
+  "version": "0.10.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.9.1",
-    "@fluentui-copilot/react-utilities": "^0.0.3",
+    "@fluentui-copilot/react-provider": "^0.9.3",
+    "@fluentui-copilot/react-utilities": "^0.0.4",
     "@fluentui-copilot/tokens": "^0.3.3",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
-    "@fluentui/react-components": ">=9.54.10 <10.0.0",
-    "@fluentui/react-context-selector": ">=9.1.65 <10.0.0",
-    "@fluentui/react-icons": ">=2.0.247 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.42 <10.0.0",
-    "@fluentui/react-shared-contexts": ">=9.20.0 <10.0.0",
-    "@fluentui/react-utilities": ">=9.18.13 <10.0.0",
+    "@fluentui/react-components": ">=9.55.1 <10.0.0",
+    "@fluentui/react-context-selector": ">=9.1.68 <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",
     "@types/react": ">=16.14.0 <19.0.0",
     "@types/react-dom": ">=16.9.8 <19.0.0",
     "react": ">=16.14.0 <19.0.0",