@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

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

package/Grid/Grid.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Grid","StyledColumn","meta","title","component","parameters","layout","Default","args","className","children","createElement","Fragment","index","span","WithGapNone","gap","WithGapMicro","WithGapSmall","WithGapCompact","WithGapComfortable","WithGapSpacious","WithOffset","offset","Column","Documentation","render","argTypes","description","control","options","defaultValue"],"sources":["Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Grid } from \"./Grid.js\";\nimport { StyledColumn } from \"./stories/StyledColumn.js\";\n\nconst meta: Meta<typeof Grid> = {\n    title: \"Components/Grid\",\n    component: Grid,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Grid>;\n\nexport const Default: Story = {\n    args: {\n        className: \"bg-neutral-light p-md w-full\",\n        children: (\n            <>\n                <StyledColumn index={1} />\n                <StyledColumn index={2} span={3} />\n                <StyledColumn index={3} />\n                <StyledColumn index={4} />\n                <StyledColumn index={5} />\n                <StyledColumn index={6} />\n                <StyledColumn index={7} span={2} />\n                <StyledColumn index={8} />\n                <StyledColumn index={9} />\n            </>\n        )\n    }\n};\n\nexport const WithGapNone: Story = {\n    args: {\n        ...Default.args,\n        gap: \"none\"\n    }\n};\n\nexport const WithGapMicro: Story = {\n    args: {\n        ...Default.args,\n        gap: \"micro\"\n    }\n};\n\nexport const WithGapSmall: Story = {\n    args: {\n        ...Default.args,\n        gap: \"small\"\n    }\n};\n\nexport const WithGapCompact: Story = {\n    args: {\n        ...Default.args,\n        gap: \"compact\"\n    }\n};\n\nexport const WithGapComfortable: Story = {\n    args: {\n        ...Default.args,\n        gap: \"comfortable\"\n    }\n};\n\nexport const WithGapSpacious: Story = {\n    args: {\n        ...Default.args,\n        gap: \"spacious\"\n    }\n};\n\nexport const WithOffset: Story = {\n    parameters: {\n        layout: \"padded\"\n    },\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                {/* Row 1 */}\n                <StyledColumn span={8} offset={2} index={1} />\n                <Grid.Column span={2} />\n\n                {/* Row 2 */}\n                <StyledColumn span={8} offset={4} index={1} />\n\n                {/* Row 3 */}\n                <StyledColumn span={10} offset={1} index={1} />\n                <Grid.Column span={1} />\n\n                {/* Row 4 */}\n                <StyledColumn span={12} index={1} />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Grid {...args}>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 1\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={3}\n                >\n                    Col 2<br />\n                    Span: 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 4\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 5\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 6\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={2}\n                >\n                    Col 7<br />\n                    Span: 2\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 8\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 9\n                </Grid.Column>\n            </Grid>\n        );\n    },\n    args: {\n        gap: \"comfortable\",\n        className: \"bg-neutral-light p-md w-full\"\n    },\n    argTypes: {\n        gap: {\n            description: \"Spacing between grid columns\",\n            control: \"select\",\n            options: [\"none\", \"micro\", \"small\", \"compact\", \"comfortable\", \"spacious\"],\n            defaultValue: \"comfortable\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names that will be applied to Grid.\",\n            control: \"text\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Grid/Grid.stories.js","sources":["../../src/Grid/Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Grid } from \"./Grid.js\";\nimport { StyledColumn } from \"./stories/StyledColumn.js\";\n\nconst meta: Meta<typeof Grid> = {\n    title: \"Components/Grid\",\n    component: Grid,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Grid>;\n\nexport const Default: Story = {\n    args: {\n        className: \"bg-neutral-light p-md w-full\",\n        children: (\n            <>\n                <StyledColumn index={1} />\n                <StyledColumn index={2} span={3} />\n                <StyledColumn index={3} />\n                <StyledColumn index={4} />\n                <StyledColumn index={5} />\n                <StyledColumn index={6} />\n                <StyledColumn index={7} span={2} />\n                <StyledColumn index={8} />\n                <StyledColumn index={9} />\n            </>\n        )\n    }\n};\n\nexport const WithGapNone: Story = {\n    args: {\n        ...Default.args,\n        gap: \"none\"\n    }\n};\n\nexport const WithGapMicro: Story = {\n    args: {\n        ...Default.args,\n        gap: \"micro\"\n    }\n};\n\nexport const WithGapSmall: Story = {\n    args: {\n        ...Default.args,\n        gap: \"small\"\n    }\n};\n\nexport const WithGapCompact: Story = {\n    args: {\n        ...Default.args,\n        gap: \"compact\"\n    }\n};\n\nexport const WithGapComfortable: Story = {\n    args: {\n        ...Default.args,\n        gap: \"comfortable\"\n    }\n};\n\nexport const WithGapSpacious: Story = {\n    args: {\n        ...Default.args,\n        gap: \"spacious\"\n    }\n};\n\nexport const WithOffset: Story = {\n    parameters: {\n        layout: \"padded\"\n    },\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                {/* Row 1 */}\n                <StyledColumn span={8} offset={2} index={1} />\n                <Grid.Column span={2} />\n\n                {/* Row 2 */}\n                <StyledColumn span={8} offset={4} index={1} />\n\n                {/* Row 3 */}\n                <StyledColumn span={10} offset={1} index={1} />\n                <Grid.Column span={1} />\n\n                {/* Row 4 */}\n                <StyledColumn span={12} index={1} />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Grid {...args}>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 1\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={3}\n                >\n                    Col 2<br />\n                    Span: 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 4\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 5\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 6\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={2}\n                >\n                    Col 7<br />\n                    Span: 2\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 8\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 9\n                </Grid.Column>\n            </Grid>\n        );\n    },\n    args: {\n        gap: \"comfortable\",\n        className: \"bg-neutral-light p-md w-full\"\n    },\n    argTypes: {\n        gap: {\n            description: \"Spacing between grid columns\",\n            control: \"select\",\n            options: [\"none\", \"micro\", \"small\", \"compact\", \"comfortable\", \"spacious\"],\n            defaultValue: \"comfortable\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names that will be applied to Grid.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Grid","Default","StyledColumn","WithGapNone","WithGapMicro","WithGapSmall","WithGapCompact","WithGapComfortable","WithGapSpacious","WithOffset","Documentation","args"],"mappings":";;;AAMA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,WAAW;QACX,UAAU,WAAV,GACI,wDACI,oBAACC,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;;IAGjC;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMI,eAAsB;IAC/B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMK,iBAAwB;IACjC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMO,kBAAyB;IAClC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,YAAY;QACR,QAAQ;IACZ;IACA,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDAEI,oBAACC,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BACzC,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BAGzC,oBAACA,cAAYA;YAAC,MAAM;YAAI,QAAQ;YAAG,OAAO;0BAC1C,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAI,OAAO;;IAG3C;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,oBAACX,MAASW,MAAAA,WAAAA,GACN,oBAACX,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD;IAM1F,MAAM;QACF,KAAK;QACL,WAAW;IACf;IACA,UAAU;QACN,KAAK;YACD,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAS;gBAAS;gBAAW;gBAAe;aAAW;YACzE,cAAc;QAClB;QACA,WAAW;YACP,aACI;YACJ,SAAS;QACb;IACJ;AACJ"}

