@fluentui/react-migration-v0-v9 9.6.34 → 9.6.36

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-migration-v0-v9
 
-This log was last generated on Tue, 04 Aug 2026 10:10:10 GMT and should not be manually modified.
+<!-- This log was last generated on Mon, 24 Aug 2026 08:15:11 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.6.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.36)
+
+Mon, 24 Aug 2026 08:15:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.35..@fluentui/react-migration-v0-v9_v9.6.36)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.74.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.6.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.35)
+
+Tue, 11 Aug 2026 17:20:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.34..@fluentui/react-migration-v0-v9_v9.6.35)
+
+### Patches
+
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.14 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-components to v9.74.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.17 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
 ## [9.6.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.34)
 
-Tue, 04 Aug 2026 10:10:10 GMT 
+Tue, 04 Aug 2026 10:12:23 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.33..@fluentui/react-migration-v0-v9_v9.6.34)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,494 @@
+import type { ButtonProps } from '@fluentui/react-components';
+import type { ComponentProps } from '@fluentui/react-components';
+import type { ComponentProps as ComponentProps_2 } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { GriffelStyle } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-utilities';
+import type { JSXIntrinsicElement } from '@fluentui/react-utilities';
+import type { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
+import type { ObjectShorthandValue } from '@fluentui/react-northstar';
+import * as React_2 from 'react';
+import type { SelectionHookParams } from '@fluentui/react-utilities';
+import type { SelectionItemId } from '@fluentui/react-utilities';
+import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-components';
+import type { Slot as Slot_2 } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export declare const Attachment: React_2.ForwardRefExoticComponent<AttachmentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const AttachmentAction: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const attachmentActionClassName = "fui-AttachmentAction";
+
+export declare type AttachmentActionProps = ButtonProps;
+
+export declare const AttachmentBody: React_2.FC<AttachmentBodyProps>;
+
+export declare const attachmentBodyClassName = "fui-AttachmentBody";
+
+export declare interface AttachmentBodyProps extends React_2.HTMLAttributes<HTMLDivElement> {
+}
+
+export declare const attachmentClassName = "fui-Attachment";
+
+export declare const AttachmentDescription: React_2.FC<AttachmentDescriptionProps>;
+
+export declare const attachmentDescriptionClassName = "fui-AttachmentDescription";
+
+export declare interface AttachmentDescriptionProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+}
+
+export declare const AttachmentHeader: React_2.FC<AttachmentHeaderProps>;
+
+export declare const attachmentHeaderClassName = "fui-AttachmentHeader";
+
+export declare interface AttachmentHeaderProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+}
+
+export declare const AttachmentIcon: React_2.FC<AttachmentIconProps>;
+
+export declare const attachmentIconClassName = "fui-AttachmentIcon";
+
+export declare interface AttachmentIconProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+}
+
+export declare const attachmentProgressBarClassName = "fui-Attachment__progress";
+
+export declare const attachmentProgressContainerClassName = "fui-Attachment__progress-container";
+
+export declare interface AttachmentProps extends React_2.HTMLAttributes<HTMLElement> {
+    actionable?: boolean;
+    disabled?: boolean;
+    progress?: string | number;
+    onClick?: (event: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+
+export declare const Flex: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & FlexProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const flexClassName = "fui-Flex";
+
+export declare const flexItem: {
+    align: (value: "auto" | "start" | "end" | "center" | "baseline" | "stretch") => GriffelStyle;
+    size: (value: "half" | "quarter" | "small" | "medium" | "large") => GriffelStyle;
+    grow: (flexGrow: boolean | number) => GriffelStyle | undefined;
+    shrink: (flexShrink: boolean | number) => GriffelStyle | undefined;
+    pushRow: () => GriffelStyle;
+    pushColumn: () => GriffelStyle;
+};
+
+declare interface FlexProps {
+    /** Defines if container should be inline element. */
+    inline?: boolean;
+    /** Sets vertical flow direction. */
+    column?: boolean;
+    /** Allows overflow items to wrap on the next container's line. */
+    wrap?: boolean;
+    /** Controls items alignment in horizontal direction. */
+    hAlign?: 'start' | 'center' | 'end' | 'stretch';
+    /** Controls items alignment in vertical direction. */
+    vAlign?: 'start' | 'center' | 'end' | 'stretch';
+    /** Defines strategy for distributing remaining space between items. */
+    space?: 'around' | 'between' | 'evenly';
+    /** Defines gap between each two adjacent child items. */
+    gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';
+    /** Defines container's padding. */
+    padding?: 'padding.medium';
+    /** Orders container to fill all parent's space available. */
+    fill?: boolean;
+}
+
+export declare const FormFieldShim: React_2.ForwardRefExoticComponent<{
+    /**
+     * Message to be shown when error state is true
+     */
+    errorMessage?: WithContent;
+    /**
+     * Whether the field label should be marked as required.
+     */
+    required?: boolean;
+    /**
+     * Control to be rendered
+     */
+    control?: ObjectShorthandValue<{
+        /**
+         * Control content
+         */
+        content?: React_2.ReactNode;
+    }> & {
+        /**
+         * Error state
+         */
+        error?: "true" | "false";
+    };
+    /**
+     * Label to be rendered
+     */
+    label?: WithContent;
+} & {
+    children?: React_2.ReactNode | undefined;
+} & React_2.RefAttributes<HTMLInputElement>>;
+
+export declare const grid: {
+    columns: (template: string) => GriffelStyle;
+    rows: (template: string) => GriffelStyle;
+};
+
+export declare const gridClassName = "fui-Grid";
+
+export declare const GridShim: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & GridShimProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface GridShimProps {
+    /**
+     * The columns of the grid with a space-separated list of values.
+     * The values represent the track size, and the space between them represents the grid line.
+     */
+    columns?: 1 | 2 | 3;
+    /**
+     * The rows of the grid with a space-separated list of values.
+     * The values represent the track size, and the space between them represents the grid line.
+     */
+    rows?: 1 | 2 | 3;
+}
+
+export declare const input: {
+    error: () => GriffelStyle;
+    errorIndicator: () => GriffelStyle;
+    fluid: () => GriffelStyle;
+    successIndicator: () => GriffelStyle;
+};
+
+export declare const ItemLayout: React_2.ForwardRefExoticComponent<Omit<ItemLayoutSlots, "root"> & Omit<{
+    as?: "div" | undefined;
+} & Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
+    children?: any;
+}, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const itemLayoutClassName = "fui-ItemLayout";
+
+declare type ItemLayoutSlots = {
+    root: Slot_2<'div'>;
+    contentMedia?: Slot_2<'div'>;
+    contentWrapper?: Slot_2<'div'>;
+    header?: Slot_2<'div'>;
+    headerMedia?: Slot_2<'div'>;
+    startMedia?: Slot_2<'div'>;
+    endMedia?: Slot_2<'div'>;
+};
+
+export declare const List: ForwardRefComponent<ListProps>;
+
+export declare const listClassNames: SlotClassNames<ListSlots>;
+
+declare type ListContextValue = {
+    navigable: boolean;
+    selection?: ListSelectionState;
+    as?: 'div' | 'ol' | 'ul';
+    truncateHeader?: ListProps['truncateHeader'];
+    truncateContent?: ListProps['truncateContent'];
+};
+
+declare type ListContextValues = {
+    listContext: ListContextValue;
+};
+
+export declare const ListItem: ForwardRefComponent<ListItemProps>;
+
+export declare const listItemClassNames: SlotClassNames<ListItemSlots>;
+
+/**
+ * ListItem Props
+ */
+export declare type ListItemProps = ComponentProps_2<ListItemSlots> & {
+    value?: string | number;
+    truncateHeader?: boolean;
+    truncateContent?: boolean;
+};
+
+export declare type ListItemSlots = {
+    root: NonNullable<Slot_2<'li', 'div'>>;
+    media?: React_2.ComponentProps<typeof ItemLayout>['startMedia'];
+    header?: React_2.ComponentProps<typeof ItemLayout>['header'];
+    contentWrapper?: React_2.ComponentProps<typeof ItemLayout>['contentWrapper'];
+    headerMedia?: React_2.ComponentProps<typeof ItemLayout>['headerMedia'];
+    contentMedia?: React_2.ComponentProps<typeof ItemLayout>['contentMedia'];
+    endMedia?: React_2.ComponentProps<typeof ItemLayout>['endMedia'];
+};
+
+/**
+ * State used in rendering ListItem
+ */
+export declare type ListItemState = ComponentState<ListItemSlots> & {
+    selectable?: boolean;
+    selected?: boolean;
+    navigable?: boolean;
+    truncateHeader?: boolean;
+    truncateContent?: boolean;
+};
+
+declare type ListLayout = 'horizontal' | 'vertical' | 'grid';
+
+/**
+ * List Props
+ */
+export declare type ListProps = ComponentProps_2<ListSlots> & {
+    /**
+     * Defines the layout orientation.
+     *
+     * @default vertical
+     */
+    layout?: ListLayout;
+    /**
+     * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.
+     *
+     * @default false
+     */
+    navigable?: boolean;
+    /**
+     * Defines if the List items should be selectable.
+     *
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Defines selection mode for the List.
+     *
+     * @default single
+     */
+    selectionMode?: SelectionMode_2;
+    /**
+     * For controlled selection - defines selected items
+     */
+    selectedItems?: SelectionItemId[];
+    /**
+     * For uncontrolled selection - defines default selected items
+     */
+    defaultSelectedItems?: SelectionItemId[];
+    /**
+     * Callback for selection change events, used for both controlled and uncontrolled (as notification)
+     */
+    onSelectionChange?: (event: React_2.SyntheticEvent, data: {
+        selectedItems: SelectionItemId[];
+    }) => void;
+    /**
+     * Truncates header
+     *
+     * @default false
+     */
+    truncateHeader?: boolean;
+    /**
+     * Truncates content
+     *
+     * @default false
+     */
+    truncateContent?: boolean;
+};
+
+declare type ListSelectionState = {
+    isSelected: (item: string | number) => boolean;
+    toggleItem: (e: React_2.SyntheticEvent, id: string | number) => void;
+    deselectItem: (e: React_2.SyntheticEvent, id: string | number) => void;
+    selectItem: (e: React_2.SyntheticEvent, id: string | number) => void;
+    clearSelection: (e: React_2.SyntheticEvent) => void;
+    toggleAllItems: (e: React_2.SyntheticEvent, itemIds: string[] | number[]) => void;
+    setSelectedItems: React_2.Dispatch<React_2.SetStateAction<Iterable<SelectionItemId>>>;
+    selectedItems: SelectionItemId[];
+};
+
+export declare type ListSlots = {
+    root: NonNullable<Slot_2<'ul', 'div' | 'ol'>>;
+};
+
+/**
+ * State used in rendering List
+ */
+export declare type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;
+
+export declare const Primitive: PrimitiveComponent;
+
+export declare const primitiveClassName = "fui-Primitive";
+
+declare interface PrimitiveComponent {
+    /**
+     * Infers props from JSX.IntrinsicElements based on "as" value. Explicitly avoids `React.ElementType` and manually
+     * narrow the prop types so that events are typed when using JSX.IntrinsicElements.
+     */
+    <As extends JSXIntrinsicElementKeys>(props: {
+        as?: As;
+    } & JSXIntrinsicElement<As>): React_2.ReactElement | null;
+    displayName: string;
+}
+
+/**
+ * Render the final JSX of List
+ */
+export declare const renderList_unstable: (state: ListState, contextValues: ListContextValues) => JSXElement;
+
+/**
+ * Render the final JSX of ListItem
+ */
+export declare const renderListItem_unstable: (state: ListItemState) => JSXElement;
+
+export declare const Segment: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const slider: {
+    fluid: () => GriffelStyle;
+};
+
+export declare const spinner: {
+    v0Inline: () => GriffelStyle;
+    v0SpinnerLabelStyle: () => GriffelStyle;
+};
+
+export declare const StyledText: React_2.ForwardRefExoticComponent<StyledTextProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare const styledTextClassName = "fui-StyledText";
+
+export declare type StyledTextProps = ComponentProps<StyledTextSlots> & {
+    /**
+     * Aligns text based on the parent container.
+     */
+    align?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * At mentions can be formatted to draw users' attention.
+     * Mentions for "me" can be formatted to appear differently.
+     */
+    atMention?: 'me' | boolean;
+    /**
+     * Set as disabled StyledText component
+     */
+    disabled?: boolean;
+    /**
+     * Set as error StyledText component
+     */
+    error?: boolean;
+    /**
+     * The StyledText can appear more important and draw user's attention
+     */
+    important?: boolean;
+    /**
+     * Applies font size and line height based on the theme tokens.
+     */
+    size?: 'smaller' | 'small' | 'medium' | 'large' | 'large500' | 'larger' | 'largest' | 100 | 200 | 300 | 400 | 500 | 600 | 700;
+    /**
+     * Set as success StyledText component
+     */
+    success?: boolean;
+    /**
+     * The text can signify a temporary state
+     */
+    temporary?: boolean;
+    /**
+     * Set as timestamp StyledText component
+     */
+    timestamp?: boolean;
+    /**
+     * Truncate overflowing text for block displays.
+     */
+    truncate?: boolean;
+    /**
+     * Applies font weight to the content.
+     */
+    weight?: 'light' | 'semilight' | 'regular' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Wraps the text content on white spaces.
+     *
+     * @default true
+     */
+    wrap?: boolean;
+};
+
+export declare type StyledTextSlots = {
+    root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'time'>;
+};
+
+export declare const useFlexStyles: () => Record<"flex" | "fill" | "inline" | "column" | "wrap" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>;
+
+export declare const useGridStyles: () => Record<"grid" | "onlyRows" | "rows1" | "rows2" | "rows3" | "columns1" | "columns2" | "columns3" | "columnsDefault", string>;
+
+export declare const useItemLayoutStyles: () => Record<"root" | "header" | "contentMedia" | "contentWrapper" | "headerMedia" | "startMedia" | "endMedia", string>;
+
+/**
+ * Create the state required to render List.
+ *
+ * The returned state can be modified with hooks such as useListStyles_unstable,
+ * before being passed to renderList_unstable.
+ *
+ * @param props - props from this instance of List
+ * @param ref - reference to root HTMLElement of List
+ */
+export declare const useList_unstable: (props: ListProps, ref: React_2.Ref<HTMLDivElement | HTMLUListElement>) => ListState;
+
+/**
+ * Create the state required to render ListItem.
+ *
+ * The returned state can be modified with hooks such as useListItemStyles_unstable,
+ * before being passed to renderListItem_unstable.
+ *
+ * @param props - props from this instance of ListItem
+ * @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem
+ */
+export declare const useListItem_unstable: (props: ListItemProps, ref: React_2.Ref<HTMLLIElement | HTMLDivElement>) => ListItemState;
+
+/**
+ * Apply styling to the ListItem slots based on the state
+ */
+export declare const useListItemStyles_unstable: (state: ListItemState) => ListItemState;
+
+export declare function useListSelection(options?: SelectionHookParams): ListSelectionState;
+
+/**
+ * Apply styling to the List slots based on the state
+ */
+export declare const useListStyles_unstable: (state: ListState) => ListState;
+
+export declare const v0Icon: () => GriffelStyle;
+
+export declare const v9CustomSizeIcon: () => GriffelStyle;
+
+export declare const v9DisabledCursor: () => GriffelStyle;
+
+export declare const v9HoverClasses: () => GriffelStyle;
+
+export declare const v9Icon: () => GriffelStyle;
+
+export declare const Video: React_2.ForwardRefExoticComponent<VideoProps & React_2.RefAttributes<HTMLVideoElement>>;
+
+export declare const videoClassName = "fui-Video";
+
+/**
+ * Video component props
+ */
+export declare interface VideoProps extends React_2.VideoHTMLAttributes<HTMLVideoElement> {
+    /**
+     * The source URL of the video
+     */
+    src: string;
+    /**
+     * Whether the video should start playing automatically
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Whether the video should display controls
+     * @default true
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should loop
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should be muted
+     */
+    muted?: boolean;
+    /**
+     * The URL of an image to display while the video is loading
+     */
+    poster?: string;
+}
+
+declare type WithContent = ObjectShorthandValue<React_2.HTMLAttributes<HTMLDivElement>> | string;
+
+export { }

package/lib/components/Attachment/Attachment.js

@@ -1,8 +1,8 @@
 'use client';
-import { mergeClasses } from '@fluentui/react-components';
-import { useARIAButtonProps } from '@fluentui/react-aria';
-import * as React from 'react';
-import { useAttachmentBaseStyles, useAttachmentStyles } from './Attachment.styles';
+import { mergeClasses } from "@fluentui/react-components";
+import { useARIAButtonProps } from "@fluentui/react-aria";
+import * as React from "react";
+import { useAttachmentBaseStyles, useAttachmentStyles } from "./Attachment.styles.js";
 export const attachmentClassName = 'fui-Attachment';
 export const attachmentProgressContainerClassName = `${attachmentClassName}__progress-container`;
 export const attachmentProgressBarClassName = `${attachmentClassName}__progress`;

package/lib/components/Attachment/Attachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Attachment/Attachment.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nimport { useAttachmentBaseStyles, useAttachmentStyles } from './Attachment.styles';\n\nexport const attachmentClassName = 'fui-Attachment';\nexport const attachmentProgressContainerClassName = `${attachmentClassName}__progress-container`;\nexport const attachmentProgressBarClassName = `${attachmentClassName}__progress`;\n\nexport interface AttachmentProps extends React.HTMLAttributes<HTMLElement> {\n  actionable?: boolean;\n  disabled?: boolean;\n  progress?: string | number;\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}\n\nexport const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, ref) => {\n  const { actionable, className, children, disabled, onClick, progress, onKeyDown, onKeyUp, ...rest } = props;\n  const attachmentBaseClass = useAttachmentBaseStyles();\n  const classes = useAttachmentStyles();\n\n  const buttonProps = useARIAButtonProps('div', {\n    disabled,\n    onClick,\n    onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n    onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={mergeClasses(attachmentClassName, attachmentBaseClass, actionable && classes.actionable, className)}\n      {...(actionable && {\n        'data-is-focusable': true,\n        ...buttonProps,\n      })}\n      {...rest}\n    >\n      {children}\n      {!isNaN(Number(progress)) && (\n        <div className={mergeClasses(attachmentProgressContainerClassName, classes.progressContainer)}>\n          <div\n            className={mergeClasses(classes.progressBar, attachmentProgressBarClassName)}\n            style={{ width: `${progress}%` }}\n          />\n        </div>\n      )}\n    </div>\n  );\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["mergeClasses","useARIAButtonProps","React","useAttachmentBaseStyles","useAttachmentStyles","attachmentClassName","attachmentProgressContainerClassName","attachmentProgressBarClassName","Attachment","forwardRef","props","ref","actionable","className","children","disabled","onClick","progress","onKeyDown","onKeyUp","rest","attachmentBaseClass","classes","buttonProps","div","isNaN","Number","progressContainer","progressBar","style","width","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,mBAAmB,QAAQ,sBAAsB;AAEnF,OAAO,MAAMC,sBAAsB,iBAAiB;AACpD,OAAO,MAAMC,uCAAuC,GAAGD,oBAAoB,oBAAoB,CAAC,CAAC;AACjG,OAAO,MAAME,iCAAiC,GAAGF,oBAAoB,UAAU,CAAC,CAAC;AASjF,OAAO,MAAMG,2BAAaN,MAAMO,UAAU,CAAkC,CAACC,OAAOC;IAClF,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGC,MAAM,GAAGV;IACtG,MAAMW,sBAAsBlB;IAC5B,MAAMmB,UAAUlB;IAEhB,MAAMmB,cAActB,mBAAmB,OAAO;QAC5Cc;QACAC;QACAE,WAAWA;QACXC,SAASA;IACX;IAEA,qBACE,oBAACK;QACCb,KAAKA;QACLE,WAAWb,aAAaK,qBAAqBgB,qBAAqBT,cAAcU,QAAQV,UAAU,EAAEC;QACnG,GAAID,cAAc;YACjB,qBAAqB;YACrB,GAAGW,WAAW;QAChB,CAAC;QACA,GAAGH,IAAI;OAEPN,UACA,CAACW,MAAMC,OAAOT,4BACb,oBAACO;QAAIX,WAAWb,aAAaM,sCAAsCgB,QAAQK,iBAAiB;qBAC1F,oBAACH;QACCX,WAAWb,aAAasB,QAAQM,WAAW,EAAErB;QAC7CsB,OAAO;YAAEC,OAAO,GAAGb,SAAS,CAAC,CAAC;QAAC;;AAM3C,GAAG;AAEHT,WAAWuB,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Attachment/Attachment.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nimport { useAttachmentBaseStyles, useAttachmentStyles } from './Attachment.styles';\n\nexport const attachmentClassName = 'fui-Attachment';\nexport const attachmentProgressContainerClassName = `${attachmentClassName}__progress-container`;\nexport const attachmentProgressBarClassName = `${attachmentClassName}__progress`;\n\nexport interface AttachmentProps extends React.HTMLAttributes<HTMLElement> {\n  actionable?: boolean;\n  disabled?: boolean;\n  progress?: string | number;\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}\n\nexport const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, ref) => {\n  const { actionable, className, children, disabled, onClick, progress, onKeyDown, onKeyUp, ...rest } = props;\n  const attachmentBaseClass = useAttachmentBaseStyles();\n  const classes = useAttachmentStyles();\n\n  const buttonProps = useARIAButtonProps('div', {\n    disabled,\n    onClick,\n    onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n    onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={mergeClasses(attachmentClassName, attachmentBaseClass, actionable && classes.actionable, className)}\n      {...(actionable && {\n        'data-is-focusable': true,\n        ...buttonProps,\n      })}\n      {...rest}\n    >\n      {children}\n      {!isNaN(Number(progress)) && (\n        <div className={mergeClasses(attachmentProgressContainerClassName, classes.progressContainer)}>\n          <div\n            className={mergeClasses(classes.progressBar, attachmentProgressBarClassName)}\n            style={{ width: `${progress}%` }}\n          />\n        </div>\n      )}\n    </div>\n  );\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["mergeClasses","useARIAButtonProps","React","useAttachmentBaseStyles","useAttachmentStyles","attachmentClassName","attachmentProgressContainerClassName","attachmentProgressBarClassName","Attachment","forwardRef","props","ref","actionable","className","children","disabled","onClick","progress","onKeyDown","onKeyUp","rest","attachmentBaseClass","classes","buttonProps","div","isNaN","Number","progressContainer","progressBar","style","width","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,mBAAmB,QAAQ,yBAAsB;AAEnF,OAAO,MAAMC,sBAAsB,iBAAiB;AACpD,OAAO,MAAMC,uCAAuC,GAAGD,oBAAoB,oBAAoB,CAAC,CAAC;AACjG,OAAO,MAAME,iCAAiC,GAAGF,oBAAoB,UAAU,CAAC,CAAC;AASjF,OAAO,MAAMG,2BAAaN,MAAMO,UAAU,CAAkC,CAACC,OAAOC;IAClF,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGC,MAAM,GAAGV;IACtG,MAAMW,sBAAsBlB;IAC5B,MAAMmB,UAAUlB;IAEhB,MAAMmB,cAActB,mBAAmB,OAAO;QAC5Cc;QACAC;QACAE,WAAWA;QACXC,SAASA;IACX;IAEA,qBACE,oBAACK;QACCb,KAAKA;QACLE,WAAWb,aAAaK,qBAAqBgB,qBAAqBT,cAAcU,QAAQV,UAAU,EAAEC;QACnG,GAAID,cAAc;YACjB,qBAAqB;YACrB,GAAGW,WAAW;QAChB,CAAC;QACA,GAAGH,IAAI;OAEPN,UACA,CAACW,MAAMC,OAAOT,4BACb,oBAACO;QAAIX,WAAWb,aAAaM,sCAAsCgB,QAAQK,iBAAiB;qBAC1F,oBAACH;QACCX,WAAWb,aAAasB,QAAQM,WAAW,EAAErB;QAC7CsB,OAAO;YAAEC,OAAO,GAAGb,SAAS,CAAC,CAAC;QAAC;;AAM3C,GAAG;AAEHT,WAAWuB,WAAW,GAAG"}

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { createCustomFocusIndicatorStyle, __resetStyles, __styles, tokens } from '@fluentui/react-components';
-import { attachmentActionClassName } from './AttachmentAction';
-import { attachmentIconClassName } from './AttachmentIcon';
+import { createCustomFocusIndicatorStyle, __resetStyles, __styles, tokens } from "@fluentui/react-components";
+import { attachmentActionClassName } from "./AttachmentAction.js";
+import { attachmentIconClassName } from "./AttachmentIcon.js";
 export const useAttachmentBaseStyles = /*#__PURE__*/__resetStyles("rvvwr24", "r1f25zs7", [".rvvwr24{position:relative;display:inline-flex;align-items:center;width:100%;max-width:424px;min-height:32px;padding:7px 3px 7px 11px;margin-bottom:2px;margin-right:2px;background-color:var(--colorNeutralBackground6);color:var(--colorNeutralForeground1);box-shadow:0 .2rem .4rem -.075rem var(--colorNeutralShadowAmbient);border:1px solid var(--colorNeutralStroke3);border-radius:4px;}", ".rvvwr24[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);}", ".r1f25zs7{position:relative;display:inline-flex;align-items:center;width:100%;max-width:424px;min-height:32px;padding:7px 11px 7px 3px;margin-bottom:2px;margin-left:2px;background-color:var(--colorNeutralBackground6);color:var(--colorNeutralForeground1);box-shadow:0 .2rem .4rem -.075rem var(--colorNeutralShadowAmbient);border:1px solid var(--colorNeutralStroke3);border-radius:4px;}", ".r1f25zs7[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);}"]);
 export const useAttachmentStyles = /*#__PURE__*/__styles({
   actionable: {

package/lib/components/Attachment/Attachment.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["createCustomFocusIndicatorStyle","__resetStyles","__styles","tokens","attachmentActionClassName","attachmentIconClassName","useAttachmentBaseStyles","useAttachmentStyles","actionable","Bceei9c","Jwef8y","progressContainer","Beyfa6y","Bbmb7ep","B5kzvoi","Bqenvij","oyh7mz","B68tc82","Bmxbyg5","Bpg54ce","qhf8xq","j35jbq","progressBar","De3pzq","B2u0y6b","Bn62ygk","Cwk7ip","B3o57yi","Bmy1vo4","Bkqvd7p","Bi2q7bf","d","p","h"],"sources":["Attachment.styles.js"],"sourcesContent":["'use client';\nimport { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, tokens } from '@fluentui/react-components';\nimport { attachmentActionClassName } from './AttachmentAction';\nimport { attachmentIconClassName } from './AttachmentIcon';\nexport const useAttachmentBaseStyles = makeResetStyles({\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        borderRadius: tokens.borderRadiusMedium,\n        backgroundColor: undefined,\n        color: undefined,\n        [`& .${attachmentActionClassName}`]: {\n            color: undefined\n        },\n        [`& .${attachmentIconClassName}`]: {\n            color: undefined\n        }\n    }, {\n        selector: 'focus'\n    }),\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    width: '100%',\n    maxWidth: '424px',\n    minHeight: '32px',\n    padding: '7px 3px 7px 11px',\n    marginBottom: '2px',\n    marginRight: '2px',\n    backgroundColor: tokens.colorNeutralBackground6,\n    color: tokens.colorNeutralForeground1,\n    boxShadow: `0 .2rem .4rem -.075rem ${tokens.colorNeutralShadowAmbient}`,\n    border: `1px solid ${tokens.colorNeutralStroke3}`,\n    borderRadius: '4px'\n});\nexport const useAttachmentStyles = makeStyles({\n    actionable: {\n        cursor: 'pointer',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground4Hover\n        }\n    },\n    progressContainer: {\n        borderBottomLeftRadius: '4px',\n        borderBottomRightRadius: '4px',\n        bottom: 0,\n        height: '4px',\n        left: 0,\n        overflow: 'hidden',\n        position: 'absolute',\n        right: 0\n    },\n    progressBar: {\n        backgroundColor: tokens.colorPaletteLightGreenBackground3,\n        height: '100%',\n        maxWidth: '100%',\n        transition: 'width 0.2s'\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,+BAA+B,EAAAC,aAAA,EAAAC,QAAA,EAA+BC,MAAM,QAAQ,4BAA4B;AACjH,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,OAAO,MAAMC,uBAAuB,gBAAGL,aAAA,2jCA6BtC,CAAC;AACF,OAAO,MAAMM,mBAAmB,gBAAGL,QAAA;EAAAM,UAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,WAAA;IAAAC,MAAA;IAAAR,OAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAuBlC,CAAC","ignoreList":[]}
+{"version":3,"names":["createCustomFocusIndicatorStyle","__resetStyles","__styles","tokens","attachmentActionClassName","attachmentIconClassName","useAttachmentBaseStyles","useAttachmentStyles","actionable","Bceei9c","Jwef8y","progressContainer","Beyfa6y","Bbmb7ep","B5kzvoi","Bqenvij","oyh7mz","B68tc82","Bmxbyg5","Bpg54ce","qhf8xq","j35jbq","progressBar","De3pzq","B2u0y6b","Bn62ygk","Cwk7ip","B3o57yi","Bmy1vo4","Bkqvd7p","Bi2q7bf","d","p","h"],"sources":["Attachment.styles.js"],"sourcesContent":["'use client';\nimport { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, tokens } from \"@fluentui/react-components\";\nimport { attachmentActionClassName } from \"./AttachmentAction.js\";\nimport { attachmentIconClassName } from \"./AttachmentIcon.js\";\nexport const useAttachmentBaseStyles = makeResetStyles({\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        borderRadius: tokens.borderRadiusMedium,\n        backgroundColor: undefined,\n        color: undefined,\n        [`& .${attachmentActionClassName}`]: {\n            color: undefined\n        },\n        [`& .${attachmentIconClassName}`]: {\n            color: undefined\n        }\n    }, {\n        selector: 'focus'\n    }),\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    width: '100%',\n    maxWidth: '424px',\n    minHeight: '32px',\n    padding: '7px 3px 7px 11px',\n    marginBottom: '2px',\n    marginRight: '2px',\n    backgroundColor: tokens.colorNeutralBackground6,\n    color: tokens.colorNeutralForeground1,\n    boxShadow: `0 .2rem .4rem -.075rem ${tokens.colorNeutralShadowAmbient}`,\n    border: `1px solid ${tokens.colorNeutralStroke3}`,\n    borderRadius: '4px'\n});\nexport const useAttachmentStyles = makeStyles({\n    actionable: {\n        cursor: 'pointer',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground4Hover\n        }\n    },\n    progressContainer: {\n        borderBottomLeftRadius: '4px',\n        borderBottomRightRadius: '4px',\n        bottom: 0,\n        height: '4px',\n        left: 0,\n        overflow: 'hidden',\n        position: 'absolute',\n        right: 0\n    },\n    progressBar: {\n        backgroundColor: tokens.colorPaletteLightGreenBackground3,\n        height: '100%',\n        maxWidth: '100%',\n        transition: 'width 0.2s'\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,+BAA+B,EAAAC,aAAA,EAAAC,QAAA,EAA+BC,MAAM,QAAQ,4BAA4B;AACjH,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,uBAAuB,QAAQ,qBAAqB;AAC7D,OAAO,MAAMC,uBAAuB,gBAAGL,aAAA,2jCA6BtC,CAAC;AACF,OAAO,MAAMM,mBAAmB,gBAAGL,QAAA;EAAAM,UAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,WAAA;IAAAC,MAAA;IAAAR,OAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAuBlC,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 'use client';
-import { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, tokens } from '@fluentui/react-components';
-import { attachmentActionClassName } from './AttachmentAction';
-import { attachmentIconClassName } from './AttachmentIcon';
+import { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, tokens } from "@fluentui/react-components";
+import { attachmentActionClassName } from "./AttachmentAction.js";
+import { attachmentIconClassName } from "./AttachmentIcon.js";
 export const useAttachmentBaseStyles = makeResetStyles({
     ...createCustomFocusIndicatorStyle({
         outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Attachment/Attachment.styles.ts"],"sourcesContent":["'use client';\n\nimport { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, tokens } from '@fluentui/react-components';\nimport { attachmentActionClassName } from './AttachmentAction';\nimport { attachmentIconClassName } from './AttachmentIcon';\n\nexport const useAttachmentBaseStyles = makeResetStyles({\n  ...createCustomFocusIndicatorStyle(\n    {\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      backgroundColor: undefined,\n      color: undefined,\n      [`& .${attachmentActionClassName}`]: {\n        color: undefined,\n      },\n\n      [`& .${attachmentIconClassName}`]: {\n        color: undefined,\n      },\n    },\n    { selector: 'focus' },\n  ),\n  position: 'relative',\n  display: 'inline-flex',\n  alignItems: 'center',\n  width: '100%',\n  maxWidth: '424px',\n  minHeight: '32px',\n  padding: '7px 3px 7px 11px',\n  marginBottom: '2px',\n  marginRight: '2px',\n  backgroundColor: tokens.colorNeutralBackground6,\n  color: tokens.colorNeutralForeground1,\n  boxShadow: `0 .2rem .4rem -.075rem ${tokens.colorNeutralShadowAmbient}`,\n  border: `1px solid ${tokens.colorNeutralStroke3}`,\n  borderRadius: '4px',\n});\n\nexport const useAttachmentStyles = makeStyles({\n  actionable: {\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground4Hover,\n    },\n  },\n  progressContainer: {\n    borderBottomLeftRadius: '4px',\n    borderBottomRightRadius: '4px',\n    bottom: 0,\n    height: '4px',\n    left: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    right: 0,\n  },\n  progressBar: {\n    backgroundColor: tokens.colorPaletteLightGreenBackground3,\n    height: '100%',\n    maxWidth: '100%',\n    transition: 'width 0.2s',\n  },\n});\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","tokens","attachmentActionClassName","attachmentIconClassName","useAttachmentBaseStyles","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","backgroundColor","undefined","color","selector","position","display","alignItems","width","maxWidth","minHeight","padding","marginBottom","marginRight","colorNeutralBackground6","colorNeutralForeground1","boxShadow","colorNeutralShadowAmbient","border","colorNeutralStroke3","useAttachmentStyles","actionable","cursor","colorNeutralBackground4Hover","progressContainer","borderBottomLeftRadius","borderBottomRightRadius","bottom","height","left","overflow","right","progressBar","colorPaletteLightGreenBackground3","transition"],"mappings":"AAAA;AAEA,SAASA,+BAA+B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAClH,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,OAAO,MAAMC,0BAA0BL,gBAAgB;IACrD,GAAGD,gCACD;QACEO,SAAS,GAAGJ,OAAOK,gBAAgB,CAAC,OAAO,EAAEL,OAAOM,iBAAiB,EAAE;QACvEC,cAAcP,OAAOQ,kBAAkB;QACvCC,iBAAiBC;QACjBC,OAAOD;QACP,CAAC,CAAC,GAAG,EAAET,2BAA2B,CAAC,EAAE;YACnCU,OAAOD;QACT;QAEA,CAAC,CAAC,GAAG,EAAER,yBAAyB,CAAC,EAAE;YACjCS,OAAOD;QACT;IACF,GACA;QAAEE,UAAU;IAAQ,EACrB;IACDC,UAAU;IACVC,SAAS;IACTC,YAAY;IACZC,OAAO;IACPC,UAAU;IACVC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,aAAa;IACbZ,iBAAiBT,OAAOsB,uBAAuB;IAC/CX,OAAOX,OAAOuB,uBAAuB;IACrCC,WAAW,CAAC,uBAAuB,EAAExB,OAAOyB,yBAAyB,EAAE;IACvEC,QAAQ,CAAC,UAAU,EAAE1B,OAAO2B,mBAAmB,EAAE;IACjDpB,cAAc;AAChB,GAAG;AAEH,OAAO,MAAMqB,sBAAsB7B,WAAW;IAC5C8B,YAAY;QACVC,QAAQ;QACR,UAAU;YACRrB,iBAAiBT,OAAO+B,4BAA4B;QACtD;IACF;IACAC,mBAAmB;QACjBC,wBAAwB;QACxBC,yBAAyB;QACzBC,QAAQ;QACRC,QAAQ;QACRC,MAAM;QACNC,UAAU;QACVzB,UAAU;QACV0B,OAAO;IACT;IACAC,aAAa;QACX/B,iBAAiBT,OAAOyC,iCAAiC;QACzDL,QAAQ;QACRnB,UAAU;QACVyB,YAAY;IACd;AACF,GAAG"}
+{"version":3,"sources":["../src/components/Attachment/Attachment.styles.ts"],"sourcesContent":["'use client';\n\nimport { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, tokens } from '@fluentui/react-components';\nimport { attachmentActionClassName } from './AttachmentAction';\nimport { attachmentIconClassName } from './AttachmentIcon';\n\nexport const useAttachmentBaseStyles = makeResetStyles({\n  ...createCustomFocusIndicatorStyle(\n    {\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      backgroundColor: undefined,\n      color: undefined,\n      [`& .${attachmentActionClassName}`]: {\n        color: undefined,\n      },\n\n      [`& .${attachmentIconClassName}`]: {\n        color: undefined,\n      },\n    },\n    { selector: 'focus' },\n  ),\n  position: 'relative',\n  display: 'inline-flex',\n  alignItems: 'center',\n  width: '100%',\n  maxWidth: '424px',\n  minHeight: '32px',\n  padding: '7px 3px 7px 11px',\n  marginBottom: '2px',\n  marginRight: '2px',\n  backgroundColor: tokens.colorNeutralBackground6,\n  color: tokens.colorNeutralForeground1,\n  boxShadow: `0 .2rem .4rem -.075rem ${tokens.colorNeutralShadowAmbient}`,\n  border: `1px solid ${tokens.colorNeutralStroke3}`,\n  borderRadius: '4px',\n});\n\nexport const useAttachmentStyles = makeStyles({\n  actionable: {\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground4Hover,\n    },\n  },\n  progressContainer: {\n    borderBottomLeftRadius: '4px',\n    borderBottomRightRadius: '4px',\n    bottom: 0,\n    height: '4px',\n    left: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    right: 0,\n  },\n  progressBar: {\n    backgroundColor: tokens.colorPaletteLightGreenBackground3,\n    height: '100%',\n    maxWidth: '100%',\n    transition: 'width 0.2s',\n  },\n});\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","tokens","attachmentActionClassName","attachmentIconClassName","useAttachmentBaseStyles","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","backgroundColor","undefined","color","selector","position","display","alignItems","width","maxWidth","minHeight","padding","marginBottom","marginRight","colorNeutralBackground6","colorNeutralForeground1","boxShadow","colorNeutralShadowAmbient","border","colorNeutralStroke3","useAttachmentStyles","actionable","cursor","colorNeutralBackground4Hover","progressContainer","borderBottomLeftRadius","borderBottomRightRadius","bottom","height","left","overflow","right","progressBar","colorPaletteLightGreenBackground3","transition"],"mappings":"AAAA;AAEA,SAASA,+BAA+B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAClH,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,uBAAuB,QAAQ,sBAAmB;AAE3D,OAAO,MAAMC,0BAA0BL,gBAAgB;IACrD,GAAGD,gCACD;QACEO,SAAS,GAAGJ,OAAOK,gBAAgB,CAAC,OAAO,EAAEL,OAAOM,iBAAiB,EAAE;QACvEC,cAAcP,OAAOQ,kBAAkB;QACvCC,iBAAiBC;QACjBC,OAAOD;QACP,CAAC,CAAC,GAAG,EAAET,2BAA2B,CAAC,EAAE;YACnCU,OAAOD;QACT;QAEA,CAAC,CAAC,GAAG,EAAER,yBAAyB,CAAC,EAAE;YACjCS,OAAOD;QACT;IACF,GACA;QAAEE,UAAU;IAAQ,EACrB;IACDC,UAAU;IACVC,SAAS;IACTC,YAAY;IACZC,OAAO;IACPC,UAAU;IACVC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,aAAa;IACbZ,iBAAiBT,OAAOsB,uBAAuB;IAC/CX,OAAOX,OAAOuB,uBAAuB;IACrCC,WAAW,CAAC,uBAAuB,EAAExB,OAAOyB,yBAAyB,EAAE;IACvEC,QAAQ,CAAC,UAAU,EAAE1B,OAAO2B,mBAAmB,EAAE;IACjDpB,cAAc;AAChB,GAAG;AAEH,OAAO,MAAMqB,sBAAsB7B,WAAW;IAC5C8B,YAAY;QACVC,QAAQ;QACR,UAAU;YACRrB,iBAAiBT,OAAO+B,4BAA4B;QACtD;IACF;IACAC,mBAAmB;QACjBC,wBAAwB;QACxBC,yBAAyB;QACzBC,QAAQ;QACRC,QAAQ;QACRC,MAAM;QACNC,UAAU;QACVzB,UAAU;QACV0B,OAAO;IACT;IACAC,aAAa;QACX/B,iBAAiBT,OAAOyC,iCAAiC;QACzDL,QAAQ;QACRnB,UAAU;QACVyB,YAAY;IACd;AACF,GAAG"}

package/lib/components/Attachment/AttachmentAction.js

@@ -1,7 +1,7 @@
 'use client';
-import { Button, mergeClasses } from '@fluentui/react-components';
-import * as React from 'react';
-import { useAttachmentActionStyles } from './AttachmentAction.styles';
+import { Button, mergeClasses } from "@fluentui/react-components";
+import * as React from "react";
+import { useAttachmentActionStyles } from "./AttachmentAction.styles.js";
 export const attachmentActionClassName = 'fui-AttachmentAction';
 export const AttachmentAction = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { className, disabled, disabledFocusable, children, onClick, onKeyUp, onKeyDown, ...rest } = props;