@webiny/admin-ui 0.0.0-unstable.6844005670 → 0.0.0-unstable.7be00a75a9

package/ScrollArea/ScrollArea.stories.js

@@ -1,117 +1,121 @@
 import { ScrollArea, ScrollBar } from "./ScrollArea.js";
-import React from "react";
+import react from "react";
 import { Heading } from "../Heading/index.js";
 import { Text } from "../Text/index.js";
 import { Separator } from "../Separator/index.js";
 const meta = {
-  title: "Components/ScrollArea",
-  component: ScrollArea,
-  argTypes: {},
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "w-[700px]"
-  }, /*#__PURE__*/React.createElement(Story, null))]
+    title: "Components/ScrollArea",
+    component: ScrollArea,
+    argTypes: {},
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "w-[700px]"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
 };
-export default meta;
+const ScrollArea_stories = meta;
 const tags = Array.from({
-  length: 50
-}).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
-export const Default = {
-  render: () => {
-    return /*#__PURE__*/React.createElement(ScrollArea, {
-      className: "h-72 w-48 rounded-md border border-neutral-dimmed"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-4"
-    }, /*#__PURE__*/React.createElement(Heading, {
-      level: 6,
-      className: "mb-4"
-    }, "Tags"), tags.map(tag => /*#__PURE__*/React.createElement("div", {
-      key: tag
-    }, /*#__PURE__*/React.createElement(Text, {
-      className: "text-sm"
-    }, tag), /*#__PURE__*/React.createElement(Separator, {
-      className: "my-2"
-    })))));
-  }
+    length: 50
+}).map((_, i, a)=>`v1.2.0-beta.${a.length - i}`);
+const Default = {
+    render: ()=>/*#__PURE__*/ react.createElement(ScrollArea, {
+            className: "h-72 w-48 rounded-md border border-neutral-dimmed"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "p-4"
+        }, /*#__PURE__*/ react.createElement(Heading, {
+            level: 6,
+            className: "mb-4"
+        }, "Tags"), tags.map((tag)=>/*#__PURE__*/ react.createElement("div", {
+                key: tag
+            }, /*#__PURE__*/ react.createElement(Text, {
+                className: "text-sm"
+            }, tag), /*#__PURE__*/ react.createElement(Separator, {
+                className: "my-2"
+            })))))
 };
-export const HorizontalScrolling = {
-  render: () => {
-    const works = [{
-      artist: "Ornella Binni",
-      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
-    }, {
-      artist: "Ornella Binni",
-      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
-    }, {
-      artist: "Ornella Binni",
-      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
-    }];
-    return /*#__PURE__*/React.createElement(ScrollArea, {
-      className: "w-96 whitespace-nowrap rounded-md border border-neutral-dimmed"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex w-max space-x-4 p-4"
-    }, works.map(artwork => /*#__PURE__*/React.createElement("figure", {
-      key: artwork.artist,
-      className: "shrink-0"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "overflow-hidden rounded-md"
-    }, /*#__PURE__*/React.createElement("img", {
-      src: artwork.art,
-      alt: `Photo by ${artwork.artist}`,
-      className: "aspect-[3/4] h-fit w-fit object-cover",
-      width: 300,
-      height: 400
-    })), /*#__PURE__*/React.createElement("figcaption", {
-      className: "pt-2 text-xs text-neutral-strong"
-    }, "Photo by", " ", /*#__PURE__*/React.createElement("span", {
-      className: "font-semibold text-neutral-primary"
-    }, artwork.artist))))), /*#__PURE__*/React.createElement(ScrollBar, {
-      orientation: "horizontal"
-    }));
-  }
+const HorizontalScrolling = {
+    render: ()=>{
+        const works = [
+            {
+                artist: "Ornella Binni",
+                art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+            },
+            {
+                artist: "Ornella Binni",
+                art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+            },
+            {
+                artist: "Ornella Binni",
+                art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+            }
+        ];
+        return /*#__PURE__*/ react.createElement(ScrollArea, {
+            className: "w-96 whitespace-nowrap rounded-md border border-neutral-dimmed"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex w-max space-x-4 p-4"
+        }, works.map((artwork)=>/*#__PURE__*/ react.createElement("figure", {
+                key: artwork.artist,
+                className: "shrink-0"
+            }, /*#__PURE__*/ react.createElement("div", {
+                className: "overflow-hidden rounded-md"
+            }, /*#__PURE__*/ react.createElement("img", {
+                src: artwork.art,
+                alt: `Photo by ${artwork.artist}`,
+                className: "aspect-[3/4] h-fit w-fit object-cover",
+                width: 300,
+                height: 400
+            })), /*#__PURE__*/ react.createElement("figcaption", {
+                className: "pt-2 text-xs text-neutral-strong"
+            }, "Photo by", " ", /*#__PURE__*/ react.createElement("span", {
+                className: "font-semibold text-neutral-primary"
+            }, artwork.artist))))), /*#__PURE__*/ react.createElement(ScrollBar, {
+            orientation: "horizontal"
+        }));
+    }
 };
