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

package/Textarea/Textarea.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Textarea","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","Documentation","render","args","value","setValue","createElement","Object","assign","newValue","label","description","note","placeholder","required","undefined","validation","isValid","message","validate","size","options","variant","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","setValidation","trim","length","FullExample"],"sources":["Textarea.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Textarea } from \"~/Textarea\";\n\nconst meta: Meta<typeof Textarea> = {\n    title: \"Components/Form/Textarea\",\n    component: Textarea,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Textarea>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n\n        return <Textarea {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Message\",\n        description: \"Enter your feedback or message\",\n        note: \"Please be specific and provide relevant details\",\n        placeholder: \"Type your message here...\",\n        required: true,\n        disabled: false,\n        onChange: undefined,\n        validation: {\n            isValid: true,\n            message: \"\"\n        },\n        value: \"\",\n        validate: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Textarea field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Textarea field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text for the textarea\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional description text below the textarea\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the textarea\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when the textarea is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the textarea required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the textarea when set to true\",\n            control: \"boolean\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The current value of the textarea\",\n            control: \"text\"\n        },\n        onChange: {\n            description: \"Function called when the textarea value changes\",\n            control: \"none\"\n        },\n        validate: {\n            description:\n                \"Custom validation function, please refer to **With Validate Function** section below.\",\n            control: \"none\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Message\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Enter your feedback or message in detail\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"All messages are reviewed within 24 hours\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const validate = async () => {\n            if (!value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (value.length < 10) {\n                setValidation({\n                    isValid: false,\n                    message: \"Message must be at least 10 characters long\"\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Textarea\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Enter a message (minimum 10 characters)\"\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your message is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","Textarea","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","Documentation","render","args","value","setValue","createElement","Object","assign","newValue","label","description","note","placeholder","required","undefined","validation","isValid","message","validate","size","options","variant","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","setValidation","trim","length","FullExample"],"sources":["Textarea.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Textarea } from \"~/Textarea/index.js\";\n\nconst meta: Meta<typeof Textarea> = {\n    title: \"Components/Form/Textarea\",\n    component: Textarea,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Textarea>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n\n        return <Textarea {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Message\",\n        description: \"Enter your feedback or message\",\n        note: \"Please be specific and provide relevant details\",\n        placeholder: \"Type your message here...\",\n        required: true,\n        disabled: false,\n        onChange: undefined,\n        validation: {\n            isValid: true,\n            message: \"\"\n        },\n        value: \"\",\n        validate: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Textarea field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Textarea field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text for the textarea\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional description text below the textarea\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the textarea\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when the textarea is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the textarea required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the textarea when set to true\",\n            control: \"boolean\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The current value of the textarea\",\n            control: \"text\"\n        },\n        onChange: {\n            description: \"Function called when the textarea value changes\"\n        },\n        validate: {\n            description:\n                \"Custom validation function, please refer to **With Validate Function** section below.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Message\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Enter your feedback or message in detail\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"All messages are reviewed within 24 hours\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const validate = async () => {\n            if (!value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (value.length < 10) {\n                setValidation({\n                    isValid: false,\n                    message: \"Message must be at least 10 characters long\"\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Textarea\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Enter a message (minimum 10 characters)\"\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your message is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Textarea/TextareaPrimitive.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const textareaVariants: (props?: ({
     variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
     size?: "md" | "lg" | "xl" | null | undefined;
@@ -32,7 +32,7 @@ declare const TextareaPrimitive: (({ className, variant, invalid, size, textarea
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element) & {
         original: ({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Textarea/TextareaPrimitive.js

@@ -1,17 +1,17 @@
 import * as React from "react";
-import { cn, cva, makeDecoratable } from "../utils";
-const textareaVariants = cva(["wby-flex wby-min-h-[80px] wby-w-full wby-border-sm wby-text-md focus-visible:wby-outline-none disabled:wby-cursor-not-allowed"], {
+import { cn, cva, makeDecoratable } from "../utils.js";
+const textareaVariants = cva(["flex min-h-[80px] w-full border-sm text-md focus-visible:outline-none disabled:cursor-not-allowed"], {
   variants: {
     variant: {
-      primary: ["wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-border-neutral-strong", "focus:wby-border-neutral-black", "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"],
-      secondary: ["wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dimmed", "focus:wby-bg-neutral-base focus:wby-border-neutral-black", "disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"],
-      ghost: ["wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dark/5", "focus:wby-bg-neutral-dark/5", "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"],
-      "ghost-negative": ["wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50", "hover:wby-bg-neutral-base/20", "focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed", "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed", "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 disabled:placeholder:wby-text-neutral-disabled/50", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50"]
+      primary: ["bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed", "hover:border-neutral-strong", "focus:border-neutral-black", "disabled:bg-neutral-disabled disabled:border-neutral-dimmed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"],
+      secondary: ["bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed", "hover:bg-neutral-dimmed", "focus:bg-neutral-base focus:border-neutral-black", "disabled:bg-neutral-disabled disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"],
+      ghost: ["bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed", "hover:bg-neutral-dark/5", "focus:bg-neutral-dark/5", "disabled:bg-transparent disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"],
+      "ghost-negative": ["bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50", "hover:bg-neutral-base/20", "focus:bg-neutral-base focus:text-neutral-primary focus:placeholder:text-neutral-dimmed", "data-[focused=true]:bg-neutral-base data-[focused=true]:bg-neutral-primary data-[focused=true]:placeholder:text-neutral-dimmed", "disabled:bg-transparent disabled:text-neutral-disabled/50 disabled:placeholder:text-neutral-disabled/50", "data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50"]
     },
     size: {
-      md: ["wby-px-sm-extra wby-py-xs-plus wby-rounded-md"],
-      lg: ["wby-px-sm-extra wby-py-sm-plus wby-rounded-md"],
-      xl: ["wby-px-md-extra wby-p-md wby-rounded-lg"]
+      md: ["px-sm-extra py-xs-plus rounded-md"],
+      lg: ["px-sm-extra py-sm-plus rounded-md"],
+      xl: ["px-md-extra p-md rounded-lg"]
     },
     invalid: {
       true: ""
@@ -20,19 +20,19 @@ const textareaVariants = cva(["wby-flex wby-min-h-[80px] wby-w-full wby-border-s
   compoundVariants: [{
     variant: "primary",
     invalid: true,
-    class: "!wby-border-destructive-default"
+    class: "border-destructive-default!"
   }, {
     variant: "secondary",
     invalid: true,
-    class: "!wby-border-destructive-default"
+    class: "border-destructive-default!"
   }, {
     variant: "ghost",
     invalid: true,
-    class: "!wby-border-destructive-subtle !wby-bg-destructive-subtle"
+    class: "border-destructive-subtle! bg-destructive-subtle!"
   }, {
     variant: "ghost-negative",
     invalid: true,
-    class: "!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed"
+    class: "border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed"
   }],
   defaultVariants: {
     variant: "primary",

package/Textarea/TextareaPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","textareaVariants","variants","variant","primary","secondary","ghost","size","md","lg","xl","invalid","true","compoundVariants","class","defaultVariants","DecoratableTextareaPrimitive","className","textareaRef","forwardEventOnChange","onChange","originalOnChange","onEnter","onKeyDown","originalOnKeyDown","value","props","useCallback","event","target","e","key","createElement","Object","assign","ref","TextareaPrimitive"],"sources":["TextareaPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst textareaVariants = cva(\n    [\n        \"wby-flex wby-min-h-[80px] wby-w-full wby-border-sm wby-text-md focus-visible:wby-outline-none disabled:wby-cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-border-neutral-strong\",\n                    \"focus:wby-border-neutral-black\",\n                    \"disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"focus:wby-bg-neutral-base focus:wby-border-neutral-black\",\n                    \"disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                ghost: [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dark/5\",\n                    \"focus:wby-bg-neutral-dark/5\",\n                    \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed\",\n                    \"data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed\",\n                    \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 disabled:placeholder:wby-text-neutral-disabled/50\",\n                    \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50\"\n                ]\n            },\n            size: {\n                md: [\"wby-px-sm-extra wby-py-xs-plus wby-rounded-md\"],\n                lg: [\"wby-px-sm-extra wby-py-sm-plus wby-rounded-md\"],\n                xl: [\"wby-px-md-extra wby-p-md wby-rounded-lg\"]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"!wby-border-destructive-subtle !wby-bg-destructive-subtle\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"lg\"\n        }\n    }\n);\n\ninterface TextareaPrimitiveProps\n    extends React.ComponentProps<\"textarea\">,\n        VariantProps<typeof textareaVariants> {\n    /**\n     * Reference to the textarea element.\n     */\n    textareaRef?: React.Ref<HTMLTextAreaElement>;\n\n    /**\n     * If true, it will pass the native `event` to the `onChange` callback\n     */\n    forwardEventOnChange?: boolean;\n\n    /**\n     * Callback function to be called when the Enter key is pressed.\n     */\n    onEnter?: () => void;\n}\n\nconst DecoratableTextareaPrimitive = ({\n    className,\n    variant,\n    invalid,\n    size,\n    textareaRef,\n    forwardEventOnChange,\n    onChange: originalOnChange,\n    onEnter,\n    onKeyDown: originalOnKeyDown,\n    value,\n    ...props\n}: TextareaPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLTextAreaElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    return (\n        <textarea\n            {...props}\n            ref={textareaRef}\n            className={cn(textareaVariants({ variant, invalid, size }), className)}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            value={value ?? \"\"}\n        />\n    );\n};\n\nconst TextareaPrimitive = makeDecoratable(\"TextareaPrimitive\", DecoratableTextareaPrimitive);\n\nexport { TextareaPrimitive, type TextareaPrimitiveProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","makeDecoratable","textareaVariants","variants","variant","primary","secondary","ghost","size","md","lg","xl","invalid","true","compoundVariants","class","defaultVariants","DecoratableTextareaPrimitive","className","textareaRef","forwardEventOnChange","onChange","originalOnChange","onEnter","onKeyDown","originalOnKeyDown","value","props","useCallback","event","target","e","key","createElement","Object","assign","ref","TextareaPrimitive"],"sources":["TextareaPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst textareaVariants = cva(\n    [\n        \"flex min-h-[80px] w-full border-sm text-md focus-visible:outline-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:border-neutral-strong\",\n                    \"focus:border-neutral-black\",\n                    \"disabled:bg-neutral-disabled disabled:border-neutral-dimmed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled\"\n                ],\n                secondary: [\n                    \"bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"focus:bg-neutral-base focus:border-neutral-black\",\n                    \"disabled:bg-neutral-disabled disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled\"\n                ],\n                ghost: [\n                    \"bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"focus:bg-neutral-dark/5\",\n                    \"disabled:bg-transparent disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50\",\n                    \"hover:bg-neutral-base/20\",\n                    \"focus:bg-neutral-base focus:text-neutral-primary focus:placeholder:text-neutral-dimmed\",\n                    \"data-[focused=true]:bg-neutral-base data-[focused=true]:bg-neutral-primary data-[focused=true]:placeholder:text-neutral-dimmed\",\n                    \"disabled:bg-transparent disabled:text-neutral-disabled/50 disabled:placeholder:text-neutral-disabled/50\",\n                    \"data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50\"\n                ]\n            },\n            size: {\n                md: [\"px-sm-extra py-xs-plus rounded-md\"],\n                lg: [\"px-sm-extra py-sm-plus rounded-md\"],\n                xl: [\"px-md-extra p-md rounded-lg\"]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"border-destructive-subtle! bg-destructive-subtle!\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"lg\"\n        }\n    }\n);\n\ninterface TextareaPrimitiveProps\n    extends React.ComponentProps<\"textarea\">,\n        VariantProps<typeof textareaVariants> {\n    /**\n     * Reference to the textarea element.\n     */\n    textareaRef?: React.Ref<HTMLTextAreaElement>;\n\n    /**\n     * If true, it will pass the native `event` to the `onChange` callback\n     */\n    forwardEventOnChange?: boolean;\n\n    /**\n     * Callback function to be called when the Enter key is pressed.\n     */\n    onEnter?: () => void;\n}\n\nconst DecoratableTextareaPrimitive = ({\n    className,\n    variant,\n    invalid,\n    size,\n    textareaRef,\n    forwardEventOnChange,\n    onChange: originalOnChange,\n    onEnter,\n    onKeyDown: originalOnKeyDown,\n    value,\n    ...props\n}: TextareaPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLTextAreaElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    return (\n        <textarea\n            {...props}\n            ref={textareaRef}\n            className={cn(textareaVariants({ variant, invalid, size }), className)}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            value={value ?? \"\"}\n        />\n    );\n};\n\nconst TextareaPrimitive = makeDecoratable(\"TextareaPrimitive\", DecoratableTextareaPrimitive);\n\nexport { TextareaPrimitive, type TextareaPrimitiveProps };\n"],"mappings":"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","ignoreList":[]}

package/Textarea/TextareaPrimitive.stories.d.ts

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

package/Textarea/TextareaPrimitive.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextareaPrimitive } from "./TextareaPrimitive";
+import { TextareaPrimitive } from "./TextareaPrimitive.js";
 const meta = {
   title: "Components/Form Primitives/Textarea",
   component: TextareaPrimitive,
@@ -103,7 +103,7 @@ export const GhostNegativeVariant = {
     placeholder: "Custom placeholder"
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
+    className: "bg-neutral-dark p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const GhostNegativeVariantDisabled = {
@@ -112,7 +112,7 @@ export const GhostNegativeVariantDisabled = {
     disabled: true
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
+    className: "bg-neutral-dark p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const GhostNegativeVariantInvalid = {
@@ -121,7 +121,7 @@ export const GhostNegativeVariantInvalid = {
     invalid: true
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-dark wby-p-xl"
+    className: "bg-neutral-dark p-xl"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const WithForwardEventOnChange = {

package/Textarea/TextareaPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TextareaPrimitive","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","rows","control","type","parameters","layout","Default","MediumSize","args","placeholder","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","createElement","className","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["TextareaPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { TextareaPrimitive } from \"./TextareaPrimitive\";\n\nconst meta: Meta<typeof TextareaPrimitive> = {\n    title: \"Components/Form Primitives/Textarea\",\n    component: TextareaPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        rows: {\n            control: {\n                type: \"number\"\n            }\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TextareaPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","TextareaPrimitive","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","rows","control","type","parameters","layout","Default","MediumSize","args","placeholder","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","createElement","className","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["TextareaPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { TextareaPrimitive } from \"./TextareaPrimitive.js\";\n\nconst meta: Meta<typeof TextareaPrimitive> = {\n    title: \"Components/Form Primitives/Textarea\",\n    component: TextareaPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        rows: {\n            control: {\n                type: \"number\"\n            }\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TextareaPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Textarea/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Textarea";
-export * from "./TextareaPrimitive";
+export * from "./Textarea.js";
+export * from "./TextareaPrimitive.js";

package/Textarea/index.js

@@ -1,4 +1,4 @@
-export * from "./Textarea";
-export * from "./TextareaPrimitive";
+export * from "./Textarea.js";
+export * from "./TextareaPrimitive.js";
 
 //# sourceMappingURL=index.js.map

package/Textarea/index.js.map

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

package/Toast/Toast.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type ToasterProps } from "sonner";
-import type { Icon as BaseIcon } from "../Icon";
-import { ToastActions, ToastDescription, ToastTitle, type ToastRootProps } from "./components";
+import type { Icon as BaseIcon } from "../Icon/index.js";
+import { ToastActions, ToastDescription, ToastTitle, type ToastRootProps } from "./components/index.js";
 interface ToastProps extends Omit<ToastRootProps, "title" | "content" | "children"> {
     title: React.ReactElement<typeof ToastTitle>;
     description?: React.ReactElement<typeof ToastDescription>;
@@ -23,46 +23,46 @@ declare const Toast: (({ title, description, icon, actions, onCloseClick, dismis
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ title, description, icon, actions, onCloseClick, dismissible, ...props }: ToastProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ title, description, icon, actions, onCloseClick, dismissible, ...props }: ToastProps) => React.JSX.Element) & {
         original: ({ title, description, icon, actions, onCloseClick, dismissible, ...props }: ToastProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Title: (({ text, className, ...props }: import("./components/ToastTitle").ToastTitleProps) => React.JSX.Element) & {
-        original: ({ text, className, ...props }: import("./components/ToastTitle").ToastTitleProps) => React.JSX.Element;
+    Title: (({ text, className, ...props }: import("./components/ToastTitle.js").ToastTitleProps) => React.JSX.Element) & {
+        original: ({ text, className, ...props }: import("./components/ToastTitle.js").ToastTitleProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ text, className, ...props }: import("./components/ToastTitle").ToastTitleProps) => React.JSX.Element) & {
-            original: ({ text, className, ...props }: import("./components/ToastTitle").ToastTitleProps) => React.JSX.Element;
+        original: (({ text, className, ...props }: import("./components/ToastTitle.js").ToastTitleProps) => React.JSX.Element) & {
+            original: ({ text, className, ...props }: import("./components/ToastTitle.js").ToastTitleProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ text, className, ...props }: import("./components/ToastTitle").ToastTitleProps) => React.JSX.Element) & {
-            original: ({ text, className, ...props }: import("./components/ToastTitle").ToastTitleProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ text, className, ...props }: import("./components/ToastTitle.js").ToastTitleProps) => React.JSX.Element) & {
+            original: ({ text, className, ...props }: import("./components/ToastTitle.js").ToastTitleProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Description: (({ text, className, ...props }: import("./components/ToastDescription").DescriptionProps) => React.JSX.Element) & {
-        original: ({ text, className, ...props }: import("./components/ToastDescription").DescriptionProps) => React.JSX.Element;
+    Description: (({ text, className, ...props }: import("./components/ToastDescription.js").DescriptionProps) => React.JSX.Element) & {
+        original: ({ text, className, ...props }: import("./components/ToastDescription.js").DescriptionProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ text, className, ...props }: import("./components/ToastDescription").DescriptionProps) => React.JSX.Element) & {
-            original: ({ text, className, ...props }: import("./components/ToastDescription").DescriptionProps) => React.JSX.Element;
+        original: (({ text, className, ...props }: import("./components/ToastDescription.js").DescriptionProps) => React.JSX.Element) & {
+            original: ({ text, className, ...props }: import("./components/ToastDescription.js").DescriptionProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ text, className, ...props }: import("./components/ToastDescription").DescriptionProps) => React.JSX.Element) & {
-            original: ({ text, className, ...props }: import("./components/ToastDescription").DescriptionProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ text, className, ...props }: import("./components/ToastDescription.js").DescriptionProps) => React.JSX.Element) & {
+            original: ({ text, className, ...props }: import("./components/ToastDescription.js").DescriptionProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
@@ -80,7 +80,7 @@ declare const Toast: (({ title, description, icon, actions, onCloseClick, dismis
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element) & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element) & {
             original: ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
             originalName: string;
             displayName: string;

package/Toast/Toast.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Toaster } from "sonner";
-import { makeDecoratable, withStaticProps } from "../utils";
-import { Portal } from "../Portal";
-import { ToastActions, ToastClose, ToastDescription, ToastIcon, ToastRoot, ToastTitle } from "./components";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { Portal } from "../Portal/index.js";
+import { ToastActions, ToastClose, ToastDescription, ToastIcon, ToastRoot, ToastTitle } from "./components/index.js";
 const DecoratableToast = ({
   title,
   description,
@@ -17,7 +17,7 @@ const DecoratableToast = ({
   }, props), /*#__PURE__*/React.createElement(ToastIcon, {
     icon: icon
   }), /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-64"
+    className: "w-64"
   }, title, description && description, actions && actions), dismissible && /*#__PURE__*/React.createElement(ToastClose, {
     onClick: onCloseClick,
     variant: props.variant === "subtle" ? "subtle" : "ghost-negative"
@@ -30,7 +30,7 @@ const Toast = withStaticProps(makeDecoratable("Toast", DecoratableToast), {
   Provider: props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Toaster, Object.assign({
     expand: true,
     duration: 6000,
-    position: "top-right"
+    position: "bottom-left"
   }, props)))
 });
 export { Toast };

package/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Toaster","makeDecoratable","withStaticProps","Portal","ToastActions","ToastClose","ToastDescription","ToastIcon","ToastRoot","ToastTitle","DecoratableToast","title","description","icon","actions","onCloseClick","dismissible","props","createElement","Object","assign","hasDescription","className","onClick","variant","Toast","Title","Description","Actions","Provider","expand","duration","position"],"sources":["Toast.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Toaster, type ToasterProps } from \"sonner\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { type IconButtonProps } from \"~/Button\";\nimport type { Icon as BaseIcon } from \"~/Icon\";\nimport { Portal } from \"~/Portal\";\nimport {\n    ToastActions,\n    ToastClose,\n    ToastDescription,\n    ToastIcon,\n    ToastRoot,\n    ToastTitle,\n    type ToastRootProps\n} from \"./components\";\n\ninterface ToastProps extends Omit<ToastRootProps, \"title\" | \"content\" | \"children\"> {\n    title: React.ReactElement<typeof ToastTitle>;\n    description?: React.ReactElement<typeof ToastDescription>;\n    icon?: React.ReactElement<typeof BaseIcon>;\n    actions?: React.ReactElement<typeof ToastActions>;\n    onCloseClick: () => void;\n    dismissible?: boolean;\n}\n\nconst DecoratableToast = ({\n    title,\n    description,\n    icon,\n    actions,\n    onCloseClick,\n    dismissible = true,\n    ...props\n}: ToastProps) => {\n    return (\n        <ToastRoot hasDescription={!!description || !!actions} {...props}>\n            <ToastIcon icon={icon} />\n            <div className=\"wby-w-64\">\n                {title}\n                {description && description}\n                {actions && actions}\n            </div>\n            {dismissible && (\n                <ToastClose\n                    onClick={onCloseClick}\n                    variant={\n                        props.variant === \"subtle\"\n                            ? (\"subtle\" as IconButtonProps[\"variant\"])\n                            : (\"ghost-negative\" as IconButtonProps[\"variant\"])\n                    }\n                />\n            )}\n        </ToastRoot>\n    );\n};\n\nconst Toast = withStaticProps(makeDecoratable(\"Toast\", DecoratableToast), {\n    Title: ToastTitle,\n    Description: ToastDescription,\n    Actions: ToastActions,\n    Provider: (props: ToasterProps) => (\n        <Portal>\n            <Toaster expand={true} duration={6000} position={\"top-right\"} {...props} />\n        </Portal>\n    )\n});\n\nexport { Toast, type ToastProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAA2B,QAAQ;AACnD,SAASC,eAAe,EAAEC,eAAe;AAGzC,SAASC,MAAM;AACf,SACIC,YAAY,EACZC,UAAU,EACVC,gBAAgB,EAChBC,SAAS,EACTC,SAAS,EACTC,UAAU;AAad,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,OAAO;EACPC,YAAY;EACZC,WAAW,GAAG,IAAI;EAClB,GAAGC;AACK,CAAC,KAAK;EACd,oBACIlB,KAAA,CAAAmB,aAAA,CAACV,SAAS,EAAAW,MAAA,CAAAC,MAAA;IAACC,cAAc,EAAE,CAAC,CAACT,WAAW,IAAI,CAAC,CAACE;EAAQ,GAAKG,KAAK,gBAC5DlB,KAAA,CAAAmB,aAAA,CAACX,SAAS;IAACM,IAAI,EAAEA;EAAK,CAAE,CAAC,eACzBd,KAAA,CAAAmB,aAAA;IAAKI,SAAS,EAAC;EAAU,GACpBX,KAAK,EACLC,WAAW,IAAIA,WAAW,EAC1BE,OAAO,IAAIA,OACX,CAAC,EACLE,WAAW,iBACRjB,KAAA,CAAAmB,aAAA,CAACb,UAAU;IACPkB,OAAO,EAAER,YAAa;IACtBS,OAAO,EACHP,KAAK,CAACO,OAAO,KAAK,QAAQ,GACnB,QAAQ,GACR;EACV,CACJ,CAEE,CAAC;AAEpB,CAAC;AAED,MAAMC,KAAK,GAAGvB,eAAe,CAACD,eAAe,CAAC,OAAO,EAAES,gBAAgB,CAAC,EAAE;EACtEgB,KAAK,EAAEjB,UAAU;EACjBkB,WAAW,EAAErB,gBAAgB;EAC7BsB,OAAO,EAAExB,YAAY;EACrByB,QAAQ,EAAGZ,KAAmB,iBAC1BlB,KAAA,CAAAmB,aAAA,CAACf,MAAM,qBACHJ,KAAA,CAAAmB,aAAA,CAAClB,OAAO,EAAAmB,MAAA,CAAAC,MAAA;IAACU,MAAM,EAAE,IAAK;IAACC,QAAQ,EAAE,IAAK;IAACC,QAAQ,EAAE;EAAY,GAAKf,KAAK,CAAG,CACtE;AAEhB,CAAC,CAAC;AAEF,SAASQ,KAAK","ignoreList":[]}
+{"version":3,"names":["React","Toaster","makeDecoratable","withStaticProps","Portal","ToastActions","ToastClose","ToastDescription","ToastIcon","ToastRoot","ToastTitle","DecoratableToast","title","description","icon","actions","onCloseClick","dismissible","props","createElement","Object","assign","hasDescription","className","onClick","variant","Toast","Title","Description","Actions","Provider","expand","duration","position"],"sources":["Toast.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Toaster, type ToasterProps } from \"sonner\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { type IconButtonProps } from \"~/Button/index.js\";\nimport type { Icon as BaseIcon } from \"~/Icon/index.js\";\nimport { Portal } from \"~/Portal/index.js\";\nimport {\n    ToastActions,\n    ToastClose,\n    ToastDescription,\n    ToastIcon,\n    ToastRoot,\n    ToastTitle,\n    type ToastRootProps\n} from \"./components/index.js\";\n\ninterface ToastProps extends Omit<ToastRootProps, \"title\" | \"content\" | \"children\"> {\n    title: React.ReactElement<typeof ToastTitle>;\n    description?: React.ReactElement<typeof ToastDescription>;\n    icon?: React.ReactElement<typeof BaseIcon>;\n    actions?: React.ReactElement<typeof ToastActions>;\n    onCloseClick: () => void;\n    dismissible?: boolean;\n}\n\nconst DecoratableToast = ({\n    title,\n    description,\n    icon,\n    actions,\n    onCloseClick,\n    dismissible = true,\n    ...props\n}: ToastProps) => {\n    return (\n        <ToastRoot hasDescription={!!description || !!actions} {...props}>\n            <ToastIcon icon={icon} />\n            <div className=\"w-64\">\n                {title}\n                {description && description}\n                {actions && actions}\n            </div>\n            {dismissible && (\n                <ToastClose\n                    onClick={onCloseClick}\n                    variant={\n                        props.variant === \"subtle\"\n                            ? (\"subtle\" as IconButtonProps[\"variant\"])\n                            : (\"ghost-negative\" as IconButtonProps[\"variant\"])\n                    }\n                />\n            )}\n        </ToastRoot>\n    );\n};\n\nconst Toast = withStaticProps(makeDecoratable(\"Toast\", DecoratableToast), {\n    Title: ToastTitle,\n    Description: ToastDescription,\n    Actions: ToastActions,\n    Provider: (props: ToasterProps) => (\n        <Portal>\n            <Toaster expand={true} duration={6000} position={\"bottom-left\"} {...props} />\n        </Portal>\n    )\n});\n\nexport { Toast, type ToastProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAA2B,QAAQ;AACnD,SAASC,eAAe,EAAEC,eAAe;AAGzC,SAASC,MAAM;AACf,SACIC,YAAY,EACZC,UAAU,EACVC,gBAAgB,EAChBC,SAAS,EACTC,SAAS,EACTC,UAAU;AAad,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,OAAO;EACPC,YAAY;EACZC,WAAW,GAAG,IAAI;EAClB,GAAGC;AACK,CAAC,KAAK;EACd,oBACIlB,KAAA,CAAAmB,aAAA,CAACV,SAAS,EAAAW,MAAA,CAAAC,MAAA;IAACC,cAAc,EAAE,CAAC,CAACT,WAAW,IAAI,CAAC,CAACE;EAAQ,GAAKG,KAAK,gBAC5DlB,KAAA,CAAAmB,aAAA,CAACX,SAAS;IAACM,IAAI,EAAEA;EAAK,CAAE,CAAC,eACzBd,KAAA,CAAAmB,aAAA;IAAKI,SAAS,EAAC;EAAM,GAChBX,KAAK,EACLC,WAAW,IAAIA,WAAW,EAC1BE,OAAO,IAAIA,OACX,CAAC,EACLE,WAAW,iBACRjB,KAAA,CAAAmB,aAAA,CAACb,UAAU;IACPkB,OAAO,EAAER,YAAa;IACtBS,OAAO,EACHP,KAAK,CAACO,OAAO,KAAK,QAAQ,GACnB,QAAQ,GACR;EACV,CACJ,CAEE,CAAC;AAEpB,CAAC;AAED,MAAMC,KAAK,GAAGvB,eAAe,CAACD,eAAe,CAAC,OAAO,EAAES,gBAAgB,CAAC,EAAE;EACtEgB,KAAK,EAAEjB,UAAU;EACjBkB,WAAW,EAAErB,gBAAgB;EAC7BsB,OAAO,EAAExB,YAAY;EACrByB,QAAQ,EAAGZ,KAAmB,iBAC1BlB,KAAA,CAAAmB,aAAA,CAACf,MAAM,qBACHJ,KAAA,CAAAmB,aAAA,CAAClB,OAAO,EAAAmB,MAAA,CAAAC,MAAA;IAACU,MAAM,EAAE,IAAK;IAACC,QAAQ,EAAE,IAAK;IAACC,QAAQ,EAAE;EAAc,GAAKf,KAAK,CAAG,CACxE;AAEhB,CAAC,CAAC;AAEF,SAASQ,KAAK","ignoreList":[]}

package/Toast/Toast.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as ToastStories from './useToast.stories';
 

package/Toast/components/ToastActions.d.ts

@@ -12,7 +12,7 @@ declare const ToastActions: (({ children, className, ...props }: React.HTMLAttri
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element) & {
         original: ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Toast/components/ToastActions.js

@@ -1,11 +1,11 @@
 import React from "react";
-import { cn, makeDecoratable } from "../../utils";
+import { cn, makeDecoratable } from "../../utils.js";
 const DecoratableToastActions = ({
   children,
   className,
   ...props
 }) => /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-  className: cn("wby-flex wby-w-full wby-items-center wby-justify-start wby-gap-sm wby-mt-md", className)
+  className: cn("flex w-full items-center justify-start gap-sm mt-md", className)
 }), children);
 const ToastActions = makeDecoratable("ToastActions", DecoratableToastActions);
 export { ToastActions };

package/Toast/components/ToastActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","DecoratableToastActions","children","className","props","createElement","Object","assign","ToastActions"],"sources":["ToastActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\nconst DecoratableToastActions = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        {...props}\n        className={cn(\n            \"wby-flex wby-w-full wby-items-center wby-justify-start wby-gap-sm wby-mt-md\",\n            className\n        )}\n    >\n        {children}\n    </div>\n);\n\nconst ToastActions = makeDecoratable(\"ToastActions\", DecoratableToastActions);\n\nexport { ToastActions };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAE5B,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAC+B,CAAC,kBACnCN,KAAA,CAAAO,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;EACTD,SAAS,EAAEJ,EAAE,CACT,6EAA6E,EAC7EI,SACJ;AAAE,IAEDD,QACA,CACR;AAED,MAAMM,YAAY,GAAGR,eAAe,CAAC,cAAc,EAAEC,uBAAuB,CAAC;AAE7E,SAASO,YAAY","ignoreList":[]}
+{"version":3,"names":["React","cn","makeDecoratable","DecoratableToastActions","children","className","props","createElement","Object","assign","ToastActions"],"sources":["ToastActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\nconst DecoratableToastActions = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        {...props}\n        className={cn(\"flex w-full items-center justify-start gap-sm mt-md\", className)}\n    >\n        {children}\n    </div>\n);\n\nconst ToastActions = makeDecoratable(\"ToastActions\", DecoratableToastActions);\n\nexport { ToastActions };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAE5B,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAC+B,CAAC,kBACnCN,KAAA,CAAAO,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;EACTD,SAAS,EAAEJ,EAAE,CAAC,qDAAqD,EAAEI,SAAS;AAAE,IAE/ED,QACA,CACR;AAED,MAAMM,YAAY,GAAGR,eAAe,CAAC,cAAc,EAAEC,uBAAuB,CAAC;AAE7E,SAASO,YAAY","ignoreList":[]}

package/Toast/components/ToastClose.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type IconButtonProps } from "../../Button";
+import { type IconButtonProps } from "../../Button/index.js";
 type ToastCloseProps = IconButtonProps;
 declare const ToastClose: (props: ToastCloseProps) => React.JSX.Element;
 export { ToastClose, type ToastCloseProps };

package/Toast/components/ToastClose.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
-import { IconButton } from "../../Button";
-import { Icon } from "../../Icon";
+import { IconButton } from "../../Button/index.js";
+import { Icon } from "../../Icon/index.js";
 const ToastClose = props => /*#__PURE__*/React.createElement(IconButton, Object.assign({
   icon: /*#__PURE__*/React.createElement(Icon, {
     label: "Close",

package/Toast/components/ToastClose.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","CloseIcon","IconButton","Icon","ToastClose","props","createElement","Object","assign","icon","label","size","iconSize"],"sources":["ToastClose.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { IconButton, type IconButtonProps } from \"~/Button\";\nimport { Icon } from \"~/Icon\";\n\ntype ToastCloseProps = IconButtonProps;\n\nconst ToastClose = (props: ToastCloseProps) => (\n    <IconButton\n        icon={<Icon label={\"Close\"} icon={<CloseIcon />} />}\n        size={\"sm\"}\n        iconSize={\"lg\"}\n        {...props}\n    />\n);\n\nexport { ToastClose, type ToastCloseProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASC,UAAU;AACnB,SAASC,IAAI;AAIb,MAAMC,UAAU,GAAIC,KAAsB,iBACtCN,KAAA,CAAAO,aAAA,CAACJ,UAAU,EAAAK,MAAA,CAAAC,MAAA;EACPC,IAAI,eAAEV,KAAA,CAAAO,aAAA,CAACH,IAAI;IAACO,KAAK,EAAE,OAAQ;IAACD,IAAI,eAAEV,KAAA,CAAAO,aAAA,CAACL,SAAS,MAAE;EAAE,CAAE,CAAE;EACpDU,IAAI,EAAE,IAAK;EACXC,QAAQ,EAAE;AAAK,GACXP,KAAK,CACZ,CACJ;AAED,SAASD,UAAU","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","CloseIcon","IconButton","Icon","ToastClose","props","createElement","Object","assign","icon","label","size","iconSize"],"sources":["ToastClose.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { IconButton, type IconButtonProps } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ntype ToastCloseProps = IconButtonProps;\n\nconst ToastClose = (props: ToastCloseProps) => (\n    <IconButton\n        icon={<Icon label={\"Close\"} icon={<CloseIcon />} />}\n        size={\"sm\"}\n        iconSize={\"lg\"}\n        {...props}\n    />\n);\n\nexport { ToastClose, type ToastCloseProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASC,UAAU;AACnB,SAASC,IAAI;AAIb,MAAMC,UAAU,GAAIC,KAAsB,iBACtCN,KAAA,CAAAO,aAAA,CAACJ,UAAU,EAAAK,MAAA,CAAAC,MAAA;EACPC,IAAI,eAAEV,KAAA,CAAAO,aAAA,CAACH,IAAI;IAACO,KAAK,EAAE,OAAQ;IAACD,IAAI,eAAEV,KAAA,CAAAO,aAAA,CAACL,SAAS,MAAE;EAAE,CAAE,CAAE;EACpDU,IAAI,EAAE,IAAK;EACXC,QAAQ,EAAE;AAAK,GACXP,KAAK,CACZ,CACJ;AAED,SAASD,UAAU","ignoreList":[]}

package/Toast/components/ToastDescription.d.ts

@@ -15,7 +15,7 @@ declare const ToastDescription: (({ text, className, ...props }: DescriptionProp
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ text, className, ...props }: DescriptionProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ text, className, ...props }: DescriptionProps) => React.JSX.Element) & {
         original: ({ text, className, ...props }: DescriptionProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Toast/components/ToastDescription.js

@@ -1,16 +1,16 @@
 import React from "react";
-import { cn, makeDecoratable } from "../../utils";
-import { Text } from "../../Text";
+import { cn, makeDecoratable } from "../../utils.js";
+import { Text } from "../../Text/index.js";
 const DecoratableToastDescription = ({
   text,
   className,
   ...props
 }) => /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-  className: cn("wby-mt-xs-plus group-[.wby-default-variant]:wby-text-neutral-dimmed group-[.wby-subtle-variant]:wby-text-neutral-strong", className)
+  className: cn("mt-xs-plus group-[.default-variant]:text-neutral-dimmed group-[.subtle-variant]:text-neutral-strong", className)
 }), /*#__PURE__*/React.createElement(Text, {
   as: "div",
   size: "md",
-  className: "wby-text-neutral-dimmed"
+  className: "text-neutral-dimmed"
 }, text));
 const ToastDescription = makeDecoratable("ToastDescription", DecoratableToastDescription);
 export { ToastDescription };

package/Toast/components/ToastDescription.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","Text","DecoratableToastDescription","text","className","props","createElement","Object","assign","as","size","ToastDescription"],"sources":["ToastDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport { Text } from \"~/Text\";\n\ntype DescriptionProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n    text: React.ReactNode;\n};\n\nconst DecoratableToastDescription = ({ text, className, ...props }: DescriptionProps) => (\n    <div\n        {...props}\n        className={cn(\n            \"wby-mt-xs-plus group-[.wby-default-variant]:wby-text-neutral-dimmed group-[.wby-subtle-variant]:wby-text-neutral-strong\",\n            className\n        )}\n    >\n        <Text as={\"div\"} size={\"md\"} className={\"wby-text-neutral-dimmed\"}>\n            {text}\n        </Text>\n    </div>\n);\n\nconst ToastDescription = makeDecoratable(\"ToastDescription\", DecoratableToastDescription);\n\nexport { ToastDescription, type DescriptionProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,IAAI;AAMb,MAAMC,2BAA2B,GAAGA,CAAC;EAAEC,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAwB,CAAC,kBAChFP,KAAA,CAAAQ,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;EACTD,SAAS,EAAEL,EAAE,CACT,yHAAyH,EACzHK,SACJ;AAAE,iBAEFN,KAAA,CAAAQ,aAAA,CAACL,IAAI;EAACQ,EAAE,EAAE,KAAM;EAACC,IAAI,EAAE,IAAK;EAACN,SAAS,EAAE;AAA0B,GAC7DD,IACC,CACL,CACR;AAED,MAAMQ,gBAAgB,GAAGX,eAAe,CAAC,kBAAkB,EAAEE,2BAA2B,CAAC;AAEzF,SAASS,gBAAgB","ignoreList":[]}
+{"version":3,"names":["React","cn","makeDecoratable","Text","DecoratableToastDescription","text","className","props","createElement","Object","assign","as","size","ToastDescription"],"sources":["ToastDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\n\ntype DescriptionProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n    text: React.ReactNode;\n};\n\nconst DecoratableToastDescription = ({ text, className, ...props }: DescriptionProps) => (\n    <div\n        {...props}\n        className={cn(\n            \"mt-xs-plus group-[.default-variant]:text-neutral-dimmed group-[.subtle-variant]:text-neutral-strong\",\n            className\n        )}\n    >\n        <Text as={\"div\"} size={\"md\"} className={\"text-neutral-dimmed\"}>\n            {text}\n        </Text>\n    </div>\n);\n\nconst ToastDescription = makeDecoratable(\"ToastDescription\", DecoratableToastDescription);\n\nexport { ToastDescription, type DescriptionProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,IAAI;AAMb,MAAMC,2BAA2B,GAAGA,CAAC;EAAEC,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAwB,CAAC,kBAChFP,KAAA,CAAAQ,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;EACTD,SAAS,EAAEL,EAAE,CACT,qGAAqG,EACrGK,SACJ;AAAE,iBAEFN,KAAA,CAAAQ,aAAA,CAACL,IAAI;EAACQ,EAAE,EAAE,KAAM;EAACC,IAAI,EAAE,IAAK;EAACN,SAAS,EAAE;AAAsB,GACzDD,IACC,CACL,CACR;AAED,MAAMQ,gBAAgB,GAAGX,eAAe,CAAC,kBAAkB,EAAEE,2BAA2B,CAAC;AAEzF,SAASS,gBAAgB","ignoreList":[]}

package/Toast/components/ToastIcon.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon as BaseIcon } from "../../Icon";
+import { Icon as BaseIcon } from "../../Icon/index.js";
 type ToastIconProps = {
     icon?: React.ReactElement<typeof BaseIcon>;
 };

package/Toast/components/ToastIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { ReactComponent as NotificationsIconActive } from "@webiny/icons/notifications_active.svg";
-import { Icon as BaseIcon } from "../../Icon";
+import { Icon as BaseIcon } from "../../Icon/index.js";
 const ToastNotificationIcon = /*#__PURE__*/React.createElement(BaseIcon, {
   icon: /*#__PURE__*/React.createElement(NotificationsIconActive, null),
   label: "Notification",

package/Toast/components/ToastIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","NotificationsIconActive","Icon","BaseIcon","ToastNotificationIcon","createElement","icon","label","size","color","ToastIcon","isValidElement","cloneElement","props"],"sources":["ToastIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as NotificationsIconActive } from \"@webiny/icons/notifications_active.svg\";\nimport { Icon as BaseIcon } from \"~/Icon\";\n\nconst ToastNotificationIcon = (\n    <BaseIcon\n        icon={<NotificationsIconActive />}\n        label={\"Notification\"}\n        size={\"md\"}\n        color={\"accent\"}\n    />\n);\n\ntype ToastIconProps = {\n    icon?: React.ReactElement<typeof BaseIcon>;\n};\n\nconst ToastIcon = ({ icon }: ToastIconProps) => {\n    return (\n        <span>\n            {React.isValidElement(icon)\n                ? React.cloneElement(icon, { ...ToastNotificationIcon.props, ...icon.props })\n                : React.cloneElement(ToastNotificationIcon)}\n        </span>\n    );\n};\n\nexport { ToastIcon, type ToastIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,uBAAuB,QAAQ,wCAAwC;AAClG,SAASC,IAAI,IAAIC,QAAQ;AAEzB,MAAMC,qBAAqB,gBACvBL,KAAA,CAAAM,aAAA,CAACF,QAAQ;EACLG,IAAI,eAAEP,KAAA,CAAAM,aAAA,CAACJ,uBAAuB,MAAE,CAAE;EAClCM,KAAK,EAAE,cAAe;EACtBC,IAAI,EAAE,IAAK;EACXC,KAAK,EAAE;AAAS,CACnB,CACJ;AAMD,MAAMC,SAAS,GAAGA,CAAC;EAAEJ;AAAqB,CAAC,KAAK;EAC5C,oBACIP,KAAA,CAAAM,aAAA,eACK,aAAAN,KAAK,CAACY,cAAc,CAACL,IAAI,CAAC,gBACrBP,KAAK,CAACa,YAAY,CAACN,IAAI,EAAE;IAAE,GAAGF,qBAAqB,CAACS,KAAK;IAAE,GAAGP,IAAI,CAACO;EAAM,CAAC,CAAC,gBAC3Ed,KAAK,CAACa,YAAY,CAACR,qBAAqB,CAC5C,CAAC;AAEf,CAAC;AAED,SAASM,SAAS","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","NotificationsIconActive","Icon","BaseIcon","ToastNotificationIcon","createElement","icon","label","size","color","ToastIcon","isValidElement","cloneElement","props"],"sources":["ToastIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as NotificationsIconActive } from \"@webiny/icons/notifications_active.svg\";\nimport { Icon as BaseIcon } from \"~/Icon/index.js\";\n\nconst ToastNotificationIcon = (\n    <BaseIcon\n        icon={<NotificationsIconActive />}\n        label={\"Notification\"}\n        size={\"md\"}\n        color={\"accent\"}\n    />\n);\n\ntype ToastIconProps = {\n    icon?: React.ReactElement<typeof BaseIcon>;\n};\n\nconst ToastIcon = ({ icon }: ToastIconProps) => {\n    return (\n        <span>\n            {React.isValidElement(icon)\n                ? React.cloneElement(icon, { ...ToastNotificationIcon.props, ...icon.props })\n                : React.cloneElement(ToastNotificationIcon)}\n        </span>\n    );\n};\n\nexport { ToastIcon, type ToastIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,uBAAuB,QAAQ,wCAAwC;AAClG,SAASC,IAAI,IAAIC,QAAQ;AAEzB,MAAMC,qBAAqB,gBACvBL,KAAA,CAAAM,aAAA,CAACF,QAAQ;EACLG,IAAI,eAAEP,KAAA,CAAAM,aAAA,CAACJ,uBAAuB,MAAE,CAAE;EAClCM,KAAK,EAAE,cAAe;EACtBC,IAAI,EAAE,IAAK;EACXC,KAAK,EAAE;AAAS,CACnB,CACJ;AAMD,MAAMC,SAAS,GAAGA,CAAC;EAAEJ;AAAqB,CAAC,KAAK;EAC5C,oBACIP,KAAA,CAAAM,aAAA,eACK,aAAAN,KAAK,CAACY,cAAc,CAACL,IAAI,CAAC,gBACrBP,KAAK,CAACa,YAAY,CAACN,IAAI,EAAE;IAAE,GAAGF,qBAAqB,CAACS,KAAK;IAAE,GAAGP,IAAI,CAACO;EAAM,CAAC,CAAC,gBAC3Ed,KAAK,CAACa,YAAY,CAACR,qBAAqB,CAC5C,CAAC;AAEf,CAAC;AAED,SAASM,SAAS","ignoreList":[]}

package/Toast/components/ToastRoot.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const toastRootVariants: (props?: ({
     variant?: "default" | "subtle" | null | undefined;
     hasDescription?: boolean | null | undefined;

package/Toast/components/ToastRoot.js

@@ -1,13 +1,13 @@
 import React from "react";
-import { cn, cva } from "../../utils";
-const toastRootVariants = cva("wby-group wby-pointer-events-auto wby-relative wby-flex wby-w-full wby-items-center wby-justify-start wby-p-md wby-gap-sm-extra wby-self-stretch wby-overflow-hidden wby-rounded-md wby-border-sm wby-border-neutral-dimmed wby-shadow-lg", {
+import { cn, cva } from "../../utils.js";
+const toastRootVariants = cva("group pointer-events-auto relative flex w-full items-center justify-start p-md gap-sm-extra self-stretch overflow-hidden rounded-md border-sm border-neutral-dimmed shadow-lg", {
   variants: {
     variant: {
-      default: "wby-default-variant wby-bg-neutral-dark",
-      subtle: "wby-subtle-variant wby-bg-white"
+      default: "default-variant bg-neutral-dark",
+      subtle: "subtle-variant bg-white"
     },
     hasDescription: {
-      true: "wby-has-description wby-items-start wby-justify-start"
+      true: "has-description items-start justify-start"
     }
   },
   defaultVariants: {