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

package/HeaderBar/HeaderBar.js

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

package/HeaderBar/HeaderBar.js.map

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

package/HeaderBar/HeaderBar.stories.d.ts

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

package/HeaderBar/HeaderBar.stories.js

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

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"],"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":[]}
+{"version":3,"file":"HeaderBar/HeaderBar.stories.js","sources":["../../src/HeaderBar/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.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"],"names":["meta","HeaderBar","Story","StartExample","Text","MiddleExample","EndExample","Button","Avatar","IconButton","KeyboardArrowRightIcon","console","Default","StartContentOnly","MiddleContentOnly","EndContentOnly","StartEndContentOnly","MoreStartContent","Documentation"],"mappings":";;;;;;AAQA,MAAMA,OAA+B;IACjC,OAAO;IACP,WAAWC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,0BAAeF;AAIf,MAAMG,eAAe,kBACjB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxB;AAIT,MAAMC,gBAAgB,kBAAM,0CAAE;AAE9B,MAAMC,aAAa,kBACf,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QAAC,SAAS;QAAS,MAAM;QAAM,MAAM;sBAC5C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;QACT,qBAAO,oBAACA,OAAO,KAAK;YAAC,KAAK;;QAC1B,wBAAU,oBAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;sBAE3C,oBAACC,YAAUA;QACP,SAAS;QACT,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,gBAAsBA;QAC7B,SAAS,IAAMC,QAAQ,GAAG,CAAC;;AAMpC,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,oBAACT,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACV,cAAYA;IACxB;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,QAAQ,WAAR,GAAQ,oBAACT,eAAaA;IAC1B;AACJ;AAEO,MAAMU,iBAAwB;IACjC,MAAM;QACF,KAAK,WAAL,GAAK,oBAACT,YAAUA;IACpB;AACJ;AAEO,MAAMU,sBAA6B;IACtC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACb,cAAYA;QACpB,KAAK,WAAL,GAAK,oBAACG,YAAUA;IACpB;AACJ;AAEO,MAAMW,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GACI,wDACI,oBAACd,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA;QAGrB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACf,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;IACA,UAAU;QACN,OAAO;YACH,aAAa;QACjB;QACA,QAAQ;YACJ,aAAa;QACjB;QACA,KAAK;YACD,aAAa;QACjB;IACJ;AACJ"}

package/HeaderBar/index.js

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

package/Heading/Heading.d.ts

@@ -3,26 +3,27 @@ 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 | 2 | 4 | 3 | 5 | 6 | null | undefined;
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
     as?: HeadingTags;
 }
