@webiny/admin-ui 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","withStaticProps","makeDecoratable","columnVariants","variants","span","auto","offset","align","top","middle","bottom","defaultVariants","ColumnBase","children","className","props","createElement","Object","assign","Column","gridVariants","gap","none","micro","small","compact","comfortable","spacious","GridBase","DecoratableGrid","Grid"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"col-auto\",\n            1: \"col-span-1\",\n            2: \"col-span-2\",\n            3: \"col-span-3\",\n            4: \"col-span-4\",\n            5: \"col-span-5\",\n            6: \"col-span-6\",\n            7: \"col-span-7\",\n            8: \"col-span-8\",\n            9: \"col-span-9\",\n            10: \"col-span-10\",\n            11: \"col-span-11\",\n            12: \"col-span-12\"\n        },\n        offset: {\n            1: \"col-start-2\",\n            2: \"col-start-3\",\n            3: \"col-start-4\",\n            4: \"col-start-5\",\n            5: \"col-start-6\",\n            6: \"col-start-7\",\n            7: \"col-start-8\",\n            8: \"col-start-9\",\n            9: \"col-start-10\",\n            10: \"col-start-11\",\n            11: \"col-start-12\"\n        },\n        align: {\n            top: \"self-start\",\n            middle: \"self-center\",\n            bottom: \"self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof gridVariants> {\n    children:\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAElD,MAAMC,cAAc,GAAGH,GAAG,CAAC,EAAE,EAAE;EAC3BI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,UAAU;MAChB,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE;IACR,CAAC;IACDC,MAAM,EAAE;MACJ,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,cAAc;MACjB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,GAAG,EAAE,YAAY;MACjBC,MAAM,EAAE,aAAa;MACrBC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAQF,MAAMQ,UAAU,GAAGA,CAAC;EAAER,IAAI;EAAEG,KAAK;EAAEM,QAAQ;EAAEC,SAAS;EAAER,MAAM;EAAE,GAAGS;AAAmB,CAAC,KAAK;EACxF,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAACI,cAAc,CAAC;MAAEE,IAAI;MAAEE,MAAM;MAAEC;IAAM,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC7ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,MAAM,GAAGlB,eAAe,CAAC,QAAQ,EAAEW,UAAU,CAAC;AAEpD,MAAMQ,YAAY,GAAGrB,GAAG,CAAC,MAAM,EAAE;EAC7BI,QAAQ,EAAE;IACNkB,GAAG,EAAE;MACDC,IAAI,EAAE,OAAO;MACbC,KAAK,EAAE,QAAQ;MACfC,KAAK,EAAE,QAAQ;MACfC,OAAO,EAAE,QAAQ;MACjBC,WAAW,EAAE,QAAQ;MACrBC,QAAQ,EAAE;IACd;EACJ,CAAC;EACDhB,eAAe,EAAE;IACbU,GAAG,EAAE;EACT;AACJ,CAAC,CAAC;AAUF,MAAMO,QAAQ,GAAGA,CAAC;EAAEP,GAAG;EAAER,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACpE,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAAC,cAAc,EAAEsB,YAAY,CAAC;MAAEC;IAAI,CAAC,CAAC,EAAEP,SAAS;EAAE,IAC3ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMgB,eAAe,GAAG5B,eAAe,CAAC,MAAM,EAAE2B,QAAQ,CAAC;AAEzD,MAAME,IAAI,GAAG9B,eAAe,CAAC6B,eAAe,EAAE;EAAEV;AAAO,CAAC,CAAC;AAEzD,SAASW,IAAI","ignoreList":[]}
+{"version":3,"file":"Grid/Grid.js","sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"col-auto\",\n            1: \"col-span-1\",\n            2: \"col-span-2\",\n            3: \"col-span-3\",\n            4: \"col-span-4\",\n            5: \"col-span-5\",\n            6: \"col-span-6\",\n            7: \"col-span-7\",\n            8: \"col-span-8\",\n            9: \"col-span-9\",\n            10: \"col-span-10\",\n            11: \"col-span-11\",\n            12: \"col-span-12\"\n        },\n        offset: {\n            1: \"col-start-2\",\n            2: \"col-start-3\",\n            3: \"col-start-4\",\n            4: \"col-start-5\",\n            5: \"col-start-6\",\n            6: \"col-start-7\",\n            7: \"col-start-8\",\n            8: \"col-start-9\",\n            9: \"col-start-10\",\n            10: \"col-start-11\",\n            11: \"col-start-12\"\n        },\n        align: {\n            top: \"self-start\",\n            middle: \"self-center\",\n            bottom: \"self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {\n    children:\n        | null\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"names":["columnVariants","cva","ColumnBase","span","align","children","className","offset","props","cn","Column","makeDecoratable","gridVariants","GridBase","gap","DecoratableGrid","Grid","withStaticProps"],"mappings":";;AAGA,MAAMA,iBAAiBC,IAAI,IAAI;IAC3B,UAAU;QACN,MAAM;YACF,MAAM;YACN,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,QAAQ;YACJ,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;QACR;QACA,OAAO;YACH,KAAK;YACL,QAAQ;YACR,QAAQ;QACZ;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAOA,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGC,OAAoB,GAC5E,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAGT,eAAe;YAAEG;YAAMI;YAAQH;QAAM,IAAIE;OAClED;AAKb,MAAMK,SAASC,gBAAgB,UAAUT;AAEzC,MAAMU,eAAeX,IAAI,QAAQ;IAC7B,UAAU;QACN,KAAK;YACD,MAAM;YACN,OAAO;YACP,OAAO;YACP,SAAS;YACT,aAAa;YACb,UAAU;QACd;IACJ;IACA,iBAAiB;QACb,KAAK;IACT;AACJ;AAUA,MAAMY,WAAW,CAAC,EAAEC,GAAG,EAAET,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAAkB,GACxD,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAG,gBAAgBG,aAAa;YAAEE;QAAI,IAAIR;OAChED;AAKb,MAAMU,kBAAkBJ,gBAAgB,QAAQE;AAEhD,MAAMG,OAAOC,gBAAgBF,iBAAiB;IAAEL,QAAAA;AAAO"}

package/Grid/Grid.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as GridStories from './Grid.stories';
+import * as GridStories from "./Grid.stories";
 
 <Meta of={GridStories} />
 
@@ -13,56 +13,44 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridExample = () => {
-    return (
-        <Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 9
-            </Grid.Column>
-        </Grid>
-    );
-};
+return (
+
+<Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 1</Grid.Column>
+  <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+    Col 2<br />
+    Span: 3
+  </Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 3</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 4</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 5</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 6</Grid.Column>
+  <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+    Col 7<br />
+    Span: 2
+  </Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 8</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 9</Grid.Column>
+</Grid>
+); };
 
 export default GridExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Grid/Grid.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Grid/Grid.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={GridStories.Documentation}/>
