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

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":[]}

package/HeaderBar/HeaderBar.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as HeaderBarStories from './HeaderBar.stories';
 
@@ -17,7 +17,7 @@ import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard
 
 const HeaderBarExample = () => {
     const StartContent = () => (
-        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+        <Text size={"sm"} className={"text-neutral-dimmed"}>
             {"Headless CMS / Articles / The best article ever"}
         </Text>
     );
@@ -25,11 +25,11 @@ const HeaderBarExample = () => {
     const MiddleContent = () => <>Content in the middle</>;
 
     const EndContent = () => (
-        <div className={"wby-flex wby-gap-x-sm"}>
+        <div className={"flex gap-x-sm"}>
             <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
             <div
                 className={
-                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                 }
             >
                 <Avatar
@@ -83,7 +83,7 @@ import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard
 
 const HeaderBarExample = () => {
     const StartContent = () => (
-        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+        <Text size={"sm"} className={"text-neutral-dimmed"}>
             {"Headless CMS / Articles / The best article ever"}
         </Text>
     );
@@ -91,12 +91,12 @@ const HeaderBarExample = () => {
     const MiddleContent = () => <>Content in the middle</>;
 
     const EndContent = () => (
-        <div className={"wby-flex wby-gap-x-sm"}>
+        <div className={"flex gap-x-sm"}>
             <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
             <div
                 className={
-                    "wby-flex wby-items-center wby-rounded-md " +
-"wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                    "flex items-center rounded-md " +
+"gap-xxs py-xs px-xs bg-neutral-light"
                 }
             >
                 <Avatar
@@ -138,7 +138,7 @@ import { HeaderBar, Text } from "@webiny/admin-ui";
 
 const StartContentOnlyExample = () => {
     const StartContent = () => (
-        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+        <Text size={"sm"} className={"text-neutral-dimmed"}>
             {"Headless CMS / Articles / The best article ever"}
         </Text>
     );
@@ -173,12 +173,12 @@ import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard
 
 const EndContentOnlyExample = () => {
     const EndContent = () => (
-        <div className={"wby-flex wby-gap-x-sm"}>
+        <div className={"flex gap-x-sm"}>
             <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
             <div
                 className={
-                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs
-                    wby-py-xs wby-px-xs wby-bg-neutral-light"
+                    "flex items-center rounded-md gap-xxs
+                    py-xs px-xs bg-neutral-light"
                 }
             >
                 <Avatar
@@ -213,17 +213,17 @@ import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard
 
 const StartEndContentOnlyExample = () => {
     const StartContent = () => (
-        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+        <Text size={"sm"} className={"text-neutral-dimmed"}>
             {"Headless CMS / Articles / The best article ever"}
         </Text>
     );
 
     const EndContent = () => (
-        <div className={"wby-flex wby-gap-x-sm"}>
+        <div className={"flex gap-x-sm"}>
             <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
             <div
                 className={
-                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                 }
             >
                 <Avatar
@@ -258,7 +258,7 @@ import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard
 
 const MoreStartContentExample = () => {
     const StartContent = () => (
-        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+        <Text size={"sm"} className={"text-neutral-dimmed"}>
             {"Headless CMS / Articles / The best article ever"}
         </Text>
     );
@@ -266,11 +266,11 @@ const MoreStartContentExample = () => {
     const MiddleContent = () => <>Content in the middle</>;
 
     const EndContent = () => (
-        <div className={"wby-flex wby-gap-x-sm"}>
+        <div className={"flex gap-x-sm"}>
             <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
             <div
                 className={
-                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                 }
             >
                 <Avatar

package/HeaderBar/HeaderBar.stories.d.ts

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

package/HeaderBar/HeaderBar.stories.js

@@ -1,30 +1,30 @@
 import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
-import { HeaderBar } from "./HeaderBar";
+import { HeaderBar } from "./HeaderBar.js";
 import React from "react";
-import { Button, IconButton } from "../Button";
-import { Avatar } from "../Avatar";
-import { Text } from "../Text";
+import { Button, IconButton } from "../Button/index.js";
+import { Avatar } from "../Avatar/index.js";
+import { Text } from "../Text/index.js";
 const meta = {
   title: "Components/HeaderBar",
   component: HeaderBar,
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[850px]  wby-rounded-[5px] wby-px-[50px] wby-content-center"
+    className: "bg-[#f4f4f4] h-[500px] w-[850px]  rounded-[5px] px-[50px] content-center"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export default meta;
 const StartExample = () => /*#__PURE__*/React.createElement(Text, {
   size: "sm",
-  className: "wby-text-neutral-dimmed"
+  className: "text-neutral-dimmed"
 }, "Headless CMS / Articles / The best article ever");
 const MiddleExample = () => /*#__PURE__*/React.createElement(React.Fragment, null, "Content in the middle");
 const EndExample = () => /*#__PURE__*/React.createElement("div", {
-  className: "wby-flex wby-gap-x-sm"
+  className: "flex gap-x-sm"
 }, /*#__PURE__*/React.createElement(Button, {
   variant: "ghost",
   size: "md",
   text: "Root tenant"
 }), /*#__PURE__*/React.createElement("div", {
-  className: "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+  className: "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
 }, /*#__PURE__*/React.createElement(Avatar, {
   size: "sm",
   variant: "strong",
@@ -84,16 +84,13 @@ export const Documentation = {
   },
   argTypes: {
     start: {
-      description: "Content displayed at the start of the header bar",
-      control: "none"
+      description: "Content displayed at the start of the header bar"
     },
     middle: {
-      description: "Content displayed in the middle of the header bar",
-      control: "none"
+      description: "Content displayed in the middle of the header bar"
     },
     end: {
-      description: "Content displayed at the end of the header bar",
-      control: "none"
+      description: "Content displayed at the end of the header bar"
     }
   }
 };

package/HeaderBar/HeaderBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactComponent","KeyboardArrowRightIcon","HeaderBar","React","Button","IconButton","Avatar","Text","meta","title","component","decorators","Story","createElement","className","StartExample","size","MiddleExample","Fragment","EndExample","variant","text","image","Image","src","fallback","Fallback","delayMs","color","icon","onClick","console","log","Default","args","start","middle","end","StartContentOnly","MiddleContentOnly","EndContentOnly","StartEndContentOnly","MoreStartContent","Documentation","argTypes","description","control"],"sources":["HeaderBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { HeaderBar } from \"./HeaderBar\";\nimport React from \"react\";\nimport { Button, IconButton } from \"~/Button\";\nimport { Avatar } from \"~/Avatar\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof HeaderBar> = {\n    title: \"Components/HeaderBar\",\n    component: HeaderBar,\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[850px]  wby-rounded-[5px] wby-px-[50px] wby-content-center\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof HeaderBar>;\n\nconst StartExample = () => (\n    <Text size={\"sm\"} className={\"wby-text-neutral-dimmed\"}>\n        {\"Headless CMS / Articles / The best article ever\"}\n    </Text>\n);\n\nconst MiddleExample = () => <>Content in the middle</>;\n\nconst EndExample = () => (\n    <div className={\"wby-flex wby-gap-x-sm\"}>\n        <Button variant={\"ghost\"} size={\"md\"} text={\"Root tenant\"} />\n        <div\n            className={\n                \"wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light\"\n            }\n        >\n            <Avatar\n                size={\"sm\"}\n                variant={\"strong\"}\n                image={<Avatar.Image src={\"https://i.pravatar.cc/300\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                color={\"neutral-strong\"}\n                icon={<KeyboardArrowRightIcon />}\n                onClick={() => console.log(\"clicked\")}\n            />\n        </div>\n    </div>\n);\n\nexport const Default: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const StartContentOnly: Story = {\n    args: {\n        start: <StartExample />\n    }\n};\n\nexport const MiddleContentOnly: Story = {\n    args: {\n        middle: <MiddleExample />\n    }\n};\n\nexport const EndContentOnly: Story = {\n    args: {\n        end: <EndExample />\n    }\n};\n\nexport const StartEndContentOnly: Story = {\n    args: {\n        start: <StartExample />,\n        end: <EndExample />\n    }\n};\n\nexport const MoreStartContent: Story = {\n    args: {\n        start: (\n            <>\n                <StartExample />\n                <StartExample />\n                <StartExample />\n            </>\n        ),\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    },\n    argTypes: {\n        start: {\n            description: \"Content displayed at the start of the header bar\",\n            control: \"none\"\n        },\n        middle: {\n            description: \"Content displayed in the middle of the header bar\",\n            control: \"none\"\n        },\n        end: {\n            description: \"Content displayed at the end of the header bar\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ReactComponent","KeyboardArrowRightIcon","HeaderBar","React","Button","IconButton","Avatar","Text","meta","title","component","decorators","Story","createElement","className","StartExample","size","MiddleExample","Fragment","EndExample","variant","text","image","Image","src","fallback","Fallback","delayMs","color","icon","onClick","console","log","Default","args","start","middle","end","StartContentOnly","MiddleContentOnly","EndContentOnly","StartEndContentOnly","MoreStartContent","Documentation","argTypes","description"],"sources":["HeaderBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { HeaderBar } from \"./HeaderBar.js\";\nimport React from \"react\";\nimport { Button, IconButton } from \"~/Button/index.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof HeaderBar> = {\n    title: \"Components/HeaderBar\",\n    component: HeaderBar,\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] h-[500px] w-[850px]  rounded-[5px] px-[50px] content-center\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof HeaderBar>;\n\nconst StartExample = () => (\n    <Text size={\"sm\"} className={\"text-neutral-dimmed\"}>\n        {\"Headless CMS / Articles / The best article ever\"}\n    </Text>\n);\n\nconst MiddleExample = () => <>Content in the middle</>;\n\nconst EndExample = () => (\n    <div className={\"flex gap-x-sm\"}>\n        <Button variant={\"ghost\"} size={\"md\"} text={\"Root tenant\"} />\n        <div className={\"flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light\"}>\n            <Avatar\n                size={\"sm\"}\n                variant={\"strong\"}\n                image={<Avatar.Image src={\"https://i.pravatar.cc/300\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                color={\"neutral-strong\"}\n                icon={<KeyboardArrowRightIcon />}\n                onClick={() => console.log(\"clicked\")}\n            />\n        </div>\n    </div>\n);\n\nexport const Default: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const StartContentOnly: Story = {\n    args: {\n        start: <StartExample />\n    }\n};\n\nexport const MiddleContentOnly: Story = {\n    args: {\n        middle: <MiddleExample />\n    }\n};\n\nexport const EndContentOnly: Story = {\n    args: {\n        end: <EndExample />\n    }\n};\n\nexport const StartEndContentOnly: Story = {\n    args: {\n        start: <StartExample />,\n        end: <EndExample />\n    }\n};\n\nexport const MoreStartContent: Story = {\n    args: {\n        start: (\n            <>\n                <StartExample />\n                <StartExample />\n                <StartExample />\n            </>\n        ),\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    },\n    argTypes: {\n        start: {\n            description: \"Content displayed at the start of the header bar\"\n        },\n        middle: {\n            description: \"Content displayed in the middle of the header bar\"\n        },\n        end: {\n            description: \"Content displayed at the end of the header bar\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/HeaderBar/index.d.ts

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

package/HeaderBar/index.js

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

package/HeaderBar/index.js.map

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

package/Heading/Heading.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
 declare const headingVariants: (props?: ({
-    level?: 1 | 4 | 2 | 3 | 5 | 6 | null | undefined;
+    level?: 1 | 2 | 4 | 3 | 5 | 6 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
     as?: HeadingTags;
@@ -21,7 +21,7 @@ declare const Heading: (({ children, level, className, as, ...props }: HeadingPr
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
         original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Heading/Heading.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn, makeDecoratable, cva } from "../utils";
+import { cn, makeDecoratable, cva } from "../utils.js";
 // Create a mapping of variant to tag
 const TAG_MAP = {
   1: "h1",
@@ -9,15 +9,15 @@ const TAG_MAP = {
   5: "h5",
   6: "h6"
 };
-const headingVariants = cva("wby-font-sans", {
+const headingVariants = cva("font-sans", {
   variants: {
     level: {
-      1: "wby-text-h1",
-      2: "wby-text-h2",
-      3: "wby-text-h3",
-      4: "wby-text-h4",
-      5: "wby-text-h5",
-      6: "wby-text-h6"
+      1: "text-h1",
+      2: "text-h2",
+      3: "text-h3",
+      4: "text-h4",
+      5: "text-h5",
+      6: "text-h6"
     }
   },
   defaultVariants: {

package/Heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","cva","TAG_MAP","headingVariants","variants","level","defaultVariants","HeadingBase","children","className","as","props","validatedLevel","Tag","createElement","Object","assign","Heading"],"sources":["Heading.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils\";\n\nexport type HeadingTags = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;\n\n// Create a mapping of variant to tag\nconst TAG_MAP: Record<HeadingLevels, HeadingTags> = {\n    1: \"h1\",\n    2: \"h2\",\n    3: \"h3\",\n    4: \"h4\",\n    5: \"h5\",\n    6: \"h6\"\n};\n\nconst headingVariants = cva(\"wby-font-sans\", {\n    variants: {\n        level: {\n            1: \"wby-text-h1\",\n            2: \"wby-text-h2\",\n            3: \"wby-text-h3\",\n            4: \"wby-text-h4\",\n            5: \"wby-text-h5\",\n            6: \"wby-text-h6\"\n        }\n    },\n    defaultVariants: {\n        level: 1\n    }\n});\n\ninterface HeadingProps\n    extends React.HTMLAttributes<HTMLHeadingElement>,\n        VariantProps<typeof headingVariants> {\n    as?: HeadingTags;\n}\n\nconst HeadingBase = ({ children, level, className, as, ...props }: HeadingProps) => {\n    // Ensure `level` is a valid number, or fallback to a default value 1\n    const validatedLevel = level && level in TAG_MAP ? level : 1;\n\n    // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`\n    const Tag = as || TAG_MAP[validatedLevel];\n\n    return (\n        <Tag {...props} className={cn(headingVariants({ level }), className)}>\n            {children}\n        </Tag>\n    );\n};\n\nconst Heading = makeDecoratable(\"Heading\", HeadingBase);\n\nexport { Heading, type HeadingProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAKjC;AACA,MAAMC,OAA2C,GAAG;EAChD,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE;AACP,CAAC;AAED,MAAMC,eAAe,GAAGF,GAAG,CAAC,eAAe,EAAE;EACzCG,QAAQ,EAAE;IACNC,KAAK,EAAE;MACH,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE;IACP;EACJ,CAAC;EACDC,eAAe,EAAE;IACbD,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAQF,MAAME,WAAW,GAAGA,CAAC;EAAEC,QAAQ;EAAEH,KAAK;EAAEI,SAAS;EAAEC,EAAE;EAAE,GAAGC;AAAoB,CAAC,KAAK;EAChF;EACA,MAAMC,cAAc,GAAGP,KAAK,IAAIA,KAAK,IAAIH,OAAO,GAAGG,KAAK,GAAG,CAAC;;EAE5D;EACA,MAAMQ,GAAG,GAAGH,EAAE,IAAIR,OAAO,CAACU,cAAc,CAAC;EAEzC,oBACId,KAAA,CAAAgB,aAAA,CAACD,GAAG,EAAAE,MAAA,CAAAC,MAAA,KAAKL,KAAK;IAAEF,SAAS,EAAEV,EAAE,CAACI,eAAe,CAAC;MAAEE;IAAM,CAAC,CAAC,EAAEI,SAAS;EAAE,IAChED,QACA,CAAC;AAEd,CAAC;AAED,MAAMS,OAAO,GAAGjB,eAAe,CAAC,SAAS,EAAEO,WAAW,CAAC;AAEvD,SAASU,OAAO","ignoreList":[]}
+{"version":3,"names":["React","cn","makeDecoratable","cva","TAG_MAP","headingVariants","variants","level","defaultVariants","HeadingBase","children","className","as","props","validatedLevel","Tag","createElement","Object","assign","Heading"],"sources":["Heading.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\n\nexport type HeadingTags = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;\n\n// Create a mapping of variant to tag\nconst TAG_MAP: Record<HeadingLevels, HeadingTags> = {\n    1: \"h1\",\n    2: \"h2\",\n    3: \"h3\",\n    4: \"h4\",\n    5: \"h5\",\n    6: \"h6\"\n};\n\nconst headingVariants = cva(\"font-sans\", {\n    variants: {\n        level: {\n            1: \"text-h1\",\n            2: \"text-h2\",\n            3: \"text-h3\",\n            4: \"text-h4\",\n            5: \"text-h5\",\n            6: \"text-h6\"\n        }\n    },\n    defaultVariants: {\n        level: 1\n    }\n});\n\ninterface HeadingProps\n    extends React.HTMLAttributes<HTMLHeadingElement>,\n        VariantProps<typeof headingVariants> {\n    as?: HeadingTags;\n}\n\nconst HeadingBase = ({ children, level, className, as, ...props }: HeadingProps) => {\n    // Ensure `level` is a valid number, or fallback to a default value 1\n    const validatedLevel = level && level in TAG_MAP ? level : 1;\n\n    // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`\n    const Tag = as || TAG_MAP[validatedLevel];\n\n    return (\n        <Tag {...props} className={cn(headingVariants({ level }), className)}>\n            {children}\n        </Tag>\n    );\n};\n\nconst Heading = makeDecoratable(\"Heading\", HeadingBase);\n\nexport { Heading, type HeadingProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAKjC;AACA,MAAMC,OAA2C,GAAG;EAChD,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE;AACP,CAAC;AAED,MAAMC,eAAe,GAAGF,GAAG,CAAC,WAAW,EAAE;EACrCG,QAAQ,EAAE;IACNC,KAAK,EAAE;MACH,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE,SAAS;MACZ,CAAC,EAAE;IACP;EACJ,CAAC;EACDC,eAAe,EAAE;IACbD,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAQF,MAAME,WAAW,GAAGA,CAAC;EAAEC,QAAQ;EAAEH,KAAK;EAAEI,SAAS;EAAEC,EAAE;EAAE,GAAGC;AAAoB,CAAC,KAAK;EAChF;EACA,MAAMC,cAAc,GAAGP,KAAK,IAAIA,KAAK,IAAIH,OAAO,GAAGG,KAAK,GAAG,CAAC;;EAE5D;EACA,MAAMQ,GAAG,GAAGH,EAAE,IAAIR,OAAO,CAACU,cAAc,CAAC;EAEzC,oBACId,KAAA,CAAAgB,aAAA,CAACD,GAAG,EAAAE,MAAA,CAAAC,MAAA,KAAKL,KAAK;IAAEF,SAAS,EAAEV,EAAE,CAACI,eAAe,CAAC;MAAEE;IAAM,CAAC,CAAC,EAAEI,SAAS;EAAE,IAChED,QACA,CAAC;AAEd,CAAC;AAED,MAAMS,OAAO,GAAGjB,eAAe,CAAC,SAAS,EAAEO,WAAW,CAAC;AAEvD,SAASU,OAAO","ignoreList":[]}

package/Heading/Heading.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as HeadingStories from './Heading.stories';
 
@@ -181,4 +181,4 @@ const AsExample = () => {
 };
 
 export default AsExample;
-` } } />
+` } } />

package/Heading/Heading.stories.d.ts

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

package/Heading/Heading.stories.js

@@ -1,4 +1,4 @@
-import { Heading } from "./Heading";
+import { Heading } from "./Heading.js";
 const meta = {
   title: "Components/Heading",
   component: Heading,
@@ -79,8 +79,7 @@ export const Documentation = {
       control: "text"
     },
     className: {
-      description: "Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.",
-      control: "none"
+      description: "Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces."
     }
   }
 };

package/Heading/Heading.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["Heading","meta","title","component","argTypes","level","control","type","min","max","Heading1","args","children","Heading2","Heading3","Heading4","Heading5","Heading6","As","as","Documentation","undefined","className","description","options"],"sources":["Heading.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Heading } from \"./Heading\";\n\nconst meta: Meta<typeof Heading> = {\n    title: \"Components/Heading\",\n    component: Heading,\n    argTypes: {\n        level: {\n            control: {\n                type: \"number\",\n                min: 1,\n                max: 6\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Heading>;\n\nexport const Heading1: Story = {\n    args: {\n        level: 1,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading2: Story = {\n    args: {\n        level: 2,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading3: Story = {\n    args: {\n        level: 3,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading4: Story = {\n    args: {\n        level: 4,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading5: Story = {\n    args: {\n        level: 5,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading6: Story = {\n    args: {\n        level: 6,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const As: Story = {\n    args: {\n        level: 2,\n        as: \"h1\",\n        children: \"This is visually a Heading level 2, but semantically an h1\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        level: 1,\n        children: \"This is a heading\",\n        as: undefined,\n        className: undefined\n    },\n    argTypes: {\n        level: {\n            description: \"The heading level (1-6) which determines the size and semantic meaning.\",\n            control: \"select\",\n            options: [1, 2, 3, 4, 5, 6]\n        },\n        as: {\n            description:\n                \"The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.\",\n            control: \"select\",\n            options: [\"none\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n        },\n        children: {\n            description: \"The content of the heading.\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"AAEA,SAASA,OAAO;AAEhB,MAAMC,IAA0B,GAAG;EAC/BC,KAAK,EAAE,oBAAoB;EAC3BC,SAAS,EAAEH,OAAO;EAClBI,QAAQ,EAAE;IACNC,KAAK,EAAE;MACHC,OAAO,EAAE;QACLC,IAAI,EAAE,QAAQ;QACdC,GAAG,EAAE,CAAC;QACNC,GAAG,EAAE;MACT;IACJ;EACJ;AACJ,CAAC;AAED,eAAeR,IAAI;AAGnB,OAAO,MAAMS,QAAe,GAAG;EAC3BC,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMC,QAAe,GAAG;EAC3BF,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAME,QAAe,GAAG;EAC3BH,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMG,QAAe,GAAG;EAC3BJ,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMI,QAAe,GAAG;EAC3BL,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMK,QAAe,GAAG;EAC3BN,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMM,EAAS,GAAG;EACrBP,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRc,EAAE,EAAE,IAAI;IACRP,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMQ,aAAoB,GAAG;EAChCT,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EAAE,mBAAmB;IAC7BO,EAAE,EAAEE,SAAS;IACbC,SAAS,EAAED;EACf,CAAC;EACDjB,QAAQ,EAAE;IACNC,KAAK,EAAE;MACHkB,WAAW,EAAE,yEAAyE;MACtFjB,OAAO,EAAE,QAAQ;MACjBkB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAC9B,CAAC;IACDL,EAAE,EAAE;MACAI,WAAW,EACP,mKAAmK;MACvKjB,OAAO,EAAE,QAAQ;MACjBkB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACxD,CAAC;IACDZ,QAAQ,EAAE;MACNW,WAAW,EAAE,6BAA6B;MAC1CjB,OAAO,EAAE;IACb,CAAC;IACDgB,SAAS,EAAE;MACPC,WAAW,EACP,+GAA+G;MACnHjB,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["Heading","meta","title","component","argTypes","level","control","type","min","max","Heading1","args","children","Heading2","Heading3","Heading4","Heading5","Heading6","As","as","Documentation","undefined","className","description","options"],"sources":["Heading.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Heading } from \"./Heading.js\";\n\nconst meta: Meta<typeof Heading> = {\n    title: \"Components/Heading\",\n    component: Heading,\n    argTypes: {\n        level: {\n            control: {\n                type: \"number\",\n                min: 1,\n                max: 6\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Heading>;\n\nexport const Heading1: Story = {\n    args: {\n        level: 1,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading2: Story = {\n    args: {\n        level: 2,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading3: Story = {\n    args: {\n        level: 3,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading4: Story = {\n    args: {\n        level: 4,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading5: Story = {\n    args: {\n        level: 5,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading6: Story = {\n    args: {\n        level: 6,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const As: Story = {\n    args: {\n        level: 2,\n        as: \"h1\",\n        children: \"This is visually a Heading level 2, but semantically an h1\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        level: 1,\n        children: \"This is a heading\",\n        as: undefined,\n        className: undefined\n    },\n    argTypes: {\n        level: {\n            description: \"The heading level (1-6) which determines the size and semantic meaning.\",\n            control: \"select\",\n            options: [1, 2, 3, 4, 5, 6]\n        },\n        as: {\n            description:\n                \"The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.\",\n            control: \"select\",\n            options: [\"none\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n        },\n        children: {\n            description: \"The content of the heading.\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.\"\n        }\n    }\n};\n"],"mappings":"AAEA,SAASA,OAAO;AAEhB,MAAMC,IAA0B,GAAG;EAC/BC,KAAK,EAAE,oBAAoB;EAC3BC,SAAS,EAAEH,OAAO;EAClBI,QAAQ,EAAE;IACNC,KAAK,EAAE;MACHC,OAAO,EAAE;QACLC,IAAI,EAAE,QAAQ;QACdC,GAAG,EAAE,CAAC;QACNC,GAAG,EAAE;MACT;IACJ;EACJ;AACJ,CAAC;AAED,eAAeR,IAAI;AAGnB,OAAO,MAAMS,QAAe,GAAG;EAC3BC,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMC,QAAe,GAAG;EAC3BF,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAME,QAAe,GAAG;EAC3BH,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMG,QAAe,GAAG;EAC3BJ,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMI,QAAe,GAAG;EAC3BL,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMK,QAAe,GAAG;EAC3BN,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMM,EAAS,GAAG;EACrBP,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRc,EAAE,EAAE,IAAI;IACRP,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMQ,aAAoB,GAAG;EAChCT,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EAAE,mBAAmB;IAC7BO,EAAE,EAAEE,SAAS;IACbC,SAAS,EAAED;EACf,CAAC;EACDjB,QAAQ,EAAE;IACNC,KAAK,EAAE;MACHkB,WAAW,EAAE,yEAAyE;MACtFjB,OAAO,EAAE,QAAQ;MACjBkB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAC9B,CAAC;IACDL,EAAE,EAAE;MACAI,WAAW,EACP,mKAAmK;MACvKjB,OAAO,EAAE,QAAQ;MACjBkB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACxD,CAAC;IACDZ,QAAQ,EAAE;MACNW,WAAW,EAAE,6BAA6B;MAC1CjB,OAAO,EAAE;IACb,CAAC;IACDgB,SAAS,EAAE;MACPC,WAAW,EACP;IACR;EACJ;AACJ,CAAC","ignoreList":[]}

package/Heading/index.d.ts

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

package/Heading/index.js

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

package/Heading/index.js.map

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

package/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const iconVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
     color?: "accent" | "inherit" | "neutral-light" | "neutral-strong" | "neutral-strong-transparent" | "neutral-base" | "neutral-negative" | null | undefined;
@@ -21,7 +21,7 @@ declare const Icon: ((props: IconProps) => React.JSX.Element) & {
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: IconProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: IconProps) => React.JSX.Element) & {
         original: (props: IconProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Icon/Icon.js

@@ -1,22 +1,22 @@
 import React from "react";
 import { AccessibleIcon } from "radix-ui";
-import { cn, cva, makeDecoratable } from "../utils";
-const iconVariants = cva("wby-shrink-0", {
+import { cn, cva, makeDecoratable } from "../utils.js";
+const iconVariants = cva("shrink-0", {
   variants: {
     size: {
-      xs: "wby-size-sm-extra",
-      sm: "wby-size-md",
-      md: "wby-size-md-plus",
-      lg: "wby-size-lg"
+      xs: "size-sm-extra",
+      sm: "size-md",
+      md: "size-md-plus",
+      lg: "size-lg"
     },
     color: {
-      inherit: "wby-fill-inherit",
-      accent: "wby-fill-accent-default",
-      "neutral-light": "wby-fill-neutral-strong",
-      "neutral-strong": "wby-fill-neutral-xstrong",
-      "neutral-strong-transparent": "wby-fill-neutral-xstrong/30",
-      "neutral-base": "wby-fill-neutral-base",
-      "neutral-negative": "wby-fill-neutral-base/50"
+      inherit: "fill-inherit text-inherit",
+      accent: "fill-accent-default text-accent-default",
+      "neutral-light": "fill-neutral-strong text-neutral-strong",
+      "neutral-strong": "fill-neutral-xstrong text-neutral-xstrong",
+      "neutral-strong-transparent": "fill-neutral-xstrong/30 text-neutral-xstrong/30",
+      "neutral-base": "fill-neutral-base text-neutral-base",
+      "neutral-negative": "fill-neutral-base/50 text-neutral-base/50"
     }
   },
   defaultVariants: {

package/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AccessibleIcon","cn","cva","makeDecoratable","iconVariants","variants","size","xs","sm","md","lg","color","inherit","accent","defaultVariants","IconBase","props","label","icon","className","rest","createElement","Root","cloneElement","Icon"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { AccessibleIcon } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst iconVariants = cva(\"wby-shrink-0\", {\n    variants: {\n        size: {\n            xs: \"wby-size-sm-extra\",\n            sm: \"wby-size-md\",\n            md: \"wby-size-md-plus\",\n            lg: \"wby-size-lg\"\n        },\n        color: {\n            inherit: \"wby-fill-inherit\",\n            accent: \"wby-fill-accent-default\",\n            \"neutral-light\": \"wby-fill-neutral-strong\",\n            \"neutral-strong\": \"wby-fill-neutral-xstrong\",\n            \"neutral-strong-transparent\": \"wby-fill-neutral-xstrong/30\",\n            \"neutral-base\": \"wby-fill-neutral-base\",\n            \"neutral-negative\": \"wby-fill-neutral-base/50\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        color: \"inherit\"\n    }\n});\n\ninterface IconProps\n    extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, \"color\">,\n        VariantProps<typeof iconVariants> {\n    label: string;\n    icon: React.ReactNode;\n}\n\nconst IconBase = (props: IconProps) => {\n    const { label, icon, color, size, className, ...rest } = props;\n    return (\n        <AccessibleIcon.Root label={label}>\n            {/* @ts-expect-error */}\n            {React.cloneElement(icon, {\n                ...rest,\n                className: cn(iconVariants({ color, size }), className)\n            })}\n        </AccessibleIcon.Root>\n    );\n};\n\nconst Icon = makeDecoratable(\"Icon\", IconBase);\n\nexport { Icon, type IconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,YAAY,GAAGF,GAAG,CAAC,cAAc,EAAE;EACrCG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,mBAAmB;MACvBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,kBAAkB;MACtBC,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,OAAO,EAAE,kBAAkB;MAC3BC,MAAM,EAAE,yBAAyB;MACjC,eAAe,EAAE,yBAAyB;MAC1C,gBAAgB,EAAE,0BAA0B;MAC5C,4BAA4B,EAAE,6BAA6B;MAC3D,cAAc,EAAE,uBAAuB;MACvC,kBAAkB,EAAE;IACxB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,IAAI,EAAE,IAAI;IACVK,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AASF,MAAMI,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEP,KAAK;IAAEL,IAAI;IAAEa,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC9D,oBACIjB,KAAA,CAAAsB,aAAA,CAACrB,cAAc,CAACsB,IAAI;IAACL,KAAK,EAAEA;EAAM,gBAE7BlB,KAAK,CAACwB,YAAY,CAACL,IAAI,EAAE;IACtB,GAAGE,IAAI;IACPD,SAAS,EAAElB,EAAE,CAACG,YAAY,CAAC;MAAEO,KAAK;MAAEL;IAAK,CAAC,CAAC,EAAEa,SAAS;EAC1D,CAAC,CACgB,CAAC;AAE9B,CAAC;AAED,MAAMK,IAAI,GAAGrB,eAAe,CAAC,MAAM,EAAEY,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}
+{"version":3,"names":["React","AccessibleIcon","cn","cva","makeDecoratable","iconVariants","variants","size","xs","sm","md","lg","color","inherit","accent","defaultVariants","IconBase","props","label","icon","className","rest","createElement","Root","cloneElement","Icon"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { AccessibleIcon } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst iconVariants = cva(\"shrink-0\", {\n    variants: {\n        size: {\n            xs: \"size-sm-extra\",\n            sm: \"size-md\",\n            md: \"size-md-plus\",\n            lg: \"size-lg\"\n        },\n        color: {\n            inherit: \"fill-inherit text-inherit\",\n            accent: \"fill-accent-default text-accent-default\",\n            \"neutral-light\": \"fill-neutral-strong text-neutral-strong\",\n            \"neutral-strong\": \"fill-neutral-xstrong text-neutral-xstrong\",\n            \"neutral-strong-transparent\": \"fill-neutral-xstrong/30 text-neutral-xstrong/30\",\n            \"neutral-base\": \"fill-neutral-base text-neutral-base\",\n            \"neutral-negative\": \"fill-neutral-base/50 text-neutral-base/50\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        color: \"inherit\"\n    }\n});\n\ninterface IconProps\n    extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, \"color\">,\n        VariantProps<typeof iconVariants> {\n    label: string;\n    icon: React.ReactNode;\n}\n\nconst IconBase = (props: IconProps) => {\n    const { label, icon, color, size, className, ...rest } = props;\n    return (\n        <AccessibleIcon.Root label={label}>\n            {/* @ts-expect-error */}\n            {React.cloneElement(icon, {\n                ...rest,\n                className: cn(iconVariants({ color, size }), className)\n            })}\n        </AccessibleIcon.Root>\n    );\n};\n\nconst Icon = makeDecoratable(\"Icon\", IconBase);\n\nexport { Icon, type IconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,YAAY,GAAGF,GAAG,CAAC,UAAU,EAAE;EACjCG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,OAAO,EAAE,2BAA2B;MACpCC,MAAM,EAAE,yCAAyC;MACjD,eAAe,EAAE,yCAAyC;MAC1D,gBAAgB,EAAE,2CAA2C;MAC7D,4BAA4B,EAAE,iDAAiD;MAC/E,cAAc,EAAE,qCAAqC;MACrD,kBAAkB,EAAE;IACxB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,IAAI,EAAE,IAAI;IACVK,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AASF,MAAMI,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEP,KAAK;IAAEL,IAAI;IAAEa,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC9D,oBACIjB,KAAA,CAAAsB,aAAA,CAACrB,cAAc,CAACsB,IAAI;IAACL,KAAK,EAAEA;EAAM,gBAE7BlB,KAAK,CAACwB,YAAY,CAACL,IAAI,EAAE;IACtB,GAAGE,IAAI;IACPD,SAAS,EAAElB,EAAE,CAACG,YAAY,CAAC;MAAEO,KAAK;MAAEL;IAAK,CAAC,CAAC,EAAEa,SAAS;EAC1D,CAAC,CACgB,CAAC;AAE9B,CAAC;AAED,MAAMK,IAAI,GAAGrB,eAAe,CAAC,MAAM,EAAEY,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}

package/Icon/Icon.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as IconStories from './Icon.stories';
 
@@ -97,7 +97,7 @@ import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const InheritColorIconExample = () => {
     return (
-        <div className="wby-fill-success">
+        <div className="fill-success">
             <Icon
                 icon={<CloseIcon />}
                 label="This is an icon"
@@ -183,7 +183,7 @@ import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const NeutralStrongTransparentIconExample = () => {
     return (
-        <div className="wby-bg-neutral-disabled wby-p-3xl wby-rounded-md">
+        <div className="bg-neutral-disabled p-3xl rounded-md">
             <Icon
                 icon={<CloseIcon />}
                 label="This is an icon"
@@ -206,7 +206,7 @@ import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const NeutralBaseIconExample = () => {
     return (
-        <div className="wby-bg-neutral-dark wby-p-3xl wby-rounded-md">
+        <div className="bg-neutral-dark p-3xl rounded-md">
             <Icon
                 icon={<CloseIcon />}
                 label="This is an icon"
@@ -229,7 +229,7 @@ import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const NeutralNegativeIconExample = () => {
     return (
-        <div className="wby-bg-neutral-dark wby-p-3xl wby-rounded-md">
+        <div className="bg-neutral-dark p-3xl rounded-md">
             <Icon
                 icon={<CloseIcon />}
                 label="This is an icon"

package/Icon/Icon.stories.d.ts

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