@webiny/admin-ui 6.2.0 → 6.3.0-beta.0

package/Textarea/Textarea.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as TextareaStories from './Textarea.stories';
+import * as TextareaStories from "./Textarea.stories";
 
 <Meta of={TextareaStories} />
 
@@ -16,7 +16,7 @@ import React, { useState } from "react";
 import { Textarea } from "@webiny/admin-ui";
 
 const TextareaExample = () => {
-    const [value, setValue] = useState("");
+const [value, setValue] = useState("");
 
     return (
         <Textarea
@@ -29,25 +29,26 @@ const TextareaExample = () => {
             onChange={newValue => setValue(newValue)}
         />
     );
+
 };
 
 export default TextareaExample;
 
 `} }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Textarea/Textarea.tsx',
-                    '_blank'
-                );
-            },
-        }
-    ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Textarea/Textarea.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={TextareaStories.Documentation}/>
+<Controls of={TextareaStories.Documentation} />
 
 ```jsx
 import React, { useState } from "react";
@@ -55,19 +56,19 @@ import React, { useState } from "react";
 import { Textarea } from "@webiny/admin-ui";
 
 const TextareaExample = () => {
-    const [value, setValue] = useState("");
-
-    return (
-        <Textarea
-            label="Message"
-            description="Enter your feedback or message"
-            note="Please be specific and provide relevant details"
-            placeholder="Type your message here..."
-            required={true}
-            value={value}
-            onChange={newValue => setValue(newValue)}
-        />
-    );
+  const [value, setValue] = useState("");
+
+  return (
+    <Textarea
+      label="Message"
+      description="Enter your feedback or message"
+      note="Please be specific and provide relevant details"
+      placeholder="Type your message here..."
+      required={true}
+      value={value}
+      onChange={newValue => setValue(newValue)}
+    />
+  );
 };
 
 export default TextareaExample;
@@ -76,6 +77,7 @@ export default TextareaExample;
 ## Examples
 
 ### With Validate Function
+
 The Textarea component supports validation using the validation prop, as shown in the example above.
 For more complex or reusable validation scenarios, you can use the validate prop, which accepts a custom validation function.
 Try entering less than 10 characters to see it in action, and click on **Show code** to view the validation function.
@@ -86,8 +88,8 @@ import React, { useState } from "react";
 import { Textarea } from "@webiny/admin-ui";
 
 const MessageTextarea = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [value, setValue] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const validate = async () => {
         if (!value.trim()) {
@@ -110,34 +112,42 @@ const MessageTextarea = () => {
             validation={validation}
         />
     );
+
 };` } }
 />
 
-
 ## Anatomy
 
 ### Textarea
-<img src="/images/storybook/textarea/anatomy.png" alt="Textarea Anatomy"/>
+
+<img src="/images/storybook/textarea/anatomy.png" alt="Textarea Anatomy" />
 
 ### Styles
-<img src="/images/storybook/textarea/styles.png" alt="Styles"/>
+
+<img src="/images/storybook/textarea/styles.png" alt="Styles" />
 
 ### Field Size
-<img src="/images/storybook/textarea/field-size.png" alt="Field Size"/>
+
+<img src="/images/storybook/textarea/field-size.png" alt="Field Size" />
 
 ### States and Styles
-<img src="/images/storybook/textarea/states-and-styles.png" alt="States and Styles"/>
+
+<img src="/images/storybook/textarea/states-and-styles.png" alt="States and Styles" />
 
 ### Label Anatomy
-<img src="/images/storybook/textarea/label-anatomy.png" alt="Label Anatomy"/>
+
+<img src="/images/storybook/textarea/label-anatomy.png" alt="Label Anatomy" />
 
 ### Label Properties
-<img src="/images/storybook/textarea/label-properties.png" alt="Label Properties"/>
+
+<img src="/images/storybook/textarea/label-properties.png" alt="Label Properties" />
 
 ### Label Options
-<img src="/images/storybook/textarea/label-options.png" alt="Label Options"/>
+
+<img src="/images/storybook/textarea/label-options.png" alt="Label Options" />
 
 ## Usage
 
 ### Used in forms
-<img src="/images/storybook/textarea/used-in-forms.png" alt="Used in forms"/>
+
+<img src="/images/storybook/textarea/used-in-forms.png" alt="Used in forms" />

package/Textarea/TextareaPrimitive.d.ts

@@ -4,7 +4,7 @@ declare const textareaVariants: (props?: ({
     variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
     size?: "md" | "lg" | "xl" | null | undefined;
     invalid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TextareaPrimitiveProps extends React.ComponentProps<"textarea">, VariantProps<typeof textareaVariants> {
     /**
      * Reference to the textarea element.

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.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":[]}
+{"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\">, 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/Toast/Toast.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as ToastStories from './useToast.stories';
+import * as ToastStories from "./useToast.stories";
 
 <Meta of={ToastStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
         const handleShowToast = () => {
             const toast = showToast({
@@ -38,17 +38,17 @@ const ToastExample = () => {
     export default ToastExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Toast/Toast.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Toast/Toast.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={ToastStories.Documentation} />
@@ -58,24 +58,24 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
-
-    const handleShowToast = () => {
-        const toast = showToast({
-            title: "New entry created"
-        });
-        setLastToast(toast);
-    };
-
-    return (
-        <>
-            <Button text="Show Toast" onClick={handleShowToast} />
-            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
-            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
-            <Toast.Provider />
-        </>
-    );
+  const [lastToast, setLastToast] = useState<string | number>("");
+  const { showToast, hideToast, hideAllToasts } = useToast();
+
+  const handleShowToast = () => {
+    const toast = showToast({
+      title: "New entry created"
+    });
+    setLastToast(toast);
+  };
+
+  return (
+    <>
+      <Button text="Show Toast" onClick={handleShowToast} />
+      <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+      <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+      <Toast.Provider />
+    </>
+  );
 };
 
 export default ToastExample;
@@ -92,8 +92,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const BasicToastExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -111,6 +111,7 @@ const BasicToastExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default BasicToastExample;
@@ -125,8 +126,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const SubtleToastExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -145,6 +146,7 @@ const SubtleToastExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default SubtleToastExample;
@@ -159,8 +161,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastWithDescriptionExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -179,6 +181,7 @@ const ToastWithDescriptionExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default ToastWithDescriptionExample;
@@ -193,8 +196,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastWithComponentsExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -215,6 +218,7 @@ const ToastWithComponentsExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default ToastWithComponentsExample;
@@ -229,8 +233,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastWithActionsExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -263,6 +267,7 @@ const ToastWithActionsExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default ToastWithActionsExample;
@@ -277,8 +282,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastWithDescriptionAndActionsExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -314,6 +319,7 @@ const ToastWithDescriptionAndActionsExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default ToastWithDescriptionAndActionsExample;
@@ -329,8 +335,8 @@ import { useToast, Toast, Button, Icon } from "@webiny/admin-ui";
 import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
 
 const ToastWithCustomIconExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -349,6 +355,7 @@ const ToastWithCustomIconExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default ToastWithCustomIconExample;
@@ -363,8 +370,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastWithInfiniteDurationExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -383,6 +390,7 @@ const ToastWithInfiniteDurationExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default ToastWithInfiniteDurationExample;
@@ -397,8 +405,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastNotDismissibleExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -417,6 +425,7 @@ const ToastNotDismissibleExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default ToastNotDismissibleExample;
@@ -431,8 +440,8 @@ import React, { useState } from "react";
 import { useToast, Toast, Button } from "@webiny/admin-ui";
 
 const ToastWithCustomPositionExample = () => {
-    const [lastToast, setLastToast] = useState<string | number>("");
-    const { showToast, hideToast, hideAllToasts } = useToast();
+const [lastToast, setLastToast] = useState<string | number>("");
+const { showToast, hideToast, hideAllToasts } = useToast();
 
     return (
         <>
@@ -451,6 +460,7 @@ const ToastWithCustomPositionExample = () => {
             <Toast.Provider />
         </>
     );
+
 };
 
 export default ToastWithCustomPositionExample;

package/Toast/components/ToastRoot.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "../../utils.js";
 declare const toastRootVariants: (props?: ({
     variant?: "default" | "subtle" | null | undefined;
     hasDescription?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ToastRootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof toastRootVariants>;
 declare const ToastRoot: ({ className, hasDescription, variant, children, ...props }: ToastRootProps) => React.JSX.Element;
 export { ToastRoot, type ToastRootProps, toastRootVariants };