+<Controls of={GridStories.Documentation} />
 
 ## Usage
 
@@ -71,37 +59,39 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridExample = () => {
-    return (
-        <Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 9
-            </Grid.Column>
-        </Grid>
-    );
+  return (
+    <Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 1
+      </Grid.Column>
+      <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 2<br />
+        Span: 3
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 3
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 4
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 5
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 6
+      </Grid.Column>
+      <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 7<br />
+        Span: 2
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 8
+      </Grid.Column>
+      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+        Col 9
+      </Grid.Column>
+    </Grid>
+  );
 };
 
 export default GridExample;
@@ -110,6 +100,7 @@ export default GridExample;
 ## Examples
 
 ### Spacious Gap
+
 To have more spacing between grid columns, you can use the `gap` prop and set it to `spacious`.
 
 <Canvas of={GridStories.WithGapSpacious}  source={ { code: `
@@ -117,38 +108,26 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridSpaciousExample = () => {
-    return (
-        <Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
-                Col 9
-            </Grid.Column>
-        </Grid>
-    );
-};
+return (
+
+<Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 1</Grid.Column>
+  <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+    Col 2<br />
+    Span: 3
+  </Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 3</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 4</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 5</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 6</Grid.Column>
+  <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
+    Col 7<br />
+    Span: 2
+  </Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 8</Grid.Column>
+  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 9</Grid.Column>
+</Grid>
+); };
 
     export default GridSpaciousExample;
 
@@ -156,6 +135,7 @@ const GridSpaciousExample = () => {
 />
 
 ### With Offset
+
 With Offset, you can create a grid with a specific offset. The offset is applied to columns, e.g. `<Grid.Column span={8} offset={2}/>`. Please refer to the example - click on **Show code** to see code example.
 
 <Canvas of={GridStories.WithOffset}  source={ { code: `
@@ -163,8 +143,9 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridWithOffsetExample = () => {
-    return (
-        <Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
+return (
+
+<Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
 
                 {/* Row 1 */}
                 <Grid.Column span={8} offset={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
@@ -204,46 +185,55 @@ const GridWithOffsetExample = () => {
 />
 
 ## Horizontal Grids
+
 The grids within the Webiny Design System behave as fixed and fluid elements relevant to the elements on the page.
 
 ### Grid types
+
 Webiny Design System use two types of grids: fluid and fixed. Both grid types use breakpoints to determine whether the layout needs to change between viewport sizes.
 
 ### Fluid
-The fluid grid stretches across an area to fill all available space within the screen, part of the screen or within the specific element if needed.
 
-<img src="/images/storybook/grid/fluid.png" alt="Fluid"/>
+The fluid grid stretches across an area to fill all available space within the screen, part of the screen or within the specific element if needed.
 
-<img src="/images/storybook/grid/fluid-dashboard.png" alt="Fluid Dashboard"/>
+<img src="/images/storybook/grid/fluid.png" alt="Fluid" />
 
+<img src="/images/storybook/grid/fluid-dashboard.png" alt="Fluid Dashboard" />
 
 ### Fixed
+
 The fixed grid applies the ideal maximum width to page or page element.
 
-<img src="/images/storybook/grid/fixed.png" alt="Fixed"/>
+<img src="/images/storybook/grid/fixed.png" alt="Fixed" />
 
-<img src="/images/storybook/grid/fixed-dashboard.png" alt="Fixed Dashboard"/>
+<img src="/images/storybook/grid/fixed-dashboard.png" alt="Fixed Dashboard" />
 
 ## Grid Gutter Sizes
+
 We considered using two main sizes for grid application, to be used dependent on the content type.
 
 ### Comfortable (Default)
-<img src="/images/storybook/grid/grid-gutter-size-comfortable.png" alt="Comfortable (Default)"/>
+
+<img src="/images/storybook/grid/grid-gutter-size-comfortable.png" alt="Comfortable (Default)" />
 
 ### Spacious
-<img src="/images/storybook/grid/grid-gutter-size-spacious.png" alt="Spacious"/>
+
+<img src="/images/storybook/grid/grid-gutter-size-spacious.png" alt="Spacious" />
 
 ## Breakpoints
+
 A breakpoint marks the point where a website’s layout adapts to provide the best user experience. In responsive design, the range of each breakpoint defines the ideal number of columns for a given viewport size, along with the suggested widths for margins and gutters.
 
-<img src="/images/storybook/grid/breakpoints.png" alt="Breakpoints"/>
+<img src="/images/storybook/grid/breakpoints.png" alt="Breakpoints" />
 
 ## Column Spans
+
 Content should be distributed across a minimum of 3 columns, with the option to extend up to 12 columns. To achieve a range of layouts, vary the number of columns used, allowing for flexible design across different breakpoints.
 
-<img src="/images/storybook/grid/column-spans.png" alt="Column Spans"/>
+<img src="/images/storybook/grid/column-spans.png" alt="Column Spans" />
 
 ## Column Offsets
+
 Content isn't required to span the full 12 columns. It can cover a smaller number of columns, creating a layout where the content is centered within a 12-column grid.
 
-<img src="/images/storybook/grid/column-offsets.png" alt="Column Offsets"/>
+<img src="/images/storybook/grid/column-offsets.png" alt="Column Offsets" />

package/Grid/Grid.stories.js

@@ -1,144 +1,151 @@
-import React from "react";
+import react from "react";
 import { Grid } from "./Grid.js";
 import { StyledColumn } from "./stories/StyledColumn.js";
 const meta = {
-  title: "Components/Grid",
-  component: Grid,
-  parameters: {
-    layout: "padded"
-  }
+    title: "Components/Grid",
+    component: Grid,
+    parameters: {
+        layout: "padded"
+    }
 };
-export default meta;
-export const Default = {
-  args: {
-    className: "bg-neutral-light p-md w-full",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 1
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 2,
-      span: 3
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 3
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 4
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 5
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 6
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 7,
-      span: 2
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 8
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      index: 9
-    }))
-  }
+const Grid_stories = meta;
+const Default = {
+    args: {
+        className: "bg-neutral-light p-md w-full",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 1
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 2,
+            span: 3
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 3
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 4
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 5
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 6
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 7,
+            span: 2
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 8
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            index: 9
+        }))
+    }
 };
-export const WithGapNone = {
-  args: {
-    ...Default.args,
-    gap: "none"
-  }
+const WithGapNone = {
+    args: {
+        ...Default.args,
+        gap: "none"
+    }
 };
-export const WithGapMicro = {
-  args: {
-    ...Default.args,
-    gap: "micro"
-  }
+const WithGapMicro = {
+    args: {
+        ...Default.args,
+        gap: "micro"
+    }
 };
-export const WithGapSmall = {
-  args: {
-    ...Default.args,
-    gap: "small"
-  }
+const WithGapSmall = {
+    args: {
+        ...Default.args,
+        gap: "small"
+    }
 };
-export const WithGapCompact = {
-  args: {
-    ...Default.args,
-    gap: "compact"
-  }
+const WithGapCompact = {
+    args: {
+        ...Default.args,
+        gap: "compact"
+    }
 };
-export const WithGapComfortable = {
-  args: {
-    ...Default.args,
-    gap: "comfortable"
-  }
+const WithGapComfortable = {
+    args: {
+        ...Default.args,
+        gap: "comfortable"
+    }
 };
-export const WithGapSpacious = {
-  args: {
-    ...Default.args,
-    gap: "spacious"
-  }
+const WithGapSpacious = {
+    args: {
+        ...Default.args,
+        gap: "spacious"
+    }
 };
-export const WithOffset = {
-  parameters: {
-    layout: "padded"
-  },
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledColumn, {
-      span: 8,
-      offset: 2,
-      index: 1
-    }), /*#__PURE__*/React.createElement(Grid.Column, {
-      span: 2
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      span: 8,
-      offset: 4,
-      index: 1
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      span: 10,
-      offset: 1,
-      index: 1
-    }), /*#__PURE__*/React.createElement(Grid.Column, {
-      span: 1
-    }), /*#__PURE__*/React.createElement(StyledColumn, {
-      span: 12,
-      index: 1
-    }))
-  }
+const WithOffset = {
+    parameters: {
+        layout: "padded"
+    },
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(StyledColumn, {
+            span: 8,
+            offset: 2,
+            index: 1
+        }), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 2
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            span: 8,
+            offset: 4,
+            index: 1
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            span: 10,
+            offset: 1,
+            index: 1
+        }), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 1
+        }), /*#__PURE__*/ react.createElement(StyledColumn, {
+            span: 12,
+            index: 1
+        }))
+    }
 };
-export const Documentation = {
-  render: args => {
-    return /*#__PURE__*/React.createElement(Grid, args, /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
-    }, "Col 1"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm",
-      span: 3
-    }, "Col 2", /*#__PURE__*/React.createElement("br", null), "Span: 3"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
-    }, "Col 3"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
-    }, "Col 4"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
-    }, "Col 5"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
-    }, "Col 6"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm",
-      span: 2
-    }, "Col 7", /*#__PURE__*/React.createElement("br", null), "Span: 2"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
-    }, "Col 8"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
-    }, "Col 9"));
-  },
-  args: {
-    gap: "comfortable",
-    className: "bg-neutral-light p-md w-full"
-  },
-  argTypes: {
-    gap: {
-      description: "Spacing between grid columns",
-      control: "select",
-      options: ["none", "micro", "small", "compact", "comfortable", "spacious"],
-      defaultValue: "comfortable"
+const Documentation = {
+    render: (args)=>/*#__PURE__*/ react.createElement(Grid, args, /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
+        }, "Col 1"), /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm",
+            span: 3
+        }, "Col 2", /*#__PURE__*/ react.createElement("br", null), "Span: 3"), /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
+        }, "Col 3"), /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
+        }, "Col 4"), /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
+        }, "Col 5"), /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
+        }, "Col 6"), /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm",
+            span: 2
+        }, "Col 7", /*#__PURE__*/ react.createElement("br", null), "Span: 2"), /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
+        }, "Col 8"), /*#__PURE__*/ react.createElement(Grid.Column, {
+            className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
+        }, "Col 9")),
+    args: {
+        gap: "comfortable",
+        className: "bg-neutral-light p-md w-full"
     },
-    className: {
-      description: "Additional CSS class names. You can pass multiple class names that will be applied to Grid.",
-      control: "text"
+    argTypes: {
+        gap: {
+            description: "Spacing between grid columns",
+            control: "select",
+            options: [
+                "none",
+                "micro",
+                "small",
+                "compact",
+                "comfortable",
+                "spacious"
+            ],
+            defaultValue: "comfortable"
+        },
+        className: {
+            description: "Additional CSS class names. You can pass multiple class names that will be applied to Grid.",
+            control: "text"
+        }
     }
-  }
 };
+export default Grid_stories;
+export { Default, Documentation, WithGapComfortable, WithGapCompact, WithGapMicro, WithGapNone, WithGapSmall, WithGapSpacious, WithOffset };
 
 //# sourceMappingURL=Grid.stories.js.map