@fluentui-copilot/react-attachments 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251013-0406-7c7739c8.1

package/lib/components/AgentTag/useAgentTagStyles.styles.raw.js

@@ -0,0 +1,66 @@
+import { makeStyles, mergeClasses } from '@fluentui/react-components';
+import { useAttachmentStyles_unstable } from '..';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+export const agentTagClassNames = {
+    root: 'fai-AgentTag',
+    primaryAction: 'fai-AgentTag__primaryAction',
+    dismissIcon: 'fai-AgentTag__dismissIcon',
+    dismissButton: 'fai-AgentTag__dismissButton',
+    media: 'fai-AgentTag__media',
+    content: 'fai-AgentTag__content',
+    progress: 'fai-AgentTag__progress'
+};
+const useMediaStyles = makeStyles({
+    canvas: {
+        width: '24px',
+        height: '24px'
+    },
+    sidecar: {
+        width: '20px',
+        height: '20px'
+    }
+});
+const useContentStyles = makeStyles({
+    canvas: {
+        ...typographyStyles.subtitle2,
+        color: tokens.colorNeutralForeground2
+    },
+    sidecar: {
+        ...typographyStyles.body1Strong,
+        color: tokens.colorNeutralForeground2
+    }
+});
+const useDismissButtonStyles = makeStyles({
+    canvas: {
+        borderRadius: tokens.borderRadius2XL,
+        paddingLeft: tokens.spacingHorizontalL,
+        paddingRight: tokens.spacingHorizontalM
+    },
+    sidecar: {
+        paddingLeft: tokens.spacingHorizontalM,
+        paddingRight: tokens.spacingHorizontalS,
+        borderRadius: tokens.borderRadiusXLarge
+    }
+});
+/**
+ * Apply styling to the AgentTag slots based on the state
+ */ export const useAgentTagStyles_unstable = (state)=>{
+    'use no memo';
+    const { mode } = state;
+    const contentStyles = useContentStyles();
+    const dismissButtonStyles = useDismissButtonStyles();
+    const mediaStyles = useMediaStyles();
+    state.root.className = mergeClasses(agentTagClassNames.root, state.root.className);
+    state.primaryAction.className = mergeClasses(agentTagClassNames.primaryAction, state.primaryAction.className);
+    state.dismissIcon.className = mergeClasses(agentTagClassNames.dismissIcon, state.dismissIcon.className);
+    state.dismissButton.className = mergeClasses(agentTagClassNames.dismissButton, dismissButtonStyles[mode], state.dismissButton.className);
+    if (state.media) {
+        state.media.className = mergeClasses(agentTagClassNames.media, mediaStyles[mode], state.media.className);
+    }
+    state.content.className = mergeClasses(agentTagClassNames.content, contentStyles[mode], state.content.className);
+    if (state.progress) {
+        state.progress.className = mergeClasses(agentTagClassNames.progress, state.progress.className);
+    }
+    useAttachmentStyles_unstable(state);
+    return state;
+};