package/Grid/index.js

@@ -1,3 +1 @@
 export * from "./Grid.js";
-
-//# sourceMappingURL=index.js.map

package/Grid/stories/StyledColumn.js

@@ -1,7 +1,9 @@
-import React from "react";
+import react from "react";
 import { Grid } from "../index.js";
-export const StyledColumn = props => /*#__PURE__*/React.createElement(Grid.Column, Object.assign({
-  className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
-}, props), "Col ", props.index, props.span && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("code", null, "span: ", props.span)), props.offset && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("code", null, "offset: ", props.offset)));
+const StyledColumn = (props)=>/*#__PURE__*/ react.createElement(Grid.Column, {
+        className: "bg-primary text-neutral-light p-2 text-md rounded-sm",
+        ...props
+    }, "Col ", props.index, props.span && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("br", null), /*#__PURE__*/ react.createElement("code", null, "span: ", props.span)), props.offset && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("br", null), /*#__PURE__*/ react.createElement("code", null, "offset: ", props.offset)));
+export { StyledColumn };
 
 //# sourceMappingURL=StyledColumn.js.map

package/Grid/stories/StyledColumn.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Grid","StyledColumn","props","createElement","Column","Object","assign","className","index","span","Fragment","offset"],"sources":["StyledColumn.tsx"],"sourcesContent":["import React from \"react\";\nimport { type ColumnProps, Grid } from \"~/Grid/index.js\";\n\nexport interface StyledColumnProps extends ColumnProps {\n    index: number;\n}\n\nexport const StyledColumn = (props: StyledColumnProps) => (\n    <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\" {...props}>\n        Col {props.index}\n        {props.span && (\n            <>\n                <br />\n                <code>span: {props.span}</code>\n            </>\n        )}\n        {props.offset && (\n            <>\n                <br />\n                <code>offset: {props.offset}</code>\n            </>\n        )}\n    </Grid.Column>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAA2BC,IAAI;AAM/B,OAAO,MAAMC,YAAY,GAAIC,KAAwB,iBACjDH,KAAA,CAAAI,aAAA,CAACH,IAAI,CAACI,MAAM,EAAAC,MAAA,CAAAC,MAAA;EAACC,SAAS,EAAC;AAAsD,GAAKL,KAAK,GAAE,MACjF,EAACA,KAAK,CAACM,KAAK,EACfN,KAAK,CAACO,IAAI,iBACPV,KAAA,CAAAI,aAAA,CAAAJ,KAAA,CAAAW,QAAA,qBACIX,KAAA,CAAAI,aAAA,WAAK,CAAC,eACNJ,KAAA,CAAAI,aAAA,eAAM,QAAM,EAACD,KAAK,CAACO,IAAW,CAChC,CACL,EACAP,KAAK,CAACS,MAAM,iBACTZ,KAAA,CAAAI,aAAA,CAAAJ,KAAA,CAAAW,QAAA,qBACIX,KAAA,CAAAI,aAAA,WAAK,CAAC,eACNJ,KAAA,CAAAI,aAAA,eAAM,UAAQ,EAACD,KAAK,CAACS,MAAa,CACpC,CAEG,CAChB","ignoreList":[]}
+{"version":3,"file":"Grid/stories/StyledColumn.js","sources":["../../../src/Grid/stories/StyledColumn.tsx"],"sourcesContent":["import React from \"react\";\nimport { type ColumnProps, Grid } from \"~/Grid/index.js\";\n\nexport interface StyledColumnProps extends ColumnProps {\n    index: number;\n}\n\nexport const StyledColumn = (props: StyledColumnProps) => (\n    <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\" {...props}>\n        Col {props.index}\n        {props.span && (\n            <>\n                <br />\n                <code>span: {props.span}</code>\n            </>\n        )}\n        {props.offset && (\n            <>\n                <br />\n                <code>offset: {props.offset}</code>\n            </>\n        )}\n    </Grid.Column>\n);\n"],"names":["StyledColumn","props","Grid"],"mappings":";;AAOO,MAAMA,eAAe,CAACC,QAAAA,WAAAA,GACzB,oBAACC,KAAK,MAAM;QAAC,WAAU;QAAwD,GAAGD,KAAK;OAAE,QAChFA,MAAM,KAAK,EACfA,MAAM,IAAI,IAAI,WAAJ,GACP,wDACI,oBAAC,2BACD,oBAAC,cAAK,UAAOA,MAAM,IAAI,IAG9BA,MAAM,MAAM,IAAI,WAAJ,GACT,wDACI,oBAAC,2BACD,oBAAC,cAAK,YAASA,MAAM,MAAM"}

