@fluentui/react-migration-v0-v9 9.1.37 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @fluentui/react-migration-v0-v9
 
-This log was last generated on Mon, 17 Jun 2024 07:31:08 GMT and should not be manually modified.
+This log was last generated on Mon, 01 Jul 2024 20:25:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.2.0)
+
+Mon, 01 Jul 2024 20:25:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.1.37..@fluentui/react-migration-v0-v9_v9.2.0)
+
+### Minor changes
+
+- feat(v0-migration): Attachment compat component ([PR #31634](https://github.com/microsoft/fluentui/pull/31634) by jukapsia@microsoft.com)
+- Bump @fluentui/react-aria to v9.13.0 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-components to v9.54.3 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.63 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.40 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-tabster to v9.22.1 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+
+### Patches
+
+- chore: Update react-icons package to ^2.0.245 ([PR #31802](https://github.com/microsoft/fluentui/pull/31802) by ololubek@microsoft.com)
+- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
+
 ## [9.1.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.1.37)
 
-Mon, 17 Jun 2024 07:31:08 GMT 
+Mon, 17 Jun 2024 07:34:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.1.36..@fluentui/react-migration-v0-v9_v9.1.37)
 
 ### Patches

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 
+import { ButtonProps } from '@fluentui/react-components';
 import { ComponentProps } from '@fluentui/react-components';
 import type { ComponentProps as ComponentProps_2 } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
@@ -16,6 +17,55 @@ import { Slot as Slot_2 } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { SlotRenderFunction } 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: string;
+
+export declare const attachmentProgressContainerClassName: string;
+
+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";

package/lib/components/Attachment/Attachment.js

@@ -0,0 +1,35 @@
+import { mergeClasses } from '@fluentui/react-components';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import * as React from 'react';
+import { useAttachmentBaseStyles, useAttachmentStyles } from './Attachment.styles';
+export const attachmentClassName = 'fui-Attachment';
+export const attachmentProgressContainerClassName = `${attachmentClassName}__progress-container`;
+export const attachmentProgressBarClassName = `${attachmentClassName}__progress`;
+export const Attachment = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { actionable, className, children, disabled, onClick, progress, onKeyDown, onKeyUp, ...rest } = props;
+    const attachmentBaseClass = useAttachmentBaseStyles();
+    const classes = useAttachmentStyles();
+    const buttonProps = useARIAButtonProps('div', {
+        disabled,
+        onClick,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: ref,
+        className: mergeClasses(attachmentClassName, attachmentBaseClass, actionable && classes.actionable, className),
+        ...actionable && {
+            'data-is-focusable': true,
+            ...buttonProps
+        },
+        ...rest
+    }, children, !isNaN(Number(progress)) && /*#__PURE__*/ React.createElement("div", {
+        className: mergeClasses(attachmentProgressContainerClassName, classes.progressContainer)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: mergeClasses(classes.progressBar, attachmentProgressBarClassName),
+        style: {
+            width: `${progress}%`
+        }
+    })));
+});
+Attachment.displayName = 'Attachment';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Attachment.tsx"],"sourcesContent":["import { 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,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,CAAC,EAAED,oBAAoB,oBAAoB,CAAC,CAAC;AACjG,OAAO,MAAME,iCAAiC,CAAC,EAAEF,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,CAAC,EAAEb,SAAS,CAAC,CAAC;QAAC;;AAM3C,GAAG;AAEHT,WAAWuB,WAAW,GAAG"}

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

@@ -0,0 +1,41 @@
+import { createCustomFocusIndicatorStyle, __resetStyles, __styles, shorthands, tokens } from '@fluentui/react-components';
+import { attachmentActionClassName } from './AttachmentAction';
+import { attachmentIconClassName } from './AttachmentIcon';
+export const useAttachmentBaseStyles = /*#__PURE__*/__resetStyles("rtx3whk", "r4q6ha0", [".rtx3whk{position:relative;display:inline-flex;align-items:center;width:100%;max-width:424px;min-height:32px;padding-top:7px;padding-right:3px;padding-bottom:7px;padding-left:11px;margin-bottom:2px;margin-right:2px;background-color:var(--colorNeutralBackground6);color:var(--colorNeutralForeground1);box-shadow:0 .2rem .4rem -.075rem var(--colorNeutralShadowAmbient);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorNeutralStroke3);border-right-color:var(--colorNeutralStroke3);border-bottom-color:var(--colorNeutralStroke3);border-left-color:var(--colorNeutralStroke3);border-radius:4px;}", ".rtx3whk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);}", ".r4q6ha0{position:relative;display:inline-flex;align-items:center;width:100%;max-width:424px;min-height:32px;padding-top:7px;padding-left:3px;padding-bottom:7px;padding-right:11px;margin-bottom:2px;margin-left:2px;background-color:var(--colorNeutralBackground6);color:var(--colorNeutralForeground1);box-shadow:0 .2rem .4rem -.075rem var(--colorNeutralShadowAmbient);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorNeutralStroke3);border-left-color:var(--colorNeutralStroke3);border-bottom-color:var(--colorNeutralStroke3);border-right-color:var(--colorNeutralStroke3);border-radius:4px;}", ".r4q6ha0[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);}"]);
+export const useAttachmentStyles = /*#__PURE__*/__styles({
+  actionable: {
+    Bceei9c: "f1k6fduh",
+    Jwef8y: "f11oyicx"
+  },
+  progressContainer: {
+    Beyfa6y: ["f1bjk9e1", "fff7au0"],
+    Bbmb7ep: ["fff7au0", "f1bjk9e1"],
+    B5kzvoi: "f1yab3r1",
+    Bqenvij: "f6ywr7j",
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"],
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    qhf8xq: "f1euv43f",
+    j35jbq: ["f1e31b4d", "f1vgc2s3"]
+  },
+  progressBar: {
+    De3pzq: "fnusneo",
+    Bqenvij: "f1l02sjl",
+    B2u0y6b: "f6dzj5z",
+    Bn62ygk: 0,
+    Cwk7ip: 0,
+    B3o57yi: 0,
+    Bmy1vo4: 0,
+    Bkqvd7p: 0,
+    Bi2q7bf: "f12zwupp"
+  }
+}, {
+  d: [".f1k6fduh{cursor:pointer;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1yab3r1{bottom:0;}", ".f6ywr7j{height:4px;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], ".f1euv43f{position:absolute;}", ".fnusneo{background-color:var(--colorPaletteLightGreenBackground3);}", ".f1l02sjl{height:100%;}", ".f6dzj5z{max-width:100%;}", [".f12zwupp{transition:width 0.2s;}", {
+    p: -1
+  }]],
+  h: [".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"]
+});
+//# sourceMappingURL=Attachment.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createCustomFocusIndicatorStyle","__resetStyles","__styles","shorthands","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":["import { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, shorthands, 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    ...shorthands.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    ...shorthands.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,SAASA,+BAA+B,EAAAC,aAAA,EAAAC,QAAA,EAA+BC,UAAU,EAAEC,MAAM,QAAQ,4BAA4B;AAC7H,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,OAAO,MAAMC,uBAAuB,gBAAGN,aAAA,gyDA6BtC,CAAC;AACF,OAAO,MAAMO,mBAAmB,gBAAGN,QAAA;EAAAO,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/AttachmentAction.js

