@fluentui-copilot/react-attachments 0.0.0-nightly-20240419-1757-e4bb42dc.1 → 0.0.0-nightly-20240424-0405-f2067016.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Fri, 19 Apr 2024 18:02:51 GMT",
-      "tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-20240419-1757-e4bb42dc.1",
-      "version": "0.0.0-nightly-20240419-1757-e4bb42dc.1",
+      "date": "Wed, 24 Apr 2024 04:10:33 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-20240424-0405-f2067016.1",
+      "version": "0.0.0-nightly-20240424-0405-f2067016.1",
       "comments": {
         "prerelease": [
           {
@@ -16,8 +16,8 @@
           {
             "author": "beachball",
             "package": "@fluentui-copilot/react-attachments",
-            "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240419-1757-e4bb42dc.1",
-            "commit": "96af6d3d0f1b127fb32cf4c4da5cb5c2538d2605"
+            "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240424-0405-f2067016.1",
+            "commit": "6d777f0fe019d3253f818ecb52b3d31e7b0196b3"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,18 +1,18 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Fri, 19 Apr 2024 18:02:51 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Apr 2024 04:10:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240419-1757-e4bb42dc.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.0.0-nightly-20240419-1757-e4bb42dc.1)
+## [0.0.0-nightly-20240424-0405-f2067016.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.0.0-nightly-20240424-0405-f2067016.1)
 
-Fri, 19 Apr 2024 18:02:51 GMT 
-[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.0..@fluentui-copilot/react-attachments_v0.0.0-nightly-20240419-1757-e4bb42dc.1)
+Wed, 24 Apr 2024 04:10:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.0..@fluentui-copilot/react-attachments_v0.0.0-nightly-20240424-0405-f2067016.1)
 
 ### Changes
 
 - Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240419-1757-e4bb42dc.1 ([commit](https://github.com/microsoft/fluentai/commit/96af6d3d0f1b127fb32cf4c4da5cb5c2538d2605) by beachball)
+- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240424-0405-f2067016.1 ([commit](https://github.com/microsoft/fluentai/commit/6d777f0fe019d3253f818ecb52b3d31e7b0196b3) by beachball)
 
 ## [0.9.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.0)
 

package/dist/index.d.ts

@@ -96,7 +96,7 @@ export declare const attachmentOverflowMenuItemClassNames: SlotClassNames<Attach
 /**
  * AttachmentOverflowMenuItem Props
  */
-export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> & Pick<AttachmentProps, 'id' | 'media'>;
+export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> & Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;
 
 export declare type AttachmentOverflowMenuItemSlots = {
     root: NonNullable<Slot<typeof MenuItem>>;
@@ -105,7 +105,7 @@ export declare type AttachmentOverflowMenuItemSlots = {
 /**
  * State used in rendering AttachmentOverflowMenuItem
  */
-export declare type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> & {
+export declare type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> & Pick<AttachmentOverflowMenuItemProps, 'imageOnly'> & {
     isVisible: boolean;
 };
 
@@ -132,6 +132,7 @@ export declare type AttachmentOverflowMenuState = MenuState & {
  */
 export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {
     id: string;
+    imageOnly?: boolean;
 };
 
 export declare type AttachmentSlots = {
@@ -146,7 +147,7 @@ export declare type AttachmentSlots = {
 /**
  * State used in rendering Attachment
  */
-export declare type AttachmentState = ComponentState<AttachmentSlots>;
+export declare type AttachmentState = ComponentState<AttachmentSlots> & Pick<AttachmentProps, 'imageOnly'>;
 
 /**
  * @deprecated use new Attachment component exported from @fluentui-copilot/react-attachments package instead.

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

@@ -1 +1 @@
-{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, 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};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  id: string;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots>;\n"],"names":[],"mappings":"AAAA,WAqB8D"}
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, 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};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  id: string;\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> & Pick<AttachmentProps, 'imageOnly'>;\n"],"names":[],"mappings":"AAAA,WAsBmG"}

package/lib/components/Attachment/renderAttachment.js

@@ -7,7 +7,7 @@ export const renderAttachment_unstable = state => {
   assertSlots(state);
   return /*#__PURE__*/_jsxs(state.root, {
     children: [/*#__PURE__*/_jsxs(state.primaryAction, {
-      children: [state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {})]
+      children: [state.media && !state.imageOnly && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {})]
     }), /*#__PURE__*/_jsx(state.dismissButton, {
       children: /*#__PURE__*/_jsx(state.dismissIcon, {})
     })]

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

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && <state.media />}\n        <state.content />\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAttachment_unstable","state","root","primaryAction","media","content","dismissButton","dismissIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,KAAK,kBAAI,KAACH,MAAMG,KAAK;kCAC5B,KAACH,MAAMI,OAAO;;;0BAEhB,KAACJ,MAAMK,aAAa;0BAClB,cAAA,KAACL,MAAMM,WAAW;;;;AAI1B,EAAE"}
+{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAttachment_unstable","state","root","primaryAction","media","imageOnly","content","dismissButton","dismissIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,KAAK,IAAI,CAACH,MAAMI,SAAS,kBAAI,KAACJ,MAAMG,KAAK;kCAChD,KAACH,MAAMK,OAAO;;;0BAEhB,KAACL,MAAMM,aAAa;0BAClB,cAAA,KAACN,MAAMO,WAAW;;;;AAI1B,EAAE"}

package/lib/components/Attachment/useAttachment.js

@@ -12,6 +12,9 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
  * @param ref - reference to root HTMLElement of Attachment
  */
 export const useAttachment_unstable = (props, ref) => {
+  const {
+    imageOnly
+  } = props;
   const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
   const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);
   const root = slot.always(getIntrinsicElementProps('div', {
@@ -61,7 +64,8 @@ export const useAttachment_unstable = (props, ref) => {
     dismissButton,
     media,
     content,
-    dismissIcon
+    dismissIcon,
+    imageOnly
   };
   if (state.primaryAction.as === 'span') {
     state.components.primaryAction = 'span';

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } 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 DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\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>) => onAttachmentDismiss?.(ev, { id: props.id }),\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: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  const state: AttachmentState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","DismissIcon","onAttachmentDismiss","context","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","id","media","optional","content","children","dismissIcon","state","components","as"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AAC5F,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAMC,cAAcL,WAAWD,iBAAiBD;IAEhD,MAAMQ,sBAAsBL,kCAAkCM,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOX,KAAKY,MAAM,CACtBd,yBAAyB,OAAO;QAC9BS;QACA,GAAGD,KAAK;IACV,IACA;QAAEO,aAAa;IAAM;IAGvB,MAAMC,gBAAgBd,KAAKY,MAAM,CAACN,MAAMQ,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBf,KAAKY,MAAM,CAACN,MAAMS,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGlB,eACtBgB,cAAcE,OAAO,EACrB,CAACC,KAAgET,gCAAAA,0CAAAA,oBAAsBS,IAAI;YAAEC,IAAIb,MAAMa,EAAE;QAAC;IAG5G,MAAMC,QAAQpB,KAAKqB,QAAQ,CAACf,MAAMc,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMS,UAAUtB,KAAKY,MAAM,CAACN,MAAMgB,OAAO,EAAE;QACzCN,cAAc;YACZO,UAAUjB,MAAMiB,QAAQ;QAC1B;QACAV,aAAa;IACf;IAEA,MAAMW,cAAcxB,KAAKY,MAAM,CAACN,MAAMkB,WAAW,EAAE;QACjDR,cAAc;YACZO,wBAAU,oBAACf;QACb;QACAK,aAAa;IACf;IAEA,MAAMY,QAAyB;QAC7BC,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPE,SAAS;YACTE,aAAa;QACf;QAEAb;QACAG;QACAC;QACAK;QACAE;QACAE;IACF;IAEA,IAAIC,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 { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } 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 { imageOnly } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\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>) => onAttachmentDismiss?.(ev, { id: props.id }),\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: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  const state: AttachmentState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    imageOnly,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","imageOnly","DismissIcon","onAttachmentDismiss","context","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","id","media","optional","content","children","dismissIcon","state","components","as"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AAC5F,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,EAAE,GAAGF;IACtB,MAAMG,cAAcN,WAAWD,iBAAiBD;IAEhD,MAAMS,sBAAsBN,kCAAkCO,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOZ,KAAKa,MAAM,CACtBf,yBAAyB,OAAO;QAC9BS;QACA,GAAGD,KAAK;IACV,IACA;QAAEQ,aAAa;IAAM;IAGvB,MAAMC,gBAAgBf,KAAKa,MAAM,CAACP,MAAMS,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBhB,KAAKa,MAAM,CAACP,MAAMU,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGnB,eACtBiB,cAAcE,OAAO,EACrB,CAACC,KAAgET,gCAAAA,0CAAAA,oBAAsBS,IAAI;YAAEC,IAAId,MAAMc,EAAE;QAAC;IAG5G,MAAMC,QAAQrB,KAAKsB,QAAQ,CAAChB,MAAMe,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMS,UAAUvB,KAAKa,MAAM,CAACP,MAAMiB,OAAO,EAAE;QACzCN,cAAc;YACZO,UAAUlB,MAAMkB,QAAQ;QAC1B;QACAV,aAAa;IACf;IAEA,MAAMW,cAAczB,KAAKa,MAAM,CAACP,MAAMmB,WAAW,EAAE;QACjDR,cAAc;YACZO,wBAAU,oBAACf;QACb;QACAK,aAAa;IACf;IAEA,MAAMY,QAAyB;QAC7BC,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPE,SAAS;YACTE,aAAa;QACf;QAEAb;QACAG;QACAC;QACAK;QACAE;QACAE;QACAjB;IACF;IAEA,IAAIkB,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}

package/lib/components/Attachment/useAttachmentStyles.js

@@ -9,7 +9,7 @@ export const attachmentClassNames = {
 };
 const ATTACHMENT_MAXWIDTH = '180px';
 const ATTACHMENT_SIZE = '20px';
-const useRootBaseClassName = __resetStyles("rj3sqpg", null, [".rj3sqpg{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;}"]);
+const useRootBaseClassName = __resetStyles("rmfolg5", null, [".rmfolg5{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;}"]);
 const buttonBaseStyles = {
   alignItems: 'center',
   backgroundColor: tokens.colorNeutralBackground1,
@@ -55,6 +55,19 @@ const useDismissButtonBaseClassName = __resetStyles("r1cf2ehf", "rhq1520", {
 const useMediaBaseClassName = __resetStyles("rz1lum2", null, [".rz1lum2{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);}"]);
 const useDismissIconBaseClassName = __resetStyles("r176grtk", null, [".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"]);
+const useImageOnlyStyles = __styles({
+  primaryAction: {
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  },
+  content: {
+    Bg96gwp: "fez10in"
+  }
+}, {
+  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fez10in{line-height:0;}"]
+});
 /**
  * Apply styling to the Attachment slots based on the state
  */
@@ -66,16 +79,18 @@ export const useAttachmentStyles_unstable = state => {
   const contentBaseClassName = useContentBaseClassName();
   const dismissIconBaseClassName = useDismissIconBaseClassName();
   const primaryActionStyles = usePrimaryActionStyles();
+  const imageOnlyStyles = useImageOnlyStyles();
   const {
+    imageOnly,
     primaryAction
   } = state;
   state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);
-  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, state.primaryAction.className);
+  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
   state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
   if (state.media) {
     state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);
   }
-  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, state.content.className);
+  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);
   state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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};\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});\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    ...shorthands.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  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\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\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 primaryActionStyles = usePrimaryActionStyles();\n  const { 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' && primaryActionStyles.button,\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(attachmentClassNames.content, contentBaseClassName, state.content.className);\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","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","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","primaryActionStyles","className","as"],"mappings":"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"}
+{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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};\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});\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    ...shorthands.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  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    ...shorthands.padding(0),\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\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 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' && 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  return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","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","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","primaryActionStyles","imageOnlyStyles","imageOnly","className","as"],"mappings":"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"}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.js

@@ -2,9 +2,9 @@ import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui
 export const attachmentOverflowMenuButtonClassNames = {
   root: 'fai-AttachmentOverflowMenuButton'
 };
-const useRootBaseClassName = __resetStyles("r1hzuvbo", null, {
-  r: [".r1hzuvbo{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(--spacingVerticalS);vertical-align:middle;}", ".r1hzuvbo:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}", ".r1hzuvbo:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"],
-  s: ["@media (forced-colors: active){.r1hzuvbo:hover{background-color:HighlightText;}.r1hzuvbo:active{background-color:HighlightText;}}"]
+const useRootBaseClassName = __resetStyles("rkv09vy", null, {
+  r: [".rkv09vy{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(--spacingVerticalS);vertical-align:middle;align-self:end;}", ".rkv09vy:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}", ".rkv09vy:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"],
+  s: ["@media (forced-colors: active){.rkv09vy:hover{background-color:HighlightText;}.rkv09vy:active{background-color:HighlightText;}}"]
 });
 /**
  * Apply styling to the AttachmentOverflowMenuButton slots based on the state

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\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};\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.spacingVerticalS,\n  verticalAlign: 'middle',\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 * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","attachmentOverflowMenuButtonClassNames","root","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAOrG,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,OAAOL,OAAOM,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBR,OAAOS,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEV,OAAOW,eAAe,CAAC,OAAO,EAAEX,OAAOY,mBAAmB,CAAC,CAAC;IACvEC,cAAcb,OAAOc,kBAAkB;IACvCC,WAAW;IACXC,WAAWhB,OAAOiB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYpB,iBAAiBqB,KAAK,CAACD,UAAU;IAC7CE,UAAUtB,iBAAiBqB,KAAK,CAACC,QAAQ;IACzCC,YAAYvB,iBAAiBqB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS1B,OAAO2B,gBAAgB;IAChCC,eAAe;IAEf,UAAU;QACRV,QAAQ;QACRV,iBAAiBR,OAAO6B,4BAA4B;QACpDxB,OAAOL,OAAO8B,4BAA4B;IAC5C;IACA,WAAW;QACTtB,iBAAiBR,OAAO+B,8BAA8B;QACtD1B,OAAOL,OAAOgC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACRxB,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AACA;;CAEC,GACD,OAAO,MAAMyB,iDAAiD,CAC5DC;IAEA,MAAMC,oBAAoB/B;IAE1B8B,MAAM/B,IAAI,CAACiC,SAAS,GAAGrC,aACrBG,uCAAuCC,IAAI,EAC3CgC,mBACAD,MAAM/B,IAAI,CAACiC,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\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};\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.spacingVerticalS,\n  verticalAlign: 'middle',\n  alignSelf: 'end',\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 * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","attachmentOverflowMenuButtonClassNames","root","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","alignSelf","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAOrG,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,OAAOL,OAAOM,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBR,OAAOS,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEV,OAAOW,eAAe,CAAC,OAAO,EAAEX,OAAOY,mBAAmB,CAAC,CAAC;IACvEC,cAAcb,OAAOc,kBAAkB;IACvCC,WAAW;IACXC,WAAWhB,OAAOiB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYpB,iBAAiBqB,KAAK,CAACD,UAAU;IAC7CE,UAAUtB,iBAAiBqB,KAAK,CAACC,QAAQ;IACzCC,YAAYvB,iBAAiBqB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS1B,OAAO2B,gBAAgB;IAChCC,eAAe;IACfC,WAAW;IAEX,UAAU;QACRX,QAAQ;QACRV,iBAAiBR,OAAO8B,4BAA4B;QACpDzB,OAAOL,OAAO+B,4BAA4B;IAC5C;IACA,WAAW;QACTvB,iBAAiBR,OAAOgC,8BAA8B;QACtD3B,OAAOL,OAAOiC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACRzB,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AACA;;CAEC,GACD,OAAO,MAAM0B,iDAAiD,CAC5DC;IAEA,MAAMC,oBAAoBhC;IAE1B+B,MAAMhC,IAAI,CAACkC,SAAS,GAAGtC,aACrBG,uCAAuCC,IAAI,EAC3CiC,mBACAD,MAAMhC,IAAI,CAACkC,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

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

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js

@@ -14,6 +14,7 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
 export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
   const {
     id,
+    imageOnly,
     media
   } = props;
   const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
@@ -35,7 +36,8 @@ export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
       root: MenuItem
     },
     root,
-    isVisible
+    isVisible,
+    imageOnly
   };
 };
 //# sourceMappingURL=useAttachmentOverflowMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  const { id, media } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const isVisible = useIsOverflowItemVisible(id);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <DismissIcon />, ...props },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev =>\n    onAttachmentDismiss?.(ev, {\n      id,\n    }),\n  );\n\n  return {\n    components: {\n      root: MenuItem,\n    },\n    root,\n    isVisible,\n  };\n};\n"],"names":["React","MenuItem","mergeCallbacks","slot","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","id","media","DismissIcon","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,EAAEC,cAAc,EAAEC,IAAI,EAAEC,wBAAwB,QAAQ,6BAA6B;AACtG,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,KAAK,EAAE,GAAGH;IACtB,MAAMI,cAAcP,WAAWF,iBAAiBC;IAChD,MAAMS,YAAYX,yBAAyBQ;IAE3C,MAAMI,sBAAsBR,kCAAkCS,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOf,KAAKgB,MAAM,CACtB;QAAER;QAAKS,MAAMP;QAAOQ,gCAAkB,oBAACP;QAAgB,GAAGJ,KAAK;IAAC,GAChE;QAAEY,aAAarB;IAAS;IAE1BiB,KAAKK,OAAO,GAAGrB,eAAegB,KAAKK,OAAO,EAAEC,CAAAA,KAC1CR,gCAAAA,0CAAAA,oBAAsBQ,IAAI;YACxBZ;QACF;IAGF,OAAO;QACLa,YAAY;YACVP,MAAMjB;QACR;QACAiB;QACAH;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  const { id, imageOnly, media } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const isVisible = useIsOverflowItemVisible(id);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <DismissIcon />, ...props },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev =>\n    onAttachmentDismiss?.(ev, {\n      id,\n    }),\n  );\n\n  return {\n    components: {\n      root: MenuItem,\n    },\n    root,\n    isVisible,\n    imageOnly,\n  };\n};\n"],"names":["React","MenuItem","mergeCallbacks","slot","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","id","imageOnly","media","DismissIcon","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,EAAEC,cAAc,EAAEC,IAAI,EAAEC,wBAAwB,QAAQ,6BAA6B;AACtG,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGJ;IACjC,MAAMK,cAAcR,WAAWF,iBAAiBC;IAChD,MAAMU,YAAYZ,yBAAyBQ;IAE3C,MAAMK,sBAAsBT,kCAAkCU,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOhB,KAAKiB,MAAM,CACtB;QAAET;QAAKU,MAAMP;QAAOQ,gCAAkB,oBAACP;QAAgB,GAAGL,KAAK;IAAC,GAChE;QAAEa,aAAatB;IAAS;IAE1BkB,KAAKK,OAAO,GAAGtB,eAAeiB,KAAKK,OAAO,EAAEC,CAAAA,KAC1CR,gCAAAA,0CAAAA,oBAAsBQ,IAAI;YACxBb;QACF;IAGF,OAAO;QACLc,YAAY;YACVP,MAAMlB;QACR;QACAkB;QACAH;QACAH;IACF;AACF,EAAE"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.js

@@ -1,14 +1,25 @@
-import { __resetStyles, mergeClasses } from '@fluentui/react-components';
+import { __resetStyles, __styles, mergeClasses } from '@fluentui/react-components';
 export const attachmentOverflowMenuItemClassNames = {
   root: 'fai-AttachmentOverflowMenuItem'
 };
 const useRootBaseClassName = __resetStyles("r0", null, []);
+const useStyles = __styles({
+  imageOnly: {
+    Bt984gj: "f122n59"
+  }
+}, {
+  d: [".f122n59{align-items:center;}"]
+});
 /**
  * Apply styling to the AttachmentList slots based on the state
  */
 export const useAttachmentOverflowMenuItemStyles_unstable = state => {
+  const {
+    imageOnly
+  } = state;
   const rootBaseClassName = useRootBaseClassName();
-  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, state.root.className);
+  const styles = useStyles();
+  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, imageOnly && styles.imageOnly, state.root.className);
   return state;
 };
 //# sourceMappingURL=useAttachmentOverflowMenuItemStyles.js.map

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n};\n\nconst useRootBaseClassName = makeResetStyles({});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","attachmentOverflowMenuItemClassNames","root","useRootBaseClassName","useAttachmentOverflowMenuItemStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAO3E,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBJ,gBAAgB,CAAC;AAE9C;;CAEC,GACD,OAAO,MAAMK,+CAA+C,CAC1DC;IAEA,MAAMC,oBAAoBH;IAE1BE,MAAMH,IAAI,CAACK,SAAS,GAAGP,aACrBC,qCAAqCC,IAAI,EACzCI,mBACAD,MAAMH,IAAI,CAACK,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n};\n\nconst useRootBaseClassName = makeResetStyles({});\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  const { imageOnly } = state;\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    rootBaseClassName,\n    imageOnly && styles.imageOnly,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","attachmentOverflowMenuItemClassNames","root","useRootBaseClassName","useStyles","imageOnly","alignItems","useAttachmentOverflowMenuItemStyles_unstable","state","rootBaseClassName","styles","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAOvF,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBL,gBAAgB,CAAC;AAC9C,MAAMM,YAAYL,WAAW;IAC3BM,WAAW;QACTC,YAAY;IACd;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,oBAAoBN;IAC1B,MAAMO,SAASN;IAEfI,MAAMN,IAAI,CAACS,SAAS,GAAGX,aACrBC,qCAAqCC,IAAI,EACzCO,mBACAJ,aAAaK,OAAOL,SAAS,EAC7BG,MAAMN,IAAI,CAACS,SAAS;IAGtB,OAAOH;AACT,EAAE"}

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

@@ -16,7 +16,7 @@ const renderAttachment_unstable = (state)=>{
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.primaryAction, {
                 children: [
-                    state.media && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {}),
+                    state.media && !state.imageOnly && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {}),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {})
                 ]
             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachment.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-components';\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = state => {\n  assertSlots(state);\n  return /*#__PURE__*/_jsxs(state.root, {\n    children: [/*#__PURE__*/_jsxs(state.primaryAction, {\n      children: [state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {})]\n    }), /*#__PURE__*/_jsx(state.dismissButton, {\n      children: /*#__PURE__*/_jsx(state.dismissIcon, {})\n    })]\n  });\n};\n//# sourceMappingURL=renderAttachment.js.map"],"names":["renderAttachment_unstable","state","assertSlots","_jsxs","root","children","primaryAction","media","_jsx","content","dismissButton","dismissIcon"],"mappings":";;;;+BAKaA;;;eAAAA;;;4BAL8B;iCACf;AAIrB,MAAMA,4BAA4BC,CAAAA;IACvCC,IAAAA,4BAAW,EAACD;IACZ,OAAO,WAAW,GAAEE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACpCC,UAAU;YAAC,WAAW,GAAEF,IAAAA,gBAAK,EAACF,MAAMK,aAAa,EAAE;gBACjDD,UAAU;oBAACJ,MAAMM,KAAK,IAAI,WAAW,GAAEC,IAAAA,eAAI,EAACP,MAAMM,KAAK,EAAE,CAAC;oBAAI,WAAW,GAAEC,IAAAA,eAAI,EAACP,MAAMQ,OAAO,EAAE,CAAC;iBAAG;YACrG;YAAI,WAAW,GAAED,IAAAA,eAAI,EAACP,MAAMS,aAAa,EAAE;gBACzCL,UAAU,WAAW,GAAEG,IAAAA,eAAI,EAACP,MAAMU,WAAW,EAAE,CAAC;YAClD;SAAG;IACL;AACF,GACA,4CAA4C"}
+{"version":3,"sources":["renderAttachment.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-components';\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = state => {\n  assertSlots(state);\n  return /*#__PURE__*/_jsxs(state.root, {\n    children: [/*#__PURE__*/_jsxs(state.primaryAction, {\n      children: [state.media && !state.imageOnly && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {})]\n    }), /*#__PURE__*/_jsx(state.dismissButton, {\n      children: /*#__PURE__*/_jsx(state.dismissIcon, {})\n    })]\n  });\n};\n//# sourceMappingURL=renderAttachment.js.map"],"names":["renderAttachment_unstable","state","assertSlots","_jsxs","root","children","primaryAction","media","imageOnly","_jsx","content","dismissButton","dismissIcon"],"mappings":";;;;+BAKaA;;;eAAAA;;;4BAL8B;iCACf;AAIrB,MAAMA,4BAA4BC,CAAAA;IACvCC,IAAAA,4BAAW,EAACD;IACZ,OAAO,WAAW,GAAEE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACpCC,UAAU;YAAC,WAAW,GAAEF,IAAAA,gBAAK,EAACF,MAAMK,aAAa,EAAE;gBACjDD,UAAU;oBAACJ,MAAMM,KAAK,IAAI,CAACN,MAAMO,SAAS,IAAI,WAAW,GAAEC,IAAAA,eAAI,EAACR,MAAMM,KAAK,EAAE,CAAC;oBAAI,WAAW,GAAEE,IAAAA,eAAI,EAACR,MAAMS,OAAO,EAAE,CAAC;iBAAG;YACzH;YAAI,WAAW,GAAED,IAAAA,eAAI,EAACR,MAAMU,aAAa,EAAE;gBACzCN,UAAU,WAAW,GAAEI,IAAAA,eAAI,EAACR,MAAMW,WAAW,EAAE,CAAC;YAClD;SAAG;IACL;AACF,GACA,4CAA4C"}

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

@@ -14,6 +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 { imageOnly } = props;
     const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
     const onAttachmentDismiss = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context.onAttachmentDismiss);
     const root = _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
@@ -63,7 +64,8 @@ const useAttachment_unstable = (props, ref)=>{
         dismissButton,
         media,
         content,
-        dismissIcon
+        dismissIcon,
+        imageOnly
     };
     if (state.primaryAction.as === 'span') {
         state.components.primaryAction = 'span';

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachment.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\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, ref) => {\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n  const root = slot.always(getIntrinsicElementProps('div', {\n    ref,\n    ...props\n  }), {\n    elementType: 'div'\n  });\n  const primaryAction = slot.always(props.primaryAction, {\n    elementType: 'button'\n  });\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: {\n      'aria-label': 'Dismiss'\n    },\n    elementType: 'button'\n  });\n  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {\n    id: props.id\n  }));\n  const media = slot.optional(props.media, {\n    elementType: 'span'\n  });\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children\n    },\n    elementType: 'span'\n  });\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: /*#__PURE__*/React.createElement(DismissIcon, null)\n    },\n    elementType: 'span'\n  });\n  const state = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span'\n    },\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon\n  };\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n  return state;\n};\n//# sourceMappingURL=useAttachment.js.map"],"names":["useAttachment_unstable","props","ref","DismissIcon","bundleIcon","Dismiss20Filled","Dismiss20Regular","onAttachmentDismiss","useAttachmentListContext_unstable","context","root","slot","always","getIntrinsicElementProps","elementType","primaryAction","dismissButton","defaultProps","onClick","mergeCallbacks","ev","id","media","optional","content","children","dismissIcon","React","createElement","state","components","as"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;iCACwC;4BACD;uCACZ;AAU3C,MAAMA,yBAAyB,CAACC,OAAOC;IAC5C,MAAMC,cAAcC,IAAAA,sBAAU,EAACC,2BAAe,EAAEC,4BAAgB;IAChE,MAAMC,sBAAsBC,IAAAA,wDAAiC,EAACC,CAAAA,UAAWA,QAAQF,mBAAmB;IACpG,MAAMG,OAAOC,qBAAI,CAACC,MAAM,CAACC,IAAAA,yCAAwB,EAAC,OAAO;QACvDX;QACA,GAAGD,KAAK;IACV,IAAI;QACFa,aAAa;IACf;IACA,MAAMC,gBAAgBJ,qBAAI,CAACC,MAAM,CAACX,MAAMc,aAAa,EAAE;QACrDD,aAAa;IACf;IACA,MAAME,gBAAgBL,qBAAI,CAACC,MAAM,CAACX,MAAMe,aAAa,EAAE;QACrDC,cAAc;YACZ,cAAc;QAChB;QACAH,aAAa;IACf;IACAE,cAAcE,OAAO,GAAGC,IAAAA,+BAAc,EAACH,cAAcE,OAAO,EAAEE,CAAAA,KAAMb,wBAAwB,QAAQA,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBa,IAAI;YACpKC,IAAIpB,MAAMoB,EAAE;QACd;IACA,MAAMC,QAAQX,qBAAI,CAACY,QAAQ,CAACtB,MAAMqB,KAAK,EAAE;QACvCR,aAAa;IACf;IACA,MAAMU,UAAUb,qBAAI,CAACC,MAAM,CAACX,MAAMuB,OAAO,EAAE;QACzCP,cAAc;YACZQ,UAAUxB,MAAMwB,QAAQ;QAC1B;QACAX,aAAa;IACf;IACA,MAAMY,cAAcf,qBAAI,CAACC,MAAM,CAACX,MAAMyB,WAAW,EAAE;QACjDT,cAAc;YACZQ,UAAU,WAAW,GAAEE,OAAMC,aAAa,CAACzB,aAAa;QAC1D;QACAW,aAAa;IACf;IACA,MAAMe,QAAQ;QACZC,YAAY;YACVpB,MAAM;YACNK,eAAe;YACfC,eAAe;YACfM,OAAO;YACPE,SAAS;YACTE,aAAa;QACf;QACAhB;QACAK;QACAC;QACAM;QACAE;QACAE;IACF;IACA,IAAIG,MAAMd,aAAa,CAACgB,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACf,aAAa,GAAG;IACnC;IACA,OAAOc;AACT,GACA,yCAAyC"}
+{"version":3,"sources":["useAttachment.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\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, ref) => {\n  const {\n    imageOnly\n  } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n  const root = slot.always(getIntrinsicElementProps('div', {\n    ref,\n    ...props\n  }), {\n    elementType: 'div'\n  });\n  const primaryAction = slot.always(props.primaryAction, {\n    elementType: 'button'\n  });\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: {\n      'aria-label': 'Dismiss'\n    },\n    elementType: 'button'\n  });\n  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {\n    id: props.id\n  }));\n  const media = slot.optional(props.media, {\n    elementType: 'span'\n  });\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children\n    },\n    elementType: 'span'\n  });\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: /*#__PURE__*/React.createElement(DismissIcon, null)\n    },\n    elementType: 'span'\n  });\n  const state = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span'\n    },\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    imageOnly\n  };\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n  return state;\n};\n//# sourceMappingURL=useAttachment.js.map"],"names":["useAttachment_unstable","props","ref","imageOnly","DismissIcon","bundleIcon","Dismiss20Filled","Dismiss20Regular","onAttachmentDismiss","useAttachmentListContext_unstable","context","root","slot","always","getIntrinsicElementProps","elementType","primaryAction","dismissButton","defaultProps","onClick","mergeCallbacks","ev","id","media","optional","content","children","dismissIcon","React","createElement","state","components","as"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;iCACwC;4BACD;uCACZ;AAU3C,MAAMA,yBAAyB,CAACC,OAAOC;IAC5C,MAAM,EACJC,SAAS,EACV,GAAGF;IACJ,MAAMG,cAAcC,IAAAA,sBAAU,EAACC,2BAAe,EAAEC,4BAAgB;IAChE,MAAMC,sBAAsBC,IAAAA,wDAAiC,EAACC,CAAAA,UAAWA,QAAQF,mBAAmB;IACpG,MAAMG,OAAOC,qBAAI,CAACC,MAAM,CAACC,IAAAA,yCAAwB,EAAC,OAAO;QACvDZ;QACA,GAAGD,KAAK;IACV,IAAI;QACFc,aAAa;IACf;IACA,MAAMC,gBAAgBJ,qBAAI,CAACC,MAAM,CAACZ,MAAMe,aAAa,EAAE;QACrDD,aAAa;IACf;IACA,MAAME,gBAAgBL,qBAAI,CAACC,MAAM,CAACZ,MAAMgB,aAAa,EAAE;QACrDC,cAAc;YACZ,cAAc;QAChB;QACAH,aAAa;IACf;IACAE,cAAcE,OAAO,GAAGC,IAAAA,+BAAc,EAACH,cAAcE,OAAO,EAAEE,CAAAA,KAAMb,wBAAwB,QAAQA,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBa,IAAI;YACpKC,IAAIrB,MAAMqB,EAAE;QACd;IACA,MAAMC,QAAQX,qBAAI,CAACY,QAAQ,CAACvB,MAAMsB,KAAK,EAAE;QACvCR,aAAa;IACf;IACA,MAAMU,UAAUb,qBAAI,CAACC,MAAM,CAACZ,MAAMwB,OAAO,EAAE;QACzCP,cAAc;YACZQ,UAAUzB,MAAMyB,QAAQ;QAC1B;QACAX,aAAa;IACf;IACA,MAAMY,cAAcf,qBAAI,CAACC,MAAM,CAACZ,MAAM0B,WAAW,EAAE;QACjDT,cAAc;YACZQ,UAAU,WAAW,GAAEE,OAAMC,aAAa,CAACzB,aAAa;QAC1D;QACAW,aAAa;IACf;IACA,MAAMe,QAAQ;QACZC,YAAY;YACVpB,MAAM;YACNK,eAAe;YACfC,eAAe;YACfM,OAAO;YACPE,SAAS;YACTE,aAAa;QACf;QACAhB;QACAK;QACAC;QACAM;QACAE;QACAE;QACAxB;IACF;IACA,IAAI2B,MAAMd,aAAa,CAACgB,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACf,aAAa,GAAG;IACnC;IACA,OAAOc;AACT,GACA,yCAAyC"}

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

@@ -27,8 +27,8 @@ const attachmentClassNames = {
 };
 const ATTACHMENT_MAXWIDTH = '180px';
 const ATTACHMENT_SIZE = '20px';
-const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rj3sqpg", null, [
-    ".rj3sqpg{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;}"
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rmfolg5", null, [
+    ".rmfolg5{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;}"
 ]);
 const buttonBaseStyles = {
     alignItems: 'center',
@@ -118,6 +118,31 @@ const useContentBaseClassName = (0, _reactcomponents.__resetStyles)("rmt99gk", n
 const useDismissIconBaseClassName = (0, _reactcomponents.__resetStyles)("r176grtk", null, [
     ".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"
 ]);
+const useImageOnlyStyles = (0, _reactcomponents.__styles)({
+    primaryAction: {
+        z8tnut: "f1g0x7ka",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "f1qch9an",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ]
+    },
+    content: {
+        Bg96gwp: "fez10in"
+    }
+}, {
+    d: [
+        ".f1g0x7ka{padding-top:0;}",
+        ".fhxju0i{padding-right:0;}",
+        ".f1cnd47f{padding-left:0;}",
+        ".f1qch9an{padding-bottom:0;}",
+        ".fez10in{line-height:0;}"
+    ]
+});
 const useAttachmentStyles_unstable = (state)=>{
     const rootBaseClassName = useRootBaseClassName();
     const primaryActionBaseClassName = usePrimaryActionBaseClassName();
@@ -126,14 +151,15 @@ const useAttachmentStyles_unstable = (state)=>{
     const contentBaseClassName = useContentBaseClassName();
     const dismissIconBaseClassName = useDismissIconBaseClassName();
     const primaryActionStyles = usePrimaryActionStyles();
-    const { primaryAction } = state;
+    const imageOnlyStyles = useImageOnlyStyles();
+    const { imageOnly, primaryAction } = 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' && primaryActionStyles.button, state.primaryAction.className);
+    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
     state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
     if (state.media) {
         state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, state.media.className);
     }
-    state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, state.content.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);
     return state;
 }; //# sourceMappingURL=useAttachmentStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentStyles.js"],"sourcesContent":["import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nexport const attachmentClassNames = {\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};\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\nconst useRootBaseClassName = __resetStyles(\"rj3sqpg\", null, [\".rj3sqpg{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;}\"]);\nconst buttonBaseStyles = {\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    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1\n  }),\n  verticalAlign: 'middle'\n};\nconst usePrimaryActionBaseClassName = __resetStyles(\"rftb5h9\", \"rofiitm\", [\".rftb5h9{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);}\", \".rftb5h9[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".rofiitm{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);}\", \".rofiitm[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\"]);\nconst usePrimaryActionStyles = __styles({\n  button: {\n    eoavqd: \"f8491dx\",\n    Jwef8y: \"f1h648pw\",\n    Bi91k9c: \"fnwyq0v\",\n    ecr2s2: \"fwdzr64\",\n    lj723h: \"flvvhsy\",\n    Bqrx1nm: \"fq7113v\",\n    kx9iu6: \"fp3oj7s\"\n  }\n}, {\n  h: [\".f8491dx:hover{cursor:pointer;}\", \".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}\", \".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\"],\n  a: [\".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}\", \".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\"],\n  m: [[\"@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\nconst useDismissButtonBaseClassName = __resetStyles(\"r1cf2ehf\", \"rhq1520\", {\n  r: [\".r1cf2ehf{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);}\", \".r1cf2ehf[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".r1cf2ehf:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}\", \".r1cf2ehf:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}\", \".r1cf2ehf:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}\", \".r1cf2ehf:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}\", \".rhq1520{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);}\", \".rhq1520[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".rhq1520:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}\", \".rhq1520:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}\", \".rhq1520:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}\", \".rhq1520:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}\"],\n  s: [\"@media (forced-colors: active){.r1cf2ehf:hover{background-color:HighlightText;}.r1cf2ehf:active{background-color:HighlightText;}}\", \"@media (forced-colors: active){.rhq1520:hover{background-color:HighlightText;}.rhq1520:active{background-color:HighlightText;}}\"]\n});\nconst useMediaBaseClassName = __resetStyles(\"rz1lum2\", null, [\".rz1lum2{display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}\"]);\nconst 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);}\"]);\nconst useDismissIconBaseClassName = __resetStyles(\"r176grtk\", null, [\".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}\"]);\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = state => {\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 primaryActionStyles = usePrimaryActionStyles();\n  const {\n    primaryAction\n  } = state;\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, state.primaryAction.className);\n  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, state.content.className);\n  state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentStyles.js.map"],"names":["attachmentClassNames","useAttachmentStyles_unstable","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","__resetStyles","buttonBaseStyles","alignItems","backgroundColor","tokens","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","display","flexWrap","justifyContent","createCustomFocusIndicatorStyle","shorthands","outline","strokeWidthThick","colorStrokeFocus2","zIndex","verticalAlign","usePrimaryActionBaseClassName","usePrimaryActionStyles","__styles","button","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","h","a","m","useDismissButtonBaseClassName","r","s","useMediaBaseClassName","useContentBaseClassName","useDismissIconBaseClassName","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","primaryActionStyles","className","mergeClasses","as"],"mappings":"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"}