package/HeaderBar/HeaderBar.js

@@ -1,23 +1,16 @@
-import React from "react";
+import react from "react";
 import { cn, makeDecoratable } from "../utils.js";
 import { Separator } from "../Separator/index.js";
-const HeaderBarBase = ({
-  start,
-  middle,
-  end,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: cn("grid grid-cols-[1fr_auto_1fr] w-full py-xs-plus px-sm bg-neutral-base", className)
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: "h-full flex items-center min-w-0 flex-1"
-  }, start), /*#__PURE__*/React.createElement("div", {
-    className: "h-full flex items-center"
-  }, middle), /*#__PURE__*/React.createElement("div", {
-    className: "h-full flex items-center justify-self-end"
-  }, end)), /*#__PURE__*/React.createElement(Separator, null));
-};
+const HeaderBarBase = ({ start, middle, end, className, ...props })=>/*#__PURE__*/ react.createElement("header", null, /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid grid-cols-[1fr_auto_1fr] w-full py-xs-plus px-sm bg-neutral-base", className),
+        ...props
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "h-full flex items-center min-w-0 flex-1"
+    }, start), /*#__PURE__*/ react.createElement("div", {
+        className: "h-full flex items-center"
+    }, middle), /*#__PURE__*/ react.createElement("div", {
+        className: "h-full flex items-center justify-self-end"
+    }, end)), /*#__PURE__*/ react.createElement(Separator, null));
 const HeaderBar = makeDecoratable("HeaderBar", HeaderBarBase);
 export { HeaderBar };
 