-export const WithScrollPositionTracking = {
-  render: () => {
-    const [position, setPosition] = React.useState(null);
-    const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);
-    const handleScrollPositionChange = React.useCallback(pos => {
-      setPosition(pos);
-
-      // Trigger load more when scrolled 90% down.
-      if (pos.top >= 0.9 && !loadMoreTriggered) {
-        setLoadMoreTriggered(true);
-        console.log("Load more triggered at position:", pos);
-      } else if (pos.top < 0.9) {
-        setLoadMoreTriggered(false);
-      }
-    }, [loadMoreTriggered]);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "space-y-4"
-    }, /*#__PURE__*/React.createElement(ScrollArea, {
-      className: "h-72 w-48 rounded-md border border-neutral-dimmed",
-      onScrollPositionChange: handleScrollPositionChange
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-4"
-    }, /*#__PURE__*/React.createElement(Heading, {
-      level: 6,
-      className: "mb-4"
-    }, "Tags"), tags.map(tag => /*#__PURE__*/React.createElement("div", {
-      key: tag
-    }, /*#__PURE__*/React.createElement(Text, {
-      className: "text-sm"
-    }, tag), /*#__PURE__*/React.createElement(Separator, {
-      className: "my-2"
-    }))))), position && /*#__PURE__*/React.createElement("div", {
-      className: "rounded-md border border-neutral-dimmed p-4 space-y-2"
-    }, /*#__PURE__*/React.createElement(Text, {
-      className: "font-semibold"
-    }, "Scroll Position:"), /*#__PURE__*/React.createElement(Text, {
-      className: "text-sm"
-    }, "Top: ", (position.top * 100).toFixed(1), "%"), /*#__PURE__*/React.createElement(Text, {
-      className: "text-sm"
-    }, "ScrollTop: ", position.scrollTop, "px"), /*#__PURE__*/React.createElement(Text, {
-      className: "text-sm"
-    }, "Load More Triggered: ", loadMoreTriggered ? "Yes" : "No")));
-  }
+const WithScrollPositionTracking = {
+    render: ()=>{
+        const [position, setPosition] = react.useState(null);
+        const [loadMoreTriggered, setLoadMoreTriggered] = react.useState(false);
+        const handleScrollPositionChange = react.useCallback((pos)=>{
+            setPosition(pos);
+            if (pos.top >= 0.9 && !loadMoreTriggered) {
+                setLoadMoreTriggered(true);
+                console.log("Load more triggered at position:", pos);
+            } else if (pos.top < 0.9) setLoadMoreTriggered(false);
+        }, [
+            loadMoreTriggered
+        ]);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "space-y-4"
+        }, /*#__PURE__*/ react.createElement(ScrollArea, {
+            className: "h-72 w-48 rounded-md border border-neutral-dimmed",
+            onScrollPositionChange: handleScrollPositionChange
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "p-4"
+        }, /*#__PURE__*/ react.createElement(Heading, {
+            level: 6,
+            className: "mb-4"
+        }, "Tags"), tags.map((tag)=>/*#__PURE__*/ react.createElement("div", {
+                key: tag
+            }, /*#__PURE__*/ react.createElement(Text, {
+                className: "text-sm"
+            }, tag), /*#__PURE__*/ react.createElement(Separator, {
+                className: "my-2"
+            }))))), position && /*#__PURE__*/ react.createElement("div", {
+            className: "rounded-md border border-neutral-dimmed p-4 space-y-2"
+        }, /*#__PURE__*/ react.createElement(Text, {
+            className: "font-semibold"
+        }, "Scroll Position:"), /*#__PURE__*/ react.createElement(Text, {
+            className: "text-sm"
+        }, "Top: ", (100 * position.top).toFixed(1), "%"), /*#__PURE__*/ react.createElement(Text, {
+            className: "text-sm"
+        }, "ScrollTop: ", position.scrollTop, "px"), /*#__PURE__*/ react.createElement(Text, {
+            className: "text-sm"
+        }, "Load More Triggered: ", loadMoreTriggered ? "Yes" : "No")));
+    }
 };
