npm - @fluentui-copilot/react-attachments - Versions diffs - 0.13.3 → 0.13.5 - Mend

@fluentui-copilot/react-attachments 0.13.3 → 0.13.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

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

	@@ -1 +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":["makeStyles","mergeClasses","slot","~~tokens~~","~~useProgressBarStyles~~","attachmentOverflowMenuItemClassNames","root","progress","FOCUS_VISIBLE_ATTR","useStyles","imageOnly","alignItems","secondaryContent","display","useNextStyles","nextStyles","borderRadius","~~borderRadiusXLarge","~~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,~~EAAEC,MAAM,~~QAAQ,6BAA6B;~~AACpF~~,SAASC,oBAAoB,QAAQ,uCAAuC;~~AAO5E~~,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;~~QACV~~,CAAC,CAAC,CAAC,~~EAAEP~~,mBAAmB,QAAQ,CAAC,CAAC,EAAE;YAClCQ,~~cAAcb,OAAOc,kBAAkB~~;~~QACzC~~;QACAC,SAAS,CAAC,~~EAAEf~~,~~OAAOgB~~,eAAe,CAAC,OAAO,~~EAAEhB~~,~~OAAOiB~~,sBAAsB,CAAC,CAAC;IAC7E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAM,~~EAAEZ~~,SAAS,~~EAAEa~~,aAAa,EAAE,GAAGD;IACrC,MAAME,~~SAASf~~;IACf,MAAMM,aAAaD;IACnB,~~MAAMW~~,oBAAoBrB;IAE1BkB,~~MAAMhB~~,IAAI,~~CAACoB~~,SAAS,~~GAAGzB~~,aACrBI,qCAAqCC,IAAI,EACzCI,~~aAAac~~,~~OAAOd~~,SAAS,~~EAC7Ba~~,kBAAkB,~~UAAUR~~,WAAWA,UAAU,~~EACjDO~~,~~MAAMhB~~,IAAI,~~CAACoB~~,SAAS;IAGtB,~~MAAMd~~,mBAAmBV,~~KAAKyB~~,QAAQ,CAACL,~~MAAMhB~~,IAAI,CAACM,gBAAgB,EAAE;~~QAClEgB~~,aAAa;IACf;IACA,~~IAAIhB~~,kBAAkB;QACpBA,~~iBAAiBc~~,SAAS,~~GAAGzB~~,~~aAAauB~~,~~OAAOZ~~,gBAAgB,EAAEA,~~iBAAiBc~~,SAAS;QAC7FJ,~~MAAMhB~~,IAAI,CAACM,gBAAgB,GAAGA;IAChC;IAEA,~~IAAIU~~,~~MAAMf~~,QAAQ,EAAE;~~QAClBe~~,~~MAAMf~~,QAAQ,~~CAACmB~~,SAAS,~~GAAGzB~~,aACzBI,qCAAqCE,QAAQ,~~EAC7CkB~~,~~kBAAkBlB~~,QAAQ,~~EAC1Be~~,~~MAAMf~~,QAAQ,~~CAACmB~~,SAAS;QAG1B,MAAMG,~~MAAM3B~~,~~KAAKyB~~,QAAQ,CAACL,~~MAAMf~~,QAAQ,~~CAACsB~~,GAAG,EAAE;YAAED,aAAa;YAAOE,iBAAiB;QAAK;QAC1F,IAAID,KAAK;YACP,IAAIP,~~MAAMf~~,QAAQ,~~CAACwB~~,KAAK,KAAKC,WAAW;gBACtCH,IAAIH,SAAS,~~GAAGzB~~,~~aAAawB~~,kBAAkBQ,wBAAwB,EAAEJ,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,~~GAAGzB~~,~~aAAawB~~,kBAAkBS,kBAAkB,EAAEL,IAAIH,SAAS;YAClF;YACAJ,~~MAAMf~~,QAAQ,~~CAACsB~~,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}
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-commonjs/components/Attachment/useAttachmentStyles.styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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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"}

