@fluentui-copilot/react-attachments 0.0.0-nightly-20250717-0405-eecbae35.1 → 0.0.0-nightly-20250723-0404-b6756f49.1

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js

@@ -0,0 +1,59 @@
+import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
+import { tokens } from '@fluentui-copilot/tokens';
+export const attachmentOverflowMenuItemClassNames = {
+    root: 'fai-AttachmentOverflowMenuItem',
+    progress: 'fai-AttachmentOverflowMenuItem__progress'
+};
+const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
+const useStyles = makeStyles({
+    imageOnly: {
+        alignItems: 'center'
+    },
+    secondaryContent: {
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
+const useNextStyles = makeStyles({
+    nextStyles: {
+        borderRadius: '20px',
+        [`[${FOCUS_VISIBLE_ATTR}]::after`]: {
+            borderRadius: '20px'
+        },
+        outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
+    }
+});
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */ export const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { imageOnly, designVersion } = state;
+    const styles = useStyles();
+    const nextStyles = useNextStyles();
+    const progressBarStyles = useProgressBarStyles();
+    state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, designVersion === 'next' && nextStyles.nextStyles, state.root.className);
+    const secondaryContent = slot.optional(state.root.secondaryContent, {
+        elementType: 'span'
+    });
+    if (secondaryContent) {
+        secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);
+        state.root.secondaryContent = secondaryContent;
+    }
+    if (state.progress) {
+        state.progress.className = mergeClasses(attachmentOverflowMenuItemClassNames.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;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n  progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n  secondaryContent: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nconst useNextStyles = makeStyles({\n  nextStyles: {\n    borderRadius: '20px',\n    [`[${FOCUS_VISIBLE_ATTR}]::after`]: {\n      borderRadius: '20px',\n    },\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  'use no memo';\n\n  const { imageOnly, designVersion } = state;\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    designVersion === 'next' && nextStyles.nextStyles,\n    state.root.className,\n  );\n\n  const secondaryContent = slot.optional(state.root.secondaryContent, {\n    elementType: 'span',\n  });\n  if (secondaryContent) {\n    secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);\n    state.root.secondaryContent = secondaryContent;\n  }\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuItemClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","slot","useProgressBarStyles","tokens","attachmentOverflowMenuItemClassNames","root","progress","FOCUS_VISIBLE_ATTR","useStyles","imageOnly","alignItems","secondaryContent","display","useNextStyles","nextStyles","borderRadius","outline","strokeWidthThin","colorTransparentStroke","useAttachmentOverflowMenuItemStyles_unstable","state","designVersion","styles","progressBarStyles","className","optional","elementType","bar","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,QAAQ,uCAAuC;AAM5E,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,YAAY;IACd;IACAC,kBAAkB;QAChBC,SAAS;QACTF,YAAY;IACd;AACF;AAEA,MAAMG,gBAAgBd,WAAW;IAC/Be,YAAY;QACVC,cAAc;QACd,CAAC,CAAC,CAAC,EAAER,mBAAmB,QAAQ,CAAC,CAAC,EAAE;YAClCQ,cAAc;QAChB;QACAC,SAAS,CAAC,EAAEb,OAAOc,eAAe,CAAC,OAAO,EAAEd,OAAOe,sBAAsB,CAAC,CAAC;IAC7E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAM,EAAEX,SAAS,EAAEY,aAAa,EAAE,GAAGD;IACrC,MAAME,SAASd;IACf,MAAMM,aAAaD;IACnB,MAAMU,oBAAoBrB;IAE1BkB,MAAMf,IAAI,CAACmB,SAAS,GAAGxB,aACrBI,qCAAqCC,IAAI,EACzCI,aAAaa,OAAOb,SAAS,EAC7BY,kBAAkB,UAAUP,WAAWA,UAAU,EACjDM,MAAMf,IAAI,CAACmB,SAAS;IAGtB,MAAMb,mBAAmBV,KAAKwB,QAAQ,CAACL,MAAMf,IAAI,CAACM,gBAAgB,EAAE;QAClEe,aAAa;IACf;IACA,IAAIf,kBAAkB;QACpBA,iBAAiBa,SAAS,GAAGxB,aAAasB,OAAOX,gBAAgB,EAAEA,iBAAiBa,SAAS;QAC7FJ,MAAMf,IAAI,CAACM,gBAAgB,GAAGA;IAChC;IAEA,IAAIS,MAAMd,QAAQ,EAAE;QAClBc,MAAMd,QAAQ,CAACkB,SAAS,GAAGxB,aACzBI,qCAAqCE,QAAQ,EAC7CiB,kBAAkBjB,QAAQ,EAC1Bc,MAAMd,QAAQ,CAACkB,SAAS;QAG1B,MAAMG,MAAM1B,KAAKwB,QAAQ,CAACL,MAAMd,QAAQ,CAACqB,GAAG,EAAE;YAAED,aAAa;YAAOE,iBAAiB;QAAK;QAC1F,IAAID,KAAK;YACP,IAAIP,MAAMd,QAAQ,CAACuB,KAAK,KAAKC,WAAW;gBACtCH,IAAIH,SAAS,GAAGxB,aAAauB,kBAAkBQ,wBAAwB,EAAEJ,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,GAAGxB,aAAauB,kBAAkBS,kBAAkB,EAAEL,IAAIH,SAAS;YAClF;YACAJ,MAAMd,QAAQ,CAACqB,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/utils/useProgressBarStyles.styles.raw.js

@@ -0,0 +1,42 @@
+import { makeStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+const indeterminateProgressBarReducedMotion = {
+    '0%': {
+        opacity: '.2'
+    },
+    '50%': {
+        opacity: '1'
+    },
+    '100%': {
+        opacity: '.2'
+    }
+};
+/**
+ * @internal
+ */ export const useProgressBarStyles = makeStyles({
+    progress: {
+        width: '100%',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '4px',
+        borderBottomLeftRadius: tokens.borderRadiusMedium,
+        borderBottomRightRadius: tokens.borderRadiusMedium
+    },
+    regularProgressBar: {
+        height: '100%',
+        backgroundImage: `linear-gradient(90deg, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%)`
+    },
+    indeterminateProgressBar: {
+        height: '100%',
+        backgroundColor: tokens.colorTransparentBackground,
+        backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%,  rgba(0,0,0,0))`,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            maxWidth: '100%',
+            animationIterationCount: 'infinite',
+            animationDuration: '3s',
+            animationName: indeterminateProgressBarReducedMotion
+        }
+    }
+});

package/lib/components/utils/useProgressBarStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useProgressBarStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nconst indeterminateProgressBarReducedMotion = {\n  '0%': {\n    opacity: '.2', // matches indeterminate bar width\n  },\n  '50%': {\n    opacity: '1',\n  },\n  '100%': {\n    opacity: '.2',\n  },\n};\n\n/**\n * @internal\n */\nexport const useProgressBarStyles = makeStyles({\n  progress: {\n    width: '100%',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: '4px',\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n  },\n  regularProgressBar: {\n    height: '100%',\n    backgroundImage: `linear-gradient(90deg, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%)`,\n  },\n  indeterminateProgressBar: {\n    height: '100%',\n    backgroundColor: tokens.colorTransparentBackground,\n    backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%,  rgba(0,0,0,0))`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      maxWidth: '100%',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationName: indeterminateProgressBarReducedMotion,\n    },\n  },\n});\n"],"names":["makeStyles","tokens","indeterminateProgressBarReducedMotion","opacity","useProgressBarStyles","progress","width","position","bottom","left","right","height","borderBottomLeftRadius","borderRadiusMedium","borderBottomRightRadius","regularProgressBar","backgroundImage","colorBrandFlair1","colorBrandFlair2","colorBrandFlair3","indeterminateProgressBar","backgroundColor","colorTransparentBackground","maxWidth","animationIterationCount","animationDuration","animationName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AACxD,SAASC,MAAM,QAAQ,2BAA2B;AAElD,MAAMC,wCAAwC;IAC5C,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uBAAuBJ,WAAW;IAC7CK,UAAU;QACRC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,wBAAwBX,OAAOY,kBAAkB;QACjDC,yBAAyBb,OAAOY,kBAAkB;IACpD;IACAE,oBAAoB;QAClBJ,QAAQ;QACRK,iBAAiB,CAAC,uBAAuB,EAAEf,OAAOgB,gBAAgB,CAAC,MAAM,EAAEhB,OAAOiB,gBAAgB,CAAC,MAAM,EAAEjB,OAAOkB,gBAAgB,CAAC,KAAK,CAAC;IAC3I;IACAC,0BAA0B;QACxBT,QAAQ;QACRU,iBAAiBpB,OAAOqB,0BAA0B;QAClDN,iBAAiB,CAAC,yCAAyC,EAAEf,OAAOgB,gBAAgB,CAAC,MAAM,EAAEhB,OAAOiB,gBAAgB,CAAC,MAAM,EAAEjB,OAAOkB,gBAAgB,CAAC,qBAAqB,CAAC;QAC3K,sDAAsD;YACpDI,UAAU;YACVC,yBAAyB;YACzBC,mBAAmB;YACnBC,eAAexB;QACjB;IACF;AACF,GAAG"}

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

@@ -0,0 +1,82 @@
+"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, {
+    agentTagClassNames: function() {
+        return agentTagClassNames;
+    },
+    useAgentTagStyles_unstable: function() {
+        return useAgentTagStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _ = require("..");
+const _tokens = require("@fluentui-copilot/tokens");
+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 = (0, _reactcomponents.makeStyles)({
+    canvas: {
+        width: '24px',
+        height: '24px'
+    },
+    sidecar: {
+        width: '20px',
+        height: '20px'
+    }
+});
+const useContentStyles = (0, _reactcomponents.makeStyles)({
+    canvas: {
+        ..._tokens.typographyStyles.subtitle2,
+        color: _tokens.tokens.colorNeutralForeground2
+    },
+    sidecar: {
+        ..._tokens.typographyStyles.body1Strong,
+        color: _tokens.tokens.colorNeutralForeground2
+    }
+});
+const useDismissButtonStyles = (0, _reactcomponents.makeStyles)({
+    canvas: {
+        borderRadius: _tokens.tokens.borderRadius2XL,
+        paddingLeft: _tokens.tokens.spacingHorizontalL,
+        paddingRight: _tokens.tokens.spacingHorizontalM
+    },
+    sidecar: {
+        paddingLeft: _tokens.tokens.spacingHorizontalM,
+        paddingRight: _tokens.tokens.spacingHorizontalS,
+        borderRadius: _tokens.tokens.borderRadiusXLarge
+    }
+});
+const useAgentTagStyles_unstable = (state)=>{
+    'use no memo';
+    const { mode } = state;
+    const contentStyles = useContentStyles();
+    const dismissButtonStyles = useDismissButtonStyles();
+    const mediaStyles = useMediaStyles();
+    state.root.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.root, state.root.className);
+    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.primaryAction, state.primaryAction.className);
+    state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.dismissIcon, state.dismissIcon.className);
+    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.dismissButton, dismissButtonStyles[mode], state.dismissButton.className);
+    if (state.media) {
+        state.media.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.media, mediaStyles[mode], state.media.className);
+    }
+    state.content.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.content, contentStyles[mode], state.content.className);
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.progress, state.progress.className);
+    }
+    (0, _.useAttachmentStyles_unstable)(state);
+    return state;
+};