+{"version":3,"sources":["useAttachmentStyles.js"],"sourcesContent":["import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nexport const attachmentClassNames = {\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};\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\nconst useRootBaseClassName = __resetStyles(\"rmfolg5\", null, [\".rmfolg5{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;}\"]);\nconst buttonBaseStyles = {\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    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1\n  }),\n  verticalAlign: 'middle'\n};\nconst usePrimaryActionBaseClassName = __resetStyles(\"rftb5h9\", \"rofiitm\", [\".rftb5h9{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);}\", \".rftb5h9[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".rofiitm{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);}\", \".rofiitm[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\"]);\nconst usePrimaryActionStyles = __styles({\n  button: {\n    eoavqd: \"f8491dx\",\n    Jwef8y: \"f1h648pw\",\n    Bi91k9c: \"fnwyq0v\",\n    ecr2s2: \"fwdzr64\",\n    lj723h: \"flvvhsy\",\n    Bqrx1nm: \"fq7113v\",\n    kx9iu6: \"fp3oj7s\"\n  }\n}, {\n  h: [\".f8491dx:hover{cursor:pointer;}\", \".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}\", \".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\"],\n  a: [\".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}\", \".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\"],\n  m: [[\"@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\nconst useDismissButtonBaseClassName = __resetStyles(\"r1cf2ehf\", \"rhq1520\", {\n  r: [\".r1cf2ehf{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);}\", \".r1cf2ehf[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".r1cf2ehf:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}\", \".r1cf2ehf:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}\", \".r1cf2ehf:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}\", \".r1cf2ehf:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}\", \".rhq1520{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);}\", \".rhq1520[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".rhq1520:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}\", \".rhq1520:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}\", \".rhq1520:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}\", \".rhq1520:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}\"],\n  s: [\"@media (forced-colors: active){.r1cf2ehf:hover{background-color:HighlightText;}.r1cf2ehf:active{background-color:HighlightText;}}\", \"@media (forced-colors: active){.rhq1520:hover{background-color:HighlightText;}.rhq1520:active{background-color:HighlightText;}}\"]\n});\nconst useMediaBaseClassName = __resetStyles(\"rz1lum2\", null, [\".rz1lum2{display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}\"]);\nconst 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);}\"]);\nconst useDismissIconBaseClassName = __resetStyles(\"r176grtk\", null, [\".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}\"]);\nconst useImageOnlyStyles = __styles({\n  primaryAction: {\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n  },\n  content: {\n    Bg96gwp: \"fez10in\"\n  }\n}, {\n  d: [\".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".fez10in{line-height:0;}\"]\n});\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = state => {\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 primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const {\n    imageOnly,\n    primaryAction\n  } = state;\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);\n  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);\n  state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentStyles.js.map"],"names":["attachmentClassNames","useAttachmentStyles_unstable","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","__resetStyles","buttonBaseStyles","alignItems","backgroundColor","tokens","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","display","flexWrap","justifyContent","createCustomFocusIndicatorStyle","shorthands","outline","strokeWidthThick","colorStrokeFocus2","zIndex","verticalAlign","usePrimaryActionBaseClassName","usePrimaryActionStyles","__styles","button","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","h","a","m","useDismissButtonBaseClassName","r","s","useMediaBaseClassName","useContentBaseClassName","useDismissIconBaseClassName","useImageOnlyStyles","z8tnut","z189sj","Byoj8tv","uwmqm3","Bg96gwp","d","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","primaryActionStyles","imageOnlyStyles","imageOnly","className","mergeClasses","as"],"mappings":"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"}

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

