@fluentui-copilot/react-attachments 0.12.4 → 0.12.5-hotfix.2

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

@@ -0,0 +1,336 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachmentClassNames: function() {
+        return attachmentClassNames;
+    },
+    useAttachmentStyles_unstable: function() {
+        return useAttachmentStyles_unstable;
+    },
+    useOverflowStyles: function() {
+        return useOverflowStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const _useProgressBarStylesstyles = require("../utils/useProgressBarStyles.styles");
+const attachmentClassNames = {
+    root: 'fai-Attachment',
+    primaryAction: 'fai-Attachment__primaryAction',
+    dismissButton: 'fai-Attachment__dismissButton',
+    media: 'fai-Attachment__media',
+    content: 'fai-Attachment__content',
+    dismissIcon: 'fai-Attachment__dismissIcon',
+    progress: 'fai-Attachment__progress'
+};
+const ATTACHMENT_MAXWIDTH = '180px';
+const SMALL_ATTACHMENT_SIZE = '16px';
+const ATTACHMENT_SIZE = '20px';
+const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    display: 'inline-flex',
+    flexWrap: 'nowrap',
+    verticalAlign: 'middle',
+    boxSizing: 'border-box',
+    width: 'fit-content',
+    alignSelf: 'end',
+    position: 'relative'
+});
+const buttonBaseStyles = {
+    alignItems: 'center',
+    backgroundColor: _tokens.tokens.colorSubtleBackground,
+    border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorNeutralStroke1}`,
+    borderRadius: _tokens.tokens.borderRadiusMedium,
+    boxSizing: 'border-box',
+    columnGap: _tokens.tokens.spacingHorizontalSNudge,
+    color: _tokens.tokens.colorNeutralForeground1,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexWrap: 'nowrap',
+    justifyContent: 'center',
+    ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
+        outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorStrokeFocus2}`,
+        zIndex: 1
+    }),
+    verticalAlign: 'middle'
+};
+const usePrimaryActionBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    ...buttonBaseStyles,
+    borderTopRightRadius: _tokens.tokens.borderRadiusNone,
+    borderBottomRightRadius: _tokens.tokens.borderRadiusNone,
+    borderRightStyle: 'none',
+    maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS} - ${_tokens.tokens.spacingHorizontalXS})`,
+    padding: `${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingHorizontalS} ${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingHorizontalS}`
+});
+const usePrimaryActionStyles = (0, _reactcomponents.makeStyles)({
+    button: {
+        ':hover': {
+            cursor: 'pointer',
+            backgroundColor: _tokens.tokens.colorSubtleBackgroundHover,
+            color: _tokens.tokens.colorNeutralForeground2Hover
+        },
+        ':active': {
+            backgroundColor: _tokens.tokens.colorSubtleBackgroundPressed,
+            color: _tokens.tokens.colorNeutralForeground2Pressed
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: 'HighlightText'
+            },
+            ':active': {
+                backgroundColor: 'HighlightText'
+            }
+        }
+    }
+});
+const useDismissButtonBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    ...buttonBaseStyles,
+    padding: `${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingHorizontalXS} ${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingHorizontalXS}`,
+    maxWidth: `calc(${ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS}) + ${_tokens.tokens.spacingHorizontalXS}`,
+    minWidth: `calc(${ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS}) + ${_tokens.tokens.spacingHorizontalXS}`,
+    // divider:
+    borderLeftColor: _tokens.tokens.colorNeutralStroke1,
+    borderTopLeftRadius: _tokens.tokens.borderRadiusNone,
+    borderBottomLeftRadius: _tokens.tokens.borderRadiusNone,
+    borderTopRightRadius: _tokens.tokens.borderRadiusMedium,
+    borderBottomRightRadius: _tokens.tokens.borderRadiusMedium,
+    ':hover': {
+        cursor: 'pointer',
+        backgroundColor: _tokens.tokens.colorSubtleBackgroundHover,
+        color: _tokens.tokens.colorNeutralForeground2BrandHover
+    },
+    ':active': {
+        backgroundColor: _tokens.tokens.colorSubtleBackgroundPressed,
+        color: _tokens.tokens.colorNeutralForeground2BrandPressed
+    },
+    '@media (forced-colors: active)': {
+        ':hover': {
+            backgroundColor: 'HighlightText'
+        },
+        ':active': {
+            backgroundColor: 'HighlightText'
+        }
+    }
+});
+const useDismissButtonCurrentStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        ':hover': {
+            [`& .${attachmentClassNames.dismissIcon}`]: {
+                color: _tokens.tokens.colorBrandForegroundLinkHover
+            }
+        }
+    }
+});
+const useMediaBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    alignItems: 'center',
+    display: 'inline-flex',
+    fontSize: ATTACHMENT_SIZE,
+    height: ATTACHMENT_SIZE,
+    lineHeight: ATTACHMENT_SIZE,
+    width: ATTACHMENT_SIZE
+});
+const useContentBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    ..._reactcomponents.typographyStyles.body1
+});
+const useDismissIconBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    alignItems: 'center',
+    borderRadius: _tokens.tokens.borderRadiusCircular,
+    border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke}`,
+    boxSizing: 'border-box',
+    color: _tokens.tokens.colorNeutralForeground1,
+    display: 'inline-flex',
+    fontSize: ATTACHMENT_SIZE,
+    height: `calc(${ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingVerticalXXS})`,
+    justifyContent: 'center',
+    maxWidth: `calc(${ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS})`,
+    minWidth: `calc(${ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS})`,
+    padding: `calc(${_tokens.tokens.spacingVerticalXXS} / 2) calc(${_tokens.tokens.spacingHorizontalXXS} / 2)`
+});
+const useDismissIconNextStyles = (0, _reactcomponents.makeStyles)({
+    dismissOnly: {
+        ':hover': {
+            color: _tokens.tokens.colorNeutralForeground2BrandHover
+        },
+        ':active': {
+            color: _tokens.tokens.colorNeutralForeground2BrandPressed
+        }
+    }
+});
+const useImageOnlyStyles = (0, _reactcomponents.makeStyles)({
+    primaryAction: {
+        padding: 0
+    },
+    content: {
+        lineHeight: 0
+    }
+});
+const useOverflowStyles = (0, _reactcomponents.makeStyles)({
+    overflow: {
+        maxWidth: '100%',
+        width: '100%'
+    }
+});
+const useSmallStyles = (0, _reactcomponents.makeStyles)({
+    primaryAction: {
+        maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS} - ${_tokens.tokens.spacingHorizontalXS})`,
+        padding: `${_tokens.tokens.spacingVerticalXXS} ${_tokens.tokens.spacingHorizontalSNudge} ${_tokens.tokens.spacingVerticalXXS} ${_tokens.tokens.spacingHorizontalSNudge}`
+    },
+    media: {
+        fontSize: SMALL_ATTACHMENT_SIZE,
+        height: SMALL_ATTACHMENT_SIZE,
+        lineHeight: SMALL_ATTACHMENT_SIZE,
+        width: SMALL_ATTACHMENT_SIZE
+    },
+    content: {
+        ..._reactcomponents.typographyStyles.caption1
+    },
+    dismissButton: {
+        padding: `${_tokens.tokens.spacingVerticalXXS} ${_tokens.tokens.spacingHorizontalXXS}`,
+        maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS}) + ${_tokens.tokens.spacingHorizontalXS}`,
+        minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS}) + ${_tokens.tokens.spacingHorizontalXS}`
+    },
+    dismissIcon: {
+        fontSize: SMALL_ATTACHMENT_SIZE,
+        height: `calc(${SMALL_ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingVerticalXXS})`,
+        maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS})`,
+        minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${_tokens.tokens.strokeWidthThin} * 2 + ${_tokens.tokens.spacingHorizontalXXS})`
+    }
+});
+const usePrimaryActionNextStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        borderTopLeftRadius: _tokens.tokens.borderRadiusXLarge,
+        borderBottomLeftRadius: _tokens.tokens.borderRadiusXLarge
+    },
+    canvas: {
+        padding: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalS}`,
+        minHeight: '40px'
+    },
+    sidecar: {
+        padding: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalS}`,
+        minHeight: '32px'
+    }
+});
+const useDismissButtonNextStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        borderTopRightRadius: _tokens.tokens.borderRadiusXLarge,
+        borderBottomRightRadius: _tokens.tokens.borderRadiusXLarge,
+        ':hover': {
+            color: _tokens.tokens.colorNeutralForeground2
+        },
+        ':active': {
+            color: _tokens.tokens.colorNeutralForeground2Pressed
+        },
+        borderLeftColor: _tokens.tokens.colorNeutralStroke1,
+        borderLeftWidth: _tokens.tokens.strokeWidthThin,
+        borderLeftStyle: 'solid'
+    },
+    withPrimary: {
+        ':hover': {
+            [`& .${attachmentClassNames.dismissIcon}`]: {
+                color: _tokens.tokens.colorNeutralForeground2
+            }
+        },
+        ':active': {
+            [`& .${attachmentClassNames.dismissIcon}`]: {
+                color: _tokens.tokens.colorNeutralForeground2Pressed
+            }
+        }
+    },
+    canvas: {
+        padding: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalS}`,
+        minHeight: '40px',
+        width: '40px'
+    },
+    sidecar: {
+        padding: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalMNudge}`,
+        minHeight: '32px',
+        width: '32px'
+    },
+    dismissOnly: {
+        borderRadius: _tokens.tokens.borderRadiusXLarge,
+        width: 'unset',
+        borderLeftColor: _tokens.tokens.colorTransparentStroke,
+        backgroundColor: _tokens.tokens.colorNeutralBackground3,
+        ':hover': {
+            backgroundColor: _tokens.tokens.colorNeutralBackground3
+        },
+        ':active': {
+            backgroundColor: _tokens.tokens.colorNeutralBackground3
+        }
+    }
+});
+const usePrimaryDismissNextStyles = (0, _reactcomponents.makeStyles)({
+    sharedStyles: {
+        border: 'none',
+        backgroundColor: _tokens.tokens.colorNeutralBackground3,
+        ':hover': {
+            backgroundColor: _tokens.tokens.colorNeutralBackground3Hover
+        },
+        ':active': {
+            backgroundColor: _tokens.tokens.colorNeutralBackground3Pressed
+        },
+        ':focus-visible': {
+            borderRadius: _tokens.tokens.borderRadiusLarge
+        }
+    }
+});
+const useRootNextStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        outline: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke}`,
+        borderRadius: _tokens.tokens.borderRadiusXLarge
+    }
+});
+const useAttachmentStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const primaryActionBaseClassName = usePrimaryActionBaseClassName();
+    const dismissButtonBaseClassName = useDismissButtonBaseClassName();
+    const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();
+    const mediaBaseClassName = useMediaBaseClassName();
+    const contentBaseClassName = useContentBaseClassName();
+    const dismissIconBaseClassName = useDismissIconBaseClassName();
+    const dismissIconNextStyles = useDismissIconNextStyles();
+    const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
+    const primaryActionStyles = usePrimaryActionStyles();
+    const imageOnlyStyles = useImageOnlyStyles();
+    const smallStyles = useSmallStyles();
+    const primaryActionNextStyles = usePrimaryActionNextStyles();
+    const dismissButtonNextStyles = useDismissButtonNextStyles();
+    const primaryDismissNextStyles = usePrimaryDismissNextStyles();
+    const rootNextStyles = useRootNextStyles();
+    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);
+    if (state.media) {
+        state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
+    }
+    state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, size === 'small' && smallStyles.content, imageOnly && imageOnlyStyles.content, state.content.className);
+    state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissIcon, dismissIconBaseClassName, size === 'small' && smallStyles.dismissIcon, designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly, state.dismissIcon.className);
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.progress, progressBarStyles.progress, state.progress.className);
+        const bar = _reactcomponents.slot.optional(state.progress.bar, {
+            elementType: 'div',
+            renderByDefault: true
+        });
+        if (bar) {
+            if (state.progress.value === undefined) {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.indeterminateProgressBar, bar.className);
+            } else {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.regularProgressBar, bar.className);
+            }
+            state.progress.bar = bar;
+        }
+    }
+    return state;
+}; //# sourceMappingURL=useAttachmentStyles.styles.raw.js.map

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

