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

package/Input/Input.stories.d.ts

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

package/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input/Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\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 Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\"\n        },\n        validate: {\n            description: \"Custom validation function\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"names":["meta","Input","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","args","value","setValue","useState","validation","setValidation","undefined","validate","Promise","resolve","setTimeout","newValue","FullExample","Documentation","handleValidation"],"mappings":"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"}
+{"version":3,"file":"Input/Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\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 Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\"\n        },\n        validate: {\n            description: \"Custom validation function\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"names":["meta","Input","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","args","value","setValue","useState","validation","setValidation","undefined","validate","Promise","resolve","setTimeout","newValue","FullExample","Documentation","handleValidation"],"mappings":"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"}

package/Input/InputPrimitive.d.ts

@@ -14,8 +14,8 @@ declare const InputIcon: ({ icon, inputSize, className }: InputIconProps) => Rea
  * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)
  */
 declare const inputVariants: (props?: ({
-    size?: "md" | "lg" | "xl" | null | undefined;
-    variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
+    size?: "lg" | "md" | "xl" | null | undefined;
+    variant?: "ghost" | "ghost-negative" | "primary" | "secondary" | null | undefined;
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type InputPrimitiveProps<TValue = any> = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & VariantProps<typeof inputVariants> & {
@@ -56,21 +56,22 @@ type InputPrimitiveProps<TValue = any> = Omit<React.InputHTMLAttributes<HTMLInpu
      */
     autoSelect?: boolean;
 };
-declare const InputPrimitive: (({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element) & {
-    original: ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element;
+declare const DecoratableInputPrimitive: ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element;
+declare const InputPrimitive: typeof DecoratableInputPrimitive & {
+    original: typeof DecoratableInputPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element) & {
-        original: ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableInputPrimitive & {
+        original: typeof DecoratableInputPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element) & {
-        original: ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableInputPrimitive & {
+        original: typeof DecoratableInputPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Input/InputPrimitive.stories.d.ts

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

package/Input/InputPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input/InputPrimitive.stories.js","sources":["../../src/Input/InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\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 WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light 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 text-neutral-light 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 text-neutral-light 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"],"names":["meta","InputPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","NotificationsIcon","WithEndIcon","CalendarIcon","WithStartAndEndIcons","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange"],"mappings":"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"}
+{"version":3,"file":"Input/InputPrimitive.stories.js","sources":["../../src/Input/InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\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 WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light 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 text-neutral-light 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 text-neutral-light 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"],"names":["meta","InputPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","NotificationsIcon","WithEndIcon","CalendarIcon","WithStartAndEndIcons","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange"],"mappings":"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"}

package/Label/Label.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { Label as LabelPrimitive } from "radix-ui";
 import { type VariantProps } from "../utils.js";
 declare const labelVariants: (props?: ({
-    weight?: "strong" | "light" | null | undefined;
+    weight?: "light" | "strong" | null | undefined;
     disabled?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -14,21 +14,22 @@ interface LabelProps extends Omit<React.ComponentPropsWithoutRef<typeof LabelPri
     required?: boolean;
     disabled?: boolean;
 }
-declare const Label: (({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null) & {
-    original: ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null;
+declare const LabelBase: ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null;
+declare const Label: typeof LabelBase & {
+    original: typeof LabelBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null) & {
-        original: ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null;
+    original: typeof LabelBase & {
+        original: typeof LabelBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null) & {
-        original: ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof LabelBase & {
+        original: typeof LabelBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Label/Label.stories.d.ts

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

package/Label/Label.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label/Label.stories.js","sources":["../../src/Label/Label.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Label } from \"./Label.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Label> = {\n    title: \"Components/Form/Label\",\n    component: Label,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Label>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = React.useState(\"\");\n\n        return (\n            <div className=\"mb-4 space-y-2\">\n                <Label {...args} />\n                <Input\n                    id={args.htmlFor}\n                    type=\"text\"\n                    placeholder=\"e.g. John Michael Doe\"\n                    required={args.required}\n                    value={value}\n                    onChange={e => setValue(e.target.value)}\n                />\n            </div>\n        );\n    },\n    args: {\n        text: \"Full Name\",\n        htmlFor: \"full-name\",\n        description: \"As shown on your government-issued ID\",\n        hint: \"Include middle name if applicable\",\n        required: true,\n        disabled: false,\n        weight: \"strong\",\n        value: \"Label value will be shown here\",\n        invalid: false\n    },\n    argTypes: {\n        text: {\n            description: \"The text content of the label\",\n            control: \"text\"\n        },\n        htmlFor: {\n            description: \"The ID of the form element this label is associated with\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional descriptive text shown next to the label\",\n            control: \"text\"\n        },\n        hint: {\n            description: \"Tooltip hint text that appears on hover\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Whether the associated form field is required\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Whether the label should appear disabled\",\n            control: \"boolean\"\n        },\n        weight: {\n            description: \"The font weight of the label text\",\n            control: \"select\",\n            options: [\"strong\", \"light\"]\n        },\n        value: {\n            description: \"Optional value to display on the right side of the label\",\n            control: \"text\"\n        },\n        invalid: {\n            description: \"Whether the label should appear in an invalid state\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        text: \"Test label\",\n        htmlFor: \"test-field\"\n    },\n    render: args => (\n        <>\n            <input type=\"checkbox\" id={args.htmlFor} />\n            <Label {...args} />\n        </>\n    )\n};\n\nexport const LightWeight: Story = {\n    args: {\n        ...Default.args,\n        weight: \"light\"\n    }\n};\n\nexport const Required: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"(description)\"\n    }\n};\n\nexport const WithHint: Story = {\n    args: {\n        ...Default.args,\n        hint: \"This is an additional message in case context to this label needs to be added\"\n    }\n};\n\nexport const WithValue: Story = {\n    args: {\n        ...Default.args,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n\nexport const Disabled: Story = {\n    args: {\n        htmlFor: \"test-field-disabled\",\n        text: \"Test label\",\n        description: \"(description)\",\n        hint: \"This is an additional message in case context to this label needs to be added\",\n        required: true,\n        disabled: true,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n"],"names":["meta","Label","Story","Tooltip","Documentation","args","value","setValue","React","Input","e","Default","LightWeight","Required","WithDescription","WithHint","WithValue","Disabled"],"mappings":";;;;AAOA,MAAMA,OAA2B;IAC7B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACC,QAAQ,QAAQ,sBACb,oBAACD,OAAAA;KAGZ;AACL;AAEA,sBAAeF;AAGR,MAAMI,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,MAAAA,QAAc,CAAC;QAEzC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACP,OAAUI,OAAAA,WAAAA,GACX,oBAACI,OAAKA;YACF,IAAIJ,KAAK,OAAO;YAChB,MAAK;YACL,aAAY;YACZ,UAAUA,KAAK,QAAQ;YACvB,OAAOC;YACP,UAAUI,CAAAA,IAAKH,SAASG,EAAE,MAAM,CAAC,KAAK;;IAItD;IACA,MAAM;QACF,MAAM;QACN,SAAS;QACT,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,QAAQ;QACR,OAAO;QACP,SAAS;IACb;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,QAAQ;YACJ,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAQ;QAChC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,MAAM;QACN,SAAS;IACb;IACA,QAAQN,CAAAA,OAAAA,WAAAA,GACJ,wDACI,oBAAC;YAAM,MAAK;YAAW,IAAIA,KAAK,OAAO;0BACvC,oBAACJ,OAAUI;AAGvB;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,QAAQ;IACZ;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,YAAmB;IAC5B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;IACX;IACA,QAAQN,CAAAA,OAAAA,WAAAA,GACJ,oBAAC;YAAI,WAAU;yBACX,oBAACJ,OAAUI;AAGvB;AAEO,MAAMY,WAAkB;IAC3B,MAAM;QACF,SAAS;QACT,MAAM;QACN,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;IACX;IACA,QAAQZ,CAAAA,OAAAA,WAAAA,GACJ,oBAAC;YAAI,WAAU;yBACX,oBAACJ,OAAUI;AAGvB"}
+{"version":3,"file":"Label/Label.stories.js","sources":["../../src/Label/Label.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Label } from \"./Label.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Label> = {\n    title: \"Components/Form/Label\",\n    component: Label,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Label>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = React.useState(\"\");\n\n        return (\n            <div className=\"mb-4 space-y-2\">\n                <Label {...args} />\n                <Input\n                    id={args.htmlFor}\n                    type=\"text\"\n                    placeholder=\"e.g. John Michael Doe\"\n                    required={args.required}\n                    value={value}\n                    onChange={e => setValue(e.target.value)}\n                />\n            </div>\n        );\n    },\n    args: {\n        text: \"Full Name\",\n        htmlFor: \"full-name\",\n        description: \"As shown on your government-issued ID\",\n        hint: \"Include middle name if applicable\",\n        required: true,\n        disabled: false,\n        weight: \"strong\",\n        value: \"Label value will be shown here\",\n        invalid: false\n    },\n    argTypes: {\n        text: {\n            description: \"The text content of the label\",\n            control: \"text\"\n        },\n        htmlFor: {\n            description: \"The ID of the form element this label is associated with\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional descriptive text shown next to the label\",\n            control: \"text\"\n        },\n        hint: {\n            description: \"Tooltip hint text that appears on hover\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Whether the associated form field is required\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Whether the label should appear disabled\",\n            control: \"boolean\"\n        },\n        weight: {\n            description: \"The font weight of the label text\",\n            control: \"select\",\n            options: [\"strong\", \"light\"]\n        },\n        value: {\n            description: \"Optional value to display on the right side of the label\",\n            control: \"text\"\n        },\n        invalid: {\n            description: \"Whether the label should appear in an invalid state\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        text: \"Test label\",\n        htmlFor: \"test-field\"\n    },\n    render: args => (\n        <>\n            <input type=\"checkbox\" id={args.htmlFor} />\n            <Label {...args} />\n        </>\n    )\n};\n\nexport const LightWeight: Story = {\n    args: {\n        ...Default.args,\n        weight: \"light\"\n    }\n};\n\nexport const Required: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"(description)\"\n    }\n};\n\nexport const WithHint: Story = {\n    args: {\n        ...Default.args,\n        hint: \"This is an additional message in case context to this label needs to be added\"\n    }\n};\n\nexport const WithValue: Story = {\n    args: {\n        ...Default.args,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n\nexport const Disabled: Story = {\n    args: {\n        htmlFor: \"test-field-disabled\",\n        text: \"Test label\",\n        description: \"(description)\",\n        hint: \"This is an additional message in case context to this label needs to be added\",\n        required: true,\n        disabled: true,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n"],"names":["meta","Label","Story","Tooltip","Documentation","args","value","setValue","React","Input","e","Default","LightWeight","Required","WithDescription","WithHint","WithValue","Disabled"],"mappings":";;;;AAOA,MAAMA,OAA2B;IAC7B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACC,QAAQ,QAAQ,sBACb,oBAACD,OAAAA;KAGZ;AACL;AAEA,sBAAeF;AAGR,MAAMI,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,MAAAA,QAAc,CAAC;QAEzC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACP,OAAUI,OAAAA,WAAAA,GACX,oBAACI,OAAKA;YACF,IAAIJ,KAAK,OAAO;YAChB,MAAK;YACL,aAAY;YACZ,UAAUA,KAAK,QAAQ;YACvB,OAAOC;YACP,UAAUI,CAAAA,IAAKH,SAASG,EAAE,MAAM,CAAC,KAAK;;IAItD;IACA,MAAM;QACF,MAAM;QACN,SAAS;QACT,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,QAAQ;QACR,OAAO;QACP,SAAS;IACb;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,QAAQ;YACJ,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAQ;QAChC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,MAAM;QACN,SAAS;IACb;IACA,QAAQN,CAAAA,OAAAA,WAAAA,GACJ,wDACI,oBAAC;YAAM,MAAK;YAAW,IAAIA,KAAK,OAAO;0BACvC,oBAACJ,OAAUI;AAGvB;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,QAAQ;IACZ;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,YAAmB;IAC5B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;IACX;IACA,QAAQN,CAAAA,OAAAA,WAAAA,GACJ,oBAAC;YAAI,WAAU;yBACX,oBAACJ,OAAUI;AAGvB;AAEO,MAAMY,WAAkB;IAC3B,MAAM;QACF,SAAS;QACT,MAAM;QACN,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;IACX;IACA,QAAQZ,CAAAA,OAAAA,WAAAA,GACJ,oBAAC;YAAI,WAAU;yBACX,oBAACJ,OAAUI;AAGvB"}

package/Label/components/LabelValue.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const labelValueVariants: (props?: ({
-    weight?: "strong" | "light" | null | undefined;
+    weight?: "light" | "strong" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface LabelValueProps extends VariantProps<typeof labelValueVariants> {

package/Link/Link.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 import { LinkComponentProps } from "./LinkComponent.js";
-declare const linkVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "inherit" | null | undefined;
-    variant?: "primary" | "secondary" | "primary-negative" | "secondary-negative" | null | undefined;
+export declare const linkVariants: (props?: ({
+    size?: "inherit" | "lg" | "md" | "sm" | "xl" | null | undefined;
+    variant?: "primary" | "primary-negative" | "secondary" | "secondary-negative" | null | undefined;
     underline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type LinkProps = LinkComponentProps & VariantProps<typeof linkVariants> & {

package/Link/Link.js

@@ -51,6 +51,6 @@ function LinkBase({ size, variant, underline, className, children, ...rest }) {
     }, children);
 }
 const Link = makeDecoratable("Link", LinkBase);
-export { Link };
+export { Link, linkVariants };
 
 //# sourceMappingURL=Link.js.map

package/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link/Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils.js\";\nimport { useAdminUi } from \"~/index.js\";\nimport { LinkComponentProps } from \"./LinkComponent.js\";\n\nconst linkVariants = cva(\"font-sans rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"text-sm\",\n            md: \"text-md\",\n            lg: \"text-lg\",\n            xl: \"text-xl\"\n        },\n        variant: {\n            primary: [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"text-neutral-light\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"underline hover:no-underline\",\n            false: \"hover:underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\nexport type LinkProps = LinkComponentProps &\n    VariantProps<typeof linkVariants> & {\n        disabled?: boolean;\n    };\n\nfunction LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps) {\n    const { linkComponent: LinkComponent } = useAdminUi();\n    return (\n        <LinkComponent\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </LinkComponent>\n    );\n}\n\nexport const Link = makeDecoratable(\"Link\", LinkBase);\n"],"names":["linkVariants","cva","LinkBase","size","variant","underline","className","children","rest","LinkComponent","useAdminUi","cn","Link","makeDecoratable"],"mappings":";;;AAKA,MAAMA,eAAeC,IAAI,wBAAwB;IAC7C,UAAU;QACN,MAAM;YACF,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,SAAS;gBACL;gBACA;aACH;YACD,WAAW;gBACP;gBACA;aACH;YACD,oBAAoB;gBAChB;gBACA;aACH;YACD,sBAAsB;gBAClB;gBACA;aACH;QACL;QACA,WAAW;YACP,MAAM;YACN,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;QACT,WAAW;IACf;AACJ;AAOA,SAASC,SAAS,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAiB;IACnF,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IACzC,OAAO,WAAP,GACI,oBAACD,eAAAA;QACI,GAAGD,IAAI;QACR,WAAWG,GAAGX,aAAa;YAAEG;YAAMC;YAASC;QAAU,IAAIC;OAEzDC;AAGb;AAEO,MAAMK,OAAOC,gBAAgB,QAAQX"}
+{"version":3,"file":"Link/Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils.js\";\nimport { useAdminUi } from \"~/index.js\";\nimport { LinkComponentProps } from \"./LinkComponent.js\";\n\nexport const linkVariants = cva(\"font-sans rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"text-sm\",\n            md: \"text-md\",\n            lg: \"text-lg\",\n            xl: \"text-xl\"\n        },\n        variant: {\n            primary: [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"text-neutral-light\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"underline hover:no-underline\",\n            false: \"hover:underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\nexport type LinkProps = LinkComponentProps &\n    VariantProps<typeof linkVariants> & {\n        disabled?: boolean;\n    };\n\nfunction LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps) {\n    const { linkComponent: LinkComponent } = useAdminUi();\n    return (\n        <LinkComponent\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </LinkComponent>\n    );\n}\n\nexport const Link = makeDecoratable(\"Link\", LinkBase);\n"],"names":["linkVariants","cva","LinkBase","size","variant","underline","className","children","rest","LinkComponent","useAdminUi","cn","Link","makeDecoratable"],"mappings":";;;AAKO,MAAMA,eAAeC,IAAI,wBAAwB;IACpD,UAAU;QACN,MAAM;YACF,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,SAAS;gBACL;gBACA;aACH;YACD,WAAW;gBACP;gBACA;aACH;YACD,oBAAoB;gBAChB;gBACA;aACH;YACD,sBAAsB;gBAClB;gBACA;aACH;QACL;QACA,WAAW;YACP,MAAM;YACN,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;QACT,WAAW;IACf;AACJ;AAOA,SAASC,SAAS,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAiB;IACnF,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IACzC,OAAO,WAAP,GACI,oBAACD,eAAAA;QACI,GAAGD,IAAI;QACR,WAAWG,GAAGX,aAAa;YAAEG;YAAMC;YAASC;QAAU,IAAIC;OAEzDC;AAGb;AAEO,MAAMK,OAAOC,gBAAgB,QAAQX"}

package/Link/Link.stories.d.ts

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

package/Link/Link.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link/Link.stories.js","sources":["../../src/Link/Link.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Link } from \"./Link.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { AdminUiProvider } from \"~/AdminUiProvider/index.js\";\nimport { LinkComponentProps } from \"~/Link/LinkComponent.js\";\n\nconst NoopLinkComponent = ({ to, ...props }: LinkComponentProps) => {\n    return (\n        <a\n            href={to}\n            {...props}\n            onClick={e => {\n                e.preventDefault();\n            }}\n        />\n    );\n};\n\nconst meta: Meta<typeof Link> = {\n    title: \"Components/Link\",\n    component: Link,\n    decorators: [\n        (Story: React.ComponentType) => (\n            <AdminUiProvider linkComponent={NoopLinkComponent}>\n                <Story />\n            </AdminUiProvider>\n        )\n    ],\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\"] }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Default: Story = {\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkXl: Story = {\n    args: {\n        size: \"xl\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkLg: Story = {\n    args: {\n        size: \"lg\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkMd: Story = {\n    args: {\n        size: \"md\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkSm: Story = {\n    args: {\n        size: \"sm\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const InheritedSize: Story = {\n    name: \"Link with inherited size\",\n    render: linkProps => {\n        return (\n            <Text>\n                <Text size=\"lg\">\n                    Size of this text is set to large, so,&nbsp;\n                    <Link {...linkProps}>this link&apos;s</Link> size is also automatically set to\n                    large.\n                </Text>\n            </Text>\n        );\n    },\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const WithUnderline: Story = {\n    args: {\n        underline: true,\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const PrimaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"primary-negative\"\n    }\n};\n\nexport const SecondaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"secondary-negative\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        to: \"#\",\n        variant: \"primary\",\n        size: \"md\",\n        underline: false,\n        disabled: false,\n        children: \"This is a link\"\n    },\n    argTypes: {\n        to: {\n            description:\n                \"The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`\",\n            control: \"text\",\n            defaultValue: \"#\"\n        },\n        variant: {\n            description: \"Visual style of the link\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"primary-negative\", \"secondary-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size of the link text\",\n            control: \"select\",\n            options: [\"inherit\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"inherit\"\n        },\n        underline: {\n            description: \"Whether the link should be underlined by default\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Whether the link is disabled\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        children: {\n            description: \"The content of the link. It can be any valid React node.\",\n            control: \"text\",\n            defaultValue: \"This is a link\"\n        }\n    }\n};\n"],"names":["NoopLinkComponent","to","props","e","meta","Link","Story","AdminUiProvider","Default","LinkXl","LinkLg","LinkMd","LinkSm","InheritedSize","linkProps","Text","WithUnderline","PrimaryNegative","args","SecondaryNegative","Documentation"],"mappings":";;;;AAOA,MAAMA,oBAAoB,CAAC,EAAEC,EAAE,EAAE,GAAGC,OAA2B,GACpD,WAAP,GACI,oBAAC;QACG,MAAMD;QACL,GAAGC,KAAK;QACT,SAASC,CAAAA;YACLA,EAAE,cAAc;QACpB;;AAKZ,MAAMC,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAACC,iBAAeA;gBAAC,eAAeP;6BAC5B,oBAACM,OAAAA;KAGZ;IACD,UAAU;QACN,MAAM;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QAAC;QAC7D,SAAS;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAW;aAAY;QAAC;IACpE;AACJ;AAEA,qBAAeF;AAIR,MAAMI,UAAiB;IAC1B,MAAM;QACF,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;IACN,QAAQC,CAAAA,YACG,WAAP,GACI,oBAACC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,MAAIA;YAAC,MAAK;WAAK,4DAEZ,oBAACV,MAASS,WAAW,gBAAuB;IAM5D,MAAM;QACF,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,WAAW;QACX,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,kBAAyB;IAClC,YAAY;QACRX,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,QAAQY,CAAAA,OACG,WAAP,GACI,oBAACH,MAAIA,MAAC,wBACI,oBAACV,MAASa,MAAM,yBAA2B;IAK7D,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMW,oBAA2B;IACpC,YAAY;QACRb,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,QAAQY,CAAAA,OACG,WAAP,GACI,oBAACH,MAAIA,MAAC,wBACI,oBAACV,MAASa,MAAM,yBAA2B;IAK7D,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,IAAI;QACJ,SAAS;QACT,MAAM;QACN,WAAW;QACX,UAAU;QACV,UAAU;IACd;IACA,UAAU;QACN,IAAI;YACA,aACI;YACJ,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAoB;aAAqB;YAC3E,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAM;gBAAM;gBAAM;aAAK;YAC5C,cAAc;QAClB;QACA,WAAW;YACP,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;IACJ;AACJ"}
+{"version":3,"file":"Link/Link.stories.js","sources":["../../src/Link/Link.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Link } from \"./Link.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { AdminUiProvider } from \"~/AdminUiProvider/index.js\";\nimport { LinkComponentProps } from \"~/Link/LinkComponent.js\";\n\nconst NoopLinkComponent = ({ to, ...props }: LinkComponentProps) => {\n    return (\n        <a\n            href={to}\n            {...props}\n            onClick={e => {\n                e.preventDefault();\n            }}\n        />\n    );\n};\n\nconst meta: Meta<typeof Link> = {\n    title: \"Components/Link\",\n    component: Link,\n    decorators: [\n        (Story: React.ComponentType) => (\n            <AdminUiProvider linkComponent={NoopLinkComponent}>\n                <Story />\n            </AdminUiProvider>\n        )\n    ],\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\"] }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Default: Story = {\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkXl: Story = {\n    args: {\n        size: \"xl\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkLg: Story = {\n    args: {\n        size: \"lg\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkMd: Story = {\n    args: {\n        size: \"md\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkSm: Story = {\n    args: {\n        size: \"sm\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const InheritedSize: Story = {\n    name: \"Link with inherited size\",\n    render: linkProps => {\n        return (\n            <Text>\n                <Text size=\"lg\">\n                    Size of this text is set to large, so,&nbsp;\n                    <Link {...linkProps}>this link&apos;s</Link> size is also automatically set to\n                    large.\n                </Text>\n            </Text>\n        );\n    },\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const WithUnderline: Story = {\n    args: {\n        underline: true,\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const PrimaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"primary-negative\"\n    }\n};\n\nexport const SecondaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"secondary-negative\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        to: \"#\",\n        variant: \"primary\",\n        size: \"md\",\n        underline: false,\n        disabled: false,\n        children: \"This is a link\"\n    },\n    argTypes: {\n        to: {\n            description:\n                \"The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`\",\n            control: \"text\",\n            defaultValue: \"#\"\n        },\n        variant: {\n            description: \"Visual style of the link\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"primary-negative\", \"secondary-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size of the link text\",\n            control: \"select\",\n            options: [\"inherit\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"inherit\"\n        },\n        underline: {\n            description: \"Whether the link should be underlined by default\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Whether the link is disabled\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        children: {\n            description: \"The content of the link. It can be any valid React node.\",\n            control: \"text\",\n            defaultValue: \"This is a link\"\n        }\n    }\n};\n"],"names":["NoopLinkComponent","to","props","e","meta","Link","Story","AdminUiProvider","Default","LinkXl","LinkLg","LinkMd","LinkSm","InheritedSize","linkProps","Text","WithUnderline","PrimaryNegative","args","SecondaryNegative","Documentation"],"mappings":";;;;AAOA,MAAMA,oBAAoB,CAAC,EAAEC,EAAE,EAAE,GAAGC,OAA2B,GACpD,WAAP,GACI,oBAAC;QACG,MAAMD;QACL,GAAGC,KAAK;QACT,SAASC,CAAAA;YACLA,EAAE,cAAc;QACpB;;AAKZ,MAAMC,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAACC,iBAAeA;gBAAC,eAAeP;6BAC5B,oBAACM,OAAAA;KAGZ;IACD,UAAU;QACN,MAAM;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QAAC;QAC7D,SAAS;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAW;aAAY;QAAC;IACpE;AACJ;AAEA,qBAAeF;AAIR,MAAMI,UAAiB;IAC1B,MAAM;QACF,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;IACN,QAAQC,CAAAA,YACG,WAAP,GACI,oBAACC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,MAAIA;YAAC,MAAK;WAAK,4DAEZ,oBAACV,MAASS,WAAW,gBAAuB;IAM5D,MAAM;QACF,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,WAAW;QACX,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,kBAAyB;IAClC,YAAY;QACRX,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,QAAQY,CAAAA,OACG,WAAP,GACI,oBAACH,MAAIA,MAAC,wBACI,oBAACV,MAASa,MAAM,yBAA2B;IAK7D,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMW,oBAA2B;IACpC,YAAY;QACRb,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,QAAQY,CAAAA,OACG,WAAP,GACI,oBAACH,MAAIA,MAAC,wBACI,oBAACV,MAASa,MAAM,yBAA2B;IAK7D,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,IAAI;QACJ,SAAS;QACT,MAAM;QACN,WAAW;QACX,UAAU;QACV,UAAU;IACd;IACA,UAAU;QACN,IAAI;YACA,aACI;YACJ,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAoB;aAAqB;YAC3E,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAM;gBAAM;gBAAM;aAAK;YAC5C,cAAc;QAClB;QACA,WAAW;YACP,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;IACJ;AACJ"}

package/List/List.d.ts

@@ -3,26 +3,27 @@ import { type VariantProps } from "../utils.js";
 import { type ListItemProps } from "./components/index.js";
 declare const listVariants: (props?: ({
     variant?: "container" | "underline" | null | undefined;
-    background?: "base" | "transparent" | "light" | null | undefined;
+    background?: "base" | "light" | "transparent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ListProps extends VariantProps<typeof listVariants>, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     children: React.ReactNode;
 }
-declare const List: (({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element) & {
-    original: ({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element;
+declare const DecoratableList: ({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element;
+declare const List: typeof DecoratableList & {
+    original: typeof DecoratableList;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element) & {
-        original: ({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element;
+    original: typeof DecoratableList & {
+        original: typeof DecoratableList;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element) & {
-        original: ({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableList & {
+        original: typeof DecoratableList;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/List/List.stories.d.ts

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

package/List/List.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"List/List.stories.js","sources":["../../src/List/List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChartIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as UserIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { List, type ListItemProps as BaseListItemProps } from \"./List.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\n\nconst meta: Meta<typeof List> = {\n    title: \"Components/List\",\n    component: List,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof List>;\n\ninterface ListItemProps extends Omit<BaseListItemProps, \"title\"> {\n    index: number;\n}\n\nconst ListItem = (props: ListItemProps) => {\n    return <List.Item title={`List item ${props.index}`} {...props} />;\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <ListItem index={1} />\n                <ListItem index={2} />\n                <ListItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithTransparentBackground: Story = {\n    args: {\n        background: \"transparent\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithBaseBackground: Story = {\n    args: {\n        ...Default.args,\n        background: \"base\"\n    }\n};\n\nexport const WithLightBackground: Story = {\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithUnderlineVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"underline\"\n    }\n};\n\nexport const WithContainerVariant: Story = {\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithDescription: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item title=\"Settings\" description=\"Configure application settings\" />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item icon={<UserIcon />} title=\"User Profile\" />\n                <List.Item icon={<SettingsIcon />} title=\"Settings\" />\n                <List.Item icon={<HelpIcon />} title=\"Help & Support\" />\n            </>\n        )\n    }\n};\n\nexport const WithIconsAndDescriptions: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithAvatar: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=1\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=2\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithHandle: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabled: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    disabled={true}\n                    onClick={() => alert(\"This alert won't show because the item is disabled\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActivated: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    activated={true}\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithClickHandlers: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => alert(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSelectedItem: Story = {\n    render: () => {\n        // Using render function to handle state\n        const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n        return (\n            <List>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    selected={selectedIndex === 0}\n                    onClick={() => setSelectedIndex(0)}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    selected={selectedIndex === 1}\n                    onClick={() => setSelectedIndex(1)}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    selected={selectedIndex === 2}\n                    onClick={() => setSelectedIndex(2)}\n                />\n            </List>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"underline\",\n        background: \"base\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the list\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the list\"\n        },\n        children: {\n            description: \"The content of the list. Please refer to the example code for details.\"\n        }\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a List with icons, titles, descriptions, and click handlers.\"\n            }\n        }\n    }\n};\n"],"names":["meta","List","ListItem","props","Default","WithTransparentBackground","UserIcon","SettingsIcon","HelpIcon","Story","WithBaseBackground","WithLightBackground","WithUnderlineVariant","WithContainerVariant","WithDescription","WithIcon","WithIconsAndDescriptions","WithAvatar","Avatar","WithHandle","WithActions","ChartIcon","EditIcon","TrashIcon","OpenIcon","MoreIcon","WithDisabled","alert","WithActivated","console","WithClickHandlers","WithSelectedItem","selectedIndex","setSelectedIndex","React","Documentation"],"mappings":"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"}
+{"version":3,"file":"List/List.stories.js","sources":["../../src/List/List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChartIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as UserIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { List, type ListItemProps as BaseListItemProps } from \"./List.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\n\nconst meta: Meta<typeof List> = {\n    title: \"Components/List\",\n    component: List,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof List>;\n\ninterface ListItemProps extends Omit<BaseListItemProps, \"title\"> {\n    index: number;\n}\n\nconst ListItem = (props: ListItemProps) => {\n    return <List.Item title={`List item ${props.index}`} {...props} />;\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <ListItem index={1} />\n                <ListItem index={2} />\n                <ListItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithTransparentBackground: Story = {\n    args: {\n        background: \"transparent\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithBaseBackground: Story = {\n    args: {\n        ...Default.args,\n        background: \"base\"\n    }\n};\n\nexport const WithLightBackground: Story = {\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithUnderlineVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"underline\"\n    }\n};\n\nexport const WithContainerVariant: Story = {\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithDescription: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item title=\"Settings\" description=\"Configure application settings\" />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item icon={<UserIcon />} title=\"User Profile\" />\n                <List.Item icon={<SettingsIcon />} title=\"Settings\" />\n                <List.Item icon={<HelpIcon />} title=\"Help & Support\" />\n            </>\n        )\n    }\n};\n\nexport const WithIconsAndDescriptions: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithAvatar: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=1\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=2\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithHandle: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabled: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    disabled={true}\n                    onClick={() => alert(\"This alert won't show because the item is disabled\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActivated: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    activated={true}\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithClickHandlers: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => alert(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSelectedItem: Story = {\n    render: () => {\n        // Using render function to handle state\n        const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n        return (\n            <List>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    selected={selectedIndex === 0}\n                    onClick={() => setSelectedIndex(0)}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    selected={selectedIndex === 1}\n                    onClick={() => setSelectedIndex(1)}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    selected={selectedIndex === 2}\n                    onClick={() => setSelectedIndex(2)}\n                />\n            </List>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"underline\",\n        background: \"base\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the list\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the list\"\n        },\n        children: {\n            description: \"The content of the list. Please refer to the example code for details.\"\n        }\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a List with icons, titles, descriptions, and click handlers.\"\n            }\n        }\n    }\n};\n"],"names":["meta","List","ListItem","props","Default","WithTransparentBackground","UserIcon","SettingsIcon","HelpIcon","Story","WithBaseBackground","WithLightBackground","WithUnderlineVariant","WithContainerVariant","WithDescription","WithIcon","WithIconsAndDescriptions","WithAvatar","Avatar","WithHandle","WithActions","ChartIcon","EditIcon","TrashIcon","OpenIcon","MoreIcon","WithDisabled","alert","WithActivated","console","WithClickHandlers","WithSelectedItem","selectedIndex","setSelectedIndex","React","Documentation"],"mappings":";;;;;;;;;;;AAaA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAQf,MAAME,WAAW,CAACC,QACP,WAAP,GAAO,oBAACF,KAAK,IAAI;QAAC,OAAO,CAAC,UAAU,EAAEE,MAAM,KAAK,EAAE;QAAG,GAAGA,KAAK;;AAG3D,MAAMC,UAAiB;IAC1B,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,UAAQA;YAAC,OAAO;0BACjB,oBAACA,UAAQA;YAAC,OAAO;0BACjB,oBAACA,UAAQA;YAAC,OAAO;;IAG7B;AACJ;AAEO,MAAMG,4BAAmC;IAC5C,MAAM;QACF,YAAY;QACZ,UAAU,WAAV,GACI,wDACI,oBAACJ,KAAK,IAAI;YACN,oBAAM,oBAACK,2BAAQA;YACf,OAAM;YACN,aAAY;0BAEhB,oBAACL,KAAK,IAAI;YACN,oBAAM,oBAACM,6BAAYA;YACnB,OAAM;YACN,aAAY;0BAEhB,oBAACN,KAAK,IAAI;YACN,oBAAM,oBAACO,yBAAQA;YACf,OAAM;YACN,aAAY;;IAI5B;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,YAAY;IAChB;AACJ;AAEO,MAAMO,sBAA6B;IACtC,MAAM;QACF,YAAY;QACZ,UAAU,WAAV,GACI,wDACI,oBAACV,KAAK,IAAI;YACN,oBAAM,oBAACK,2BAAQA;YACf,OAAM;YACN,aAAY;0BAEhB,oBAACL,KAAK,IAAI;YACN,oBAAM,oBAACM,6BAAYA;YACnB,OAAM;YACN,aAAY;0BAEhB,oBAACN,KAAK,IAAI;YACN,oBAAM,oBAACO,yBAAQA;YACf,OAAM;YACN,aAAY;;IAI5B;AACJ;AAEO,MAAMI,uBAA8B;IACvC,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMS,uBAA8B;IACvC,MAAM;QACF,SAAS;QACT,UAAU,WAAV,GACI,wDACI,oBAACZ,KAAK,IAAI;YACN,oBAAM,oBAACK,2BAAQA;YACf,OAAM;YACN,aAAY;0BAEhB,oBAACL,KAAK,IAAI;YACN,oBAAM,oBAACM,6BAAYA;YACnB,OAAM;YACN,aAAY;0BAEhB,oBAACN,KAAK,IAAI;YACN,oBAAM,oBAACO,yBAAQA;YACf,OAAM;YACN,aAAY;;IAI5B;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,kBAAyB;IAClC,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACb,KAAK,IAAI;YACN,OAAM;YACN,aAAY;0BAEhB,oBAACA,KAAK,IAAI;YAAC,OAAM;YAAW,aAAY;0BACxC,oBAACA,KAAK,IAAI;YACN,OAAM;YACN,aAAY;;IAI5B;AACJ;AAEO,MAAMc,WAAkB;IAC3B,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACd,KAAK,IAAI;YAAC,oBAAM,oBAACK,2BAAQA;YAAK,OAAM;0BACrC,oBAACL,KAAK,IAAI;YAAC,oBAAM,oBAACM,6BAAYA;YAAK,OAAM;0BACzC,oBAACN,KAAK,IAAI;YAAC,oBAAM,oBAACO,yBAAQA;YAAK,OAAM;;IAGjD;AACJ;AAEO,MAAMQ,2BAAkC;IAC3C,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACf,KAAK,IAAI;YACN,oBAAM,oBAACK,2BAAQA;YACf,OAAM;YACN,aAAY;0BAEhB,oBAACL,KAAK,IAAI;YACN,oBAAM,oBAACM,6BAAYA;YACnB,OAAM;YACN,aAAY;0BAEhB,oBAACN,KAAK,IAAI;YACN,oBAAM,oBAACO,yBAAQA;YACf,OAAM;YACN,aAAY;;IAI5B;AACJ;AAEO,MAAMS,aAAoB;IAC7B,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDACI,oBAACF,UAAQA;YACL,OAAO;YACP,aAAY;YACZ,oBACI,oBAACgB,QAAMA;gBACH,qBACI,oBAACA,OAAO,KAAK;oBAAC,KAAI;oBAAkC,KAAI;;gBAE5D,wBAAU,oBAACA,OAAO,QAAQ,QAAC;;0BAIvC,oBAAChB,UAAQA;YACL,OAAO;YACP,aAAY;YACZ,oBACI,oBAACgB,QAAMA;gBACH,qBACI,oBAACA,OAAO,KAAK;oBAAC,KAAI;oBAAkC,KAAI;;gBAE5D,wBAAU,oBAACA,OAAO,QAAQ,QAAC;;;IAMnD;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDACI,oBAACF,UAAQA;YACL,OAAO;YACP,aAAY;YACZ,sBAAQ,oBAACD,KAAK,IAAI,CAAC,MAAM;0BAE7B,oBAACC,UAAQA;YACL,OAAO;YACP,aAAY;YACZ,sBAAQ,oBAACD,KAAK,IAAI,CAAC,MAAM;;IAIzC;AACJ;AAEO,MAAMmB,cAAqB;IAC9B,GAAGhB,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,UAAQA;YACL,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACD,KAAK,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACoB,gBAASA;gBAAK,OAAO;;YAClD,uBACI,wDACI,oBAACpB,KAAK,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,yBAAQA;8BACjC,oBAACrB,KAAK,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,2BAASA;8BAClC,oBAACtB,KAAK,IAAI,CAAC,MAAM,CAAC,SAAS,uBAC3B,oBAACA,KAAK,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,+BAAQA;8BACjC,oBAACvB,KAAK,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACwB,8BAAQA;;0BAI7C,oBAACvB,UAAQA;YACL,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACD,KAAK,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACoB,gBAASA;gBAAK,OAAO;;YAClD,uBACI,wDACI,oBAACpB,KAAK,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,yBAAQA;8BACjC,oBAACrB,KAAK,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,2BAASA;8BAClC,oBAACtB,KAAK,IAAI,CAAC,MAAM,CAAC,SAAS,uBAC3B,oBAACA,KAAK,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,+BAAQA;8BACjC,oBAACvB,KAAK,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACwB,8BAAQA;;;IAMzD;AACJ;AAEO,MAAMC,eAAsB;IAC/B,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACzB,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,SAAS,IAAM0B,MAAM;0BAEzB,oBAAC1B,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,UAAU;YACV,SAAS,IAAM0B,MAAM;0BAEzB,oBAAC1B,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,SAAS,IAAM0B,MAAM;;IAIrC;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAAC3B,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,WAAW;YACX,SAAS,IAAM4B,QAAQ,GAAG,CAAC;0BAE/B,oBAAC5B,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,SAAS,IAAM4B,QAAQ,GAAG,CAAC;0BAE/B,oBAAC5B,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,SAAS,IAAM4B,QAAQ,GAAG,CAAC;;IAI3C;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAAC7B,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,SAAS,IAAM0B,MAAM;0BAEzB,oBAAC1B,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,SAAS,IAAM0B,MAAM;0BAEzB,oBAAC1B,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,SAAS,IAAM0B,MAAM;;IAIrC;AACJ;AAEO,MAAMI,mBAA0B;IACnC,QAAQ;QAEJ,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,MAAAA,QAAc,CAAC;QAEzD,OAAO,WAAP,GACI,oBAACjC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,UAAU+B,AAAkB,MAAlBA;YACV,SAAS,IAAMC,iBAAiB;0BAEpC,oBAAChC,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,UAAU+B,AAAkB,MAAlBA;YACV,SAAS,IAAMC,iBAAiB;0BAEpC,oBAAChC,KAAK,IAAI;YACN,OAAM;YACN,aAAY;YACZ,UAAU+B,AAAkB,MAAlBA;YACV,SAAS,IAAMC,iBAAiB;;IAIhD;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,YAAY;QACZ,UAAU,WAAV,GACI,wDACI,oBAAClC,KAAK,IAAI;YACN,oBAAM,oBAACK,2BAAQA;YACf,OAAM;YACN,aAAY;YACZ,SAAS,IAAMuB,QAAQ,GAAG,CAAC;0BAE/B,oBAAC5B,KAAK,IAAI;YACN,oBAAM,oBAACM,6BAAYA;YACnB,OAAM;YACN,aAAY;YACZ,SAAS,IAAMsB,QAAQ,GAAG,CAAC;0BAE/B,oBAAC5B,KAAK,IAAI;YACN,oBAAM,oBAACO,yBAAQA;YACf,OAAM;YACN,aAAY;YACZ,SAAS,IAAMqB,QAAQ,GAAG,CAAC;;IAI3C;IACA,UAAU;QACN,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAa;aAAY;YACnC,aAAa;QACjB;QACA,YAAY;YACR,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAS;aAAc;YACzC,aAAa;QACjB;QACA,UAAU;YACN,aAAa;QACjB;IACJ;IACA,YAAY;QACR,MAAM;YACF,aAAa;gBACT,OAAO;YACX;QACJ;IACJ;AACJ"}

package/List/components/ListItem.d.ts

@@ -15,21 +15,22 @@ interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "titl
     colorMark?: string;
     sidePadding?: "md" | "lg";
 }
-declare const ListItem: (({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
-    original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+declare const DecoratableListItem: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+declare const ListItem: typeof DecoratableListItem & {
+    original: typeof DecoratableListItem;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
-        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+    original: typeof DecoratableListItem & {
+        original: typeof DecoratableListItem;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
-        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableListItem & {
+        original: typeof DecoratableListItem;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItemAction.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import type { IconButtonProps } from "../../Button/index.js";
 type ListItemActionProps = IconButtonProps;
-declare const ListItemAction: ((props: ListItemActionProps) => React.JSX.Element) & {
-    original: (props: ListItemActionProps) => React.JSX.Element;
+declare const DecoratableListItemAction: (props: ListItemActionProps) => React.JSX.Element;
+declare const ListItemAction: typeof DecoratableListItemAction & {
+    original: typeof DecoratableListItemAction;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ListItemActionProps) => React.JSX.Element) & {
-        original: (props: ListItemActionProps) => React.JSX.Element;
+    original: typeof DecoratableListItemAction & {
+        original: typeof DecoratableListItemAction;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ListItemActionProps) => React.JSX.Element) & {
-        original: (props: ListItemActionProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableListItemAction & {
+        original: typeof DecoratableListItemAction;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;