@@ -20,14 +20,14 @@ const _reactcomponents = require("@fluentui/react-components");
 const attachmentOverflowMenuButtonClassNames = {
     root: 'fai-AttachmentOverflowMenuButton'
 };
-const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1hzuvbo", null, {
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rkv09vy", null, {
     r: [
-        ".r1hzuvbo{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(--spacingVerticalS);vertical-align:middle;}",
-        ".r1hzuvbo:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}",
-        ".r1hzuvbo:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"
+        ".rkv09vy{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(--spacingVerticalS);vertical-align:middle;align-self:end;}",
+        ".rkv09vy:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}",
+        ".rkv09vy:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"
     ],
     s: [
-        "@media (forced-colors: active){.r1hzuvbo:hover{background-color:HighlightText;}.r1hzuvbo:active{background-color:HighlightText;}}"
+        "@media (forced-colors: active){.rkv09vy:hover{background-color:HighlightText;}.rkv09vy:active{background-color:HighlightText;}}"
     ]
 });
 const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nexport const attachmentOverflowMenuButtonClassNames = {\n  root: 'fai-AttachmentOverflowMenuButton'\n};\nconst useRootBaseClassName = __resetStyles(\"r1hzuvbo\", null, {\n  r: [\".r1hzuvbo{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(--spacingVerticalS);vertical-align:middle;}\", \".r1hzuvbo:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}\", \".r1hzuvbo:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}\"],\n  s: [\"@media (forced-colors: active){.r1hzuvbo:hover{background-color:HighlightText;}.r1hzuvbo:active{background-color:HighlightText;}}\"]\n});\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.js.map"],"names":["attachmentOverflowMenuButtonClassNames","useAttachmentOverflowMenuButtonStyles_unstable","root","useRootBaseClassName","__resetStyles","r","s","state","rootBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,sCAAsC;eAAtCA;;IAUAC,8CAA8C;eAA9CA;;;iCAXyD;AAC/D,MAAMD,yCAAyC;IACpDE,MAAM;AACR;AACA,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAC3DC,GAAG;QAAC;QAAugB;QAAmI;KAAwH;IACtwBC,GAAG;QAAC;KAAoI;AAC1I;AAIO,MAAML,iDAAiDM,CAAAA;IAC5D,MAAMC,oBAAoBL;IAC1BI,MAAML,IAAI,CAACO,SAAS,GAAGC,IAAAA,6BAAY,EAACV,uCAAuCE,IAAI,EAAEM,mBAAmBD,MAAML,IAAI,CAACO,SAAS;IACxH,OAAOF;AACT,GACA,iEAAiE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nexport const attachmentOverflowMenuButtonClassNames = {\n  root: 'fai-AttachmentOverflowMenuButton'\n};\nconst useRootBaseClassName = __resetStyles(\"rkv09vy\", null, {\n  r: [\".rkv09vy{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(--spacingVerticalS);vertical-align:middle;align-self:end;}\", \".rkv09vy:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}\", \".rkv09vy:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}\"],\n  s: [\"@media (forced-colors: active){.rkv09vy:hover{background-color:HighlightText;}.rkv09vy:active{background-color:HighlightText;}}\"]\n});\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.js.map"],"names":["attachmentOverflowMenuButtonClassNames","useAttachmentOverflowMenuButtonStyles_unstable","root","useRootBaseClassName","__resetStyles","r","s","state","rootBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,sCAAsC;eAAtCA;;IAUAC,8CAA8C;eAA9CA;;;iCAXyD;AAC/D,MAAMD,yCAAyC;IACpDE,MAAM;AACR;AACA,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,WAAW,MAAM;IAC1DC,GAAG;QAAC;QAAqhB;QAAkI;KAAuH;IAClxBC,GAAG;QAAC;KAAkI;AACxI;AAIO,MAAML,iDAAiDM,CAAAA;IAC5D,MAAMC,oBAAoBL;IAC1BI,MAAML,IAAI,CAACO,SAAS,GAAGC,IAAAA,6BAAY,EAACV,uCAAuCE,IAAI,EAAEM,mBAAmBD,MAAML,IAAI,CAACO,SAAS;IACxH,OAAOF;AACT,GACA,iEAAiE"}

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