@@ -0,0 +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","dismissButtonBaseClassName","primaryActionBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","dismissIconBaseClassName","contentBaseClassName","dismissIconNextStyles","useProgressBarStyles","progressBarStyles","primaryActionStyles","imageOnlyStyles","primaryActionNextStyles","smallStyles","dismissButtonNextStyles","primaryDismissNextStyles","mode","className","mergeClasses","slot","optional","size","as","isLoading","imageOnly","designVersion","elementType","renderByDefault","undefined","bar","indeterminateProgressBar","regularProgressBar","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAaaA,oBAAAA;eAAAA;;IAySXC,4BAAA;eAAAA;;IAhIWC,iBAAAA;eAAAA;;;iCA/KN;wBACgB;4CACc;AAI9B,MAAMF,uBAAwD;UACnEG;mBACAC;mBACAC;WACAC;aACAC;iBACAC;cACAC;AACF;AAEA,MAAMC,sBAAsB;AAC5B,MAAMC,wBAAwB;AAC9B,MAAMC,kBAAkB;AAExB,MAAMC,uBAAuBC,IAAAA,gCAAAA,EAAgB;aAC3CC;cACAC;mBACAC;eACAC;WACAC;eACAC;cACAC;AACF;AAEA,MAAMC,mBAAsC;gBAC1CC;qBACAC,cAAiBC,CAAAA,qBAAOC;YACxBC,CAAAA,EAASF,cAAEA,CAAAA,eAAOG,CAAAA,OAAgB,EAAOH,cAAEA,CAAAA,mBAAOI,CAAAA,CAAmB;kBACrEC,cAAcL,CAAAA,kBAAOM;eACrBb;eACAc,cAAWP,CAAAA,uBAAOQ;WAClBC,cAAOT,CAAAA,uBAAOU;YACdC;aACArB;cACAC;oBACAqB;OACAC,IAAAA,gDAAGA,EAAAA;iBACDC,CAAAA,EAAAA,cAAYd,CAAAA,gBAAOe,CAAAA,OAAiB,EAAAf,cAASA,CAAAA,iBAAOgB,CAAAA,CAAAA;gBACpDC;MACF;mBACAzB;AACF;AAEA,MAAM0B,gCAAgC7B,IAAAA,gCAAAA,EAAgB;OACpDQ,gBAAGA;0BACHsB,cAAsBnB,CAAAA,gBAAOoB;6BAC7BC,cAAyBrB,CAAAA,gBAAOoB;sBAChCE;cACAC,CAAAA,KAAW,EAAKtC,oBAAEA,GAAoB,EAAGE,gBAAEA,GAAgB,EAAGa,cAAEA,CAAAA,eAAOG,CAAAA,OAAgB,EAAOH,cAAEA,CAAAA,oBAAOwB,CAAAA,GAAqB,EAAGxB,cAAEA,CAAAA,mBAAOyB,CAAAA,CAAmB,CAAC;aAC5JC,CAAAA,EAAU1B,cAAEA,CAAAA,iBAAO2B,CAAAA,CAAiB,EAAE3B,cAAEA,CAAAA,kBAAO4B,CAAAA,CAAkB,EAAE5B,cAAEA,CAAAA,iBAAO2B,CAAAA,CAAiB,EAAE3B,cAAEA,CAAAA,kBAAO4B,CAAAA,CAAkB;AAC5H;AAEA,MAAMC,yBAAyBC,IAAAA,2BAAAA,EAAW;YACxCC;kBACE;oBACEpB;6BACAZ,cAAiBC,CAAAA,0BAAOgC;mBACxBvB,cAAOT,CAAAA,4BAAOiC;;mBAEhB;6BACElC,cAAiBC,CAAAA,4BAAOkC;mBACxBzB,cAAOT,CAAAA,8BAAOmC;;0CAEhB;sBACE;iCACEpC;;uBAEF;iCACEA;;;;AAIR;AAEA,MAAMqC,gCAAgC/C,IAAAA,gCAAAA,EAAgB;OACpDQ,gBAAGA;aAEH6B,CAAAA,EAAU1B,cAAEA,CAAAA,iBAAO2B,CAAAA,CAAiB,EAAE3B,cAAEA,CAAAA,mBAAOyB,CAAAA,CAAmB,EAAEzB,cAAEA,CAAAA,iBAAO2B,CAAAA,CAAiB,EAAE3B,cAAEA,CAAAA,mBAAOyB,CAAAA,CAAmB;cAC5HF,CAAAA,KAAW,EAAKpC,gBAAEA,GAAgB,EAAGa,cAAEA,CAAAA,eAAOG,CAAAA,OAAgB,EAAOH,cAAEA,CAAAA,oBAAOwB,CAAAA,IAAqB,EAAIxB,cAAEA,CAAAA,mBAAOyB,CAAAA,CAAmB;cACnIY,CAAAA,KAAW,EAAKlD,gBAAEA,GAAgB,EAAGa,cAAEA,CAAAA,eAAOG,CAAAA,OAAgB,EAAOH,cAAEA,CAAAA,oBAAOwB,CAAAA,IAAqB,EAAIxB,cAAEA,CAAAA,mBAAOyB,CAAAA,CAAmB;eAEnI;qBACAa,cAAiBtC,CAAAA,mBAAOI;yBACxBmC,cAAqBvC,CAAAA,gBAAOoB;4BAC5BoB,cAAwBxC,CAAAA,gBAAOoB;0BAE/BD,cAAsBnB,CAAAA,kBAAOM;6BAC7Be,cAAyBrB,CAAAA,kBAAOM;cAEhC;gBACEK;yBACAZ,cAAiBC,CAAAA,0BAAOgC;eACxBvB,cAAOT,CAAAA,iCAAOyC;;eAEhB;yBACE1C,cAAiBC,CAAAA,4BAAOkC;eACxBzB,cAAOT,CAAAA,mCAAO0C;;sCAEhB;kBACE;6BACE3C;;mBAEF;6BACEA;;;AAGN;AAEA,MAAM4C,gCAAgCb,IAAAA,2BAAAA,EAAW;UAC/CpD;kBACE;mBACGH,qBAAMA,WAAqBQ,CAAAA,CAAAA,CAAAA,EAAAA;qCAC1B0B,CAAAA,6BAAcmC;;;;AAItB;AAEA,MAAMC,wBAAwBxD,IAAAA,gCAAAA,EAAgB;gBAC5CS;aACAR;cACAwD;YACAC;gBACAC;WACAtD;AACF;AAEA,MAAMuD,0BAA0B5D,IAAAA,gCAAAA,EAAgB;eAC9C6D;kBACAC;gBACAC;OACAC,iCAAGA,CAAAA,KAAiBC;AACtB;AAEA,MAAMC,8BAA8BlE,IAAAA,gCAAAA,EAAgB;gBAClDS;kBACAO,cAAcL,CAAAA,oBAAOwD;YACrBtD,CAAAA,EAASF,cAAEA,CAAAA,eAAOG,CAAAA,OAAgB,EAAOH,cAAEA,CAAAA,sBAAOyD,CAAAA,CAAsB;eACxEhE;WACAgB,cAAOT,CAAAA,uBAAOU;aACdpB;cACAwD;YACAC,CAAAA,KAAS,EAAK5D,gBAAEA,GAAgB,EAAGa,cAAEA,CAAAA,eAAOG,CAAAA,OAAgB,EAAOH,cAAEA,CAAAA,kBAAO0D,CAAAA,CAAkB,CAAC;oBAC/F9C;cACAW,CAAAA,KAAW,EAAKpC,gBAAEA,GAAgB,EAAGa,cAAEA,CAAAA,eAAOG,CAAAA,OAAgB,EAAOH,cAAEA,CAAAA,oBAAOwB,CAAAA,CAAoB,CAAC;cACnGa,CAAAA,KAAW,EAAKlD,gBAAEA,GAAgB,EAAGa,cAAEA,CAAAA,eAAOG,CAAAA,OAAgB,EAAOH,cAAEA,CAAAA,oBAAOwB,CAAAA,CAAoB,CAAC;aACnGE,CAAAA,KAAU,EAAK1B,cAAEA,CAAAA,kBAAO0D,CAAAA,WAAmB,EAAW1D,cAAEA,CAAAA,oBAAOwB,CAAAA,KAAqB,CAAA;AACtF;AAEA,MAAMmC,2BAA2B7B,IAAAA,2BAAAA,EAAW;iBAC1C8B;kBACE;mBACEnD,cAAOT,CAAAA,iCAAOyC;;mBAEhB;mBACEhC,cAAOT,CAAAA,mCAAO0C;;;AAGpB;AAEA,MAAMmB,qBAAqB/B,IAAAA,2BAAAA,EAAW;mBACpCnD;iBACE+C;;aAEF5C;oBACEkE;;AAEJ;AAEO,MAAMvE,oBAAoBqD,IAAAA,2BAAAA,EAAW;cAC1CgC;kBACEvC;eACA7B;;AAEJ;AAEA,MAAMqE,iBAAiBjC,IAAAA,2BAAAA,EAAW;mBAChCnD;kBACE4C,CAAAA,KAAW,EAAAtC,oBAAOA,GAAAA,EAAoBC,sBAAKA,GAAAA,EAAsBc,cAAKA,CAAAA,eAAOG,CAAAA,OAAgB,EAAAH,cAASA,CAAAA,oBAAOwB,CAAAA,GAAoB,EAACxB,cAAKA,CAAAA,mBAAOyB,CAAAA,CAAAA,CAAAA;iBAC9IC,CAAAA,EAAAA,cAAY1B,CAAAA,kBAAO0D,CAAAA,CAAAA,EAAkB1D,cAAIA,CAAAA,uBAAOQ,CAAAA,CAAAA,EAAuBR,cAAIA,CAAAA,kBAAO0D,CAAAA,CAAAA,EAAkB1D,cAAIA,CAAAA,uBAAOQ,CAAAA,CAAAA;;WAEjH3B;kBACEiE;gBACAC;oBACAC;eACAtD;;aAEFZ;4CACKuE,CAAAA,QAAiBW;;mBAEtBpF;iBACE8C,CAAAA,EAAAA,cAAY1B,CAAAA,kBAAO0D,CAAAA,CAAAA,EAAkB1D,cAAIA,CAAAA,oBAAOwB,CAAAA,CAAAA;kBAChDD,CAAAA,KAAW,EAAArC,sBAAOA,GAAAA,EAAsBc,cAAKA,CAAAA,eAAOG,CAAAA,OAAgB,EAAAH,cAASA,CAAAA,oBAAOwB,CAAAA,IAAqB,EAAAxB,cAAMA,CAAAA,mBAAOyB,CAAAA,CAAAA;kBACtHY,CAAAA,KAAW,EAAAnD,sBAAOA,GAAAA,EAAsBc,cAAKA,CAAAA,eAAOG,CAAAA,OAAgB,EAAAH,cAASA,CAAAA,oBAAOwB,CAAAA,IAAqB,EAAAxB,cAAMA,CAAAA,mBAAOyB,CAAAA,CAAAA;;iBAExH1C;kBACE+D;gBACAC,CAAAA,KAAS,EAAA7D,sBAAOA,GAAAA,EAAsBc,cAAKA,CAAAA,eAAOG,CAAAA,OAAgB,EAAAH,cAASA,CAAAA,kBAAO0D,CAAAA,CAAAA,CAAAA;kBAClFnC,CAAAA,KAAW,EAAArC,sBAAOA,GAAAA,EAAsBc,cAAKA,CAAAA,eAAOG,CAAAA,OAAgB,EAAAH,cAASA,CAAAA,oBAAOwB,CAAAA,CAAAA,CAAAA;kBACpFa,CAAAA,KAAW,EAAAnD,sBAAOA,GAAAA,EAAsBc,cAAKA,CAAAA,eAAOG,CAAAA,OAAgB,EAAAH,cAASA,CAAAA,oBAAOwB,CAAAA,CAAAA,CAAAA;;AAExF;AAEA,MAAMyC,6BAA6BnC,IAAAA,2BAAAA,EAAW;UAC5CpD;6BACE6D,cAAqBvC,CAAAA,kBAAOkE;gCAC5B1B,cAAwBxC,CAAAA,kBAAOkE;;YAEjCC;iBACEzC,CAAAA,EAAAA,cAAY1B,CAAAA,mBAAOoE,CAAAA,CAAAA,EAAmBpE,cAAIA,CAAAA,kBAAO4B,CAAAA,CAAAA;mBACjDyC;;aAGFC;iBACE5C,CAAAA,EAAAA,cAAY1B,CAAAA,mBAAOoE,CAAAA,CAAAA,EAAmBpE,cAAIA,CAAAA,kBAAO4B,CAAAA,CAAAA;mBACjDyC;;AAEJ;AAEA,MAAME,6BAA6BzC,IAAAA,2BAAAA,EAAW;UAC5CpD;8BACEyC,cAAsBnB,CAAAA,kBAAOkE;iCAC7B7C,cAAyBrB,CAAAA,kBAAOkE;kBAChC;mBACEzD,cAAOT,CAAAA,uBAAOwE;;mBAEhB;mBACE/D,cAAOT,CAAAA,8BAAOmC;;yBAGhBG,cAAiBtC,CAAAA,mBAAOI;yBACxBqE,cAAiBzE,CAAAA,eAAOG;yBACxBuE;;iBAEFC;kBACE;mBACGpG,qBAAMA,WAAqBQ,CAAAA,CAAAA,CAAAA,EAAAA;qCAC1B0B,CAAAA,uBAAc+D;;;mBAGlB;mBACGjG,qBAAMA,WAAqBQ,CAAAA,CAAAA,CAAAA,EAAAA;qCAC1B0B,CAAAA,8BAAc0B;;;;YAIpBgC;iBACEzC,CAAAA,EAAAA,cAAY1B,CAAAA,mBAAOoE,CAAAA,CAAAA,EAAmBpE,cAAIA,CAAAA,kBAAO4B,CAAAA,CAAAA;mBACjDyC;eACA3E;;aAEF4E;iBACE5C,CAAAA,EAAAA,cAAY1B,CAAAA,mBAAOoE,CAAAA,CAAAA,EAAmBpE,cAAIA,CAAAA,uBAAO4E,CAAAA,CAAAA;mBACjDP;eACA3E;;iBAEFkE;sBACEvD,cAAcL,CAAAA,kBAAOkE;eACrBxE;yBACA4C,cAAiBtC,CAAAA,sBAAOyD;yBACxB1D,cAAiBC,CAAAA,uBAAO6E;kBACxB;6BACE9E,cAAiBC,CAAAA,uBAAO6E;;mBAE1B;6BACE9E,cAAiBC,CAAAA,uBAAO6E;;;AAG9B;AAEA,MAAMC,8BAA8BhD,IAAAA,2BAAAA,EAAW;kBAC7CiD;gBACE7E;yBACAH,cAAiBC,CAAAA,uBAAO6E;kBACxB;6BACE9E,cAAiBC,CAAAA,4BAAOgF;;mBAE1B;6BACEjF,cAAiBC,CAAAA,8BAAOiF;;0BAE1B;0BACE5E,cAAcL,CAAAA,iBAAOkF;;;AAG3B;AAEA,MAAMC,oBAAoBrD,IAAAA,2BAAAA,EAAW;UACnCpD;iBACEoC,CAAAA,EAAAA,cAAYd,CAAAA,eAAOG,CAAAA,OAAgB,EAAAH,cAASA,CAAAA,sBAAOyD,CAAAA,CAAAA;sBACnDpD,cAAcL,CAAAA,kBAAOkE;;AAEzB;AAME,MAAA1F,+BAAA4G,CAAAA;;UAIAC,oBAAMC;UACNC,6BAAMC;UACNF,6BAA2BzC;UAC3B2C,6BAA6BvC;UAC7BwC,qBAAMC;UACNC,uBAAMC;UACNF,2BAA0BG;UAC1BD,wBAA4B/D;UAC5BiE,oBAAwBjC,IAAAA,gDAAAA;UACxBkC,sBAAoBhC;UACpBiC,kBAAMC;UACNC,cAAMC;UACNF,0BAAMG;UACND,0BAAuBhB;UACvBiB,2BAAmBzH;UAEnByG,iBAAoBD;UAMpBC,EAWAA,SAAMxG,EAYND,aAAUE,MACRuG,EAMFiB,IAAA,EACAjB,aAAa,EAObA,WAAMrG,KAQNqG;UACEA,IAAAA,CAAAA,SAAc,GAACkB,IAAAA,6BAAYC,EAAAA,qBACzBhI,IAAAA,EAAAA,mBACAuH,kBAAkB9G,UAClBoG,eAAekB,IAAS,EAAAlB,MAAA1G,IAAA,CAAA4H,SAAA;UAG1B3H,aAAY6H,CAAAA,SAAKC,GAASrB,IAAAA,6BAAMpG,EAAAA,qBAAcL,aAAA,EAAA4G,4BAAAmB,SAAA,WAAAR,YAAAvH,aAAA,EAAAA,cAAAgI,EAAA,KAAA,UAAA,CAAAvB,MAAAwB,SAAA,IAAAb,oBAAAhE,MAAA,EAAA8E,aAAAb,gBAAArH,aAAA,EAAAmI,kBAAA,UAAAV,yBAAArB,YAAA,EAAA+B,kBAAA,UAAAb,wBAAAvH,IAAA,EAAAoI,kBAAA,UAAAb,uBAAA,CAAAI,KAAA,EAAAjB,MAAAzG,aAAA,CAAA2H,SAAA;uBAAES,CAAAA,SAAa,GAAAR,IAAAA,6BAAA,EAAAhI,qBAAAK,aAAA,EAAA0G,4BAAAwB,kBAAA,aAAAtB,2BAAA9G,IAAA,EAAAgI,SAAA,WAAAR,YAAAtH,aAAA,EAAAkI,kBAAA,UAAAV,yBAAArB,YAAA,EAAA+B,kBAAA,UAAAX,wBAAAzH,IAAA,EAAAoI,kBAAA,UAAAX,uBAAA,CAAAE,KAAA,EAAAS,kBAAA,UAAAlD,eAAAuC,wBAAAvC,WAAA,EAAAkD,kBAAA,UAAA,CAAAlD,eAAAuC,wBAAAxB,WAAA,EAAAS,MAAAxG,aAAA,CAAA0H,SAAA;cAAOU,KAAAA,EAAAA;cAAsBnI,KAAA,CAAAyH,SAAA,GAAAC,IAAAA,6BAAA,EAAAhI,qBAAAM,KAAA,EAAA4G,oBAAAiB,SAAA,WAAAR,YAAArH,KAAA,EAAAuG,MAAAvG,KAAA,CAAAyH,SAAA;;iBAExF,CAAIlB,SAAMpG,GAAAA,IAAAA,6BAAc,EAAKiI,qBAAWnI,OAAA,EAAA6G,sBAAAe,SAAA,WAAAR,YAAApH,OAAA,EAAA+H,aAAAb,gBAAAlH,OAAA,EAAAsG,MAAAtG,OAAA,CAAAwH,SAAA;qBACtCY,CAAIZ,SAAS,GAAGC,IAAAA,6BAAAA,EAAaT,qBAAkBqB,WAAAA,EAAAA,0BAAuCT,SAAA,WAAAR,YAAAnH,WAAA,EAAA+H,kBAAA,UAAAlD,eAAAgC,sBAAAhC,WAAA,EAAAwB,MAAArG,WAAA,CAAAuH,SAAA;cACxFtH,QAAO,EAAA;sBACLkI,CAAAA,SAAIZ,GAASC,IAAAA,6BAAGA,EAAAA,qBAA+Ba,QAAAA,EAAAA,kBAAwBd,QAAS,EAAAlB,MAAApG,QAAA,CAAAsH,SAAA;oBAClFE,qBAAA,CAAAC,QAAA,CAAArB,MAAApG,QAAA,CAAAkI,GAAA,EAAA;yBACMlI;6BACR;QACF;QAEA,IAAAkI,KAAO9B;YACP,IAAAA,MAAApG,QAAA,CAAAqI,KAAA,KAAAJ,WAAA"}

package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.raw.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachmentListClassNames: function() {
+        return attachmentListClassNames;
+    },
+    useAttachmentListStyles_unstable: function() {
+        return useAttachmentListStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const attachmentListClassNames = {
+    root: 'fai-AttachmentList',
+    menuList: 'fai-AttachmentList__menuList',
+    menuPopover: 'fai-AttachmentList__menuPopover',
+    overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
+};
+const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    columnGap: _tokens.tokens.spacingHorizontalSNudge,
+    display: 'flex',
+    flexDirection: 'row',
+    flexShrink: 0,
+    flexWrap: 'wrap',
+    rowGap: _tokens.tokens.spacingVerticalXS
+});
+const useOverflowMenuButtonBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    display: 'inline-flex'
+});
+const useOverflowMenuPopoverNextStyles = (0, _reactcomponents.makeStyles)({
+    borderRadius: {
+        borderRadius: _tokens.tokens.borderRadius4XL
+    }
+});
+const useAttachmentListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
+    const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();
+    const { designVersion } = state;
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+    if (state.menuList) {
+        state.menuList.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuList, state.menuList.className);
+    }
+    if (state.menuPopover) {
+        state.menuPopover.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuPopover, designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius, state.menuPopover.className);
+    }
+    if (state.overflowMenuButton) {
+        state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
+    }
+    return state;
+}; //# sourceMappingURL=useAttachmentListStyles.styles.raw.js.map

