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

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js

@@ -12,58 +12,66 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
  *
  * @param props - props from this instance of AttachmentOverflowMenuButton
  * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton
- */ export const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
-    const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable((context)=>context);
-    const { numberOfAttachments } = useAttachmentListContext_unstable((context)=>context);
-    const fullyOverflowed = overflowCount >= numberOfAttachments;
-    const isLoading = !!props.isLoading;
-    const designVersion = useDesignVersion(props.designVersion);
-    const mode = useCopilotMode(props.mode);
-    const buttonText = defaultButtonText(props, overflowCount, designVersion, mode, fullyOverflowed);
-    return {
-        components: {
-            root: 'button',
-            progress: ProgressBar
-        },
-        root: slot.always(getIntrinsicElementProps('button', {
-            ref: useMergedRefs(ref, overflowButtonRef),
-            ...props
-        }), {
-            defaultProps: {
-                children: buttonText
-            },
-            elementType: 'button'
-        }),
-        progress: slot.always(props.progress, {
-            defaultProps: {
-                value: undefined,
-                shape: 'square',
-                thickness: 'large',
-                'aria-label': 'Loading'
-            },
-            elementType: ProgressBar
-        }),
-        fullyOverflowed,
-        isOverflowing,
-        overflowCount,
-        isLoading,
-        designVersion,
-        mode
-    };
+ */
+export const useAttachmentOverflowMenuButton_unstable = (props, ref) => {
+  const {
+    isOverflowing,
+    overflowCount,
+    overflowButtonRef
+  } = useAttachmentOverflowMenuContext_unstable(context => context);
+  const {
+    numberOfAttachments
+  } = useAttachmentListContext_unstable(context => context);
+  const fullyOverflowed = overflowCount >= numberOfAttachments;
+  const isLoading = !!props.isLoading;
+  const designVersion = useDesignVersion(props.designVersion);
+  const mode = useCopilotMode(props.mode);
+  const buttonText = defaultButtonText(props, overflowCount, designVersion, mode, fullyOverflowed);
+  return {
+    components: {
+      root: 'button',
+      progress: ProgressBar
+    },
+    root: slot.always(getIntrinsicElementProps('button', {
+      ref: useMergedRefs(ref, overflowButtonRef),
+      ...props
+    }), {
+      defaultProps: {
+        children: buttonText
+      },
+      elementType: 'button'
+    }),
+    progress: slot.always(props.progress, {
+      defaultProps: {
+        value: undefined,
+        shape: 'square',
+        thickness: 'large',
+        'aria-label': 'Loading'
+      },
+      elementType: ProgressBar
+    }),
+    fullyOverflowed,
+    isOverflowing,
+    overflowCount,
+    isLoading,
+    designVersion,
+    mode
+  };
 };
 function defaultButtonText(props, overflowCount, designVersion, copilotMode, fullyOverflowed) {
-    if (props.children) {
-        return props.children;
+  if (props.children) {
+    return props.children;
+  }
+  if (props.text) {
+    if (typeof props.text === 'function') {
+      return props.text(overflowCount);
+    } else {
+      return props.text;
     }
-    if (props.text) {
-        if (typeof props.text === 'function') {
-            return props.text(overflowCount);
-        } else {
-            return props.text;
-        }
-    }
-    if (designVersion === 'next' && fullyOverflowed) {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, copilotMode === 'canvas' ? /*#__PURE__*/ React.createElement(Attach24Regular, null) : /*#__PURE__*/ React.createElement(Attach20Regular, null), overflowCount);
-    }
-    return `+${overflowCount}`;
+  }
+  if (designVersion === 'next' && fullyOverflowed) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, copilotMode === 'canvas' ? /*#__PURE__*/React.createElement(Attach24Regular, null) : /*#__PURE__*/React.createElement(Attach20Regular, null), overflowCount);
+  }
+  return `+${overflowCount}`;
 }
+//# sourceMappingURL=useAttachmentOverflowMenuButton.js.map

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