+export default ScrollArea_stories;
+export { Default, HorizontalScrolling, WithScrollPositionTracking };
 
 //# sourceMappingURL=ScrollArea.stories.js.map

package/ScrollArea/ScrollArea.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScrollArea","ScrollBar","React","Heading","Text","Separator","meta","title","component","argTypes","decorators","Story","createElement","className","tags","Array","from","length","map","_","i","a","Default","render","level","tag","key","HorizontalScrolling","works","artist","art","artwork","src","alt","width","height","orientation","WithScrollPositionTracking","position","setPosition","useState","loadMoreTriggered","setLoadMoreTriggered","handleScrollPositionChange","useCallback","pos","top","console","log","onScrollPositionChange","toFixed","scrollTop"],"sources":["ScrollArea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ScrollArea, ScrollBar, ScrollPosition } from \"./ScrollArea.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst meta: Meta<typeof ScrollArea> = {\n    title: \"Components/ScrollArea\",\n    component: ScrollArea,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof ScrollArea>;\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport const Default: Story = {\n    render: () => {\n        return (\n            <ScrollArea className=\"h-72 w-48 rounded-md border border-neutral-dimmed\">\n                <div className=\"p-4\">\n                    <Heading level={6} className=\"mb-4\">\n                        Tags\n                    </Heading>\n                    {tags.map(tag => (\n                        <div key={tag}>\n                            <Text className=\"text-sm\">{tag}</Text>\n                            <Separator className=\"my-2\" />\n                        </div>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    }\n};\n\nexport const HorizontalScrolling: Story = {\n    render: () => {\n        const works = [\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            }\n        ];\n\n        return (\n            <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border border-neutral-dimmed\">\n                <div className=\"flex w-max space-x-4 p-4\">\n                    {works.map(artwork => (\n                        <figure key={artwork.artist} className=\"shrink-0\">\n                            <div className=\"overflow-hidden rounded-md\">\n                                <img\n                                    src={artwork.art}\n                                    alt={`Photo by ${artwork.artist}`}\n                                    className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                                    width={300}\n                                    height={400}\n                                />\n                            </div>\n                            <figcaption className=\"pt-2 text-xs text-neutral-strong\">\n                                Photo by{\" \"}\n                                <span className=\"font-semibold text-neutral-primary\">\n                                    {artwork.artist}\n                                </span>\n                            </figcaption>\n                        </figure>\n                    ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n        );\n    }\n};\n\nexport const WithScrollPositionTracking: Story = {\n    render: () => {\n        const [position, setPosition] = React.useState<ScrollPosition | null>(null);\n        const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);\n\n        const handleScrollPositionChange = React.useCallback(\n            (pos: ScrollPosition) => {\n                setPosition(pos);\n\n                // Trigger load more when scrolled 90% down.\n                if (pos.top >= 0.9 && !loadMoreTriggered) {\n                    setLoadMoreTriggered(true);\n                    console.log(\"Load more triggered at position:\", pos);\n                } else if (pos.top < 0.9) {\n                    setLoadMoreTriggered(false);\n                }\n            },\n            [loadMoreTriggered]\n        );\n\n        return (\n            <div className=\"space-y-4\">\n                <ScrollArea\n                    className=\"h-72 w-48 rounded-md border border-neutral-dimmed\"\n                    onScrollPositionChange={handleScrollPositionChange}\n                >\n                    <div className=\"p-4\">\n                        <Heading level={6} className=\"mb-4\">\n                            Tags\n                        </Heading>\n                        {tags.map(tag => (\n                            <div key={tag}>\n                                <Text className=\"text-sm\">{tag}</Text>\n                                <Separator className=\"my-2\" />\n                            </div>\n                        ))}\n                    </div>\n                </ScrollArea>\n\n                {position && (\n                    <div className=\"rounded-md border border-neutral-dimmed p-4 space-y-2\">\n                        <Text className=\"font-semibold\">Scroll Position:</Text>\n                        <Text className=\"text-sm\">Top: {(position.top * 100).toFixed(1)}%</Text>\n                        <Text className=\"text-sm\">ScrollTop: {position.scrollTop}px</Text>\n                        <Text className=\"text-sm\">\n                            Load More Triggered: {loadMoreTriggered ? \"Yes\" : \"No\"}\n                        </Text>\n                    </div>\n                )}\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ScrollArea/ScrollArea.stories.js","sources":["../../src/ScrollArea/ScrollArea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ScrollArea, ScrollBar, ScrollPosition } from \"./ScrollArea.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst meta: Meta<typeof ScrollArea> = {\n    title: \"Components/ScrollArea\",\n    component: ScrollArea,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof ScrollArea>;\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport const Default: Story = {\n    render: () => {\n        return (\n            <ScrollArea className=\"h-72 w-48 rounded-md border border-neutral-dimmed\">\n                <div className=\"p-4\">\n                    <Heading level={6} className=\"mb-4\">\n                        Tags\n                    </Heading>\n                    {tags.map(tag => (\n                        <div key={tag}>\n                            <Text className=\"text-sm\">{tag}</Text>\n                            <Separator className=\"my-2\" />\n                        </div>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    }\n};\n\nexport const HorizontalScrolling: Story = {\n    render: () => {\n        const works = [\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            }\n        ];\n\n        return (\n            <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border border-neutral-dimmed\">\n                <div className=\"flex w-max space-x-4 p-4\">\n                    {works.map(artwork => (\n                        <figure key={artwork.artist} className=\"shrink-0\">\n                            <div className=\"overflow-hidden rounded-md\">\n                                <img\n                                    src={artwork.art}\n                                    alt={`Photo by ${artwork.artist}`}\n                                    className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                                    width={300}\n                                    height={400}\n                                />\n                            </div>\n                            <figcaption className=\"pt-2 text-xs text-neutral-strong\">\n                                Photo by{\" \"}\n                                <span className=\"font-semibold text-neutral-primary\">\n                                    {artwork.artist}\n                                </span>\n                            </figcaption>\n                        </figure>\n                    ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n        );\n    }\n};\n\nexport const WithScrollPositionTracking: Story = {\n    render: () => {\n        const [position, setPosition] = React.useState<ScrollPosition | null>(null);\n        const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);\n\n        const handleScrollPositionChange = React.useCallback(\n            (pos: ScrollPosition) => {\n                setPosition(pos);\n\n                // Trigger load more when scrolled 90% down.\n                if (pos.top >= 0.9 && !loadMoreTriggered) {\n                    setLoadMoreTriggered(true);\n                    console.log(\"Load more triggered at position:\", pos);\n                } else if (pos.top < 0.9) {\n                    setLoadMoreTriggered(false);\n                }\n            },\n            [loadMoreTriggered]\n        );\n\n        return (\n            <div className=\"space-y-4\">\n                <ScrollArea\n                    className=\"h-72 w-48 rounded-md border border-neutral-dimmed\"\n                    onScrollPositionChange={handleScrollPositionChange}\n                >\n                    <div className=\"p-4\">\n                        <Heading level={6} className=\"mb-4\">\n                            Tags\n                        </Heading>\n                        {tags.map(tag => (\n                            <div key={tag}>\n                                <Text className=\"text-sm\">{tag}</Text>\n                                <Separator className=\"my-2\" />\n                            </div>\n                        ))}\n                    </div>\n                </ScrollArea>\n\n                {position && (\n                    <div className=\"rounded-md border border-neutral-dimmed p-4 space-y-2\">\n                        <Text className=\"font-semibold\">Scroll Position:</Text>\n                        <Text className=\"text-sm\">Top: {(position.top * 100).toFixed(1)}%</Text>\n                        <Text className=\"text-sm\">ScrollTop: {position.scrollTop}px</Text>\n                        <Text className=\"text-sm\">\n                            Load More Triggered: {loadMoreTriggered ? \"Yes\" : \"No\"}\n                        </Text>\n                    </div>\n                )}\n            </div>\n        );\n    }\n};\n"],"names":["meta","ScrollArea","Story","tags","Array","_","i","a","Default","Heading","tag","Text","Separator","HorizontalScrolling","works","artwork","ScrollBar","WithScrollPositionTracking","position","setPosition","React","loadMoreTriggered","setLoadMoreTriggered","handleScrollPositionChange","pos","console"],"mappings":"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"}

