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

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

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

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

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

@@ -0,0 +1,49 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const attachmentListClassNames = {
+  root: 'fai-AttachmentList',
+  menuList: 'fai-AttachmentList__menuList',
+  menuPopover: 'fai-AttachmentList__menuPopover',
+  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
+};
+const useRootBaseClassName = makeResetStyles({
+  columnGap: tokens.spacingHorizontalSNudge,
+  display: 'flex',
+  flexDirection: 'row',
+  flexShrink: 0,
+  flexWrap: 'wrap',
+  rowGap: tokens.spacingVerticalXS
+});
+const useOverflowMenuButtonBaseClassName = makeResetStyles({
+  display: 'inline-flex'
+});
+const useOverflowMenuPopoverNextStyles = makeStyles({
+  borderRadius: {
+    borderRadius: tokens.borderRadius4XL
+  }
+});
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */
+export const useAttachmentListStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseClassName = useRootBaseClassName();
+  const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
+  const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();
+  const {
+    designVersion
+  } = state;
+  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+  if (state.menuList) {
+    state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);
+  }
+  if (state.menuPopover) {
+    state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius, state.menuPopover.className);
+  }
+  if (state.overflowMenuButton) {
+    state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useAttachmentListStyles.styles.raw.js.map

package/lib/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":["makeResetStyles","makeStyles","mergeClasses","tokens","attachmentListClassNames","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useOverflowMenuPopoverNextStyles","borderRadius","borderRadius4XL","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","overflowMenuPopoverNextStyles","designVersion","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,WAAWP,OAAOQ,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQb,OAAOc,iBAAiB;AAClC;AAEA,MAAMC,qCAAqClB,gBAAgB;IACzDY,SAAS;AACX;AAEA,MAAMO,mCAAmClB,WAAW;IAClDmB,cAAc;QACZA,cAAcjB,OAAOkB,eAAe;IACtC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBf;IAC1B,MAAMgB,8BAA8BP;IACpC,MAAMQ,gCAAgCP;IACtC,MAAM,EAAEQ,aAAa,EAAE,GAAGJ;IAE1BA,MAAMlB,IAAI,CAACuB,SAAS,GAAG1B,aAAaE,yBAAyBC,IAAI,EAAEmB,mBAAmBD,MAAMlB,IAAI,CAACuB,SAAS;IAE1G,IAAIL,MAAMjB,QAAQ,EAAE;QAClBiB,MAAMjB,QAAQ,CAACsB,SAAS,GAAG1B,aAAaE,yBAAyBE,QAAQ,EAAEiB,MAAMjB,QAAQ,CAACsB,SAAS;IACrG;IACA,IAAIL,MAAMhB,WAAW,EAAE;QACrBgB,MAAMhB,WAAW,CAACqB,SAAS,GAAG1B,aAC5BE,yBAAyBG,WAAW,EACpCoB,kBAAkB,UAAUD,8BAA8BN,YAAY,EACtEG,MAAMhB,WAAW,CAACqB,SAAS;IAE/B;IAEA,IAAIL,MAAMf,kBAAkB,EAAE;QAC5Be,MAAMf,kBAAkB,CAACoB,SAAS,GAAG1B,aACnCE,yBAAyBI,kBAAkB,EAC3CiB,6BACAF,MAAMf,kBAAkB,CAACoB,SAAS;IAEtC;IAEA,OAAOL;AACT,EAAE"}

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

@@ -0,0 +1,109 @@
+import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
+export const attachmentOverflowMenuButtonClassNames = {
+  root: 'fai-AttachmentOverflowMenuButton',
+  progress: 'fai-AttachmentOverflowMenuButton__progress'
+};
+const useRootBaseClassName = makeResetStyles({
+  color: tokens.colorNeutralForeground1,
+  alignItems: 'center',
+  backgroundColor: tokens.colorSubtleBackground,
+  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+  borderRadius: tokens.borderRadiusMedium,
+  boxSizing: 'border-box',
+  columnGap: tokens.spacingHorizontalSNudge,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  flexWrap: 'nowrap',
+  fontFamily: typographyStyles.body1.fontFamily,
+  fontSize: typographyStyles.body1.fontSize,
+  fontWeight: typographyStyles.body1.fontWeight,
+  justifyContent: 'center',
+  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+  verticalAlign: 'middle',
+  position: 'relative',
+  ':hover': {
+    cursor: 'pointer',
+    backgroundColor: tokens.colorSubtleBackgroundHover,
+    color: tokens.colorNeutralForeground2Hover
+  },
+  ':active': {
+    backgroundColor: tokens.colorSubtleBackgroundPressed,
+    color: tokens.colorNeutralForeground2Pressed
+  },
+  '@media (forced-colors: active)': {
+    ':hover': {
+      backgroundColor: 'HighlightText'
+    },
+    ':active': {
+      backgroundColor: 'HighlightText'
+    }
+  }
+});
+const useNextStyles = makeStyles({
+  root: {
+    borderRadius: tokens.borderRadiusXLarge,
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    color: tokens.colorNeutralForeground2,
+    backgroundColor: tokens.colorNeutralBackground3,
+    ':hover': {
+      cursor: 'pointer',
+      color: tokens.colorNeutralForeground2Hover,
+      backgroundColor: tokens.colorNeutralBackground3Hover
+    },
+    ':active': {
+      color: tokens.colorNeutralForeground2Pressed,
+      backgroundColor: tokens.colorNeutralBackground3Pressed
+    }
+  },
+  canvas: {
+    minHeight: '40px',
+    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`
+  },
+  sidecar: {
+    minHeight: '32px',
+    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`
+  },
+  fullyOverflowed_canvas: {
+    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalL}`,
+    ...typographyStyles.subtitle2
+  },
+  fullyOverflowed_sidecar: {
+    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,
+    ...typographyStyles.body1Strong
+  }
+});
+/**
+ * Apply styling to the AttachmentOverflowMenuButton slots based on the state
+ */
+export const useAttachmentOverflowMenuButtonStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    designVersion,
+    mode,
+    fullyOverflowed
+  } = state;
+  const rootBaseClassName = useRootBaseClassName();
+  const progressBarStyles = useProgressBarStyles();
+  const nextStyles = useNextStyles();
+  state.root.className = 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 = mergeClasses(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
+    const bar = slot.optional(state.progress.bar, {
+      elementType: 'div',
+      renderByDefault: true
+    });
+    if (bar) {
+      if (state.progress.value === undefined) {
+        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
+      } else {
+        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
+      }
+      state.progress.bar = bar;
+    }
+  }
+  return state;
+};
+//# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.styles.raw.js.map

package/lib/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":["makeResetStyles","makeStyles","mergeClasses","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","borderColor","colorTransparentStroke","colorNeutralForeground2","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","canvas","minHeight","spacingVerticalNone","sidecar","fullyOverflowed_canvas","spacingHorizontalL","subtitle2","fullyOverflowed_sidecar","spacingHorizontalM","body1Strong","useAttachmentOverflowMenuButtonStyles_unstable","state","designVersion","mode","fullyOverflowed","rootBaseClassName","progressBarStyles","nextStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,63 @@
+import { makeStyles, mergeClasses, slot, tokens } from '@fluentui/react-components';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
+export const attachmentOverflowMenuItemClassNames = {
+  root: 'fai-AttachmentOverflowMenuItem',
+  progress: 'fai-AttachmentOverflowMenuItem__progress'
+};
+const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
+const useStyles = makeStyles({
+  imageOnly: {
+    alignItems: 'center'
+  },
+  secondaryContent: {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+const useNextStyles = makeStyles({
+  nextStyles: {
+    [`[${FOCUS_VISIBLE_ATTR}]::after`]: {
+      borderRadius: tokens.borderRadiusXLarge
+    },
+    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
+  }
+});
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */
+export const useAttachmentOverflowMenuItemStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    imageOnly,
+    designVersion
+  } = state;
+  const styles = useStyles();
+  const nextStyles = useNextStyles();
+  const progressBarStyles = useProgressBarStyles();
+  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, designVersion === 'next' && nextStyles.nextStyles, state.root.className);
+  const secondaryContent = slot.optional(state.root.secondaryContent, {
+    elementType: 'span'
+  });
+  if (secondaryContent) {
+    secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);
+    state.root.secondaryContent = secondaryContent;
+  }
+  if (state.progress) {
+    state.progress.className = mergeClasses(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
+    const bar = slot.optional(state.progress.bar, {
+      elementType: 'div',
+      renderByDefault: true
+    });
+    if (bar) {
+      if (state.progress.value === undefined) {
+        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
+      } else {
+        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
+      }
+      state.progress.bar = bar;
+    }
+  }
+  return state;
+};
+//# sourceMappingURL=useAttachmentOverflowMenuItemStyles.styles.raw.js.map

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

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