package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n  root: 'fai-AttachmentList',\n  menuList: 'fai-AttachmentList__menuList',\n  menuPopover: 'fai-AttachmentList__menuPopover',\n  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'flex',\n  flexDirection: 'row',\n  flexShrink: 0,\n  flexWrap: 'wrap',\n  rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n});\n\nconst useOverflowMenuPopoverNextStyles = makeStyles({\n  borderRadius: {\n    borderRadius: tokens.borderRadius4XL,\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n  const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();\n  const { designVersion } = state;\n\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.menuList) {\n    state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n  }\n  if (state.menuPopover) {\n    state.menuPopover.className = mergeClasses(\n      attachmentListClassNames.menuPopover,\n      designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius,\n      state.menuPopover.className,\n    );\n  }\n\n  if (state.overflowMenuButton) {\n    state.overflowMenuButton.className = mergeClasses(\n      attachmentListClassNames.overflowMenuButton,\n      overflowMenuButtonClassName,\n      state.overflowMenuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["attachmentListClassNames","useAttachmentListStyles_unstable","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","tokens","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useOverflowMenuPopoverNextStyles","makeStyles","borderRadius","borderRadius4XL","state","rootBaseClassName","overflowMenuPopoverNextStyles","overflowMenuButtonClassName","mergeClasses","className","designVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IA8BXC,gCAAA;eAAAA;;;iCAnCwD;wBACnC;AAIhB,MAAMD,2BAAgE;UAC3EE;cACAC;iBACAC;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,gCAAAA,EAAgB;eAC3CC,cAAWC,CAAAA,uBAAOC;aAClBC;mBACAC;gBACAC;cACAC;YACAC,cAAQN,CAAAA,iBAAOO;AACjB;AAEA,MAAMC,qCAAqCV,IAAAA,gCAAAA,EAAgB;aACzDI;AACF;AAEA,MAAMO,mCAAmCC,IAAAA,2BAAAA,EAAW;kBAClDC;sBACEA,cAAcX,CAAAA,eAAOY;;AAEzB;AAME,MAAApB,mCAAAqB,CAAAA;;UAIAC,oBAAMC;UACNC,8BAA0BH;UAE1BA,gCAAoCtB;UAEhCsB,eACInB,KACRmB;UACIA,IAAAA,CAAAA,SAAMlB,GAAWsB,IAAAA,6BAAE,EAAA1B,yBAAAE,IAAA,EAAAqB,mBAAAD,MAAApB,IAAA,CAAAyB,SAAA;cACrBL,QAAMlB,EAAAA;QAKRkB,MAAAnB,QAAA,CAAAwB,SAAA,GAAAD,IAAAA,6BAAA,EAAA1B,yBAAAG,QAAA,EAAAmB,MAAAnB,QAAA,CAAAwB,SAAA;;cAGEL,WAAMjB,EAAAA;QAKRiB,MAAAlB,WAAA,CAAAuB,SAAA,GAAAD,IAAAA,6BAAA,EAAA1B,yBAAAI,WAAA,EAAAwB,kBAAA,UAAAJ,8BAAAJ,YAAA,EAAAE,MAAAlB,WAAA,CAAAuB,SAAA;;IAGA,IAAAL,MAAAjB,kBAAA,EAAA"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachmentOverflowMenuButtonClassNames: function() {
+        return attachmentOverflowMenuButtonClassNames;
+    },
+    useAttachmentOverflowMenuButtonStyles_unstable: function() {
+        return useAttachmentOverflowMenuButtonStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const _useProgressBarStylesstyles = require("../utils/useProgressBarStyles.styles");
+const attachmentOverflowMenuButtonClassNames = {
+    root: 'fai-AttachmentOverflowMenuButton',
+    progress: 'fai-AttachmentOverflowMenuButton__progress'
+};
+const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    color: _tokens.tokens.colorNeutralForeground1,
+    alignItems: 'center',
+    backgroundColor: _tokens.tokens.colorSubtleBackground,
+    border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorNeutralStroke1}`,
+    borderRadius: _tokens.tokens.borderRadiusMedium,
+    boxSizing: 'border-box',
+    columnGap: _tokens.tokens.spacingHorizontalSNudge,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexWrap: 'nowrap',
+    fontFamily: _tokens.typographyStyles.body1.fontFamily,
+    fontSize: _tokens.typographyStyles.body1.fontSize,
+    fontWeight: _tokens.typographyStyles.body1.fontWeight,
+    justifyContent: 'center',
+    padding: `${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingHorizontalS}`,
+    verticalAlign: 'middle',
+    position: 'relative',
+    ':hover': {
+        cursor: 'pointer',
+        backgroundColor: _tokens.tokens.colorSubtleBackgroundHover,
+        color: _tokens.tokens.colorNeutralForeground2Hover
+    },
+    ':active': {
+        backgroundColor: _tokens.tokens.colorSubtleBackgroundPressed,
+        color: _tokens.tokens.colorNeutralForeground2Pressed
+    },
+    '@media (forced-colors: active)': {
+        ':hover': {
+            backgroundColor: 'HighlightText'
+        },
+        ':active': {
+            backgroundColor: 'HighlightText'
+        }
+    }
+});
+const useNextStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        borderRadius: _tokens.tokens.borderRadiusXLarge,
+        ..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorTransparentStroke),
+        color: _tokens.tokens.colorNeutralForeground2,
+        backgroundColor: _tokens.tokens.colorNeutralBackground3,
+        ':hover': {
+            cursor: 'pointer',
+            color: _tokens.tokens.colorNeutralForeground2Hover,
+            backgroundColor: _tokens.tokens.colorNeutralBackground3Hover
+        },
+        ':active': {
+            color: _tokens.tokens.colorNeutralForeground2Pressed,
+            backgroundColor: _tokens.tokens.colorNeutralBackground3Pressed
+        }
+    },
+    canvas: {
+        minHeight: '40px',
+        padding: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalS}`
+    },
+    sidecar: {
+        minHeight: '32px',
+        padding: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalS}`
+    },
+    fullyOverflowed_canvas: {
+        padding: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalL}`,
+        ..._tokens.typographyStyles.subtitle2
+    },
+    fullyOverflowed_sidecar: {
+        padding: `${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalM}`,
+        ..._tokens.typographyStyles.body1Strong
+    }
+});
+const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { designVersion, mode, fullyOverflowed } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
+    const nextStyles = useNextStyles();
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, designVersion === 'next' && nextStyles[mode], designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`], state.root.className);
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
+        const bar = _reactcomponents.slot.optional(state.progress.bar, {
+            elementType: 'div',
+            renderByDefault: true
+        });
+        if (bar) {
+            if (state.progress.value === undefined) {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.indeterminateProgressBar, bar.className);
+            } else {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.regularProgressBar, bar.className);
+            }
+            state.progress.bar = bar;
+        }
+    }
+    return state;
+}; //# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.styles.raw.js.map

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\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  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\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\nconst useNextStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusXLarge,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n  canvas: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  sidecar: {\n    minHeight: '32px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  fullyOverflowed_canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalL}`,\n    ...typographyStyles.subtitle2,\n  },\n  fullyOverflowed_sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,\n    ...typographyStyles.body1Strong,\n  },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const { designVersion, mode, fullyOverflowed } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    designVersion === 'next' && nextStyles[mode],\n    designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`],\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.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":["attachmentOverflowMenuButtonClassNames","useAttachmentOverflowMenuButtonStyles_unstable","root","progress","useRootBaseClassName","makeResetStyles","color","tokens","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","typographyStyles","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useNextStyles","makeStyles","borderRadiusXLarge","shorthands","borderColor","colorTransparentStroke","colorNeutralForeground2","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","canvas","minHeight","spacingVerticalNone","sidecar","fullyOverflowed_canvas","spacingHorizontalL","subtitle2","fullyOverflowed_sidecar","spacingHorizontalM","body1Strong","state","designVersion","nextStyles","fullyOverflowed","rootBaseClassName","optional","useProgressBarStyles","renderByDefault","className","mergeClasses","mode","bar","value","undefined","progressBarStyles","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}