package/HeaderBar/HeaderBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","Separator","HeaderBarBase","start","middle","end","className","props","createElement","Object","assign","HeaderBar"],"sources":["HeaderBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\ninterface HeaderBarProps extends React.HTMLAttributes<HTMLDivElement> {\n    start?: React.ReactNode;\n    middle?: React.ReactNode;\n    end?: React.ReactNode;\n}\n\nconst HeaderBarBase = ({ start, middle, end, className, ...props }: HeaderBarProps) => {\n    return (\n        <header>\n            <div\n                className={cn(\n                    \"grid grid-cols-[1fr_auto_1fr] w-full py-xs-plus px-sm bg-neutral-base\",\n                    className\n                )}\n                {...props}\n            >\n                <div className=\"h-full flex items-center min-w-0 flex-1\">{start}</div>\n                <div className=\"h-full flex items-center\">{middle}</div>\n                <div className=\"h-full flex items-center justify-self-end\">{end}</div>\n            </div>\n            <Separator />\n        </header>\n    );\n};\n\nconst HeaderBar = makeDecoratable(\"HeaderBar\", HeaderBarBase);\n\nexport { HeaderBar, type HeaderBarProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,SAAS;AAQlB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC,MAAM;EAAEC,GAAG;EAAEC,SAAS;EAAE,GAAGC;AAAsB,CAAC,KAAK;EACnF,oBACIT,KAAA,CAAAU,aAAA,8BACIV,KAAA,CAAAU,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACIJ,SAAS,EAAEP,EAAE,CACT,uEAAuE,EACvEO,SACJ;EAAE,GACEC,KAAK,gBAETT,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAAyC,GAAEH,KAAW,CAAC,eACtEL,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAA0B,GAAEF,MAAY,CAAC,eACxDN,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAA2C,GAAED,GAAS,CACpE,CAAC,eACNP,KAAA,CAAAU,aAAA,CAACP,SAAS,MAAE,CACR,CAAC;AAEjB,CAAC;AAED,MAAMU,SAAS,GAAGX,eAAe,CAAC,WAAW,EAAEE,aAAa,CAAC;AAE7D,SAASS,SAAS","ignoreList":[]}
+{"version":3,"file":"HeaderBar/HeaderBar.js","sources":["../../src/HeaderBar/HeaderBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\ninterface HeaderBarProps extends React.HTMLAttributes<HTMLDivElement> {\n    start?: React.ReactNode;\n    middle?: React.ReactNode;\n    end?: React.ReactNode;\n}\n\nconst HeaderBarBase = ({ start, middle, end, className, ...props }: HeaderBarProps) => {\n    return (\n        <header>\n            <div\n                className={cn(\n                    \"grid grid-cols-[1fr_auto_1fr] w-full py-xs-plus px-sm bg-neutral-base\",\n                    className\n                )}\n                {...props}\n            >\n                <div className=\"h-full flex items-center min-w-0 flex-1\">{start}</div>\n                <div className=\"h-full flex items-center\">{middle}</div>\n                <div className=\"h-full flex items-center justify-self-end\">{end}</div>\n            </div>\n            <Separator />\n        </header>\n    );\n};\n\nconst HeaderBar = makeDecoratable(\"HeaderBar\", HeaderBarBase);\n\nexport { HeaderBar, type HeaderBarProps };\n"],"names":["HeaderBarBase","start","middle","end","className","props","cn","Separator","HeaderBar","makeDecoratable"],"mappings":";;;AAUA,MAAMA,gBAAgB,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGC,OAAuB,GACvE,WAAP,GACI,oBAAC,8BACG,oBAAC;QACG,WAAWC,GACP,yEACAF;QAEH,GAAGC,KAAK;qBAET,oBAAC;QAAI,WAAU;OAA2CJ,QAAAA,WAAAA,GAC1D,oBAAC;QAAI,WAAU;OAA4BC,SAAAA,WAAAA,GAC3C,oBAAC;QAAI,WAAU;OAA6CC,OAAAA,WAAAA,GAEhE,oBAACI,WAASA;AAKtB,MAAMC,YAAYC,gBAAgB,aAAaT"}

package/HeaderBar/HeaderBar.stories.js

@@ -1,98 +1,102 @@
-import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
 import { HeaderBar } from "./HeaderBar.js";
-import React from "react";
+import react from "react";
 import { Button, IconButton } from "../Button/index.js";
 import { Avatar } from "../Avatar/index.js";
 import { Text } from "../Text/index.js";
 const meta = {
-  title: "Components/HeaderBar",
-  component: HeaderBar,
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-[#f4f4f4] h-[500px] w-[850px]  rounded-[5px] px-[50px] content-center"
-  }, /*#__PURE__*/React.createElement(Story, null))]
+    title: "Components/HeaderBar",
+    component: HeaderBar,
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-[#f4f4f4] h-[500px] w-[850px]  rounded-[5px] px-[50px] content-center"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
 };
-export default meta;
-const StartExample = () => /*#__PURE__*/React.createElement(Text, {
-  size: "sm",
-  className: "text-neutral-dimmed"
-}, "Headless CMS / Articles / The best article ever");
-const MiddleExample = () => /*#__PURE__*/React.createElement(React.Fragment, null, "Content in the middle");
-const EndExample = () => /*#__PURE__*/React.createElement("div", {
-  className: "flex gap-x-sm"
-}, /*#__PURE__*/React.createElement(Button, {
-  variant: "ghost",
-  size: "md",
-  text: "Root tenant"
-}), /*#__PURE__*/React.createElement("div", {
-  className: "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
-}, /*#__PURE__*/React.createElement(Avatar, {
-  size: "sm",
-  variant: "strong",
-  image: /*#__PURE__*/React.createElement(Avatar.Image, {
-    src: "https://i.pravatar.cc/300"
-  }),
-  fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, {
-    delayMs: 0
-  }, "W")
-}), /*#__PURE__*/React.createElement(IconButton, {
-  variant: "ghost",
-  size: "xs",
-  color: "neutral-strong",
-  icon: /*#__PURE__*/React.createElement(KeyboardArrowRightIcon, null),
-  onClick: () => console.log("clicked")
-})));
-export const Default = {
-  args: {
-    start: /*#__PURE__*/React.createElement(StartExample, null),
-    middle: /*#__PURE__*/React.createElement(MiddleExample, null),
-    end: /*#__PURE__*/React.createElement(EndExample, null)
-  }
+const HeaderBar_stories = meta;
+const StartExample = ()=>/*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-dimmed"
+    }, "Headless CMS / Articles / The best article ever");
+const MiddleExample = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, "Content in the middle");
+const EndExample = ()=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-x-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "ghost",
+        size: "md",
+        text: "Root tenant"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
+    }, /*#__PURE__*/ react.createElement(Avatar, {
+        size: "sm",
+        variant: "strong",
+        image: /*#__PURE__*/ react.createElement(Avatar.Image, {
+            src: "https://i.pravatar.cc/300"
+        }),
+        fallback: /*#__PURE__*/ react.createElement(Avatar.Fallback, {
+            delayMs: 0
+        }, "W")
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "xs",
+        color: "neutral-strong",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>console.log("clicked")
+    })));
+const Default = {
+    args: {
+        start: /*#__PURE__*/ react.createElement(StartExample, null),
+        middle: /*#__PURE__*/ react.createElement(MiddleExample, null),
+        end: /*#__PURE__*/ react.createElement(EndExample, null)
+    }
 };