package/lib/components/AgentTag/useAgentTagStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAgentTagStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { AgentTagSlots, AgentTagState } from './AgentTag.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { useAttachmentStyles_unstable } from '..';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\n\nexport const agentTagClassNames: SlotClassNames<AgentTagSlots> = {\n  root: 'fai-AgentTag',\n  primaryAction: 'fai-AgentTag__primaryAction',\n  dismissIcon: 'fai-AgentTag__dismissIcon',\n  dismissButton: 'fai-AgentTag__dismissButton',\n  media: 'fai-AgentTag__media',\n  content: 'fai-AgentTag__content',\n  progress: 'fai-AgentTag__progress',\n};\n\nconst useMediaStyles = makeStyles({\n  canvas: {\n    width: '24px',\n    height: '24px',\n  },\n  sidecar: { width: '20px', height: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n  canvas: {\n    ...typographyStyles.subtitle2,\n    color: tokens.colorNeutralForeground2,\n  },\n  sidecar: {\n    ...typographyStyles.body1Strong,\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useDismissButtonStyles = makeStyles({\n  canvas: {\n    borderRadius: tokens.borderRadius2XL,\n    paddingLeft: tokens.spacingHorizontalL,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n  sidecar: {\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalS,\n    borderRadius: tokens.borderRadiusXLarge,\n  },\n});\n\n/**\n * Apply styling to the AgentTag slots based on the state\n */\nexport const useAgentTagStyles_unstable = (state: AgentTagState): AgentTagState => {\n  'use no memo';\n\n  const { mode } = state;\n\n  const contentStyles = useContentStyles();\n  const dismissButtonStyles = useDismissButtonStyles();\n  const mediaStyles = useMediaStyles();\n\n  state.root.className = mergeClasses(agentTagClassNames.root, state.root.className);\n\n  state.primaryAction.className = mergeClasses(agentTagClassNames.primaryAction, state.primaryAction.className);\n\n  state.dismissIcon.className = mergeClasses(agentTagClassNames.dismissIcon, state.dismissIcon.className);\n\n  state.dismissButton.className = mergeClasses(\n    agentTagClassNames.dismissButton,\n    dismissButtonStyles[mode],\n    state.dismissButton.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(agentTagClassNames.media, mediaStyles[mode], state.media.className);\n  }\n\n  state.content.className = mergeClasses(agentTagClassNames.content, contentStyles[mode], state.content.className);\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(agentTagClassNames.progress, state.progress.className);\n  }\n\n  useAttachmentStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useAttachmentStyles_unstable","tokens","typographyStyles","agentTagClassNames","root","primaryAction","dismissIcon","dismissButton","media","content","progress","useMediaStyles","canvas","width","height","sidecar","useContentStyles","subtitle2","color","colorNeutralForeground2","body1Strong","useDismissButtonStyles","borderRadius","borderRadius2XL","paddingLeft","spacingHorizontalL","paddingRight","spacingHorizontalM","spacingHorizontalS","borderRadiusXLarge","useAgentTagStyles_unstable","state","mode","contentStyles","dismissButtonStyles","mediaStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAGtE,SAASC,4BAA4B,QAAQ,KAAK;AAClD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAEpE,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,eAAe;IACfC,aAAa;IACbC,eAAe;IACfC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ,EAAE;AAEF,MAAMC,iBAAiBb,WAAW;IAChCc,QAAQ;QACNC,OAAO;QACPC,QAAQ;IACV;IACAC,SAAS;QAAEF,OAAO;QAAQC,QAAQ;IAAO;AAC3C;AAEA,MAAME,mBAAmBlB,WAAW;IAClCc,QAAQ;QACN,GAAGV,iBAAiBe,SAAS;QAC7BC,OAAOjB,OAAOkB,uBAAuB;IACvC;IACAJ,SAAS;QACP,GAAGb,iBAAiBkB,WAAW;QAC/BF,OAAOjB,OAAOkB,uBAAuB;IACvC;AACF;AAEA,MAAME,yBAAyBvB,WAAW;IACxCc,QAAQ;QACNU,cAAcrB,OAAOsB,eAAe;QACpCC,aAAavB,OAAOwB,kBAAkB;QACtCC,cAAczB,OAAO0B,kBAAkB;IACzC;IACAZ,SAAS;QACPS,aAAavB,OAAO0B,kBAAkB;QACtCD,cAAczB,OAAO2B,kBAAkB;QACvCN,cAAcrB,OAAO4B,kBAAkB;IACzC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,gBAAgBjB;IACtB,MAAMkB,sBAAsBb;IAC5B,MAAMc,cAAcxB;IAEpBoB,MAAM3B,IAAI,CAACgC,SAAS,GAAGrC,aAAaI,mBAAmBC,IAAI,EAAE2B,MAAM3B,IAAI,CAACgC,SAAS;IAEjFL,MAAM1B,aAAa,CAAC+B,SAAS,GAAGrC,aAAaI,mBAAmBE,aAAa,EAAE0B,MAAM1B,aAAa,CAAC+B,SAAS;IAE5GL,MAAMzB,WAAW,CAAC8B,SAAS,GAAGrC,aAAaI,mBAAmBG,WAAW,EAAEyB,MAAMzB,WAAW,CAAC8B,SAAS;IAEtGL,MAAMxB,aAAa,CAAC6B,SAAS,GAAGrC,aAC9BI,mBAAmBI,aAAa,EAChC2B,mBAAmB,CAACF,KAAK,EACzBD,MAAMxB,aAAa,CAAC6B,SAAS;IAG/B,IAAIL,MAAMvB,KAAK,EAAE;QACfuB,MAAMvB,KAAK,CAAC4B,SAAS,GAAGrC,aAAaI,mBAAmBK,KAAK,EAAE2B,WAAW,CAACH,KAAK,EAAED,MAAMvB,KAAK,CAAC4B,SAAS;IACzG;IAEAL,MAAMtB,OAAO,CAAC2B,SAAS,GAAGrC,aAAaI,mBAAmBM,OAAO,EAAEwB,aAAa,CAACD,KAAK,EAAED,MAAMtB,OAAO,CAAC2B,SAAS;IAE/G,IAAIL,MAAMrB,QAAQ,EAAE;QAClBqB,MAAMrB,QAAQ,CAAC0B,SAAS,GAAGrC,aAAaI,mBAAmBO,QAAQ,EAAEqB,MAAMrB,QAAQ,CAAC0B,SAAS;IAC/F;IAEApC,6BAA6B+B;IAE7B,OAAOA;AACT,EAAE"}

