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

package/CheckboxGroup/CheckboxGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup/CheckboxGroup.stories.js","sources":["../../src/CheckboxGroup/CheckboxGroup.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroup } from \"~/CheckboxGroup/index.js\";\n\nconst meta: Meta<typeof CheckboxGroup> = {\n    title: \"Components/Form/CheckboxGroup\",\n    component: CheckboxGroup,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <CheckboxGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ],\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one of the items!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedValues, setSelectedValues] = useState<string[]>(args.value || []);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.value changes\n        useEffect(() => {\n            setSelectedValues(args.value || []);\n        }, [args.value]);\n\n        const handleChange = (newValues: string[]) => {\n            setSelectedValues(newValues);\n\n            // Simple required validation\n            if (args.required && (!newValues || newValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedValues || selectedValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedValues]);\n\n        return (\n            <CheckboxGroup\n                {...args}\n                value={selectedValues}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select your preferences\",\n        required: true,\n        disabled: false,\n        description: \"Choose one or more options.\",\n        note: \"Note: You can select multiple values.\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [],\n        validation: {\n            isValid: false,\n            message: \"Please select at least one option.\"\n        }\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the checkbox group\",\n            control: \"text\",\n            defaultValue: \"Select your preferences\"\n        },\n        required: {\n            description: \"Makes the checkbox group required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the checkbox group when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox group\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox group\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        items: {\n            description: \"Array of checkbox items with label and value\",\n            control: \"object\"\n        },\n        value: {\n            description: \"Array of selected values\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when selection changes\"\n        }\n    }\n};\n"],"names":["meta","CheckboxGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","selectedValues","setSelectedValues","validation","setValidation","useEffect","handleChange","newValues"],"mappings":"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"}
+{"version":3,"file":"CheckboxGroup/CheckboxGroup.stories.js","sources":["../../src/CheckboxGroup/CheckboxGroup.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CheckboxGroup } from \"~/CheckboxGroup/index.js\";\n\nconst meta: Meta<typeof CheckboxGroup> = {\n    title: \"Components/Form/CheckboxGroup\",\n    component: CheckboxGroup,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <CheckboxGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ],\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one of the items!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedValues, setSelectedValues] = useState<string[]>(args.value || []);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.value changes\n        useEffect(() => {\n            setSelectedValues(args.value || []);\n        }, [args.value]);\n\n        const handleChange = (newValues: string[]) => {\n            setSelectedValues(newValues);\n\n            // Simple required validation\n            if (args.required && (!newValues || newValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedValues || selectedValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedValues]);\n\n        return (\n            <CheckboxGroup\n                {...args}\n                value={selectedValues}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select your preferences\",\n        required: true,\n        disabled: false,\n        description: \"Choose one or more options.\",\n        note: \"Note: You can select multiple values.\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [],\n        validation: {\n            isValid: false,\n            message: \"Please select at least one option.\"\n        }\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the checkbox group\",\n            control: \"text\",\n            defaultValue: \"Select your preferences\"\n        },\n        required: {\n            description: \"Makes the checkbox group required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the checkbox group when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox group\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox group\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        items: {\n            description: \"Array of checkbox items with label and value\",\n            control: \"object\"\n        },\n        value: {\n            description: \"Array of selected values\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when selection changes\"\n        }\n    }\n};\n"],"names":["meta","CheckboxGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","selectedValues","setSelectedValues","validation","setValidation","useEffect","handleChange","newValues"],"mappings":"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"}

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.d.ts

@@ -25,40 +25,48 @@ type CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveV
     changeChecked: (value: TValue) => void;
     disabled?: boolean;
 };
-declare const CheckboxGroupPrimitiveRenderer: (({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-    original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+/**
+ * Checkbox Group Renderer
+ */
+declare const DecoratableCheckboxGroupPrimitiveRenderer: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+declare const CheckboxGroupPrimitiveRenderer: typeof DecoratableCheckboxGroupPrimitiveRenderer & {
+    original: typeof DecoratableCheckboxGroupPrimitiveRenderer;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-        original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+    original: typeof DecoratableCheckboxGroupPrimitiveRenderer & {
+        original: typeof DecoratableCheckboxGroupPrimitiveRenderer;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-        original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableCheckboxGroupPrimitiveRenderer & {
+        original: typeof DecoratableCheckboxGroupPrimitiveRenderer;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-declare const CheckboxGroupPrimitive: ((props: CheckboxGroupPrimitiveProps) => React.JSX.Element) & {
-    original: (props: CheckboxGroupPrimitiveProps) => React.JSX.Element;
+/**
+ * Checkbox Group
+ */
+declare const DecoratableCheckboxGroupPrimitive: (props: CheckboxGroupPrimitiveProps) => React.JSX.Element;
+declare const CheckboxGroupPrimitive: typeof DecoratableCheckboxGroupPrimitive & {
+    original: typeof DecoratableCheckboxGroupPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: CheckboxGroupPrimitiveProps) => React.JSX.Element) & {
-        original: (props: CheckboxGroupPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableCheckboxGroupPrimitive & {
+        original: typeof DecoratableCheckboxGroupPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: CheckboxGroupPrimitiveProps) => React.JSX.Element) & {
-        original: (props: CheckboxGroupPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableCheckboxGroupPrimitive & {
+        original: typeof DecoratableCheckboxGroupPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.d.ts

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

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js","sources":["../../../src/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroupPrimitive } from \"./CheckboxGroupPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof CheckboxGroupPrimitive> = {\n    title: \"Components/Form Primitives/CheckboxGroup\",\n    component: CheckboxGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <CheckboxGroupPrimitive\n                    {...args}\n                    value={values}\n                    onChange={values => setValues(values)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLongLabels: Story = {\n    args: {\n        items: [\n            {\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithSelectedValues: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithDisabledValue: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <CheckboxGroupPrimitive\n                        {...args}\n                        value={values}\n                        onChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues([])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithNumericValues: Story = {\n    args: {\n        ...Default.args,\n        value: [3, 4],\n        items: [\n            {\n                label: \"Number 1\",\n                value: 1\n            },\n            {\n                label: \"Number 2\",\n                value: 2\n            },\n            {\n                label: \"Number 3\",\n                value: 3\n            },\n            {\n                label: \"Number 4\",\n                value: 4\n            },\n            {\n                label: \"Number 5\",\n                value: 5\n            }\n        ]\n    }\n};\n"],"names":["meta","CheckboxGroupPrimitive","args","values","setValues","useState","Default","WithLongLabels","WithSelectedValues","WithDisabledValue","WithExternalValueControl","Button","WithNumericValues"],"mappings":";;;AAKA,MAAMA,OAA4C;IAC9C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;0BAElC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEA,uCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGJ,QAAQ,IAAI;IACnB;IACA,QAAQJ,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;2BAGtC,oBAAC;YAAI,WAAW;yBACZ,oBAACQ,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMP,UAAU,EAAE;2BAEtD,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKD,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEO,MAAMS,oBAA2B;IACpC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;YAAC;YAAG;SAAE;QACb,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}
+{"version":3,"file":"CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js","sources":["../../../src/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CheckboxGroupPrimitive } from \"./CheckboxGroupPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof CheckboxGroupPrimitive> = {\n    title: \"Components/Form Primitives/CheckboxGroup\",\n    component: CheckboxGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <CheckboxGroupPrimitive\n                    {...args}\n                    value={values}\n                    onChange={values => setValues(values)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLongLabels: Story = {\n    args: {\n        items: [\n            {\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithSelectedValues: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithDisabledValue: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <CheckboxGroupPrimitive\n                        {...args}\n                        value={values}\n                        onChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues([])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithNumericValues: Story = {\n    args: {\n        ...Default.args,\n        value: [3, 4],\n        items: [\n            {\n                label: \"Number 1\",\n                value: 1\n            },\n            {\n                label: \"Number 2\",\n                value: 2\n            },\n            {\n                label: \"Number 3\",\n                value: 3\n            },\n            {\n                label: \"Number 4\",\n                value: 4\n            },\n            {\n                label: \"Number 5\",\n                value: 5\n            }\n        ]\n    }\n};\n"],"names":["meta","CheckboxGroupPrimitive","args","values","setValues","useState","Default","WithLongLabels","WithSelectedValues","WithDisabledValue","WithExternalValueControl","Button","WithNumericValues"],"mappings":";;;AAKA,MAAMA,OAA4C;IAC9C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;0BAElC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEA,uCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGJ,QAAQ,IAAI;IACnB;IACA,QAAQJ,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;2BAGtC,oBAAC;YAAI,WAAW;yBACZ,oBAACQ,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMP,UAAU,EAAE;2BAEtD,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKD,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEO,MAAMS,oBAA2B;IACpC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;YAAC;YAAG;SAAE;QACb,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}

package/CodeEditor/CodeEditor.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { CodeEditorPrimitiveProps } from "./CodeEditorPrimitive.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;
-declare const CodeEditor: (({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
+declare const DecoratableCodeEditor: ({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
+declare const CodeEditor: typeof DecoratableCodeEditor & {
+    original: typeof DecoratableCodeEditor;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
+    original: typeof DecoratableCodeEditor & {
+        original: typeof DecoratableCodeEditor;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableCodeEditor & {
+        original: typeof DecoratableCodeEditor;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/CodeEditor/CodeEditor.stories.d.ts

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

package/CodeEditor/CodeEditor.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor/CodeEditor.stories.js","sources":["../../src/CodeEditor/CodeEditor.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CodeEditor } from \"./CodeEditor.js\";\n\nconst meta: Meta<typeof CodeEditor> = {\n    title: \"Components/Form/CodeEditor\",\n    component: CodeEditor,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditor>;\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        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\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(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string | undefined) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!value || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <CodeEditor\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"JSON Configuration\",\n        required: true,\n        disabled: false,\n        description: \"Enter your configuration in JSON format\",\n        note: \"Note: Make sure your JSON is valid\",\n        theme: \"github\",\n        value: '{\\n  \"name\": \"example\",\\n  \"version\": \"1.0.0\"\\n}',\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the code editor\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the code editor when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        theme: {\n            description: \"The theme for the code editor\",\n            control: \"select\",\n            options: [\"github\", \"twilight\", \"chrome\"]\n        },\n        value: {\n            description: \"The code content\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the code changes\"\n        }\n    }\n};\n"],"names":["meta","CodeEditor","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","args","value","setValue","useState","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB,CAAC;AAExB,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,MAAM,CAACI,YAAYC,cAAc,GAAGF,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EG,UAAU;YACNJ,SAASF,KAAK,KAAK,IAAI;QAC3B,GAAG;YAACA,KAAK,KAAK;SAAC;QAEf,MAAMO,eAAe,CAACC;YAClBN,SAASM;YAGLR,KAAK,QAAQ,IAAK,EAACQ,YAAYA,AAAoB,OAApBA,SAAS,IAAI,EAAQ,IACpDH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFN,KAAK,QAAQ,IAAK,EAACC,SAASA,AAAiB,OAAjBA,MAAM,IAAI,EAAQ,IAC9CI,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACL,KAAK,QAAQ;YAAEC;SAAM;QAEzB,OAAO,WAAP,GACI,oBAACX,YAAUA;YACN,GAAGU,IAAI;YACR,OAAOC;YACP,UAAUM;YACV,YAAYH;YACZ,UAAUJ,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,OAAO;QACP,OAAO;QACP,YAAYS;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAY;aAAS;QAC7C;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"CodeEditor/CodeEditor.stories.js","sources":["../../src/CodeEditor/CodeEditor.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CodeEditor } from \"./CodeEditor.js\";\n\nconst meta: Meta<typeof CodeEditor> = {\n    title: \"Components/Form/CodeEditor\",\n    component: CodeEditor,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditor>;\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        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\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(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string | undefined) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!value || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <CodeEditor\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"JSON Configuration\",\n        required: true,\n        disabled: false,\n        description: \"Enter your configuration in JSON format\",\n        note: \"Note: Make sure your JSON is valid\",\n        theme: \"github\",\n        value: '{\\n  \"name\": \"example\",\\n  \"version\": \"1.0.0\"\\n}',\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the code editor\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the code editor when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        theme: {\n            description: \"The theme for the code editor\",\n            control: \"select\",\n            options: [\"github\", \"twilight\", \"chrome\"]\n        },\n        value: {\n            description: \"The code content\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the code changes\"\n        }\n    }\n};\n"],"names":["meta","CodeEditor","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","args","value","setValue","useState","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB,CAAC;AAExB,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,MAAM,CAACI,YAAYC,cAAc,GAAGF,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EG,UAAU;YACNJ,SAASF,KAAK,KAAK,IAAI;QAC3B,GAAG;YAACA,KAAK,KAAK;SAAC;QAEf,MAAMO,eAAe,CAACC;YAClBN,SAASM;YAGLR,KAAK,QAAQ,IAAK,EAACQ,YAAYA,AAAoB,OAApBA,SAAS,IAAI,EAAQ,IACpDH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFN,KAAK,QAAQ,IAAK,EAACC,SAASA,AAAiB,OAAjBA,MAAM,IAAI,EAAQ,IAC9CI,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACL,KAAK,QAAQ;YAAEC;SAAM;QAEzB,OAAO,WAAP,GACI,oBAACX,YAAUA;YACN,GAAGU,IAAI;YACR,OAAOC;YACP,UAAUM;YACV,YAAYH;YACZ,UAAUJ,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,OAAO;QACP,OAAO;QACP,YAAYS;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAY;aAAS;QAC7C;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}

package/CodeEditor/CodeEditorPrimitive.d.ts

@@ -3,21 +3,22 @@ import type { EditorProps } from "@monaco-editor/react";
 interface CodeEditorPrimitiveProps extends Partial<EditorProps> {
     disabled?: boolean;
 }
-declare const CodeEditorPrimitive: (({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
-    original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+declare const DecoratableCodeEditorPrimitive: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+declare const CodeEditorPrimitive: typeof DecoratableCodeEditorPrimitive & {
+    original: typeof DecoratableCodeEditorPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
-        original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableCodeEditorPrimitive & {
+        original: typeof DecoratableCodeEditorPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
-        original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableCodeEditorPrimitive & {
+        original: typeof DecoratableCodeEditorPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/CodeEditor/CodeEditorPrimitive.js

@@ -6,7 +6,9 @@ const monacoOptions = {
     readOnly: true,
     minimap: {
         enabled: false
-    }
+    },
+    scrollBeyondLastLine: false,
+    wordWrap: "on"
 };
 const DecoratableCodeEditorPrimitive = ({ value, disabled, options: optionsInput, ...rest })=>{
     const options = useMemo(()=>({

package/CodeEditor/CodeEditorPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor/CodeEditorPrimitive.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n    disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    }\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={rest.language ?? \"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"names":["monacoOptions","DecoratableCodeEditorPrimitive","value","disabled","optionsInput","rest","options","useMemo","undefined","MonacoEditor","CodeEditorPrimitive","makeDecoratable"],"mappings":";;;AAUA,MAAMA,gBAAmD;IACrD,aAAa;IACb,UAAU;IACV,SAAS;QACL,SAAS;IACb;AACJ;AAEA,MAAMC,iCAAiC,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACR,SAASC,YAAY,EACrB,GAAGC,MACoB;IACvB,MAAMC,UAAUC,QAAQ,IACb;YACH,GAAGP,aAAa;YAChB,GAAGI,YAAY;YACf,aAAaD,AAAaK,WAAbL,WAAyBH,cAAc,WAAW,GAAGG;YAClE,UAAUA,AAAaK,WAAbL,WAAyBH,cAAc,QAAQ,GAAGG;QAChE,IACD;QAACA;KAAS;IACb,OAAO,WAAP,GACI,oBAACM,sBAAYA;QACT,QAAQ;QACP,GAAGJ,IAAI;QACR,UAAUA,KAAK,QAAQ,IAAI;QAC3B,cAAcH;QACd,SAASI;;AAGrB;AAEA,MAAMI,sBAAsBC,gBAAgB,uBAAuBV"}
+{"version":3,"file":"CodeEditor/CodeEditorPrimitive.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n    disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    },\n    scrollBeyondLastLine: false,\n    wordWrap: \"on\"\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={rest.language ?? \"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"names":["monacoOptions","DecoratableCodeEditorPrimitive","value","disabled","optionsInput","rest","options","useMemo","undefined","MonacoEditor","CodeEditorPrimitive","makeDecoratable"],"mappings":";;;AAUA,MAAMA,gBAAmD;IACrD,aAAa;IACb,UAAU;IACV,SAAS;QACL,SAAS;IACb;IACA,sBAAsB;IACtB,UAAU;AACd;AAEA,MAAMC,iCAAiC,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACR,SAASC,YAAY,EACrB,GAAGC,MACoB;IACvB,MAAMC,UAAUC,QAAQ,IACb;YACH,GAAGP,aAAa;YAChB,GAAGI,YAAY;YACf,aAAaD,AAAaK,WAAbL,WAAyBH,cAAc,WAAW,GAAGG;YAClE,UAAUA,AAAaK,WAAbL,WAAyBH,cAAc,QAAQ,GAAGG;QAChE,IACD;QAACA;KAAS;IACb,OAAO,WAAP,GACI,oBAACM,sBAAYA;QACT,QAAQ;QACP,GAAGJ,IAAI;QACR,UAAUA,KAAK,QAAQ,IAAI;QAC3B,cAAcH;QACd,SAASI;;AAGrB;AAEA,MAAMI,sBAAsBC,gBAAgB,uBAAuBV"}

package/CodeEditor/CodeEditorPrimitive.stories.d.ts

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

package/CodeEditor/CodeEditorPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor/CodeEditorPrimitive.stories.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive.js\";\n\nconst meta: Meta<typeof CodeEditorPrimitive> = {\n    title: \"Components/Form Primitives/CodeEditor\",\n    component: CodeEditorPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditorPrimitive>;\n\nexport const Default: Story = {};\n"],"names":["meta","CodeEditorPrimitive","Default"],"mappings":";AAGA,MAAMA,OAAyC;IAC3C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;IACnC;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,oCAAeD;AAGR,MAAME,UAAiB,CAAC"}
+{"version":3,"file":"CodeEditor/CodeEditorPrimitive.stories.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive.js\";\n\nconst meta: Meta<typeof CodeEditorPrimitive> = {\n    title: \"Components/Form Primitives/CodeEditor\",\n    component: CodeEditorPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditorPrimitive>;\n\nexport const Default: Story = {};\n"],"names":["meta","CodeEditorPrimitive","Default"],"mappings":";AAGA,MAAMA,OAAyC;IAC3C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;IACnC;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,oCAAeD;AAGR,MAAME,UAAiB,CAAC"}

package/ColorPicker/ColorPicker.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { ColorPickerPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type ColorPickerProps = ColorPickerPrimitiveProps & FormComponentProps;
-declare const ColorPicker: (({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element;
+declare const DecoratableIconPicker: ({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element;
+declare const ColorPicker: typeof DecoratableIconPicker & {
+    original: typeof DecoratableIconPicker;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element;
+    original: typeof DecoratableIconPicker & {
+        original: typeof DecoratableIconPicker;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableIconPicker & {
+        original: typeof DecoratableIconPicker;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/ColorPicker/ColorPicker.stories.d.ts

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

package/ColorPicker/ColorPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker/ColorPicker.stories.js","sources":["../../src/ColorPicker/ColorPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ColorPicker } from \"./ColorPicker.js\";\n\nconst meta: Meta<typeof ColorPicker> = {\n    title: \"Components/Form/ColorPicker\",\n    component: ColorPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <ColorPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPicker>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\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(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!value || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <ColorPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Brand Color\",\n        required: true,\n        disabled: false,\n        description: \"Select your primary brand color\",\n        note: \"Note: Choose a color that aligns with your brand identity\",\n        value: \"#4285F4\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the color picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the color picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        value: {\n            description: \"The selected color value (hex, RGB, or named color)\",\n            control: \"color\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the color changes\"\n        }\n    }\n};\n"],"names":["meta","ColorPicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IAC1D;AACJ;AAEA,4BAAeJ;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,MAAM,CAACa,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EY,UAAU;YACNb,SAASF,KAAK,KAAK,IAAI;QAC3B,GAAG;YAACA,KAAK,KAAK;SAAC;QAEf,MAAMgB,eAAe,CAACC;YAClBf,SAASe;YAGLjB,KAAK,QAAQ,IAAK,EAACiB,YAAYA,AAAoB,OAApBA,SAAS,IAAI,EAAQ,IACpDH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAwB,KAEjEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFf,KAAK,QAAQ,IAAK,EAACC,SAASA,AAAiB,OAAjBA,MAAM,IAAI,EAAQ,IAC9Ca,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAwB,KAEjEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACd,KAAK,QAAQ;YAAEC;SAAM;QAEzB,OAAO,WAAP,GACI,oBAACF,aAAWA;YACP,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUe;YACV,YAAYH;YACZ,UAAUb,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,OAAO;QACP,YAAYkB;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"ColorPicker/ColorPicker.stories.js","sources":["../../src/ColorPicker/ColorPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ColorPicker } from \"./ColorPicker.js\";\n\nconst meta: Meta<typeof ColorPicker> = {\n    title: \"Components/Form/ColorPicker\",\n    component: ColorPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <ColorPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPicker>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\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(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!value || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <ColorPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Brand Color\",\n        required: true,\n        disabled: false,\n        description: \"Select your primary brand color\",\n        note: \"Note: Choose a color that aligns with your brand identity\",\n        value: \"#4285F4\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the color picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the color picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        value: {\n            description: \"The selected color value (hex, RGB, or named color)\",\n            control: \"color\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the color changes\"\n        }\n    }\n};\n"],"names":["meta","ColorPicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}

package/ColorPicker/primitives/ColorPickerPrimitive.d.ts

@@ -43,21 +43,22 @@ interface ColorPickerPrimitiveProps extends Omit<React.HTMLAttributes<HTMLDivEle
      */
     invalid?: InputPrimitiveProps["invalid"];
 }
-declare const ColorPickerPrimitive: (({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-    original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+declare const DecoratableColorPickerPrimitive: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+declare const ColorPickerPrimitive: typeof DecoratableColorPickerPrimitive & {
+    original: typeof DecoratableColorPickerPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableColorPickerPrimitive & {
+        original: typeof DecoratableColorPickerPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableColorPickerPrimitive & {
+        original: typeof DecoratableColorPickerPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/ColorPicker/primitives/ColorPickerPrimitive.stories.d.ts

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

package/ColorPicker/primitives/ColorPickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker/primitives/ColorPickerPrimitive.stories.js","sources":["../../../src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ColorPickerPrimitive } from \"./ColorPickerPrimitive.js\";\n\nconst meta: Meta<typeof ColorPickerPrimitive> = {\n    title: \"Components/Form Primitives/ColorPicker\",\n    component: ColorPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onChangeComplete: { action: \"onChangeComplete\" },\n        onOpenChange: { action: \"onOpenChange\" }\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                <div className={\"flex items-center justify-center mb-4\"}>\n                    <ColorPickerPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => console.log(\"Value changed:\", value)}\n                        onChangeComplete={value => {\n                            console.log(\"Value change complete:\", value);\n                            setValue(value);\n                        }}\n                    />\n                </div>\n                <div className={\"text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPickerPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\"\n    }\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 WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"#ff0000\"\n    }\n};\n\nexport const WithStartAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"start\"\n    }\n};\n\nexport const WithCenterAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"center\"\n    }\n};\n\nexport const WithEndAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"end\"\n    }\n};\n"],"names":["meta","ColorPickerPrimitive","args","value","setValue","useState","console","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithDefaultValue","WithStartAlign","WithCenterAlign","WithEndAlign"],"mappings":";;AAIA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,kBAAkB;YAAE,QAAQ;QAAmB;QAC/C,cAAc;YAAE,QAAQ;QAAe;IAC3C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC;YAAI,WAAW;yBACZ,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASG,QAAQ,GAAG,CAAC,kBAAkBH;YACjD,kBAAkBA,CAAAA;gBACdG,QAAQ,GAAG,CAAC,0BAA0BH;gBACtCC,SAASD;YACb;2BAGR,oBAAC;YAAI,WAAW;WAAe,0CACH,oBAAC,aAAKA;IAI9C;AACJ;AAEA,qCAAeH;AAGR,MAAMO,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,eAAe,IAAI;QACtB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,sBAA6B;IACtC,MAAM;QACF,GAAGF,aAAa,IAAI;QACpB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMc,iBAAwB;IACjC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMe,kBAAyB;IAClC,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMgB,eAAsB;IAC/B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,OAAO;IACX;AACJ"}
+{"version":3,"file":"ColorPicker/primitives/ColorPickerPrimitive.stories.js","sources":["../../../src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ColorPickerPrimitive } from \"./ColorPickerPrimitive.js\";\n\nconst meta: Meta<typeof ColorPickerPrimitive> = {\n    title: \"Components/Form Primitives/ColorPicker\",\n    component: ColorPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onChangeComplete: { action: \"onChangeComplete\" },\n        onOpenChange: { action: \"onOpenChange\" }\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                <div className={\"flex items-center justify-center mb-4\"}>\n                    <ColorPickerPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => console.log(\"Value changed:\", value)}\n                        onChangeComplete={value => {\n                            console.log(\"Value change complete:\", value);\n                            setValue(value);\n                        }}\n                    />\n                </div>\n                <div className={\"text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPickerPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\"\n    }\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 WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"#ff0000\"\n    }\n};\n\nexport const WithStartAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"start\"\n    }\n};\n\nexport const WithCenterAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"center\"\n    }\n};\n\nexport const WithEndAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"end\"\n    }\n};\n"],"names":["meta","ColorPickerPrimitive","args","value","setValue","useState","console","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithDefaultValue","WithStartAlign","WithCenterAlign","WithEndAlign"],"mappings":";;AAIA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,kBAAkB;YAAE,QAAQ;QAAmB;QAC/C,cAAc;YAAE,QAAQ;QAAe;IAC3C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC;YAAI,WAAW;yBACZ,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASG,QAAQ,GAAG,CAAC,kBAAkBH;YACjD,kBAAkBA,CAAAA;gBACdG,QAAQ,GAAG,CAAC,0BAA0BH;gBACtCC,SAASD;YACb;2BAGR,oBAAC;YAAI,WAAW;WAAe,0CACH,oBAAC,aAAKA;IAI9C;AACJ;AAEA,qCAAeH;AAGR,MAAMO,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,eAAe,IAAI;QACtB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,sBAA6B;IACtC,MAAM;QACF,GAAGF,aAAa,IAAI;QACpB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMc,iBAAwB;IACjC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMe,kBAAyB;IAClC,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMgB,eAAsB;IAC/B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,OAAO;IACX;AACJ"}

package/Command/Command.d.ts

@@ -1,13 +1,15 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
+import { Empty, Group, Input, Item, List, Loading, Separator } from "./components/index.js";
 type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
-declare const Command: (({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => React.JSX.Element) & {
-    Empty: (props: import("./components/Empty.js").EmptyProps) => React.JSX.Element;
-    Group: ({ className, ...props }: import("./components/Group.js").GroupProps) => React.JSX.Element;
-    Input: ({ inputElement, size, inputRef, ...props }: import("./components/Input.js").InputProps) => React.JSX.Element;
-    Item: ({ className, children, selected, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element;
-    List: ({ className, ...props }: import("./components/List.js").ListProps) => React.JSX.Element;
-    Loading: (props: import("./components/Loading.js").LoadingProps) => React.JSX.Element;
-    Separator: (props: import("./components/Separator.js").SeparatorProps) => React.JSX.Element;
+declare const CommandBase: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => React.JSX.Element;
+declare const Command: typeof CommandBase & {
+    Empty: typeof Empty;
+    Group: typeof Group;
+    Input: typeof Input;
+    Item: typeof Item;
+    List: typeof List;
+    Loading: typeof Loading;
+    Separator: typeof Separator;
 };
 export { Command, type CommandProps };

package/Command/components/List.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 type ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
-declare const List: ({ className, ...props }: ListProps) => React.JSX.Element;
+declare const List: ({ className, style, onScroll, ...props }: ListProps) => React.JSX.Element;
 export { List, type ListProps };

package/Command/components/List.js

@@ -1,12 +1,16 @@
 import { Command } from "cmdk";
 import { cn } from "../../utils.js";
+import { ScrollArea } from "../../ScrollArea/index.js";
 import * as __rspack_external_react from "react";
-const List = ({ className, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Command.List, {
-        className: cn([
-            "block max-h-96 w-full py-sm overflow-y-auto overflow-x-hidden bg-neutral-base text-neutral-strong"
-        ], className),
+const List = ({ className, style, onScroll, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(ScrollArea, {
+        className: cn("w-full bg-neutral-base", className),
+        style: style,
+        viewportClassName: "max-h-96 overflow-x-hidden",
+        onViewportScroll: onScroll
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Command.List, {
+        className: "block w-full py-sm text-neutral-strong",
         ...props
-    });
+    }));
 export { List };
 
 //# sourceMappingURL=List.js.map

package/Command/components/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command/components/List.js","sources":["../../../src/Command/components/List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn } from \"~/utils.js\";\n\ntype ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nconst List = ({ className, ...props }: ListProps) => {\n    return (\n        <CommandPrimitive.List\n            className={cn(\n                [\n                    \"block max-h-96 w-full py-sm overflow-y-auto overflow-x-hidden bg-neutral-base text-neutral-strong\"\n                ],\n                className\n            )}\n            {...props}\n        />\n    );\n};\n\nexport { List, type ListProps };\n"],"names":["List","className","props","CommandPrimitive","cn"],"mappings":";;;AAMA,MAAMA,OAAO,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAAkB,GACrC,WAAP,GACI,sCAACC,QAAAA,IAAqB;QAClB,WAAWC,GACP;YACI;SACH,EACDH;QAEH,GAAGC,KAAK"}
+{"version":3,"file":"Command/components/List.js","sources":["../../../src/Command/components/List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\n\ntype ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nconst List = ({ className, style, onScroll, ...props }: ListProps) => {\n    /*\n     * The list scrolls inside a `ScrollArea`, whose scrollbar is an element rather than the\n     * operating system's own, so it can keep focus on the input while it is dragged. Layout and\n     * scroll props go to the scroll area, since that is the element that scrolls now.\n     */\n    return (\n        <ScrollArea\n            className={cn(\"w-full bg-neutral-base\", className)}\n            style={style}\n            viewportClassName={\"max-h-96 overflow-x-hidden\"}\n            onViewportScroll={onScroll}\n        >\n            <CommandPrimitive.List\n                className={\"block w-full py-sm text-neutral-strong\"}\n                {...props}\n            />\n        </ScrollArea>\n    );\n};\n\nexport { List, type ListProps };\n"],"names":["List","className","style","onScroll","props","ScrollArea","cn","CommandPrimitive"],"mappings":";;;;AAOA,MAAMA,OAAO,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAAkB,GAMtD,WAAP,GACI,sCAACC,YAAUA;QACP,WAAWC,GAAG,0BAA0BL;QACxC,OAAOC;QACP,mBAAmB;QACnB,kBAAkBC;qBAElB,sCAACI,QAAAA,IAAqB;QAClB,WAAW;QACV,GAAGH,KAAK"}

package/DataList/DataListModal.d.ts

@@ -2,16 +2,19 @@ import React from "react";
 interface DataListModalContentProps {
     children: React.ReactNode;
 }
+declare const DataListModalContent: ({ children }: DataListModalContentProps) => React.JSX.Element;
 interface DataListModalTriggerProps {
     "data-testid"?: string;
     icon?: React.ReactElement;
 }
+declare const DataListModalTrigger: ({ icon, ...props }: DataListModalTriggerProps) => React.JSX.Element;
 interface DataListModalProps {
     trigger: React.ReactElement;
     content: React.ReactElement;
 }
-declare const DataListModal: ((props: DataListModalProps) => React.JSX.Element | null) & {
-    Trigger: ({ icon, ...props }: DataListModalTriggerProps) => React.JSX.Element;
-    Content: ({ children }: DataListModalContentProps) => React.JSX.Element;
+declare const BaseDataListModal: (props: DataListModalProps) => React.JSX.Element | null;
+declare const DataListModal: typeof BaseDataListModal & {
+    Trigger: typeof DataListModalTrigger;
+    Content: typeof DataListModalContent;
 };
 export { DataListModal, type DataListModalProps, type DataListModalContentProps, type DataListModalTriggerProps };