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

package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js

@@ -39,11 +39,16 @@ const useStyles = (0, _reactcomponents.__styles)({
 });
 const useNextStyles = (0, _reactcomponents.__styles)({
     nextStyles: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "fxe958b",
         Dah5zi: 0,
         B1tsrr9: 0,
         qqdqy8: 0,
         Bkh64rk: 0,
-        e3fwne: "f84qbf7",
+        e3fwne: "f8ydpu5",
         Bw0xxkn: 0,
         oeaueh: 0,
         Bpd4iqm: 0,
@@ -52,7 +57,13 @@ const useNextStyles = (0, _reactcomponents.__styles)({
 }, {
     d: [
         [
-            ".f84qbf7[data-fui-focus-visible]::after{border-radius:var(--borderRadiusXLarge);}",
+            ".fxe958b{border-radius:20px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f8ydpu5[data-fui-focus-visible]::after{border-radius:20px;}",
             {
                 p: -1
             }

package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot, tokens } 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';\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    [`[${FOCUS_VISIBLE_ATTR}]::after`]: {\n      borderRadius: tokens.borderRadiusXLarge,\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":["attachmentOverflowMenuItemClassNames","state","root","progress","FOCUS_VISIBLE_ATTR","useStyles","makeStyles","imageOnly","alignItems","secondaryContent","display","d","useNextStyles","borderRadius","outline","qqdqy8","Bkh64rk","e3fwne","oeaueh","Bpd4iqm","Befb4lg","useProgressBarStyles","elementType","renderByDefault","className","mergeClasses","regularProgressBar","designVersion","nextStyles","slot","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,oCAAAA;eAAAA;;IAsDPC,4CAAgB;eAAhBA;;;iCA9DyC;4CACV;AAO9B,MAAMD,uCAAwF;UACnGE;cACAC;AACF;AAEA,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYC,IAAAA,yBAAAA,EAAAA;eAChBC;iBACEC;;sBAEFC;gBACEC;iBACAF;;AAEJ,GAAA;IAEAG,GAAA;QAAMC;QAA2B;KAAA;;sBAExBR,IAAAA,yBAAAA,EAAAA;gBACHS;gBACF;iBACAC;QACFC,QAAA;QACFC,SAAA;QAEAC,QAAA;;QAGAC,QAAO;QAGLC,SAAA;QAEAC,SAAQb;;;OAGR;QAAA;YAAA;YAA0Bc;gBAE1BpB,GAAAA,CAAAA;;SAOA;QAAA;YAAA;YAAoE;oBAClEqB;;SACF;KAAA;;AAMA,MAAIrB,+CAAgBA,CAAAA;;qBAOkDsB,eAAsB;mBAEpFtB;uBACEuB;8BACCH,IAAAA,gDAAA;wBACDG,GAAAA,IAAAA,6BAAYC,EAAAA,qCAA+BC,IAAAA,EAAkBnB,aAAMiB,OAASjB,SAAA,EAAAoB,kBAAA,UAAAC,WAAAA,UAAA,EAAA3B,MAAAC,IAAA,CAAAsB,SAAA;6BAClFK,qBAAA,CAAAC,QAAA,CAAA7B,MAAAC,IAAA,CAAAO,gBAAA,EAAA;qBACAR;;QAEJQ,kBAAA;QAEAA,iBAAOR,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,OAAAA,gBAAAA,EAAAA,iBAAAA,SAAAA;QACPA,MAAAC,IAAA,CAAAO,gBAAA,GAAAA"}
+{"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":["attachmentOverflowMenuItemClassNames","bar","root","progress","FOCUS_VISIBLE_ATTR","useStyles","makeStyles","imageOnly","alignItems","secondaryContent","display","d","useNextStyles","__styles","borderRadius","outline","B7oj6ja","Dimara","Dah5zi","qqdqy8","Bkh64rk","e3fwne","Bw0xxkn","styles","oeaueh","nextStyles","Bpd4iqm","progressBarStyles","state","p","className","mergeClasses","designVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,oCAAAA;eAAAA;;IA+DLC,4CAAK;eAALA;;;iCAxE+B;4CACF;AAQ9B,MAAMD,uCAAwF;UACnGE;cACAC;AACF;AAEA,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYC,IAAAA,yBAAAA,EAAAA;eAChBC;iBACEC;;sBAEFC;gBACEC;iBACAF;;AAEJ,GAAA;IAEAG,GAAA;QAAMC;QAA2B;KAAA;;sBAEfC,IAAAA,yBAAA,EAAA;gBACTT;iBACHU;iBACF;iBACAC;QACFC,SAAA;QACFC,QAAA;QAEAC,QAAA;;QAGAC,QAAO;QAGLC,SAAA;QAEAC,QAAQd;QACRe,SAAMC;QACNC,QAAMC;QACNC,SAAMC;QAENC,SAAM1B;;;OASN;QAAA;YAAA;YAAA;gBACA2B,GAAA,CAAIpB;;;;;YAC+CA;oBACjDmB;;SACF;QAAA;YAAA;YAAA;gBAEAC,GAAA,CAAID;;;;;MAQE3B,+CAAK2B,CAAAA;;oCAKP;UAEFL,SAAAlB;UACFoB,aAAAb;UAEAe,oBAAOC,IAAAA,gDAAAA;IACPA,MAAA1B,IAAA,CAAA4B,SAAA,GAAAC,IAAAA,6BAAA,EAAA/B,qCAAAE,IAAA,EAAAK,aAAAgB,OAAAhB,SAAA,EAAAyB,kBAAA,UAAAP,WAAAA,UAAA,EAAAG,MAAA1B,IAAA,CAAA4B,SAAA"}

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

@@ -0,0 +1,75 @@
+"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, {
+    attachmentOverflowMenuItemClassNames: function() {
+        return attachmentOverflowMenuItemClassNames;
+    },
+    useAttachmentOverflowMenuItemStyles_unstable: function() {
+        return useAttachmentOverflowMenuItemStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _useProgressBarStylesstyles = require("../utils/useProgressBarStyles.styles");
+const _tokens = require("@fluentui-copilot/tokens");
+const attachmentOverflowMenuItemClassNames = {
+    root: 'fai-AttachmentOverflowMenuItem',
+    progress: 'fai-AttachmentOverflowMenuItem__progress'
+};
+const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
+const useStyles = (0, _reactcomponents.makeStyles)({
+    imageOnly: {
+        alignItems: 'center'
+    },
+    secondaryContent: {
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
+const useNextStyles = (0, _reactcomponents.makeStyles)({
+    nextStyles: {
+        borderRadius: '20px',
+        [`[${FOCUS_VISIBLE_ATTR}]::after`]: {
+            borderRadius: '20px'
+        },
+        outline: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke}`
+    }
+});
+const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { imageOnly, designVersion } = state;
+    const styles = useStyles();
+    const nextStyles = useNextStyles();
+    const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, designVersion === 'next' && nextStyles.nextStyles, state.root.className);
+    const secondaryContent = _reactcomponents.slot.optional(state.root.secondaryContent, {
+        elementType: 'span'
+    });
+    if (secondaryContent) {
+        secondaryContent.className = (0, _reactcomponents.mergeClasses)(styles.secondaryContent, secondaryContent.className);
+        state.root.secondaryContent = secondaryContent;
+    }
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
+        const bar = _reactcomponents.slot.optional(state.progress.bar, {
+            elementType: 'div',
+            renderByDefault: true
+        });
+        if (bar) {
+            if (state.progress.value === undefined) {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.indeterminateProgressBar, bar.className);
+            } else {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.regularProgressBar, bar.className);
+            }
+            state.progress.bar = bar;
+        }
+    }
+    return state;
+};

package/lib-commonjs/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":["attachmentOverflowMenuItemClassNames","useAttachmentOverflowMenuItemStyles_unstable","root","progress","FOCUS_VISIBLE_ATTR","useStyles","makeStyles","imageOnly","alignItems","secondaryContent","display","useNextStyles","nextStyles","borderRadius","outline","tokens","strokeWidthThin","colorTransparentStroke","state","designVersion","styles","progressBarStyles","useProgressBarStyles","className","mergeClasses","slot","optional","elementType","bar","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,oCAAAA;eAAAA;;IA8BAC,4CAAAA;eAAAA;;;iCAvCkC;4CACV;wBAMd;AAEhB,MAAMD,uCAAwF;IACnGE,MAAM;IACNC,UAAU;AACZ;AAEA,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYC,IAAAA,2BAAAA,EAAW;IAC3BC,WAAW;QACTC,YAAY;IACd;IACAC,kBAAkB;QAChBC,SAAS;QACTF,YAAY;IACd;AACF;AAEA,MAAMG,gBAAgBL,IAAAA,2BAAAA,EAAW;IAC/BM,YAAY;QACVC,cAAc;QACd,CAAC,CAAC,CAAC,EAAET,mBAAmB,QAAQ,CAAC,CAAC,EAAE;YAClCS,cAAc;QAChB;QACAC,SAAS,CAAC,EAAEC,cAAAA,CAAOC,eAAe,CAAC,OAAO,EAAED,cAAAA,CAAOE,sBAAsB,CAAC,CAAC;IAC7E;AACF;AAKO,MAAMhB,+CAA+C,CAC1DiB;IAEA;IAEA,MAAM,EAAEX,SAAS,EAAEY,aAAa,EAAE,GAAGD;IACrC,MAAME,SAASf;IACf,MAAMO,aAAaD;IACnB,MAAMU,oBAAoBC,IAAAA,gDAAAA;IAE1BJ,MAAMhB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,6BAAAA,EACrBxB,qCAAqCE,IAAI,EACzCK,aAAaa,OAAOb,SAAS,EAC7BY,kBAAkB,UAAUP,WAAWA,UAAU,EACjDM,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,MAAMd,mBAAmBgB,qBAAAA,CAAKC,QAAQ,CAACR,MAAMhB,IAAI,CAACO,gBAAgB,EAAE;QAClEkB,aAAa;IACf;IACA,IAAIlB,kBAAkB;QACpBA,iBAAiBc,SAAS,GAAGC,IAAAA,6BAAAA,EAAaJ,OAAOX,gBAAgB,EAAEA,iBAAiBc,SAAS;QAC7FL,MAAMhB,IAAI,CAACO,gBAAgB,GAAGA;IAChC;IAEA,IAAIS,MAAMf,QAAQ,EAAE;QAClBe,MAAMf,QAAQ,CAACoB,SAAS,GAAGC,IAAAA,6BAAAA,EACzBxB,qCAAqCG,QAAQ,EAC7CkB,kBAAkBlB,QAAQ,EAC1Be,MAAMf,QAAQ,CAACoB,SAAS;QAG1B,MAAMK,MAAMH,qBAAAA,CAAKC,QAAQ,CAACR,MAAMf,QAAQ,CAACyB,GAAG,EAAE;YAAED,aAAa;YAAOE,iBAAiB;QAAK;QAC1F,IAAID,KAAK;YACP,IAAIV,MAAMf,QAAQ,CAAC2B,KAAK,KAAKC,WAAW;gBACtCH,IAAIL,SAAS,GAAGC,IAAAA,6BAAAA,EAAaH,kBAAkBW,wBAAwB,EAAEJ,IAAIL,SAAS;YACxF,OAAO;gBACLK,IAAIL,SAAS,GAAGC,IAAAA,6BAAAA,EAAaH,kBAAkBY,kBAAkB,EAAEL,IAAIL,SAAS;YAClF;YACAL,MAAMf,QAAQ,CAACyB,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOV;AACT"}

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useProgressBarStyles", {
+    enumerable: true,
+    get: function() {
+        return useProgressBarStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const indeterminateProgressBarReducedMotion = {
+    '0%': {
+        opacity: '.2'
+    },
+    '50%': {
+        opacity: '1'
+    },
+    '100%': {
+        opacity: '.2'
+    }
+};
+const useProgressBarStyles = (0, _reactcomponents.makeStyles)({
+    progress: {
+        width: '100%',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '4px',
+        borderBottomLeftRadius: _tokens.tokens.borderRadiusMedium,
+        borderBottomRightRadius: _tokens.tokens.borderRadiusMedium
+    },
+    regularProgressBar: {
+        height: '100%',
+        backgroundImage: `linear-gradient(90deg, ${_tokens.tokens.colorBrandFlair1} 35%, ${_tokens.tokens.colorBrandFlair2} 70%, ${_tokens.tokens.colorBrandFlair3} 92%)`
+    },
+    indeterminateProgressBar: {
+        height: '100%',
+        backgroundColor: _tokens.tokens.colorTransparentBackground,
+        backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${_tokens.tokens.colorBrandFlair1} 35%, ${_tokens.tokens.colorBrandFlair2} 70%, ${_tokens.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-commonjs/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":["useProgressBarStyles","indeterminateProgressBarReducedMotion","opacity","makeStyles","progress","width","position","bottom","left","right","height","borderBottomLeftRadius","tokens","borderRadiusMedium","borderBottomRightRadius","regularProgressBar","backgroundImage","colorBrandFlair1","colorBrandFlair2","colorBrandFlair3","indeterminateProgressBar","backgroundColor","colorTransparentBackground","maxWidth","animationIterationCount","animationDuration","animationName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBaA;;;eAAAA;;;iCAlBc;wBACJ;AAEvB,MAAMC,wCAAwC;IAC5C,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAKO,MAAMF,uBAAuBG,IAAAA,2BAAAA,EAAW;IAC7CC,UAAU;QACRC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,wBAAwBC,cAAAA,CAAOC,kBAAkB;QACjDC,yBAAyBF,cAAAA,CAAOC,kBAAkB;IACpD;IACAE,oBAAoB;QAClBL,QAAQ;QACRM,iBAAiB,CAAC,uBAAuB,EAAEJ,cAAAA,CAAOK,gBAAgB,CAAC,MAAM,EAAEL,cAAAA,CAAOM,gBAAgB,CAAC,MAAM,EAAEN,cAAAA,CAAOO,gBAAgB,CAAC,KAAK,CAAC;IAC3I;IACAC,0BAA0B;QACxBV,QAAQ;QACRW,iBAAiBT,cAAAA,CAAOU,0BAA0B;QAClDN,iBAAiB,CAAC,yCAAyC,EAAEJ,cAAAA,CAAOK,gBAAgB,CAAC,MAAM,EAAEL,cAAAA,CAAOM,gBAAgB,CAAC,MAAM,EAAEN,cAAAA,CAAOO,gBAAgB,CAAC,qBAAqB,CAAC;QAC3K,sDAAsD;YACpDI,UAAU;YACVC,yBAAyB;YACzBC,mBAAmB;YACnBC,eAAezB;QACjB;IACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.0.0-nightly-20250717-0405-eecbae35.1",
+  "version": "0.0.0-nightly-20250723-0404-b6756f49.1",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,9 +12,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "0.0.0-nightly-20250717-0405-eecbae35.1",
-    "@fluentui-copilot/react-utilities": "0.0.0-nightly-20250717-0405-eecbae35.1",
-    "@fluentui-copilot/tokens": "0.0.0-nightly-20250717-0405-eecbae35.1",
+    "@fluentui-copilot/react-provider": "0.0.0-nightly-20250723-0404-b6756f49.1",
+    "@fluentui-copilot/react-utilities": "0.0.0-nightly-20250723-0404-b6756f49.1",
+    "@fluentui-copilot/tokens": "0.0.0-nightly-20250723-0404-b6756f49.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {