@fluentui-copilot/react-attachments 0.8.2 → 0.8.3

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Wed, 03 Apr 2024 00:23:26 GMT",
+      "date": "Wed, 03 Apr 2024 22:27:26 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.8.3",
+      "version": "0.8.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "db2c9191dc03bf477de894b8fb8a6c349147157b",
+            "comment": "fix: use getIntrinsicElementProps to replace deprecated getNativeElementProps."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "6b759badcb2260ef4901988973ec37e9bed35a1f",
+            "comment": "feat: Implement AttachmentList component."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Apr 2024 00:23:41 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.8.2",
       "version": "0.8.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Wed, 03 Apr 2024 00:23:26 GMT and should not be manually modified.
+This log was last generated on Wed, 03 Apr 2024 22:27:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.8.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.3)
+
+Wed, 03 Apr 2024 22:27:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.8.2..@fluentui-copilot/react-attachments_v0.8.3)
+
+### Patches
+
+- fix: use getIntrinsicElementProps to replace deprecated getNativeElementProps. ([PR #1509](https://github.com/microsoft/fluentai/pull/1509) by tristan.watanabe@gmail.com)
+- feat: Implement AttachmentList component. ([PR #1488](https://github.com/microsoft/fluentai/pull/1488) by tristan.watanabe@gmail.com)
+
 ## [0.8.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.2)
 
-Wed, 03 Apr 2024 00:23:26 GMT 
+Wed, 03 Apr 2024 00:23:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.8.1..@fluentui-copilot/react-attachments_v0.8.2)
 
 ### Patches

package/dist/index.d.ts

@@ -2,7 +2,12 @@
 
 import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
+import type { Context } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
@@ -11,10 +16,49 @@ export declare const Attachment: ForwardRefComponent<AttachmentProps>;
 
 export declare const attachmentClassNames: SlotClassNames<AttachmentSlots>;
 
+declare type AttachmentDismissedData = {
+    id: string;
+};
+
+export declare const AttachmentList: ForwardRefComponent<AttachmentListProps>;
+
+export declare const attachmentListClassNames: SlotClassNames<AttachmentListSlots>;
+
+export declare const AttachmentListContext: Context<AttachmentListContextValue>;
+
+/**
+ * Context shared between AttachmentList and its children components
+ */
+export declare type AttachmentListContextValue = Pick<AttachmentListProps, 'onAttachmentDismiss'>;
+
+declare type AttachmentListContextValues = {
+    attachmentList: AttachmentListContextValue;
+};
+
+/**
+ * AttachmentList Props
+ */
+export declare type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {
+    onAttachmentDismiss?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, data: AttachmentDismissedData) => void;
+};
+
+export declare const AttachmentListProvider: Provider<AttachmentListContextValue> & FC<ProviderProps<AttachmentListContextValue>>;
+
+export declare type AttachmentListSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering AttachmentList
+ */
+export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss'>;
+
 /**
  * Attachment Props
  */
-export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {};
+export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {
+    id: string;
+};
 
 export declare type AttachmentSlots = {
     root: NonNullable<Slot<'div'>>;
@@ -111,6 +155,11 @@ export declare type AttachmentTagState = ComponentState<AttachmentTagSlots>;
  */
 export declare const renderAttachment_unstable: (state: AttachmentState) => JSX.Element;
 
+/**
+ * Render the final JSX of AttachmentList
+ */
+export declare const renderAttachmentList_unstable: (state: AttachmentListState, contextValues: AttachmentListContextValues) => JSX.Element;
+
 /**
  * Render the final JSX of AttachmentTag
  */
@@ -135,7 +184,25 @@ export declare const renderAttachmentTagList_unstable: (state: AttachmentTagList
  * @param props - props from this instance of Attachment
  * @param ref - reference to root HTMLElement of Attachment
  */
-export declare const useAttachment_unstable: (props: AttachmentProps, ref: React_2.Ref<HTMLElement>) => AttachmentState;
+export declare const useAttachment_unstable: (props: AttachmentProps, ref: React_2.Ref<HTMLDivElement>) => AttachmentState;
+
+/**
+ * Create the state required to render AttachmentList.
+ *
+ * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,
+ * before being passed to renderAttachmentList_unstable.
+ *
+ * @param props - props from this instance of AttachmentList
+ * @param ref - reference to root HTMLElement of AttachmentList
+ */
+export declare const useAttachmentList_unstable: (props: AttachmentListProps, ref: React_2.Ref<HTMLDivElement>) => AttachmentListState;
+
+export declare const useAttachmentListContext_unstable: <T>(selector: ContextSelector<AttachmentListContextValue, T>) => T;
+
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */
+export declare const useAttachmentListStyles_unstable: (state: AttachmentListState) => AttachmentListState;
 
 /**
  * Apply styling to the Attachment slots based on the state

package/lib/AttachmentList.js

@@ -0,0 +1,2 @@
+export * from './components/AttachmentList/index';
+//# sourceMappingURL=AttachmentList.js.map

package/lib/AttachmentList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentList.ts"],"sourcesContent":["export * from './components/AttachmentList/index';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC"}

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\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots>;\n"],"names":[],"mappings":"AAAA,WAmB8D"}
+{"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"}

package/lib/components/Attachment/useAttachment.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
+import { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
 import { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';
-import { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';
+import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
  * Create the state required to render Attachment.
  *
@@ -13,9 +13,8 @@ import { useAttachmentTagListContext_unstable } from '../../contexts/attachmentT
  */
 export const useAttachment_unstable = (props, ref) => {
   const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
-  //TODO: replace with context from to be created AttachmentList component
-  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);
-  const root = slot.always(getNativeElementProps('div', {
+  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);
+  const root = slot.always(getIntrinsicElementProps('div', {
     ref,
     ...props
   }), {
@@ -30,9 +29,8 @@ export const useAttachment_unstable = (props, ref) => {
     },
     elementType: 'button'
   });
-  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
-    content: props.children,
-    media: props.media
+  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+    id: props.id
   }));
   const media = slot.optional(props.media, {
     elementType: 'span'

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';\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<HTMLElement>): AttachmentState => {\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  //TODO: replace with context from to be created AttachmentList component\n  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);\n\n  const root = slot.always(\n    getNativeElementProps('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>) =>\n      onAttachmentTagDismiss?.(ev, { content: props.children, media: props.media }),\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","getNativeElementProps","mergeCallbacks","slot","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentTagListContext_unstable","useAttachment_unstable","props","ref","DismissIcon","onAttachmentTagDismiss","context","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","content","children","media","optional","dismissIcon","state","components","as"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AACzF,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,oCAAoC,QAAQ,0CAA0C;AAG/F;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAMC,cAAcL,WAAWD,iBAAiBD;IAChD,wEAAwE;IACxE,MAAMQ,yBAAyBL,qCAAqCM,CAAAA,UAAWA,QAAQD,sBAAsB;IAE7G,MAAME,OAAOX,KAAKY,MAAM,CACtBd,sBAAsB,OAAO;QAC3BS;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,KACCT,mCAAAA,6CAAAA,uBAAyBS,IAAI;YAAEC,SAASb,MAAMc,QAAQ;YAAEC,OAAOf,MAAMe,KAAK;QAAC;IAG/E,MAAMA,QAAQrB,KAAKsB,QAAQ,CAAChB,MAAMe,KAAK,EAAE;QAAER,aAAa;IAAO;IAE/D,MAAMM,UAAUnB,KAAKY,MAAM,CAACN,MAAMa,OAAO,EAAE;QACzCH,cAAc;YACZI,UAAUd,MAAMc,QAAQ;QAC1B;QACAP,aAAa;IACf;IAEA,MAAMU,cAAcvB,KAAKY,MAAM,CAACN,MAAMiB,WAAW,EAAE;QACjDP,cAAc;YACZI,wBAAU,oBAACZ;QACb;QACAK,aAAa;IACf;IAEA,MAAMW,QAAyB;QAC7BC,YAAY;YACVd,MAAM;YACNG,eAAe;YACfC,eAAe;YACfM,OAAO;YACPF,SAAS;YACTI,aAAa;QACf;QAEAZ;QACAG;QACAC;QACAM;QACAF;QACAI;IACF;IAEA,IAAIC,MAAMV,aAAa,CAACY,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACX,aAAa,GAAG;IACnC;IAEA,OAAOU;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 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"}

package/lib/components/Attachment/useAttachmentStyles.js

@@ -9,7 +9,7 @@ export const attachmentClassNames = {
 };
 const ATTACHMENT_MAXWIDTH = '180px';
 const ATTACHMENT_SIZE = '20px';
-const useRootBaseClassName = __resetStyles("r1u26nio", null, [".r1u26nio{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;max-width:180px;}"]);
+const useRootBaseClassName = __resetStyles("rj3sqpg", null, [".rj3sqpg{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;}"]);
 const buttonBaseStyles = {
   alignItems: 'center',
   backgroundColor: tokens.colorNeutralBackground1,
@@ -52,7 +52,7 @@ const useDismissButtonBaseClassName = __resetStyles("r1cf2ehf", "rhq1520", {
   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);}"],
   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;}}"]
 });