@@ -0,0 +1,43 @@
+import { Button, mergeClasses } from '@fluentui/react-components';
+import * as React from 'react';
+import { useAttachmentActionStyles } from './AttachmentAction.styles';
+export const attachmentActionClassName = 'fui-AttachmentAction';
+export const AttachmentAction = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { className, disabled, disabledFocusable, children, onClick, onKeyUp, onKeyDown, ...rest } = props;
+    const classes = useAttachmentActionStyles();
+    const handleClick = React.useCallback((e)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [
+        onClick
+    ]);
+    const handleKeyUp = React.useCallback((e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.stopPropagation();
+        }
+        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(e);
+    }, [
+        onKeyUp
+    ]);
+    const handleKeyDown = React.useCallback((e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.stopPropagation();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    }, [
+        onKeyDown
+    ]);
+    return /*#__PURE__*/ React.createElement(Button, {
+        ref: ref,
+        className: mergeClasses(attachmentActionClassName, classes.root, (disabled || disabledFocusable) && classes.disabled, className),
+        appearance: "transparent",
+        disabled: disabled,
+        disabledFocusable: disabledFocusable,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        ...rest
+    }, children);
+});
+AttachmentAction.displayName = 'AttachmentAction';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentAction.tsx"],"sourcesContent":["import { Button, ButtonProps, mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentActionStyles } from './AttachmentAction.styles';\n\nexport type AttachmentActionProps = ButtonProps;\n\nexport const attachmentActionClassName = 'fui-AttachmentAction';\n\nexport const AttachmentAction = React.forwardRef<HTMLButtonElement, AttachmentActionProps>((props, ref) => {\n  const { className, disabled, disabledFocusable, children, onClick, onKeyUp, onKeyDown, ...rest } = props;\n  const classes = useAttachmentActionStyles();\n\n  const handleClick = React.useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      onClick?.(e);\n    },\n    [onClick],\n  );\n\n  const handleKeyUp = React.useCallback(\n    e => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.stopPropagation();\n      }\n      onKeyUp?.(e);\n    },\n    [onKeyUp],\n  );\n\n  const handleKeyDown = React.useCallback(\n    e => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.stopPropagation();\n      }\n      onKeyDown?.(e);\n    },\n    [onKeyDown],\n  );\n\n  return (\n    <Button\n      ref={ref}\n      className={mergeClasses(\n        attachmentActionClassName,\n        classes.root,\n        (disabled || disabledFocusable) && classes.disabled,\n        className,\n      )}\n      appearance=\"transparent\"\n      disabled={disabled}\n      disabledFocusable={disabledFocusable}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      {...rest}\n    >\n      {children}\n    </Button>\n  );\n});\n\nAttachmentAction.displayName = 'AttachmentAction';\n"],"names":["Button","mergeClasses","React","useAttachmentActionStyles","attachmentActionClassName","AttachmentAction","forwardRef","props","ref","className","disabled","disabledFocusable","children","onClick","onKeyUp","onKeyDown","rest","classes","handleClick","useCallback","e","stopPropagation","preventDefault","handleKeyUp","key","handleKeyDown","root","appearance","displayName"],"mappings":"AAAA,SAASA,MAAM,EAAeC,YAAY,QAAQ,6BAA6B;AAC/E,YAAYC,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAItE,OAAO,MAAMC,4BAA4B,uBAAuB;AAEhE,OAAO,MAAMC,iCAAmBH,MAAMI,UAAU,CAA2C,CAACC,OAAOC;IACjG,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGT;IACnG,MAAMU,UAAUd;IAEhB,MAAMe,cAAchB,MAAMiB,WAAW,CACnCC,CAAAA;QACEA,EAAEC,eAAe;QACjBD,EAAEE,cAAc;QAChBT,oBAAAA,8BAAAA,QAAUO;IACZ,GACA;QAACP;KAAQ;IAGX,MAAMU,cAAcrB,MAAMiB,WAAW,CACnCC,CAAAA;QACE,IAAIA,EAAEI,GAAG,KAAK,WAAWJ,EAAEI,GAAG,KAAK,KAAK;YACtCJ,EAAEC,eAAe;QACnB;QACAP,oBAAAA,8BAAAA,QAAUM;IACZ,GACA;QAACN;KAAQ;IAGX,MAAMW,gBAAgBvB,MAAMiB,WAAW,CACrCC,CAAAA;QACE,IAAIA,EAAEI,GAAG,KAAK,WAAWJ,EAAEI,GAAG,KAAK,KAAK;YACtCJ,EAAEC,eAAe;QACnB;QACAN,sBAAAA,gCAAAA,UAAYK;IACd,GACA;QAACL;KAAU;IAGb,qBACE,oBAACf;QACCQ,KAAKA;QACLC,WAAWR,aACTG,2BACAa,QAAQS,IAAI,EACZ,AAAChB,CAAAA,YAAYC,iBAAgB,KAAMM,QAAQP,QAAQ,EACnDD;QAEFkB,YAAW;QACXjB,UAAUA;QACVC,mBAAmBA;QACnBE,SAASK;QACTH,WAAWU;QACXX,SAASS;QACR,GAAGP,IAAI;OAEPJ;AAGP,GAAG;AAEHP,iBAAiBuB,WAAW,GAAG"}

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