package/lib-commonjs/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":["agentTagClassNames","useAgentTagStyles_unstable","root","primaryAction","dismissIcon","dismissButton","media","content","progress","useMediaStyles","makeStyles","canvas","width","height","sidecar","useContentStyles","typographyStyles","subtitle2","color","tokens","colorNeutralForeground2","body1Strong","useDismissButtonStyles","borderRadius","borderRadius2XL","paddingLeft","spacingHorizontalL","paddingRight","spacingHorizontalM","spacingHorizontalS","borderRadiusXLarge","state","mode","contentStyles","dismissButtonStyles","mediaStyles","className","mergeClasses","useAttachmentStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,kBAAAA;eAAAA;;IA6CAC,0BAAAA;eAAAA;;;iCAnD4B;kBAGI;wBACJ;AAElC,MAAMD,qBAAoD;IAC/DE,MAAM;IACNC,eAAe;IACfC,aAAa;IACbC,eAAe;IACfC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ;AAEA,MAAMC,iBAAiBC,IAAAA,2BAAAA,EAAW;IAChCC,QAAQ;QACNC,OAAO;QACPC,QAAQ;IACV;IACAC,SAAS;QAAEF,OAAO;QAAQC,QAAQ;IAAO;AAC3C;AAEA,MAAME,mBAAmBL,IAAAA,2BAAAA,EAAW;IAClCC,QAAQ;QACN,GAAGK,wBAAAA,CAAiBC,SAAS;QAC7BC,OAAOC,cAAAA,CAAOC,uBAAuB;IACvC;IACAN,SAAS;QACP,GAAGE,wBAAAA,CAAiBK,WAAW;QAC/BH,OAAOC,cAAAA,CAAOC,uBAAuB;IACvC;AACF;AAEA,MAAME,yBAAyBZ,IAAAA,2BAAAA,EAAW;IACxCC,QAAQ;QACNY,cAAcJ,cAAAA,CAAOK,eAAe;QACpCC,aAAaN,cAAAA,CAAOO,kBAAkB;QACtCC,cAAcR,cAAAA,CAAOS,kBAAkB;IACzC;IACAd,SAAS;QACPW,aAAaN,cAAAA,CAAOS,kBAAkB;QACtCD,cAAcR,cAAAA,CAAOU,kBAAkB;QACvCN,cAAcJ,cAAAA,CAAOW,kBAAkB;IACzC;AACF;AAKO,MAAM7B,6BAA6B,CAAC8B;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,gBAAgBlB;IACtB,MAAMmB,sBAAsBZ;IAC5B,MAAMa,cAAc1B;IAEpBsB,MAAM7B,IAAI,CAACkC,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBE,IAAI,EAAE6B,MAAM7B,IAAI,CAACkC,SAAS;IAEjFL,MAAM5B,aAAa,CAACiC,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBG,aAAa,EAAE4B,MAAM5B,aAAa,CAACiC,SAAS;IAE5GL,MAAM3B,WAAW,CAACgC,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBI,WAAW,EAAE2B,MAAM3B,WAAW,CAACgC,SAAS;IAEtGL,MAAM1B,aAAa,CAAC+B,SAAS,GAAGC,IAAAA,6BAAAA,EAC9BrC,mBAAmBK,aAAa,EAChC6B,mBAAmB,CAACF,KAAK,EACzBD,MAAM1B,aAAa,CAAC+B,SAAS;IAG/B,IAAIL,MAAMzB,KAAK,EAAE;QACfyB,MAAMzB,KAAK,CAAC8B,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBM,KAAK,EAAE6B,WAAW,CAACH,KAAK,EAAED,MAAMzB,KAAK,CAAC8B,SAAS;IACzG;IAEAL,MAAMxB,OAAO,CAAC6B,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBO,OAAO,EAAE0B,aAAa,CAACD,KAAK,EAAED,MAAMxB,OAAO,CAAC6B,SAAS;IAE/G,IAAIL,MAAMvB,QAAQ,EAAE;QAClBuB,MAAMvB,QAAQ,CAAC4B,SAAS,GAAGC,IAAAA,6BAAAA,EAAarC,mBAAmBQ,QAAQ,EAAEuB,MAAMvB,QAAQ,CAAC4B,SAAS;IAC/F;IAEAE,IAAAA,8BAAAA,EAA6BP;IAE7B,OAAOA;AACT"}

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