-const useMediaBaseClassName = __resetStyles("r19jnv3a", null, [".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}"]);
+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);}"]);
 /**

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  maxWidth: ATTACHMENT_MAXWIDTH,\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  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","maxWidth","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","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});\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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"}

package/lib/components/AttachmentList/AttachmentList.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useAttachmentList_unstable } from './useAttachmentList';
+import { renderAttachmentList_unstable } from './renderAttachmentList';
+import { useAttachmentListStyles_unstable } from './useAttachmentListStyles';
+import { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';
+export const AttachmentList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAttachmentList_unstable(props, ref);
+  const contextValues = useAttachmentListContextValues_unstable(state);
+  useAttachmentListStyles_unstable(state);
+  return renderAttachmentList_unstable(state, contextValues);
+});
+AttachmentList.displayName = 'AttachmentList';
+//# sourceMappingURL=AttachmentList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentList_unstable } from './useAttachmentList';\nimport { renderAttachmentList_unstable } from './renderAttachmentList';\nimport { useAttachmentListStyles_unstable } from './useAttachmentListStyles';\nimport { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';\nimport type { AttachmentListProps } from './AttachmentList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const AttachmentList: ForwardRefComponent<AttachmentListProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentList_unstable(props, ref);\n  const contextValues = useAttachmentListContextValues_unstable(state);\n\n  useAttachmentListStyles_unstable(state);\n\n  return renderAttachmentList_unstable(state, contextValues);\n});\n\nAttachmentList.displayName = 'AttachmentList';\n"],"names":["React","useAttachmentList_unstable","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentListContextValues_unstable","AttachmentList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,uCAAuC,QAAQ,mCAAmC;AAI3F,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAChD,MAAME,gBAAgBN,wCAAwCK;IAE9DN,iCAAiCM;IAEjC,OAAOP,8BAA8BO,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

package/lib/components/AttachmentList/AttachmentList.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AttachmentList.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\n\nexport type AttachmentListSlots = {\n  root: Slot<'div'>;\n};\n\nexport type AttachmentDismissedData = {\n  id: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n  onAttachmentDismiss?: (\n    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,\n    data: AttachmentDismissedData,\n  ) => void;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n  Pick<AttachmentListProps, 'onAttachmentDismiss'>;\n\nexport type AttachmentListContextValues = {\n  attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"mappings":"AAAA,WA6BE"}

package/lib/components/AttachmentList/index.js

@@ -0,0 +1,6 @@
+export * from './AttachmentList';
+export * from './AttachmentList.types';
+export * from './renderAttachmentList';
+export * from './useAttachmentList';
+export * from './useAttachmentListStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AttachmentList';\nexport * from './AttachmentList.types';\nexport * from './renderAttachmentList';\nexport * from './useAttachmentList';\nexport * from './useAttachmentListStyles';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,4BAA4B"}

package/lib/components/AttachmentList/renderAttachmentList.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-components';
+import { AttachmentListProvider } from '../../contexts/attachmentListContext';
+/**
+ * Render the final JSX of AttachmentList
+ */
+export const renderAttachmentList_unstable = (state, contextValues) => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsx(AttachmentListProvider, {
+    value: contextValues.attachmentList,
+    children: /*#__PURE__*/_jsx(state.root, {})
+  });
+};
+//# sourceMappingURL=renderAttachmentList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      <state.root />\n    </AttachmentListProvider>\n  );\n};\n"],"names":["assertSlots","AttachmentListProvider","renderAttachmentList_unstable","state","contextValues","value","attachmentList","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AACzD,SAASC,sBAAsB,QAAQ,uCAAuC;AAG9E;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAAuBI,OAAOD,cAAcE,cAAc;kBACzD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/AttachmentList/useAttachmentList.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useOverflowContext } from '@fluentui/react-overflow';
+/**
+ * Create the state required to render AttachmentList.
+ *
+ * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,
+ * before being passed to renderAttachmentList_unstable.
+ *
+ * @param props - props from this instance of AttachmentList
+ * @param ref - reference to root HTMLElement of AttachmentList
+ */
+export const useAttachmentList_unstable = (props, ref) => {
+  const {
+    onAttachmentDismiss
+  } = props;
+  const attachmentsVisibilityStatus = useOverflowContext(context => context.itemVisibility);
+  const innerRef = React.useRef(null);
+  const {
+    targetDocument
+  } = useFluent();
+  const {
+    findNextFocusable,
+    findPrevFocusable
+  } = useFocusFinders();
+  const handleAttachmentDismiss = useEventCallback((e, data) => {
+    var _innerRef_current;
+    if (!onAttachmentDismiss) {
+      return;
+    }
+    onAttachmentDismiss(e, data);
+    // Remove attachment from overflow context
+    attachmentsVisibilityStatus === null || attachmentsVisibilityStatus === void 0 ? true : delete attachmentsVisibilityStatus[data.id];
+    // set focus after attachment dismiss
+    const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+    if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {
+      // focus on next attachment only if the active element is within the current attachment list
+      const next = findNextFocusable(activeElement, {
+        container: innerRef.current
+      });
+      if (next) {
+        next.focus();
+        return;
+      } else {
+        const prev = findPrevFocusable(activeElement === null || activeElement === void 0 ? void 0 : activeElement.parentElement, {
+          container: innerRef.current
+        });
+        prev === null || prev === void 0 ? void 0 : prev.focus();
+      }
+    }
+  });
+  const arrowNavigationProps = useArrowNavigationGroup({
+    circular: true,
+    axis: 'both',
+    memorizeCurrent: true
+  });
+  return {
+    onAttachmentDismiss: handleAttachmentDismiss,
+    components: {
+      root: 'div'
+    },
+    root: slot.always(getIntrinsicElementProps('div', {
+      'aria-label': 'Attachments',
+      ref: useMergedRefs(ref, innerRef),
+      role: 'toolbar',
+      ...arrowNavigationProps,
+      ...props
+    }), {
+      elementType: 'div'
+    })
+  };
+};
+//# sourceMappingURL=useAttachmentList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  slot,\n  useArrowNavigationGroup,\n  useEventCallback,\n  useFocusFinders,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useOverflowContext } from '@fluentui/react-overflow';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n  props: AttachmentListProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n  const { onAttachmentDismiss } = props;\n\n  const attachmentsVisibilityStatus: Record<string, boolean> = useOverflowContext(context => context.itemVisibility);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n    if (!onAttachmentDismiss) {\n      return;\n    }\n\n    onAttachmentDismiss(e, data);\n\n    // Remove attachment from overflow context\n    delete attachmentsVisibilityStatus?.[data.id];\n\n    // set focus after attachment dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next attachment only if the active element is within the current attachment list\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n\n      if (next) {\n        next.focus();\n        return;\n      } else {\n        const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    onAttachmentDismiss: handleAttachmentDismiss,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        'aria-label': 'Attachments',\n        ref: useMergedRefs(ref, innerRef),\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useOverflowContext","useAttachmentList_unstable","props","ref","onAttachmentDismiss","attachmentsVisibilityStatus","context","itemVisibility","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleAttachmentDismiss","e","data","id","activeElement","current","contains","next","container","focus","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,IAAI,EACJC,uBAAuB,EACvBC,gBAAgB,EAChBC,eAAe,EACfC,aAAa,QACR,6BAA6B;AACpC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,mBAAmB,EAAE,GAAGF;IAEhC,MAAMG,8BAAuDL,mBAAmBM,CAAAA,UAAWA,QAAQC,cAAc;IAEjH,MAAMC,WAAWjB,MAAMkB,MAAM,CAAiB;IAC9C,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAM,EAAEY,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGhB;IAEjD,MAAMiB,0BAAsElB,iBAAiB,CAACmB,GAAGC;YAY3FP;QAXJ,IAAI,CAACJ,qBAAqB;YACxB;QACF;QAEAA,oBAAoBU,GAAGC;QAEvB,0CAA0C;QACnCV,wCAAAA,uDAAAA,2BAA6B,CAACU,KAAKC,EAAE,CAAC;QAE7C,qCAAqC;QACrC,MAAMC,gBAAgBP,2BAAAA,qCAAAA,eAAgBO,aAAa;QACnD,KAAIT,oBAAAA,SAASU,OAAO,cAAhBV,wCAAAA,kBAAkBW,QAAQ,CAACF,gBAA+B;YAC5D,4FAA4F;YAC5F,MAAMG,OAAOT,kBAAkBM,eAA8B;gBAAEI,WAAWb,SAASU,OAAO;YAAC;YAE3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF,OAAO;gBACL,MAAMC,OAAOX,kBAAkBK,0BAAAA,oCAAAA,cAAeO,aAAa,EAAiB;oBAAEH,WAAWb,SAASU,OAAO;gBAAC;gBAC1GK,iBAAAA,2BAAAA,KAAMD,KAAK;YACb;QACF;IACF;IAEA,MAAMG,uBAAuB/B,wBAAwB;QACnDgC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLxB,qBAAqBS;QACrBgB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMrC,KAAKsC,MAAM,CACfvC,yBAAyB,OAAO;YAC9B,cAAc;YACdW,KAAKN,cAAcM,KAAKK;YACxBwB,MAAM;YACN,GAAGP,oBAAoB;YACvB,GAAGvB,KAAK;QACV,IACA;YAAE+B,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/AttachmentList/useAttachmentListContextValues.js

