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

package/FormComponent/Label.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
-import { cn, makeDecoratable } from "../utils";
-import { Label } from "../Label";
+import { cn, makeDecoratable } from "../utils.js";
+import { Label } from "../Label/index.js";
 const DecoratableFormComponentLabel = ({
   htmlFor,
   text,
@@ -17,13 +17,14 @@ const DecoratableFormComponentLabel = ({
       return null;
     }
     if (/*#__PURE__*/React.isValidElement(text) && text.type === Label) {
+      const textProps = text.props;
       return /*#__PURE__*/React.cloneElement(text, {
-        ...text.props,
-        htmlFor: text.props.htmlFor ?? htmlFor,
-        required: text.props.required ?? required,
-        disabled: text.props.disabled ?? disabled,
-        hint: text.props.hint ?? hint,
-        invalid: text.props.invalid ?? invalid
+        ...textProps,
+        htmlFor: textProps.htmlFor ?? htmlFor,
+        required: textProps.required ?? required,
+        disabled: textProps.disabled ?? disabled,
+        hint: textProps.hint ?? hint,
+        invalid: textProps.invalid ?? invalid
       });
     }
     return /*#__PURE__*/React.createElement(Label, {
@@ -39,7 +40,7 @@ const DecoratableFormComponentLabel = ({
     return null;
   }
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn("wby-mb-xs", className)
+    className: cn("mb-xs", className)
   }), renderLabel);
 };
 const FormComponentLabel = makeDecoratable("FormComponentLabel", DecoratableFormComponentLabel);

package/FormComponent/Label.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","cn","makeDecoratable","Label","DecoratableFormComponentLabel","htmlFor","text","required","disabled","hint","invalid","className","props","renderLabel","isValidElement","type","cloneElement","createElement","Object","assign","FormComponentLabel"],"sources":["Label.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport type { LabelProps } from \"~/Label\";\nimport { Label } from \"~/Label\";\n\ninterface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {\n    text?: React.ReactElement<typeof Label> | React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n    disabled?: boolean;\n    hint?: React.ReactNode;\n    htmlFor?: string;\n}\n\nconst DecoratableFormComponentLabel = ({\n    htmlFor,\n    text,\n    required,\n    disabled,\n    hint,\n    invalid,\n    className,\n    ...props\n}: FormComponentLabelProps) => {\n    // UseMemo correctly to memoize the rendered label\n    const renderLabel = useMemo(() => {\n        if (!text) {\n            return null;\n        }\n\n        if (React.isValidElement(text) && text.type === Label) {\n            return React.cloneElement(text as React.ReactElement<LabelProps>, {\n                ...text.props,\n                htmlFor: text.props.htmlFor ?? htmlFor,\n                required: text.props.required ?? required,\n                disabled: text.props.disabled ?? disabled,\n                hint: text.props.hint ?? hint,\n                invalid: text.props.invalid ?? invalid\n            });\n        }\n\n        return (\n            <Label\n                htmlFor={htmlFor}\n                text={text}\n                required={required}\n                disabled={disabled}\n                hint={hint}\n                invalid={invalid}\n            />\n        );\n    }, [text, required, disabled, hint, invalid, htmlFor]);\n\n    if (!renderLabel) {\n        return null;\n    }\n\n    return (\n        <div {...props} className={cn(\"wby-mb-xs\", className)}>\n            {renderLabel}\n        </div>\n    );\n};\n\nconst FormComponentLabel = makeDecoratable(\"FormComponentLabel\", DecoratableFormComponentLabel);\n\nexport { FormComponentLabel, type FormComponentLabelProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,EAAE,EAAEC,eAAe;AAE5B,SAASC,KAAK;AAWd,MAAMC,6BAA6B,GAAGA,CAAC;EACnCC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,SAAS;EACT,GAAGC;AACkB,CAAC,KAAK;EAC3B;EACA,MAAMC,WAAW,GAAGb,OAAO,CAAC,MAAM;IAC9B,IAAI,CAACM,IAAI,EAAE;MACP,OAAO,IAAI;IACf;IAEA,IAAI,aAAAP,KAAK,CAACe,cAAc,CAACR,IAAI,CAAC,IAAIA,IAAI,CAACS,IAAI,KAAKZ,KAAK,EAAE;MACnD,oBAAOJ,KAAK,CAACiB,YAAY,CAACV,IAAI,EAAoC;QAC9D,GAAGA,IAAI,CAACM,KAAK;QACbP,OAAO,EAAEC,IAAI,CAACM,KAAK,CAACP,OAAO,IAAIA,OAAO;QACtCE,QAAQ,EAAED,IAAI,CAACM,KAAK,CAACL,QAAQ,IAAIA,QAAQ;QACzCC,QAAQ,EAAEF,IAAI,CAACM,KAAK,CAACJ,QAAQ,IAAIA,QAAQ;QACzCC,IAAI,EAAEH,IAAI,CAACM,KAAK,CAACH,IAAI,IAAIA,IAAI;QAC7BC,OAAO,EAAEJ,IAAI,CAACM,KAAK,CAACF,OAAO,IAAIA;MACnC,CAAC,CAAC;IACN;IAEA,oBACIX,KAAA,CAAAkB,aAAA,CAACd,KAAK;MACFE,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA,QAAS;MACnBC,IAAI,EAAEA,IAAK;MACXC,OAAO,EAAEA;IAAQ,CACpB,CAAC;EAEV,CAAC,EAAE,CAACJ,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEL,OAAO,CAAC,CAAC;EAEtD,IAAI,CAACQ,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBACId,KAAA,CAAAkB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASP,KAAK;IAAED,SAAS,EAAEV,EAAE,CAAC,WAAW,EAAEU,SAAS;EAAE,IACjDE,WACA,CAAC;AAEd,CAAC;AAED,MAAMO,kBAAkB,GAAGlB,eAAe,CAAC,oBAAoB,EAAEE,6BAA6B,CAAC;AAE/F,SAASgB,kBAAkB","ignoreList":[]}
+{"version":3,"names":["React","useMemo","cn","makeDecoratable","Label","DecoratableFormComponentLabel","htmlFor","text","required","disabled","hint","invalid","className","props","renderLabel","isValidElement","type","textProps","cloneElement","createElement","Object","assign","FormComponentLabel"],"sources":["Label.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport type { LabelProps } from \"~/Label/index.js\";\nimport { Label } from \"~/Label/index.js\";\nimport type { GenericRecord } from \"@webiny/utils\";\n\ninterface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {\n    text?: React.ReactElement<typeof Label> | React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n    disabled?: boolean;\n    hint?: React.ReactNode;\n    htmlFor?: string;\n}\n\nconst DecoratableFormComponentLabel = ({\n    htmlFor,\n    text,\n    required,\n    disabled,\n    hint,\n    invalid,\n    className,\n    ...props\n}: FormComponentLabelProps) => {\n    // UseMemo correctly to memoize the rendered label\n    const renderLabel = useMemo(() => {\n        if (!text) {\n            return null;\n        }\n\n        if (React.isValidElement(text) && text.type === Label) {\n            const textProps = text.props as GenericRecord;\n            return React.cloneElement(text as React.ReactElement<LabelProps>, {\n                ...textProps,\n                htmlFor: textProps.htmlFor ?? htmlFor,\n                required: textProps.required ?? required,\n                disabled: textProps.disabled ?? disabled,\n                hint: textProps.hint ?? hint,\n                invalid: textProps.invalid ?? invalid\n            });\n        }\n\n        return (\n            <Label\n                htmlFor={htmlFor}\n                text={text}\n                required={required}\n                disabled={disabled}\n                hint={hint}\n                invalid={invalid}\n            />\n        );\n    }, [text, required, disabled, hint, invalid, htmlFor]);\n\n    if (!renderLabel) {\n        return null;\n    }\n\n    return (\n        <div {...props} className={cn(\"mb-xs\", className)}>\n            {renderLabel}\n        </div>\n    );\n};\n\nconst FormComponentLabel = makeDecoratable(\"FormComponentLabel\", DecoratableFormComponentLabel);\n\nexport { FormComponentLabel, type FormComponentLabelProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,EAAE,EAAEC,eAAe;AAE5B,SAASC,KAAK;AAYd,MAAMC,6BAA6B,GAAGA,CAAC;EACnCC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,SAAS;EACT,GAAGC;AACkB,CAAC,KAAK;EAC3B;EACA,MAAMC,WAAW,GAAGb,OAAO,CAAC,MAAM;IAC9B,IAAI,CAACM,IAAI,EAAE;MACP,OAAO,IAAI;IACf;IAEA,IAAI,aAAAP,KAAK,CAACe,cAAc,CAACR,IAAI,CAAC,IAAIA,IAAI,CAACS,IAAI,KAAKZ,KAAK,EAAE;MACnD,MAAMa,SAAS,GAAGV,IAAI,CAACM,KAAsB;MAC7C,oBAAOb,KAAK,CAACkB,YAAY,CAACX,IAAI,EAAoC;QAC9D,GAAGU,SAAS;QACZX,OAAO,EAAEW,SAAS,CAACX,OAAO,IAAIA,OAAO;QACrCE,QAAQ,EAAES,SAAS,CAACT,QAAQ,IAAIA,QAAQ;QACxCC,QAAQ,EAAEQ,SAAS,CAACR,QAAQ,IAAIA,QAAQ;QACxCC,IAAI,EAAEO,SAAS,CAACP,IAAI,IAAIA,IAAI;QAC5BC,OAAO,EAAEM,SAAS,CAACN,OAAO,IAAIA;MAClC,CAAC,CAAC;IACN;IAEA,oBACIX,KAAA,CAAAmB,aAAA,CAACf,KAAK;MACFE,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA,QAAS;MACnBC,IAAI,EAAEA,IAAK;MACXC,OAAO,EAAEA;IAAQ,CACpB,CAAC;EAEV,CAAC,EAAE,CAACJ,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEL,OAAO,CAAC,CAAC;EAEtD,IAAI,CAACQ,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBACId,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASR,KAAK;IAAED,SAAS,EAAEV,EAAE,CAAC,OAAO,EAAEU,SAAS;EAAE,IAC7CE,WACA,CAAC;AAEd,CAAC;AAED,MAAMQ,kBAAkB,GAAGnB,eAAe,CAAC,oBAAoB,EAAEE,6BAA6B,CAAC;AAE/F,SAASiB,kBAAkB","ignoreList":[]}

package/FormComponent/Note.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { type TextProps } from "../Text";
-import { type VariantProps } from "../utils";
+import { type TextProps } from "../Text/index.js";
+import { type VariantProps } from "../utils.js";
 declare const formComponentNoteVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FormComponentNoteProps = TextProps & VariantProps<typeof formComponentNoteVariants> & {
     text?: React.ReactNode;
 };
@@ -20,7 +20,7 @@ declare const FormComponentNote: (({ disabled, text, className, ...props }: Form
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null) & {
         original: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
         originalName: string;
         displayName: string;

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,10 +1,10 @@
 import React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const columnVariants: (props?: ({
-    span?: "auto" | 2 | 1 | 3 | 4 | 8 | 5 | 6 | 10 | 7 | 12 | 9 | 11 | null | undefined;
-    offset?: 2 | 1 | 3 | 4 | 8 | 5 | 6 | 10 | 7 | 9 | 11 | null | undefined;
-    align?: "top" | "bottom" | "middle" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    span?: 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto" | 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/types").ClassProp) | undefined) => string;
 interface ColumnProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {
     children?: React.ReactNode;
 }
@@ -21,17 +21,17 @@ 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?: "small" | "none" | "compact" | "comfortable" | "micro" | "spacious" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    gap?: "none" | "small" | "compact" | "micro" | "comfortable" | "spacious" | null | undefined;
+} & import("class-variance-authority/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>>;
+    children: null | React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;
 }
 declare const Grid: (({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
     original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
@@ -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>, VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {\n    children:\n        | null\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"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;AAOF,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":[]}