@fluentui/react-migration-v0-v9 9.0.1 → 9.0.3

package/CHANGELOG.json

@@ -2,7 +2,91 @@
   "name": "@fluentui/react-migration-v0-v9",
   "entries": [
     {
-      "date": "Thu, 25 May 2023 09:57:45 GMT",
+      "date": "Tue, 20 Jun 2023 12:34:43 GMT",
+      "tag": "@fluentui/react-migration-v0-v9_v9.0.3",
+      "version": "9.0.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-migration-v0-v9",
+            "commit": "8a5ae3aa00faa327c58887a99a5698b18f2930ee",
+            "comment": "chore: update @fluentui/react-icons to 2.0.203"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-theme to v9.1.9",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-utilities to v9.9.3",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-components to v9.22.0",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 31 May 2023 06:46:15 GMT",
+      "tag": "@fluentui/react-migration-v0-v9_v9.0.2",
+      "version": "9.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-migration-v0-v9",
+            "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
+            "comment": "chore: Update Griffel to v1.5.7."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-utilities to v9.9.2",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-components to v9.21.0",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v0-v9",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 May 2023 10:00:48 GMT",
       "tag": "@fluentui/react-migration-v0-v9_v9.0.1",
       "version": "9.0.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-migration-v0-v9
 
-This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Jun 2023 12:34:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.3)
+
+Tue, 20 Jun 2023 12:34:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.0.2..@fluentui/react-migration-v0-v9_v9.0.3)
+
+### Patches
+
+- chore: update @fluentui/react-icons to 2.0.203 ([PR #28203](https://github.com/microsoft/fluentui/pull/28203) by ololubek@microsoft.com)
+- Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-components to v9.22.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+
+## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.2)
+
+Wed, 31 May 2023 06:46:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.0.1..@fluentui/react-migration-v0-v9_v9.0.2)
+
+### Patches
+
+- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-components to v9.21.0 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+
 ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.0.1)
 
-Thu, 25 May 2023 09:57:45 GMT 
+Thu, 25 May 2023 10:00:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.0.0..@fluentui/react-migration-v0-v9_v9.0.1)
 
 ### Patches

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