@@ -0,0 +1,13 @@
+export function useAttachmentListContextValues_unstable(state) {
+  const {
+    onAttachmentDismiss
+  } = state;
+  // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
+  const attachmentList = {
+    onAttachmentDismiss
+  };
+  return {
+    attachmentList
+  };
+}
+//# sourceMappingURL=useAttachmentListContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentListContextValues.ts"],"sourcesContent":["import type { AttachmentListContextValues, AttachmentListState } from './AttachmentList.types';\n\nexport function useAttachmentListContextValues_unstable(state: AttachmentListState): AttachmentListContextValues {\n  const { onAttachmentDismiss } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const attachmentList = {\n    onAttachmentDismiss,\n  };\n\n  return { attachmentList };\n}\n"],"names":["useAttachmentListContextValues_unstable","state","onAttachmentDismiss","attachmentList"],"mappings":"AAEA,OAAO,SAASA,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,mBAAmB,EAAE,GAAGD;IAEhC,mGAAmG;IACnG,MAAME,iBAAiB;QACrBD;IACF;IAEA,OAAO;QAAEC;IAAe;AAC1B"}

package/lib/components/AttachmentList/useAttachmentListStyles.js

@@ -0,0 +1,14 @@
+import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';
+export const attachmentListClassNames = {
+  root: 'fai-AttachmentList'
+};
+const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"]);
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */
+export const useAttachmentListStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useAttachmentListStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentListStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n  root: 'fai-AttachmentList',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'flex',\n  flexDirection: 'row',\n  flexShrink: 0,\n  flexWrap: 'wrap',\n  rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentListStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBL,gBAAgB;IAC3CM,WAAWJ,OAAOK,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQV,OAAOW,iBAAiB;AAClC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,oBAAoBX;IAE1BU,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,yBAAyBC,IAAI,EAAEY,mBAAmBD,MAAMX,IAAI,CAACa,SAAS;IAE1G,OAAOF;AACT,EAAE"}

