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

package/Button/IconButton.js

@@ -1,30 +1,29 @@
 import React from "react";
 import { Slot } from "radix-ui";
-import { cn, cva, makeDecoratable } from "../utils";
-const iconButtonWrapperVariants = cva("wby-inline-block", {
+import { cn, cva, makeDecoratable } from "../utils.js";
+const iconButtonWrapperVariants = cva("inline-block", {
   variants: {
     disabled: {
-      true: "wby-cursor-not-allowed",
-      false: "wby-cursor-pointer"
+      true: "cursor-not-allowed"
     }
   }
 });
-const iconButtonVariants = cva(["wby-border-transparent wby-rounded wby-flex wby-flex-shrink-0 wby-items-center wby-justify-center wby-ring-offset-background wby-transition-colors", "[&_svg]:wby-pointer-events-none [&_svg]:wby-shrink-0", "[&_img]:wby-pointer-events-none [&_img]:wby-shrink-0", "aria-disabled:wby-pointer-events-none", "focus-visible:wby-outline-none focus-visible:wby-border-accent-default"], {
+const iconButtonVariants = cva(["border-transparent rounded flex shrink-0 items-center justify-center ring-offset-background transition-colors cursor-pointer", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "[&_img]:pointer-events-none [&_img]:shrink-0", "aria-disabled:pointer-events-none", "focus-visible:outline-none focus-visible:border-accent-default"], {
   variants: {
     variant: {
-      primary: ["wby-bg-primary wby-fill-neutral-base", "hover:wby-bg-primary-strong", "active:wby-bg-primary-xstrong", "aria-disabled:wby-bg-primary-disabled", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      secondary: ["wby-bg-neutral-dimmed wby-fill-neutral-xstrong", "hover:wby-bg-neutral-muted", "active:wby-bg-neutral-strong", "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      tertiary: ["wby-bg-neutral-base wby-border-neutral-muted wby-fill-neutral-xstrong", "hover:wby-bg-neutral-light", "active:wby-bg-neutral-muted", "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong aria-disabled:wby-border-neutral-dimmed", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      ghost: ["wby-bg-transparent wby-fill-neutral-xstrong", "hover:wby-bg-neutral-dimmed", "active:wby-bg-neutral-muted", "aria-disabled:wby-fill-neutral-strong hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"],
-      "ghost-negative": ["wby-bg-transparent wby-fill-neutral-base", "hover:wby-bg-neutral-base/20", "active:wby-bg-neutral-base/30", "focus-visible:!wby-border-neutral-base", "aria-disabled:wby-fill-neutral-base aria-disabled:wby-opacity-50 hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"]
+      primary: ["bg-primary fill-neutral-base", "hover:bg-primary-strong", "active:bg-primary-xstrong", "aria-disabled:bg-primary-disabled", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      secondary: ["bg-neutral-dimmed fill-neutral-xstrong", "hover:bg-neutral-muted", "active:bg-neutral-strong", "aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      tertiary: ["bg-neutral-base border-neutral-muted fill-neutral-xstrong", "hover:bg-neutral-light", "active:bg-neutral-muted", "aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong aria-disabled:border-neutral-dimmed", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      ghost: ["bg-transparent fill-neutral-xstrong", "hover:bg-neutral-dark/5", "active:bg-neutral-muted", "aria-disabled:fill-neutral-strong hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent"],
+      "ghost-negative": ["bg-transparent fill-neutral-base", "hover:bg-neutral-base/20", "active:bg-neutral-base/30", "focus-visible:border-neutral-base!", "aria-disabled:fill-neutral-base aria-disabled:opacity-50 hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent"]
     },
     size: {
-      xxs: "wby-border-sm wby-rounded-xs wby-size-sm-extra [&_svg]:wby-size-md [&_img]:wby-size-md",
-      xs: "wby-border-sm wby-rounded-xs wby-size-md [&_svg]:wby-size-md [&_img]:wby-size-md",
-      sm: "wby-border-sm wby-rounded-sm",
-      md: "wby-border-sm wby-rounded-md",
-      lg: "wby-border-sm wby-rounded-md",
-      xl: "wby-border-md wby-rounded-lg wby-p-[calc(theme(padding.md)-theme(borderWidth.md))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+      xxs: "border-sm rounded-xs size-sm-extra [&_svg]:size-md [&_img]:size-md",
+      xs: "border-sm rounded-xs size-md [&_svg]:size-md [&_img]:size-md",
+      sm: "border-sm rounded-sm",
+      md: "border-sm rounded-md",
+      lg: "border-sm rounded-md",
+      xl: "border-md rounded-lg p-[calc(var(--padding-md)-(var(--border-width-md)))] [&_svg]:size-lg [&_img]:size-lg"
     },
     iconSize: {
       default: "",
@@ -34,31 +33,31 @@ const iconButtonVariants = cva(["wby-border-transparent wby-rounded wby-flex wby
   compoundVariants: [{
     size: "xl",
     variant: "ghost",
-    className: "focus-visible:wby-border-md"
+    className: "focus-visible:border-md"
   }, {
     size: "sm",
     iconSize: "default",
-    className: "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md"
+    className: "p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md"
   }, {
     size: "sm",
     iconSize: "lg",
-    className: "wby-p-[calc(theme(padding.xxs)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus"
+    className: "p-[calc(var(--padding-xxs)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus"
   }, {
     size: "md",
     iconSize: "default",
-    className: "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md"
+    className: "p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md"
   }, {
     size: "md",
     iconSize: "lg",
-    className: "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+    className: "p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg"
   }, {
     size: "lg",
     iconSize: "default",
-    className: "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus"
+    className: "p-[calc(var(--padding-sm-plus)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus"
   }, {
     size: "lg",
     iconSize: "lg",
-    className: "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+    className: "p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg"
   }],
   defaultVariants: {
     variant: "primary",

package/Button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Slot","cn","cva","makeDecoratable","iconButtonWrapperVariants","variants","disabled","true","false","iconButtonVariants","variant","primary","secondary","tertiary","ghost","size","xxs","xs","sm","md","lg","xl","iconSize","default","compoundVariants","className","defaultVariants","DecoratableIconButton","icon","asChild","props","Comp","Root","createElement","Object","assign","IconButton"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\nconst iconButtonWrapperVariants = cva(\"wby-inline-block\", {\n    variants: {\n        disabled: {\n            true: \"wby-cursor-not-allowed\",\n            false: \"wby-cursor-pointer\"\n        }\n    }\n});\n\nconst iconButtonVariants = cva(\n    [\n        \"wby-border-transparent wby-rounded wby-flex wby-flex-shrink-0 wby-items-center wby-justify-center wby-ring-offset-background wby-transition-colors\",\n        \"[&_svg]:wby-pointer-events-none [&_svg]:wby-shrink-0\",\n        \"[&_img]:wby-pointer-events-none [&_img]:wby-shrink-0\",\n        \"aria-disabled:wby-pointer-events-none\",\n        \"focus-visible:wby-outline-none focus-visible:wby-border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"wby-bg-primary wby-fill-neutral-base\",\n                    \"hover:wby-bg-primary-strong\",\n                    \"active:wby-bg-primary-xstrong\",\n                    \"aria-disabled:wby-bg-primary-disabled\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-dimmed wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-muted\",\n                    \"active:wby-bg-neutral-strong\",\n                    \"aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"wby-bg-neutral-base wby-border-neutral-muted wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"active:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong aria-disabled:wby-border-neutral-dimmed\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"wby-bg-transparent wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"active:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-fill-neutral-strong hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-fill-neutral-base\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"active:wby-bg-neutral-base/30\",\n                    \"focus-visible:!wby-border-neutral-base\",\n                    \"aria-disabled:wby-fill-neutral-base aria-disabled:wby-opacity-50 hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent\"\n                ]\n            },\n            size: {\n                xxs: \"wby-border-sm wby-rounded-xs wby-size-sm-extra [&_svg]:wby-size-md [&_img]:wby-size-md\",\n                xs: \"wby-border-sm wby-rounded-xs wby-size-md [&_svg]:wby-size-md [&_img]:wby-size-md\",\n                sm: \"wby-border-sm wby-rounded-sm\",\n                md: \"wby-border-sm wby-rounded-md\",\n                lg: \"wby-border-sm wby-rounded-md\",\n                xl: \"wby-border-md wby-rounded-lg wby-p-[calc(theme(padding.md)-theme(borderWidth.md))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            },\n            iconSize: {\n                default: \"\",\n                lg: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:wby-border-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.xxs)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\",\n            iconSize: \"default\"\n        }\n    }\n);\n\ninterface IconButtonProps\n    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof iconButtonVariants> {\n    icon?: React.ReactNode;\n    asChild?: boolean;\n}\n\nconst DecoratableIconButton = ({\n    className,\n    variant,\n    size,\n    icon,\n    iconSize,\n    asChild = false,\n    disabled,\n    ...props\n}: IconButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n    return (\n        <span className={cn(iconButtonWrapperVariants({ disabled }))}>\n            <Comp\n                {...props}\n                className={cn(iconButtonVariants({ variant, size, iconSize }), className)}\n                disabled={disabled}\n                aria-disabled={disabled}\n            >\n                {icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst IconButton = makeDecoratable(\"IconButton\", DecoratableIconButton);\n\nexport { IconButton, type IconButtonProps, iconButtonVariants };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Slot","cn","cva","makeDecoratable","iconButtonWrapperVariants","variants","disabled","true","iconButtonVariants","variant","primary","secondary","tertiary","ghost","size","xxs","xs","sm","md","lg","xl","iconSize","default","compoundVariants","className","defaultVariants","DecoratableIconButton","icon","asChild","props","Comp","Root","createElement","Object","assign","IconButton"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst iconButtonWrapperVariants = cva(\"inline-block\", {\n    variants: {\n        disabled: {\n            true: \"cursor-not-allowed\"\n        }\n    }\n});\n\nconst iconButtonVariants = cva(\n    [\n        \"border-transparent rounded flex shrink-0 items-center justify-center ring-offset-background transition-colors cursor-pointer\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"[&_img]:pointer-events-none [&_img]:shrink-0\",\n        \"aria-disabled:pointer-events-none\",\n        \"focus-visible:outline-none focus-visible:border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"bg-primary fill-neutral-base\",\n                    \"hover:bg-primary-strong\",\n                    \"active:bg-primary-xstrong\",\n                    \"aria-disabled:bg-primary-disabled\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                secondary: [\n                    \"bg-neutral-dimmed fill-neutral-xstrong\",\n                    \"hover:bg-neutral-muted\",\n                    \"active:bg-neutral-strong\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"bg-neutral-base border-neutral-muted fill-neutral-xstrong\",\n                    \"hover:bg-neutral-light\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong aria-disabled:border-neutral-dimmed\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"bg-transparent fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:fill-neutral-strong hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent fill-neutral-base\",\n                    \"hover:bg-neutral-base/20\",\n                    \"active:bg-neutral-base/30\",\n                    \"focus-visible:border-neutral-base!\",\n                    \"aria-disabled:fill-neutral-base aria-disabled:opacity-50 hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent\"\n                ]\n            },\n            size: {\n                xxs: \"border-sm rounded-xs size-sm-extra [&_svg]:size-md [&_img]:size-md\",\n                xs: \"border-sm rounded-xs size-md [&_svg]:size-md [&_img]:size-md\",\n                sm: \"border-sm rounded-sm\",\n                md: \"border-sm rounded-md\",\n                lg: \"border-sm rounded-md\",\n                xl: \"border-md rounded-lg p-[calc(var(--padding-md)-(var(--border-width-md)))] [&_svg]:size-lg [&_img]:size-lg\"\n            },\n            iconSize: {\n                default: \"\",\n                lg: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:border-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"default\",\n                className:\n                    \"p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"lg\",\n                className:\n                    \"p-[calc(var(--padding-xxs)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"default\",\n                className:\n                    \"p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"lg\",\n                className:\n                    \"p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"default\",\n                className:\n                    \"p-[calc(var(--padding-sm-plus)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"lg\",\n                className:\n                    \"p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\",\n            iconSize: \"default\"\n        }\n    }\n);\n\ninterface IconButtonProps\n    extends\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof iconButtonVariants> {\n    icon?: React.ReactNode;\n    asChild?: boolean;\n}\n\nconst DecoratableIconButton = ({\n    className,\n    variant,\n    size,\n    icon,\n    iconSize,\n    asChild = false,\n    disabled,\n    ...props\n}: IconButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n    return (\n        <span className={cn(iconButtonWrapperVariants({ disabled }))}>\n            <Comp\n                {...props}\n                className={cn(iconButtonVariants({ variant, size, iconSize }), className)}\n                disabled={disabled}\n                aria-disabled={disabled}\n            >\n                {icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst IconButton = makeDecoratable(\"IconButton\", DecoratableIconButton);\n\nexport { IconButton, type IconButtonProps, iconButtonVariants };\n"],"mappings":"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","ignoreList":[]}

package/Button/IconButton.stories.d.ts

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

package/Button/IconButton.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { IconButton } from "./IconButton";
+import { IconButton } from "./IconButton.js";
 const meta = {
   title: "Components/Icon Button",
   component: IconButton,
@@ -30,8 +30,7 @@ const meta = {
       defaultValue: false
     },
     icon: {
-      description: "Please refer to the example above for usage information.",
-      control: "none"
+      description: "Please refer to the example above for usage information."
     },
     onClick: {
       action: "onClick"
@@ -65,7 +64,7 @@ export const Ghost = {
 };
 export const GhostNegative = {
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px]"
+    className: "bg-[#25292e] p-[300px] rounded-[5px]"
   }, /*#__PURE__*/React.createElement(Story, null))],
   args: {
     ...Primary.args,

package/Button/IconButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","AddIcon","IconButton","meta","title","component","tags","argTypes","variant","description","control","options","defaultValue","size","iconSize","disabled","icon","onClick","action","Primary","args","createElement","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","className","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","asChild","Documentation"],"sources":["IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\",\n            control: \"none\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","AddIcon","IconButton","meta","title","component","tags","argTypes","variant","description","control","options","defaultValue","size","iconSize","disabled","icon","onClick","action","Primary","args","createElement","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","className","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","asChild","Documentation"],"sources":["IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AACjE,SAASC,UAAU;AAEnB,MAAMC,IAA6B,GAAG;EAClCC,KAAK,EAAE,wBAAwB;EAC/BC,SAAS,EAAEH,UAAU;EACrBI,IAAI,EAAE,CAAC,WAAW,CAAC;EACnBC,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,WAAW,EAAE,MAAM;MACnBC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,CAAC;MACxEC,YAAY,EAAE;IAClB,CAAC;IACDC,IAAI,EAAE;MACFJ,WAAW,EAAE,MAAM;MACnBC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;MAC9CC,YAAY,EAAE;IAClB,CAAC;IACDE,QAAQ,EAAE;MACNL,WAAW,EAAE,WAAW;MACxBC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC;MAC1BC,YAAY,EAAE;IAClB,CAAC;IACDG,QAAQ,EAAE;MACNN,WAAW,EAAE,OAAO;MACpBC,OAAO,EAAE,SAAS;MAClBE,YAAY,EAAE;IAClB,CAAC;IACDI,IAAI,EAAE;MACFP,WAAW,EAAE;IACjB,CAAC;IACDQ,OAAO,EAAE;MAAEC,MAAM,EAAE;IAAU;EACjC;AACJ,CAAC;AAED,eAAef,IAAI;AAGnB,OAAO,MAAMgB,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFZ,OAAO,EAAE,SAAS;IAClBQ,IAAI,eAAEjB,KAAA,CAAAsB,aAAA,CAACpB,OAAO,MAAE;EACpB;AACJ,CAAC;AAED,OAAO,MAAMqB,SAAgB,GAAG;EAC5BF,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfZ,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMe,QAAe,GAAG;EAC3BH,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfZ,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMgB,KAAY,GAAG;EACxBJ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfZ,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMiB,aAAoB,GAAG;EAChCC,UAAU,EAAE,CACRC,KAAK,iBACD5B,KAAA,CAAAsB,aAAA;IAAKO,SAAS,EAAC;EAAsC,gBACjD7B,KAAA,CAAAsB,aAAA,CAACM,KAAK,MAAE,CACP,CACR,CACJ;EACDP,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfZ,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMqB,gBAAuB,GAAG;EACnCT,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMiB,UAAiB,GAAG;EAC7BV,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMkB,KAAY,GAAG;EACxBX,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMmB,kBAAyB,GAAG;EACrCZ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMmB,MAAa,GAAG;EACzBb,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMqB,mBAA0B,GAAG;EACtCd,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMqB,KAAY,GAAG;EACxBf,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMuB,kBAAyB,GAAG;EACrChB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMuB,UAAiB,GAAG;EAC7BjB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfP,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMyB,WAAkB,GAAG;EAC9BlB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfmB,OAAO,EAAE,IAAI;IACbvB,IAAI,eACAjB,KAAA,CAAAsB,aAAA,4BACItB,KAAA,CAAAsB,aAAA,CAACpB,OAAO,MAAE,CACR;EAEd;AACJ,CAAC;AAED,OAAO,MAAMuC,aAAoB,GAAG;EAChCpB,IAAI,EAAE;IACFZ,OAAO,EAAE,SAAS;IAClBK,IAAI,EAAE,IAAI;IACVE,QAAQ,EAAE,KAAK;IACfC,IAAI,eAAEjB,KAAA,CAAAsB,aAAA,CAACpB,OAAO,MAAE,CAAC;IACjBa,QAAQ,EAAE;EACd;AACJ,CAAC","ignoreList":[]}

package/Button/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./Button";
-export * from "./CopyButton";
-export * from "./IconButton";
+export * from "./Button.js";
+export * from "./CopyButton.js";
+export * from "./IconButton.js";

package/Button/index.js

@@ -1,5 +1,5 @@
-export * from "./Button";
-export * from "./CopyButton";
-export * from "./IconButton";
+export * from "./Button.js";
+export * from "./CopyButton.js";
+export * from "./IconButton.js";
 
 //# sourceMappingURL=index.js.map

package/Button/index.js.map

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

package/Calendar/Calendar.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { type DayPickerProps } from "react-day-picker";
+type CalendarProps = DayPickerProps & {
+    className?: string;
+};
+declare const Calendar: (({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
+    original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
+        original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
+        original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Calendar, type CalendarProps };

package/Calendar/Calendar.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { DayPicker } from "react-day-picker";
+import { ReactComponent as ChevronLeftIcon } from "@webiny/icons/chevron_left.svg";
+import { ReactComponent as ChevronRightIcon } from "@webiny/icons/chevron_right.svg";
+import { Icon } from "../Icon/index.js";
+import { cn, makeDecoratable } from "../utils.js";
+import { calendarClassNames } from "./calendarClassNames.js";
+function CalendarChevron(props) {
+  if (props.orientation === "left") {
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(ChevronLeftIcon, null),
+      label: "Previous",
+      size: "sm",
+      color: "inherit"
+    });
+  }
+  return /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(ChevronRightIcon, null),
+    label: "Next",
+    size: "sm",
+    color: "inherit"
+  });
+}
+const DecoratableCalendar = ({
+  className,
+  classNames,
+  components,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(DayPicker, Object.assign({}, props, {
+    classNames: {
+      ...calendarClassNames,
+      ...classNames
+    },
+    components: {
+      Chevron: CalendarChevron,
+      ...components
+    },
+    className: cn(className)
+  }));
+};
+const Calendar = makeDecoratable("Calendar", DecoratableCalendar);
+export { Calendar };
+
+//# sourceMappingURL=Calendar.js.map

package/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","DayPicker","ReactComponent","ChevronLeftIcon","ChevronRightIcon","Icon","cn","makeDecoratable","calendarClassNames","CalendarChevron","props","orientation","createElement","icon","label","size","color","DecoratableCalendar","className","classNames","components","Object","assign","Chevron","Calendar"],"sources":["Calendar.tsx"],"sourcesContent":["import React from \"react\";\nimport { DayPicker, type DayPickerProps } from \"react-day-picker\";\nimport { ReactComponent as ChevronLeftIcon } from \"@webiny/icons/chevron_left.svg\";\nimport { ReactComponent as ChevronRightIcon } from \"@webiny/icons/chevron_right.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { calendarClassNames } from \"./calendarClassNames.js\";\n\ntype CalendarProps = DayPickerProps & {\n    className?: string;\n};\n\nfunction CalendarChevron(props: { orientation?: \"left\" | \"right\" | \"up\" | \"down\" }) {\n    if (props.orientation === \"left\") {\n        return <Icon icon={<ChevronLeftIcon />} label=\"Previous\" size=\"sm\" color=\"inherit\" />;\n    }\n    return <Icon icon={<ChevronRightIcon />} label=\"Next\" size=\"sm\" color=\"inherit\" />;\n}\n\nconst DecoratableCalendar = ({ className, classNames, components, ...props }: CalendarProps) => {\n    return (\n        <DayPicker\n            {...props}\n            classNames={{ ...calendarClassNames, ...classNames }}\n            components={{ Chevron: CalendarChevron, ...components }}\n            className={cn(className)}\n        />\n    );\n};\n\nconst Calendar = makeDecoratable(\"Calendar\", DecoratableCalendar);\n\nexport { Calendar, type CalendarProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAA6B,kBAAkB;AACjE,SAASC,cAAc,IAAIC,eAAe,QAAQ,gCAAgC;AAClF,SAASD,cAAc,IAAIE,gBAAgB,QAAQ,iCAAiC;AACpF,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,kBAAkB;AAM3B,SAASC,eAAeA,CAACC,KAAyD,EAAE;EAChF,IAAIA,KAAK,CAACC,WAAW,KAAK,MAAM,EAAE;IAC9B,oBAAOX,KAAA,CAAAY,aAAA,CAACP,IAAI;MAACQ,IAAI,eAAEb,KAAA,CAAAY,aAAA,CAACT,eAAe,MAAE,CAAE;MAACW,KAAK,EAAC,UAAU;MAACC,IAAI,EAAC,IAAI;MAACC,KAAK,EAAC;IAAS,CAAE,CAAC;EACzF;EACA,oBAAOhB,KAAA,CAAAY,aAAA,CAACP,IAAI;IAACQ,IAAI,eAAEb,KAAA,CAAAY,aAAA,CAACR,gBAAgB,MAAE,CAAE;IAACU,KAAK,EAAC,MAAM;IAACC,IAAI,EAAC,IAAI;IAACC,KAAK,EAAC;EAAS,CAAE,CAAC;AACtF;AAEA,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,UAAU;EAAEC,UAAU;EAAE,GAAGV;AAAqB,CAAC,KAAK;EAC5F,oBACIV,KAAA,CAAAY,aAAA,CAACX,SAAS,EAAAoB,MAAA,CAAAC,MAAA,KACFZ,KAAK;IACTS,UAAU,EAAE;MAAE,GAAGX,kBAAkB;MAAE,GAAGW;IAAW,CAAE;IACrDC,UAAU,EAAE;MAAEG,OAAO,EAAEd,eAAe;MAAE,GAAGW;IAAW,CAAE;IACxDF,SAAS,EAAEZ,EAAE,CAACY,SAAS;EAAE,EAC5B,CAAC;AAEV,CAAC;AAED,MAAMM,QAAQ,GAAGjB,eAAe,CAAC,UAAU,EAAEU,mBAAmB,CAAC;AAEjE,SAASO,QAAQ","ignoreList":[]}

package/Calendar/calendarClassNames.d.ts

@@ -0,0 +1,2 @@
+import type { ClassNames } from "react-day-picker";
+export declare const calendarClassNames: Partial<ClassNames>;

package/Calendar/calendarClassNames.js

@@ -0,0 +1,33 @@
+export const calendarClassNames = {
+  root: "p-md",
+  months: "relative flex gap-md",
+  month: "flex flex-col gap-sm",
+  month_caption: "flex items-center justify-center h-8 relative",
+  caption_label: "text-md font-semibold text-neutral-strong",
+  nav: "absolute inset-x-0 flex items-center justify-between",
+  button_previous: "inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light",
+  button_next: "inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light",
+  month_grid: "border-collapse",
+  weekdays: "",
+  weekday: "text-xs font-medium text-neutral-dimmed size-9 text-center",
+  weeks: "",
+  week: "",
+  day: "size-9 text-center text-sm p-0 relative",
+  day_button: "inline-flex items-center justify-center size-9 rounded-sm font-normal cursor-pointer hover:bg-neutral-light transition-colors",
+  selected: "[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:font-medium",
+  today: "[&>button]:border-sm [&>button]:border-primary",
+  outside: "[&>button]:text-neutral-dimmed [&>button]:opacity-50",
+  disabled: "[&>button]:text-neutral-disabled [&>button]:cursor-not-allowed",
+  hidden: "invisible",
+  range_start: "[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-r-none",
+  range_end: "[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-l-none",
+  range_middle: "bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70",
+  focused: "[&>button]:ring-2 [&>button]:ring-primary-dimmed",
+  dropdowns: "flex items-center gap-sm",
+  dropdown: "appearance-none border-sm border-neutral-muted rounded-sm px-sm py-xs text-sm cursor-pointer bg-neutral-base",
+  dropdown_root: "relative",
+  chevron: "size-md fill-current",
+  footer: "pt-sm text-sm text-neutral-dimmed"
+};
+
+//# sourceMappingURL=calendarClassNames.js.map

package/Calendar/calendarClassNames.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["calendarClassNames","root","months","month","month_caption","caption_label","nav","button_previous","button_next","month_grid","weekdays","weekday","weeks","week","day","day_button","selected","today","outside","disabled","hidden","range_start","range_end","range_middle","focused","dropdowns","dropdown","dropdown_root","chevron","footer"],"sources":["calendarClassNames.ts"],"sourcesContent":["import type { ClassNames } from \"react-day-picker\";\n\nexport const calendarClassNames: Partial<ClassNames> = {\n    root: \"p-md\",\n    months: \"relative flex gap-md\",\n    month: \"flex flex-col gap-sm\",\n    month_caption: \"flex items-center justify-center h-8 relative\",\n    caption_label: \"text-md font-semibold text-neutral-strong\",\n    nav: \"absolute inset-x-0 flex items-center justify-between\",\n    button_previous:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    button_next:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    month_grid: \"border-collapse\",\n    weekdays: \"\",\n    weekday: \"text-xs font-medium text-neutral-dimmed size-9 text-center\",\n    weeks: \"\",\n    week: \"\",\n    day: \"size-9 text-center text-sm p-0 relative\",\n    day_button:\n        \"inline-flex items-center justify-center size-9 rounded-sm font-normal cursor-pointer hover:bg-neutral-light transition-colors\",\n    selected:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:font-medium\",\n    today: \"[&>button]:border-sm [&>button]:border-primary\",\n    outside: \"[&>button]:text-neutral-dimmed [&>button]:opacity-50\",\n    disabled: \"[&>button]:text-neutral-disabled [&>button]:cursor-not-allowed\",\n    hidden: \"invisible\",\n    range_start:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-r-none\",\n    range_end:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-l-none\",\n    range_middle:\n        \"bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70\",\n    focused: \"[&>button]:ring-2 [&>button]:ring-primary-dimmed\",\n    dropdowns: \"flex items-center gap-sm\",\n    dropdown:\n        \"appearance-none border-sm border-neutral-muted rounded-sm px-sm py-xs text-sm cursor-pointer bg-neutral-base\",\n    dropdown_root: \"relative\",\n    chevron: \"size-md fill-current\",\n    footer: \"pt-sm text-sm text-neutral-dimmed\"\n};\n"],"mappings":"AAEA,OAAO,MAAMA,kBAAuC,GAAG;EACnDC,IAAI,EAAE,MAAM;EACZC,MAAM,EAAE,sBAAsB;EAC9BC,KAAK,EAAE,sBAAsB;EAC7BC,aAAa,EAAE,+CAA+C;EAC9DC,aAAa,EAAE,2CAA2C;EAC1DC,GAAG,EAAE,sDAAsD;EAC3DC,eAAe,EACX,qHAAqH;EACzHC,WAAW,EACP,qHAAqH;EACzHC,UAAU,EAAE,iBAAiB;EAC7BC,QAAQ,EAAE,EAAE;EACZC,OAAO,EAAE,4DAA4D;EACrEC,KAAK,EAAE,EAAE;EACTC,IAAI,EAAE,EAAE;EACRC,GAAG,EAAE,yCAAyC;EAC9CC,UAAU,EACN,+HAA+H;EACnIC,QAAQ,EACJ,8GAA8G;EAClHC,KAAK,EAAE,gDAAgD;EACvDC,OAAO,EAAE,sDAAsD;EAC/DC,QAAQ,EAAE,gEAAgE;EAC1EC,MAAM,EAAE,WAAW;EACnBC,WAAW,EACP,iHAAiH;EACrHC,SAAS,EACL,iHAAiH;EACrHC,YAAY,EACR,0IAA0I;EAC9IC,OAAO,EAAE,kDAAkD;EAC3DC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EACJ,8GAA8G;EAClHC,aAAa,EAAE,UAAU;EACzBC,OAAO,EAAE,sBAAsB;EAC/BC,MAAM,EAAE;AACZ,CAAC","ignoreList":[]}

package/Calendar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Calendar.js";

package/Calendar/index.js

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

package/Calendar/index.js.map

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

package/Card/Card.d.ts

@@ -1,30 +1,114 @@
-import React from "react";
-import { type VariantProps } from "../utils";
-import type { cardRootVariants } from "./components";
-import { type CardRootProps } from "./components";
-interface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {
+import * as React from "react";
+import { CardContent } from "./components/CardContent.js";
+interface CardProps extends Omit<React.ComponentPropsWithoutRef<typeof CardContent>, "title"> {
     title?: React.ReactNode;
+    icon?: React.ReactElement;
     description?: React.ReactNode;
+    padding?: "sm" | "md" | "lg";
+    bodyPadding?: boolean;
+    variant?: "default" | "accent";
+    elevation?: "none" | "small" | "medium" | "large";
+    size?: "sm" | "md";
+    cornerSize?: "md" | "lg";
     actions?: React.ReactNode;
-    options?: React.ReactNode;
+    actionsPosition?: "header" | "footer";
+    actionsSize?: "sm" | "md";
+    info?: React.ReactNode;
+    children: React.ReactNode;
 }
-declare const Card: ((props: CardProps) => React.JSX.Element) & {
-    original: (props: CardProps) => React.JSX.Element;
+declare const Card: {
+    (props: CardProps): React.JSX.Element;
+    displayName: string;
+} & {
+    original: {
+        (props: CardProps): React.JSX.Element;
+        displayName: string;
+    };
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: CardProps) => React.JSX.Element) & {
-        original: (props: CardProps) => React.JSX.Element;
+    original: {
+        (props: CardProps): React.JSX.Element;
+        displayName: string;
+    } & {
+        original: {
+            (props: CardProps): React.JSX.Element;
+            displayName: string;
+        };
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: CardProps) => React.JSX.Element) & {
-        original: (props: CardProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<{
+        (props: CardProps): React.JSX.Element;
+        displayName: string;
+    } & {
+        original: {
+            (props: CardProps): React.JSX.Element;
+            displayName: string;
+        };
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
+} & {
+    ConfirmAction: ((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+        original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    CancelAction: ((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+        original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    Icon: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+        original: (props: import("../index.js").IconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").IconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").IconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
 };
 export { Card, type CardProps };

package/Card/Card.js

@@ -1,24 +1,25 @@
-import React from "react";
-import { makeDecoratable } from "../utils";
-import { CardFooter, CardHeader, CardRoot } from "./components";
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { CardContent } from "./components/CardContent.js";
+import { CardHeader } from "./components/CardHeader.js";
+import { CardBody } from "./components/CardBody.js";
+import { CardFooter } from "./components/CardFooter.js";
+import { Icon } from "./components/Icon.js";
+import { ConfirmAction } from "./components/ConfirmAction.js";
+import { CancelAction } from "./components/CancelAction.js";
+import { CardPropsProvider } from "./components/CardPropsProvider.js";
 const CardBase = props => {
-  const {
-    title,
-    description,
-    actions,
-    children,
-    options,
-    ...rest
-  } = props;
-  return /*#__PURE__*/React.createElement(CardRoot, rest, /*#__PURE__*/React.createElement(CardHeader, {
-    title: title,
-    description: description,
-    options: options
-  }), children, /*#__PURE__*/React.createElement(CardFooter, {
-    actions: actions
-  }));
+  return /*#__PURE__*/React.createElement(CardPropsProvider, {
+    props: props
+  }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(CardHeader, null), /*#__PURE__*/React.createElement(CardBody, null), /*#__PURE__*/React.createElement(CardFooter, null)));
 };
-const Card = makeDecoratable("Card", CardBase);
+CardBase.displayName = "Card";
+const DecoratableCard = makeDecoratable("Card", CardBase);
+const Card = withStaticProps(DecoratableCard, {
+  ConfirmAction,
+  CancelAction,
+  Icon
+});
 export { Card };
 
 //# sourceMappingURL=Card.js.map

package/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","CardFooter","CardHeader","CardRoot","CardBase","props","title","description","actions","children","options","rest","createElement","Card"],"sources":["Card.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, type VariantProps } from \"~/utils\";\nimport type { cardRootVariants } from \"./components\";\nimport { CardFooter, CardHeader, CardRoot, type CardRootProps } from \"./components\";\n\ninterface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {\n    title?: React.ReactNode;\n    description?: React.ReactNode;\n    actions?: React.ReactNode;\n    options?: React.ReactNode;\n}\n\nconst CardBase = (props: CardProps) => {\n    const { title, description, actions, children, options, ...rest } = props;\n\n    return (\n        <CardRoot {...rest}>\n            <CardHeader title={title} description={description} options={options} />\n            {children}\n            <CardFooter actions={actions} />\n        </CardRoot>\n    );\n};\n\nconst Card = makeDecoratable(\"Card\", CardBase);\n\nexport { Card, type CardProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,UAAU,EAAEC,UAAU,EAAEC,QAAQ;AASzC,MAAMC,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EAEzE,oBACIN,KAAA,CAAAa,aAAA,CAACT,QAAQ,EAAKQ,IAAI,eACdZ,KAAA,CAAAa,aAAA,CAACV,UAAU;IAACI,KAAK,EAAEA,KAAM;IAACC,WAAW,EAAEA,WAAY;IAACG,OAAO,EAAEA;EAAQ,CAAE,CAAC,EACvED,QAAQ,eACTV,KAAA,CAAAa,aAAA,CAACX,UAAU;IAACO,OAAO,EAAEA;EAAQ,CAAE,CACzB,CAAC;AAEnB,CAAC;AAED,MAAMK,IAAI,GAAGb,eAAe,CAAC,MAAM,EAAEI,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","CardContent","CardHeader","CardBody","CardFooter","Icon","ConfirmAction","CancelAction","CardPropsProvider","CardBase","props","createElement","displayName","DecoratableCard","Card"],"sources":["Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { CardContent } from \"./components/CardContent.js\";\nimport { CardHeader } from \"~/Card/components/CardHeader.js\";\nimport { CardBody } from \"~/Card/components/CardBody.js\";\nimport { CardFooter } from \"~/Card/components/CardFooter.js\";\nimport { Icon } from \"./components/Icon.js\";\nimport { ConfirmAction } from \"./components/ConfirmAction.js\";\nimport { CancelAction } from \"./components/CancelAction.js\";\nimport { CardPropsProvider } from \"~/Card/components/CardPropsProvider.js\";\n\ninterface CardProps extends Omit<React.ComponentPropsWithoutRef<typeof CardContent>, \"title\"> {\n    title?: React.ReactNode;\n    icon?: React.ReactElement;\n    description?: React.ReactNode;\n    padding?: \"sm\" | \"md\" | \"lg\";\n    bodyPadding?: boolean;\n    variant?: \"default\" | \"accent\";\n    elevation?: \"none\" | \"small\" | \"medium\" | \"large\";\n    size?: \"sm\" | \"md\";\n    cornerSize?: \"md\" | \"lg\";\n    actions?: React.ReactNode;\n    actionsPosition?: \"header\" | \"footer\";\n    actionsSize?: \"sm\" | \"md\";\n    info?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst CardBase = (props: CardProps) => {\n    return (\n        <CardPropsProvider props={props}>\n            <CardContent>\n                <CardHeader />\n                <CardBody />\n                <CardFooter />\n            </CardContent>\n        </CardPropsProvider>\n    );\n};\n\nCardBase.displayName = \"Card\";\n\nconst DecoratableCard = makeDecoratable(\"Card\", CardBase);\n\nconst Card = withStaticProps(DecoratableCard, {\n    ConfirmAction,\n    CancelAction,\n    Icon\n});\n\nexport { Card, type CardProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,WAAW;AACpB,SAASC,UAAU;AACnB,SAASC,QAAQ;AACjB,SAASC,UAAU;AACnB,SAASC,IAAI;AACb,SAASC,aAAa;AACtB,SAASC,YAAY;AACrB,SAASC,iBAAiB;AAmB1B,MAAMC,QAAQ,GAAIC,KAAgB,IAAK;EACnC,oBACIZ,KAAA,CAAAa,aAAA,CAACH,iBAAiB;IAACE,KAAK,EAAEA;EAAM,gBAC5BZ,KAAA,CAAAa,aAAA,CAACV,WAAW,qBACRH,KAAA,CAAAa,aAAA,CAACT,UAAU,MAAE,CAAC,eACdJ,KAAA,CAAAa,aAAA,CAACR,QAAQ,MAAE,CAAC,eACZL,KAAA,CAAAa,aAAA,CAACP,UAAU,MAAE,CACJ,CACE,CAAC;AAE5B,CAAC;AAEDK,QAAQ,CAACG,WAAW,GAAG,MAAM;AAE7B,MAAMC,eAAe,GAAGd,eAAe,CAAC,MAAM,EAAEU,QAAQ,CAAC;AAEzD,MAAMK,IAAI,GAAGd,eAAe,CAACa,eAAe,EAAE;EAC1CP,aAAa;EACbC,YAAY;EACZF;AACJ,CAAC,CAAC;AAEF,SAASS,IAAI","ignoreList":[]}