@@ -2,101 +2,108 @@ import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fl
 import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
 import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
 export const attachmentOverflowMenuButtonClassNames = {
-    root: 'fai-AttachmentOverflowMenuButton',
-    progress: 'fai-AttachmentOverflowMenuButton__progress'
+  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,
+  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',
-    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',
+    backgroundColor: tokens.colorSubtleBackgroundHover,
+    color: tokens.colorNeutralForeground2Hover
+  },
+  ':active': {
+    backgroundColor: tokens.colorSubtleBackgroundPressed,
+    color: tokens.colorNeutralForeground2Pressed
+  },
+  '@media (forced-colors: active)': {
     ':hover': {
-        cursor: 'pointer',
-        backgroundColor: tokens.colorSubtleBackgroundHover,
-        color: tokens.colorNeutralForeground2Hover
+      backgroundColor: 'HighlightText'
     },
     ':active': {
-        backgroundColor: tokens.colorSubtleBackgroundPressed,
-        color: tokens.colorNeutralForeground2Pressed
-    },
-    '@media (forced-colors: active)': {
-        ':hover': {
-            backgroundColor: 'HighlightText'
-        },
-        ':active': {
-            backgroundColor: 'HighlightText'
-        }
+      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
+  root: {
+    borderRadius: tokens.borderRadiusXLarge,
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    color: tokens.colorNeutralForeground2,
+    backgroundColor: tokens.colorNeutralBackground3,
+    ':hover': {
+      cursor: 'pointer',
+      color: tokens.colorNeutralForeground2Hover,
+      backgroundColor: tokens.colorNeutralBackground3Hover
     },
-    fullyOverflowed_sidecar: {
-        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,
-        ...typographyStyles.body1Strong
+    ':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;
-        }
+ */
+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;
+  }
+  return state;
 };
+//# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.styles.raw.js.map

package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.js

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { useAttachmentOverflowMenuItem_unstable } from './useAttachmentOverflowMenuItem';
 import { renderAttachmentOverflowMenuItem_unstable } from './renderAttachmentOverflowMenuItem';
 import { useAttachmentOverflowMenuItemStyles_unstable } from './useAttachmentOverflowMenuItemStyles.styles';
-export const AttachmentOverflowMenuItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const state = useAttachmentOverflowMenuItem_unstable(props, ref);
-    useAttachmentOverflowMenuItemStyles_unstable(state);
-    return renderAttachmentOverflowMenuItem_unstable(state);
+export const AttachmentOverflowMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAttachmentOverflowMenuItem_unstable(props, ref);
+  useAttachmentOverflowMenuItemStyles_unstable(state);
+  return renderAttachmentOverflowMenuItem_unstable(state);
 });
 AttachmentOverflowMenuItem.displayName = 'AttachmentOverflowMenuItem';
+//# sourceMappingURL=AttachmentOverflowMenuItem.js.map

package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js

@@ -1,3 +1,4 @@
 /**
  * State used in rendering AttachmentOverflowMenuItem
- */ export { };
+ */export {};
+//# sourceMappingURL=AttachmentOverflowMenuItem.types.js.map

package/lib/components/AttachmentOverflowMenuItem/index.js

@@ -2,3 +2,4 @@ export { AttachmentOverflowMenuItem } from './AttachmentOverflowMenuItem';
 export { renderAttachmentOverflowMenuItem_unstable } from './renderAttachmentOverflowMenuItem';
 export { useAttachmentOverflowMenuItem_unstable } from './useAttachmentOverflowMenuItem';
 export { attachmentOverflowMenuItemClassNames, useAttachmentOverflowMenuItemStyles_unstable } from './useAttachmentOverflowMenuItemStyles.styles';
+//# sourceMappingURL=index.js.map

package/lib/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js