@@ -14,7 +14,7 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
 const _attachmentListContext = require("../../contexts/attachmentListContext");
 const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
-    const { id, media } = props;
+    const { id, imageOnly, media } = props;
     const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
     const isVisible = (0, _reactcomponents.useIsOverflowItemVisible)(id);
     const onAttachmentDismiss = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context.onAttachmentDismiss);
@@ -34,6 +34,7 @@ const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
             root: _reactcomponents.MenuItem
         },
         root,
-        isVisible
+        isVisible,
+        imageOnly
     };
 }; //# sourceMappingURL=useAttachmentOverflowMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItem.js"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (props, ref) => {\n  const {\n    id,\n    media\n  } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const isVisible = useIsOverflowItemVisible(id);\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n  const root = slot.always({\n    ref,\n    icon: media,\n    secondaryContent: /*#__PURE__*/React.createElement(DismissIcon, null),\n    ...props\n  }, {\n    elementType: MenuItem\n  });\n  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {\n    id\n  }));\n  return {\n    components: {\n      root: MenuItem\n    },\n    root,\n    isVisible\n  };\n};\n//# sourceMappingURL=useAttachmentOverflowMenuItem.js.map"],"names":["useAttachmentOverflowMenuItem_unstable","props","ref","id","media","DismissIcon","bundleIcon","Dismiss20Filled","Dismiss20Regular","isVisible","useIsOverflowItemVisible","onAttachmentDismiss","useAttachmentListContext_unstable","context","root","slot","always","icon","secondaryContent","React","createElement","elementType","MenuItem","onClick","mergeCallbacks","ev","components"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;iCACkD;4BACX;uCACZ;AAU3C,MAAMA,yCAAyC,CAACC,OAAOC;IAC5D,MAAM,EACJC,EAAE,EACFC,KAAK,EACN,GAAGH;IACJ,MAAMI,cAAcC,IAAAA,sBAAU,EAACC,2BAAe,EAAEC,4BAAgB;IAChE,MAAMC,YAAYC,IAAAA,yCAAwB,EAACP;IAC3C,MAAMQ,sBAAsBC,IAAAA,wDAAiC,EAACC,CAAAA,UAAWA,QAAQF,mBAAmB;IACpG,MAAMG,OAAOC,qBAAI,CAACC,MAAM,CAAC;QACvBd;QACAe,MAAMb;QACNc,kBAAkB,WAAW,GAAEC,OAAMC,aAAa,CAACf,aAAa;QAChE,GAAGJ,KAAK;IACV,GAAG;QACDoB,aAAaC,yBAAQ;IACvB;IACAR,KAAKS,OAAO,GAAGC,IAAAA,+BAAc,EAACV,KAAKS,OAAO,EAAEE,CAAAA,KAAMd,wBAAwB,QAAQA,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBc,IAAI;YAClJtB;QACF;IACA,OAAO;QACLuB,YAAY;YACVZ,MAAMQ,yBAAQ;QAChB;QACAR;QACAL;IACF;AACF,GACA,yDAAyD"}