package/lib/components/index.js

@@ -1,4 +1,6 @@
 export * from './AttachmentTag';
 export * from './AttachmentTagList';
 export * from './AttachmentTagItem';
+export * from './Attachment';
+export * from './AttachmentList';
 //# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AttachmentTag';\nexport * from './AttachmentTagList';\nexport * from './AttachmentTagItem';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,sBAAsB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AttachmentTag';\nexport * from './AttachmentTagList';\nexport * from './AttachmentTagItem';\nexport * from './Attachment';\nexport * from './AttachmentList';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,eAAe;AAC7B,cAAc,mBAAmB"}

package/lib/contexts/attachmentListContext.js

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

package/lib/contexts/attachmentListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["attachmentListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AttachmentListProps } from '../components/index';\n\nexport const AttachmentListContext: Context<AttachmentListContextValue> = createContext<\n  AttachmentListContextValue | undefined\n>(undefined) as Context<AttachmentListContextValue>;\n\nconst attachmentListContextDefaultValue: AttachmentListContextValue = {\n  onAttachmentDismiss: () => null,\n};\n\n/**\n * Context shared between AttachmentList and its children components\n */\nexport type AttachmentListContextValue = Pick<AttachmentListProps, 'onAttachmentDismiss'>;\n\nexport const AttachmentListProvider = AttachmentListContext.Provider;\n\nexport const useAttachmentListContext_unstable = <T>(selector: ContextSelector<AttachmentListContextValue, T>) =>\n  useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AttachmentListContext","undefined","attachmentListContextDefaultValue","onAttachmentDismiss","AttachmentListProvider","Provider","useAttachmentListContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,wBAA6DF,cAExEG,WAAkD;AAEpD,MAAMC,oCAAgE;IACpEC,qBAAqB,IAAM;AAC7B;AAOA,OAAO,MAAMC,yBAAyBJ,sBAAsBK,QAAQ,CAAC;AAErE,OAAO,MAAMC,oCAAoC,CAAIC,WACnDR,mBAAmBC,uBAAuB,CAACQ,MAAMN,iCAAiC,GAAKK,SAASC,MAAM"}

package/lib/index.js

@@ -1,5 +1,7 @@
 export { AttachmentTag, attachmentTagClassNames, renderAttachmentTag_unstable, useAttachmentTagStyles_unstable, useAttachmentTag_unstable } from './AttachmentTag';
 export { AttachmentTagList, attachmentTagListClassNames, renderAttachmentTagList_unstable, useAttachmentTagListStyles_unstable, useAttachmentTagList_unstable } from './AttachmentTagList';
 export { AttachmentTagItem, attachmentTagItemClassNames, renderAttachmentTagItem_unstable, useAttachmentTagItemStyles_unstable, useAttachmentTagItem_unstable } from './AttachmentTagItem';
+export { AttachmentList, attachmentListClassNames, renderAttachmentList_unstable, useAttachmentListStyles_unstable, useAttachmentList_unstable } from './AttachmentList';
+export { AttachmentListContext, AttachmentListProvider, useAttachmentListContext_unstable } from './contexts/attachmentListContext';
 export { Attachment, attachmentClassNames, renderAttachment_unstable, useAttachmentStyles_unstable, useAttachment_unstable } from './Attachment';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { AttachmentTagProps, AttachmentTagSlots, AttachmentTagState } from './AttachmentTag';\nexport {\n  AttachmentTag,\n  attachmentTagClassNames,\n  renderAttachmentTag_unstable,\n  useAttachmentTagStyles_unstable,\n  useAttachmentTag_unstable,\n} from './AttachmentTag';\nexport type {\n  AttachmentTagDismissedData,\n  AttachmentTagListProps,\n  AttachmentTagListSlots,\n  AttachmentTagListState,\n} from './AttachmentTagList';\nexport {\n  AttachmentTagList,\n  attachmentTagListClassNames,\n  renderAttachmentTagList_unstable,\n  useAttachmentTagListStyles_unstable,\n  useAttachmentTagList_unstable,\n} from './AttachmentTagList';\n\nexport type { AttachmentTagItemProps, AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem';\nexport {\n  AttachmentTagItem,\n  attachmentTagItemClassNames,\n  renderAttachmentTagItem_unstable,\n  useAttachmentTagItemStyles_unstable,\n  useAttachmentTagItem_unstable,\n} from './AttachmentTagItem';\n\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment';\nexport { Attachment, attachmentClassNames, renderAttachment_unstable, useAttachmentStyles_unstable, useAttachment_unstable } from './Attachment';\n"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable"],"mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SAASC,UAAU,EAAEC,oBAAoB,EAAEC,yBAAyB,EAAEC,4BAA4B,EAAEC,sBAAsB,QAAQ,eAAe"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { AttachmentTagProps, AttachmentTagSlots, AttachmentTagState } from './AttachmentTag';\nexport {\n  AttachmentTag,\n  attachmentTagClassNames,\n  renderAttachmentTag_unstable,\n  useAttachmentTagStyles_unstable,\n  useAttachmentTag_unstable,\n} from './AttachmentTag';\nexport type {\n  AttachmentTagDismissedData,\n  AttachmentTagListProps,\n  AttachmentTagListSlots,\n  AttachmentTagListState,\n} from './AttachmentTagList';\nexport {\n  AttachmentTagList,\n  attachmentTagListClassNames,\n  renderAttachmentTagList_unstable,\n  useAttachmentTagListStyles_unstable,\n  useAttachmentTagList_unstable,\n} from './AttachmentTagList';\n\nexport type { AttachmentTagItemProps, AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem';\nexport {\n  AttachmentTagItem,\n  attachmentTagItemClassNames,\n  renderAttachmentTagItem_unstable,\n  useAttachmentTagItemStyles_unstable,\n  useAttachmentTagItem_unstable,\n} from './AttachmentTagItem';\n\nexport type { AttachmentListProps, AttachmentListSlots, AttachmentListState } from './AttachmentList';\nexport {\n  AttachmentList,\n  attachmentListClassNames,\n  renderAttachmentList_unstable,\n  useAttachmentListStyles_unstable,\n  useAttachmentList_unstable,\n} from './AttachmentList';\nexport type { AttachmentListContextValue } from './contexts/attachmentListContext';\nexport {\n  AttachmentListContext,\n  AttachmentListProvider,\n  useAttachmentListContext_unstable,\n} from './contexts/attachmentListContext';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment';\nexport {\n  Attachment,\n  attachmentClassNames,\n  renderAttachment_unstable,\n  useAttachmentStyles_unstable,\n  useAttachment_unstable,\n} from './Attachment';\n"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","AttachmentList","attachmentListClassNames","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentList_unstable","AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable"],"mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,mCAAmC;AAE1C,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe"}