@@ -1,65 +1,64 @@
 import { shorthands } from '@fluentui/react-components';
 import { iconClassNames } from '@fluentui/react-northstar';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-export const v9HoverClasses = () => ({
-  [`& .${iconFilledClassName}`]: {
-    display: 'none'
-  },
-  [`& .${iconRegularClassName}`]: {
-    display: 'inline'
-  },
-  '&:hover': {
-    [`& .${iconFilledClassName}`]: {
-      display: 'inline'
-    },
-    [`& .${iconRegularClassName}`]: {
-      display: 'none'
-    }
-  }
-});
-export const v9Icon = () => ({
-  // styles that allow to keep consistent size of v9 icon with v0 icon
-  '& svg': {
-    width: '100%',
-    paddingBottom: '100%',
-    // negative margin is necessary here for centering v9 icon
-    // with v0 button, because of extra spaces that svg contains
-    ...shorthands.margin('-4px', 0, 0, '-4px'),
-    ...shorthands.overflow('visible')
-  },
-  ...v9HoverClasses()
-});
-export const v9CustomSizeIcon = () => ({
-  '& svg': {
-    ...shorthands.overflow('visible')
-  },
-  ...v9HoverClasses()
-});
-export const v0Icon = () => ({
-  [`& .${iconClassNames.outline}`]: {
-    display: 'block'
-  },
-  [`& .${iconClassNames.filled}`]: {
-    display: 'none'
-  },
-  '&:hover': {
-    [`& .${iconClassNames.outline}`]: {
-      display: 'none'
-    },
-    [`& .${iconClassNames.filled}`]: {
-      display: 'block'
-    }
-  }
-});
-export const v9DisabledCursor = () => ({
-  '&:disabled': {
-    cursor: 'default',
-    '&:hover': {
-      cursor: 'default'
-    },
-    '&:hover:active': {
-      cursor: 'default'
-    }
-  }
-});
-//# sourceMappingURL=ButtonMigration.mixins.js.map
+export const v9HoverClasses = ()=>({
+        [`& .${iconFilledClassName}`]: {
+            display: 'none'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'inline'
+        },
+        '&:hover': {
+            [`& .${iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'none'
+            }
+        }
+    });
+export const v9Icon = ()=>({
+        // styles that allow to keep consistent size of v9 icon with v0 icon
+        '& svg': {
+            width: '100%',
+            paddingBottom: '100%',
+            // negative margin is necessary here for centering v9 icon
+            // with v0 button, because of extra spaces that svg contains
+            ...shorthands.margin('-4px', 0, 0, '-4px'),
+            ...shorthands.overflow('visible')
+        },
+        ...v9HoverClasses()
+    });
+export const v9CustomSizeIcon = ()=>({
+        '& svg': {
+            ...shorthands.overflow('visible')
+        },
+        ...v9HoverClasses()
+    });
+export const v0Icon = ()=>({
+        [`& .${iconClassNames.outline}`]: {
+            display: 'block'
+        },
+        [`& .${iconClassNames.filled}`]: {
+            display: 'none'
+        },
+        '&:hover': {
+            [`& .${iconClassNames.outline}`]: {
+                display: 'none'
+            },
+            [`& .${iconClassNames.filled}`]: {
+                display: 'block'
+            }
+        }
+    });
+export const v9DisabledCursor = ()=>({
+        '&:disabled': {
+            cursor: 'default',
+            '&:hover': {
+                cursor: 'default'
+            },
+            '&:hover:active': {
+                cursor: 'default'
+            }
+        }
+    });

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

@@ -1 +1 @@
-{"version":3,"names":["shorthands","iconClassNames","iconFilledClassName","iconRegularClassName","v9HoverClasses","display","v9Icon","width","paddingBottom","margin","overflow","v9CustomSizeIcon","v0Icon","outline","filled","v9DisabledCursor","cursor"],"sources":["../../../src/components/Button/ButtonMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle, shorthands } from '@fluentui/react-components';\nimport { iconClassNames } from '@fluentui/react-northstar';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\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    ...shorthands.margin('-4px', 0, 0, '-4px'),\n    ...shorthands.overflow('visible'),\n  },\n  ...v9HoverClasses(),\n});\n\nexport const v9CustomSizeIcon = (): GriffelStyle => ({\n  '& svg': {\n    ...shorthands.overflow('visible'),\n  },\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"],"mappings":"AAAA,SAAuBA,UAAU,QAAQ;AACzC,SAASC,cAAc,QAAQ;AAC/B,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ;AAE1D,OAAO,MAAMC,cAAA,GAAiBA,CAAA,MAAqB;EACjD,CAAE,MAAKF,mBAAoB,EAAC,GAAG;IAC7BG,OAAA,EAAS;EACX;EACA,CAAE,MAAKF,oBAAqB,EAAC,GAAG;IAC9BE,OAAA,EAAS;EACX;EACA,WAAW;IACT,CAAE,MAAKH,mBAAoB,EAAC,GAAG;MAC7BG,OAAA,EAAS;IACX;IACA,CAAE,MAAKF,oBAAqB,EAAC,GAAG;MAC9BE,OAAA,EAAS;IACX;EACF;AACF;AAEA,OAAO,MAAMC,MAAA,GAASA,CAAA,MAAqB;EACzC;EACA,SAAS;IACPC,KAAA,EAAO;IACPC,aAAA,EAAe;IACf;IACA;IACA,GAAGR,UAAA,CAAWS,MAAM,CAAC,QAAQ,GAAG,GAAG,OAAO;IAC1C,GAAGT,UAAA,CAAWU,QAAQ,CAAC;EACzB;EACA,GAAGN,cAAA;AACL;AAEA,OAAO,MAAMO,gBAAA,GAAmBA,CAAA,MAAqB;EACnD,SAAS;IACP,GAAGX,UAAA,CAAWU,QAAQ,CAAC;EACzB;EACA,GAAGN,cAAA;AACL;AAEA,OAAO,MAAMQ,MAAA,GAASA,CAAA,MAAqB;EACzC,CAAE,MAAKX,cAAA,CAAeY,OAAQ,EAAC,GAAG;IAChCR,OAAA,EAAS;EACX;EACA,CAAE,MAAKJ,cAAA,CAAea,MAAO,EAAC,GAAG;IAC/BT,OAAA,EAAS;EACX;EACA,WAAW;IACT,CAAE,MAAKJ,cAAA,CAAeY,OAAQ,EAAC,GAAG;MAChCR,OAAA,EAAS;IACX;IACA,CAAE,MAAKJ,cAAA,CAAea,MAAO,EAAC,GAAG;MAC/BT,OAAA,EAAS;IACX;EACF;AACF;AAEA,OAAO,MAAMU,gBAAA,GAAmBA,CAAA,MAAqB;EACnD,cAAc;IACZC,MAAA,EAAQ;IACR,WAAW;MACTA,MAAA,EAAQ;IACV;IACA,kBAAkB;MAChBA,MAAA,EAAQ;IACV;EACF;AACF"}
+{"version":3,"sources":["ButtonMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle, shorthands } from '@fluentui/react-components';\nimport { iconClassNames } from '@fluentui/react-northstar';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\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    ...shorthands.margin('-4px', 0, 0, '-4px'),\n    ...shorthands.overflow('visible'),\n  },\n  ...v9HoverClasses(),\n});\n\nexport const v9CustomSizeIcon = (): GriffelStyle => ({\n  '& svg': {\n    ...shorthands.overflow('visible'),\n  },\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":["shorthands","iconClassNames","iconFilledClassName","iconRegularClassName","v9HoverClasses","display","v9Icon","width","paddingBottom","margin","overflow","v9CustomSizeIcon","v0Icon","outline","filled","v9DisabledCursor","cursor"],"mappings":"AAAA,SAAuBA,UAAU,QAAQ,6BAA6B;AACtE,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAElF,OAAO,MAAMC,iBAAiB,IAAqB,CAAA;QACjD,CAAC,CAAC,GAAG,EAAEF,oBAAoB,CAAC,CAAC,EAAE;YAC7BG,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEF,qBAAqB,CAAC,CAAC,EAAE;YAC9BE,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEH,oBAAoB,CAAC,CAAC,EAAE;gBAC7BG,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEF,qBAAqB,CAAC,CAAC,EAAE;gBAC9BE,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMC,SAAS,IAAqB,CAAA;QACzC,oEAAoE;QACpE,SAAS;YACPC,OAAO;YACPC,eAAe;YACf,0DAA0D;YAC1D,4DAA4D;YAC5D,GAAGR,WAAWS,MAAM,CAAC,QAAQ,GAAG,GAAG,OAAO;YAC1C,GAAGT,WAAWU,QAAQ,CAAC,UAAU;QACnC;QACA,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMO,mBAAmB,IAAqB,CAAA;QACnD,SAAS;YACP,GAAGX,WAAWU,QAAQ,CAAC,UAAU;QACnC;QACA,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMQ,SAAS,IAAqB,CAAA;QACzC,CAAC,CAAC,GAAG,EAAEX,eAAeY,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCR,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEJ,eAAea,MAAM,CAAC,CAAC,CAAC,EAAE;YAC/BT,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEJ,eAAeY,OAAO,CAAC,CAAC,CAAC,EAAE;gBAChCR,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEJ,eAAea,MAAM,CAAC,CAAC,CAAC,EAAE;gBAC/BT,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMU,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

@@ -1,2 +1 @@
 export * from './ButtonMigration.mixins';
-//# sourceMappingURL=index.js.map

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

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

package/lib/components/Flex/Flex.js

@@ -2,70 +2,58 @@ import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 import { useFlexStyles } from './Flex.styles';
 export const flexClassName = 'fui-Flex';
-export const Flex = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    column,
-    fill,
-    gap,
-    hAlign,
-    inline,
-    padding,
-    space,
-    vAlign,
-    wrap,
-    className,
-    ...rest
-  } = props;
-  const classes = useFlexStyles();
-  const classMaps = React.useMemo(() => ({
-    alignItems: {
-      start: classes.alignItemsFlexStart,
-      center: classes.alignItemsCenter,
-      end: classes.alignItemsFlexEnd,
-      stretch: classes.alignItemsCenter
-    },
-    justifyContent: {
-      start: classes.justifyContentFlexStart,
-      center: classes.justifyContentCenter,
-      end: classes.justifyContentFlexEnd,
-      stretch: classes.justifyContentStretch
-    },
-    justifyContentSpace: {
-      around: classes.justifyContentSpaceAround,
-      between: classes.justifyContentSpaceBetween,
-      evenly: classes.justifyContentSpaceEvenly
-    },
-    gapForColumnFlex: {
-      'gap.smaller': classes.gapForColumnFlexSmaller,
-      'gap.small': classes.gapForColumnFlexSmall,
-      'gap.medium': classes.gapForColumnFlexMedium,
-      'gap.large': classes.gapForColumnFlexLarge
-    },
-    gapRow: {
-      'gap.smaller': classes.gapForRowFlexSmaller,
-      'gap.small': classes.gapForRowFlexSmall,
-      'gap.medium': classes.gapForRowFlexMedium,
-      'gap.large': classes.gapForRowFlexLarge
-    },
-    paddings: {
-      'padding.medium': classes.paddingMedium
-    }
-  }), [classes]);
-  const flexClasses = mergeClasses(flexClassName, classes.flex, inline && classes.inline, column && classes.column, hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]), vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]), space && classMaps.justifyContentSpace[space], wrap && classes.wrap, fill && classes.fill, gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]), padding && classMaps.paddings[padding], className);
-  const content = React.Children.map(children, child => {
-    var _child_type;
-    // @ts-expect-error __isFlexItem is added to the React type property by N*
-    const isFlexItemElement = child === null || child === void 0 ? void 0 : (_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.__isFlexItem;
-    return isFlexItemElement ? /*#__PURE__*/React.cloneElement(child, {
-      flexDirection: column ? 'column' : 'row'
-    }) : child;
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: flexClasses,
-    ...rest
-  }, content);
+export const Flex = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { children , column , fill , gap , hAlign , inline , padding , space , vAlign , wrap , className , ...rest } = props;
+    const classes = useFlexStyles();
+    const classMaps = React.useMemo(()=>({
+            alignItems: {
+                start: classes.alignItemsFlexStart,
+                center: classes.alignItemsCenter,
+                end: classes.alignItemsFlexEnd,
+                stretch: classes.alignItemsCenter
+            },
+            justifyContent: {
+                start: classes.justifyContentFlexStart,
+                center: classes.justifyContentCenter,
+                end: classes.justifyContentFlexEnd,
+                stretch: classes.justifyContentStretch
+            },
+            justifyContentSpace: {
+                around: classes.justifyContentSpaceAround,
+                between: classes.justifyContentSpaceBetween,
+                evenly: classes.justifyContentSpaceEvenly
+            },
+            gapForColumnFlex: {
+                'gap.smaller': classes.gapForColumnFlexSmaller,
+                'gap.small': classes.gapForColumnFlexSmall,
+                'gap.medium': classes.gapForColumnFlexMedium,
+                'gap.large': classes.gapForColumnFlexLarge
+            },
+            gapRow: {
+                'gap.smaller': classes.gapForRowFlexSmaller,
+                'gap.small': classes.gapForRowFlexSmall,
+                'gap.medium': classes.gapForRowFlexMedium,
+                'gap.large': classes.gapForRowFlexLarge
+            },
+            paddings: {
+                'padding.medium': classes.paddingMedium
+            }
+        }), [
+        classes
+    ]);
+    const flexClasses = mergeClasses(flexClassName, classes.flex, inline && classes.inline, column && classes.column, hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]), vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]), space && classMaps.justifyContentSpace[space], wrap && classes.wrap, fill && classes.fill, gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]), padding && classMaps.paddings[padding], className);
+    const content = React.Children.map(children, (child)=>{
+        var _child_type;
+        // @ts-expect-error __isFlexItem is added to the React type property by N*
+        const isFlexItemElement = child === null || child === void 0 ? void 0 : (_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.__isFlexItem;
+        return isFlexItemElement ? /*#__PURE__*/ React.cloneElement(child, {
+            flexDirection: column ? 'column' : 'row'
+        }) : child;
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: ref,
+        className: flexClasses,
+        ...rest
+    }, content);
 });
 Flex.displayName = 'Flex';
-//# sourceMappingURL=Flex.js.map

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

@@ -1 +1 @@
-{"version":3,"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","_child_type","isFlexItemElement","type","__isFlexItem","cloneElement","flexDirection","createElement","displayName"],"sources":["../../../src/components/Flex/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"],"mappings":"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"}
+{"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,MAAQ;IAClH,MAAM,EAAEC,SAAQ,EAAEC,OAAM,EAAEC,KAAI,EAAEC,IAAG,EAAEC,OAAM,EAAEC,OAAM,EAAEC,QAAO,EAAEC,MAAK,EAAEC,OAAM,EAAEC,KAAI,EAAEC,UAAS,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,QAAS;YAEjBA;QADnC,0EAA0E;QAC1E,MAAMC,oBAA6BD,kBAAAA,mBAAAA,KAAAA,IAAAA,CAAAA,cAAAA,MAAOE,IAAI,cAAXF,yBAAAA,KAAAA,IAAAA,YAAaG,YAAF;QAE9C,OAAOF,kCACH5D,MAAM+D,YAAY,CAACJ,OAA6B;YAC9CK,eAAexD,SAAS,WAAW,KAAK;QAC1C,KACAmD,KAAK;IACX;IAEA,qBACE,oBAACM;QAAI3D,KAAKA;QAAKW,WAAWqC;QAAc,GAAGpC,IAAI;OAC5CsC;AAGP,GAAG;AAEHrD,KAAK+D,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","shorthands","gapValues","smaller","small","medium","large","paddingValues","useFlexStyles","flex","mc9l5x","inline","column","Beiy3e4","alignItemsFlexStart","Bt984gj","alignItemsCenter","alignItemsFlexEnd","alignItemsStretch","justifyContentFlexStart","Brf1p80","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpaceAround","justifyContentSpaceBetween","justifyContentSpaceEvenly","wrap","Eh141a","fill","a9b677","Bqenvij","gapForColumnFlexSmall","Belr9w4","gapForColumnFlexSmaller","gapForColumnFlexMedium","gapForColumnFlexLarge","gapForRowFlexSmall","i8kkvl","gapForRowFlexSmaller","gapForRowFlexMedium","gapForRowFlexLarge","paddingMedium","z8tnut","z189sj","Byoj8tv","uwmqm3","d"],"sources":["../../../src/components/Flex/Flex.styles.ts"],"sourcesContent":["import { makeStyles, shorthands } from '@fluentui/react-components';\n\nconst gapValues = {\n  smaller: '8px',\n  small: '10px',\n  medium: '15px',\n  large: '30px',\n};\n\nconst paddingValues = {\n  medium: '10px',\n};\n\nexport const useFlexStyles = makeStyles({\n  flex: {\n    display: 'flex',\n  },\n  inline: {\n    display: 'inline-flex',\n  },\n  column: {\n    flexDirection: 'column',\n  },\n  alignItemsFlexStart: {\n    alignItems: 'flex-start',\n  },\n  alignItemsCenter: {\n    alignItems: 'center',\n  },\n  alignItemsFlexEnd: {\n    alignItems: 'flex-end',\n  },\n  alignItemsStretch: {\n    alignItems: 'stretch',\n  },\n  justifyContentFlexStart: {\n    justifyContent: 'flex-start',\n  },\n  justifyContentCenter: {\n    justifyContent: 'center',\n  },\n  justifyContentFlexEnd: {\n    justifyContent: 'flex-end',\n  },\n  justifyContentStretch: {\n    justifyContent: 'stretch',\n  },\n  justifyContentSpaceAround: {\n    justifyContent: 'space-around',\n  },\n  justifyContentSpaceBetween: {\n    justifyContent: 'space-between',\n  },\n  justifyContentSpaceEvenly: {\n    justifyContent: 'space-evenly',\n  },\n  wrap: {\n    flexWrap: 'wrap',\n  },\n  fill: {\n    width: '100%',\n    height: '100%',\n  },\n  gapForColumnFlexSmall: {\n    rowGap: gapValues.small,\n  },\n  gapForColumnFlexSmaller: {\n    rowGap: gapValues.smaller,\n  },\n  gapForColumnFlexMedium: {\n    rowGap: gapValues.medium,\n  },\n  gapForColumnFlexLarge: {\n    rowGap: gapValues.large,\n  },\n  gapForRowFlexSmall: {\n    columnGap: gapValues.small,\n  },\n  gapForRowFlexSmaller: {\n    columnGap: gapValues.smaller,\n  },\n  gapForRowFlexMedium: {\n    columnGap: gapValues.medium,\n  },\n  gapForRowFlexLarge: {\n    columnGap: gapValues.large,\n  },\n  paddingMedium: {\n    ...shorthands.padding(paddingValues.medium),\n  },\n});\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,UAAU,QAAQ;AAEvC,MAAMC,SAAA,GAAY;EAChBC,OAAA,EAAS;EACTC,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,KAAA,EAAO;AACT;AAEA,MAAMC,aAAA,GAAgB;EACpBF,MAAA,EAAQ;AACV;AAEA,OAAO,MAAMG,aAAA,gBAAgBR,QAAA;EAAAS,IAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,mBAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAF,OAAA;EAAA;EAAAG,iBAAA;IAAAH,OAAA;EAAA;EAAAI,uBAAA;IAAAC,OAAA;EAAA;EAAAC,oBAAA;IAAAD,OAAA;EAAA;EAAAE,qBAAA;IAAAF,OAAA;EAAA;EAAAG,qBAAA;IAAAH,OAAA;EAAA;EAAAI,yBAAA;IAAAJ,OAAA;EAAA;EAAAK,0BAAA;IAAAL,OAAA;EAAA;EAAAM,yBAAA;IAAAN,OAAA;EAAA;EAAAO,IAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,qBAAA;IAAAC,OAAA;EAAA;EAAAC,uBAAA;IAAAD,OAAA;EAAA;EAAAE,sBAAA;IAAAF,OAAA;EAAA;EAAAG,qBAAA;IAAAH,OAAA;EAAA;EAAAI,kBAAA;IAAAC,MAAA;EAAA;EAAAC,oBAAA;IAAAD,MAAA;EAAA;EAAAE,mBAAA;IAAAF,MAAA;EAAA;EAAAG,kBAAA;IAAAH,MAAA;EAAA;EAAAI,aAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EA6E7B"}
+{"version":3,"names":["__styles","shorthands","gapValues","smaller","small","medium","large","paddingValues","useFlexStyles","flex","mc9l5x","inline","column","Beiy3e4","alignItemsFlexStart","Bt984gj","alignItemsCenter","alignItemsFlexEnd","alignItemsStretch","justifyContentFlexStart","Brf1p80","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpaceAround","justifyContentSpaceBetween","justifyContentSpaceEvenly","wrap","Eh141a","fill","a9b677","Bqenvij","gapForColumnFlexSmall","Belr9w4","gapForColumnFlexSmaller","gapForColumnFlexMedium","gapForColumnFlexLarge","gapForRowFlexSmall","i8kkvl","gapForRowFlexSmaller","gapForRowFlexMedium","gapForRowFlexLarge","paddingMedium","z8tnut","z189sj","Byoj8tv","uwmqm3","d"],"sources":["Flex.styles.js"],"sourcesContent":["import { makeStyles, shorthands } from '@fluentui/react-components';\nconst gapValues = {\n    smaller: '8px',\n    small: '10px',\n    medium: '15px',\n    large: '30px'\n};\nconst paddingValues = {\n    medium: '10px'\n};\nexport const useFlexStyles = makeStyles({\n    flex: {\n        display: 'flex'\n    },\n    inline: {\n        display: 'inline-flex'\n    },\n    column: {\n        flexDirection: 'column'\n    },\n    alignItemsFlexStart: {\n        alignItems: 'flex-start'\n    },\n    alignItemsCenter: {\n        alignItems: 'center'\n    },\n    alignItemsFlexEnd: {\n        alignItems: 'flex-end'\n    },\n    alignItemsStretch: {\n        alignItems: 'stretch'\n    },\n    justifyContentFlexStart: {\n        justifyContent: 'flex-start'\n    },\n    justifyContentCenter: {\n        justifyContent: 'center'\n    },\n    justifyContentFlexEnd: {\n        justifyContent: 'flex-end'\n    },\n    justifyContentStretch: {\n        justifyContent: 'stretch'\n    },\n    justifyContentSpaceAround: {\n        justifyContent: 'space-around'\n    },\n    justifyContentSpaceBetween: {\n        justifyContent: 'space-between'\n    },\n    justifyContentSpaceEvenly: {\n        justifyContent: 'space-evenly'\n    },\n    wrap: {\n        flexWrap: 'wrap'\n    },\n    fill: {\n        width: '100%',\n        height: '100%'\n    },\n    gapForColumnFlexSmall: {\n        rowGap: gapValues.small\n    },\n    gapForColumnFlexSmaller: {\n        rowGap: gapValues.smaller\n    },\n    gapForColumnFlexMedium: {\n        rowGap: gapValues.medium\n    },\n    gapForColumnFlexLarge: {\n        rowGap: gapValues.large\n    },\n    gapForRowFlexSmall: {\n        columnGap: gapValues.small\n    },\n    gapForRowFlexSmaller: {\n        columnGap: gapValues.smaller\n    },\n    gapForRowFlexMedium: {\n        columnGap: gapValues.medium\n    },\n    gapForRowFlexLarge: {\n        columnGap: gapValues.large\n    },\n    paddingMedium: {\n        ...shorthands.padding(paddingValues.medium)\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,UAAU,QAAQ,4BAA4B;AACnE,MAAMC,SAAS,GAAG;EACdC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,aAAa,GAAG;EAClBF,MAAM,EAAE;AACZ,CAAC;AACD,OAAO,MAAMG,aAAa,gBAAGR,QAAA;EAAAS,IAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,mBAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAF,OAAA;EAAA;EAAAG,iBAAA;IAAAH,OAAA;EAAA;EAAAI,uBAAA;IAAAC,OAAA;EAAA;EAAAC,oBAAA;IAAAD,OAAA;EAAA;EAAAE,qBAAA;IAAAF,OAAA;EAAA;EAAAG,qBAAA;IAAAH,OAAA;EAAA;EAAAI,yBAAA;IAAAJ,OAAA;EAAA;EAAAK,0BAAA;IAAAL,OAAA;EAAA;EAAAM,yBAAA;IAAAN,OAAA;EAAA;EAAAO,IAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,qBAAA;IAAAC,OAAA;EAAA;EAAAC,uBAAA;IAAAD,OAAA;EAAA;EAAAE,sBAAA;IAAAF,OAAA;EAAA;EAAAG,qBAAA;IAAAH,OAAA;EAAA;EAAAI,kBAAA;IAAAC,MAAA;EAAA;EAAAC,oBAAA;IAAAD,MAAA;EAAA;EAAAE,mBAAA;IAAAF,MAAA;EAAA;EAAAG,kBAAA;IAAAH,MAAA;EAAA;EAAAI,aAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CA6E5B,CAAC"}