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

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # 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 Thu, 04 Jul 2024 15:13:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.2.1)
+
+Thu, 04 Jul 2024 15:13:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.2.0..@fluentui/react-migration-v0-v9_v9.2.1)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.54.4 ([PR #31918](https://github.com/microsoft/fluentui/pull/31918) by beachball)
+
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.2.0)
+
+Mon, 01 Jul 2024 20:30:21 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"],"rangeMappings":";;;;;;;;;;;;;","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"],"rangeMappings":";;;;;;;;;;;;;","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"],"rangeMappings":";;;;;;;;;;;;;","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"],"rangeMappings":";;;;;;;;;;;;;","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":[],"rangeMappings":";;;;;","mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,mBAAmB;AACjC,cAAc,0BAA0B;AACxC,cAAc,qBAAqB;AACnC,cAAc,mBAAmB"}

package/lib/components/Button/ButtonMigration.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ButtonMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\n\n// class names from v0 - not imported as we do not want to keep depending on v0.\nconst iconClassNames = {\n  filled: 'ui-icon__filled',\n  outline: 'ui-icon__outline',\n};\n\nexport const v9HoverClasses = (): GriffelStyle => ({\n  [`& .${iconFilledClassName}`]: {\n    display: 'none',\n  },\n  [`& .${iconRegularClassName}`]: {\n    display: 'inline',\n  },\n  '&:hover': {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n});\n\nexport const v9Icon = (): GriffelStyle => ({\n  // styles that allow to keep consistent size of v9 icon with v0 icon\n  '& svg': {\n    width: '100%',\n    paddingBottom: '100%',\n    // negative margin is necessary here for centering v9 icon\n    // with v0 button, because of extra spaces that svg contains\n    margin: '-4px 0 0 -4px',\n    overflow: 'visible',\n  },\n  ...v9HoverClasses(),\n});\n\nexport const v9CustomSizeIcon = (): GriffelStyle => ({\n  '& svg': { overflow: 'visible' },\n  ...v9HoverClasses(),\n});\n\nexport const v0Icon = (): GriffelStyle => ({\n  [`& .${iconClassNames.outline}`]: {\n    display: 'block',\n  },\n  [`& .${iconClassNames.filled}`]: {\n    display: 'none',\n  },\n  '&:hover': {\n    [`& .${iconClassNames.outline}`]: {\n      display: 'none',\n    },\n    [`& .${iconClassNames.filled}`]: {\n      display: 'block',\n    },\n  },\n});\n\nexport const v9DisabledCursor = (): GriffelStyle => ({\n  '&:disabled': {\n    cursor: 'default',\n    '&:hover': {\n      cursor: 'default',\n    },\n    '&:hover:active': {\n      cursor: 'default',\n    },\n  },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","iconClassNames","filled","outline","v9HoverClasses","display","v9Icon","width","paddingBottom","margin","overflow","v9CustomSizeIcon","v0Icon","v9DisabledCursor","cursor"],"mappings":"AACA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAElF,gFAAgF;AAChF,MAAMC,iBAAiB;IACrBC,QAAQ;IACRC,SAAS;AACX;AAEA,OAAO,MAAMC,iBAAiB,IAAqB,CAAA;QACjD,CAAC,CAAC,GAAG,EAAEL,oBAAoB,CAAC,CAAC,EAAE;YAC7BM,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEL,qBAAqB,CAAC,CAAC,EAAE;YAC9BK,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEN,oBAAoB,CAAC,CAAC,EAAE;gBAC7BM,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEL,qBAAqB,CAAC,CAAC,EAAE;gBAC9BK,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMC,SAAS,IAAqB,CAAA;QACzC,oEAAoE;QACpE,SAAS;YACPC,OAAO;YACPC,eAAe;YACf,0DAA0D;YAC1D,4DAA4D;YAC5DC,QAAQ;YACRC,UAAU;QACZ;QACA,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMO,mBAAmB,IAAqB,CAAA;QACnD,SAAS;YAAED,UAAU;QAAU;QAC/B,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMQ,SAAS,IAAqB,CAAA;QACzC,CAAC,CAAC,GAAG,EAAEX,eAAeE,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCE,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,CAAC,CAAC,CAAC,EAAE;YAC/BG,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEJ,eAAeE,OAAO,CAAC,CAAC,CAAC,EAAE;gBAChCE,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,CAAC,CAAC,CAAC,EAAE;gBAC/BG,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMQ,mBAAmB,IAAqB,CAAA;QACnD,cAAc;YACZC,QAAQ;YACR,WAAW;gBACTA,QAAQ;YACV;YACA,kBAAkB;gBAChBA,QAAQ;YACV;QACF;IACF,CAAA,EAAG"}
+{"version":3,"sources":["ButtonMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\n\n// class names from v0 - not imported as we do not want to keep depending on v0.\nconst iconClassNames = {\n  filled: 'ui-icon__filled',\n  outline: 'ui-icon__outline',\n};\n\nexport const v9HoverClasses = (): GriffelStyle => ({\n  [`& .${iconFilledClassName}`]: {\n    display: 'none',\n  },\n  [`& .${iconRegularClassName}`]: {\n    display: 'inline',\n  },\n  '&:hover': {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n});\n\nexport const v9Icon = (): GriffelStyle => ({\n  // styles that allow to keep consistent size of v9 icon with v0 icon\n  '& svg': {\n    width: '100%',\n    paddingBottom: '100%',\n    // negative margin is necessary here for centering v9 icon\n    // with v0 button, because of extra spaces that svg contains\n    margin: '-4px 0 0 -4px',\n    overflow: 'visible',\n  },\n  ...v9HoverClasses(),\n});\n\nexport const v9CustomSizeIcon = (): GriffelStyle => ({\n  '& svg': { overflow: 'visible' },\n  ...v9HoverClasses(),\n});\n\nexport const v0Icon = (): GriffelStyle => ({\n  [`& .${iconClassNames.outline}`]: {\n    display: 'block',\n  },\n  [`& .${iconClassNames.filled}`]: {\n    display: 'none',\n  },\n  '&:hover': {\n    [`& .${iconClassNames.outline}`]: {\n      display: 'none',\n    },\n    [`& .${iconClassNames.filled}`]: {\n      display: 'block',\n    },\n  },\n});\n\nexport const v9DisabledCursor = (): GriffelStyle => ({\n  '&:disabled': {\n    cursor: 'default',\n    '&:hover': {\n      cursor: 'default',\n    },\n    '&:hover:active': {\n      cursor: 'default',\n    },\n  },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","iconClassNames","filled","outline","v9HoverClasses","display","v9Icon","width","paddingBottom","margin","overflow","v9CustomSizeIcon","v0Icon","v9DisabledCursor","cursor"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAElF,gFAAgF;AAChF,MAAMC,iBAAiB;IACrBC,QAAQ;IACRC,SAAS;AACX;AAEA,OAAO,MAAMC,iBAAiB,IAAqB,CAAA;QACjD,CAAC,CAAC,GAAG,EAAEL,oBAAoB,CAAC,CAAC,EAAE;YAC7BM,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEL,qBAAqB,CAAC,CAAC,EAAE;YAC9BK,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEN,oBAAoB,CAAC,CAAC,EAAE;gBAC7BM,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEL,qBAAqB,CAAC,CAAC,EAAE;gBAC9BK,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMC,SAAS,IAAqB,CAAA;QACzC,oEAAoE;QACpE,SAAS;YACPC,OAAO;YACPC,eAAe;YACf,0DAA0D;YAC1D,4DAA4D;YAC5DC,QAAQ;YACRC,UAAU;QACZ;QACA,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMO,mBAAmB,IAAqB,CAAA;QACnD,SAAS;YAAED,UAAU;QAAU;QAC/B,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMQ,SAAS,IAAqB,CAAA;QACzC,CAAC,CAAC,GAAG,EAAEX,eAAeE,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCE,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,CAAC,CAAC,CAAC,EAAE;YAC/BG,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEJ,eAAeE,OAAO,CAAC,CAAC,CAAC,EAAE;gBAChCE,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,CAAC,CAAC,CAAC,EAAE;gBAC/BG,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMQ,mBAAmB,IAAqB,CAAA;QACnD,cAAc;YACZC,QAAQ;YACR,WAAW;gBACTA,QAAQ;YACV;YACA,kBAAkB;gBAChBA,QAAQ;YACV;QACF;IACF,CAAA,EAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"sourcesContent":["export * from './ButtonMigration.mixins';\n"],"names":[],"mappings":"AAAA,cAAc,2BAA2B"}
+{"version":3,"sources":["index.tsx"],"sourcesContent":["export * from './ButtonMigration.mixins';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,2BAA2B"}

package/lib/components/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Flex.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useFlexStyles } from './Flex.styles';\n\nexport interface FlexProps {\n  /** Defines if container should be inline element. */\n  inline?: boolean;\n\n  /** Sets vertical flow direction. */\n  column?: boolean;\n\n  /** Allows overflow items to wrap on the next container's line. */\n  wrap?: boolean;\n\n  /** Controls items alignment in horizontal direction. */\n  hAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n  /** Controls items alignment in vertical direction. */\n  vAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n  /** Defines strategy for distributing remaining space between items. */\n  space?: 'around' | 'between' | 'evenly';\n\n  /** Defines gap between each two adjacent child items. */\n  gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';\n\n  /** Defines container's padding. */\n  padding?: 'padding.medium';\n\n  /** Orders container to fill all parent's space available. */\n  fill?: boolean;\n}\n\nexport const flexClassName = 'fui-Flex';\n\nexport const Flex = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & FlexProps>((props, ref) => {\n  const { children, column, fill, gap, hAlign, inline, padding, space, vAlign, wrap, className, ...rest } = props;\n  const classes = useFlexStyles();\n\n  const classMaps = React.useMemo(\n    () => ({\n      alignItems: {\n        start: classes.alignItemsFlexStart,\n        center: classes.alignItemsCenter,\n        end: classes.alignItemsFlexEnd,\n        stretch: classes.alignItemsCenter,\n      },\n      justifyContent: {\n        start: classes.justifyContentFlexStart,\n        center: classes.justifyContentCenter,\n        end: classes.justifyContentFlexEnd,\n        stretch: classes.justifyContentStretch,\n      },\n      justifyContentSpace: {\n        around: classes.justifyContentSpaceAround,\n        between: classes.justifyContentSpaceBetween,\n        evenly: classes.justifyContentSpaceEvenly,\n      },\n      gapForColumnFlex: {\n        'gap.smaller': classes.gapForColumnFlexSmaller,\n        'gap.small': classes.gapForColumnFlexSmall,\n        'gap.medium': classes.gapForColumnFlexMedium,\n        'gap.large': classes.gapForColumnFlexLarge,\n      },\n      gapRow: {\n        'gap.smaller': classes.gapForRowFlexSmaller,\n        'gap.small': classes.gapForRowFlexSmall,\n        'gap.medium': classes.gapForRowFlexMedium,\n        'gap.large': classes.gapForRowFlexLarge,\n      },\n      paddings: {\n        'padding.medium': classes.paddingMedium,\n      },\n    }),\n    [classes],\n  );\n\n  const flexClasses = mergeClasses(\n    flexClassName,\n    classes.flex,\n    inline && classes.inline,\n    column && classes.column,\n    hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]),\n    vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]),\n    space && classMaps.justifyContentSpace[space],\n    wrap && classes.wrap,\n    fill && classes.fill,\n    gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]),\n    padding && classMaps.paddings[padding],\n    className,\n  );\n\n  const content = React.Children.map(children, child => {\n    // @ts-expect-error __isFlexItem is added to the React type property by N*\n    const isFlexItemElement: boolean = child?.type?.__isFlexItem;\n\n    return isFlexItemElement\n      ? React.cloneElement(child as React.ReactElement, {\n          flexDirection: column ? 'column' : 'row',\n        })\n      : child;\n  });\n\n  return (\n    <div ref={ref} className={flexClasses} {...rest}>\n      {content}\n    </div>\n  );\n});\n\nFlex.displayName = 'Flex';\n"],"names":["mergeClasses","React","useFlexStyles","flexClassName","Flex","forwardRef","props","ref","children","column","fill","gap","hAlign","inline","padding","space","vAlign","wrap","className","rest","classes","classMaps","useMemo","alignItems","start","alignItemsFlexStart","center","alignItemsCenter","end","alignItemsFlexEnd","stretch","justifyContent","justifyContentFlexStart","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpace","around","justifyContentSpaceAround","between","justifyContentSpaceBetween","evenly","justifyContentSpaceEvenly","gapForColumnFlex","gapForColumnFlexSmaller","gapForColumnFlexSmall","gapForColumnFlexMedium","gapForColumnFlexLarge","gapRow","gapForRowFlexSmaller","gapForRowFlexSmall","gapForRowFlexMedium","gapForRowFlexLarge","paddings","paddingMedium","flexClasses","flex","content","Children","map","child","isFlexItemElement","type","__isFlexItem","cloneElement","flexDirection","div","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,gBAAgB;AA+B9C,OAAO,MAAMC,gBAAgB,WAAW;AAExC,OAAO,MAAMC,qBAAOH,MAAMI,UAAU,CAAgE,CAACC,OAAOC;IAC1G,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGb;IAC1G,MAAMc,UAAUlB;IAEhB,MAAMmB,YAAYpB,MAAMqB,OAAO,CAC7B,IAAO,CAAA;YACLC,YAAY;gBACVC,OAAOJ,QAAQK,mBAAmB;gBAClCC,QAAQN,QAAQO,gBAAgB;gBAChCC,KAAKR,QAAQS,iBAAiB;gBAC9BC,SAASV,QAAQO,gBAAgB;YACnC;YACAI,gBAAgB;gBACdP,OAAOJ,QAAQY,uBAAuB;gBACtCN,QAAQN,QAAQa,oBAAoB;gBACpCL,KAAKR,QAAQc,qBAAqB;gBAClCJ,SAASV,QAAQe,qBAAqB;YACxC;YACAC,qBAAqB;gBACnBC,QAAQjB,QAAQkB,yBAAyB;gBACzCC,SAASnB,QAAQoB,0BAA0B;gBAC3CC,QAAQrB,QAAQsB,yBAAyB;YAC3C;YACAC,kBAAkB;gBAChB,eAAevB,QAAQwB,uBAAuB;gBAC9C,aAAaxB,QAAQyB,qBAAqB;gBAC1C,cAAczB,QAAQ0B,sBAAsB;gBAC5C,aAAa1B,QAAQ2B,qBAAqB;YAC5C;YACAC,QAAQ;gBACN,eAAe5B,QAAQ6B,oBAAoB;gBAC3C,aAAa7B,QAAQ8B,kBAAkB;gBACvC,cAAc9B,QAAQ+B,mBAAmB;gBACzC,aAAa/B,QAAQgC,kBAAkB;YACzC;YACAC,UAAU;gBACR,kBAAkBjC,QAAQkC,aAAa;YACzC;QACF,CAAA,GACA;QAAClC;KAAQ;IAGX,MAAMmC,cAAcvD,aAClBG,eACAiB,QAAQoC,IAAI,EACZ3C,UAAUO,QAAQP,MAAM,EACxBJ,UAAUW,QAAQX,MAAM,EACxBG,UAAWH,CAAAA,SAASY,UAAUE,UAAU,CAACX,OAAO,GAAGS,UAAUU,cAAc,CAACnB,OAAO,AAAD,GAClFI,UAAWP,CAAAA,SAASY,UAAUU,cAAc,CAACf,OAAO,GAAGK,UAAUE,UAAU,CAACP,OAAO,AAAD,GAClFD,SAASM,UAAUe,mBAAmB,CAACrB,MAAM,EAC7CE,QAAQG,QAAQH,IAAI,EACpBP,QAAQU,QAAQV,IAAI,EACpBC,OAAQF,CAAAA,SAASY,UAAUsB,gBAAgB,CAAChC,IAAI,GAAGU,UAAU2B,MAAM,CAACrC,IAAI,AAAD,GACvEG,WAAWO,UAAUgC,QAAQ,CAACvC,QAAQ,EACtCI;IAGF,MAAMuC,UAAUxD,MAAMyD,QAAQ,CAACC,GAAG,CAACnD,UAAUoD,CAAAA;YAERA;QADnC,0EAA0E;QAC1E,MAAMC,oBAA6BD,kBAAAA,6BAAAA,cAAAA,MAAOE,IAAI,cAAXF,kCAAAA,YAAaG,YAAY;QAE5D,OAAOF,kCACH5D,MAAM+D,YAAY,CAACJ,OAA6B;YAC9CK,eAAexD,SAAS,WAAW;QACrC,KACAmD;IACN;IAEA,qBACE,oBAACM;QAAI3D,KAAKA;QAAKW,WAAWqC;QAAc,GAAGpC,IAAI;OAC5CsC;AAGP,GAAG;AAEHrD,KAAK+D,WAAW,GAAG"}
+{"version":3,"sources":["Flex.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useFlexStyles } from './Flex.styles';\n\nexport interface FlexProps {\n  /** Defines if container should be inline element. */\n  inline?: boolean;\n\n  /** Sets vertical flow direction. */\n  column?: boolean;\n\n  /** Allows overflow items to wrap on the next container's line. */\n  wrap?: boolean;\n\n  /** Controls items alignment in horizontal direction. */\n  hAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n  /** Controls items alignment in vertical direction. */\n  vAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n  /** Defines strategy for distributing remaining space between items. */\n  space?: 'around' | 'between' | 'evenly';\n\n  /** Defines gap between each two adjacent child items. */\n  gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';\n\n  /** Defines container's padding. */\n  padding?: 'padding.medium';\n\n  /** Orders container to fill all parent's space available. */\n  fill?: boolean;\n}\n\nexport const flexClassName = 'fui-Flex';\n\nexport const Flex = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & FlexProps>((props, ref) => {\n  const { children, column, fill, gap, hAlign, inline, padding, space, vAlign, wrap, className, ...rest } = props;\n  const classes = useFlexStyles();\n\n  const classMaps = React.useMemo(\n    () => ({\n      alignItems: {\n        start: classes.alignItemsFlexStart,\n        center: classes.alignItemsCenter,\n        end: classes.alignItemsFlexEnd,\n        stretch: classes.alignItemsCenter,\n      },\n      justifyContent: {\n        start: classes.justifyContentFlexStart,\n        center: classes.justifyContentCenter,\n        end: classes.justifyContentFlexEnd,\n        stretch: classes.justifyContentStretch,\n      },\n      justifyContentSpace: {\n        around: classes.justifyContentSpaceAround,\n        between: classes.justifyContentSpaceBetween,\n        evenly: classes.justifyContentSpaceEvenly,\n      },\n      gapForColumnFlex: {\n        'gap.smaller': classes.gapForColumnFlexSmaller,\n        'gap.small': classes.gapForColumnFlexSmall,\n        'gap.medium': classes.gapForColumnFlexMedium,\n        'gap.large': classes.gapForColumnFlexLarge,\n      },\n      gapRow: {\n        'gap.smaller': classes.gapForRowFlexSmaller,\n        'gap.small': classes.gapForRowFlexSmall,\n        'gap.medium': classes.gapForRowFlexMedium,\n        'gap.large': classes.gapForRowFlexLarge,\n      },\n      paddings: {\n        'padding.medium': classes.paddingMedium,\n      },\n    }),\n    [classes],\n  );\n\n  const flexClasses = mergeClasses(\n    flexClassName,\n    classes.flex,\n    inline && classes.inline,\n    column && classes.column,\n    hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]),\n    vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]),\n    space && classMaps.justifyContentSpace[space],\n    wrap && classes.wrap,\n    fill && classes.fill,\n    gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]),\n    padding && classMaps.paddings[padding],\n    className,\n  );\n\n  const content = React.Children.map(children, child => {\n    // @ts-expect-error __isFlexItem is added to the React type property by N*\n    const isFlexItemElement: boolean = child?.type?.__isFlexItem;\n\n    return isFlexItemElement\n      ? React.cloneElement(child as React.ReactElement, {\n          flexDirection: column ? 'column' : 'row',\n        })\n      : child;\n  });\n\n  return (\n    <div ref={ref} className={flexClasses} {...rest}>\n      {content}\n    </div>\n  );\n});\n\nFlex.displayName = 'Flex';\n"],"names":["mergeClasses","React","useFlexStyles","flexClassName","Flex","forwardRef","props","ref","children","column","fill","gap","hAlign","inline","padding","space","vAlign","wrap","className","rest","classes","classMaps","useMemo","alignItems","start","alignItemsFlexStart","center","alignItemsCenter","end","alignItemsFlexEnd","stretch","justifyContent","justifyContentFlexStart","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpace","around","justifyContentSpaceAround","between","justifyContentSpaceBetween","evenly","justifyContentSpaceEvenly","gapForColumnFlex","gapForColumnFlexSmaller","gapForColumnFlexSmall","gapForColumnFlexMedium","gapForColumnFlexLarge","gapRow","gapForRowFlexSmaller","gapForRowFlexSmall","gapForRowFlexMedium","gapForRowFlexLarge","paddings","paddingMedium","flexClasses","flex","content","Children","map","child","isFlexItemElement","type","__isFlexItem","cloneElement","flexDirection","div","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,gBAAgB;AA+B9C,OAAO,MAAMC,gBAAgB,WAAW;AAExC,OAAO,MAAMC,qBAAOH,MAAMI,UAAU,CAAgE,CAACC,OAAOC;IAC1G,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGb;IAC1G,MAAMc,UAAUlB;IAEhB,MAAMmB,YAAYpB,MAAMqB,OAAO,CAC7B,IAAO,CAAA;YACLC,YAAY;gBACVC,OAAOJ,QAAQK,mBAAmB;gBAClCC,QAAQN,QAAQO,gBAAgB;gBAChCC,KAAKR,QAAQS,iBAAiB;gBAC9BC,SAASV,QAAQO,gBAAgB;YACnC;YACAI,gBAAgB;gBACdP,OAAOJ,QAAQY,uBAAuB;gBACtCN,QAAQN,QAAQa,oBAAoB;gBACpCL,KAAKR,QAAQc,qBAAqB;gBAClCJ,SAASV,QAAQe,qBAAqB;YACxC;YACAC,qBAAqB;gBACnBC,QAAQjB,QAAQkB,yBAAyB;gBACzCC,SAASnB,QAAQoB,0BAA0B;gBAC3CC,QAAQrB,QAAQsB,yBAAyB;YAC3C;YACAC,kBAAkB;gBAChB,eAAevB,QAAQwB,uBAAuB;gBAC9C,aAAaxB,QAAQyB,qBAAqB;gBAC1C,cAAczB,QAAQ0B,sBAAsB;gBAC5C,aAAa1B,QAAQ2B,qBAAqB;YAC5C;YACAC,QAAQ;gBACN,eAAe5B,QAAQ6B,oBAAoB;gBAC3C,aAAa7B,QAAQ8B,kBAAkB;gBACvC,cAAc9B,QAAQ+B,mBAAmB;gBACzC,aAAa/B,QAAQgC,kBAAkB;YACzC;YACAC,UAAU;gBACR,kBAAkBjC,QAAQkC,aAAa;YACzC;QACF,CAAA,GACA;QAAClC;KAAQ;IAGX,MAAMmC,cAAcvD,aAClBG,eACAiB,QAAQoC,IAAI,EACZ3C,UAAUO,QAAQP,MAAM,EACxBJ,UAAUW,QAAQX,MAAM,EACxBG,UAAWH,CAAAA,SAASY,UAAUE,UAAU,CAACX,OAAO,GAAGS,UAAUU,cAAc,CAACnB,OAAO,AAAD,GAClFI,UAAWP,CAAAA,SAASY,UAAUU,cAAc,CAACf,OAAO,GAAGK,UAAUE,UAAU,CAACP,OAAO,AAAD,GAClFD,SAASM,UAAUe,mBAAmB,CAACrB,MAAM,EAC7CE,QAAQG,QAAQH,IAAI,EACpBP,QAAQU,QAAQV,IAAI,EACpBC,OAAQF,CAAAA,SAASY,UAAUsB,gBAAgB,CAAChC,IAAI,GAAGU,UAAU2B,MAAM,CAACrC,IAAI,AAAD,GACvEG,WAAWO,UAAUgC,QAAQ,CAACvC,QAAQ,EACtCI;IAGF,MAAMuC,UAAUxD,MAAMyD,QAAQ,CAACC,GAAG,CAACnD,UAAUoD,CAAAA;YAERA;QADnC,0EAA0E;QAC1E,MAAMC,oBAA6BD,kBAAAA,6BAAAA,cAAAA,MAAOE,IAAI,cAAXF,kCAAAA,YAAaG,YAAY;QAE5D,OAAOF,kCACH5D,MAAM+D,YAAY,CAACJ,OAA6B;YAC9CK,eAAexD,SAAS,WAAW;QACrC,KACAmD;IACN;IAEA,qBACE,oBAACM;QAAI3D,KAAKA;QAAKW,WAAWqC;QAAc,GAAGpC,IAAI;OAC5CsC;AAGP,GAAG;AAEHrD,KAAK+D,WAAW,GAAG"}

package/lib/components/Flex/FlexItem.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FlexItem.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst ALIGN = {\n  auto: { alignSelf: 'auto' },\n  start: { alignSelf: 'flex-start' },\n  end: { alignSelf: 'flex-end' },\n  center: { alignSelf: 'center' },\n  baseline: { alignSelf: 'baseline' },\n  stretch: { alignSelf: 'stretch' },\n};\n\nconst SIZE = {\n  half: { flexBasis: '50%' },\n  quarter: { flexBasis: '25%' },\n  small: { flexBasis: '150px' },\n  medium: { flexBasis: '200px' },\n  large: { flexBasis: '300px' },\n};\n\nconst align = (value: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'): GriffelStyle => ALIGN[value];\n\nconst size = (value: 'half' | 'quarter' | 'small' | 'medium' | 'large'): GriffelStyle => SIZE[value];\n\nconst grow = (flexGrow: boolean | number): GriffelStyle | undefined => {\n  if (flexGrow === true) {\n    return { flexGrow: 1 };\n  } else if (flexGrow) {\n    return { flexGrow };\n  } else {\n    return undefined;\n  }\n};\n\nconst shrink = (flexShrink: boolean | number): GriffelStyle | undefined => {\n  if (typeof flexShrink === 'number') {\n    return { flexShrink };\n  } else if (flexShrink === false) {\n    return { flexShrink: 0 };\n  } else {\n    return undefined;\n  }\n};\n\nconst pushRow = (): GriffelStyle => ({ marginLeft: 'auto' });\nconst pushColumn = (): GriffelStyle => ({ marginTop: 'auto' });\n\nexport const flexItem = {\n  align,\n  size,\n  grow,\n  shrink,\n  pushRow,\n  pushColumn,\n};\n"],"names":["ALIGN","auto","alignSelf","start","end","center","baseline","stretch","SIZE","half","flexBasis","quarter","small","medium","large","align","value","size","grow","flexGrow","undefined","shrink","flexShrink","pushRow","marginLeft","pushColumn","marginTop","flexItem"],"mappings":"AAEA,MAAMA,QAAQ;IACZC,MAAM;QAAEC,WAAW;IAAO;IAC1BC,OAAO;QAAED,WAAW;IAAa;IACjCE,KAAK;QAAEF,WAAW;IAAW;IAC7BG,QAAQ;QAAEH,WAAW;IAAS;IAC9BI,UAAU;QAAEJ,WAAW;IAAW;IAClCK,SAAS;QAAEL,WAAW;IAAU;AAClC;AAEA,MAAMM,OAAO;IACXC,MAAM;QAAEC,WAAW;IAAM;IACzBC,SAAS;QAAED,WAAW;IAAM;IAC5BE,OAAO;QAAEF,WAAW;IAAQ;IAC5BG,QAAQ;QAAEH,WAAW;IAAQ;IAC7BI,OAAO;QAAEJ,WAAW;IAAQ;AAC9B;AAEA,MAAMK,QAAQ,CAACC,QAAsFhB,KAAK,CAACgB,MAAM;AAEjH,MAAMC,OAAO,CAACD,QAA2ER,IAAI,CAACQ,MAAM;AAEpG,MAAME,OAAO,CAACC;IACZ,IAAIA,aAAa,MAAM;QACrB,OAAO;YAAEA,UAAU;QAAE;IACvB,OAAO,IAAIA,UAAU;QACnB,OAAO;YAAEA;QAAS;IACpB,OAAO;QACL,OAAOC;IACT;AACF;AAEA,MAAMC,SAAS,CAACC;IACd,IAAI,OAAOA,eAAe,UAAU;QAClC,OAAO;YAAEA;QAAW;IACtB,OAAO,IAAIA,eAAe,OAAO;QAC/B,OAAO;YAAEA,YAAY;QAAE;IACzB,OAAO;QACL,OAAOF;IACT;AACF;AAEA,MAAMG,UAAU,IAAqB,CAAA;QAAEC,YAAY;IAAO,CAAA;AAC1D,MAAMC,aAAa,IAAqB,CAAA;QAAEC,WAAW;IAAO,CAAA;AAE5D,OAAO,MAAMC,WAAW;IACtBZ;IACAE;IACAC;IACAG;IACAE;IACAE;AACF,EAAE"}
+{"version":3,"sources":["FlexItem.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst ALIGN = {\n  auto: { alignSelf: 'auto' },\n  start: { alignSelf: 'flex-start' },\n  end: { alignSelf: 'flex-end' },\n  center: { alignSelf: 'center' },\n  baseline: { alignSelf: 'baseline' },\n  stretch: { alignSelf: 'stretch' },\n};\n\nconst SIZE = {\n  half: { flexBasis: '50%' },\n  quarter: { flexBasis: '25%' },\n  small: { flexBasis: '150px' },\n  medium: { flexBasis: '200px' },\n  large: { flexBasis: '300px' },\n};\n\nconst align = (value: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'): GriffelStyle => ALIGN[value];\n\nconst size = (value: 'half' | 'quarter' | 'small' | 'medium' | 'large'): GriffelStyle => SIZE[value];\n\nconst grow = (flexGrow: boolean | number): GriffelStyle | undefined => {\n  if (flexGrow === true) {\n    return { flexGrow: 1 };\n  } else if (flexGrow) {\n    return { flexGrow };\n  } else {\n    return undefined;\n  }\n};\n\nconst shrink = (flexShrink: boolean | number): GriffelStyle | undefined => {\n  if (typeof flexShrink === 'number') {\n    return { flexShrink };\n  } else if (flexShrink === false) {\n    return { flexShrink: 0 };\n  } else {\n    return undefined;\n  }\n};\n\nconst pushRow = (): GriffelStyle => ({ marginLeft: 'auto' });\nconst pushColumn = (): GriffelStyle => ({ marginTop: 'auto' });\n\nexport const flexItem = {\n  align,\n  size,\n  grow,\n  shrink,\n  pushRow,\n  pushColumn,\n};\n"],"names":["ALIGN","auto","alignSelf","start","end","center","baseline","stretch","SIZE","half","flexBasis","quarter","small","medium","large","align","value","size","grow","flexGrow","undefined","shrink","flexShrink","pushRow","marginLeft","pushColumn","marginTop","flexItem"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,MAAMA,QAAQ;IACZC,MAAM;QAAEC,WAAW;IAAO;IAC1BC,OAAO;QAAED,WAAW;IAAa;IACjCE,KAAK;QAAEF,WAAW;IAAW;IAC7BG,QAAQ;QAAEH,WAAW;IAAS;IAC9BI,UAAU;QAAEJ,WAAW;IAAW;IAClCK,SAAS;QAAEL,WAAW;IAAU;AAClC;AAEA,MAAMM,OAAO;IACXC,MAAM;QAAEC,WAAW;IAAM;IACzBC,SAAS;QAAED,WAAW;IAAM;IAC5BE,OAAO;QAAEF,WAAW;IAAQ;IAC5BG,QAAQ;QAAEH,WAAW;IAAQ;IAC7BI,OAAO;QAAEJ,WAAW;IAAQ;AAC9B;AAEA,MAAMK,QAAQ,CAACC,QAAsFhB,KAAK,CAACgB,MAAM;AAEjH,MAAMC,OAAO,CAACD,QAA2ER,IAAI,CAACQ,MAAM;AAEpG,MAAME,OAAO,CAACC;IACZ,IAAIA,aAAa,MAAM;QACrB,OAAO;YAAEA,UAAU;QAAE;IACvB,OAAO,IAAIA,UAAU;QACnB,OAAO;YAAEA;QAAS;IACpB,OAAO;QACL,OAAOC;IACT;AACF;AAEA,MAAMC,SAAS,CAACC;IACd,IAAI,OAAOA,eAAe,UAAU;QAClC,OAAO;YAAEA;QAAW;IACtB,OAAO,IAAIA,eAAe,OAAO;QAC/B,OAAO;YAAEA,YAAY;QAAE;IACzB,OAAO;QACL,OAAOF;IACT;AACF;AAEA,MAAMG,UAAU,IAAqB,CAAA;QAAEC,YAAY;IAAO,CAAA;AAC1D,MAAMC,aAAa,IAAqB,CAAA;QAAEC,WAAW;IAAO,CAAA;AAE5D,OAAO,MAAMC,WAAW;IACtBZ;IACAE;IACAC;IACAG;IACAE;IACAE;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Flex, flexClassName } from './Flex';\nexport type { FlexProps } from './Flex';\nexport { useFlexStyles } from './Flex.styles';\nexport { flexItem } from './FlexItem.mixins';\n"],"names":["Flex","flexClassName","useFlexStyles","flexItem"],"mappings":"AAAA,SAASA,IAAI,EAAEC,aAAa,QAAQ,SAAS;AAE7C,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,QAAQ,QAAQ,oBAAoB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Flex, flexClassName } from './Flex';\nexport type { FlexProps } from './Flex';\nexport { useFlexStyles } from './Flex.styles';\nexport { flexItem } from './FlexItem.mixins';\n"],"names":["Flex","flexClassName","useFlexStyles","flexItem"],"rangeMappings":";;","mappings":"AAAA,SAASA,IAAI,EAAEC,aAAa,QAAQ,SAAS;AAE7C,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,QAAQ,QAAQ,oBAAoB"}

package/lib/components/FormField/FormFieldShim.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FormFieldShim.tsx"],"sourcesContent":["import {\n  FieldProps,\n  renderField_unstable,\n  useFieldContextValues_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-components';\nimport type { ObjectShorthandValue } from '@fluentui/react-northstar';\n\nimport * as React from 'react';\n\ntype WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> | string;\n\n/**\n *\n */\ntype CustomInputFieldProps = React.PropsWithChildren<{\n  /**\n   * Message to be shown when error state is true\n   */\n  errorMessage?: WithContent;\n  /**\n   * Whether the field label should be marked as required.\n   */\n  required?: boolean;\n  /**\n   * Control to be rendered\n   */\n  control?: ObjectShorthandValue<{\n    /**\n     * Control content\n     */\n    content?: React.ReactNode;\n  }> & {\n    /**\n     * Error state\n     */\n    error?: 'true' | 'false';\n  };\n  /**\n   * Label to be rendered\n   */\n  label?: WithContent;\n}>;\n\nexport const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {\n  const { errorMessage, required, control, label } = props;\n  const fieldProps: FieldProps = { required };\n\n  if (errorMessage && control?.error === 'true') {\n    fieldProps.validationState = 'error';\n    if (typeof errorMessage === 'object') {\n      fieldProps.validationMessage = errorMessage.content;\n    }\n    if (typeof errorMessage === 'string') {\n      fieldProps.validationMessage = errorMessage;\n    }\n  }\n\n  if (label) {\n    if (typeof label === 'object') {\n      fieldProps.label = label.content;\n    } else {\n      fieldProps.label = label;\n    }\n  }\n\n  const children: FieldProps['children'] = props.children || control?.content;\n\n  if (React.isValidElement(children)) {\n    const child: React.ReactElement = children;\n\n    // Use the Field's child render function to pass the field control props to the child\n    fieldProps.children = fieldControlProps => React.cloneElement(child, { ...fieldControlProps, ...child.props });\n  } else {\n    fieldProps.children = children;\n  }\n\n  const state = useField_unstable(fieldProps, ref);\n  useFieldStyles_unstable(state);\n  const context = useFieldContextValues_unstable(state);\n  return renderField_unstable(state, context);\n});\n\nFormFieldShim.displayName = 'FormFieldShim';\n"],"names":["renderField_unstable","useFieldContextValues_unstable","useFieldStyles_unstable","useField_unstable","React","FormFieldShim","forwardRef","props","ref","errorMessage","required","control","label","fieldProps","error","validationState","validationMessage","content","children","isValidElement","child","fieldControlProps","cloneElement","state","context","displayName"],"mappings":"AAAA,SAEEA,oBAAoB,EACpBC,8BAA8B,EAC9BC,uBAAuB,EACvBC,iBAAiB,QACZ,6BAA6B;AAGpC,YAAYC,WAAW,QAAQ;AAoC/B,OAAO,MAAMC,8BAAgBD,MAAME,UAAU,CAA0C,CAACC,OAAOC;IAC7F,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGL;IACnD,MAAMM,aAAyB;QAAEH;IAAS;IAE1C,IAAID,gBAAgBE,CAAAA,oBAAAA,8BAAAA,QAASG,KAAK,MAAK,QAAQ;QAC7CD,WAAWE,eAAe,GAAG;QAC7B,IAAI,OAAON,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP,aAAaQ,OAAO;QACrD;QACA,IAAI,OAAOR,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP;QACjC;IACF;IAEA,IAAIG,OAAO;QACT,IAAI,OAAOA,UAAU,UAAU;YAC7BC,WAAWD,KAAK,GAAGA,MAAMK,OAAO;QAClC,OAAO;YACLJ,WAAWD,KAAK,GAAGA;QACrB;IACF;IAEA,MAAMM,WAAmCX,MAAMW,QAAQ,KAAIP,oBAAAA,8BAAAA,QAASM,OAAO;IAE3E,kBAAIb,MAAMe,cAAc,CAACD,WAAW;QAClC,MAAME,QAA4BF;QAElC,qFAAqF;QACrFL,WAAWK,QAAQ,GAAGG,CAAAA,kCAAqBjB,MAAMkB,YAAY,CAACF,OAAO;gBAAE,GAAGC,iBAAiB;gBAAE,GAAGD,MAAMb,KAAK;YAAC;IAC9G,OAAO;QACLM,WAAWK,QAAQ,GAAGA;IACxB;IAEA,MAAMK,QAAQpB,kBAAkBU,YAAYL;IAC5CN,wBAAwBqB;IACxB,MAAMC,UAAUvB,+BAA+BsB;IAC/C,OAAOvB,qBAAqBuB,OAAOC;AACrC,GAAG;AAEHnB,cAAcoB,WAAW,GAAG"}
+{"version":3,"sources":["FormFieldShim.tsx"],"sourcesContent":["import {\n  FieldProps,\n  renderField_unstable,\n  useFieldContextValues_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-components';\nimport type { ObjectShorthandValue } from '@fluentui/react-northstar';\n\nimport * as React from 'react';\n\ntype WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> | string;\n\n/**\n *\n */\ntype CustomInputFieldProps = React.PropsWithChildren<{\n  /**\n   * Message to be shown when error state is true\n   */\n  errorMessage?: WithContent;\n  /**\n   * Whether the field label should be marked as required.\n   */\n  required?: boolean;\n  /**\n   * Control to be rendered\n   */\n  control?: ObjectShorthandValue<{\n    /**\n     * Control content\n     */\n    content?: React.ReactNode;\n  }> & {\n    /**\n     * Error state\n     */\n    error?: 'true' | 'false';\n  };\n  /**\n   * Label to be rendered\n   */\n  label?: WithContent;\n}>;\n\nexport const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {\n  const { errorMessage, required, control, label } = props;\n  const fieldProps: FieldProps = { required };\n\n  if (errorMessage && control?.error === 'true') {\n    fieldProps.validationState = 'error';\n    if (typeof errorMessage === 'object') {\n      fieldProps.validationMessage = errorMessage.content;\n    }\n    if (typeof errorMessage === 'string') {\n      fieldProps.validationMessage = errorMessage;\n    }\n  }\n\n  if (label) {\n    if (typeof label === 'object') {\n      fieldProps.label = label.content;\n    } else {\n      fieldProps.label = label;\n    }\n  }\n\n  const children: FieldProps['children'] = props.children || control?.content;\n\n  if (React.isValidElement(children)) {\n    const child: React.ReactElement = children;\n\n    // Use the Field's child render function to pass the field control props to the child\n    fieldProps.children = fieldControlProps => React.cloneElement(child, { ...fieldControlProps, ...child.props });\n  } else {\n    fieldProps.children = children;\n  }\n\n  const state = useField_unstable(fieldProps, ref);\n  useFieldStyles_unstable(state);\n  const context = useFieldContextValues_unstable(state);\n  return renderField_unstable(state, context);\n});\n\nFormFieldShim.displayName = 'FormFieldShim';\n"],"names":["renderField_unstable","useFieldContextValues_unstable","useFieldStyles_unstable","useField_unstable","React","FormFieldShim","forwardRef","props","ref","errorMessage","required","control","label","fieldProps","error","validationState","validationMessage","content","children","isValidElement","child","fieldControlProps","cloneElement","state","context","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAEEA,oBAAoB,EACpBC,8BAA8B,EAC9BC,uBAAuB,EACvBC,iBAAiB,QACZ,6BAA6B;AAGpC,YAAYC,WAAW,QAAQ;AAoC/B,OAAO,MAAMC,8BAAgBD,MAAME,UAAU,CAA0C,CAACC,OAAOC;IAC7F,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGL;IACnD,MAAMM,aAAyB;QAAEH;IAAS;IAE1C,IAAID,gBAAgBE,CAAAA,oBAAAA,8BAAAA,QAASG,KAAK,MAAK,QAAQ;QAC7CD,WAAWE,eAAe,GAAG;QAC7B,IAAI,OAAON,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP,aAAaQ,OAAO;QACrD;QACA,IAAI,OAAOR,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP;QACjC;IACF;IAEA,IAAIG,OAAO;QACT,IAAI,OAAOA,UAAU,UAAU;YAC7BC,WAAWD,KAAK,GAAGA,MAAMK,OAAO;QAClC,OAAO;YACLJ,WAAWD,KAAK,GAAGA;QACrB;IACF;IAEA,MAAMM,WAAmCX,MAAMW,QAAQ,KAAIP,oBAAAA,8BAAAA,QAASM,OAAO;IAE3E,kBAAIb,MAAMe,cAAc,CAACD,WAAW;QAClC,MAAME,QAA4BF;QAElC,qFAAqF;QACrFL,WAAWK,QAAQ,GAAGG,CAAAA,kCAAqBjB,MAAMkB,YAAY,CAACF,OAAO;gBAAE,GAAGC,iBAAiB;gBAAE,GAAGD,MAAMb,KAAK;YAAC;IAC9G,OAAO;QACLM,WAAWK,QAAQ,GAAGA;IACxB;IAEA,MAAMK,QAAQpB,kBAAkBU,YAAYL;IAC5CN,wBAAwBqB;IACxB,MAAMC,UAAUvB,+BAA+BsB;IAC/C,OAAOvB,qBAAqBuB,OAAOC;AACrC,GAAG;AAEHnB,cAAcoB,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './FormFieldShim';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './FormFieldShim';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,kBAAkB"}

package/lib/components/Grid/Grid.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Grid.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst getCSSTemplateValue = (template: string | number): string => {\n  const templateAsNumber = Number(template);\n\n  return !isNaN(templateAsNumber) && templateAsNumber > 0 ? `repeat(${template}, 1fr)` : String(template);\n};\n\nconst columns = (template: string): GriffelStyle => ({\n  gridTemplateColumns: getCSSTemplateValue(template),\n});\n\nconst rows = (template: string): GriffelStyle => ({\n  gridTemplateRows: getCSSTemplateValue(template),\n});\n\nexport const grid = {\n  columns,\n  rows,\n};\n"],"names":["getCSSTemplateValue","template","templateAsNumber","Number","isNaN","String","columns","gridTemplateColumns","rows","gridTemplateRows","grid"],"mappings":"AAEA,MAAMA,sBAAsB,CAACC;IAC3B,MAAMC,mBAAmBC,OAAOF;IAEhC,OAAO,CAACG,MAAMF,qBAAqBA,mBAAmB,IAAI,CAAC,OAAO,EAAED,SAAS,MAAM,CAAC,GAAGI,OAAOJ;AAChG;AAEA,MAAMK,UAAU,CAACL,WAAoC,CAAA;QACnDM,qBAAqBP,oBAAoBC;IAC3C,CAAA;AAEA,MAAMO,OAAO,CAACP,WAAoC,CAAA;QAChDQ,kBAAkBT,oBAAoBC;IACxC,CAAA;AAEA,OAAO,MAAMS,OAAO;IAClBJ;IACAE;AACF,EAAE"}
+{"version":3,"sources":["Grid.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst getCSSTemplateValue = (template: string | number): string => {\n  const templateAsNumber = Number(template);\n\n  return !isNaN(templateAsNumber) && templateAsNumber > 0 ? `repeat(${template}, 1fr)` : String(template);\n};\n\nconst columns = (template: string): GriffelStyle => ({\n  gridTemplateColumns: getCSSTemplateValue(template),\n});\n\nconst rows = (template: string): GriffelStyle => ({\n  gridTemplateRows: getCSSTemplateValue(template),\n});\n\nexport const grid = {\n  columns,\n  rows,\n};\n"],"names":["getCSSTemplateValue","template","templateAsNumber","Number","isNaN","String","columns","gridTemplateColumns","rows","gridTemplateRows","grid"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAEA,MAAMA,sBAAsB,CAACC;IAC3B,MAAMC,mBAAmBC,OAAOF;IAEhC,OAAO,CAACG,MAAMF,qBAAqBA,mBAAmB,IAAI,CAAC,OAAO,EAAED,SAAS,MAAM,CAAC,GAAGI,OAAOJ;AAChG;AAEA,MAAMK,UAAU,CAACL,WAAoC,CAAA;QACnDM,qBAAqBP,oBAAoBC;IAC3C,CAAA;AAEA,MAAMO,OAAO,CAACP,WAAoC,CAAA;QAChDQ,kBAAkBT,oBAAoBC;IACxC,CAAA;AAEA,OAAO,MAAMS,OAAO;IAClBJ;IACAE;AACF,EAAE"}