package/lib-commonjs/AttachmentList.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/AttachmentList/index"), exports);
+ //# sourceMappingURL=AttachmentList.js.map

package/lib-commonjs/AttachmentList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentList.js"],"sourcesContent":["export * from './components/AttachmentList/index';\n//# sourceMappingURL=AttachmentList.js.map"],"names":[],"mappings":";;;;;uBAAc;CACd,0CAA0C"}

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

@@ -12,12 +12,11 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
-const _attachmentTagListContext = require("../../contexts/attachmentTagListContext");
+const _attachmentListContext = require("../../contexts/attachmentListContext");
 const useAttachment_unstable = (props, ref)=>{
     const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
-    //TODO: replace with context from to be created AttachmentList component
-    const onAttachmentTagDismiss = (0, _attachmentTagListContext.useAttachmentTagListContext_unstable)((context)=>context.onAttachmentTagDismiss);
-    const root = _reactcomponents.slot.always((0, _reactcomponents.getNativeElementProps)('div', {
+    const onAttachmentDismiss = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context.onAttachmentDismiss);
+    const root = _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
         ref,
         ...props
     }), {
@@ -32,9 +31,8 @@ const useAttachment_unstable = (props, ref)=>{
         },
         elementType: 'button'
     });
-    dismissButton.onClick = (0, _reactcomponents.mergeCallbacks)(dismissButton.onClick, (ev)=>onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
-            content: props.children,
-            media: props.media
+    dismissButton.onClick = (0, _reactcomponents.mergeCallbacks)(dismissButton.onClick, (ev)=>onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+            id: props.id
         }));
     const media = _reactcomponents.slot.optional(props.media, {
         elementType: 'span'

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachment.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';\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  //TODO: replace with context from to be created AttachmentList component\n  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);\n  const root = slot.always(getNativeElementProps('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 => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {\n    content: props.children,\n    media: props.media\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","onAttachmentTagDismiss","useAttachmentTagListContext_unstable","context","root","slot","always","getNativeElementProps","elementType","primaryAction","dismissButton","defaultProps","onClick","mergeCallbacks","ev","content","children","media","optional","dismissIcon","React","createElement","state","components","as"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;iCACqC;4BACE;0CACT;AAU9C,MAAMA,yBAAyB,CAACC,OAAOC;IAC5C,MAAMC,cAAcC,IAAAA,sBAAU,EAACC,2BAAe,EAAEC,4BAAgB;IAChE,wEAAwE;IACxE,MAAMC,yBAAyBC,IAAAA,8DAAoC,EAACC,CAAAA,UAAWA,QAAQF,sBAAsB;IAC7G,MAAMG,OAAOC,qBAAI,CAACC,MAAM,CAACC,IAAAA,sCAAqB,EAAC,OAAO;QACpDX;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,2BAA2B,QAAQA,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBa,IAAI;YAC7KC,SAASpB,MAAMqB,QAAQ;YACvBC,OAAOtB,MAAMsB,KAAK;QACpB;IACA,MAAMA,QAAQZ,qBAAI,CAACa,QAAQ,CAACvB,MAAMsB,KAAK,EAAE;QACvCT,aAAa;IACf;IACA,MAAMO,UAAUV,qBAAI,CAACC,MAAM,CAACX,MAAMoB,OAAO,EAAE;QACzCJ,cAAc;YACZK,UAAUrB,MAAMqB,QAAQ;QAC1B;QACAR,aAAa;IACf;IACA,MAAMW,cAAcd,qBAAI,CAACC,MAAM,CAACX,MAAMwB,WAAW,EAAE;QACjDR,cAAc;YACZK,UAAU,WAAW,GAAEI,OAAMC,aAAa,CAACxB,aAAa;QAC1D;QACAW,aAAa;IACf;IACA,MAAMc,QAAQ;QACZC,YAAY;YACVnB,MAAM;YACNK,eAAe;YACfC,eAAe;YACfO,OAAO;YACPF,SAAS;YACTI,aAAa;QACf;QACAf;QACAK;QACAC;QACAO;QACAF;QACAI;IACF;IACA,IAAIG,MAAMb,aAAa,CAACe,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACd,aAAa,GAAG;IACnC;IACA,OAAOa;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 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"}

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)("r1u26nio", null, [
-    ".r1u26nio{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;max-width:180px;}"
+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 buttonBaseStyles = {
     alignItems: 'center',
@@ -109,8 +109,8 @@ const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r1cf2
         "@media (forced-colors: active){.rhq1520:hover{background-color:HighlightText;}.rhq1520:active{background-color:HighlightText;}}"
     ]
 });
-const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("r19jnv3a", null, [
-    ".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}"
+const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("rz1lum2", null, [
+    ".rz1lum2{display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}"
 ]);
 const useContentBaseClassName = (0, _reactcomponents.__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);}"

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(\"r1u26nio\", null, [\".r1u26nio{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;max-width:180px;}\"]);\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(\"r19jnv3a\", null, [\".r19jnv3a{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(\"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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"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AttachmentList", {
+    enumerable: true,
+    get: function() {
+        return AttachmentList;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useAttachmentList = require("./useAttachmentList");
+const _renderAttachmentList = require("./renderAttachmentList");
+const _useAttachmentListStyles = require("./useAttachmentListStyles");
+const _useAttachmentListContextValues = require("./useAttachmentListContextValues");
+const AttachmentList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useAttachmentList.useAttachmentList_unstable)(props, ref);
+    const contextValues = (0, _useAttachmentListContextValues.useAttachmentListContextValues_unstable)(state);
+    (0, _useAttachmentListStyles.useAttachmentListStyles_unstable)(state);
+    return (0, _renderAttachmentList.renderAttachmentList_unstable)(state, contextValues);
+});
+AttachmentList.displayName = 'AttachmentList'; //# sourceMappingURL=AttachmentList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentList.js"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentList_unstable } from './useAttachmentList';\nimport { renderAttachmentList_unstable } from './renderAttachmentList';\nimport { useAttachmentListStyles_unstable } from './useAttachmentListStyles';\nimport { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';\nexport const AttachmentList = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useAttachmentList_unstable(props, ref);\n  const contextValues = useAttachmentListContextValues_unstable(state);\n  useAttachmentListStyles_unstable(state);\n  return renderAttachmentList_unstable(state, contextValues);\n});\nAttachmentList.displayName = 'AttachmentList';\n//# sourceMappingURL=AttachmentList.js.map"],"names":["AttachmentList","React","forwardRef","props","ref","state","useAttachmentList_unstable","contextValues","useAttachmentListContextValues_unstable","useAttachmentListStyles_unstable","renderAttachmentList_unstable","displayName"],"mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;mCACoB;sCACG;yCACG;gDACO;AACjD,MAAMA,iBAAiB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAClE,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChD,MAAMG,gBAAgBC,IAAAA,uEAAuC,EAACH;IAC9DI,IAAAA,yDAAgC,EAACJ;IACjC,OAAOK,IAAAA,mDAA6B,EAACL,OAAOE;AAC9C;AACAP,eAAeW,WAAW,GAAG,kBAC7B,0CAA0C"}

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+ //# sourceMappingURL=AttachmentList.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentList.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=AttachmentList.types.js.map"],"names":[],"mappings":";;;;CACA,gDAAgD"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./AttachmentList"), exports);
+_export_star._(require("./AttachmentList.types"), exports);
+_export_star._(require("./renderAttachmentList"), exports);
+_export_star._(require("./useAttachmentList"), exports);
+_export_star._(require("./useAttachmentListStyles"), exports);
+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './AttachmentList';\nexport * from './AttachmentList.types';\nexport * from './renderAttachmentList';\nexport * from './useAttachmentList';\nexport * from './useAttachmentListStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;CACd,iCAAiC"}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderAttachmentList_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderAttachmentList_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactcomponents = require("@fluentui/react-components");
+const _attachmentListContext = require("../../contexts/attachmentListContext");
+const renderAttachmentList_unstable = (state, contextValues)=>{
+    (0, _reactcomponents.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_attachmentListContext.AttachmentListProvider, {
+        value: contextValues.attachmentList,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    });
+}; //# sourceMappingURL=renderAttachmentList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderAttachmentList.js"],"sourcesContent":["import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (state, contextValues) => {\n  assertSlots(state);\n  return /*#__PURE__*/_jsx(AttachmentListProvider, {\n    value: contextValues.attachmentList,\n    children: /*#__PURE__*/_jsx(state.root, {})\n  });\n};\n//# sourceMappingURL=renderAttachmentList.js.map"],"names":["renderAttachmentList_unstable","state","contextValues","assertSlots","_jsx","AttachmentListProvider","value","attachmentList","children","root"],"mappings":";;;;+BAMaA;;;eAAAA;;;4BANe;iCACA;uCACW;AAIhC,MAAMA,gCAAgC,CAACC,OAAOC;IACnDC,IAAAA,4BAAW,EAACF;IACZ,OAAO,WAAW,GAAEG,IAAAA,eAAI,EAACC,6CAAsB,EAAE;QAC/CC,OAAOJ,cAAcK,cAAc;QACnCC,UAAU,WAAW,GAAEJ,IAAAA,eAAI,EAACH,MAAMQ,IAAI,EAAE,CAAC;IAC3C;AACF,GACA,gDAAgD"}

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAttachmentList_unstable", {
+    enumerable: true,
+    get: function() {
+        return useAttachmentList_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactcomponents = require("@fluentui/react-components");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reactoverflow = require("@fluentui/react-overflow");
+const useAttachmentList_unstable = (props, ref)=>{
+    const { onAttachmentDismiss } = props;
+    const attachmentsVisibilityStatus = (0, _reactoverflow.useOverflowContext)((context)=>context.itemVisibility);
+    const innerRef = _react.useRef(null);
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const { findNextFocusable, findPrevFocusable } = (0, _reactcomponents.useFocusFinders)();
+    const handleAttachmentDismiss = (0, _reactcomponents.useEventCallback)((e, data)=>{
+        var _innerRef_current;
+        if (!onAttachmentDismiss) {
+            return;
+        }
+        onAttachmentDismiss(e, data);
+        // Remove attachment from overflow context
+        attachmentsVisibilityStatus === null || attachmentsVisibilityStatus === void 0 ? true : delete attachmentsVisibilityStatus[data.id];
+        // set focus after attachment dismiss
+        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+        if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {
+            // focus on next attachment only if the active element is within the current attachment list
+            const next = findNextFocusable(activeElement, {
+                container: innerRef.current
+            });
+            if (next) {
+                next.focus();
+                return;
+            } else {
+                const prev = findPrevFocusable(activeElement === null || activeElement === void 0 ? void 0 : activeElement.parentElement, {
+                    container: innerRef.current
+                });
+                prev === null || prev === void 0 ? void 0 : prev.focus();
+            }
+        }
+    });
+    const arrowNavigationProps = (0, _reactcomponents.useArrowNavigationGroup)({
+        circular: true,
+        axis: 'both',
+        memorizeCurrent: true
+    });
+    return {
+        onAttachmentDismiss: handleAttachmentDismiss,
+        components: {
+            root: 'div'
+        },
+        root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
+            'aria-label': 'Attachments',
+            ref: (0, _reactcomponents.useMergedRefs)(ref, innerRef),
+            role: 'toolbar',
+            ...arrowNavigationProps,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+}; //# sourceMappingURL=useAttachmentList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentList.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useOverflowContext } from '@fluentui/react-overflow';\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (props, ref) => {\n  const {\n    onAttachmentDismiss\n  } = props;\n  const attachmentsVisibilityStatus = useOverflowContext(context => context.itemVisibility);\n  const innerRef = React.useRef(null);\n  const {\n    targetDocument\n  } = useFluent();\n  const {\n    findNextFocusable,\n    findPrevFocusable\n  } = useFocusFinders();\n  const handleAttachmentDismiss = useEventCallback((e, data) => {\n    var _innerRef_current;\n    if (!onAttachmentDismiss) {\n      return;\n    }\n    onAttachmentDismiss(e, data);\n    // Remove attachment from overflow context\n    attachmentsVisibilityStatus === null || attachmentsVisibilityStatus === void 0 ? true : delete attachmentsVisibilityStatus[data.id];\n    // set focus after attachment dismiss\n    const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n    if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {\n      // focus on next attachment only if the active element is within the current attachment list\n      const next = findNextFocusable(activeElement, {\n        container: innerRef.current\n      });\n      if (next) {\n        next.focus();\n        return;\n      } else {\n        const prev = findPrevFocusable(activeElement === null || activeElement === void 0 ? void 0 : activeElement.parentElement, {\n          container: innerRef.current\n        });\n        prev === null || prev === void 0 ? void 0 : prev.focus();\n      }\n    }\n  });\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true\n  });\n  return {\n    onAttachmentDismiss: handleAttachmentDismiss,\n    components: {\n      root: 'div'\n    },\n    root: slot.always(getIntrinsicElementProps('div', {\n      'aria-label': 'Attachments',\n      ref: useMergedRefs(ref, innerRef),\n      role: 'toolbar',\n      ...arrowNavigationProps,\n      ...props\n    }), {\n      elementType: 'div'\n    })\n  };\n};\n//# sourceMappingURL=useAttachmentList.js.map"],"names":["useAttachmentList_unstable","props","ref","onAttachmentDismiss","attachmentsVisibilityStatus","useOverflowContext","context","itemVisibility","innerRef","React","useRef","targetDocument","useFluent","findNextFocusable","findPrevFocusable","useFocusFinders","handleAttachmentDismiss","useEventCallback","e","data","_innerRef_current","id","activeElement","current","contains","next","container","focus","prev","parentElement","arrowNavigationProps","useArrowNavigationGroup","circular","axis","memorizeCurrent","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;iCACmG;qCAC1E;+BACb;AAU5B,MAAMA,6BAA6B,CAACC,OAAOC;IAChD,MAAM,EACJC,mBAAmB,EACpB,GAAGF;IACJ,MAAMG,8BAA8BC,IAAAA,iCAAkB,EAACC,CAAAA,UAAWA,QAAQC,cAAc;IACxF,MAAMC,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAM,EACJC,cAAc,EACf,GAAGC,IAAAA,uCAAS;IACb,MAAM,EACJC,iBAAiB,EACjBC,iBAAiB,EAClB,GAAGC,IAAAA,gCAAe;IACnB,MAAMC,0BAA0BC,IAAAA,iCAAgB,EAAC,CAACC,GAAGC;QACnD,IAAIC;QACJ,IAAI,CAACjB,qBAAqB;YACxB;QACF;QACAA,oBAAoBe,GAAGC;QACvB,0CAA0C;QAC1Cf,gCAAgC,QAAQA,gCAAgC,KAAK,IAAI,OAAO,OAAOA,2BAA2B,CAACe,KAAKE,EAAE,CAAC;QACnI,qCAAqC;QACrC,MAAMC,gBAAgBX,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeW,aAAa;QAClH,IAAI,AAACF,CAAAA,oBAAoBZ,SAASe,OAAO,AAAD,MAAO,QAAQH,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBI,QAAQ,CAACF,gBAAgB;YACxI,4FAA4F;YAC5F,MAAMG,OAAOZ,kBAAkBS,eAAe;gBAC5CI,WAAWlB,SAASe,OAAO;YAC7B;YACA,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF,OAAO;gBACL,MAAMC,OAAOd,kBAAkBQ,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcO,aAAa,EAAE;oBACxHH,WAAWlB,SAASe,OAAO;gBAC7B;gBACAK,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKD,KAAK;YACxD;QACF;IACF;IACA,MAAMG,uBAAuBC,IAAAA,wCAAuB,EAAC;QACnDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IACA,OAAO;QACL/B,qBAAqBa;QACrBmB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,qBAAI,CAACC,MAAM,CAACC,IAAAA,yCAAwB,EAAC,OAAO;YAChD,cAAc;YACdrC,KAAKsC,IAAAA,8BAAa,EAACtC,KAAKM;YACxBiC,MAAM;YACN,GAAGX,oBAAoB;YACvB,GAAG7B,KAAK;QACV,IAAI;YACFyC,aAAa;QACf;IACF;AACF,GACA,6CAA6C"}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAttachmentListContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useAttachmentListContextValues_unstable;
+    }
+});
+function useAttachmentListContextValues_unstable(state) {
+    const { onAttachmentDismiss } = state;
+    // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
+    const attachmentList = {
+        onAttachmentDismiss
+    };
+    return {
+        attachmentList
+    };
+} //# sourceMappingURL=useAttachmentListContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentListContextValues.js"],"sourcesContent":["export function useAttachmentListContextValues_unstable(state) {\n  const {\n    onAttachmentDismiss\n  } = state;\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const attachmentList = {\n    onAttachmentDismiss\n  };\n  return {\n    attachmentList\n  };\n}\n//# sourceMappingURL=useAttachmentListContextValues.js.map"],"names":["useAttachmentListContextValues_unstable","state","onAttachmentDismiss","attachmentList"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,wCAAwCC,KAAK;IAC3D,MAAM,EACJC,mBAAmB,EACpB,GAAGD;IACJ,mGAAmG;IACnG,MAAME,iBAAiB;QACrBD;IACF;IACA,OAAO;QACLC;IACF;AACF,EACA,0DAA0D"}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachmentListClassNames: function() {
+        return attachmentListClassNames;
+    },
+    useAttachmentListStyles_unstable: function() {
+        return useAttachmentListStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const attachmentListClassNames = {
+    root: 'fai-AttachmentList'
+};
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", null, [
+    ".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"
+]);
+const useAttachmentListStyles_unstable = (state)=>{
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+}; //# sourceMappingURL=useAttachmentListStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentListStyles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nexport const attachmentListClassNames = {\n  root: 'fai-AttachmentList'\n};\nconst useRootBaseClassName = __resetStyles(\"r168fwfa\", null, [\".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}\"]);\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentListStyles.js.map"],"names":["attachmentListClassNames","useAttachmentListStyles_unstable","root","useRootBaseClassName","__resetStyles","state","rootBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,wBAAwB;eAAxBA;;IAOAC,gCAAgC;eAAhCA;;;iCARuC;AAC7C,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAAC;CAAsJ;AAI7M,MAAMH,mCAAmCI,CAAAA;IAC9C,MAAMC,oBAAoBH;IAC1BE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,6BAAY,EAACR,yBAAyBE,IAAI,EAAEI,mBAAmBD,MAAMH,IAAI,CAACK,SAAS;IAC1G,OAAOF;AACT,GACA,mDAAmD"}

