@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/Grid/Grid.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/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={"wby-bg-neutral-light wby-p-4"}>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-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={"wby-bg-neutral-light wby-p-4"}>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-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={"wby-bg-neutral-light wby-p-4"}>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 1
-            </Grid.Column>
-            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 2<br/>Span: 3
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 3
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 4
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 5
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 6
-            </Grid.Column>
-            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 7<br/>Span: 2
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
-                Col 8
-            </Grid.Column>
-            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-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,11 +143,12 @@ import React from "react";
 import { Grid } from "@webiny/admin-ui";
 
 const GridWithOffsetExample = () => {
-    return (
-        <Grid gap={"spacious"} className={"wby-bg-neutral-light wby-p-4"}>
+return (
+
+<Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
 
                 {/* Row 1 */}
-                <Grid.Column span={8} offset={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                <Grid.Column span={8} offset={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                     Col 1<br/>
                     span: 8<br/>
                     offset: 2
@@ -175,14 +156,14 @@ const GridWithOffsetExample = () => {
                 <Grid.Column span={2} />
 
                 {/* Row 2 */}
-                <Grid.Column span={8} offset={4} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                <Grid.Column span={8} offset={4} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                     Col 1<br/>
                     span: 8<br/>
                     offset: 4
                 </Grid.Column>
 
                 {/* Row 3 */}
-                <Grid.Column span={10} offset={1} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                <Grid.Column span={10} offset={1} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                     Col 1<br/>
                     span: 8<br/>
                     offset: 4
@@ -190,7 +171,7 @@ const GridWithOffsetExample = () => {
                 <Grid.Column span={1} />
 
                 {/* Row 4 */}
-                <Grid.Column span={12} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                <Grid.Column span={12} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                     Col 1<br/>
                     span: 12
                 </Grid.Column>
@@ -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.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Grid } from "./Grid";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Grid } from "./Grid.js";
 declare const meta: Meta<typeof Grid>;
 export default meta;
 type Story = StoryObj<typeof Grid>;

package/Grid/Grid.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid } from "./Grid";
-import { StyledColumn } from "./stories/StyledColumn";
+import { Grid } from "./Grid.js";
+import { StyledColumn } from "./stories/StyledColumn.js";
 const meta = {
   title: "Components/Grid",
   component: Grid,
@@ -11,7 +11,7 @@ const meta = {
 export default meta;
 export const Default = {
   args: {
-    className: "wby-bg-neutral-light wby-p-md wby-w-full",
+    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, {
@@ -102,30 +102,30 @@ export const WithOffset = {
 export const Documentation = {
   render: args => {
     return /*#__PURE__*/React.createElement(Grid, args, /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
     }, "Col 1"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm",
+      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: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
     }, "Col 3"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
     }, "Col 4"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
     }, "Col 5"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
     }, "Col 6"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm",
+      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: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
     }, "Col 8"), /*#__PURE__*/React.createElement(Grid.Column, {
-      className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+      className: "bg-primary text-neutral-light p-2 text-md rounded-sm"
     }, "Col 9"));
   },
   args: {
     gap: "comfortable",
-    className: "wby-bg-neutral-light wby-p-md wby-w-full"
+    className: "bg-neutral-light p-md w-full"
   },
   argTypes: {
     gap: {

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\";\n\nimport { Grid } from \"./Grid\";\nimport { StyledColumn } from \"./stories/StyledColumn\";\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: \"wby-bg-neutral-light wby-p-md wby-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=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 1\n                </Grid.Column>\n                <Grid.Column\n                    className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\"\n                    span={3}\n                >\n                    Col 2<br />\n                    Span: 3\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 3\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 4\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 5\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 6\n                </Grid.Column>\n                <Grid.Column\n                    className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\"\n                    span={2}\n                >\n                    Col 7<br />\n                    Span: 2\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 8\n                </Grid.Column>\n                <Grid.Column className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\">\n                    Col 9\n                </Grid.Column>\n            </Grid>\n        );\n    },\n    args: {\n        gap: \"comfortable\",\n        className: \"wby-bg-neutral-light wby-p-md wby-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,"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":[]}

package/Grid/index.d.ts

@@ -1 +1 @@
-export * from "./Grid";
+export * from "./Grid.js";

package/Grid/index.js

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

package/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Grid\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Grid.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Grid/stories/StyledColumn.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type ColumnProps } from "..";
+import { type ColumnProps } from "../../Grid/index.js";
 export interface StyledColumnProps extends ColumnProps {
     index: number;
 }

package/Grid/stories/StyledColumn.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { Grid } from "./..";
+import { Grid } from "../index.js";
 export const StyledColumn = props => /*#__PURE__*/React.createElement(Grid.Column, Object.assign({
-  className: "wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+  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)));
 
 //# 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\";\n\nexport interface StyledColumnProps extends ColumnProps {\n    index: number;\n}\n\nexport const StyledColumn = (props: StyledColumnProps) => (\n    <Grid.Column\n        className=\"wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm\"\n        {...props}\n    >\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;EACRC,SAAS,EAAC;AAA0E,GAChFL,KAAK,GACZ,MACO,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,"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":[]}

package/HeaderBar/HeaderBar.d.ts

@@ -17,7 +17,7 @@ declare const HeaderBar: (({ start, middle, end, className, ...props }: HeaderBa
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element) & {
         original: ({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/HeaderBar/HeaderBar.js

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

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\";\nimport { Separator } from \"~/Separator\";\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                    \"wby-grid wby-grid-cols-[1fr_auto_1fr] wby-w-full wby-py-xs-plus wby-px-sm wby-bg-neutral-base\",\n                    className\n                )}\n                {...props}\n            >\n                <div className=\"wby-h-full wby-flex wby-items-center wby-justify-self-start\">\n                    {start}\n                </div>\n                <div className=\"wby-h-full wby-flex wby-items-center\">{middle}</div>\n                <div className=\"wby-h-full wby-flex wby-items-center wby-justify-self-end\">\n                    {end}\n                </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,+FAA+F,EAC/FO,SACJ;EAAE,GACEC,KAAK,gBAETT,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAA6D,GACvEH,KACA,CAAC,eACNL,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAAsC,GAAEF,MAAY,CAAC,eACpEN,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAA2D,GACrED,GACA,CACJ,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,"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":[]}