@@ -0,0 +1,20 @@
+import { __styles } from '@fluentui/react-components';
+export const useAttachmentActionStyles = /*#__PURE__*/__styles({
+  root: {
+    Bqenvij: "f1d2rq10",
+    B2u0y6b: "f1n52uh2",
+    Bf4jedk: "fwbmr0d",
+    mc9l5x: "ftuwxu6",
+    Brf1p80: "f4d9j23",
+    Bt984gj: "f122n59",
+    qhf8xq: "f10pi13n",
+    ha4doy: "fmrv4ls",
+    Bceei9c: "f1k6fduh"
+  },
+  disabled: {
+    Bceei9c: "f158kwzp"
+  }
+}, {
+  d: [".f1d2rq10{height:32px;}", ".f1n52uh2{max-width:280px;}", ".fwbmr0d{min-width:32px;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", ".f122n59{align-items:center;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f1k6fduh{cursor:pointer;}", ".f158kwzp{cursor:default;}"]
+});
+//# sourceMappingURL=AttachmentAction.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","useAttachmentActionStyles","root","Bqenvij","B2u0y6b","Bf4jedk","mc9l5x","Brf1p80","Bt984gj","qhf8xq","ha4doy","Bceei9c","disabled","d"],"sources":["AttachmentAction.styles.js"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nexport const useAttachmentActionStyles = makeStyles({\n    root: {\n        height: '32px',\n        maxWidth: '280px',\n        minWidth: '32px',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        position: 'relative',\n        verticalAlign: 'middle',\n        cursor: 'pointer'\n    },\n    disabled: {\n        cursor: 'default'\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,4BAA4B;AACvD,OAAO,MAAMC,yBAAyB,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAexC,CAAC","ignoreList":[]}

package/lib/components/Attachment/AttachmentBody.js