package/lib/components/Attachment/Attachment.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useAttachment_unstable } from './useAttachment';
+import { renderAttachment_unstable } from './renderAttachment';
+import { useAttachmentStyles_unstable } from './useAttachmentStyles.styles';
+import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
+// Attachment component - TODO: add more docs
+export const Attachment = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAttachment_unstable(props, ref);
+    useAttachmentStyles_unstable(state);
+    useCustomStyleHook('useAttachmentStyles')(state);
+    return renderAttachment_unstable(state);
+});
+Attachment.displayName = 'Attachment';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Attachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachment_unstable } from './useAttachment';\nimport { renderAttachment_unstable } from './renderAttachment';\nimport { useAttachmentStyles_unstable } from './useAttachmentStyles.styles';\nimport type { AttachmentProps } from './Attachment.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Attachment component - TODO: add more docs\nexport const Attachment: ForwardRefComponent<AttachmentProps> = React.forwardRef((props, ref) => {\n  const state = useAttachment_unstable(props, ref);\n\n  useAttachmentStyles_unstable(state);\n  useCustomStyleHook('useAttachmentStyles')(state);\n\n  return renderAttachment_unstable(state);\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["React","useAttachment_unstable","renderAttachment_unstable","useAttachmentStyles_unstable","useCustomStyleHook","Attachment","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,6CAA6C;AAC7C,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAC7BL,mBAAmB,uBAAuBK;IAE1C,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering Attachment
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Attachments support a primary action.\n   */\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n\n  /**\n   * Attachments have a dismiss button.\n   */\n  dismissButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * Attachments can include an image or other media.\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * The content of the attachment.\n   */\n  content: NonNullable<Slot<'span'>>;\n\n  /**\n   * The icon that renders for the `dismissButton`.\n   */\n  dismissIcon: NonNullable<Slot<'span'>>;\n\n  /**\n   * An attachment supports a progress bar, which can display the attachment's upload progress.\n   */\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = Omit<ComponentProps<Partial<AttachmentSlots>>, 'content'> &\n  Pick<Partial<AttachmentSlots>, 'content'> &\n  CopilotMode &\n  DesignVersion & {\n    /**\n     * Use this prop if an attachment has no text content.\n     *\n     * @default false\n     */\n    imageOnly?: boolean;\n\n    /**\n     * An attachment supports different sizes.\n     *\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium';\n    /**\n     * Use this prop if the attachment has no primary action\n     * and should be rendered as a single button\n     */\n    dismissOnly?: boolean;\n  };\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id' | 'size' | 'designVersion' | 'mode' | 'dismissOnly'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAgEA;;CAEC,GACD,WAKI"}

package/lib/components/Attachment/index.js

@@ -0,0 +1,4 @@
+export { Attachment } from './Attachment';
+export { renderAttachment_unstable } from './renderAttachment';
+export { useAttachment_unstable } from './useAttachment';
+export { attachmentClassNames, useAttachmentStyles_unstable, useOverflowStyles } from './useAttachmentStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Attachment } from './Attachment';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment.types';\nexport { renderAttachment_unstable } from './renderAttachment';\nexport { useAttachment_unstable } from './useAttachment';\nexport { attachmentClassNames, useAttachmentStyles_unstable, useOverflowStyles } from './useAttachmentStyles.styles';\n"],"names":["Attachment","renderAttachment_unstable","useAttachment_unstable","attachmentClassNames","useAttachmentStyles_unstable","useOverflowStyles"],"rangeMappings":";;;","mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,EAAEC,iBAAiB,QAAQ,+BAA+B"}

package/lib/components/Attachment/renderAttachment.js

