@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/FormComponent/Note.js

@@ -1,10 +1,11 @@
 import React from "react";
-import { Text } from "../Text";
-import { cn, cva, makeDecoratable } from "../utils";
-const formComponentNoteVariants = cva("wby-mt-sm wby-text-neutral-strong", {
+import { Text } from "../Text/index.js";
+import { cn, cva, makeDecoratable } from "../utils.js";
+import { useAdminUi } from "../AdminUiProvider/index.js";
+const formComponentNoteVariants = cva("mt-sm text-neutral-strong", {
   variants: {
     disabled: {
-      true: "wby-text-neutral-disabled"
+      true: "text-neutral-disabled"
     }
   }
 });
@@ -14,6 +15,9 @@ const DecoratableFormComponentNote = ({
   className,
   ...props
 }) => {
+  const {
+    compileMarkdown
+  } = useAdminUi();
   if (!text) {
     return null;
   }
@@ -23,7 +27,7 @@ const DecoratableFormComponentNote = ({
     className: cn(formComponentNoteVariants({
       disabled
     }), className)
-  }), text);
+  }), compileMarkdown(text));
 };
 const FormComponentNote = makeDecoratable("FormComponentNote", DecoratableFormComponentNote);
 export { FormComponentNote };

package/FormComponent/Note.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","cn","cva","makeDecoratable","formComponentNoteVariants","variants","disabled","true","DecoratableFormComponentNote","text","className","props","createElement","Object","assign","size","as","FormComponentNote"],"sources":["Note.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, type TextProps } from \"~/Text\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst formComponentNoteVariants = cva(\"wby-mt-sm wby-text-neutral-strong\", {\n    variants: {\n        disabled: {\n            true: \"wby-text-neutral-disabled\"\n        }\n    }\n});\n\ntype FormComponentNoteProps = TextProps &\n    VariantProps<typeof formComponentNoteVariants> & {\n        text?: React.ReactNode;\n    };\n\nconst DecoratableFormComponentNote = ({\n    disabled,\n    text,\n    className,\n    ...props\n}: FormComponentNoteProps) => {\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <Text\n            {...props}\n            size={\"sm\"}\n            as={\"div\"}\n            className={cn(formComponentNoteVariants({ disabled }), className)}\n        >\n            {text}\n        </Text>\n    );\n};\n\nconst FormComponentNote = makeDecoratable(\"FormComponentNote\", DecoratableFormComponentNote);\n\nexport { FormComponentNote, type FormComponentNoteProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,yBAAyB,GAAGF,GAAG,CAAC,mCAAmC,EAAE;EACvEG,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAOF,MAAMC,4BAA4B,GAAGA,CAAC;EAClCF,QAAQ;EACRG,IAAI;EACJC,SAAS;EACT,GAAGC;AACiB,CAAC,KAAK;EAC1B,IAAI,CAACF,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIV,KAAA,CAAAa,aAAA,CAACZ,IAAI,EAAAa,MAAA,CAAAC,MAAA,KACGH,KAAK;IACTI,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVN,SAAS,EAAET,EAAE,CAACG,yBAAyB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEI,SAAS;EAAE,IAEjED,IACC,CAAC;AAEf,CAAC;AAED,MAAMQ,iBAAiB,GAAGd,eAAe,CAAC,mBAAmB,EAAEK,4BAA4B,CAAC;AAE5F,SAASS,iBAAiB","ignoreList":[]}
+{"version":3,"names":["React","Text","cn","cva","makeDecoratable","useAdminUi","formComponentNoteVariants","variants","disabled","true","DecoratableFormComponentNote","text","className","props","compileMarkdown","createElement","Object","assign","size","as","FormComponentNote"],"sources":["Note.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, type TextProps } from \"~/Text/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\nconst formComponentNoteVariants = cva(\"mt-sm text-neutral-strong\", {\n    variants: {\n        disabled: {\n            true: \"text-neutral-disabled\"\n        }\n    }\n});\n\ntype FormComponentNoteProps = TextProps &\n    VariantProps<typeof formComponentNoteVariants> & {\n        text?: React.ReactNode;\n    };\n\nconst DecoratableFormComponentNote = ({\n    disabled,\n    text,\n    className,\n    ...props\n}: FormComponentNoteProps) => {\n    const { compileMarkdown } = useAdminUi();\n\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <Text\n            {...props}\n            size={\"sm\"}\n            as={\"div\"}\n            className={cn(formComponentNoteVariants({ disabled }), className)}\n        >\n            {compileMarkdown(text)}\n        </Text>\n    );\n};\n\nconst FormComponentNote = makeDecoratable(\"FormComponentNote\", DecoratableFormComponentNote);\n\nexport { FormComponentNote, type FormComponentNoteProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AACjC,SAASC,UAAU;AAEnB,MAAMC,yBAAyB,GAAGH,GAAG,CAAC,2BAA2B,EAAE;EAC/DI,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAOF,MAAMC,4BAA4B,GAAGA,CAAC;EAClCF,QAAQ;EACRG,IAAI;EACJC,SAAS;EACT,GAAGC;AACiB,CAAC,KAAK;EAC1B,MAAM;IAAEC;EAAgB,CAAC,GAAGT,UAAU,CAAC,CAAC;EAExC,IAAI,CAACM,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIX,KAAA,CAAAe,aAAA,CAACd,IAAI,EAAAe,MAAA,CAAAC,MAAA,KACGJ,KAAK;IACTK,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVP,SAAS,EAAEV,EAAE,CAACI,yBAAyB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEI,SAAS;EAAE,IAEjEE,eAAe,CAACH,IAAI,CACnB,CAAC;AAEf,CAAC;AAED,MAAMS,iBAAiB,GAAGhB,eAAe,CAAC,mBAAmB,EAAEM,4BAA4B,CAAC;AAE5F,SAASU,iBAAiB","ignoreList":[]}

package/FormComponent/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./Description";
-export * from "./ErrorMessage";
-export * from "./FormComponent";
-export * from "./Label";
-export * from "./Note";
+export * from "./Description.js";
+export * from "./ErrorMessage.js";
+export type * from "./FormComponent.js";
+export * from "./Label.js";
+export * from "./Note.js";

package/FormComponent/index.js

@@ -1,7 +1,6 @@
-export * from "./Description";
-export * from "./ErrorMessage";
-export * from "./FormComponent";
-export * from "./Label";
-export * from "./Note";
+export * from "./Description.js";
+export * from "./ErrorMessage.js";
+export * from "./Label.js";
+export * from "./Note.js";
 
 //# sourceMappingURL=index.js.map

package/FormComponent/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Description\";\nexport * from \"./ErrorMessage\";\nexport * from \"./FormComponent\";\nexport * from \"./Label\";\nexport * from \"./Note\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Description.js\";\nexport * from \"./ErrorMessage.js\";\nexport type * from \"./FormComponent.js\";\nexport * from \"./Label.js\";\nexport * from \"./Note.js\";\n"],"mappings":"AAAA;AACA;AAEA;AACA","ignoreList":[]}

