@fluentui-copilot/react-attachments 0.8.0 → 0.8.1

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Wed, 13 Mar 2024 18:00:36 GMT",
+      "date": "Thu, 14 Mar 2024 18:24:04 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.8.1",
+      "version": "0.8.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "14ce40ddbee4d35f3f4bcf03521d60715b03d59c",
+            "comment": "feat: implement AttachmentTagItem component."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 13 Mar 2024 18:01:50 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.8.0",
       "version": "0.8.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Wed, 13 Mar 2024 18:00:36 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Mar 2024 18:24:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.8.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.1)
+
+Thu, 14 Mar 2024 18:24:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.8.0..@fluentui-copilot/react-attachments_v0.8.1)
+
+### Patches
+
+- feat: implement AttachmentTagItem component. ([PR #1435](https://github.com/microsoft/fluentai/pull/1435) by tristan.watanabe@gmail.com)
+
 ## [0.8.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.0)
 
-Wed, 13 Mar 2024 18:00:36 GMT 
+Wed, 13 Mar 2024 18:01:50 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentai/attachments_v0.7.1..@fluentui-copilot/react-attachments_v0.8.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -3,7 +3,7 @@
 import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
 import type { ForwardRefComponent } from '@fluentui/react-components';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
 
@@ -16,6 +16,27 @@ export declare type AttachmentTagDismissedData = {
     media?: AttachmentTagProps['media'];
 };
 
+export declare const AttachmentTagItem: ForwardRefComponent<AttachmentTagItemProps>;
+
+export declare const attachmentTagItemClassNames: SlotClassNames<AttachmentTagItemSlots>;
+
+/**
+ * AttachmentTagItem Props
+ */
+export declare type AttachmentTagItemProps = ComponentProps<Partial<AttachmentTagItemSlots>>;
+
+export declare type AttachmentTagItemSlots = {
+    root: NonNullable<Slot<'div'>>;
+    media?: Slot<'span'>;
+    content: NonNullable<Slot<'span'>>;
+    icon: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * State used in rendering AttachmentTagItem
+ */
+export declare type AttachmentTagItemState = ComponentState<AttachmentTagItemSlots>;
+
 export declare const AttachmentTagList: ForwardRefComponent<AttachmentTagListProps>;
 
 export declare const attachmentTagListClassNames: SlotClassNames<AttachmentTagListSlots>;
@@ -67,6 +88,11 @@ export declare type AttachmentTagState = ComponentState<AttachmentTagSlots>;
  */
 export declare const renderAttachmentTag_unstable: (state: AttachmentTagState) => JSX.Element;
 
+/**
+ * Render the final JSX of AttachmentTagItem
+ */
+export declare const renderAttachmentTagItem_unstable: (state: AttachmentTagItemState) => JSX.Element;
+
 /**
  * Render the final JSX of AttachmentTagList
  */
@@ -83,6 +109,22 @@ export declare const renderAttachmentTagList_unstable: (state: AttachmentTagList
  */
 export declare const useAttachmentTag_unstable: (props: AttachmentTagProps, ref: React_2.Ref<HTMLElement>) => AttachmentTagState;
 
+/**
+ * Create the state required to render AttachmentTagItem.
+ *
+ * The returned state can be modified with hooks such as useAttachmentTagItemStyles_unstable,
+ * before being passed to renderAttachmentTagItem_unstable.
+ *
+ * @param props - props from this instance of AttachmentTagItem
+ * @param ref - reference to root HTMLElement of AttachmentTagItem
+ */
+export declare const useAttachmentTagItem_unstable: (props: AttachmentTagItemProps, ref: React_2.Ref<HTMLElement>) => AttachmentTagItemState;
+
+/**
+ * Apply styling to the AttachmentTagItem slots based on the state
+ */
+export declare const useAttachmentTagItemStyles_unstable: (state: AttachmentTagItemState) => AttachmentTagItemState;
+
 /**
  * Create the state required to render AttachmentTagList.
  *

package/lib/components/AttachmentTag/useAttachmentTag.js

@@ -1,9 +1,4 @@
-import * as React from 'react';
-import { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
-import { useHasParentContext } from '@fluentui/react-context-selector';
-import { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';
-import { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';
-import { AttachmentTagListContext } from '../../contexts/attachmentTagListContext';
+import { useAttachmentTagSlots } from '../utils/useAttachmentTagSlots';
 /**
  * Create the state required to render AttachmentTag.
  *
@@ -14,51 +9,13 @@ import { AttachmentTagListContext } from '../../contexts/attachmentTagListContex
  * @param ref - reference to root HTMLElement of AttachmentTag
  */
 export const useAttachmentTag_unstable = (props, ref) => {
-  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);
-  const {
-    children,
-    role
-  } = props;
-  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
-  const hasParentContext = useHasParentContext(AttachmentTagListContext);
-  const rootRole = role !== null && role !== void 0 ? role : hasParentContext ? 'menuitem' : undefined;
-  const root = slot.always(getNativeElementProps('button', {
-    ref,
-    ...props,
-    role: rootRole
-  }), {
-    elementType: 'button'
-  });
-  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
-    content: children,
-    media
-  }));
-  const media = slot.optional(props.media, {
-    elementType: 'span'
-  });
-  const content = slot.always(props.content, {
-    defaultProps: {
-      children
-    },
-    elementType: 'span'
-  });
-  const icon = slot.always(props.icon, {
-    defaultProps: {
-      children: /*#__PURE__*/React.createElement(DismissIcon, null)
-    },
-    elementType: 'span'
-  });
-  return {
-    components: {
+  return useAttachmentTagSlots(props, ref, {
+    elementType: {
       root: 'button',
       media: 'span',
       content: 'span',
       icon: 'span'
-    },
-    root,
-    media,
-    content,
-    icon
-  };
+    }
+  });
 };
 //# sourceMappingURL=useAttachmentTag.js.map

package/lib/components/AttachmentTag/useAttachmentTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTag.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\n\nimport { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';\n\nimport { AttachmentTagListContext } from '../../contexts/attachmentTagListContext';\nimport type { AttachmentTagProps, AttachmentTagState } from './AttachmentTag.types';\n\n/**\n * Create the state required to render AttachmentTag.\n *\n * The returned state can be modified with hooks such as useAttachmentTagStyles_unstable,\n * before being passed to renderAttachmentTag_unstable.\n *\n * @param props - props from this instance of AttachmentTag\n * @param ref - reference to root HTMLElement of AttachmentTag\n */\nexport const useAttachmentTag_unstable = (\n  props: AttachmentTagProps,\n  ref: React.Ref<HTMLElement>,\n): AttachmentTagState => {\n  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);\n\n  const { children, role } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n\n  const hasParentContext = useHasParentContext(AttachmentTagListContext);\n  const rootRole = role ?? (hasParentContext ? 'menuitem' : undefined);\n\n  const root = slot.always(\n    getNativeElementProps('button', {\n      ref,\n      ...props,\n      role: rootRole,\n    }),\n    { elementType: 'button' },\n  );\n  root.onClick = mergeCallbacks(\n    root.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n      onAttachmentTagDismiss?.(ev, { content: children, media }),\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children,\n    },\n    elementType: 'span',\n  });\n\n  const icon = slot.always(props.icon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  return {\n    components: {\n      root: 'button',\n      media: 'span',\n      content: 'span',\n      icon: 'span',\n    },\n\n    root,\n    media,\n    content,\n    icon,\n  };\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","slot","useHasParentContext","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentTagListContext_unstable","AttachmentTagListContext","useAttachmentTag_unstable","props","ref","onAttachmentTagDismiss","context","children","role","DismissIcon","hasParentContext","rootRole","undefined","root","always","elementType","onClick","ev","content","media","optional","defaultProps","icon","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AACzF,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AAEtF,SAASC,oCAAoC,QAAQ,0CAA0C;AAE/F,SAASC,wBAAwB,QAAQ,0CAA0C;AAGnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,yBAAyBL,qCAAqCM,CAAAA,UAAWA,QAAQD,sBAAsB;IAE7G,MAAM,EAAEE,QAAQ,EAAEC,IAAI,EAAE,GAAGL;IAC3B,MAAMM,cAAcV,WAAWD,iBAAiBD;IAEhD,MAAMa,mBAAmBd,oBAAoBK;IAC7C,MAAMU,WAAWH,iBAAAA,kBAAAA,OAASE,mBAAmB,aAAaE;IAE1D,MAAMC,OAAOlB,KAAKmB,MAAM,CACtBrB,sBAAsB,UAAU;QAC9BW;QACA,GAAGD,KAAK;QACRK,MAAMG;IACR,IACA;QAAEI,aAAa;IAAS;IAE1BF,KAAKG,OAAO,GAAGtB,eACbmB,KAAKG,OAAO,EACZ,CAACC,KACCZ,mCAAAA,6CAAAA,uBAAyBY,IAAI;YAAEC,SAASX;YAAUY;QAAM;IAG5D,MAAMA,QAAQxB,KAAKyB,QAAQ,CAACjB,MAAMgB,KAAK,EAAE;QAAEJ,aAAa;IAAO;IAE/D,MAAMG,UAAUvB,KAAKmB,MAAM,CAACX,MAAMe,OAAO,EAAE;QACzCG,cAAc;YACZd;QACF;QACAQ,aAAa;IACf;IAEA,MAAMO,OAAO3B,KAAKmB,MAAM,CAACX,MAAMmB,IAAI,EAAE;QACnCD,cAAc;YACZd,wBAAU,oBAACE;QACb;QACAM,aAAa;IACf;IAEA,OAAO;QACLQ,YAAY;YACVV,MAAM;YACNM,OAAO;YACPD,SAAS;YACTI,MAAM;QACR;QAEAT;QACAM;QACAD;QACAI;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentTag.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { useAttachmentTagSlots } from '../utils/useAttachmentTagSlots';\nimport type { AttachmentTagProps, AttachmentTagState } from './AttachmentTag.types';\n\n/**\n * Create the state required to render AttachmentTag.\n *\n * The returned state can be modified with hooks such as useAttachmentTagStyles_unstable,\n * before being passed to renderAttachmentTag_unstable.\n *\n * @param props - props from this instance of AttachmentTag\n * @param ref - reference to root HTMLElement of AttachmentTag\n */\nexport const useAttachmentTag_unstable = (\n  props: AttachmentTagProps,\n  ref: React.Ref<HTMLElement>,\n): AttachmentTagState => {\n  return useAttachmentTagSlots(props, ref, {\n    elementType: { root: 'button', media: 'span', content: 'span', icon: 'span' },\n  });\n};\n"],"names":["useAttachmentTagSlots","useAttachmentTag_unstable","props","ref","elementType","root","media","content","icon"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,iCAAiC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,OAAOH,sBAAsBE,OAAOC,KAAK;QACvCC,aAAa;YAAEC,MAAM;YAAUC,OAAO;YAAQC,SAAS;YAAQC,MAAM;QAAO;IAC9E;AACF,EAAE"}

package/lib/components/AttachmentTag/useAttachmentTagStyles.js

@@ -5,12 +5,24 @@ export const attachmentTagClassNames = {
   content: 'fai-AttachmentTag__content',
   icon: 'fai-AttachmentTag__icon'
 };
-const ATTACHMENTTAG_MAXWIDTH = '180px';
+/**
+ * @internal
+ */
+export const ATTACHMENTTAG_MAXWIDTH = '180px';
 const ATTACHMENTTAG_SIZE = '20px';
 const useRootBaseClassName = __resetStyles("r1km3emv", "r21ecva", [".r1km3emv{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;max-width:180px;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;}", ".r1km3emv:hover{border-color:var(--colorNeutralStroke1Hover);}", ".r1km3emv:hover .fai-AttachmentTag__icon{color:var(--colorBrandForegroundLinkHover);}", ".r1km3emv:hover:active{border-color:var(--colorNeutralStroke1Pressed);}", ".r1km3emv:hover:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".r1km3emv:focus .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandHover);}", ".r1km3emv:focus:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".r21ecva{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;max-width:180px;padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalXS);vertical-align:middle;}", ".r21ecva:hover{border-color:var(--colorNeutralStroke1Hover);}", ".r21ecva:hover .fai-AttachmentTag__icon{color:var(--colorBrandForegroundLinkHover);}", ".r21ecva:hover:active{border-color:var(--colorNeutralStroke1Pressed);}", ".r21ecva:hover:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".r21ecva:focus .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandHover);}", ".r21ecva:focus:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}"]);
-const useMediaBaseClassName = __resetStyles("r19jnv3a", null, [".r19jnv3a{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 useIconBaseClassName = __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);}"]);
+/**
+ * @internal
+ */
+export const useMediaBaseClassName = __resetStyles("r19jnv3a", null, [".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}"]);
+/**
+ * @internal
+ */
+export 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);}"]);
+/**
+ * @internal
+ */
+export const useIconBaseClassName = __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);}"]);
 /**
  * Apply styling to the AttachmentTag slots based on the state
  */

package/lib/components/AttachmentTag/useAttachmentTagStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTagStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { AttachmentTagSlots, AttachmentTagState } from './AttachmentTag.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagClassNames: SlotClassNames<AttachmentTagSlots> = {\n  root: 'fai-AttachmentTag',\n  media: 'fai-AttachmentTag__media',\n  content: 'fai-AttachmentTag__content',\n  icon: 'fai-AttachmentTag__icon',\n};\nconst ATTACHMENTTAG_MAXWIDTH = '180px';\nconst ATTACHMENTTAG_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  maxWidth: ATTACHMENTTAG_MAXWIDTH,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n\n  ':hover': {\n    borderColor: tokens.colorNeutralStroke1Hover,\n\n    [`& .${attachmentTagClassNames.icon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n\n  ':hover:active': {\n    borderColor: tokens.colorNeutralStroke1Pressed,\n\n    [`& .${attachmentTagClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  ':focus': {\n    [`& .${attachmentTagClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n\n  ':focus:active': {\n    [`& .${attachmentTagClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  fontSize: ATTACHMENTTAG_SIZE,\n  height: ATTACHMENTTAG_SIZE,\n  lineHeight: ATTACHMENTTAG_SIZE,\n  width: ATTACHMENTTAG_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useIconBaseClassName = 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: ATTACHMENTTAG_SIZE,\n  height: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\n/**\n * Apply styling to the AttachmentTag slots based on the state\n */\nexport const useAttachmentTagStyles_unstable = (state: AttachmentTagState): AttachmentTagState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n\n  state.root.className = mergeClasses(attachmentTagClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentTagClassNames.media, mediaBaseClassName, state.media.className);\n  }\n\n  state.content.className = mergeClasses(\n    attachmentTagClassNames.content,\n    contentBaseClassName,\n    state.content.className,\n  );\n\n  state.icon.className = mergeClasses(attachmentTagClassNames.icon, iconBaseClassName, state.icon.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","attachmentTagClassNames","root","media","content","icon","ATTACHMENTTAG_MAXWIDTH","ATTACHMENTTAG_SIZE","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","justifyContent","maxWidth","padding","spacingVerticalXS","spacingHorizontalXS","spacingHorizontalS","verticalAlign","borderColor","colorNeutralStroke1Hover","colorBrandForegroundLinkHover","colorNeutralStroke1Pressed","colorNeutralForeground2BrandPressed","colorNeutralForeground2BrandHover","useMediaBaseClassName","fontSize","height","lineHeight","width","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","spacingHorizontalXXS","minWidth","useAttachmentTagStyles_unstable","state","rootBaseClassName","mediaBaseClassName","contentBaseClassName","iconBaseClassName","className"],"mappings":"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"}
+{"version":3,"sources":["useAttachmentTagStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { AttachmentTagSlots, AttachmentTagState } from './AttachmentTag.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagClassNames: SlotClassNames<AttachmentTagSlots> = {\n  root: 'fai-AttachmentTag',\n  media: 'fai-AttachmentTag__media',\n  content: 'fai-AttachmentTag__content',\n  icon: 'fai-AttachmentTag__icon',\n};\n\n/**\n * @internal\n */\nexport const ATTACHMENTTAG_MAXWIDTH = '180px';\nconst ATTACHMENTTAG_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  maxWidth: ATTACHMENTTAG_MAXWIDTH,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n\n  ':hover': {\n    borderColor: tokens.colorNeutralStroke1Hover,\n\n    [`& .${attachmentTagClassNames.icon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n\n  ':hover:active': {\n    borderColor: tokens.colorNeutralStroke1Pressed,\n\n    [`& .${attachmentTagClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  ':focus': {\n    [`& .${attachmentTagClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n\n  ':focus:active': {\n    [`& .${attachmentTagClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\n/**\n * @internal\n */\nexport const useMediaBaseClassName = makeResetStyles({\n  fontSize: ATTACHMENTTAG_SIZE,\n  height: ATTACHMENTTAG_SIZE,\n  lineHeight: ATTACHMENTTAG_SIZE,\n  width: ATTACHMENTTAG_SIZE,\n});\n\n/**\n * @internal\n */\nexport const useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\n/**\n * @internal\n */\nexport const useIconBaseClassName = 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: ATTACHMENTTAG_SIZE,\n  height: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\n/**\n * Apply styling to the AttachmentTag slots based on the state\n */\nexport const useAttachmentTagStyles_unstable = (state: AttachmentTagState): AttachmentTagState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n\n  state.root.className = mergeClasses(attachmentTagClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentTagClassNames.media, mediaBaseClassName, state.media.className);\n  }\n\n  state.content.className = mergeClasses(\n    attachmentTagClassNames.content,\n    contentBaseClassName,\n    state.content.className,\n  );\n\n  state.icon.className = mergeClasses(attachmentTagClassNames.icon, iconBaseClassName, state.icon.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","attachmentTagClassNames","root","media","content","icon","ATTACHMENTTAG_MAXWIDTH","ATTACHMENTTAG_SIZE","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","justifyContent","maxWidth","padding","spacingVerticalXS","spacingHorizontalXS","spacingHorizontalS","verticalAlign","borderColor","colorNeutralStroke1Hover","colorBrandForegroundLinkHover","colorNeutralStroke1Pressed","colorNeutralForeground2BrandPressed","colorNeutralForeground2BrandHover","useMediaBaseClassName","fontSize","height","lineHeight","width","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","spacingHorizontalXXS","minWidth","useAttachmentTagStyles_unstable","state","rootBaseClassName","mediaBaseClassName","contentBaseClassName","iconBaseClassName","className"],"mappings":"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"}

package/lib/components/AttachmentTagItem/AttachmentTagItem.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useAttachmentTagItem_unstable } from './useAttachmentTagItem';
 import { renderAttachmentTagItem_unstable } from './renderAttachmentTagItem';
 import { useAttachmentTagItemStyles_unstable } from './useAttachmentTagItemStyles';
-// AttachmentTagItem component - TODO: add more docs
 export const AttachmentTagItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAttachmentTagItem_unstable(props, ref);
   useAttachmentTagItemStyles_unstable(state);

package/lib/components/AttachmentTagItem/AttachmentTagItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentTagItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentTagItem_unstable } from './useAttachmentTagItem';\nimport { renderAttachmentTagItem_unstable } from './renderAttachmentTagItem';\nimport { useAttachmentTagItemStyles_unstable } from './useAttachmentTagItemStyles';\nimport type { AttachmentTagItemProps } from './AttachmentTagItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// AttachmentTagItem component - TODO: add more docs\nexport const AttachmentTagItem: ForwardRefComponent<AttachmentTagItemProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentTagItem_unstable(props, ref);\n\n  useAttachmentTagItemStyles_unstable(state);\n  return renderAttachmentTagItem_unstable(state);\n});\n\nAttachmentTagItem.displayName = 'AttachmentTagItem';\n"],"names":["React","useAttachmentTagItem_unstable","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","AttachmentTagItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AAInF,oDAAoD;AACpD,OAAO,MAAMC,kCAAiEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQP,8BAA8BK,OAAOC;IAEnDJ,oCAAoCK;IACpC,OAAON,iCAAiCM;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}
+{"version":3,"sources":["AttachmentTagItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentTagItem_unstable } from './useAttachmentTagItem';\nimport { renderAttachmentTagItem_unstable } from './renderAttachmentTagItem';\nimport { useAttachmentTagItemStyles_unstable } from './useAttachmentTagItemStyles';\nimport type { AttachmentTagItemProps } from './AttachmentTagItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const AttachmentTagItem: ForwardRefComponent<AttachmentTagItemProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentTagItem_unstable(props, ref);\n\n  useAttachmentTagItemStyles_unstable(state);\n  return renderAttachmentTagItem_unstable(state);\n});\n\nAttachmentTagItem.displayName = 'AttachmentTagItem';\n"],"names":["React","useAttachmentTagItem_unstable","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","AttachmentTagItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AAInF,OAAO,MAAMC,kCAAiEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQP,8BAA8BK,OAAOC;IAEnDJ,oCAAoCK;IACpC,OAAON,iCAAiCM;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

package/lib/components/AttachmentTagItem/AttachmentTagItem.types.js

@@ -1,3 +1,2 @@
-export {}; // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from AttachmentTagItemProps.
-// & Required<Pick<AttachmentTagItemProps, 'propName'>>
+export {};
 //# sourceMappingURL=AttachmentTagItem.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentTagItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type AttachmentTagItemSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * AttachmentTagItem Props\n */\nexport type AttachmentTagItemProps = ComponentProps<AttachmentTagItemSlots> & {};\n\n/**\n * State used in rendering AttachmentTagItem\n */\nexport type AttachmentTagItemState = ComponentState<AttachmentTagItemSlots>;\n// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from AttachmentTagItemProps.\n// & Required<Pick<AttachmentTagItemProps, 'propName'>>\n"],"names":[],"mappings":"AAAA,WAc4E,CAC5E,kIAAkI;CAClI,uDAAuD"}
+{"version":3,"sources":["AttachmentTagItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type AttachmentTagItemSlots = {\n  root: NonNullable<Slot<'div'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  icon: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AttachmentTagItem Props\n */\nexport type AttachmentTagItemProps = ComponentProps<Partial<AttachmentTagItemSlots>>;\n\n/**\n * State used in rendering AttachmentTagItem\n */\nexport type AttachmentTagItemState = ComponentState<AttachmentTagItemSlots>;\n"],"names":[],"mappings":"AAAA,WAiB4E"}

package/lib/components/AttachmentTagItem/renderAttachmentTagItem.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of AttachmentTagItem
  */
 export const renderAttachmentTagItem_unstable = state => {
   assertSlots(state);
-  // TODO Add additional slots in the appropriate place
-  return /*#__PURE__*/_jsx(state.root, {});
+  return /*#__PURE__*/_jsxs(state.root, {
+    children: [state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {}), /*#__PURE__*/_jsx(state.icon, {})]
+  });
 };
 //# sourceMappingURL=renderAttachmentTagItem.js.map

package/lib/components/AttachmentTagItem/renderAttachmentTagItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentTagItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentTagItemState, AttachmentTagItemSlots } from './AttachmentTagItem.types';\n\n/**\n * Render the final JSX of AttachmentTagItem\n */\nexport const renderAttachmentTagItem_unstable = (state: AttachmentTagItemState) => {\n  assertSlots<AttachmentTagItemSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["assertSlots","renderAttachmentTagItem_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qDAAqD;IACrD,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["renderAttachmentTagItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentTagItemState, AttachmentTagItemSlots } from './AttachmentTagItem.types';\n\n/**\n * Render the final JSX of AttachmentTagItem\n */\nexport const renderAttachmentTagItem_unstable = (state: AttachmentTagItemState) => {\n  assertSlots<AttachmentTagItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.media && <state.media />}\n      <state.content />\n      <state.icon />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAttachmentTagItem_unstable","state","root","media","content","icon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;0BAC5B,KAACF,MAAMG,OAAO;0BACd,KAACH,MAAMI,IAAI;;;AAGjB,EAAE"}

package/lib/components/AttachmentTagItem/useAttachmentTagItem.js

@@ -1,5 +1,4 @@
-import { getNativeElementProps, slot } from '@fluentui/react-components';
-// If you add JSX to this file, be sure to change the file type to .tsx
+import { useAttachmentTagSlots } from '../utils/useAttachmentTagSlots';
 /**
  * Create the state required to render AttachmentTagItem.
  *
@@ -10,20 +9,13 @@ import { getNativeElementProps, slot } from '@fluentui/react-components';
  * @param ref - reference to root HTMLElement of AttachmentTagItem
  */
 export const useAttachmentTagItem_unstable = (props, ref) => {
-  return {
-    // TODO add appropriate props/defaults
-    components: {
-      // TODO add each slot's element type or component
-      root: 'div'
-    },
-    // TODO add appropriate slots, for example:
-    // mySlot: slot.optional(props.mySlot),
-    root: slot.always(getNativeElementProps('div', {
-      ref,
-      ...props
-    }), {
-      elementType: 'div'
-    })
-  };
+  return useAttachmentTagSlots(props, ref, {
+    elementType: {
+      root: 'div',
+      media: 'span',
+      content: 'span',
+      icon: 'span'
+    }
+  });
 };
 //# sourceMappingURL=useAttachmentTagItem.js.map

package/lib/components/AttachmentTagItem/useAttachmentTagItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTagItem.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-components';\nimport type { AttachmentTagItemProps, AttachmentTagItemState } from './AttachmentTagItem.types';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render AttachmentTagItem.\n *\n * The returned state can be modified with hooks such as useAttachmentTagItemStyles_unstable,\n * before being passed to renderAttachmentTagItem_unstable.\n *\n * @param props - props from this instance of AttachmentTagItem\n * @param ref - reference to root HTMLElement of AttachmentTagItem\n */\nexport const useAttachmentTagItem_unstable = (\n  props: AttachmentTagItemProps,\n  ref: React.Ref<HTMLElement>,\n): AttachmentTagItemState => {\n  return {\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: slot.optional(props.mySlot),\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getNativeElementProps","slot","useAttachmentTagItem_unstable","props","ref","components","root","always","elementType"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,IAAI,QAAQ,6BAA6B;AAGzE,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,OAAO;QACL,sCAAsC;QACtCC,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,uCAAuC;QACvCA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentTagItem.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useAttachmentTagSlots } from '../utils/useAttachmentTagSlots';\nimport type { AttachmentTagItemProps, AttachmentTagItemState } from './AttachmentTagItem.types';\n\n/**\n * Create the state required to render AttachmentTagItem.\n *\n * The returned state can be modified with hooks such as useAttachmentTagItemStyles_unstable,\n * before being passed to renderAttachmentTagItem_unstable.\n *\n * @param props - props from this instance of AttachmentTagItem\n * @param ref - reference to root HTMLElement of AttachmentTagItem\n */\nexport const useAttachmentTagItem_unstable = (\n  props: AttachmentTagItemProps,\n  ref: React.Ref<HTMLElement>,\n): AttachmentTagItemState => {\n  return useAttachmentTagSlots(props, ref, {\n    elementType: { root: 'div', media: 'span', content: 'span', icon: 'span' },\n  });\n};\n"],"names":["useAttachmentTagSlots","useAttachmentTagItem_unstable","props","ref","elementType","root","media","content","icon"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,iCAAiC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,OAAOH,sBAAsBE,OAAOC,KAAK;QACvCC,aAAa;YAAEC,MAAM;YAAOC,OAAO;YAAQC,SAAS;YAAQC,MAAM;QAAO;IAC3E;AACF,EAAE"}

package/lib/components/AttachmentTagItem/useAttachmentTagItemStyles.js

@@ -1,21 +1,29 @@
-import { __styles, mergeClasses } from '@fluentui/react-components';
+import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { ATTACHMENTTAG_MAXWIDTH, useContentBaseClassName, useIconBaseClassName, useMediaBaseClassName } from '../AttachmentTag/useAttachmentTagStyles';
 export const attachmentTagItemClassNames = {
-  root: 'fai-AttachmentTagItem'
+  root: 'fai-AttachmentTagItem',
+  media: 'fai-AttachmentTagItem__media',
+  content: 'fai-AttachmentTagItem__content',
+  icon: 'fai-AttachmentTagItem__icon'
 };
 /**
  * Styles for the root slot
  */
-const useStyles = __styles({
-  root: {}
-}, {});
+const useRootBaseClassName = __resetStyles("rcbi0rb", null, [".rcbi0rb{display:inline-flex;flex-wrap:nowrap;column-gap:var(--spacingHorizontalSNudge);max-width:180px;align-items:center;}"]);
 /**
  * Apply styling to the AttachmentTagItem slots based on the state
  */
 export const useAttachmentTagItemStyles_unstable = state => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(attachmentTagItemClassNames.root, styles.root, state.root.className);
-  // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+  const rootBaseClassName = useRootBaseClassName();
+  const mediaBaseClassName = useMediaBaseClassName();
+  const contentBaseClassName = useContentBaseClassName();
+  const iconBaseClassName = useIconBaseClassName();
+  state.root.className = mergeClasses(attachmentTagItemClassNames.root, rootBaseClassName, state.root.className);
+  if (state.media) {
+    state.media.className = mergeClasses(attachmentTagItemClassNames.media, mediaBaseClassName, state.media.className);
+  }
+  state.content.className = mergeClasses(attachmentTagItemClassNames.content, contentBaseClassName, state.content.className);
+  state.icon.className = mergeClasses(attachmentTagItemClassNames.icon, iconBaseClassName, state.icon.className);
   return state;
 };
 //# sourceMappingURL=useAttachmentTagItemStyles.js.map

package/lib/components/AttachmentTagItem/useAttachmentTagItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTagItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagItemClassNames: SlotClassNames<AttachmentTagItemSlots> = {\n  root: 'fai-AttachmentTagItem',\n  // TODO: add class names for all slots on AttachmentTagItemSlots.\n  // Should be of the form `<slotName>: 'fai-AttachmentTagItem__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    // TODO Add default styles for the root element\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AttachmentTagItem slots based on the state\n */\nexport const useAttachmentTagItemStyles_unstable = (state: AttachmentTagItemState): AttachmentTagItemState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(attachmentTagItemClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","attachmentTagItemClassNames","root","useStyles","useAttachmentTagItemStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAItE,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;IAEN;AAGF;AAEA;;CAEC,GACD,OAAO,MAAME,sCAAsC,CAACC;IAClD,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGP,aAAaC,4BAA4BC,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAEvG,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentTagItemStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport {\n  ATTACHMENTTAG_MAXWIDTH,\n  useContentBaseClassName,\n  useIconBaseClassName,\n  useMediaBaseClassName,\n} from '../AttachmentTag/useAttachmentTagStyles';\nimport type { AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagItemClassNames: SlotClassNames<AttachmentTagItemSlots> = {\n  root: 'fai-AttachmentTagItem',\n  media: 'fai-AttachmentTagItem__media',\n  content: 'fai-AttachmentTagItem__content',\n  icon: 'fai-AttachmentTagItem__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  columnGap: tokens.spacingHorizontalSNudge,\n  maxWidth: ATTACHMENTTAG_MAXWIDTH,\n  alignItems: 'center',\n});\n\n/**\n * Apply styling to the AttachmentTagItem slots based on the state\n */\nexport const useAttachmentTagItemStyles_unstable = (state: AttachmentTagItemState): AttachmentTagItemState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n\n  state.root.className = mergeClasses(attachmentTagItemClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentTagItemClassNames.media, mediaBaseClassName, state.media.className);\n  }\n\n  state.content.className = mergeClasses(\n    attachmentTagItemClassNames.content,\n    contentBaseClassName,\n    state.content.className,\n  );\n\n  state.icon.className = mergeClasses(attachmentTagItemClassNames.icon, iconBaseClassName, state.icon.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","ATTACHMENTTAG_MAXWIDTH","useContentBaseClassName","useIconBaseClassName","useMediaBaseClassName","attachmentTagItemClassNames","root","media","content","icon","useRootBaseClassName","display","flexWrap","columnGap","spacingHorizontalSNudge","maxWidth","alignItems","useAttachmentTagItemStyles_unstable","state","rootBaseClassName","mediaBaseClassName","contentBaseClassName","iconBaseClassName","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AACnF,SACEC,sBAAsB,EACtBC,uBAAuB,EACvBC,oBAAoB,EACpBC,qBAAqB,QAChB,0CAA0C;AAIjD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBZ,gBAAgB;IAC3Ca,SAAS;IACTC,UAAU;IACVC,WAAWb,OAAOc,uBAAuB;IACzCC,UAAUd;IACVe,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD,MAAMC,oBAAoBT;IAC1B,MAAMU,qBAAqBhB;IAC3B,MAAMiB,uBAAuBnB;IAC7B,MAAMoB,oBAAoBnB;IAE1Be,MAAMZ,IAAI,CAACiB,SAAS,GAAGxB,aAAaM,4BAA4BC,IAAI,EAAEa,mBAAmBD,MAAMZ,IAAI,CAACiB,SAAS;IAE7G,IAAIL,MAAMX,KAAK,EAAE;QACfW,MAAMX,KAAK,CAACgB,SAAS,GAAGxB,aAAaM,4BAA4BE,KAAK,EAAEa,oBAAoBF,MAAMX,KAAK,CAACgB,SAAS;IACnH;IAEAL,MAAMV,OAAO,CAACe,SAAS,GAAGxB,aACxBM,4BAA4BG,OAAO,EACnCa,sBACAH,MAAMV,OAAO,CAACe,SAAS;IAGzBL,MAAMT,IAAI,CAACc,SAAS,GAAGxB,aAAaM,4BAA4BI,IAAI,EAAEa,mBAAmBJ,MAAMT,IAAI,CAACc,SAAS;IAE7G,OAAOL;AACT,EAAE"}

package/lib/components/index.js

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

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AttachmentTag';\nexport * from './AttachmentTagList';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,sBAAsB"}
+{"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"}

package/lib/components/utils/useAttachmentTagSlots.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
+import { useHasParentContext } from '@fluentui/react-context-selector';
+import { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';
+import { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';
+import { AttachmentTagListContext } from '../../contexts/attachmentTagListContext';
+/**
+ * @internal
+ * Create the slots required to render AttachmentTag or AttachmentTagItem.
+ */
+export function useAttachmentTagSlots(props, ref, options) {
+  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);
+  const {
+    children,
+    role
+  } = props;
+  const {
+    elementType
+  } = options;
+  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
+  const hasParentContext = useHasParentContext(AttachmentTagListContext);
+  const rootRole = role !== null && role !== void 0 ? role : hasParentContext ? 'menuitem' : undefined;
+  const root = slot.always(getNativeElementProps(elementType.root, {
+    ref,
+    ...props,
+    role: rootRole
+  }), {
+    elementType: elementType.root
+  });
+  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
+    content: children,
+    media
+  }));
+  const media = slot.optional(props.media, {
+    elementType: elementType.media
+  });
+  const content = slot.always(props.content, {
+    defaultProps: {
+      children
+    },
+    elementType: elementType.content
+  });
+  const icon = slot.always(props.icon, {
+    defaultProps: {
+      children: /*#__PURE__*/React.createElement(DismissIcon, null)
+    },
+    elementType: elementType.icon
+  });
+  return {
+    components: {
+      root: elementType.root,
+      media: elementType.media,
+      content: elementType.content,
+      icon: elementType.icon
+    },
+    root,
+    media,
+    content,
+    icon
+  };
+}
+//# sourceMappingURL=useAttachmentTagSlots.js.map

package/lib/components/utils/useAttachmentTagSlots.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentTagSlots.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\n\nimport { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';\n\nimport { AttachmentTagListContext } from '../../contexts/attachmentTagListContext';\nimport type { AttachmentTagProps, AttachmentTagState } from './../AttachmentTag/AttachmentTag.types';\nimport type { AttachmentTagItemProps, AttachmentTagItemState } from './../AttachmentTagItem/AttachmentTagItem.types';\n\n/**\n * @internal\n * Create the slots required to render AttachmentTag or AttachmentTagItem.\n */\nexport function useAttachmentTagSlots<TAttachmentTagState extends AttachmentTagState | AttachmentTagItemState>(\n  props: AttachmentTagProps | AttachmentTagItemProps,\n  ref: React.Ref<HTMLElement>,\n  options: {\n    elementType: TAttachmentTagState['components'];\n  },\n): TAttachmentTagState {\n  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);\n  const { children, role } = props;\n  const { elementType } = options;\n\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n\n  const hasParentContext = useHasParentContext(AttachmentTagListContext);\n  const rootRole = role ?? (hasParentContext ? 'menuitem' : undefined);\n\n  const root: TAttachmentTagState['root'] = slot.always(\n    getNativeElementProps(elementType.root as unknown as string, {\n      ref,\n      ...props,\n      role: rootRole,\n    }),\n    { elementType: elementType.root },\n  );\n  root.onClick = mergeCallbacks(\n    root.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n      onAttachmentTagDismiss?.(ev, { content: children, media }),\n  );\n\n  const media: TAttachmentTagState['media'] = slot.optional(props.media, { elementType: elementType.media });\n\n  const content: TAttachmentTagState['content'] = slot.always(props.content, {\n    defaultProps: {\n      children,\n    },\n    elementType: elementType.content,\n  });\n\n  const icon: TAttachmentTagState['icon'] = slot.always(props.icon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: elementType.icon,\n  });\n\n  return {\n    components: {\n      root: elementType.root,\n      media: elementType.media,\n      content: elementType.content,\n      icon: elementType.icon,\n    },\n    root,\n    media,\n    content,\n    icon,\n  } as TAttachmentTagState;\n}\n"],"names":["React","getNativeElementProps","mergeCallbacks","slot","useHasParentContext","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentTagListContext_unstable","AttachmentTagListContext","useAttachmentTagSlots","props","ref","options","onAttachmentTagDismiss","context","children","role","elementType","DismissIcon","hasParentContext","rootRole","undefined","root","always","onClick","ev","content","media","optional","defaultProps","icon","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AACzF,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AAEtF,SAASC,oCAAoC,QAAQ,0CAA0C;AAE/F,SAASC,wBAAwB,QAAQ,0CAA0C;AAInF;;;CAGC,GACD,OAAO,SAASC,sBACdC,KAAkD,EAClDC,GAA2B,EAC3BC,OAEC;IAED,MAAMC,yBAAyBN,qCAAqCO,CAAAA,UAAWA,QAAQD,sBAAsB;IAC7G,MAAM,EAAEE,QAAQ,EAAEC,IAAI,EAAE,GAAGN;IAC3B,MAAM,EAAEO,WAAW,EAAE,GAAGL;IAExB,MAAMM,cAAcZ,WAAWD,iBAAiBD;IAEhD,MAAMe,mBAAmBhB,oBAAoBK;IAC7C,MAAMY,WAAWJ,iBAAAA,kBAAAA,OAASG,mBAAmB,aAAaE;IAE1D,MAAMC,OAAoCpB,KAAKqB,MAAM,CACnDvB,sBAAsBiB,YAAYK,IAAI,EAAuB;QAC3DX;QACA,GAAGD,KAAK;QACRM,MAAMI;IACR,IACA;QAAEH,aAAaA,YAAYK,IAAI;IAAC;IAElCA,KAAKE,OAAO,GAAGvB,eACbqB,KAAKE,OAAO,EACZ,CAACC,KACCZ,mCAAAA,6CAAAA,uBAAyBY,IAAI;YAAEC,SAASX;YAAUY;QAAM;IAG5D,MAAMA,QAAsCzB,KAAK0B,QAAQ,CAAClB,MAAMiB,KAAK,EAAE;QAAEV,aAAaA,YAAYU,KAAK;IAAC;IAExG,MAAMD,UAA0CxB,KAAKqB,MAAM,CAACb,MAAMgB,OAAO,EAAE;QACzEG,cAAc;YACZd;QACF;QACAE,aAAaA,YAAYS,OAAO;IAClC;IAEA,MAAMI,OAAoC5B,KAAKqB,MAAM,CAACb,MAAMoB,IAAI,EAAE;QAChED,cAAc;YACZd,wBAAU,oBAACG;QACb;QACAD,aAAaA,YAAYa,IAAI;IAC/B;IAEA,OAAO;QACLC,YAAY;YACVT,MAAML,YAAYK,IAAI;YACtBK,OAAOV,YAAYU,KAAK;YACxBD,SAAST,YAAYS,OAAO;YAC5BI,MAAMb,YAAYa,IAAI;QACxB;QACAR;QACAK;QACAD;QACAI;IACF;AACF"}

package/lib/index.js

@@ -1,3 +1,4 @@
 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';
 //# 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"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_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"}
+{"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 { AttachmentTagItem, attachmentTagItemClassNames, renderAttachmentTagItem_unstable, useAttachmentTagItemStyles_unstable, useAttachmentTagItem_unstable } from './AttachmentTagItem';\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"],"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,SAASC,iBAAiB,EAAEC,2BAA2B,EAAEC,gCAAgC,EAAEC,mCAAmC,EAAEC,6BAA6B,QAAQ,sBAAsB"}

package/lib-commonjs/components/AttachmentTag/useAttachmentTag.js

@@ -8,54 +8,14 @@ Object.defineProperty(exports, "useAttachmentTag_unstable", {
         return useAttachmentTag_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 _reactcontextselector = require("@fluentui/react-context-selector");
-const _reacticons = require("@fluentui/react-icons");
-const _attachmentTagListContext = require("../../contexts/attachmentTagListContext");
+const _useAttachmentTagSlots = require("../utils/useAttachmentTagSlots");
 const useAttachmentTag_unstable = (props, ref)=>{
-    const onAttachmentTagDismiss = (0, _attachmentTagListContext.useAttachmentTagListContext_unstable)((context)=>context.onAttachmentTagDismiss);
-    const { children, role } = props;
-    const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
-    const hasParentContext = (0, _reactcontextselector.useHasParentContext)(_attachmentTagListContext.AttachmentTagListContext);
-    const rootRole = role !== null && role !== void 0 ? role : hasParentContext ? 'menuitem' : undefined;
-    const root = _reactcomponents.slot.always((0, _reactcomponents.getNativeElementProps)('button', {
-        ref,
-        ...props,
-        role: rootRole
-    }), {
-        elementType: 'button'
-    });
-    root.onClick = (0, _reactcomponents.mergeCallbacks)(root.onClick, (ev)=>onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
-            content: children,
-            media
-        }));
-    const media = _reactcomponents.slot.optional(props.media, {
-        elementType: 'span'
-    });
-    const content = _reactcomponents.slot.always(props.content, {
-        defaultProps: {
-            children
-        },
-        elementType: 'span'
-    });
-    const icon = _reactcomponents.slot.always(props.icon, {
-        defaultProps: {
-            children: /*#__PURE__*/ _react.createElement(DismissIcon, null)
-        },
-        elementType: 'span'
-    });
-    return {
-        components: {
+    return (0, _useAttachmentTagSlots.useAttachmentTagSlots)(props, ref, {
+        elementType: {
             root: 'button',
             media: 'span',
             content: 'span',
             icon: 'span'
-        },
-        root,
-        media,
-        content,
-        icon
-    };
+        }
+    });
 }; //# sourceMappingURL=useAttachmentTag.js.map

package/lib-commonjs/components/AttachmentTag/useAttachmentTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTag.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';\nimport { AttachmentTagListContext } from '../../contexts/attachmentTagListContext';\n/**\n * Create the state required to render AttachmentTag.\n *\n * The returned state can be modified with hooks such as useAttachmentTagStyles_unstable,\n * before being passed to renderAttachmentTag_unstable.\n *\n * @param props - props from this instance of AttachmentTag\n * @param ref - reference to root HTMLElement of AttachmentTag\n */\nexport const useAttachmentTag_unstable = (props, ref) => {\n  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);\n  const {\n    children,\n    role\n  } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const hasParentContext = useHasParentContext(AttachmentTagListContext);\n  const rootRole = role !== null && role !== void 0 ? role : hasParentContext ? 'menuitem' : undefined;\n  const root = slot.always(getNativeElementProps('button', {\n    ref,\n    ...props,\n    role: rootRole\n  }), {\n    elementType: 'button'\n  });\n  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {\n    content: children,\n    media\n  }));\n  const media = slot.optional(props.media, {\n    elementType: 'span'\n  });\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children\n    },\n    elementType: 'span'\n  });\n  const icon = slot.always(props.icon, {\n    defaultProps: {\n      children: /*#__PURE__*/React.createElement(DismissIcon, null)\n    },\n    elementType: 'span'\n  });\n  return {\n    components: {\n      root: 'button',\n      media: 'span',\n      content: 'span',\n      icon: 'span'\n    },\n    root,\n    media,\n    content,\n    icon\n  };\n};\n//# sourceMappingURL=useAttachmentTag.js.map"],"names":["useAttachmentTag_unstable","props","ref","onAttachmentTagDismiss","useAttachmentTagListContext_unstable","context","children","role","DismissIcon","bundleIcon","Dismiss20Filled","Dismiss20Regular","hasParentContext","useHasParentContext","AttachmentTagListContext","rootRole","undefined","root","slot","always","getNativeElementProps","elementType","onClick","mergeCallbacks","ev","content","media","optional","defaultProps","icon","React","createElement","components"],"mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;iCACqC;sCACxB;4BAC0B;0CACT;AAW9C,MAAMA,4BAA4B,CAACC,OAAOC;IAC/C,MAAMC,yBAAyBC,IAAAA,8DAAoC,EAACC,CAAAA,UAAWA,QAAQF,sBAAsB;IAC7G,MAAM,EACJG,QAAQ,EACRC,IAAI,EACL,GAAGN;IACJ,MAAMO,cAAcC,IAAAA,sBAAU,EAACC,2BAAe,EAAEC,4BAAgB;IAChE,MAAMC,mBAAmBC,IAAAA,yCAAmB,EAACC,kDAAwB;IACrE,MAAMC,WAAWR,SAAS,QAAQA,SAAS,KAAK,IAAIA,OAAOK,mBAAmB,aAAaI;IAC3F,MAAMC,OAAOC,qBAAI,CAACC,MAAM,CAACC,IAAAA,sCAAqB,EAAC,UAAU;QACvDlB;QACA,GAAGD,KAAK;QACRM,MAAMQ;IACR,IAAI;QACFM,aAAa;IACf;IACAJ,KAAKK,OAAO,GAAGC,IAAAA,+BAAc,EAACN,KAAKK,OAAO,EAAEE,CAAAA,KAAMrB,2BAA2B,QAAQA,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBqB,IAAI;YAC3JC,SAASnB;YACToB;QACF;IACA,MAAMA,QAAQR,qBAAI,CAACS,QAAQ,CAAC1B,MAAMyB,KAAK,EAAE;QACvCL,aAAa;IACf;IACA,MAAMI,UAAUP,qBAAI,CAACC,MAAM,CAAClB,MAAMwB,OAAO,EAAE;QACzCG,cAAc;YACZtB;QACF;QACAe,aAAa;IACf;IACA,MAAMQ,OAAOX,qBAAI,CAACC,MAAM,CAAClB,MAAM4B,IAAI,EAAE;QACnCD,cAAc;YACZtB,UAAU,WAAW,GAAEwB,OAAMC,aAAa,CAACvB,aAAa;QAC1D;QACAa,aAAa;IACf;IACA,OAAO;QACLW,YAAY;YACVf,MAAM;YACNS,OAAO;YACPD,SAAS;YACTI,MAAM;QACR;QACAZ;QACAS;QACAD;QACAI;IACF;AACF,GACA,4CAA4C"}
+{"version":3,"sources":["useAttachmentTag.js"],"sourcesContent":["import { useAttachmentTagSlots } from '../utils/useAttachmentTagSlots';\n/**\n * Create the state required to render AttachmentTag.\n *\n * The returned state can be modified with hooks such as useAttachmentTagStyles_unstable,\n * before being passed to renderAttachmentTag_unstable.\n *\n * @param props - props from this instance of AttachmentTag\n * @param ref - reference to root HTMLElement of AttachmentTag\n */\nexport const useAttachmentTag_unstable = (props, ref) => {\n  return useAttachmentTagSlots(props, ref, {\n    elementType: {\n      root: 'button',\n      media: 'span',\n      content: 'span',\n      icon: 'span'\n    }\n  });\n};\n//# sourceMappingURL=useAttachmentTag.js.map"],"names":["useAttachmentTag_unstable","props","ref","useAttachmentTagSlots","elementType","root","media","content","icon"],"mappings":";;;;+BAUaA;;;eAAAA;;;uCAVyB;AAU/B,MAAMA,4BAA4B,CAACC,OAAOC;IAC/C,OAAOC,IAAAA,4CAAqB,EAACF,OAAOC,KAAK;QACvCE,aAAa;YACXC,MAAM;YACNC,OAAO;YACPC,SAAS;YACTC,MAAM;QACR;IACF;AACF,GACA,4CAA4C"}

package/lib-commonjs/components/AttachmentTag/useAttachmentTagStyles.js

@@ -12,6 +12,18 @@ _export(exports, {
     attachmentTagClassNames: function() {
         return attachmentTagClassNames;
     },
+    ATTACHMENTTAG_MAXWIDTH: function() {
+        return ATTACHMENTTAG_MAXWIDTH;
+    },
+    useMediaBaseClassName: function() {
+        return useMediaBaseClassName;
+    },
+    useContentBaseClassName: function() {
+        return useContentBaseClassName;
+    },
+    useIconBaseClassName: function() {
+        return useIconBaseClassName;
+    },
     useAttachmentTagStyles_unstable: function() {
         return useAttachmentTagStyles_unstable;
     }

package/lib-commonjs/components/AttachmentTag/useAttachmentTagStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTagStyles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nexport const attachmentTagClassNames = {\n  root: 'fai-AttachmentTag',\n  media: 'fai-AttachmentTag__media',\n  content: 'fai-AttachmentTag__content',\n  icon: 'fai-AttachmentTag__icon'\n};\nconst ATTACHMENTTAG_MAXWIDTH = '180px';\nconst ATTACHMENTTAG_SIZE = '20px';\nconst useRootBaseClassName = __resetStyles(\"r1km3emv\", \"r21ecva\", [\".r1km3emv{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;max-width:180px;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;}\", \".r1km3emv:hover{border-color:var(--colorNeutralStroke1Hover);}\", \".r1km3emv:hover .fai-AttachmentTag__icon{color:var(--colorBrandForegroundLinkHover);}\", \".r1km3emv:hover:active{border-color:var(--colorNeutralStroke1Pressed);}\", \".r1km3emv:hover:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}\", \".r1km3emv:focus .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandHover);}\", \".r1km3emv:focus:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}\", \".r21ecva{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;max-width:180px;padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalXS);vertical-align:middle;}\", \".r21ecva:hover{border-color:var(--colorNeutralStroke1Hover);}\", \".r21ecva:hover .fai-AttachmentTag__icon{color:var(--colorBrandForegroundLinkHover);}\", \".r21ecva:hover:active{border-color:var(--colorNeutralStroke1Pressed);}\", \".r21ecva:hover:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}\", \".r21ecva:focus .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandHover);}\", \".r21ecva:focus:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}\"]);\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 useIconBaseClassName = __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 AttachmentTag slots based on the state\n */\nexport const useAttachmentTagStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n  state.root.className = mergeClasses(attachmentTagClassNames.root, rootBaseClassName, state.root.className);\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentTagClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(attachmentTagClassNames.content, contentBaseClassName, state.content.className);\n  state.icon.className = mergeClasses(attachmentTagClassNames.icon, iconBaseClassName, state.icon.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentTagStyles.js.map"],"names":["attachmentTagClassNames","useAttachmentTagStyles_unstable","root","media","content","icon","ATTACHMENTTAG_MAXWIDTH","ATTACHMENTTAG_SIZE","useRootBaseClassName","__resetStyles","useMediaBaseClassName","useContentBaseClassName","useIconBaseClassName","state","rootBaseClassName","mediaBaseClassName","contentBaseClassName","iconBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,uBAAuB;eAAvBA;;IAeAC,+BAA+B;eAA/BA;;;iCAhByD;AAC/D,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,MAAM;AACR;AACA,MAAMC,yBAAyB;AAC/B,MAAMC,qBAAqB;AAC3B,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,YAAY,WAAW;IAAC;IAA8f;IAAkE;IAAyF;IAA2E;IAAsG;IAA6F;IAAsG;IAA6f;IAAiE;IAAwF;IAA0E;IAAqG;IAA4F;CAAoG;AACrlE,MAAMC,wBAAwBD,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAAC;CAAqE;AACpI,MAAME,0BAA0BF,IAAAA,8BAAa,EAAC,WAAW,MAAM;IAAC;CAAsN;AACtR,MAAMG,uBAAuBH,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAAC;CAA+jB;AAItnB,MAAMR,kCAAkCY,CAAAA;IAC7C,MAAMC,oBAAoBN;IAC1B,MAAMO,qBAAqBL;IAC3B,MAAMM,uBAAuBL;IAC7B,MAAMM,oBAAoBL;IAC1BC,MAAMX,IAAI,CAACgB,SAAS,GAAGC,IAAAA,6BAAY,EAACnB,wBAAwBE,IAAI,EAAEY,mBAAmBD,MAAMX,IAAI,CAACgB,SAAS;IACzG,IAAIL,MAAMV,KAAK,EAAE;QACfU,MAAMV,KAAK,CAACe,SAAS,GAAGC,IAAAA,6BAAY,EAACnB,wBAAwBG,KAAK,EAAEY,oBAAoBF,MAAMV,KAAK,CAACe,SAAS;IAC/G;IACAL,MAAMT,OAAO,CAACc,SAAS,GAAGC,IAAAA,6BAAY,EAACnB,wBAAwBI,OAAO,EAAEY,sBAAsBH,MAAMT,OAAO,CAACc,SAAS;IACrHL,MAAMR,IAAI,CAACa,SAAS,GAAGC,IAAAA,6BAAY,EAACnB,wBAAwBK,IAAI,EAAEY,mBAAmBJ,MAAMR,IAAI,CAACa,SAAS;IACzG,OAAOL;AACT,GACA,kDAAkD"}
+{"version":3,"sources":["useAttachmentTagStyles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nexport const attachmentTagClassNames = {\n  root: 'fai-AttachmentTag',\n  media: 'fai-AttachmentTag__media',\n  content: 'fai-AttachmentTag__content',\n  icon: 'fai-AttachmentTag__icon'\n};\n/**\n * @internal\n */\nexport const ATTACHMENTTAG_MAXWIDTH = '180px';\nconst ATTACHMENTTAG_SIZE = '20px';\nconst useRootBaseClassName = __resetStyles(\"r1km3emv\", \"r21ecva\", [\".r1km3emv{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;max-width:180px;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;}\", \".r1km3emv:hover{border-color:var(--colorNeutralStroke1Hover);}\", \".r1km3emv:hover .fai-AttachmentTag__icon{color:var(--colorBrandForegroundLinkHover);}\", \".r1km3emv:hover:active{border-color:var(--colorNeutralStroke1Pressed);}\", \".r1km3emv:hover:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}\", \".r1km3emv:focus .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandHover);}\", \".r1km3emv:focus:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}\", \".r21ecva{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;max-width:180px;padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalXS);vertical-align:middle;}\", \".r21ecva:hover{border-color:var(--colorNeutralStroke1Hover);}\", \".r21ecva:hover .fai-AttachmentTag__icon{color:var(--colorBrandForegroundLinkHover);}\", \".r21ecva:hover:active{border-color:var(--colorNeutralStroke1Pressed);}\", \".r21ecva:hover:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}\", \".r21ecva:focus .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandHover);}\", \".r21ecva:focus:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}\"]);\n/**\n * @internal\n */\nexport const useMediaBaseClassName = __resetStyles(\"r19jnv3a\", null, [\".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}\"]);\n/**\n * @internal\n */\nexport 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);}\"]);\n/**\n * @internal\n */\nexport const useIconBaseClassName = __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 AttachmentTag slots based on the state\n */\nexport const useAttachmentTagStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n  state.root.className = mergeClasses(attachmentTagClassNames.root, rootBaseClassName, state.root.className);\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentTagClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(attachmentTagClassNames.content, contentBaseClassName, state.content.className);\n  state.icon.className = mergeClasses(attachmentTagClassNames.icon, iconBaseClassName, state.icon.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentTagStyles.js.map"],"names":["attachmentTagClassNames","ATTACHMENTTAG_MAXWIDTH","useMediaBaseClassName","useContentBaseClassName","useIconBaseClassName","useAttachmentTagStyles_unstable","root","media","content","icon","ATTACHMENTTAG_SIZE","useRootBaseClassName","__resetStyles","state","rootBaseClassName","mediaBaseClassName","contentBaseClassName","iconBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,uBAAuB;eAAvBA;;IASAC,sBAAsB;eAAtBA;;IAMAC,qBAAqB;eAArBA;;IAIAC,uBAAuB;eAAvBA;;IAIAC,oBAAoB;eAApBA;;IAIAC,+BAA+B;eAA/BA;;;iCA5ByD;AAC/D,MAAML,0BAA0B;IACrCM,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,MAAM;AACR;AAIO,MAAMR,yBAAyB;AACtC,MAAMS,qBAAqB;AAC3B,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,YAAY,WAAW;IAAC;IAA8f;IAAkE;IAAyF;IAA2E;IAAsG;IAA6F;IAAsG;IAA6f;IAAiE;IAAwF;IAA0E;IAAqG;IAA4F;CAAoG;AAI9kE,MAAMV,wBAAwBU,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAAC;CAAqE;AAIpI,MAAMT,0BAA0BS,IAAAA,8BAAa,EAAC,WAAW,MAAM;IAAC;CAAsN;AAItR,MAAMR,uBAAuBQ,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAAC;CAA+jB;AAI7nB,MAAMP,kCAAkCQ,CAAAA;IAC7C,MAAMC,oBAAoBH;IAC1B,MAAMI,qBAAqBb;IAC3B,MAAMc,uBAAuBb;IAC7B,MAAMc,oBAAoBb;IAC1BS,MAAMP,IAAI,CAACY,SAAS,GAAGC,IAAAA,6BAAY,EAACnB,wBAAwBM,IAAI,EAAEQ,mBAAmBD,MAAMP,IAAI,CAACY,SAAS;IACzG,IAAIL,MAAMN,KAAK,EAAE;QACfM,MAAMN,KAAK,CAACW,SAAS,GAAGC,IAAAA,6BAAY,EAACnB,wBAAwBO,KAAK,EAAEQ,oBAAoBF,MAAMN,KAAK,CAACW,SAAS;IAC/G;IACAL,MAAML,OAAO,CAACU,SAAS,GAAGC,IAAAA,6BAAY,EAACnB,wBAAwBQ,OAAO,EAAEQ,sBAAsBH,MAAML,OAAO,CAACU,SAAS;IACrHL,MAAMJ,IAAI,CAACS,SAAS,GAAGC,IAAAA,6BAAY,EAACnB,wBAAwBS,IAAI,EAAEQ,mBAAmBJ,MAAMJ,IAAI,CAACS,SAAS;IACzG,OAAOL;AACT,GACA,kDAAkD"}

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentTagItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentTagItem_unstable } from './useAttachmentTagItem';\nimport { renderAttachmentTagItem_unstable } from './renderAttachmentTagItem';\nimport { useAttachmentTagItemStyles_unstable } from './useAttachmentTagItemStyles';\n// AttachmentTagItem component - TODO: add more docs\nexport const AttachmentTagItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useAttachmentTagItem_unstable(props, ref);\n  useAttachmentTagItemStyles_unstable(state);\n  return renderAttachmentTagItem_unstable(state);\n});\nAttachmentTagItem.displayName = 'AttachmentTagItem';\n//# sourceMappingURL=AttachmentTagItem.js.map"],"names":["AttachmentTagItem","React","forwardRef","props","ref","state","useAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","renderAttachmentTagItem_unstable","displayName"],"mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;sCACuB;yCACG;4CACG;AAE7C,MAAMA,oBAAoB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrE,MAAMC,QAAQC,IAAAA,mDAA6B,EAACH,OAAOC;IACnDG,IAAAA,+DAAmC,EAACF;IACpC,OAAOG,IAAAA,yDAAgC,EAACH;AAC1C;AACAL,kBAAkBS,WAAW,GAAG,qBAChC,6CAA6C"}
+{"version":3,"sources":["AttachmentTagItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentTagItem_unstable } from './useAttachmentTagItem';\nimport { renderAttachmentTagItem_unstable } from './renderAttachmentTagItem';\nimport { useAttachmentTagItemStyles_unstable } from './useAttachmentTagItemStyles';\nexport const AttachmentTagItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useAttachmentTagItem_unstable(props, ref);\n  useAttachmentTagItemStyles_unstable(state);\n  return renderAttachmentTagItem_unstable(state);\n});\nAttachmentTagItem.displayName = 'AttachmentTagItem';\n//# sourceMappingURL=AttachmentTagItem.js.map"],"names":["AttachmentTagItem","React","forwardRef","props","ref","state","useAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","renderAttachmentTagItem_unstable","displayName"],"mappings":";;;;+BAIaA;;;eAAAA;;;;iEAJU;sCACuB;yCACG;4CACG;AAC7C,MAAMA,oBAAoB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrE,MAAMC,QAAQC,IAAAA,mDAA6B,EAACH,OAAOC;IACnDG,IAAAA,+DAAmC,EAACF;IACpC,OAAOG,IAAAA,yDAAgC,EAACH;AAC1C;AACAL,kBAAkBS,WAAW,GAAG,qBAChC,6CAA6C"}

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

@@ -2,6 +2,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from AttachmentTagItemProps.
- // & Required<Pick<AttachmentTagItemProps, 'propName'>>
  //# sourceMappingURL=AttachmentTagItem.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentTagItem.types.js"],"sourcesContent":["export {}; // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from AttachmentTagItemProps.\n// & Required<Pick<AttachmentTagItemProps, 'propName'>>\n//# sourceMappingURL=AttachmentTagItem.types.js.map"],"names":[],"mappings":";;;;CAAW,kIAAkI;CAC7I,uDAAuD;CACvD,mDAAmD"}
+{"version":3,"sources":["AttachmentTagItem.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=AttachmentTagItem.types.js.map"],"names":[],"mappings":";;;;CACA,mDAAmD"}

package/lib-commonjs/components/AttachmentTagItem/renderAttachmentTagItem.js

@@ -12,6 +12,11 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactcomponents = require("@fluentui/react-components");
 const renderAttachmentTagItem_unstable = (state)=>{
     (0, _reactcomponents.assertSlots)(state);
-    // TODO Add additional slots in the appropriate place
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.media && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {})
+        ]
+    });
 }; //# sourceMappingURL=renderAttachmentTagItem.js.map

package/lib-commonjs/components/AttachmentTagItem/renderAttachmentTagItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentTagItem.js"],"sourcesContent":["import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-components';\n/**\n * Render the final JSX of AttachmentTagItem\n */\nexport const renderAttachmentTagItem_unstable = state => {\n  assertSlots(state);\n  // TODO Add additional slots in the appropriate place\n  return /*#__PURE__*/_jsx(state.root, {});\n};\n//# sourceMappingURL=renderAttachmentTagItem.js.map"],"names":["renderAttachmentTagItem_unstable","state","assertSlots","_jsx","root"],"mappings":";;;;+BAKaA;;;eAAAA;;;4BALe;iCACA;AAIrB,MAAMA,mCAAmCC,CAAAA;IAC9CC,IAAAA,4BAAW,EAACD;IACZ,qDAAqD;IACrD,OAAO,WAAW,GAAEE,IAAAA,eAAI,EAACF,MAAMG,IAAI,EAAE,CAAC;AACxC,GACA,mDAAmD"}
+{"version":3,"sources":["renderAttachmentTagItem.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-components';\n/**\n * Render the final JSX of AttachmentTagItem\n */\nexport const renderAttachmentTagItem_unstable = state => {\n  assertSlots(state);\n  return /*#__PURE__*/_jsxs(state.root, {\n    children: [state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {}), /*#__PURE__*/_jsx(state.icon, {})]\n  });\n};\n//# sourceMappingURL=renderAttachmentTagItem.js.map"],"names":["renderAttachmentTagItem_unstable","state","assertSlots","_jsxs","root","children","media","_jsx","content","icon"],"mappings":";;;;+BAKaA;;;eAAAA;;;4BAL8B;iCACf;AAIrB,MAAMA,mCAAmCC,CAAAA;IAC9CC,IAAAA,4BAAW,EAACD;IACZ,OAAO,WAAW,GAAEE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACpCC,UAAU;YAACJ,MAAMK,KAAK,IAAI,WAAW,GAAEC,IAAAA,eAAI,EAACN,MAAMK,KAAK,EAAE,CAAC;YAAI,WAAW,GAAEC,IAAAA,eAAI,EAACN,MAAMO,OAAO,EAAE,CAAC;YAAI,WAAW,GAAED,IAAAA,eAAI,EAACN,MAAMQ,IAAI,EAAE,CAAC;SAAG;IACxI;AACF,GACA,mDAAmD"}

package/lib-commonjs/components/AttachmentTagItem/useAttachmentTagItem.js

@@ -8,21 +8,14 @@ Object.defineProperty(exports, "useAttachmentTagItem_unstable", {
         return useAttachmentTagItem_unstable;
     }
 });
-const _reactcomponents = require("@fluentui/react-components");
+const _useAttachmentTagSlots = require("../utils/useAttachmentTagSlots");
 const useAttachmentTagItem_unstable = (props, ref)=>{
-    return {
-        // TODO add appropriate props/defaults
-        components: {
-            // TODO add each slot's element type or component
-            root: 'div'
-        },
-        // TODO add appropriate slots, for example:
-        // mySlot: slot.optional(props.mySlot),
-        root: _reactcomponents.slot.always((0, _reactcomponents.getNativeElementProps)('div', {
-            ref,
-            ...props
-        }), {
-            elementType: 'div'
-        })
-    };
+    return (0, _useAttachmentTagSlots.useAttachmentTagSlots)(props, ref, {
+        elementType: {
+            root: 'div',
+            media: 'span',
+            content: 'span',
+            icon: 'span'
+        }
+    });
 }; //# sourceMappingURL=useAttachmentTagItem.js.map

package/lib-commonjs/components/AttachmentTagItem/useAttachmentTagItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTagItem.js"],"sourcesContent":["import { getNativeElementProps, slot } from '@fluentui/react-components';\n// If you add JSX to this file, be sure to change the file type to .tsx\n/**\n * Create the state required to render AttachmentTagItem.\n *\n * The returned state can be modified with hooks such as useAttachmentTagItemStyles_unstable,\n * before being passed to renderAttachmentTagItem_unstable.\n *\n * @param props - props from this instance of AttachmentTagItem\n * @param ref - reference to root HTMLElement of AttachmentTagItem\n */\nexport const useAttachmentTagItem_unstable = (props, ref) => {\n  return {\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div'\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: slot.optional(props.mySlot),\n    root: slot.always(getNativeElementProps('div', {\n      ref,\n      ...props\n    }), {\n      elementType: 'div'\n    })\n  };\n};\n//# sourceMappingURL=useAttachmentTagItem.js.map"],"names":["useAttachmentTagItem_unstable","props","ref","components","root","slot","always","getNativeElementProps","elementType"],"mappings":";;;;+BAWaA;;;eAAAA;;;iCAX+B;AAWrC,MAAMA,gCAAgC,CAACC,OAAOC;IACnD,OAAO;QACL,sCAAsC;QACtCC,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,uCAAuC;QACvCA,MAAMC,qBAAI,CAACC,MAAM,CAACC,IAAAA,sCAAqB,EAAC,OAAO;YAC7CL;YACA,GAAGD,KAAK;QACV,IAAI;YACFO,aAAa;QACf;IACF;AACF,GACA,gDAAgD"}
+{"version":3,"sources":["useAttachmentTagItem.js"],"sourcesContent":["import { useAttachmentTagSlots } from '../utils/useAttachmentTagSlots';\n/**\n * Create the state required to render AttachmentTagItem.\n *\n * The returned state can be modified with hooks such as useAttachmentTagItemStyles_unstable,\n * before being passed to renderAttachmentTagItem_unstable.\n *\n * @param props - props from this instance of AttachmentTagItem\n * @param ref - reference to root HTMLElement of AttachmentTagItem\n */\nexport const useAttachmentTagItem_unstable = (props, ref) => {\n  return useAttachmentTagSlots(props, ref, {\n    elementType: {\n      root: 'div',\n      media: 'span',\n      content: 'span',\n      icon: 'span'\n    }\n  });\n};\n//# sourceMappingURL=useAttachmentTagItem.js.map"],"names":["useAttachmentTagItem_unstable","props","ref","useAttachmentTagSlots","elementType","root","media","content","icon"],"mappings":";;;;+BAUaA;;;eAAAA;;;uCAVyB;AAU/B,MAAMA,gCAAgC,CAACC,OAAOC;IACnD,OAAOC,IAAAA,4CAAqB,EAACF,OAAOC,KAAK;QACvCE,aAAa;YACXC,MAAM;YACNC,OAAO;YACPC,SAAS;YACTC,MAAM;QACR;IACF;AACF,GACA,gDAAgD"}

package/lib-commonjs/components/AttachmentTagItem/useAttachmentTagItemStyles.js

@@ -17,18 +17,28 @@ _export(exports, {
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
+const _useAttachmentTagStyles = require("../AttachmentTag/useAttachmentTagStyles");
 const attachmentTagItemClassNames = {
-    root: 'fai-AttachmentTagItem'
+    root: 'fai-AttachmentTagItem',
+    media: 'fai-AttachmentTagItem__media',
+    content: 'fai-AttachmentTagItem__content',
+    icon: 'fai-AttachmentTagItem__icon'
 };
 /**
  * Styles for the root slot
- */ const useStyles = (0, _reactcomponents.__styles)({
-    root: {}
-}, {});
+ */ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rcbi0rb", null, [
+    ".rcbi0rb{display:inline-flex;flex-wrap:nowrap;column-gap:var(--spacingHorizontalSNudge);max-width:180px;align-items:center;}"
+]);
 const useAttachmentTagItemStyles_unstable = (state)=>{
-    const styles = useStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentTagItemClassNames.root, styles.root, state.root.className);
-    // TODO Add class names to slots, for example:
-    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+    const rootBaseClassName = useRootBaseClassName();
+    const mediaBaseClassName = (0, _useAttachmentTagStyles.useMediaBaseClassName)();
+    const contentBaseClassName = (0, _useAttachmentTagStyles.useContentBaseClassName)();
+    const iconBaseClassName = (0, _useAttachmentTagStyles.useIconBaseClassName)();
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentTagItemClassNames.root, rootBaseClassName, state.root.className);
+    if (state.media) {
+        state.media.className = (0, _reactcomponents.mergeClasses)(attachmentTagItemClassNames.media, mediaBaseClassName, state.media.className);
+    }
+    state.content.className = (0, _reactcomponents.mergeClasses)(attachmentTagItemClassNames.content, contentBaseClassName, state.content.className);
+    state.icon.className = (0, _reactcomponents.mergeClasses)(attachmentTagItemClassNames.icon, iconBaseClassName, state.icon.className);
     return state;
 }; //# sourceMappingURL=useAttachmentTagItemStyles.js.map

package/lib-commonjs/components/AttachmentTagItem/useAttachmentTagItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTagItemStyles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@fluentui/react-components';\nexport const attachmentTagItemClassNames = {\n  root: 'fai-AttachmentTagItem'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = __styles({\n  root: {}\n}, {});\n/**\n * Apply styling to the AttachmentTagItem slots based on the state\n */\nexport const useAttachmentTagItemStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(attachmentTagItemClassNames.root, styles.root, state.root.className);\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentTagItemStyles.js.map"],"names":["attachmentTagItemClassNames","useAttachmentTagItemStyles_unstable","root","useStyles","__styles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,2BAA2B;eAA3BA;;IAYAC,mCAAmC;eAAnCA;;;iCAb0B;AAChC,MAAMD,8BAA8B;IACzCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,yBAAQ,EAAC;IACzBF,MAAM,CAAC;AACT,GAAG,CAAC;AAIG,MAAMD,sCAAsCI,CAAAA;IACjD,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,6BAAY,EAACR,4BAA4BE,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IACvG,8CAA8C;IAC9C,gFAAgF;IAChF,OAAOF;AACT,GACA,sDAAsD"}
+{"version":3,"sources":["useAttachmentTagItemStyles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport { ATTACHMENTTAG_MAXWIDTH, useContentBaseClassName, useIconBaseClassName, useMediaBaseClassName } from '../AttachmentTag/useAttachmentTagStyles';\nexport const attachmentTagItemClassNames = {\n  root: 'fai-AttachmentTagItem',\n  media: 'fai-AttachmentTagItem__media',\n  content: 'fai-AttachmentTagItem__content',\n  icon: 'fai-AttachmentTagItem__icon'\n};\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = __resetStyles(\"rcbi0rb\", null, [\".rcbi0rb{display:inline-flex;flex-wrap:nowrap;column-gap:var(--spacingHorizontalSNudge);max-width:180px;align-items:center;}\"]);\n/**\n * Apply styling to the AttachmentTagItem slots based on the state\n */\nexport const useAttachmentTagItemStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const iconBaseClassName = useIconBaseClassName();\n  state.root.className = mergeClasses(attachmentTagItemClassNames.root, rootBaseClassName, state.root.className);\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentTagItemClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(attachmentTagItemClassNames.content, contentBaseClassName, state.content.className);\n  state.icon.className = mergeClasses(attachmentTagItemClassNames.icon, iconBaseClassName, state.icon.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentTagItemStyles.js.map"],"names":["attachmentTagItemClassNames","useAttachmentTagItemStyles_unstable","root","media","content","icon","useRootBaseClassName","__resetStyles","state","rootBaseClassName","mediaBaseClassName","useMediaBaseClassName","contentBaseClassName","useContentBaseClassName","iconBaseClassName","useIconBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,2BAA2B;eAA3BA;;IAaAC,mCAAmC;eAAnCA;;;iCAfuC;wCACyD;AACtG,MAAMD,8BAA8B;IACzCE,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,WAAW,MAAM;IAAC;CAA+H;AAIrL,MAAMN,sCAAsCO,CAAAA;IACjD,MAAMC,oBAAoBH;IAC1B,MAAMI,qBAAqBC,IAAAA,6CAAqB;IAChD,MAAMC,uBAAuBC,IAAAA,+CAAuB;IACpD,MAAMC,oBAAoBC,IAAAA,4CAAoB;IAC9CP,MAAMN,IAAI,CAACc,SAAS,GAAGC,IAAAA,6BAAY,EAACjB,4BAA4BE,IAAI,EAAEO,mBAAmBD,MAAMN,IAAI,CAACc,SAAS;IAC7G,IAAIR,MAAML,KAAK,EAAE;QACfK,MAAML,KAAK,CAACa,SAAS,GAAGC,IAAAA,6BAAY,EAACjB,4BAA4BG,KAAK,EAAEO,oBAAoBF,MAAML,KAAK,CAACa,SAAS;IACnH;IACAR,MAAMJ,OAAO,CAACY,SAAS,GAAGC,IAAAA,6BAAY,EAACjB,4BAA4BI,OAAO,EAAEQ,sBAAsBJ,MAAMJ,OAAO,CAACY,SAAS;IACzHR,MAAMH,IAAI,CAACW,SAAS,GAAGC,IAAAA,6BAAY,EAACjB,4BAA4BK,IAAI,EAAES,mBAAmBN,MAAMH,IAAI,CAACW,SAAS;IAC7G,OAAOR;AACT,GACA,sDAAsD"}

package/lib-commonjs/components/index.js

@@ -5,4 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 const _export_star = require("@swc/helpers/_/_export_star");
 _export_star._(require("./AttachmentTag"), exports);
 _export_star._(require("./AttachmentTagList"), exports);
+_export_star._(require("./AttachmentTagItem"), 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';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;uBAAc;uBACA;CACd,iCAAiC"}
+{"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"}

package/lib-commonjs/components/utils/useAttachmentTagSlots.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAttachmentTagSlots", {
+    enumerable: true,
+    get: function() {
+        return useAttachmentTagSlots;
+    }
+});
+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 _reactcontextselector = require("@fluentui/react-context-selector");
+const _reacticons = require("@fluentui/react-icons");
+const _attachmentTagListContext = require("../../contexts/attachmentTagListContext");
+function useAttachmentTagSlots(props, ref, options) {
+    const onAttachmentTagDismiss = (0, _attachmentTagListContext.useAttachmentTagListContext_unstable)((context)=>context.onAttachmentTagDismiss);
+    const { children, role } = props;
+    const { elementType } = options;
+    const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
+    const hasParentContext = (0, _reactcontextselector.useHasParentContext)(_attachmentTagListContext.AttachmentTagListContext);
+    const rootRole = role !== null && role !== void 0 ? role : hasParentContext ? 'menuitem' : undefined;
+    const root = _reactcomponents.slot.always((0, _reactcomponents.getNativeElementProps)(elementType.root, {
+        ref,
+        ...props,
+        role: rootRole
+    }), {
+        elementType: elementType.root
+    });
+    root.onClick = (0, _reactcomponents.mergeCallbacks)(root.onClick, (ev)=>onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
+            content: children,
+            media
+        }));
+    const media = _reactcomponents.slot.optional(props.media, {
+        elementType: elementType.media
+    });
+    const content = _reactcomponents.slot.always(props.content, {
+        defaultProps: {
+            children
+        },
+        elementType: elementType.content
+    });
+    const icon = _reactcomponents.slot.always(props.icon, {
+        defaultProps: {
+            children: /*#__PURE__*/ _react.createElement(DismissIcon, null)
+        },
+        elementType: elementType.icon
+    });
+    return {
+        components: {
+            root: elementType.root,
+            media: elementType.media,
+            content: elementType.content,
+            icon: elementType.icon
+        },
+        root,
+        media,
+        content,
+        icon
+    };
+} //# sourceMappingURL=useAttachmentTagSlots.js.map

package/lib-commonjs/components/utils/useAttachmentTagSlots.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentTagSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';\nimport { AttachmentTagListContext } from '../../contexts/attachmentTagListContext';\n/**\n * @internal\n * Create the slots required to render AttachmentTag or AttachmentTagItem.\n */\nexport function useAttachmentTagSlots(props, ref, options) {\n  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);\n  const {\n    children,\n    role\n  } = props;\n  const {\n    elementType\n  } = options;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const hasParentContext = useHasParentContext(AttachmentTagListContext);\n  const rootRole = role !== null && role !== void 0 ? role : hasParentContext ? 'menuitem' : undefined;\n  const root = slot.always(getNativeElementProps(elementType.root, {\n    ref,\n    ...props,\n    role: rootRole\n  }), {\n    elementType: elementType.root\n  });\n  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {\n    content: children,\n    media\n  }));\n  const media = slot.optional(props.media, {\n    elementType: elementType.media\n  });\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children\n    },\n    elementType: elementType.content\n  });\n  const icon = slot.always(props.icon, {\n    defaultProps: {\n      children: /*#__PURE__*/React.createElement(DismissIcon, null)\n    },\n    elementType: elementType.icon\n  });\n  return {\n    components: {\n      root: elementType.root,\n      media: elementType.media,\n      content: elementType.content,\n      icon: elementType.icon\n    },\n    root,\n    media,\n    content,\n    icon\n  };\n}\n//# sourceMappingURL=useAttachmentTagSlots.js.map"],"names":["useAttachmentTagSlots","props","ref","options","onAttachmentTagDismiss","useAttachmentTagListContext_unstable","context","children","role","elementType","DismissIcon","bundleIcon","Dismiss20Filled","Dismiss20Regular","hasParentContext","useHasParentContext","AttachmentTagListContext","rootRole","undefined","root","slot","always","getNativeElementProps","onClick","mergeCallbacks","ev","content","media","optional","defaultProps","icon","React","createElement","components"],"mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;iCACqC;sCACxB;4BAC0B;0CACT;AAM9C,SAASA,sBAAsBC,KAAK,EAAEC,GAAG,EAAEC,OAAO;IACvD,MAAMC,yBAAyBC,IAAAA,8DAAoC,EAACC,CAAAA,UAAWA,QAAQF,sBAAsB;IAC7G,MAAM,EACJG,QAAQ,EACRC,IAAI,EACL,GAAGP;IACJ,MAAM,EACJQ,WAAW,EACZ,GAAGN;IACJ,MAAMO,cAAcC,IAAAA,sBAAU,EAACC,2BAAe,EAAEC,4BAAgB;IAChE,MAAMC,mBAAmBC,IAAAA,yCAAmB,EAACC,kDAAwB;IACrE,MAAMC,WAAWT,SAAS,QAAQA,SAAS,KAAK,IAAIA,OAAOM,mBAAmB,aAAaI;IAC3F,MAAMC,OAAOC,qBAAI,CAACC,MAAM,CAACC,IAAAA,sCAAqB,EAACb,YAAYU,IAAI,EAAE;QAC/DjB;QACA,GAAGD,KAAK;QACRO,MAAMS;IACR,IAAI;QACFR,aAAaA,YAAYU,IAAI;IAC/B;IACAA,KAAKI,OAAO,GAAGC,IAAAA,+BAAc,EAACL,KAAKI,OAAO,EAAEE,CAAAA,KAAMrB,2BAA2B,QAAQA,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBqB,IAAI;YAC3JC,SAASnB;YACToB;QACF;IACA,MAAMA,QAAQP,qBAAI,CAACQ,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QACvClB,aAAaA,YAAYkB,KAAK;IAChC;IACA,MAAMD,UAAUN,qBAAI,CAACC,MAAM,CAACpB,MAAMyB,OAAO,EAAE;QACzCG,cAAc;YACZtB;QACF;QACAE,aAAaA,YAAYiB,OAAO;IAClC;IACA,MAAMI,OAAOV,qBAAI,CAACC,MAAM,CAACpB,MAAM6B,IAAI,EAAE;QACnCD,cAAc;YACZtB,UAAU,WAAW,GAAEwB,OAAMC,aAAa,CAACtB,aAAa;QAC1D;QACAD,aAAaA,YAAYqB,IAAI;IAC/B;IACA,OAAO;QACLG,YAAY;YACVd,MAAMV,YAAYU,IAAI;YACtBQ,OAAOlB,YAAYkB,KAAK;YACxBD,SAASjB,YAAYiB,OAAO;YAC5BI,MAAMrB,YAAYqB,IAAI;QACxB;QACAX;QACAQ;QACAD;QACAI;IACF;AACF,EACA,iDAAiD"}

package/lib-commonjs/index.js

@@ -38,8 +38,24 @@ _export(exports, {
     },
     useAttachmentTagList_unstable: function() {
         return _AttachmentTagList.useAttachmentTagList_unstable;
+    },
+    AttachmentTagItem: function() {
+        return _AttachmentTagItem.AttachmentTagItem;
+    },
+    attachmentTagItemClassNames: function() {
+        return _AttachmentTagItem.attachmentTagItemClassNames;
+    },
+    renderAttachmentTagItem_unstable: function() {
+        return _AttachmentTagItem.renderAttachmentTagItem_unstable;
+    },
+    useAttachmentTagItemStyles_unstable: function() {
+        return _AttachmentTagItem.useAttachmentTagItemStyles_unstable;
+    },
+    useAttachmentTagItem_unstable: function() {
+        return _AttachmentTagItem.useAttachmentTagItem_unstable;
     }
 });
 const _AttachmentTag = require("./AttachmentTag");
 const _AttachmentTagList = require("./AttachmentTagList");
+const _AttachmentTagItem = require("./AttachmentTagItem");
  //# 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';\n//# sourceMappingURL=index.js.map"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_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;;;+BADZ;mCACoB;CACrK,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';\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"],"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;;;+BAFZ;mCACoB;mCACA;CACrK,iCAAiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",