@@ -0,0 +1,42 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { OverflowItem, assertSlots } from '@fluentui/react-components';
+/**
+ * Render the final JSX of Attachment
+ */ export const renderAttachment_unstable = (state)=>{
+    const { id, shouldUseOverflow, designVersion, dismissOnly } = state;
+    const attachment = designVersion === 'next' && dismissOnly ? renderDismissOnly(state) : renderAttachment(state);
+    return shouldUseOverflow ? /*#__PURE__*/ _jsx(OverflowItem, {
+        id: id,
+        children: attachment
+    }, id) : attachment;
+};
+const renderAttachment = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsxs(state.primaryAction, {
+                children: [
+                    state.media && !state.imageOnly && /*#__PURE__*/ _jsx(state.media, {}),
+                    /*#__PURE__*/ _jsx(state.content, {}),
+                    state.progress && /*#__PURE__*/ _jsx(state.progress, {})
+                ]
+            }),
+            /*#__PURE__*/ _jsx(state.dismissButton, {
+                children: /*#__PURE__*/ _jsx(state.dismissIcon, {})
+            })
+        ]
+    });
+};
+const renderDismissOnly = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsxs(state.dismissButton, {
+            children: [
+                state.media && !state.imageOnly && /*#__PURE__*/ _jsx(state.media, {}),
+                /*#__PURE__*/ _jsx(state.content, {}),
+                state.progress && /*#__PURE__*/ _jsx(state.progress, {}),
+                /*#__PURE__*/ _jsx(state.dismissIcon, {})
+            ]
+        })
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState): JSXElement => {\n  const { id, shouldUseOverflow, designVersion, dismissOnly } = state;\n\n  const attachment = designVersion === 'next' && dismissOnly ? renderDismissOnly(state) : renderAttachment(state);\n\n  return shouldUseOverflow ? (\n    <OverflowItem id={id} key={id}>\n      {attachment}\n    </OverflowItem>\n  ) : (\n    attachment\n  );\n};\n\nconst renderAttachment = (state: AttachmentState): JSXElement => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n\nconst renderDismissOnly = (state: AttachmentState): JSXElement => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.dismissButton>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["OverflowItem","assertSlots","renderAttachment_unstable","state","id","shouldUseOverflow","designVersion","dismissOnly","attachment","renderDismissOnly","renderAttachment","root","primaryAction","media","imageOnly","content","progress","dismissButton","dismissIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,YAAY,EAAEC,WAAW,QAAQ,6BAA6B;AAIvE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAM,EAAEC,EAAE,EAAEC,iBAAiB,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGJ;IAE9D,MAAMK,aAAaF,kBAAkB,UAAUC,cAAcE,kBAAkBN,SAASO,iBAAiBP;IAEzG,OAAOE,kCACL,KAACL;QAAaI,IAAIA;kBACfI;OADwBJ,MAI3BI;AAEJ,EAAE;AAEF,MAAME,mBAAmB,CAACP;IACxBF,YAA6BE;IAE7B,qBACE,MAACA,MAAMQ,IAAI;;0BACT,MAACR,MAAMS,aAAa;;oBACjBT,MAAMU,KAAK,IAAI,CAACV,MAAMW,SAAS,kBAAI,KAACX,MAAMU,KAAK;kCAChD,KAACV,MAAMY,OAAO;oBACbZ,MAAMa,QAAQ,kBAAI,KAACb,MAAMa,QAAQ;;;0BAEpC,KAACb,MAAMc,aAAa;0BAClB,cAAA,KAACd,MAAMe,WAAW;;;;AAI1B;AAEA,MAAMT,oBAAoB,CAACN;IACzBF,YAA6BE;IAE7B,qBACE,KAACA,MAAMQ,IAAI;kBACT,cAAA,MAACR,MAAMc,aAAa;;gBACjBd,MAAMU,KAAK,IAAI,CAACV,MAAMW,SAAS,kBAAI,KAACX,MAAMU,KAAK;8BAChD,KAACV,MAAMY,OAAO;gBACbZ,MAAMa,QAAQ,kBAAI,KAACb,MAAMa,QAAQ;8BAClC,KAACb,MAAMe,WAAW;;;;AAI1B"}