@@ -1,13 +1,12 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of AttachmentOverflowMenuItem
- */ export const renderAttachmentOverflowMenuItem_unstable = (state)=>{
-    assertSlots(state);
-    return !state.isVisible ? /*#__PURE__*/ _jsxs(state.root, {
-        children: [
-            state.root.children,
-            state.progress && /*#__PURE__*/ _jsx(state.progress, {})
-        ]
-    }) : null;
+ */
+export const renderAttachmentOverflowMenuItem_unstable = state => {
+  assertSlots(state);
+  return !state.isVisible ? /*#__PURE__*/_jsxs(state.root, {
+    children: [state.root.children, state.progress && /*#__PURE__*/_jsx(state.progress, {})]
+  }) : null;
 };
+//# sourceMappingURL=renderAttachmentOverflowMenuItem.js.map

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js

@@ -11,46 +11,54 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
  *
  * @param props - props from this instance of AttachmentOverflowMenuItem
  * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem
- */ export const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
-    'use no memo';
-    const { imageOnly, media } = props;
-    const menuItemId = useId('attachment-', props.id);
-    const isVisible = useIsOverflowItemVisible(menuItemId);
-    const { onAttachmentDismiss } = useAttachmentListContext_unstable((context)=>context);
-    const designVersion = useDesignVersion(props.designVersion);
-    const root = slot.always({
-        ref,
-        icon: media,
-        secondaryContent: /*#__PURE__*/ React.createElement(Dismiss20Regular, null),
-        ...props,
-        id: menuItemId
-    }, {
-        elementType: MenuItem
+ */
+export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
+  'use no memo';
+
+  const {
+    imageOnly,
+    media
+  } = props;
+  const menuItemId = useId('attachment-', props.id);
+  const isVisible = useIsOverflowItemVisible(menuItemId);
+  const {
+    onAttachmentDismiss
+  } = useAttachmentListContext_unstable(context => context);
+  const designVersion = useDesignVersion(props.designVersion);
+  const root = slot.always({
+    ref,
+    icon: media,
+    secondaryContent: /*#__PURE__*/React.createElement(Dismiss20Regular, null),
+    ...props,
+    id: menuItemId
+  }, {
+    elementType: MenuItem
+  });
+  root.onClick = mergeCallbacks(root.onClick, ev => {
+    onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+      content: props.children,
+      media,
+      id: menuItemId
     });
-    root.onClick = mergeCallbacks(root.onClick, (ev)=>{
-        onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
-            content: props.children,
-            media,
-            id: menuItemId
-        });
-    });
-    const progress = slot.optional(props.progress, {
-        defaultProps: {
-            shape: 'square',
-            thickness: 'large',
-            'aria-labelledby': props.id
-        },
-        elementType: ProgressBar
-    });
-    return {
-        components: {
-            root: MenuItem,
-            progress: ProgressBar
-        },
-        root,
-        progress,
-        isVisible,
-        imageOnly,
-        designVersion
-    };
+  });
+  const progress = slot.optional(props.progress, {
+    defaultProps: {
+      shape: 'square',
+      thickness: 'large',
+      'aria-labelledby': props.id
+    },
+    elementType: ProgressBar
+  });
+  return {
+    components: {
+      root: MenuItem,
+      progress: ProgressBar
+    },
+    root,
+    progress,
+    isVisible,
+    imageOnly,
+    designVersion
+  };
 };
+//# sourceMappingURL=useAttachmentOverflowMenuItem.js.map

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

@@ -1,57 +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'
+  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'
-    }
+  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}`
-    }
+  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'
+ */
+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 (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;
-        }
+    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=useAttachmentOverflowMenuItemStyles.styles.raw.js.map

package/lib/components/AttachmentTag/AttachmentTag.js

@@ -6,10 +6,12 @@ import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
 /**
  * @deprecated use new Attachment component exported from \@fluentui-copilot/react-attachments package instead.
  * Deprecated on 4/9/2024.
- */ export const AttachmentTag = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const state = useAttachmentTag_unstable(props, ref);
-    useAttachmentTagStyles_unstable(state);
-    useCustomStyleHook('useAttachmentTagStyles')(state);
-    return renderAttachmentTag_unstable(state);
+ */
+export const AttachmentTag = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAttachmentTag_unstable(props, ref);
+  useAttachmentTagStyles_unstable(state);
+  useCustomStyleHook('useAttachmentTagStyles')(state);
+  return renderAttachmentTag_unstable(state);
 });
 AttachmentTag.displayName = 'AttachmentTag';
+//# sourceMappingURL=AttachmentTag.js.map

package/lib/components/AttachmentTag/AttachmentTag.types.js

@@ -1,3 +1,4 @@
 /**
  * State used in rendering AttachmentTag
- */ export { };
+ */export {};
+//# sourceMappingURL=AttachmentTag.types.js.map

package/lib/components/AttachmentTag/index.js

@@ -2,3 +2,4 @@ export { AttachmentTag } from './AttachmentTag';
 export { renderAttachmentTag_unstable } from './renderAttachmentTag';
 export { useAttachmentTag_unstable } from './useAttachmentTag';
 export { ATTACHMENTTAG_MAXWIDTH, attachmentTagClassNames, useAttachmentTagStyles_unstable, useContentBaseClassName, useIconBaseClassName, useMediaBaseClassName } from './useAttachmentTagStyles.styles';
+//# sourceMappingURL=index.js.map

package/lib/components/AttachmentTag/renderAttachmentTag.js

@@ -1,14 +1,12 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of AttachmentTag
- */ export const renderAttachmentTag_unstable = (state)=>{
-    assertSlots(state);
-    return /*#__PURE__*/ _jsxs(state.root, {
-        children: [
-            state.media && /*#__PURE__*/ _jsx(state.media, {}),
-            /*#__PURE__*/ _jsx(state.content, {}),
-            /*#__PURE__*/ _jsx(state.icon, {})
-        ]
-    });
+ */
+export const renderAttachmentTag_unstable = state => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsxs(state.root, {
+    children: [state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {}), /*#__PURE__*/_jsx(state.icon, {})]
+  });
 };
+//# sourceMappingURL=renderAttachmentTag.js.map