@@ -0,0 +1,14 @@
+import { mergeClasses } from '@fluentui/react-components';
+import * as React from 'react';
+import { useAttachmentBodyStyles } from './AttachmentBody.styles';
+export const attachmentBodyClassName = 'fui-AttachmentBody';
+export const AttachmentBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { className, children, ...rest } = props;
+    const classes = useAttachmentBodyStyles();
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: ref,
+        className: mergeClasses(attachmentBodyClassName, classes.root, className),
+        ...rest
+    }, children);
+});
+AttachmentBody.displayName = 'AttachmentBody';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentBody.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentBodyStyles } from './AttachmentBody.styles';\n\nexport interface AttachmentBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const attachmentBodyClassName = 'fui-AttachmentBody';\n\nexport const AttachmentBody: React.FC<AttachmentBodyProps> = React.forwardRef<HTMLDivElement, AttachmentBodyProps>(\n  (props, ref) => {\n    const { className, children, ...rest } = props;\n    const classes = useAttachmentBodyStyles();\n\n    return (\n      <div ref={ref} className={mergeClasses(attachmentBodyClassName, classes.root, className)} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n\nAttachmentBody.displayName = 'AttachmentBody';\n"],"names":["mergeClasses","React","useAttachmentBodyStyles","attachmentBodyClassName","AttachmentBody","forwardRef","props","ref","className","children","rest","classes","div","root","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,OAAO,MAAMC,0BAA0B,qBAAqB;AAE5D,OAAO,MAAMC,+BAAgDH,MAAMI,UAAU,CAC3E,CAACC,OAAOC;IACN,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAIL,KAAKA;QAAKC,WAAWR,aAAaG,yBAAyBQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAC/FD;AAGP,GACA;AAEFL,eAAeU,WAAW,GAAG"}

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

@@ -0,0 +1,14 @@
+import { __styles } from '@fluentui/react-components';
+export const useAttachmentBodyStyles = /*#__PURE__*/__styles({
+  root: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fbotcpb"
+  }
+}, {
+  d: [[".fbotcpb{flex:1 1 0;}", {
+    p: -1
+  }]]
+});
+//# sourceMappingURL=AttachmentBody.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","useAttachmentBodyStyles","root","xawz","Bh6795r","Bnnss6s","fkmc3a","d","p"],"sources":["AttachmentBody.styles.js"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nexport const useAttachmentBodyStyles = makeStyles({\n    root: {\n        flex: '1 1 0'\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,4BAA4B;AACvD,OAAO,MAAMC,uBAAuB,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAItC,CAAC","ignoreList":[]}

package/lib/components/Attachment/AttachmentDescription.js

@@ -0,0 +1,14 @@
+import { mergeClasses } from '@fluentui/react-components';
+import * as React from 'react';
+import { useAttachmentDescriptionStyles } from './AttachmentDescription.styles';
+export const attachmentDescriptionClassName = 'fui-AttachmentDescription';
+export const AttachmentDescription = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { className, children, ...rest } = props;
+    const classes = useAttachmentDescriptionStyles();
+    return /*#__PURE__*/ React.createElement("span", {
+        ref: ref,
+        className: mergeClasses(attachmentDescriptionClassName, classes.root, className),
+        ...rest
+    }, children);
+});
+AttachmentDescription.displayName = 'AttachmentDescription';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentDescription.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentDescriptionStyles } from './AttachmentDescription.styles';\n\nexport interface AttachmentDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentDescriptionClassName = 'fui-AttachmentDescription';\n\nexport const AttachmentDescription: React.FC<AttachmentDescriptionProps> = React.forwardRef<\n  HTMLSpanElement,\n  AttachmentDescriptionProps\n>((props, ref) => {\n  const { className, children, ...rest } = props;\n  const classes = useAttachmentDescriptionStyles();\n\n  return (\n    <span ref={ref} className={mergeClasses(attachmentDescriptionClassName, classes.root, className)} {...rest}>\n      {children}\n    </span>\n  );\n});\n\nAttachmentDescription.displayName = 'AttachmentDescription';\n"],"names":["mergeClasses","React","useAttachmentDescriptionStyles","attachmentDescriptionClassName","AttachmentDescription","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF,OAAO,MAAMC,iCAAiC,4BAA4B;AAE1E,OAAO,MAAMC,sCAA8DH,MAAMI,UAAU,CAGzF,CAACC,OAAOC;IACR,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,gCAAgCQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OACvGD;AAGP,GAAG;AAEHL,sBAAsBU,WAAW,GAAG"}

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

@@ -0,0 +1,12 @@
+import { __styles, tokens } from '@fluentui/react-components';
+export const useAttachmentDescriptionStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "ftgm304",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fp6vxd"
+  }
+}, {
+  d: [".ftgm304{display:block;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fp6vxd{line-height:1;}"]
+});
+//# sourceMappingURL=AttachmentDescription.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","tokens","useAttachmentDescriptionStyles","root","mc9l5x","Be2twd7","Bhrd7zp","Bg96gwp","d"],"sources":["AttachmentDescription.styles.js"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\nexport const useAttachmentDescriptionStyles = makeStyles({\n    root: {\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightRegular,\n        lineHeight: 1\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,MAAM,QAAQ,4BAA4B;AAC/D,OAAO,MAAMC,8BAA8B,gBAAGF,QAAA;EAAAG,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAO7C,CAAC","ignoreList":[]}

package/lib/components/Attachment/AttachmentHeader.js

@@ -0,0 +1,14 @@
+import { mergeClasses } from '@fluentui/react-components';
+import * as React from 'react';
+import { useAttachmentHeaderStyles } from './AttachmentHeader.styles';
+export const attachmentHeaderClassName = 'fui-AttachmentHeader';
+export const AttachmentHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { className, children, ...rest } = props;
+    const classes = useAttachmentHeaderStyles();
+    return /*#__PURE__*/ React.createElement("span", {
+        ref: ref,
+        className: mergeClasses(attachmentHeaderClassName, classes.root, className),
+        ...rest
+    }, children);
+});
+AttachmentHeader.displayName = 'AttachmentHeader';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentHeader.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentHeaderStyles } from './AttachmentHeader.styles';\n\nexport interface AttachmentHeaderProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentHeaderClassName = 'fui-AttachmentHeader';\n\nexport const AttachmentHeader: React.FC<AttachmentHeaderProps> = React.forwardRef<\n  HTMLSpanElement,\n  AttachmentHeaderProps\n>((props, ref) => {\n  const { className, children, ...rest } = props;\n  const classes = useAttachmentHeaderStyles();\n\n  return (\n    <span ref={ref} className={mergeClasses(attachmentHeaderClassName, classes.root, className)} {...rest}>\n      {children}\n    </span>\n  );\n});\n\nAttachmentHeader.displayName = 'AttachmentHeader';\n"],"names":["mergeClasses","React","useAttachmentHeaderStyles","attachmentHeaderClassName","AttachmentHeader","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAItE,OAAO,MAAMC,4BAA4B,uBAAuB;AAEhE,OAAO,MAAMC,iCAAoDH,MAAMI,UAAU,CAG/E,CAACC,OAAOC;IACR,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,2BAA2BQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAClGD;AAGP,GAAG;AAEHL,iBAAiBU,WAAW,GAAG"}

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