package/lib/components/Attachment/useAttachment.js

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';
+import { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';
+import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
+import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';
+/**
+ * Create the state required to render Attachment.
+ *
+ * The returned state can be modified with hooks such as useAttachmentStyles_unstable,
+ * before being passed to renderAttachment_unstable.
+ *
+ * @param props - props from this instance of Attachment
+ * @param ref - reference to root HTMLElement of Attachment
+ */ export const useAttachment_unstable = (props, ref)=>{
+    const { children, imageOnly, size = 'medium', dismissOnly = false } = props;
+    const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable((context)=>context);
+    const attachmentId = useId('attachment-', props.id);
+    const isLoading = !!props.progress;
+    const mode = useCopilotMode(props.mode);
+    const designVersion = useDesignVersion(props.designVersion);
+    const root = slot.always(getIntrinsicElementProps('div', {
+        ref,
+        ...props,
+        id: attachmentId
+    }, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute
+    [
+        'content'
+    ]), {
+        elementType: 'div'
+    });
+    const primaryAction = slot.always(props.primaryAction, {
+        defaultProps: {
+            as: dismissOnly ? 'span' : undefined
+        },
+        elementType: 'button'
+    });
+    const dismissButton = slot.always(props.dismissButton, {
+        defaultProps: {
+            'aria-label': 'Remove attachment'
+        },
+        elementType: 'button'
+    });
+    dismissButton.onClick = mergeCallbacks(dismissButton.onClick, (ev)=>{
+        onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+            content: children,
+            media,
+            id: attachmentId
+        });
+    });
+    const media = slot.optional(props.media, {
+        elementType: 'span'
+    });
+    const content = slot.always(props.content, {
+        defaultProps: {
+            children: props.children
+        },
+        elementType: 'span'
+    });
+    const dismissIcon = slot.always(props.dismissIcon, {
+        defaultProps: {
+            children: size === 'small' ? /*#__PURE__*/ React.createElement(Dismiss12Regular, null) : /*#__PURE__*/ React.createElement(Dismiss20Regular, null)
+        },
+        elementType: 'span'
+    });
+    const progress = slot.optional(props.progress, {
+        defaultProps: {
+            shape: 'square',
+            thickness: 'large',
+            'aria-labelledby': props.id
+        },
+        elementType: ProgressBar
+    });
+    const state = {
+        id: attachmentId,
+        size,
+        components: {
+            root: 'div',
+            primaryAction: 'button',
+            dismissButton: 'button',
+            media: 'span',
+            content: 'span',
+            dismissIcon: 'span',
+            progress: ProgressBar
+        },
+        root,
+        primaryAction,
+        dismissButton,
+        media,
+        content,
+        dismissIcon,
+        progress,
+        imageOnly,
+        isLoading,
+        shouldUseOverflow,
+        mode,
+        designVersion,
+        dismissOnly
+    };
+    if (state.primaryAction.as === 'span') {
+        state.components.primaryAction = 'span';
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { children, imageOnly, size = 'medium', dismissOnly = false } = props;\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\n\n  const mode = useCopilotMode(props.mode);\n  const designVersion = useDesignVersion(props.designVersion);\n\n  const root = slot.always(\n    getIntrinsicElementProps(\n      'div',\n      {\n        ref,\n        ...props,\n        id: attachmentId,\n      },\n      // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n      ['content'],\n    ),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    defaultProps: { as: dismissOnly ? 'span' : undefined },\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Remove attachment' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n      onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n    },\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: size === 'small' ? <Dismiss12Regular /> : <Dismiss20Regular />,\n    },\n    elementType: 'span',\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  const state: AttachmentState = {\n    id: attachmentId,\n    size,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n      progress: ProgressBar,\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    progress,\n    imageOnly,\n    isLoading,\n    shouldUseOverflow,\n    mode,\n    designVersion,\n    dismissOnly,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["React","ProgressBar","getIntrinsicElementProps","mergeCallbacks","slot","useId","Dismiss12Regular","Dismiss20Regular","useAttachmentListContext_unstable","useCopilotMode","useDesignVersion","useAttachment_unstable","props","ref","children","imageOnly","size","dismissOnly","onAttachmentDismiss","shouldUseOverflow","context","attachmentId","id","isLoading","progress","mode","designVersion","root","always","elementType","primaryAction","defaultProps","as","undefined","dismissButton","onClick","ev","content","media","optional","dismissIcon","shape","thickness","state","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AAChH,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,wBAAwB;AAC3E,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,mCAAmC;AAEpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAEC,cAAc,KAAK,EAAE,GAAGL;IACtE,MAAM,EAAEM,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGX,kCAAkCY,CAAAA,UAAWA;IAChG,MAAMC,eAAehB,MAAM,eAAeO,MAAMU,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACX,MAAMY,QAAQ;IAElC,MAAMC,OAAOhB,eAAeG,MAAMa,IAAI;IACtC,MAAMC,gBAAgBhB,iBAAiBE,MAAMc,aAAa;IAE1D,MAAMC,OAAOvB,KAAKwB,MAAM,CACtB1B,yBACE,OACA;QACEW;QACA,GAAGD,KAAK;QACRU,IAAID;IACN,GACA,qFAAqF;IACrF;QAAC;KAAU,GAEb;QAAEQ,aAAa;IAAM;IAGvB,MAAMC,gBAAgB1B,KAAKwB,MAAM,CAAChB,MAAMkB,aAAa,EAAE;QACrDC,cAAc;YAAEC,IAAIf,cAAc,SAASgB;QAAU;QACrDJ,aAAa;IACf;IAEA,MAAMK,gBAAgB9B,KAAKwB,MAAM,CAAChB,MAAMsB,aAAa,EAAE;QACrDH,cAAc;YAAE,cAAc;QAAoB;QAClDF,aAAa;IACf;IAEAK,cAAcC,OAAO,GAAGhC,eACtB+B,cAAcC,OAAO,EACrB,CAACC;QACClB,gCAAAA,0CAAAA,oBAAsBkB,IAAI;YAAEC,SAASvB;YAAUwB;YAAOhB,IAAID;QAAa;IACzE;IAGF,MAAMiB,QAAQlC,KAAKmC,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QAAET,aAAa;IAAO;IAE/D,MAAMQ,UAAUjC,KAAKwB,MAAM,CAAChB,MAAMyB,OAAO,EAAE;QACzCN,cAAc;YACZjB,UAAUF,MAAME,QAAQ;QAC1B;QACAe,aAAa;IACf;IAEA,MAAMW,cAAcpC,KAAKwB,MAAM,CAAChB,MAAM4B,WAAW,EAAE;QACjDT,cAAc;YACZjB,UAAUE,SAAS,wBAAU,oBAACV,wCAAsB,oBAACC;QACvD;QACAsB,aAAa;IACf;IAEA,MAAML,WAAWpB,KAAKmC,QAAQ,CAAC3B,MAAMY,QAAQ,EAAE;QAC7CO,cAAc;YACZU,OAAO;YACPC,WAAW;YACX,mBAAmB9B,MAAMU,EAAE;QAC7B;QACAO,aAAa5B;IACf;IAEA,MAAM0C,QAAyB;QAC7BrB,IAAID;QACJL;QACA4B,YAAY;YACVjB,MAAM;YACNG,eAAe;YACfI,eAAe;YACfI,OAAO;YACPD,SAAS;YACTG,aAAa;YACbhB,UAAUvB;QACZ;QAEA0B;QACAG;QACAI;QACAI;QACAD;QACAG;QACAhB;QACAT;QACAQ;QACAJ;QACAM;QACAC;QACAT;IACF;IAEA,IAAI0B,MAAMb,aAAa,CAACE,EAAE,KAAK,QAAQ;QACrCW,MAAMC,UAAU,CAACd,aAAa,GAAG;IACnC;IAEA,OAAOa;AACT,EAAE"}

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

@@ -0,0 +1,348 @@
+import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
+export 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',
+  progress: 'fai-Attachment__progress'
+};
+const ATTACHMENT_MAXWIDTH = '180px';
+const SMALL_ATTACHMENT_SIZE = '16px';
+const ATTACHMENT_SIZE = '20px';
+const useRootBaseClassName = __resetStyles("r16wonf3", null, [".r16wonf3{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;position:relative;}"]);
+const buttonBaseStyles = {
+  alignItems: 'center',
+  backgroundColor: tokens.colorSubtleBackground,
+  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+  borderRadius: tokens.borderRadiusMedium,
+  boxSizing: 'border-box',
+  columnGap: tokens.spacingHorizontalSNudge,
+  color: tokens.colorNeutralForeground1,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  flexWrap: 'nowrap',
+  justifyContent: 'center',
+  ...createCustomFocusIndicatorStyle({
+    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+    outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,
+    zIndex: 1
+  }),
+  verticalAlign: 'middle'
+};
+const usePrimaryActionBaseClassName = __resetStyles("r1cypics", "r1zmptn", [".r1cypics{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-right-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".r1cypics[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);z-index:1;}", ".r1zmptn{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-left-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".r1zmptn[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);z-index:1;}"]);
+const usePrimaryActionStyles = __styles({
+  button: {
+    eoavqd: "f8491dx",
+    Jwef8y: "f1t94bn6",
+    Bi91k9c: "fnwyq0v",
+    ecr2s2: "f1wfn5kd",
+    lj723h: "flvvhsy",
+    Bbkh6qg: "fkiggi6",
+    Cnge2b: "f8zknr1"
+  }
+}, {
+  h: [".f8491dx:hover{cursor:pointer;}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}"],
+  a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"],
+  m: [["@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f8zknr1:active{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useDismissButtonBaseClassName = __resetStyles("r10lynrk", "r2f20ug", {
+  r: [".r10lynrk{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-top-right-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);}", ".r10lynrk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);z-index:1;}", ".r10lynrk:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}", ".r10lynrk:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}", ".r2f20ug{align-items:center;background-color:var(--colorSubtleBackground);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-top-left-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);}", ".r2f20ug[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);z-index:1;}", ".r2f20ug:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}", ".r2f20ug:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}"],
+  s: ["@media (forced-colors: active){.r10lynrk:hover{background-color:HighlightText;}.r10lynrk:active{background-color:HighlightText;}}", "@media (forced-colors: active){.r2f20ug:hover{background-color:HighlightText;}.r2f20ug:active{background-color:HighlightText;}}"]
+});
+const useDismissButtonCurrentStyles = __styles({
+  root: {
+    Bpw4n2g: "fgptp6q"
+  }
+}, {
+  h: [".fgptp6q:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}"]
+});
+const useMediaBaseClassName = __resetStyles("r1a4a4my", null, [".r1a4a4my{align-items:center;display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}"]);
+const useContentBaseClassName = __resetStyles("rmt99gk", null, [".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
+const useDismissIconBaseClassName = __resetStyles("r176grtk", null, [".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"]);
+const useDismissIconNextStyles = __styles({
+  dismissOnly: {
+    Bi91k9c: "f139oj5f",
+    lj723h: "f19au66r"
+  }
+}, {
+  h: [".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
+  a: [".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
+});
+const useImageOnlyStyles = __styles({
+  primaryAction: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai"
+  },
+  content: {
+    Bg96gwp: "fez10in"
+  }
+}, {
+  d: [[".f1mk8lai{padding:0;}", {
+    p: -1
+  }], ".fez10in{line-height:0;}"]
+});
+export const useOverflowStyles = __styles({
+  overflow: {
+    B2u0y6b: "f6dzj5z",
+    a9b677: "fly5x3f"
+  }
+}, {
+  d: [".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}"]
+});
+const useSmallStyles = __styles({
+  primaryAction: {
+    B2u0y6b: "fyv37rf",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1o3rc9c"
+  },
+  media: {
+    Be2twd7: "f4ybsrx",
+    Bqenvij: "fd461yt",
+    Bg96gwp: "f104wqfl",
+    a9b677: "fjw5fx7"
+  },
+  content: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  dismissButton: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fnsh2i4",
+    B2u0y6b: "fatynhj",
+    Bf4jedk: "fydhda"
+  },
+  dismissIcon: {
+    Be2twd7: "f4ybsrx",
+    Bqenvij: "fzi9ji0",
+    B2u0y6b: "f11qte0n",
+    Bf4jedk: "fy1a5sw"
+  }
+}, {
+  d: [".fyv37rf{max-width:calc(180px - 16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));}", [".f1o3rc9c{padding:var(--spacingVerticalXXS) var(--spacingHorizontalSNudge) var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);}", {
+    p: -1
+  }], ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f104wqfl{line-height:16px;}", ".fjw5fx7{width:16px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".fnsh2i4{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXXS);}", {
+    p: -1
+  }], ".fatynhj{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}", ".fydhda{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}", ".fzi9ji0{height:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));}", ".f11qte0n{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}", ".fy1a5sw{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}"]
+});
+const usePrimaryActionNextStyles = __styles({
+  root: {
+    Btl43ni: ["f8yange", "f1el4m67"],
+    Beyfa6y: ["fc7yr5o", "fnivh3a"]
+  },
+  canvas: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1nm7172",
+    sshi5w: "f1w5jphr"
+  },
+  sidecar: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1nm7172",
+    sshi5w: "f1nxs5xn"
+  }
+}, {
+  d: [".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1w5jphr{min-height:40px;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1nxs5xn{min-height:32px;}"]
+});
+const useDismissButtonNextStyles = __styles({
+  root: {
+    B7oj6ja: ["f1el4m67", "f8yange"],
+    Bbmb7ep: ["fnivh3a", "fc7yr5o"],
+    Bi91k9c: "f3p8bqa",
+    lj723h: "flvvhsy",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    wvpqe5: ["fjik90z", "fcdblym"]
+  },
+  withPrimary: {
+    Bpw4n2g: "f19lmcbl",
+    B9er7hs: "fem51fo"
+  },
+  canvas: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1nm7172",
+    sshi5w: "f1w5jphr",
+    a9b677: "feqmc2u"
+  },
+  sidecar: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f19d5dog",
+    sshi5w: "f1nxs5xn",
+    a9b677: "f1szoe96"
+  },
+  dismissOnly: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu",
+    a9b677: "fkyq1ak",
+    zhjwy3: ["fjscplz", "f1gn591s"],
+    De3pzq: "f16xq7d1",
+    Jwef8y: "fk4wa99",
+    ecr2s2: "f1iyuj0z"
+  }
+}, {
+  d: [".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".fjik90z{border-left-style:solid;}", ".fcdblym{border-right-style:solid;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1w5jphr{min-height:40px;}", ".feqmc2u{width:40px;}", [".f19d5dog{padding:var(--spacingVerticalNone) var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], ".f1nxs5xn{min-height:32px;}", ".f1szoe96{width:32px;}", [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], ".fkyq1ak{width:unset;}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
+  h: [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".f19lmcbl:hover .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2);}", ".fk4wa99:hover{background-color:var(--colorNeutralBackground3);}"],
+  a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".fem51fo:active .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2Pressed);}", ".f1iyuj0z:active{background-color:var(--colorNeutralBackground3);}"]
+});
+const usePrimaryDismissNextStyles = __styles({
+  sharedStyles: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh",
+    De3pzq: "f16xq7d1"
+  },
+  sharedInteractiveStyles: {
+    Jwef8y: "f1h648pw",
+    ecr2s2: "fwdzr64"
+  }
+}, {
+  d: [[".f3bhgqh{border:none;}", {
+    p: -2
+  }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
+  h: [".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}"],
+  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"]
+});
+const useRootNextStyles = __styles({
+  root: {
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f1bars0k",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu"
+  }
+}, {
+  d: [[".f1bars0k{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }]]
+});
+const useFocusStyles = __styles({
+  primaryActionButton: {
+    B6xbmo0: ["f146y5a9", "f1k2ftg"],
+    kdpuga: ["f1ndz5i7", "f1co4qro"]
+  },
+  dismissButton: {
+    dm238s: ["f1k2ftg", "f146y5a9"],
+    Bw81rd7: ["f1co4qro", "f1ndz5i7"]
+  }
+}, {
+  d: [".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}"]
+});
+/**
+ * Apply styling to the Attachment slots based on the state
+ */
+export const useAttachmentStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseClassName = useRootBaseClassName();
+  const primaryActionBaseClassName = usePrimaryActionBaseClassName();
+  const dismissButtonBaseClassName = useDismissButtonBaseClassName();
+  const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();
+  const mediaBaseClassName = useMediaBaseClassName();
+  const contentBaseClassName = useContentBaseClassName();
+  const dismissIconBaseClassName = useDismissIconBaseClassName();
+  const dismissIconNextStyles = useDismissIconNextStyles();
+  const progressBarStyles = useProgressBarStyles();
+  const primaryActionStyles = usePrimaryActionStyles();
+  const imageOnlyStyles = useImageOnlyStyles();
+  const smallStyles = useSmallStyles();
+  const primaryActionNextStyles = usePrimaryActionNextStyles();
+  const dismissButtonNextStyles = useDismissButtonNextStyles();
+  const primaryDismissNextStyles = usePrimaryDismissNextStyles();
+  const rootNextStyles = useRootNextStyles();
+  const focusStyles = useFocusStyles();
+  const {
+    imageOnly,
+    primaryAction,
+    size,
+    mode,
+    designVersion,
+    dismissOnly
+  } = state;
+  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
+  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryAction.as !== 'span' && !state.isLoading && primaryDismissNextStyles.sharedInteractiveStyles, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], focusStyles.primaryActionButton, state.primaryAction.className);
+  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, designVersion === 'current' && dismissButtonCurrentStyles.root, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryDismissNextStyles.sharedInteractiveStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly, designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary, focusStyles.dismissButton, state.dismissButton.className);
+  if (state.media) {
+    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
+  }
+  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, size === 'small' && smallStyles.content, imageOnly && imageOnlyStyles.content, state.content.className);
+  state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, size === 'small' && smallStyles.dismissIcon, designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly, state.dismissIcon.className);
+  if (state.progress) {
+    state.progress.className = mergeClasses(attachmentClassNames.progress, progressBarStyles.progress, state.progress.className);
+    const bar = slot.optional(state.progress.bar, {
+      elementType: 'div',
+      renderByDefault: true
+    });
+    if (bar) {
+      if (state.progress.value === undefined) {
+        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
+      } else {
+        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
+      }
+      state.progress.bar = bar;
+    }
+  }
+  return state;
+};
+//# sourceMappingURL=useAttachmentStyles.styles.js.map