package/ScrollArea/index.js

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

package/Scrollbar/Scrollbar.js

@@ -1,8 +1,6 @@
-import React from "react";
+import react from "react";
 import { Scrollbars } from "react-custom-scrollbars";
-const Scrollbar = props => {
-  return /*#__PURE__*/React.createElement(Scrollbars, props);
-};
+const Scrollbar = (props)=>/*#__PURE__*/ react.createElement(Scrollbars, props);
 export { Scrollbar };
 
 //# sourceMappingURL=Scrollbar.js.map

package/Scrollbar/Scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Scrollbars","Scrollbar","props","createElement"],"sources":["Scrollbar.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    type ScrollbarProps as ReactCustomScrollbarProps,\n    Scrollbars\n} from \"react-custom-scrollbars\";\n\ninterface ScrollbarProps extends ReactCustomScrollbarProps {\n    style?: React.CSSProperties;\n    [key: string]: any;\n}\n\nconst Scrollbar = (props: ScrollbarProps) => {\n    return <Scrollbars {...props} />;\n};\n\nexport { Scrollbar, type ScrollbarProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAEIC,UAAU,QACP,yBAAyB;AAOhC,MAAMC,SAAS,GAAIC,KAAqB,IAAK;EACzC,oBAAOH,KAAA,CAAAI,aAAA,CAACH,UAAU,EAAKE,KAAQ,CAAC;AACpC,CAAC;AAED,SAASD,SAAS","ignoreList":[]}
+{"version":3,"file":"Scrollbar/Scrollbar.js","sources":["../../src/Scrollbar/Scrollbar.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    type ScrollbarProps as ReactCustomScrollbarProps,\n    Scrollbars\n} from \"react-custom-scrollbars\";\n\ninterface ScrollbarProps extends ReactCustomScrollbarProps {\n    style?: React.CSSProperties;\n    [key: string]: any;\n}\n\nconst Scrollbar = (props: ScrollbarProps) => {\n    return <Scrollbars {...props} />;\n};\n\nexport { Scrollbar, type ScrollbarProps };\n"],"names":["Scrollbar","props","Scrollbars"],"mappings":";;AAWA,MAAMA,YAAY,CAACC,QACR,WAAP,GAAO,oBAACC,YAAeD"}

package/Scrollbar/index.js

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

package/SegmentedControl/SegmentedControl.js

@@ -1,45 +1,36 @@
-import React, { useMemo } from "react";
+import react, { useMemo } from "react";
 import { makeDecoratable } from "../utils.js";
 import { SegmentedControlPrimitive } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
-const DecoratableSegmentedControl = ({
-  label,
-  description,
-  note,
-  hint,
-  required,
-  disabled,
-  validation,
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: label,
-    hint: hint,
-    required: required,
-    disabled: disabled,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled,
-    className: "mb-xs-plus"
-  }), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: disabled,
-    className: "mt-none mb-xs-plus"
-  }), /*#__PURE__*/React.createElement(SegmentedControlPrimitive, Object.assign({}, props, {
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: disabled
-  }));
+const DecoratableSegmentedControl = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: label,
+        hint: hint,
+        required: required,
+        disabled: disabled,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled,
+        className: "mb-xs-plus"
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled,
+        className: "mt-none mb-xs-plus"
+    }), /*#__PURE__*/ react.createElement(SegmentedControlPrimitive, {
+        ...props,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
 };
 const SegmentedControl = makeDecoratable("SegmentedControl", DecoratableSegmentedControl);
 export { SegmentedControl };

package/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","makeDecoratable","SegmentedControlPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableSegmentedControl","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","SegmentedControl"],"sources":["SegmentedControl.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SegmentedControlPrimitiveProps } from \"./primitives/index.js\";\nimport { SegmentedControlPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype SegmentedControlProps = SegmentedControlPrimitiveProps & FormComponentProps;\n\nconst DecoratableSegmentedControl = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SegmentedControlProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className=\"mb-xs-plus\"\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className=\"mt-none mb-xs-plus\"\n            />\n            <SegmentedControlPrimitive {...props} disabled={disabled} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst SegmentedControl = makeDecoratable(\"SegmentedControl\", DecoratableSegmentedControl);\n\nexport { SegmentedControl, type SegmentedControlProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,yBAAyB;AAElC,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,2BAA2B,GAAGA,CAAC;EACjCC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACgB,CAAC,KAAK;EACzB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC;EAAQ,gBACnBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IACrBoB,IAAI,EAAEd,WAAY;IAClBI,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAC;EAAY,CACzB,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAC;EAAoB,CACjC,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACnB,yBAAyB,EAAAsB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA;EAAS,EAAE,CAAC,eAC5Dd,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMa,gBAAgB,GAAGzB,eAAe,CAAC,kBAAkB,EAAEM,2BAA2B,CAAC;AAEzF,SAASmB,gBAAgB","ignoreList":[]}
+{"version":3,"file":"SegmentedControl/SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SegmentedControlPrimitiveProps } from \"./primitives/index.js\";\nimport { SegmentedControlPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype SegmentedControlProps = SegmentedControlPrimitiveProps & FormComponentProps;\n\nconst DecoratableSegmentedControl = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SegmentedControlProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className=\"mb-xs-plus\"\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className=\"mt-none mb-xs-plus\"\n            />\n            <SegmentedControlPrimitive {...props} disabled={disabled} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst SegmentedControl = makeDecoratable(\"SegmentedControl\", DecoratableSegmentedControl);\n\nexport { SegmentedControl, type SegmentedControlProps };\n"],"names":["DecoratableSegmentedControl","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","FormComponentLabel","FormComponentDescription","FormComponentErrorMessage","SegmentedControlPrimitive","FormComponentNote","SegmentedControl","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,8BAA8B,CAAC,EACjCC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACiB;IACpB,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACI,oBAAkBA;QACf,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;sBAEb,oBAACG,0BAAwBA;QACrB,MAAMZ;QACN,UAAUI;QACV,WAAU;sBAEd,oBAACS,2BAAyBA;QACtB,MAAML;QACN,SAASC;QACT,UAAUL;QACV,WAAU;sBAEd,oBAACU,2BAAyBA;QAAE,GAAGR,KAAK;QAAE,UAAUF;sBAChD,oBAACW,mBAAiBA;QAAC,MAAMd;QAAM,UAAUG;;AAGrD;AAEA,MAAMY,mBAAmBC,gBAAgB,oBAAoBnB"}

package/SegmentedControl/SegmentedControl.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SegmentedControlStories from './SegmentedControl.stories';
+import * as SegmentedControlStories from "./SegmentedControl.stories";
 
 <Meta of={SegmentedControlStories} />
 
@@ -24,19 +24,19 @@ import { SegmentedControl } from "@webiny/admin-ui";
 import { useState } from "react";
 
 const MyComponent = () => {
-    const [value, setValue] = useState("option1");
-
-    return (
-        <SegmentedControl
-            items={[
-                { label: "Option 1", value: "option1" },
-                { label: "Option 2", value: "option2" },
-                { label: "Option 3", value: "option3" }
-            ]}
-            value={value}
-            onChange={setValue}
-        />
-    );
+  const [value, setValue] = useState("option1");
+
+  return (
+    <SegmentedControl
+      items={[
+        { label: "Option 1", value: "option1" },
+        { label: "Option 2", value: "option2" },
+        { label: "Option 3", value: "option3" }
+      ]}
+      value={value}
+      onChange={setValue}
+    />
+  );
 };
 ```
 
@@ -47,38 +47,40 @@ import { SegmentedControl } from "@webiny/admin-ui";
 import { Icon } from "@webiny/admin-ui";
 
 <SegmentedControl
-    items={[
-        { label: "Lock", value: "lock", icon: <Icon name="lock" /> },
-        { label: "Unlock", value: "unlock", icon: <Icon name="lock-open" /> },
-        { label: "Settings", value: "settings", icon: <Icon name="settings" /> }
-    ]}
-    value={value}
-    onChange={setValue}
-/>
+  items={[
+    { label: "Lock", value: "lock", icon: <Icon name="lock" /> },
+    { label: "Unlock", value: "unlock", icon: <Icon name="lock-open" /> },
+    { label: "Settings", value: "settings", icon: <Icon name="settings" /> }
+  ]}
+  value={value}
+  onChange={setValue}
+/>;
 ```
 
 ## Variants
 
 ### Accent (Default)
+
 The accent variant uses the primary color for the selected state.
 
 ### Ghost
+
 The ghost variant is designed for use on dark backgrounds, using a more subtle appearance.
 
 ## Form Integration
 
 ```tsx
 <SegmentedControl
-    label="Select a plan"
-    description="Choose your subscription plan"
-    required
-    items={plans}
-    value={selectedPlan}
-    onChange={setSelectedPlan}
-    validation={{
-        isValid: false,
-        message: "Please select a plan"
-    }}
+  label="Select a plan"
+  description="Choose your subscription plan"
+  required
+  items={plans}
+  value={selectedPlan}
+  onChange={setSelectedPlan}
+  validation={{
+    isValid: false,
+    message: "Please select a plan"
+  }}
 />
 ```
 
@@ -86,38 +88,36 @@ The ghost variant is designed for use on dark backgrounds, using a more subtle a
 
 ### SegmentedControl Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `SegmentedControlItemParams[]` | - | Array of items to display |
-| `value` | `string` | - | Currently selected value |
-| `onChange` | `(value: string) => void` | - | Callback when selection changes |
-| `variant` | `"accent" \| "ghost"` | `"accent"` | Visual style variant |
-| `size` | `"sm" \| "md"` | `"md"` | Size of the control |
-| `disabled` | `boolean` | `false` | Disable all items |
-| `className` | `string` | - | Additional CSS class |
-| `label` | `string \| React.ReactNode` | - | Form label |
-| `description` | `string \| React.ReactNode` | - | Form description |
-| `note` | `string \| React.ReactNode` | - | Form note |
-| `required` | `boolean` | - | Show required indicator |
-| `validation` | `object` | - | Validation state and message |
+| Prop          | Type                           | Default    | Description                     |
+| ------------- | ------------------------------ | ---------- | ------------------------------- |
+| `items`       | `SegmentedControlItemParams[]` | -          | Array of items to display       |
+| `value`       | `string`                       | -          | Currently selected value        |
+| `onChange`    | `(value: string) => void`      | -          | Callback when selection changes |
+| `variant`     | `"accent" \| "ghost"`          | `"accent"` | Visual style variant            |
+| `size`        | `"sm" \| "md"`                 | `"md"`     | Size of the control             |
+| `disabled`    | `boolean`                      | `false`    | Disable all items               |
+| `className`   | `string`                       | -          | Additional CSS class            |
+| `label`       | `string \| React.ReactNode`    | -          | Form label                      |
+| `description` | `string \| React.ReactNode`    | -          | Form description                |
+| `note`        | `string \| React.ReactNode`    | -          | Form note                       |
+| `required`    | `boolean`                      | -          | Show required indicator         |
+| `validation`  | `object`                       | -          | Validation state and message    |
 
 ### SegmentedControlItemParams
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string \| React.ReactNode` | - | Item label |
-| `value` | `string \| number` | - | Item value |
-| `disabled` | `boolean` | `false` | Disable this specific item |
-| `icon` | `React.ReactNode` | - | Optional icon to display |
-| `id` | `string` | - | Optional custom ID |
+| Prop       | Type                        | Default | Description                |
+| ---------- | --------------------------- | ------- | -------------------------- |
+| `label`    | `string \| React.ReactNode` | -       | Item label                 |
+| `value`    | `string \| number`          | -       | Item value                 |
+| `disabled` | `boolean`                   | `false` | Disable this specific item |
+| `icon`     | `React.ReactNode`           | -       | Optional icon to display   |
+| `id`       | `string`                    | -       | Optional custom ID         |
 
 ## Examples
 
-<Canvas of={SegmentedControlStories.General} />
-<Canvas of={SegmentedControlStories.VariantAccent} />
+<Canvas of={SegmentedControlStories.Default} />
+<Canvas of={SegmentedControlStories.VariantLight} />
+<Canvas of={SegmentedControlStories.VariantDimmed} />
 <Canvas of={SegmentedControlStories.VariantGhost} />
-<Canvas of={SegmentedControlStories.StatesAccent} />
-<Canvas of={SegmentedControlStories.StatesGhost} />
 <Canvas of={SegmentedControlStories.WithFormComponent} />
 <Canvas of={SegmentedControlStories.Disabled} />
-