package/lib-commonjs/components/index.js

@@ -6,4 +6,6 @@ const _export_star = require("@swc/helpers/_/_export_star");
 _export_star._(require("./AttachmentTag"), exports);
 _export_star._(require("./AttachmentTagList"), exports);
 _export_star._(require("./AttachmentTagItem"), exports);
+_export_star._(require("./Attachment"), exports);
+_export_star._(require("./AttachmentList"), exports);
  //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './AttachmentTag';\nexport * from './AttachmentTagList';\nexport * from './AttachmentTagItem';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;CACd,iCAAiC"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './AttachmentTag';\nexport * from './AttachmentTagList';\nexport * from './AttachmentTagItem';\nexport * from './Attachment';\nexport * from './AttachmentList';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;CACd,iCAAiC"}

package/lib-commonjs/contexts/attachmentListContext.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AttachmentListContext: function() {
+        return AttachmentListContext;
+    },
+    AttachmentListProvider: function() {
+        return AttachmentListProvider;
+    },
+    useAttachmentListContext_unstable: function() {
+        return useAttachmentListContext_unstable;
+    }
+});
+const _reactcontextselector = require("@fluentui/react-context-selector");
+const AttachmentListContext = (0, _reactcontextselector.createContext)(undefined);
+const attachmentListContextDefaultValue = {
+    onAttachmentDismiss: ()=>null
+};
+const AttachmentListProvider = AttachmentListContext.Provider;
+const useAttachmentListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(AttachmentListContext, (ctx = attachmentListContextDefaultValue)=>selector(ctx)); //# sourceMappingURL=attachmentListContext.js.map