-declare const Heading: (({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
-    original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+declare const HeadingBase: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+declare const Heading: typeof HeadingBase & {
+    original: typeof HeadingBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
-        original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+    original: typeof HeadingBase & {
+        original: typeof HeadingBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    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;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof HeadingBase & {
+        original: typeof HeadingBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Heading/Heading.js

@@ -1,46 +1,37 @@
-import React from "react";
-import { cn, makeDecoratable, cva } from "../utils.js";
-// Create a mapping of variant to tag
+import react from "react";
+import { cn, cva, makeDecoratable } from "../utils.js";
 const TAG_MAP = {
-  1: "h1",
-  2: "h2",
-  3: "h3",
-  4: "h4",
-  5: "h5",
-  6: "h6"
+    1: "h1",
+    2: "h2",
+    3: "h3",
+    4: "h4",
+    5: "h5",
+    6: "h6"
 };
 const headingVariants = cva("font-sans", {
-  variants: {
-    level: {
-      1: "text-h1",
-      2: "text-h2",
-      3: "text-h3",
-      4: "text-h4",
-      5: "text-h5",
-      6: "text-h6"
+    variants: {
+        level: {
+            1: "text-h1",
+            2: "text-h2",
+            3: "text-h3",
+            4: "text-h4",
+            5: "text-h5",
+            6: "text-h6"
+        }
+    },
+    defaultVariants: {
+        level: 1
     }
-  },
-  defaultVariants: {
-    level: 1
-  }
 });
-const HeadingBase = ({
-  children,
-  level,
-  className,
-  as,
-  ...props
-}) => {
-  // Ensure `level` is a valid number, or fallback to a default value 1
-  const validatedLevel = level && level in TAG_MAP ? level : 1;
-
-  // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`
-  const Tag = as || TAG_MAP[validatedLevel];
-  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, props, {
-    className: cn(headingVariants({
-      level
-    }), className)
-  }), children);
+const HeadingBase = ({ children, level, className, as, ...props })=>{
+    const validatedLevel = level && level in TAG_MAP ? level : 1;
+    const Tag = as || TAG_MAP[validatedLevel];
+    return /*#__PURE__*/ react.createElement(Tag, {
+        ...props,
+        className: cn(headingVariants({
+            level
+        }), className)
+    }, children);
 };
 const Heading = makeDecoratable("Heading", HeadingBase);
 export { Heading };

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.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>, 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;AAOF,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,"file":"Heading/Heading.js","sources":["../../src/Heading/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>, 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"],"names":["TAG_MAP","headingVariants","cva","HeadingBase","children","level","className","as","props","validatedLevel","Tag","cn","Heading","makeDecoratable"],"mappings":";;AAOA,MAAMA,UAA8C;IAChD,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACP;AAEA,MAAMC,kBAAkBC,IAAI,aAAa;IACrC,UAAU;QACN,OAAO;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;QACP;IACJ;IACA,iBAAiB;QACb,OAAO;IACX;AACJ;AAOA,MAAMC,cAAc,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAEC,EAAE,EAAE,GAAGC,OAAqB;IAE3E,MAAMC,iBAAiBJ,SAASA,SAASL,UAAUK,QAAQ;IAG3D,MAAMK,MAAMH,MAAMP,OAAO,CAACS,eAAe;IAEzC,OAAO,WAAP,GACI,oBAACC,KAAAA;QAAK,GAAGF,KAAK;QAAE,WAAWG,GAAGV,gBAAgB;YAAEI;QAAM,IAAIC;OACrDF;AAGb;AAEA,MAAMQ,UAAUC,gBAAgB,WAAWV"}

package/Heading/Heading.stories.d.ts

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

package/Heading/Heading.stories.js

@@ -1,87 +1,104 @@
 import { Heading } from "./Heading.js";
 const meta = {
-  title: "Components/Heading",
-  component: Heading,
-  argTypes: {
-    level: {
-      control: {
-        type: "number",
-        min: 1,
-        max: 6
-      }
+    title: "Components/Heading",
+    component: Heading,
+    argTypes: {
+        level: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 6
+            }
+        }
     }
-  }
 };
-export default meta;
-export const Heading1 = {
-  args: {
-    level: 1,
-    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
-  }
+const Heading_stories = meta;
+const Heading1 = {
+    args: {
+        level: 1,
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
 };
-export const Heading2 = {
-  args: {
-    level: 2,
-    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
-  }
+const Heading2 = {
+    args: {
+        level: 2,
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
 };
-export const Heading3 = {
-  args: {
-    level: 3,
-    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
-  }
+const Heading3 = {
+    args: {
+        level: 3,
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
 };
-export const Heading4 = {
-  args: {
-    level: 4,
-    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
-  }
+const Heading4 = {
+    args: {
+        level: 4,
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
 };
-export const Heading5 = {
-  args: {
-    level: 5,
-    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
-  }
+const Heading5 = {
+    args: {
+        level: 5,
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
 };
-export const Heading6 = {
-  args: {
-    level: 6,
-    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
-  }
+const Heading6 = {
+    args: {
+        level: 6,
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
 };
-export const As = {
-  args: {
-    level: 2,
-    as: "h1",
-    children: "This is visually a Heading level 2, but semantically an h1"
-  }
+const As = {
+    args: {
+        level: 2,
+        as: "h1",
+        children: "This is visually a Heading level 2, but semantically an h1"
+    }
 };
-export const Documentation = {
-  args: {
-    level: 1,
-    children: "This is a heading",
-    as: undefined,
-    className: undefined
-  },
-  argTypes: {
-    level: {
-      description: "The heading level (1-6) which determines the size and semantic meaning.",
-      control: "select",
-      options: [1, 2, 3, 4, 5, 6]
-    },
-    as: {
-      description: "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.",
-      control: "select",
-      options: ["none", "h1", "h2", "h3", "h4", "h5", "h6"]
-    },
-    children: {
-      description: "The content of the heading.",
-      control: "text"
+const Documentation = {
+    args: {
+        level: 1,
+        children: "This is a heading",
+        as: void 0,
+        className: void 0
     },
-    className: {
-      description: "Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces."
+    argTypes: {
+        level: {
+            description: "The heading level (1-6) which determines the size and semantic meaning.",
+            control: "select",
+            options: [
+                1,
+                2,
+                3,
+                4,
+                5,
+                6
+            ]
+        },
+        as: {
+            description: "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.",
+            control: "select",
+            options: [
+                "none",
+                "h1",
+                "h2",
+                "h3",
+                "h4",
+                "h5",
+                "h6"
+            ]
+        },
+        children: {
+            description: "The content of the heading.",
+            control: "text"
+        },
+        className: {
+            description: "Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces."
+        }
     }
-  }
 };
+export default Heading_stories;
+export { As, Documentation, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6 };
 
 //# sourceMappingURL=Heading.stories.js.map