@@ -0,0 +1,12 @@
+import { __styles, tokens } from '@fluentui/react-components';
+export const useAttachmentHeaderStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "ftgm304",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f8497fr"
+  }
+}, {
+  d: [".ftgm304{display:block;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f8497fr{line-height:1.4286;}"]
+});
+//# sourceMappingURL=AttachmentHeader.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","tokens","useAttachmentHeaderStyles","root","mc9l5x","Be2twd7","Bhrd7zp","Bg96gwp","d"],"sources":["AttachmentHeader.styles.js"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\nexport const useAttachmentHeaderStyles = makeStyles({\n    root: {\n        display: 'block',\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: 1.4286\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,MAAM,QAAQ,4BAA4B;AAC/D,OAAO,MAAMC,yBAAyB,gBAAGF,QAAA;EAAAG,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOxC,CAAC","ignoreList":[]}

package/lib/components/Attachment/AttachmentIcon.js

@@ -0,0 +1,14 @@
+import { mergeClasses } from '@fluentui/react-components';
+import * as React from 'react';
+import { useAttachmentIconStyles } from './AttachmentIcon.styles';
+export const attachmentIconClassName = 'fui-AttachmentIcon';
+export const AttachmentIcon = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { className, children, ...rest } = props;
+    const classes = useAttachmentIconStyles();
+    return /*#__PURE__*/ React.createElement("span", {
+        ref: ref,
+        className: mergeClasses(attachmentIconClassName, classes.root, className),
+        ...rest
+    }, children);
+});
+AttachmentIcon.displayName = 'AttachmentIcon';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentIcon.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentIconStyles } from './AttachmentIcon.styles';\n\nexport interface AttachmentIconProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentIconClassName = 'fui-AttachmentIcon';\n\nexport const AttachmentIcon: React.FC<AttachmentIconProps> = React.forwardRef<HTMLSpanElement, AttachmentIconProps>(\n  (props, ref) => {\n    const { className, children, ...rest } = props;\n    const classes = useAttachmentIconStyles();\n\n    return (\n      <span ref={ref} className={mergeClasses(attachmentIconClassName, classes.root, className)} {...rest}>\n        {children}\n      </span>\n    );\n  },\n);\n\nAttachmentIcon.displayName = 'AttachmentIcon';\n"],"names":["mergeClasses","React","useAttachmentIconStyles","attachmentIconClassName","AttachmentIcon","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,OAAO,MAAMC,0BAA0B,qBAAqB;AAE5D,OAAO,MAAMC,+BAAgDH,MAAMI,UAAU,CAC3E,CAACC,OAAOC;IACN,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,yBAAyBQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAChGD;AAGP,GACA;AAEFL,eAAeU,WAAW,GAAG"}

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