package/lib-commonjs/contexts/attachmentListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["attachmentListContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nexport const AttachmentListContext = createContext(undefined);\nconst attachmentListContextDefaultValue = {\n  onAttachmentDismiss: () => null\n};\nexport const AttachmentListProvider = AttachmentListContext.Provider;\nexport const useAttachmentListContext_unstable = selector => useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));\n//# sourceMappingURL=attachmentListContext.js.map"],"names":["AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","createContext","undefined","attachmentListContextDefaultValue","onAttachmentDismiss","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,qBAAqB;eAArBA;;IAIAC,sBAAsB;eAAtBA;;IACAC,iCAAiC;eAAjCA;;;sCANqC;AAC3C,MAAMF,wBAAwBG,IAAAA,mCAAa,EAACC;AACnD,MAAMC,oCAAoC;IACxCC,qBAAqB,IAAM;AAC7B;AACO,MAAML,yBAAyBD,sBAAsBO,QAAQ;AAC7D,MAAML,oCAAoCM,CAAAA,WAAYC,IAAAA,wCAAkB,EAACT,uBAAuB,CAACU,MAAML,iCAAiC,GAAKG,SAASE,OAC7J,iDAAiD"}

package/lib-commonjs/index.js

@@ -54,6 +54,30 @@ _export(exports, {
     useAttachmentTagItem_unstable: function() {
         return _AttachmentTagItem.useAttachmentTagItem_unstable;
     },
+    AttachmentList: function() {
+        return _AttachmentList.AttachmentList;
+    },
+    attachmentListClassNames: function() {
+        return _AttachmentList.attachmentListClassNames;
+    },
+    renderAttachmentList_unstable: function() {
+        return _AttachmentList.renderAttachmentList_unstable;
+    },
+    useAttachmentListStyles_unstable: function() {
+        return _AttachmentList.useAttachmentListStyles_unstable;
+    },
+    useAttachmentList_unstable: function() {
+        return _AttachmentList.useAttachmentList_unstable;
+    },
+    AttachmentListContext: function() {
+        return _attachmentListContext.AttachmentListContext;
+    },
+    AttachmentListProvider: function() {
+        return _attachmentListContext.AttachmentListProvider;
+    },
+    useAttachmentListContext_unstable: function() {
+        return _attachmentListContext.useAttachmentListContext_unstable;
+    },
     Attachment: function() {
         return _Attachment.Attachment;
     },
@@ -73,5 +97,7 @@ _export(exports, {
 const _AttachmentTag = require("./AttachmentTag");
 const _AttachmentTagList = require("./AttachmentTagList");
 const _AttachmentTagItem = require("./AttachmentTagItem");
+const _AttachmentList = require("./AttachmentList");
+const _attachmentListContext = require("./contexts/attachmentListContext");
 const _Attachment = require("./Attachment");
  //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { AttachmentTag, attachmentTagClassNames, renderAttachmentTag_unstable, useAttachmentTagStyles_unstable, useAttachmentTag_unstable } from './AttachmentTag';\nexport { AttachmentTagList, attachmentTagListClassNames, renderAttachmentTagList_unstable, useAttachmentTagListStyles_unstable, useAttachmentTagList_unstable } from './AttachmentTagList';\nexport { AttachmentTagItem, attachmentTagItemClassNames, renderAttachmentTagItem_unstable, useAttachmentTagItemStyles_unstable, useAttachmentTagItem_unstable } from './AttachmentTagItem';\nexport { Attachment, attachmentClassNames, renderAttachment_unstable, useAttachmentStyles_unstable, useAttachment_unstable } from './Attachment';\n//# sourceMappingURL=index.js.map"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable"],"mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAChIC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,yBAAyB;eAAzBA,qCAAyB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;;+BAHuB;mCACoB;mCACA;4BACnC;CAClI,iCAAiC"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { AttachmentTag, attachmentTagClassNames, renderAttachmentTag_unstable, useAttachmentTagStyles_unstable, useAttachmentTag_unstable } from './AttachmentTag';\nexport { AttachmentTagList, attachmentTagListClassNames, renderAttachmentTagList_unstable, useAttachmentTagListStyles_unstable, useAttachmentTagList_unstable } from './AttachmentTagList';\nexport { AttachmentTagItem, attachmentTagItemClassNames, renderAttachmentTagItem_unstable, useAttachmentTagItemStyles_unstable, useAttachmentTagItem_unstable } from './AttachmentTagItem';\nexport { AttachmentList, attachmentListClassNames, renderAttachmentList_unstable, useAttachmentListStyles_unstable, useAttachmentList_unstable } from './AttachmentList';\nexport { AttachmentListContext, AttachmentListProvider, useAttachmentListContext_unstable } from './contexts/attachmentListContext';\nexport { Attachment, attachmentClassNames, renderAttachment_unstable, useAttachmentStyles_unstable, useAttachment_unstable } from './Attachment';\n//# sourceMappingURL=index.js.map"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","AttachmentList","attachmentListClassNames","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentList_unstable","AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable"],"mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAChIC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,cAAc;eAAdA,8BAAc;;IAAEC,wBAAwB;eAAxBA,wCAAwB;;IAAEC,6BAA6B;eAA7BA,6CAA6B;;IAAEC,gCAAgC;eAAhCA,gDAAgC;;IAAEC,0BAA0B;eAA1BA,0CAA0B;;IACrIC,qBAAqB;eAArBA,4CAAqB;;IAAEC,sBAAsB;eAAtBA,6CAAsB;;IAAEC,iCAAiC;eAAjCA,wDAAiC;;IAChFC,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,yBAAyB;eAAzBA,qCAAyB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;;+BALuB;mCACoB;mCACA;gCACf;uCACrD;4BACiC;CAClI,iCAAiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,6 +21,7 @@
     "@fluentui/react-context-selector": ">=9.1.34 <10.0.0",
     "@fluentui/react-icons": ">=2.0.217 <3.0.0",
     "@fluentui/react-jsx-runtime": ">=9.0.18 <10.0.0",
+    "@fluentui/react-overflow": ">=9.0.18 <10.0.0",
     "@fluentui/react-shared-contexts": ">=9.11.1 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",
     "@types/react-dom": ">=16.9.8 <19.0.0",