+{"version":3,"sources":["useAttachmentOverflowMenuItem.js"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (props, ref) => {\n  const {\n    id,\n    imageOnly,\n    media\n  } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const isVisible = useIsOverflowItemVisible(id);\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n  const root = slot.always({\n    ref,\n    icon: media,\n    secondaryContent: /*#__PURE__*/React.createElement(DismissIcon, null),\n    ...props\n  }, {\n    elementType: MenuItem\n  });\n  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {\n    id\n  }));\n  return {\n    components: {\n      root: MenuItem\n    },\n    root,\n    isVisible,\n    imageOnly\n  };\n};\n//# sourceMappingURL=useAttachmentOverflowMenuItem.js.map"],"names":["useAttachmentOverflowMenuItem_unstable","props","ref","id","imageOnly","media","DismissIcon","bundleIcon","Dismiss20Filled","Dismiss20Regular","isVisible","useIsOverflowItemVisible","onAttachmentDismiss","useAttachmentListContext_unstable","context","root","slot","always","icon","secondaryContent","React","createElement","elementType","MenuItem","onClick","mergeCallbacks","ev","components"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;iCACkD;4BACX;uCACZ;AAU3C,MAAMA,yCAAyC,CAACC,OAAOC;IAC5D,MAAM,EACJC,EAAE,EACFC,SAAS,EACTC,KAAK,EACN,GAAGJ;IACJ,MAAMK,cAAcC,IAAAA,sBAAU,EAACC,2BAAe,EAAEC,4BAAgB;IAChE,MAAMC,YAAYC,IAAAA,yCAAwB,EAACR;IAC3C,MAAMS,sBAAsBC,IAAAA,wDAAiC,EAACC,CAAAA,UAAWA,QAAQF,mBAAmB;IACpG,MAAMG,OAAOC,qBAAI,CAACC,MAAM,CAAC;QACvBf;QACAgB,MAAMb;QACNc,kBAAkB,WAAW,GAAEC,OAAMC,aAAa,CAACf,aAAa;QAChE,GAAGL,KAAK;IACV,GAAG;QACDqB,aAAaC,yBAAQ;IACvB;IACAR,KAAKS,OAAO,GAAGC,IAAAA,+BAAc,EAACV,KAAKS,OAAO,EAAEE,CAAAA,KAAMd,wBAAwB,QAAQA,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBc,IAAI;YAClJvB;QACF;IACA,OAAO;QACLwB,YAAY;YACVZ,MAAMQ,yBAAQ;QAChB;QACAR;QACAL;QACAN;IACF;AACF,GACA,yDAAyD"}

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