@@ -0,0 +1,16 @@
+import { __styles } from '@fluentui/react-components';
+export const useAttachmentIconStyles = /*#__PURE__*/__styles({
+  root: {
+    Bqenvij: "f1d2rq10",
+    a9b677: "f1szoe96",
+    t21cq0: ["f1x4n1mu", "f1hf5xhj"],
+    mc9l5x: "ftuwxu6",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    p4uzdd: "ffmg4tr",
+    B5pe6w7: "f17klwcu"
+  }
+}, {
+  d: [".f1d2rq10{height:32px;}", ".f1szoe96{width:32px;}", ".f1x4n1mu{margin-right:12px;}", ".f1hf5xhj{margin-left:12px;}", ".ftuwxu6{display:inline-flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".ffmg4tr svg{height:100%;}", ".f17klwcu svg{width:100%;}"]
+});
+//# sourceMappingURL=AttachmentIcon.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","useAttachmentIconStyles","root","Bqenvij","a9b677","t21cq0","mc9l5x","Bt984gj","Brf1p80","p4uzdd","B5pe6w7","d"],"sources":["AttachmentIcon.styles.js"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nexport const useAttachmentIconStyles = makeStyles({\n    root: {\n        height: '32px',\n        width: '32px',\n        marginRight: '12px',\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        '& svg': {\n            height: '100%',\n            width: '100%'\n        }\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,4BAA4B;AACvD,OAAO,MAAMC,uBAAuB,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAatC,CAAC","ignoreList":[]}

package/lib/components/Attachment/index.js

@@ -0,0 +1,6 @@
+export * from './Attachment';
+export * from './AttachmentAction';
+export * from './AttachmentBody';
+export * from './AttachmentDescription';
+export * from './AttachmentHeader';
+export * from './AttachmentIcon';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Attachment';\nexport * from './AttachmentAction';\nexport * from './AttachmentBody';\nexport * from './AttachmentDescription';\nexport * from './AttachmentHeader';\nexport * from './AttachmentIcon';\n\nexport type { AttachmentProps } from './Attachment';\nexport type { AttachmentActionProps } from './AttachmentAction';\nexport type { AttachmentBodyProps } from './AttachmentBody';\nexport type { AttachmentDescriptionProps } from './AttachmentDescription';\nexport type { AttachmentHeaderProps } from './AttachmentHeader';\nexport type { AttachmentIconProps } from './AttachmentIcon';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,mBAAmB;AACjC,cAAc,0BAA0B;AACxC,cAAc,qBAAqB;AACnC,cAAc,mBAAmB"}

package/lib/components/List/List/useListStyles.styles.js

@@ -20,6 +20,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the List slots based on the state
  */
 export const useListStyles_unstable = state => {
+  'use no memo';
+
   const rootStyles = useRootBaseStyles();
   const styles = useStyles();
   const layoutToStyles = {

package/lib/components/List/List/useListStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"sources":["useListStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n    root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n    padding: 0,\n    margin: 0,\n    textIndent: 0,\n    listStyleType: 'none'\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    rootHorizontal: {\n        display: 'flex'\n    },\n    rootGrid: {\n        display: 'grid'\n    }\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n    const rootStyles = useRootBaseStyles();\n    const styles = useStyles();\n    const layoutToStyles = {\n        ['horizontal']: styles.rootHorizontal,\n        ['grid']: styles.rootGrid,\n        ['vertical']: undefined\n    };\n    state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,MAAMK,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;EACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,cAAc,GAAG;IACnB,CAAC,YAAY,GAAGD,MAAM,CAACP,cAAc;IACrC,CAAC,MAAM,GAAGO,MAAM,CAACL,QAAQ;IACzB,CAAC,UAAU,GAAGO;EAClB,CAAC;EACDJ,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGf,YAAY,CAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"sources":["useListStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n    root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n    padding: 0,\n    margin: 0,\n    textIndent: 0,\n    listStyleType: 'none'\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    rootHorizontal: {\n        display: 'flex'\n    },\n    rootGrid: {\n        display: 'grid'\n    }\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootBaseStyles();\n    const styles = useStyles();\n    const layoutToStyles = {\n        ['horizontal']: styles.rootHorizontal,\n        ['grid']: styles.rootGrid,\n        ['vertical']: undefined\n    };\n    state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,MAAMK,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;EACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,cAAc,GAAG;IACnB,CAAC,YAAY,GAAGD,MAAM,CAACP,cAAc;IACrC,CAAC,MAAM,GAAGO,MAAM,CAACL,QAAQ;IACzB,CAAC,UAAU,GAAGO;EAClB,CAAC;EACDJ,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGf,YAAY,CAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/List/ListItem/useListItemStyles.styles.js

@@ -45,6 +45,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the ListItem slots based on the state
  */
 export const useListItemStyles_unstable = state => {
+  'use no memo';
+
   const rootBaseStyles = useRootBaseStyles();
   const styles = useStyles();
   state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);

package/lib/components/List/ListItem/useListItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n    root: 'fui-ListItem',\n    media: 'fui-ListItem__media',\n    header: 'fui-ListItem__header',\n    contentWrapper: 'fui-ListItem__contentWrapper',\n    headerMedia: 'fui-ListItem__headerMedia',\n    contentMedia: 'fui-ListItem__contentMedia',\n    endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n    padding: '0 10px',\n    margin: 0,\n    textIndent: 0,\n    listStyleType: 'none',\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        borderRadius: tokens.borderRadiusMedium\n    }, {\n        selector: 'focus'\n    })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    contentWrapper: {\n        fontSize: tokens.fontSizeBase200\n    },\n    // The content should go all the way to the end if the content media is not present\n    contentWrapperWithoutMedia: {\n        gridColumnEnd: 4\n    },\n    truncate: {\n        overflow: 'hidden',\n        textWrap: 'nowrap',\n        textOverflow: 'ellipsis'\n    },\n    rootSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected\n    },\n    rootClickable: {\n        cursor: 'pointer',\n        '&:hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover\n        }\n    }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n    if (state.header) {\n        var _state_header;\n        state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);\n    }\n    if (state.contentWrapper) {\n        var _state_contentWrapper;\n        state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,MAAM,EAAE,sBAAsB;EAC9BC,cAAc,EAAE,8BAA8B;EAC9CC,WAAW,EAAE,2BAA2B;EACxCC,YAAY,EAAE,4BAA4B;EAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,gBAAGZ,aAAA,wOAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMa,SAAS,gBAAGd,QAAA;EAAAS,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;IACd,IAAIgC,aAAa;IACjBP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,GAAGlC,YAAY,CAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;IACtB,IAAIiC,qBAAqB;IACzBT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,GAAGlC,YAAY,CAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n    root: 'fui-ListItem',\n    media: 'fui-ListItem__media',\n    header: 'fui-ListItem__header',\n    contentWrapper: 'fui-ListItem__contentWrapper',\n    headerMedia: 'fui-ListItem__headerMedia',\n    contentMedia: 'fui-ListItem__contentMedia',\n    endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n    padding: '0 10px',\n    margin: 0,\n    textIndent: 0,\n    listStyleType: 'none',\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        borderRadius: tokens.borderRadiusMedium\n    }, {\n        selector: 'focus'\n    })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    contentWrapper: {\n        fontSize: tokens.fontSizeBase200\n    },\n    // The content should go all the way to the end if the content media is not present\n    contentWrapperWithoutMedia: {\n        gridColumnEnd: 4\n    },\n    truncate: {\n        overflow: 'hidden',\n        textWrap: 'nowrap',\n        textOverflow: 'ellipsis'\n    },\n    rootSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected\n    },\n    rootClickable: {\n        cursor: 'pointer',\n        '&:hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover\n        }\n    }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n    if (state.header) {\n        var _state_header;\n        state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);\n    }\n    if (state.contentWrapper) {\n        var _state_contentWrapper;\n        state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,MAAM,EAAE,sBAAsB;EAC9BC,cAAc,EAAE,8BAA8B;EAC9CC,WAAW,EAAE,2BAA2B;EACxCC,YAAY,EAAE,4BAA4B;EAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,gBAAGZ,aAAA,wOAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMa,SAAS,gBAAGd,QAAA;EAAAS,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;IACd,IAAIgC,aAAa;IACjBP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,GAAGlC,YAAY,CAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;IACtB,IAAIiC,qBAAqB;IACzBT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,GAAGlC,YAAY,CAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/index.js

@@ -10,3 +10,4 @@ export { Primitive, primitiveClassName } from './components/Primitive';
 export { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';
 export { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';
 export { List, ListItem, listClassNames, listItemClassNames, renderListItem_unstable, renderList_unstable, useListItemStyles_unstable, useListItem_unstable, useListSelection, useListStyles_unstable, useList_unstable } from './components/List';
+export { Attachment, AttachmentAction, AttachmentBody, AttachmentDescription, AttachmentHeader, AttachmentIcon, attachmentClassName, attachmentActionClassName, attachmentBodyClassName, attachmentDescriptionClassName, attachmentHeaderClassName, attachmentIconClassName, attachmentProgressBarClassName, attachmentProgressContainerClassName } from './components/Attachment';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/index';\nexport type { GridShimProps } from './components/Grid/index';\nexport { FormFieldShim } from './components/FormField';\nexport { Segment } from './components/Segment';\nexport { slider } from './components/Slider';\nexport { input } from './components/Input';\nexport { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';\nexport { spinner } from './components/Spinner';\nexport { StyledText, styledTextClassName } from './components/StyledText';\nexport type { StyledTextProps, StyledTextSlots } from './components/StyledText';\nexport { Primitive, primitiveClassName } from './components/Primitive';\nexport { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';\nexport { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';\nexport {\n  List,\n  ListItem,\n  listClassNames,\n  listItemClassNames,\n  renderListItem_unstable,\n  renderList_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n  useListSelection,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List';\nexport type { ListItemProps, ListItemSlots, ListItemState, ListProps, ListSlots, ListState } from './components/List';\n"],"names":["GridShim","grid","gridClassName","useGridStyles","FormFieldShim","Segment","slider","input","v0Icon","v9CustomSizeIcon","v9DisabledCursor","v9HoverClasses","v9Icon","spinner","StyledText","styledTextClassName","Primitive","primitiveClassName","ItemLayout","itemLayoutClassName","useItemLayoutStyles","Flex","flexClassName","flexItem","useFlexStyles","List","ListItem","listClassNames","listItemClassNames","renderListItem_unstable","renderList_unstable","useListItemStyles_unstable","useListItem_unstable","useListSelection","useListStyles_unstable","useList_unstable"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,aAAa,EAAEC,aAAa,QAAQ,0BAA0B;AAEvF,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,MAAM,QAAQ,sBAAsB;AACzG,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,0BAA0B;AAE1E,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,yBAAyB;AACvE,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,0BAA0B;AAC/F,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,oBAAoB;AACjF,SACEC,IAAI,EACJC,QAAQ,EACRC,cAAc,EACdC,kBAAkB,EAClBC,uBAAuB,EACvBC,mBAAmB,EACnBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,QACX,oBAAoB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { GridShim, grid, gridClassName, useGridStyles } from './components/Grid/index';\nexport type { GridShimProps } from './components/Grid/index';\nexport { FormFieldShim } from './components/FormField';\nexport { Segment } from './components/Segment';\nexport { slider } from './components/Slider';\nexport { input } from './components/Input';\nexport { v0Icon, v9CustomSizeIcon, v9DisabledCursor, v9HoverClasses, v9Icon } from './components/Button';\nexport { spinner } from './components/Spinner';\nexport { StyledText, styledTextClassName } from './components/StyledText';\nexport type { StyledTextProps, StyledTextSlots } from './components/StyledText';\nexport { Primitive, primitiveClassName } from './components/Primitive';\nexport { ItemLayout, itemLayoutClassName, useItemLayoutStyles } from './components/ItemLayout';\nexport { Flex, flexClassName, flexItem, useFlexStyles } from './components/Flex';\nexport {\n  List,\n  ListItem,\n  listClassNames,\n  listItemClassNames,\n  renderListItem_unstable,\n  renderList_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n  useListSelection,\n  useListStyles_unstable,\n  useList_unstable,\n} from './components/List';\nexport type { ListItemProps, ListItemSlots, ListItemState, ListProps, ListSlots, ListState } from './components/List';\nexport {\n  Attachment,\n  AttachmentAction,\n  AttachmentBody,\n  AttachmentDescription,\n  AttachmentHeader,\n  AttachmentIcon,\n  attachmentClassName,\n  attachmentActionClassName,\n  attachmentBodyClassName,\n  attachmentDescriptionClassName,\n  attachmentHeaderClassName,\n  attachmentIconClassName,\n  attachmentProgressBarClassName,\n  attachmentProgressContainerClassName,\n} from './components/Attachment';\n\nexport type {\n  AttachmentProps,\n  AttachmentActionProps,\n  AttachmentBodyProps,\n  AttachmentDescriptionProps,\n  AttachmentHeaderProps,\n  AttachmentIconProps,\n} from './components/Attachment';\n"],"names":["GridShim","grid","gridClassName","useGridStyles","FormFieldShim","Segment","slider","input","v0Icon","v9CustomSizeIcon","v9DisabledCursor","v9HoverClasses","v9Icon","spinner","StyledText","styledTextClassName","Primitive","primitiveClassName","ItemLayout","itemLayoutClassName","useItemLayoutStyles","Flex","flexClassName","flexItem","useFlexStyles","List","ListItem","listClassNames","listItemClassNames","renderListItem_unstable","renderList_unstable","useListItemStyles_unstable","useListItem_unstable","useListSelection","useListStyles_unstable","useList_unstable","Attachment","AttachmentAction","AttachmentBody","AttachmentDescription","AttachmentHeader","AttachmentIcon","attachmentClassName","attachmentActionClassName","attachmentBodyClassName","attachmentDescriptionClassName","attachmentHeaderClassName","attachmentIconClassName","attachmentProgressBarClassName","attachmentProgressContainerClassName"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,aAAa,EAAEC,aAAa,QAAQ,0BAA0B;AAEvF,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,MAAM,QAAQ,sBAAsB;AACzG,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,0BAA0B;AAE1E,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,yBAAyB;AACvE,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,0BAA0B;AAC/F,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,oBAAoB;AACjF,SACEC,IAAI,EACJC,QAAQ,EACRC,cAAc,EACdC,kBAAkB,EAClBC,uBAAuB,EACvBC,mBAAmB,EACnBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,QACX,oBAAoB;AAE3B,SACEC,UAAU,EACVC,gBAAgB,EAChBC,cAAc,EACdC,qBAAqB,EACrBC,gBAAgB,EAChBC,cAAc,EACdC,mBAAmB,EACnBC,yBAAyB,EACzBC,uBAAuB,EACvBC,8BAA8B,EAC9BC,yBAAyB,EACzBC,uBAAuB,EACvBC,8BAA8B,EAC9BC,oCAAoC,QAC/B,0BAA0B"}

package/lib-commonjs/components/Attachment/Attachment.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachmentClassName: function() {
+        return attachmentClassName;
+    },
+    attachmentProgressContainerClassName: function() {
+        return attachmentProgressContainerClassName;
+    },
+    attachmentProgressBarClassName: function() {
+        return attachmentProgressBarClassName;
+    },
+    Attachment: function() {
+        return Attachment;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactcomponents = require("@fluentui/react-components");
+const _reactaria = require("@fluentui/react-aria");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _Attachmentstyles = require("./Attachment.styles");
+const attachmentClassName = 'fui-Attachment';
+const attachmentProgressContainerClassName = `${attachmentClassName}__progress-container`;
+const attachmentProgressBarClassName = `${attachmentClassName}__progress`;
+const Attachment = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const { actionable, className, children, disabled, onClick, progress, onKeyDown, onKeyUp, ...rest } = props;
+    const attachmentBaseClass = (0, _Attachmentstyles.useAttachmentBaseStyles)();
+    const classes = (0, _Attachmentstyles.useAttachmentStyles)();
+    const buttonProps = (0, _reactaria.useARIAButtonProps)('div', {
+        disabled,
+        onClick,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+    });
+    return /*#__PURE__*/ _react.createElement("div", {
+        ref: ref,
+        className: (0, _reactcomponents.mergeClasses)(attachmentClassName, attachmentBaseClass, actionable && classes.actionable, className),
+        ...actionable && {
+            'data-is-focusable': true,
+            ...buttonProps
+        },
+        ...rest
+    }, children, !isNaN(Number(progress)) && /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _reactcomponents.mergeClasses)(attachmentProgressContainerClassName, classes.progressContainer)
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _reactcomponents.mergeClasses)(classes.progressBar, attachmentProgressBarClassName),
+        style: {
+            width: `${progress}%`
+        }
+    })));
+});
+Attachment.displayName = 'Attachment';