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

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

@@ -2,316 +2,326 @@ import { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, mergeClas
 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'
+  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'
+  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'
+  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}`
+  ...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'
-            }
-        }
+  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,
+  ...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': {
-        cursor: 'pointer',
-        backgroundColor: tokens.colorSubtleBackgroundHover,
-        color: tokens.colorNeutralForeground2BrandHover
+      backgroundColor: 'HighlightText'
     },
     ':active': {
-        backgroundColor: tokens.colorSubtleBackgroundPressed,
-        color: tokens.colorNeutralForeground2BrandPressed
-    },
-    '@media (forced-colors: active)': {
-        ':hover': {
-            backgroundColor: 'HighlightText'
-        },
-        ':active': {
-            backgroundColor: 'HighlightText'
-        }
+      backgroundColor: 'HighlightText'
     }
+  }
 });
 const useDismissButtonCurrentStyles = makeStyles({
-    root: {
-        ':hover': {
-            [`& .${attachmentClassNames.dismissIcon}`]: {
-                color: tokens.colorBrandForegroundLinkHover
-            }
-        }
+  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
+  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
+  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)`
+  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
-        }
+  dismissOnly: {
+    ':hover': {
+      color: tokens.colorNeutralForeground2BrandHover
+    },
+    ':active': {
+      color: tokens.colorNeutralForeground2BrandPressed
     }
+  }
 });
 const useImageOnlyStyles = makeStyles({
-    primaryAction: {
-        padding: 0
-    },
-    content: {
-        lineHeight: 0
-    }
+  primaryAction: {
+    padding: 0
+  },
+  content: {
+    lineHeight: 0
+  }
 });
 export const useOverflowStyles = makeStyles({
-    overflow: {
-        maxWidth: '100%',
-        width: '100%'
-    }
+  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})`
-    }
+  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'
-    }
+  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'
+  root: {
+    borderTopRightRadius: tokens.borderRadiusXLarge,
+    borderBottomRightRadius: tokens.borderRadiusXLarge,
+    ':hover': {
+      color: tokens.colorNeutralForeground2
     },
-    withPrimary: {
-        ':hover': {
-            [`& .${attachmentClassNames.dismissIcon}`]: {
-                color: tokens.colorNeutralForeground2
-            }
-        },
-        ':active': {
-            [`& .${attachmentClassNames.dismissIcon}`]: {
-                color: tokens.colorNeutralForeground2Pressed
-            }
-        }
+    ':active': {
+      color: tokens.colorNeutralForeground2Pressed
     },
-    canvas: {
-        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,
-        minHeight: '40px',
-        width: '40px'
+    borderLeftColor: tokens.colorNeutralStroke1,
+    borderLeftWidth: tokens.strokeWidthThin,
+    borderLeftStyle: 'solid'
+  },
+  withPrimary: {
+    ':hover': {
+      [`& .${attachmentClassNames.dismissIcon}`]: {
+        color: tokens.colorNeutralForeground2
+      }
     },
-    sidecar: {
-        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,
-        minHeight: '32px',
-        width: '32px'
+    ':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
     },
-    dismissOnly: {
-        borderRadius: tokens.borderRadiusXLarge,
-        width: 'unset',
-        borderLeftColor: tokens.colorTransparentStroke,
-        backgroundColor: tokens.colorNeutralBackground3,
-        ':hover': {
-            backgroundColor: tokens.colorNeutralBackground3
-        },
-        ':active': {
-            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
-        }
+  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
-    }
+  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;
-        }
+ */
+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;
+  }
+  return state;
 };
+//# sourceMappingURL=useAttachmentStyles.styles.raw.js.map

package/lib/components/AttachmentList/AttachmentList.js

@@ -4,11 +4,12 @@ import { renderAttachmentList_unstable } from './renderAttachmentList';
 import { useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';
 import { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';
 import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
-export const AttachmentList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const state = useAttachmentList_unstable(props, ref);
-    const contextValues = useAttachmentListContextValues_unstable(state);
-    useAttachmentListStyles_unstable(state);
-    useCustomStyleHook('useAttachmentListStyles')(state);
-    return renderAttachmentList_unstable(state, contextValues);
+export const AttachmentList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAttachmentList_unstable(props, ref);
+  const contextValues = useAttachmentListContextValues_unstable(state);
+  useAttachmentListStyles_unstable(state);
+  useCustomStyleHook('useAttachmentListStyles')(state);
+  return renderAttachmentList_unstable(state, contextValues);
 });
 AttachmentList.displayName = 'AttachmentList';
+//# sourceMappingURL=AttachmentList.js.map

package/lib/components/AttachmentList/AttachmentList.types.js

@@ -1 +1,2 @@
-export { };
+export {};
+//# sourceMappingURL=AttachmentList.types.js.map

package/lib/components/AttachmentList/index.js

@@ -2,3 +2,4 @@ export { AttachmentList } from './AttachmentList';
 export { renderAttachmentList_unstable } from './renderAttachmentList';
 export { useAttachmentList_unstable } from './useAttachmentList';
 export { attachmentListClassNames, useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';
+//# sourceMappingURL=index.js.map