-export const StartContentOnly = {
-  args: {
-    start: /*#__PURE__*/React.createElement(StartExample, null)
-  }
+const StartContentOnly = {
+    args: {
+        start: /*#__PURE__*/ react.createElement(StartExample, null)
+    }
 };
-export const MiddleContentOnly = {
-  args: {
-    middle: /*#__PURE__*/React.createElement(MiddleExample, null)
-  }
+const MiddleContentOnly = {
+    args: {
+        middle: /*#__PURE__*/ react.createElement(MiddleExample, null)
+    }
 };
-export const EndContentOnly = {
-  args: {
-    end: /*#__PURE__*/React.createElement(EndExample, null)
-  }
+const EndContentOnly = {
+    args: {
+        end: /*#__PURE__*/ react.createElement(EndExample, null)
+    }
 };
-export const StartEndContentOnly = {
-  args: {
-    start: /*#__PURE__*/React.createElement(StartExample, null),
-    end: /*#__PURE__*/React.createElement(EndExample, null)
-  }
+const StartEndContentOnly = {
+    args: {
+        start: /*#__PURE__*/ react.createElement(StartExample, null),
+        end: /*#__PURE__*/ react.createElement(EndExample, null)
+    }
 };
-export const MoreStartContent = {
-  args: {
-    start: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartExample, null), /*#__PURE__*/React.createElement(StartExample, null), /*#__PURE__*/React.createElement(StartExample, null)),
-    middle: /*#__PURE__*/React.createElement(MiddleExample, null),
-    end: /*#__PURE__*/React.createElement(EndExample, null)
-  }
+const MoreStartContent = {
+    args: {
+        start: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(StartExample, null), /*#__PURE__*/ react.createElement(StartExample, null), /*#__PURE__*/ react.createElement(StartExample, null)),
+        middle: /*#__PURE__*/ react.createElement(MiddleExample, null),
+        end: /*#__PURE__*/ react.createElement(EndExample, null)
+    }
 };
-export const Documentation = {
-  args: {
-    start: /*#__PURE__*/React.createElement(StartExample, null),
-    middle: /*#__PURE__*/React.createElement(MiddleExample, null),
-    end: /*#__PURE__*/React.createElement(EndExample, null)
-  },
-  argTypes: {
-    start: {
-      description: "Content displayed at the start of the header bar"
-    },
-    middle: {
-      description: "Content displayed in the middle of the header bar"
+const Documentation = {
+    args: {
+        start: /*#__PURE__*/ react.createElement(StartExample, null),
+        middle: /*#__PURE__*/ react.createElement(MiddleExample, null),
+        end: /*#__PURE__*/ react.createElement(EndExample, null)
     },
-    end: {
-      description: "Content displayed at the end of the header bar"
+    argTypes: {
+        start: {
+            description: "Content displayed at the start of the header bar"
+        },
+        middle: {
+            description: "Content displayed in the middle of the header bar"
+        },
+        end: {
+            description: "Content displayed at the end of the header bar"
+        }
     }
-  }
 };
+export default HeaderBar_stories;
+export { Default, Documentation, EndContentOnly, MiddleContentOnly, MoreStartContent, StartContentOnly, StartEndContentOnly };
 
 //# sourceMappingURL=HeaderBar.stories.js.map