package/Grid/Grid.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const columnVariants: (props?: ({
-    span?: 1 | 4 | 2 | 3 | 5 | 12 | 6 | 8 | 10 | "auto" | 9 | 7 | 11 | null | undefined;
-    offset?: 1 | 4 | 2 | 3 | 5 | 6 | 8 | 10 | 9 | 7 | 11 | null | undefined;
+    span?: 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | "auto" | 12 | null | undefined;
+    offset?: 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | null | undefined;
     align?: "bottom" | "top" | "middle" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface ColumnProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {
@@ -21,14 +21,14 @@ declare const Column: (({ span, align, children, className, offset, ...props }:
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
         original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
 declare const gridVariants: (props?: ({
-    gap?: "none" | "small" | "comfortable" | "compact" | "micro" | "spacious" | null | undefined;
+    gap?: "none" | "small" | "compact" | "micro" | "comfortable" | "spacious" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
     children: React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;
@@ -46,7 +46,7 @@ declare const Grid: (({ gap, children, className, ...props }: GridProps) => Reac
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
         original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
@@ -65,7 +65,7 @@ declare const Grid: (({ gap, children, className, ...props }: GridProps) => Reac
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
+        createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
             original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
             originalName: string;
             displayName: string;

package/Grid/Grid.js

@@ -1,39 +1,39 @@
 import React from "react";
-import { cn, cva, withStaticProps, makeDecoratable } from "../utils";
+import { cn, cva, withStaticProps, makeDecoratable } from "../utils.js";
 const columnVariants = cva("", {
   variants: {
     span: {
-      auto: "wby-col-auto",
-      1: "wby-col-span-1",
-      2: "wby-col-span-2",
-      3: "wby-col-span-3",
-      4: "wby-col-span-4",
-      5: "wby-col-span-5",
-      6: "wby-col-span-6",
-      7: "wby-col-span-7",
-      8: "wby-col-span-8",
-      9: "wby-col-span-9",
-      10: "wby-col-span-10",
-      11: "wby-col-span-11",
-      12: "wby-col-span-12"
+      auto: "col-auto",
+      1: "col-span-1",
+      2: "col-span-2",
+      3: "col-span-3",
+      4: "col-span-4",
+      5: "col-span-5",
+      6: "col-span-6",
+      7: "col-span-7",
+      8: "col-span-8",
+      9: "col-span-9",
+      10: "col-span-10",
+      11: "col-span-11",
+      12: "col-span-12"
     },
     offset: {
-      1: "wby-col-start-2",
-      2: "wby-col-start-3",
-      3: "wby-col-start-4",
-      4: "wby-col-start-5",
-      5: "wby-col-start-6",
-      6: "wby-col-start-7",
-      7: "wby-col-start-8",
-      8: "wby-col-start-9",
-      9: "wby-col-start-10",
-      10: "wby-col-start-11",
-      11: "wby-col-start-12"
+      1: "col-start-2",
+      2: "col-start-3",
+      3: "col-start-4",
+      4: "col-start-5",
+      5: "col-start-6",
+      6: "col-start-7",
+      7: "col-start-8",
+      8: "col-start-9",
+      9: "col-start-10",
+      10: "col-start-11",
+      11: "col-start-12"
     },
     align: {
-      top: "wby-self-start",
-      middle: "wby-self-center",
-      bottom: "wby-self-end"
+      top: "self-start",
+      middle: "self-center",
+      bottom: "self-end"
     }
   },
   defaultVariants: {
@@ -57,15 +57,15 @@ const ColumnBase = ({
   }), children);
 };
 const Column = makeDecoratable("Column", ColumnBase);
-const gridVariants = cva("wby-grid", {
+const gridVariants = cva("grid", {
   variants: {
     gap: {
-      none: "wby-gap-0",
-      micro: "wby-gap-xs",
-      small: "wby-gap-sm",
-      compact: "wby-gap-md",
-      comfortable: "wby-gap-lg",
-      spacious: "wby-gap-xl"
+      none: "gap-0",
+      micro: "gap-xs",
+      small: "gap-sm",
+      compact: "gap-md",
+      comfortable: "gap-lg",
+      spacious: "gap-xl"
     }
   },
   defaultVariants: {
@@ -79,7 +79,7 @@ const GridBase = ({
   ...props
 }) => {
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn("wby-grid-cols-12", gridVariants({
+    className: cn("grid-cols-12", gridVariants({
       gap
     }), className)
   }), children);

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\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"wby-col-auto\",\n            1: \"wby-col-span-1\",\n            2: \"wby-col-span-2\",\n            3: \"wby-col-span-3\",\n            4: \"wby-col-span-4\",\n            5: \"wby-col-span-5\",\n            6: \"wby-col-span-6\",\n            7: \"wby-col-span-7\",\n            8: \"wby-col-span-8\",\n            9: \"wby-col-span-9\",\n            10: \"wby-col-span-10\",\n            11: \"wby-col-span-11\",\n            12: \"wby-col-span-12\"\n        },\n        offset: {\n            1: \"wby-col-start-2\",\n            2: \"wby-col-start-3\",\n            3: \"wby-col-start-4\",\n            4: \"wby-col-start-5\",\n            5: \"wby-col-start-6\",\n            6: \"wby-col-start-7\",\n            7: \"wby-col-start-8\",\n            8: \"wby-col-start-9\",\n            9: \"wby-col-start-10\",\n            10: \"wby-col-start-11\",\n            11: \"wby-col-start-12\"\n        },\n        align: {\n            top: \"wby-self-start\",\n            middle: \"wby-self-center\",\n            bottom: \"wby-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(\"wby-grid\", {\n    variants: {\n        gap: {\n            none: \"wby-gap-0\",\n            micro: \"wby-gap-xs\",\n            small: \"wby-gap-sm\",\n            compact: \"wby-gap-md\",\n            comfortable: \"wby-gap-lg\",\n            spacious: \"wby-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(\"wby-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,cAAc;MACpB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,CAAC,EAAE,gBAAgB;MACnB,EAAE,EAAE,iBAAiB;MACrB,EAAE,EAAE,iBAAiB;MACrB,EAAE,EAAE;IACR,CAAC;IACDC,MAAM,EAAE;MACJ,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,iBAAiB;MACpB,CAAC,EAAE,kBAAkB;MACrB,EAAE,EAAE,kBAAkB;MACtB,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,GAAG,EAAE,gBAAgB;MACrBC,MAAM,EAAE,iBAAiB;MACzBC,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,UAAU,EAAE;EACjCI,QAAQ,EAAE;IACNkB,GAAG,EAAE;MACDC,IAAI,EAAE,WAAW;MACjBC,KAAK,EAAE,YAAY;MACnBC,KAAK,EAAE,YAAY;MACnBC,OAAO,EAAE,YAAY;MACrBC,WAAW,EAAE,YAAY;MACzBC,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,kBAAkB,EAAEsB,YAAY,CAAC;MAAEC;IAAI,CAAC,CAAC,EAAEP,SAAS;EAAE,IAC/ED,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,"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":[]}

package/Grid/Grid.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as GridStories from './Grid.stories';
 
@@ -14,32 +14,32 @@ 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">
+        <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                 Col 9
             </Grid.Column>
         </Grid>
@@ -72,32 +72,32 @@ 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">
+        <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                 Col 9
             </Grid.Column>
         </Grid>
@@ -118,32 +118,32 @@ 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">
+        <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <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="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md 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">
+            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                 Col 9
             </Grid.Column>
         </Grid>
@@ -164,10 +164,10 @@ import { Grid } from "@webiny/admin-ui";
 
 const GridWithOffsetExample = () => {
     return (
-        <Grid gap={"spacious"} className={"wby-bg-neutral-light wby-p-4"}>
+        <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 +175,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 +190,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>
@@ -246,4 +246,4 @@ Content should be distributed across a minimum of 3 columns, with the option to
 ## 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":[]}