package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.raw.js CHANGED Viewed

@@ -57,6 +57,7 @@ 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'
@@ -272,15 +273,14 @@ const useDismissButtonNextStyles = (0, _reactcomponents.makeStyles)({
 const usePrimaryDismissNextStyles = (0, _reactcomponents.makeStyles)({
     sharedStyles: {
         border: 'none',
-        backgroundColor: _tokens.tokens.colorNeutralBackground3,
+        backgroundColor: _tokens.tokens.colorNeutralBackground3
+    },
+    sharedInteractiveStyles: {
         ':hover': {
             backgroundColor: _tokens.tokens.colorNeutralBackground3Hover
         },
         ':active': {
             backgroundColor: _tokens.tokens.colorNeutralBackground3Pressed
-        },
-        ':focus-visible': {
-            borderRadius: _tokens.tokens.borderRadiusLarge
         }
     }
 });
@@ -290,6 +290,16 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
         borderRadius: _tokens.tokens.borderRadiusXLarge
     }
 });
+const useFocusStyles = (0, _reactcomponents.makeStyles)({
+    primaryActionButton: (0, _reactcomponents.createCustomFocusIndicatorStyle)({
+        borderTopRightRadius: _tokens.tokens.borderRadiusNone,
+        borderBottomRightRadius: _tokens.tokens.borderRadiusNone
+    }),
+    dismissButton: (0, _reactcomponents.createCustomFocusIndicatorStyle)({
+        borderTopLeftRadius: _tokens.tokens.borderRadiusNone,
+        borderBottomLeftRadius: _tokens.tokens.borderRadiusNone
+    })
+});
 const useAttachmentStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseClassName = useRootBaseClassName();
@@ -308,10 +318,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.raw.js.map CHANGED Viewed

	@@ -1 +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","useAttachmentStyles_unstable","useOverflowStyles","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","tokens","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","makeStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useDismissButtonCurrentStyles","colorBrandForegroundLinkHover","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","typographyStyles","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useDismissIconNextStyles","dismissOnly","useImageOnlyStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","withPrimary","spacingHorizontalMNudge","colorNeutralBackground3","usePrimaryDismissNextStyles","sharedStyles","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","borderRadiusLarge","useRootNextStyles","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","dismissIconNextStyles","progressBarStyles","useProgressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","imageOnly","size","mode","designVersion","className","mergeClasses","as","isLoading","bar","slot","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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 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","useAttachmentStyles_unstable","useOverflowStyles","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","tokens","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","makeStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useDismissButtonCurrentStyles","colorBrandForegroundLinkHover","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","typographyStyles","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useDismissIconNextStyles","dismissOnly","useImageOnlyStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","withPrimary","spacingHorizontalMNudge","colorNeutralBackground3","usePrimaryDismissNextStyles","sharedStyles","sharedInteractiveStyles","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","useRootNextStyles","useFocusStyles","primaryActionButton","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","dismissIconNextStyles","progressBarStyles","useProgressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","focusStyles","imageOnly","size","mode","designVersion","className","mergeClasses","as","isLoading","bar","slot","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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","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 CHANGED Viewed

@@ -18,6 +18,7 @@ _export(exports, {
 });
 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'
@@ -34,10 +35,11 @@ const useStyles = (0, _reactcomponents.makeStyles)({
 });
 const useNextStyles = (0, _reactcomponents.makeStyles)({
     nextStyles: {
+        borderRadius: '20px',
         [`[${FOCUS_VISIBLE_ATTR}]::after`]: {
-            borderRadius: _reactcomponents.tokens.borderRadiusXLarge
+            borderRadius: '20px'
         },
-        outline: `${_reactcomponents.tokens.strokeWidthThin} solid ${_reactcomponents.tokens.colorTransparentStroke}`
+        outline: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke}`
     }
 });
 const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{