@@ -51,15 +51,16 @@ const buttonBaseStyles = {
     justifyContent: 'center',
     ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
         outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorStrokeFocus2}`,
+        outlineOffset: `calc(${_tokens.tokens.strokeWidthThick} * -1)`,
         zIndex: 1
     }),
     verticalAlign: 'middle'
 };
-const usePrimaryActionBaseClassName = (0, _reactcomponents.__resetStyles)("rjo71rc", "rsix9pn", [
-    ".rjo71rc{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);}",
-    ".rjo71rc[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}",
-    ".rsix9pn{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);}",
-    ".rsix9pn[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"
+const usePrimaryActionBaseClassName = (0, _reactcomponents.__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 = (0, _reactcomponents.__styles)({
     button: {
@@ -96,20 +97,20 @@ const usePrimaryActionStyles = (0, _reactcomponents.__styles)({
         ]
     ]
 });
-const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r1v8xxbh", "ruebrp4", {
+const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r10lynrk", "r2f20ug", {
     r: [
-        ".r1v8xxbh{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);}",
-        ".r1v8xxbh[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}",
-        ".r1v8xxbh:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}",
-        ".r1v8xxbh:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}",
-        ".ruebrp4{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);}",
-        ".ruebrp4[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}",
-        ".ruebrp4:hover{cursor:pointer;background-color:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover);}",
-        ".ruebrp4:active{background-color:var(--colorSubtleBackgroundPressed);color:var(--colorNeutralForeground2BrandPressed);}"
+        ".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){.r1v8xxbh:hover{background-color:HighlightText;}.r1v8xxbh:active{background-color:HighlightText;}}",
-        "@media (forced-colors: active){.ruebrp4:hover{background-color:HighlightText;}.ruebrp4:active{background-color:HighlightText;}}"
+        "@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 = (0, _reactcomponents.__styles)({
@@ -422,14 +423,11 @@ const usePrimaryDismissNextStyles = (0, _reactcomponents.__styles)({
         icvyot: 0,
         B4j52fo: 0,
         irswps: "f3bhgqh",
-        De3pzq: "f16xq7d1",
+        De3pzq: "f16xq7d1"
+    },
+    sharedInteractiveStyles: {
         Jwef8y: "f1h648pw",
-        ecr2s2: "fwdzr64",
-        Bpw7sjs: 0,
-        zppij7: 0,
-        ajd3u1: 0,
-        iqhfy: 0,
-        B7b6voy: "f1c9fnza"
+        ecr2s2: "fwdzr64"
     }
 }, {
     d: [
@@ -446,14 +444,6 @@ const usePrimaryDismissNextStyles = (0, _reactcomponents.__styles)({
     ],
     a: [
         ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"
-    ],
-    i: [
-        [
-            ".f1c9fnza:focus-visible{border-radius:var(--borderRadiusLarge);}",
-            {
-                p: -1
-            }
-        ]
     ]
 });
 const useRootNextStyles = (0, _reactcomponents.__styles)({
@@ -484,6 +474,35 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
         ]
     ]
 });
+const useFocusStyles = (0, _reactcomponents.__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);}"
+    ]
+});
 const useAttachmentStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseClassName = useRootBaseClassName();
@@ -502,10 +521,11 @@ const useAttachmentStyles_unstable = (state)=>{
     const dismissButtonNextStyles = useDismissButtonNextStyles();
     const primaryDismissNextStyles = usePrimaryDismissNextStyles();
     const rootNextStyles = useRootNextStyles();
+    const focusStyles = useFocusStyles();
     const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
-    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
-    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, designVersion === 'current' && dismissButtonCurrentStyles.root, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly, designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary, state.dismissButton.className);
+    state.primaryAction.className = (0, _reactcomponents.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 = (0, _reactcomponents.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 = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  slot,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon',\n  progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n  position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorSubtleBackground,\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    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2BrandHover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useDismissButtonCurrentStyles = makeStyles({\n  root: {\n    ':hover': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorBrandForegroundLinkHover,\n      },\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useDismissIconNextStyles = makeStyles({\n  dismissOnly: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    padding: 0,\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\nexport const useOverflowStyles = makeStyles({\n  overflow: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n});\n\nconst useSmallStyles = makeStyles({\n  primaryAction: {\n    maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n  },\n  media: {\n    fontSize: SMALL_ATTACHMENT_SIZE,\n    height: SMALL_ATTACHMENT_SIZE,\n    lineHeight: SMALL_ATTACHMENT_SIZE,\n    width: SMALL_ATTACHMENT_SIZE,\n  },\n  content: {\n    ...typographyStyles.caption1,\n  },\n  dismissButton: {\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n    maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n    minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  },\n  dismissIcon: {\n    fontSize: SMALL_ATTACHMENT_SIZE,\n    height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n    maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n    minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n  root: {\n    borderTopLeftRadius: tokens.borderRadiusXLarge,\n    borderBottomLeftRadius: tokens.borderRadiusXLarge,\n  },\n  canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '40px',\n  },\n\n  sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '32px',\n  },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n  root: {\n    borderTopRightRadius: tokens.borderRadiusXLarge,\n    borderBottomRightRadius: tokens.borderRadiusXLarge,\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderLeftWidth: tokens.strokeWidthThin,\n    borderLeftStyle: 'solid',\n  },\n  withPrimary: {\n    ':hover': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n    },\n    ':active': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '40px',\n    width: '40px',\n  },\n  sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n    minHeight: '32px',\n    width: '32px',\n  },\n  dismissOnly: {\n    borderRadius: tokens.borderRadiusXLarge,\n    width: 'unset',\n    borderLeftColor: tokens.colorTransparentStroke,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground3,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3,\n    },\n  },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n  sharedStyles: {\n    border: 'none',\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n    ':focus-visible': {\n      borderRadius: tokens.borderRadiusLarge,\n    },\n  },\n});\n\nconst useRootNextStyles = makeStyles({\n  root: {\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n  },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const dismissIconNextStyles = useDismissIconNextStyles();\n  const progressBarStyles = useProgressBarStyles();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const smallStyles = useSmallStyles();\n  const primaryActionNextStyles = usePrimaryActionNextStyles();\n  const dismissButtonNextStyles = useDismissButtonNextStyles();\n  const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n  const rootNextStyles = useRootNextStyles();\n  const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;\n\n  state.root.className = mergeClasses(\n    attachmentClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && rootNextStyles.root,\n    state.root.className,\n  );\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    size === 'small' && smallStyles.primaryAction,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n    designVersion === 'next' && primaryActionNextStyles.root,\n    designVersion === 'next' && primaryActionNextStyles[mode],\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    designVersion === 'current' && dismissButtonCurrentStyles.root,\n    size === 'small' && smallStyles.dismissButton,\n    designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n    designVersion === 'next' && dismissButtonNextStyles.root,\n    designVersion === 'next' && dismissButtonNextStyles[mode],\n    designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\n    designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(\n      attachmentClassNames.media,\n      mediaBaseClassName,\n      size === 'small' && smallStyles.media,\n      state.media.className,\n    );\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    size === 'small' && smallStyles.content,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    size === 'small' && smallStyles.dismissIcon,\n    designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentClassNames","primaryActionNextStyles","usePrimaryActionNextStyles","backgroundColor","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","z8tnut","Bg96gwp","colorNeutralForeground2BrandPressed","p","d","B0ocmuz","fontSize","height","lineHeight","Bahqtrf","useContentBaseClassName","overflowX","textOverflow","whiteSpace","Byoj8tv","useDismissIconBaseClassName","border","dismissOnly","colorNeutralForeground2BrandHover","Btl43ni","Beyfa6y","useImageOnlyStyles","makeStyles","sshi5w","width","uwmqm3","z189sj","useSmallStyles","B7oj6ja","ibv6hh","canvas","sidecar","minHeight","useDismissButtonNextStyles","borderLeftWidth","borderLeftStyle","ecr2s2","colorNeutralForeground2Pressed","oivjwe","Bpw7sjs","zppij7","usePrimaryDismissNextStyles","sharedStyles","useRootNextStyles","Bpd4iqm","Befb4lg","Dimara","rootBaseClassName","useDismissButtonCurrentStyles","primaryActionBaseClassName","state","mergeClasses","className","dismissIconNextStyles","useDismissIconNextStyles","useProgressBarStyles","rootNextStyles","bar","designVersion","dismissButtonBaseClassName","dismissButtonCurrentStyles","size","smallStyles","primaryDismissNextStyles","dismissButtonNextStyles","mode","withPrimary"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  slot,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon',\n  progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n  position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorSubtleBackground,\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    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n    outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2BrandHover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useDismissButtonCurrentStyles = makeStyles({\n  root: {\n    ':hover': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorBrandForegroundLinkHover,\n      },\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useDismissIconNextStyles = makeStyles({\n  dismissOnly: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    padding: 0,\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\nexport const useOverflowStyles = makeStyles({\n  overflow: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n});\n\nconst useSmallStyles = makeStyles({\n  primaryAction: {\n    maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n  },\n  media: {\n    fontSize: SMALL_ATTACHMENT_SIZE,\n    height: SMALL_ATTACHMENT_SIZE,\n    lineHeight: SMALL_ATTACHMENT_SIZE,\n    width: SMALL_ATTACHMENT_SIZE,\n  },\n  content: {\n    ...typographyStyles.caption1,\n  },\n  dismissButton: {\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n    maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n    minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  },\n  dismissIcon: {\n    fontSize: SMALL_ATTACHMENT_SIZE,\n    height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n    maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n    minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n  root: {\n    borderTopLeftRadius: tokens.borderRadiusXLarge,\n    borderBottomLeftRadius: tokens.borderRadiusXLarge,\n  },\n  canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '40px',\n  },\n\n  sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '32px',\n  },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n  root: {\n    borderTopRightRadius: tokens.borderRadiusXLarge,\n    borderBottomRightRadius: tokens.borderRadiusXLarge,\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderLeftWidth: tokens.strokeWidthThin,\n    borderLeftStyle: 'solid',\n  },\n  withPrimary: {\n    ':hover': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n    },\n    ':active': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '40px',\n    width: '40px',\n  },\n  sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n    minHeight: '32px',\n    width: '32px',\n  },\n  dismissOnly: {\n    borderRadius: tokens.borderRadiusXLarge,\n    width: 'unset',\n    borderLeftColor: tokens.colorTransparentStroke,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground3,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3,\n    },\n  },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n  sharedStyles: {\n    border: 'none',\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  sharedInteractiveStyles: {\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n});\n\nconst useRootNextStyles = makeStyles({\n  root: {\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n  },\n});\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: tokens.borderRadiusNone,\n    borderBottomRightRadius: tokens.borderRadiusNone,\n  }),\n\n  dismissButton: createCustomFocusIndicatorStyle({\n    borderTopLeftRadius: tokens.borderRadiusNone,\n    borderBottomLeftRadius: tokens.borderRadiusNone,\n  }),\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const dismissIconNextStyles = useDismissIconNextStyles();\n  const progressBarStyles = useProgressBarStyles();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const smallStyles = useSmallStyles();\n  const primaryActionNextStyles = usePrimaryActionNextStyles();\n  const dismissButtonNextStyles = useDismissButtonNextStyles();\n  const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n  const rootNextStyles = useRootNextStyles();\n  const focusStyles = useFocusStyles();\n  const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;\n\n  state.root.className = mergeClasses(\n    attachmentClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && rootNextStyles.root,\n    state.root.className,\n  );\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    size === 'small' && smallStyles.primaryAction,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n    designVersion === 'next' &&\n      primaryAction.as !== 'span' &&\n      !state.isLoading &&\n      primaryDismissNextStyles.sharedInteractiveStyles,\n    designVersion === 'next' && primaryActionNextStyles.root,\n    designVersion === 'next' && primaryActionNextStyles[mode],\n    focusStyles.primaryActionButton,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    designVersion === 'current' && dismissButtonCurrentStyles.root,\n    size === 'small' && smallStyles.dismissButton,\n    designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n    designVersion === 'next' && primaryDismissNextStyles.sharedInteractiveStyles,\n    designVersion === 'next' && dismissButtonNextStyles.root,\n    designVersion === 'next' && dismissButtonNextStyles[mode],\n    designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\n    designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary,\n    focusStyles.dismissButton,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(\n      attachmentClassNames.media,\n      mediaBaseClassName,\n      size === 'small' && smallStyles.media,\n      state.media.className,\n    );\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    size === 'small' && smallStyles.content,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    size === 'small' && smallStyles.dismissIcon,\n    designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentClassNames","primaryActionStyles","usePrimaryActionStyles","backgroundColor","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","justifyContent","__resetStyles","createCustomFocusIndicatorStyle","outline","outlineOffset","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","__styles","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","z8tnut","Bg96gwp","colorNeutralForeground2BrandPressed","p","d","B0ocmuz","fontSize","height","lineHeight","Bahqtrf","useContentBaseClassName","overflowX","textOverflow","whiteSpace","Byoj8tv","useDismissIconBaseClassName","border","dismissOnly","colorNeutralForeground2BrandHover","Btl43ni","Beyfa6y","useImageOnlyStyles","makeStyles","sshi5w","width","uwmqm3","z189sj","useSmallStyles","B7oj6ja","ibv6hh","canvas","usePrimaryActionNextStyles","sidecar","minHeight","useDismissButtonNextStyles","borderLeftWidth","borderLeftStyle","ecr2s2","colorNeutralForeground2Pressed","oivjwe","Jwef8y","usePrimaryDismissNextStyles","colorNeutralBackground3","sharedInteractiveStyles","oeaueh","Bpd4iqm","Befb4lg","useRootNextStyles","Dimara","useFocusStyles","primaryActionButton","B6xbmo0","dm238s","rootBaseClassName","Bw81rd7","primaryActionBaseClassName","useMediaBaseClassName","primaryActionNextStyles","dismissButtonBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","contentBaseClassName","state","mergeClasses","className","smallStyles","focusStyles","slot","renderByDefault","bar","designVersion","rootNextStyles","size","primaryDismissNextStyles","sharedStyles","dismissButtonNextStyles","mode","withPrimary"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}