@@ -21,8 +21,19 @@ const attachmentOverflowMenuItemClassNames = {
     root: 'fai-AttachmentOverflowMenuItem'
 };
 const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r0", null, []);
+const useStyles = (0, _reactcomponents.__styles)({
+    imageOnly: {
+        Bt984gj: "f122n59"
+    }
+}, {
+    d: [
+        ".f122n59{align-items:center;}"
+    ]
+});
 const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
+    const { imageOnly } = state;
     const rootBaseClassName = useRootBaseClassName();
-    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, state.root.className);
+    const styles = useStyles();
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, imageOnly && styles.imageOnly, state.root.className);
     return state;
 }; //# sourceMappingURL=useAttachmentOverflowMenuItemStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@fluentui/react-components';\nexport const attachmentOverflowMenuItemClassNames = {\n  root: 'fai-AttachmentOverflowMenuItem'\n};\nconst useRootBaseClassName = __resetStyles(\"r0\", null, []);\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentOverflowMenuItemStyles.js.map"],"names":["attachmentOverflowMenuItemClassNames","useAttachmentOverflowMenuItemStyles_unstable","root","useRootBaseClassName","__resetStyles","state","rootBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,oCAAoC;eAApCA;;IAOAC,4CAA4C;eAA5CA;;;iCAR+B;AACrC,MAAMD,uCAAuC;IAClDE,MAAM;AACR;AACA,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,MAAM,MAAM,EAAE;AAIlD,MAAMH,+CAA+CI,CAAAA;IAC1D,MAAMC,oBAAoBH;IAC1BE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,6BAAY,EAACR,qCAAqCE,IAAI,EAAEI,mBAAmBD,MAAMH,IAAI,CAACK,SAAS;IACtH,OAAOF;AACT,GACA,+DAA+D"}
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@fluentui/react-components';\nexport const attachmentOverflowMenuItemClassNames = {\n  root: 'fai-AttachmentOverflowMenuItem'\n};\nconst useRootBaseClassName = __resetStyles(\"r0\", null, []);\nconst useStyles = __styles({\n  imageOnly: {\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".f122n59{align-items:center;}\"]\n});\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = state => {\n  const {\n    imageOnly\n  } = state;\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, imageOnly && styles.imageOnly, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentOverflowMenuItemStyles.js.map"],"names":["attachmentOverflowMenuItemClassNames","useAttachmentOverflowMenuItemStyles_unstable","root","useRootBaseClassName","__resetStyles","useStyles","__styles","imageOnly","Bt984gj","d","state","rootBaseClassName","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,oCAAoC;eAApCA;;IAcAC,4CAA4C;eAA5CA;;;iCAfyC;AAC/C,MAAMD,uCAAuC;IAClDE,MAAM;AACR;AACA,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,MAAM,MAAM,EAAE;AACzD,MAAMC,YAAYC,IAAAA,yBAAQ,EAAC;IACzBC,WAAW;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;KAAgC;AACtC;AAIO,MAAMR,+CAA+CS,CAAAA;IAC1D,MAAM,EACJH,SAAS,EACV,GAAGG;IACJ,MAAMC,oBAAoBR;IAC1B,MAAMS,SAASP;IACfK,MAAMR,IAAI,CAACW,SAAS,GAAGC,IAAAA,6BAAY,EAACd,qCAAqCE,IAAI,EAAES,mBAAmBJ,aAAaK,OAAOL,SAAS,EAAEG,MAAMR,IAAI,CAACW,SAAS;IACrJ,OAAOH;AACT,GACA,+DAA+D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.0.0-nightly-20240419-1757-e4bb42dc.1",
+  "version": "0.0.0-nightly-20240424-0405-f2067016.1",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "0.0.0-nightly-20240419-1757-e4bb42dc.1",
+    "@fluentui-copilot/react-provider": "0.0.0-nightly-20240424-0405-f2067016.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {