@fluentui-copilot/react-attachments 0.8.0 → 0.8.2

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

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachmentClassNames: function() {
+        return attachmentClassNames;
+    },
+    useAttachmentStyles_unstable: function() {
+        return useAttachmentStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const attachmentClassNames = {
+    root: 'fai-Attachment',
+    primaryAction: 'fai-Attachment__primaryAction',
+    dismissButton: 'fai-Attachment__dismissButton',
+    media: 'fai-Attachment__media',
+    content: 'fai-Attachment__content',
+    dismissIcon: 'fai-Attachment__dismissIcon'
+};
+const ATTACHMENT_MAXWIDTH = '180px';
+const ATTACHMENT_SIZE = '20px';
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1u26nio", null, [
+    ".r1u26nio{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;max-width:180px;}"
+]);
+const buttonBaseStyles = {
+    alignItems: 'center',
+    backgroundColor: _reactcomponents.tokens.colorNeutralBackground1,
+    border: `${_reactcomponents.tokens.strokeWidthThin} solid ${_reactcomponents.tokens.colorNeutralStroke1}`,
+    borderRadius: _reactcomponents.tokens.borderRadiusMedium,
+    boxSizing: 'border-box',
+    columnGap: _reactcomponents.tokens.spacingHorizontalSNudge,
+    color: _reactcomponents.tokens.colorNeutralForeground1,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexWrap: 'nowrap',
+    justifyContent: 'center',
+    ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
+        ..._reactcomponents.shorthands.outline(_reactcomponents.tokens.strokeWidthThick, 'solid', _reactcomponents.tokens.colorStrokeFocus2),
+        zIndex: 1
+    }),
+    verticalAlign: 'middle'
+};
+const usePrimaryActionBaseClassName = (0, _reactcomponents.__resetStyles)("rftb5h9", "rofiitm", [
+    ".rftb5h9{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-right-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}",
+    ".rftb5h9[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}",
+    ".rofiitm{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-left-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}",
+    ".rofiitm[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}"
+]);
+const usePrimaryActionStyles = (0, _reactcomponents.__styles)({
+    button: {
+        eoavqd: "f8491dx",
+        Jwef8y: "f1h648pw",
+        Bi91k9c: "fnwyq0v",
+        ecr2s2: "fwdzr64",
+        lj723h: "flvvhsy",
+        Bqrx1nm: "fq7113v",
+        kx9iu6: "fp3oj7s"
+    }
+}, {
+    h: [
+        ".f8491dx:hover{cursor:pointer;}",
+        ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}",
+        ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}"
+    ],
+    a: [
+        ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}",
+        ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r1cf2ehf", "rhq1520", {
+    r: [
+        ".r1cf2ehf{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-top-right-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".r1cf2ehf[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}",
+        ".r1cf2ehf:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}",
+        ".r1cf2ehf:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}",
+        ".r1cf2ehf:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}",
+        ".r1cf2ehf:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}",
+        ".rhq1520{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-top-left-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".rhq1520[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}",
+        ".rhq1520:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}",
+        ".rhq1520:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}",
+        ".rhq1520:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}",
+        ".rhq1520:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.r1cf2ehf:hover{background-color:HighlightText;}.r1cf2ehf:active{background-color:HighlightText;}}",
+        "@media (forced-colors: active){.rhq1520:hover{background-color:HighlightText;}.rhq1520:active{background-color:HighlightText;}}"
+    ]
+});
+const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("r19jnv3a", null, [
+    ".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}"
+]);
+const useContentBaseClassName = (0, _reactcomponents.__resetStyles)("rmt99gk", null, [
+    ".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"
+]);
+const useDismissIconBaseClassName = (0, _reactcomponents.__resetStyles)("r176grtk", null, [
+    ".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"
+]);
+const useAttachmentStyles_unstable = (state)=>{
+    const rootBaseClassName = useRootBaseClassName();
+    const primaryActionBaseClassName = usePrimaryActionBaseClassName();
+    const dismissButtonBaseClassName = useDismissButtonBaseClassName();
+    const mediaBaseClassName = useMediaBaseClassName();
+    const contentBaseClassName = useContentBaseClassName();
+    const dismissIconBaseClassName = useDismissIconBaseClassName();
+    const primaryActionStyles = usePrimaryActionStyles();
+    const { primaryAction } = state;
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, state.root.className);
+    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, state.primaryAction.className);
+    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
+    if (state.media) {
+        state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, state.media.className);
+    }
+    state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, state.content.className);
+    state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
+    return state;
+}; //# sourceMappingURL=useAttachmentStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentStyles.js"],"sourcesContent":["import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nexport const attachmentClassNames = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon'\n};\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\nconst useRootBaseClassName = __resetStyles(\"r1u26nio\", null, [\".r1u26nio{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;max-width:180px;}\"]);\nconst buttonBaseStyles = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  color: tokens.colorNeutralForeground1,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  ...createCustomFocusIndicatorStyle({\n    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1\n  }),\n  verticalAlign: 'middle'\n};\nconst usePrimaryActionBaseClassName = __resetStyles(\"rftb5h9\", \"rofiitm\", [\".rftb5h9{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-right-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}\", \".rftb5h9[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".rofiitm{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-left-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}\", \".rofiitm[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\"]);\nconst usePrimaryActionStyles = __styles({\n  button: {\n    eoavqd: \"f8491dx\",\n    Jwef8y: \"f1h648pw\",\n    Bi91k9c: \"fnwyq0v\",\n    ecr2s2: \"fwdzr64\",\n    lj723h: \"flvvhsy\",\n    Bqrx1nm: \"fq7113v\",\n    kx9iu6: \"fp3oj7s\"\n  }\n}, {\n  h: [\".f8491dx:hover{cursor:pointer;}\", \".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}\", \".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\"],\n  a: [\".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}\", \".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\"],\n  m: [[\"@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\nconst useDismissButtonBaseClassName = __resetStyles(\"r1cf2ehf\", \"rhq1520\", {\n  r: [\".r1cf2ehf{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-top-right-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);}\", \".r1cf2ehf[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".r1cf2ehf:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}\", \".r1cf2ehf:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}\", \".r1cf2ehf:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}\", \".r1cf2ehf:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}\", \".rhq1520{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-top-left-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);}\", \".rhq1520[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}\", \".rhq1520:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}\", \".rhq1520:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}\", \".rhq1520:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}\", \".rhq1520:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}\"],\n  s: [\"@media (forced-colors: active){.r1cf2ehf:hover{background-color:HighlightText;}.r1cf2ehf:active{background-color:HighlightText;}}\", \"@media (forced-colors: active){.rhq1520:hover{background-color:HighlightText;}.rhq1520:active{background-color:HighlightText;}}\"]\n});\nconst useMediaBaseClassName = __resetStyles(\"r19jnv3a\", null, [\".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}\"]);\nconst useContentBaseClassName = __resetStyles(\"rmt99gk\", null, [\".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}\"]);\nconst useDismissIconBaseClassName = __resetStyles(\"r176grtk\", null, [\".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}\"]);\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const {\n    primaryAction\n  } = state;\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, state.primaryAction.className);\n  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, state.content.className);\n  state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);\n  return state;\n};\n//# sourceMappingURL=useAttachmentStyles.js.map"],"names":["attachmentClassNames","useAttachmentStyles_unstable","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","__resetStyles","buttonBaseStyles","alignItems","backgroundColor","tokens","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","display","flexWrap","justifyContent","createCustomFocusIndicatorStyle","shorthands","outline","strokeWidthThick","colorStrokeFocus2","zIndex","verticalAlign","usePrimaryActionBaseClassName","usePrimaryActionStyles","__styles","button","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","h","a","m","useDismissButtonBaseClassName","r","s","useMediaBaseClassName","useContentBaseClassName","useDismissIconBaseClassName","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","primaryActionStyles","className","mergeClasses","as"],"mappings":";;;;;;;;;;;IACaA,oBAAoB;eAApBA;;IA2DAC,4BAA4B;eAA5BA;;;iCA5DgH;AACtH,MAAMD,uBAAuB;IAClCE,MAAM;IACNC,eAAe;IACfC,eAAe;IACfC,OAAO;IACPC,SAAS;IACTC,aAAa;AACf;AACA,MAAMC,sBAAsB;AAC5B,MAAMC,kBAAkB;AACxB,MAAMC,uBAAuBC,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAAC;CAAiI;AAC/L,MAAMC,mBAAmB;IACvBC,YAAY;IACZC,iBAAiBC,uBAAM,CAACC,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEF,uBAAM,CAACG,eAAe,CAAC,OAAO,EAAEH,uBAAM,CAACI,mBAAmB,CAAC,CAAC;IACvEC,cAAcL,uBAAM,CAACM,kBAAkB;IACvCC,WAAW;IACXC,WAAWR,uBAAM,CAACS,uBAAuB;IACzCC,OAAOV,uBAAM,CAACW,uBAAuB;IACrCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,gBAAgB;IAChB,GAAGC,IAAAA,gDAA+B,EAAC;QACjC,GAAGC,2BAAU,CAACC,OAAO,CAAClB,uBAAM,CAACmB,gBAAgB,EAAE,SAASnB,uBAAM,CAACoB,iBAAiB,CAAC;QACjFC,QAAQ;IACV,EAAE;IACFC,eAAe;AACjB;AACA,MAAMC,gCAAgC3B,IAAAA,8BAAa,EAAC,WAAW,WAAW;IAAC;IAA4tB;IAAiJ;IAAytB;CAAgJ;AACjyD,MAAM4B,yBAAyBC,IAAAA,yBAAQ,EAAC;IACtCC,QAAQ;QACNC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAmC;QAA0E;KAA6D;IAC9KC,GAAG;QAAC;QAA4E;KAAgE;IAChJC,GAAG;QAAC;YAAC;YAAmF;gBACtFA,GAAG;YACL;SAAE;QAAE;YAAC;YAAoF;gBACvFA,GAAG;YACL;SAAE;KAAC;AACL;AACA,MAAMC,gCAAgCzC,IAAAA,8BAAa,EAAC,YAAY,WAAW;IACzE0C,GAAG;QAAC;QAA07B;QAAkJ;QAAwI;QAA6F;QAA8H;QAAiG;QAA07B;QAAiJ;QAAuI;QAA4F;QAA6H;KAA+F;IAC9hGC,GAAG;QAAC;QAAqI;KAAkI;AAC7Q;AACA,MAAMC,wBAAwB5C,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAAC;CAAqE;AACpI,MAAM6C,0BAA0B7C,IAAAA,8BAAa,EAAC,WAAW,MAAM;IAAC;CAAsN;AACtR,MAAM8C,8BAA8B9C,IAAAA,8BAAa,EAAC,YAAY,MAAM;IAAC;CAA+jB;AAI7nB,MAAMV,+BAA+ByD,CAAAA;IAC1C,MAAMC,oBAAoBjD;IAC1B,MAAMkD,6BAA6BtB;IACnC,MAAMuB,6BAA6BT;IACnC,MAAMU,qBAAqBP;IAC3B,MAAMQ,uBAAuBP;IAC7B,MAAMQ,2BAA2BP;IACjC,MAAMQ,sBAAsB1B;IAC5B,MAAM,EACJpC,aAAa,EACd,GAAGuD;IACJA,MAAMxD,IAAI,CAACgE,SAAS,GAAGC,IAAAA,6BAAY,EAACnE,qBAAqBE,IAAI,EAAEyD,mBAAmBD,MAAMxD,IAAI,CAACgE,SAAS;IACtGR,MAAMvD,aAAa,CAAC+D,SAAS,GAAGC,IAAAA,6BAAY,EAACnE,qBAAqBG,aAAa,EAAEyD,4BAA4BzD,cAAciE,EAAE,KAAK,UAAUH,oBAAoBxB,MAAM,EAAEiB,MAAMvD,aAAa,CAAC+D,SAAS;IACrMR,MAAMtD,aAAa,CAAC8D,SAAS,GAAGC,IAAAA,6BAAY,EAACnE,qBAAqBI,aAAa,EAAEyD,4BAA4BH,MAAMtD,aAAa,CAAC8D,SAAS;IAC1I,IAAIR,MAAMrD,KAAK,EAAE;QACfqD,MAAMrD,KAAK,CAAC6D,SAAS,GAAGC,IAAAA,6BAAY,EAACnE,qBAAqBK,KAAK,EAAEyD,oBAAoBJ,MAAMrD,KAAK,CAAC6D,SAAS;IAC5G;IACAR,MAAMpD,OAAO,CAAC4D,SAAS,GAAGC,IAAAA,6BAAY,EAACnE,qBAAqBM,OAAO,EAAEyD,sBAAsBL,MAAMpD,OAAO,CAAC4D,SAAS;IAClHR,MAAMnD,WAAW,CAAC2D,SAAS,GAAGC,IAAAA,6BAAY,EAACnE,qBAAqBO,WAAW,EAAEyD,0BAA0BN,MAAMnD,WAAW,CAAC2D,SAAS;IAClI,OAAOR;AACT,GACA,+CAA+C"}

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,40 @@ _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;
+    },
+    Attachment: function() {
+        return _Attachment.Attachment;
+    },
+    attachmentClassNames: function() {
+        return _Attachment.attachmentClassNames;
+    },
+    renderAttachment_unstable: function() {
+        return _Attachment.renderAttachment_unstable;
+    },
+    useAttachmentStyles_unstable: function() {
+        return _Attachment.useAttachmentStyles_unstable;
+    },
+    useAttachment_unstable: function() {
+        return _Attachment.useAttachment_unstable;
     }
 });
 const _AttachmentTag = require("./AttachmentTag");
 const _AttachmentTagList = require("./AttachmentTagList");
+const _AttachmentTagItem = require("./AttachmentTagItem");
+const _Attachment = require("./Attachment");
  //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { AttachmentTag, attachmentTagClassNames, renderAttachmentTag_unstable, useAttachmentTagStyles_unstable, useAttachmentTag_unstable } from './AttachmentTag';\nexport { AttachmentTagList, attachmentTagListClassNames, renderAttachmentTagList_unstable, useAttachmentTagListStyles_unstable, useAttachmentTagList_unstable } from './AttachmentTagList';\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';\nexport { Attachment, attachmentClassNames, renderAttachment_unstable, useAttachmentStyles_unstable, useAttachment_unstable } from './Attachment';\n//# sourceMappingURL=index.js.map"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable"],"mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAChIC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,yBAAyB;eAAzBA,qCAAyB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;;+BAHuB;mCACoB;mCACA;4BACnC;CAClI,iCAAiC"}

package/package.json

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