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

package/Checkbox/primitives/presenters/CheckboxPresenter.test.js

@@ -1,6 +1,7 @@
-import { CheckboxPresenter } from "./CheckboxPresenter";
+import { CheckboxPresenter } from "./CheckboxPresenter.js";
+import { describe, expect, it, vi } from "vitest";
 describe("CheckboxPresenter", () => {
-  const onCheckedChange = jest.fn();
+  const onCheckedChange = vi.fn();
   it("should return the compatible `vm` based on props", () => {
     const presenter = new CheckboxPresenter();
 

package/Checkbox/primitives/presenters/CheckboxPresenter.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["CheckboxPresenter","describe","onCheckedChange","jest","fn","it","presenter","init","label","expect","vm","item","toEqual","hasLabel","id","checked","toBeTruthy","value","indeterminate","disabled","any","String","changeChecked","toHaveBeenCalledWith"],"sources":["CheckboxPresenter.test.ts"],"sourcesContent":["import { CheckboxPresenter } from \"./CheckboxPresenter\";\n\ndescribe(\"CheckboxPresenter\", () => {\n    const onCheckedChange = jest.fn();\n\n    it(\"should return the compatible `vm` based on props\", () => {\n        const presenter = new CheckboxPresenter();\n\n        // `label`\n        {\n            presenter.init({\n                onCheckedChange,\n                label: \"Label\"\n            });\n            expect(presenter.vm.item?.label).toEqual(\"Label\");\n            expect(presenter.vm.item?.hasLabel).toEqual(true);\n        }\n\n        // `id`\n        {\n            presenter.init({\n                onCheckedChange,\n                id: \"id\"\n            });\n            expect(presenter.vm.item?.id).toEqual(\"id\");\n        }\n\n        // `checked`\n        {\n            presenter.init({\n                onCheckedChange,\n                checked: true\n            });\n            expect(presenter.vm.item?.checked).toBeTruthy();\n        }\n\n        // `value`\n        {\n            presenter.init({\n                onCheckedChange,\n                value: \"value\"\n            });\n            expect(presenter.vm.item?.value).toEqual(\"value\");\n        }\n\n        // `indeterminate`\n        {\n            presenter.init({\n                onCheckedChange,\n                indeterminate: true\n            });\n            expect(presenter.vm.item?.indeterminate).toBeTruthy();\n        }\n\n        // `indeterminate` + `checked`\n        {\n            presenter.init({\n                onCheckedChange,\n                indeterminate: true,\n                checked: false\n            });\n            expect(presenter.vm.item?.indeterminate).toEqual(true);\n        }\n\n        // `disabled`\n        {\n            presenter.init({\n                onCheckedChange,\n                disabled: true\n            });\n            expect(presenter.vm.item?.disabled).toBeTruthy();\n        }\n\n        // default: only mandatory props\n        {\n            presenter.init({\n                onCheckedChange\n            });\n            expect(presenter.vm.item).toEqual({\n                id: expect.any(String),\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: false\n            });\n        }\n    });\n\n    it(\"should call `onCheckedChange` callback when `changeChecked` is called\", () => {\n        const presenter = new CheckboxPresenter();\n        presenter.init({ onCheckedChange });\n        presenter.changeChecked(true);\n        expect(onCheckedChange).toHaveBeenCalledWith(true);\n    });\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["CheckboxPresenter","describe","expect","it","vi","onCheckedChange","fn","presenter","init","label","vm","item","toEqual","hasLabel","id","checked","toBeTruthy","value","indeterminate","disabled","any","String","changeChecked","toHaveBeenCalledWith"],"sources":["CheckboxPresenter.test.ts"],"sourcesContent":["import { CheckboxPresenter } from \"./CheckboxPresenter.js\";\nimport { describe, expect, it, vi } from \"vitest\";\n\ndescribe(\"CheckboxPresenter\", () => {\n    const onCheckedChange = vi.fn();\n\n    it(\"should return the compatible `vm` based on props\", () => {\n        const presenter = new CheckboxPresenter();\n\n        // `label`\n        {\n            presenter.init({\n                onCheckedChange,\n                label: \"Label\"\n            });\n            expect(presenter.vm.item?.label).toEqual(\"Label\");\n            expect(presenter.vm.item?.hasLabel).toEqual(true);\n        }\n\n        // `id`\n        {\n            presenter.init({\n                onCheckedChange,\n                id: \"id\"\n            });\n            expect(presenter.vm.item?.id).toEqual(\"id\");\n        }\n\n        // `checked`\n        {\n            presenter.init({\n                onCheckedChange,\n                checked: true\n            });\n            expect(presenter.vm.item?.checked).toBeTruthy();\n        }\n\n        // `value`\n        {\n            presenter.init({\n                onCheckedChange,\n                value: \"value\"\n            });\n            expect(presenter.vm.item?.value).toEqual(\"value\");\n        }\n\n        // `indeterminate`\n        {\n            presenter.init({\n                onCheckedChange,\n                indeterminate: true\n            });\n            expect(presenter.vm.item?.indeterminate).toBeTruthy();\n        }\n\n        // `indeterminate` + `checked`\n        {\n            presenter.init({\n                onCheckedChange,\n                indeterminate: true,\n                checked: false\n            });\n            expect(presenter.vm.item?.indeterminate).toEqual(true);\n        }\n\n        // `disabled`\n        {\n            presenter.init({\n                onCheckedChange,\n                disabled: true\n            });\n            expect(presenter.vm.item?.disabled).toBeTruthy();\n        }\n\n        // default: only mandatory props\n        {\n            presenter.init({\n                onCheckedChange\n            });\n            expect(presenter.vm.item).toEqual({\n                id: expect.any(String),\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: false\n            });\n        }\n    });\n\n    it(\"should call `onCheckedChange` callback when `changeChecked` is called\", () => {\n        const presenter = new CheckboxPresenter();\n        presenter.init({ onCheckedChange });\n        presenter.changeChecked(true);\n        expect(onCheckedChange).toHaveBeenCalledWith(true);\n    });\n});\n"],"mappings":"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","ignoreList":[]}

package/Checkbox/primitives/presenters/index.d.ts

@@ -1 +1 @@
-export * from "./CheckboxPresenter";
+export * from "./CheckboxPresenter.js";

package/Checkbox/primitives/presenters/index.js

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

package/Checkbox/primitives/presenters/index.js.map

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

package/Checkbox/primitives/useCheckbox.d.ts

@@ -1,7 +1,7 @@
-import type { CheckboxPrimitiveProps } from "./CheckboxPrimitive";
+import type { CheckboxPrimitiveProps } from "./CheckboxPrimitive.js";
 export declare const useCheckbox: (props: CheckboxPrimitiveProps) => {
     vm: {
-        item: import(".").CheckboxItemFormatted | undefined;
+        item: import("./index.js").CheckboxItemFormatted | undefined;
     };
     changeChecked: (checked: boolean) => void;
 };

package/Checkbox/primitives/useCheckbox.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
-import { CheckboxPresenter } from "./presenters/CheckboxPresenter";
+import { CheckboxPresenter } from "./presenters/CheckboxPresenter.js";
 export const useCheckbox = props => {
   const params = useMemo(() => ({
     id: props.id,

package/Checkbox/primitives/useCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","CheckboxPresenter","useCheckbox","props","params","id","label","value","checked","indeterminate","disabled","onCheckedChange","onChange","presenter","init","vm","setVm","changeChecked"],"sources":["useCheckbox.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { CheckboxPrimitiveProps } from \"./CheckboxPrimitive\";\nimport type { CheckboxPresenterParams } from \"./presenters/CheckboxPresenter\";\nimport { CheckboxPresenter } from \"./presenters/CheckboxPresenter\";\n\nexport const useCheckbox = (props: CheckboxPrimitiveProps) => {\n    const params: CheckboxPresenterParams = useMemo(\n        () => ({\n            id: props.id,\n            label: props.label,\n            value: props.value,\n            checked: props.checked,\n            indeterminate: props.indeterminate,\n            disabled: props.disabled,\n            onCheckedChange: props.onChange\n        }),\n        [\n            props.id,\n            props.label,\n            props.value,\n            props.checked,\n            props.indeterminate,\n            props.disabled,\n            props.onChange\n        ]\n    );\n    const presenter = useMemo(() => {\n        const presenter = new CheckboxPresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeChecked: presenter.changeChecked };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,WAAW,GAAIC,KAA6B,IAAK;EAC1D,MAAMC,MAA+B,GAAGN,OAAO,CAC3C,OAAO;IACHO,EAAE,EAAEF,KAAK,CAACE,EAAE;IACZC,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,KAAK,EAAEJ,KAAK,CAACI,KAAK;IAClBC,OAAO,EAAEL,KAAK,CAACK,OAAO;IACtBC,aAAa,EAAEN,KAAK,CAACM,aAAa;IAClCC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;IACxBC,eAAe,EAAER,KAAK,CAACS;EAC3B,CAAC,CAAC,EACF,CACIT,KAAK,CAACE,EAAE,EACRF,KAAK,CAACG,KAAK,EACXH,KAAK,CAACI,KAAK,EACXJ,KAAK,CAACK,OAAO,EACbL,KAAK,CAACM,aAAa,EACnBN,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACS,QAAQ,CAEtB,CAAC;EACD,MAAMC,SAAS,GAAGf,OAAO,CAAC,MAAM;IAC5B,MAAMe,SAAS,GAAG,IAAIZ,iBAAiB,CAAC,CAAC;IACzCY,SAAS,CAACC,IAAI,CAACV,MAAM,CAAC;IACtB,OAAOS,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACE,EAAE,EAAEC,KAAK,CAAC,GAAGjB,QAAQ,CAACc,SAAS,CAACE,EAAE,CAAC;EAE1ClB,SAAS,CAAC,MAAM;IACZgB,SAAS,CAACC,IAAI,CAACV,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBgB,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE,EAAE;IAAEE,aAAa,EAAEJ,SAAS,CAACI;EAAc,CAAC;AACzD,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","autorun","CheckboxPresenter","useCheckbox","props","params","id","label","value","checked","indeterminate","disabled","onCheckedChange","onChange","presenter","init","vm","setVm","changeChecked"],"sources":["useCheckbox.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { CheckboxPrimitiveProps } from \"./CheckboxPrimitive.js\";\nimport type { CheckboxPresenterParams } from \"./presenters/CheckboxPresenter.js\";\nimport { CheckboxPresenter } from \"./presenters/CheckboxPresenter.js\";\n\nexport const useCheckbox = (props: CheckboxPrimitiveProps) => {\n    const params: CheckboxPresenterParams = useMemo(\n        () => ({\n            id: props.id,\n            label: props.label,\n            value: props.value,\n            checked: props.checked,\n            indeterminate: props.indeterminate,\n            disabled: props.disabled,\n            onCheckedChange: props.onChange\n        }),\n        [\n            props.id,\n            props.label,\n            props.value,\n            props.checked,\n            props.indeterminate,\n            props.disabled,\n            props.onChange\n        ]\n    );\n    const presenter = useMemo(() => {\n        const presenter = new CheckboxPresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeChecked: presenter.changeChecked };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,WAAW,GAAIC,KAA6B,IAAK;EAC1D,MAAMC,MAA+B,GAAGN,OAAO,CAC3C,OAAO;IACHO,EAAE,EAAEF,KAAK,CAACE,EAAE;IACZC,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,KAAK,EAAEJ,KAAK,CAACI,KAAK;IAClBC,OAAO,EAAEL,KAAK,CAACK,OAAO;IACtBC,aAAa,EAAEN,KAAK,CAACM,aAAa;IAClCC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;IACxBC,eAAe,EAAER,KAAK,CAACS;EAC3B,CAAC,CAAC,EACF,CACIT,KAAK,CAACE,EAAE,EACRF,KAAK,CAACG,KAAK,EACXH,KAAK,CAACI,KAAK,EACXJ,KAAK,CAACK,OAAO,EACbL,KAAK,CAACM,aAAa,EACnBN,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACS,QAAQ,CAEtB,CAAC;EACD,MAAMC,SAAS,GAAGf,OAAO,CAAC,MAAM;IAC5B,MAAMe,SAAS,GAAG,IAAIZ,iBAAiB,CAAC,CAAC;IACzCY,SAAS,CAACC,IAAI,CAACV,MAAM,CAAC;IACtB,OAAOS,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACE,EAAE,EAAEC,KAAK,CAAC,GAAGjB,QAAQ,CAACc,SAAS,CAACE,EAAE,CAAC;EAE1ClB,SAAS,CAAC,MAAM;IACZgB,SAAS,CAACC,IAAI,CAACV,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBgB,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE,EAAE;IAAEE,aAAa,EAAEJ,SAAS,CAACI;EAAc,CAAC;AACzD,CAAC","ignoreList":[]}

package/CheckboxGroup/CheckboxGroup.d.ts

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

package/CheckboxGroup/CheckboxGroup.js

@@ -1,13 +1,14 @@
 import React, { useMemo } from "react";
-import { makeDecoratable } from "../utils";
-import { CheckboxGroupPrimitive } from "./primitives/CheckboxGroupPrimitive";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+import { makeDecoratable } from "../utils.js";
+import { CheckboxGroupPrimitive } from "./primitives/CheckboxGroupPrimitive.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 const DecoratableCheckboxGroup = ({
   label,
   description,
   note,
   required,
   disabled,
+  hint,
   validation,
   ...props
 }) => {
@@ -17,22 +18,25 @@ const DecoratableCheckboxGroup = ({
   } = validation || {};
   const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
+    hint: hint,
     required: required,
     disabled: disabled,
     invalid: invalid
   }), /*#__PURE__*/React.createElement(FormComponentDescription, {
     text: description,
     disabled: disabled,
-    className: "wby-mb-xs-plus"
+    className: "mb-xs-plus"
   }), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
     text: validationMessage,
     invalid: invalid,
     disabled: disabled,
-    className: "wby-mt-none wby-mb-xs-plus"
-  }), /*#__PURE__*/React.createElement(CheckboxGroupPrimitive, props), /*#__PURE__*/React.createElement(FormComponentNote, {
+    className: "mt-none mb-xs-plus"
+  }), /*#__PURE__*/React.createElement(CheckboxGroupPrimitive, Object.assign({
+    disabled: disabled
+  }, props)), /*#__PURE__*/React.createElement(FormComponentNote, {
     text: note,
     disabled: disabled
   }));

package/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","makeDecoratable","CheckboxGroupPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableCheckboxGroup","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","CheckboxGroup"],"sources":["CheckboxGroup.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { CheckboxGroupPrimitiveProps } from \"./primitives/CheckboxGroupPrimitive\";\nimport { CheckboxGroupPrimitive } from \"./primitives/CheckboxGroupPrimitive\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype CheckboxGroupProps = CheckboxGroupPrimitiveProps & FormComponentProps;\n\nconst DecoratableCheckboxGroup = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: CheckboxGroupProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className={\"wby-mb-xs-plus\"}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className={\"wby-mt-none wby-mb-xs-plus\"}\n            />\n            <CheckboxGroupPrimitive {...props} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst CheckboxGroup = makeDecoratable(\"CheckboxGroup\", DecoratableCheckboxGroup);\n\nexport { CheckboxGroup };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,sBAAsB;AAE/B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,wBAAwB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACa,CAAC,KAAK;EACtB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGnB,OAAO,CAAC,MAAMgB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzBtB,KAAA,CAAAqB,aAAA,CAACf,kBAAkB;IACfiB,IAAI,EAAEd,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFpB,KAAA,CAAAqB,aAAA,CAACjB,wBAAwB;IACrBmB,IAAI,EAAEb,WAAY;IAClBG,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAE;EAAiB,CAC/B,CAAC,eACFtB,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAE;EAA6B,CAC3C,CAAC,eACFtB,KAAA,CAAAqB,aAAA,CAAClB,sBAAsB,EAAKY,KAAQ,CAAC,eACrCf,KAAA,CAAAqB,aAAA,CAACd,iBAAiB;IAACgB,IAAI,EAAEZ,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMW,aAAa,GAAGtB,eAAe,CAAC,eAAe,EAAEM,wBAAwB,CAAC;AAEhF,SAASgB,aAAa","ignoreList":[]}
+{"version":3,"names":["React","useMemo","makeDecoratable","CheckboxGroupPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableCheckboxGroup","label","description","note","required","disabled","hint","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","CheckboxGroup"],"sources":["CheckboxGroup.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { CheckboxGroupPrimitiveProps } from \"./primitives/CheckboxGroupPrimitive.js\";\nimport { CheckboxGroupPrimitive } from \"./primitives/CheckboxGroupPrimitive.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype CheckboxGroupProps = CheckboxGroupPrimitiveProps & FormComponentProps;\n\nconst DecoratableCheckboxGroup = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    hint,\n    validation,\n    ...props\n}: CheckboxGroupProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className={\"mb-xs-plus\"}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className={\"mt-none mb-xs-plus\"}\n            />\n            <CheckboxGroupPrimitive disabled={disabled} {...props} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst CheckboxGroup = makeDecoratable(\"CheckboxGroup\", DecoratableCheckboxGroup);\n\nexport { CheckboxGroup };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,sBAAsB;AAE/B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,wBAAwB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,UAAU;EACV,GAAGC;AACa,CAAC,KAAK;EACtB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZK,IAAI,EAAEA,IAAK;IACXF,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBQ,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IACrBoB,IAAI,EAAEd,WAAY;IAClBG,QAAQ,EAAEA,QAAS;IACnBU,SAAS,EAAE;EAAa,CAC3B,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBR,QAAQ,EAAEA,QAAS;IACnBU,SAAS,EAAE;EAAqB,CACnC,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACnB,sBAAsB,EAAAsB,MAAA,CAAAC,MAAA;IAACb,QAAQ,EAAEA;EAAS,GAAKG,KAAK,CAAG,CAAC,eACzDhB,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMc,aAAa,GAAGzB,eAAe,CAAC,eAAe,EAAEM,wBAAwB,CAAC;AAEhF,SAASmB,aAAa","ignoreList":[]}

package/CheckboxGroup/CheckboxGroup.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as CheckboxGroupStories from './CheckboxGroup.stories';
+import * as CheckboxGroupStories from "./CheckboxGroup.stories";
 
 <Meta of={CheckboxGroupStories} />
 
@@ -18,8 +18,8 @@ import React, { useState } from "react";
 import { CheckboxGroup } from "@webiny/admin-ui";
 
 const CheckboxGroupExample = () => {
-    const [selectedValues, setSelectedValues] = useState<string[]>([]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [selectedValues, setSelectedValues] = useState<string[]>([]);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newValues: string[]) => {
         setSelectedValues(newValues);
@@ -50,25 +50,26 @@ const CheckboxGroupExample = () => {
             />
         </div>
     );
+
 };
 
 export default CheckboxGroupExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={CheckboxGroupStories.Documentation} exclude={"onChange"}/>
+<Controls of={CheckboxGroupStories.Documentation} exclude={"onChange"} />
 
 ```tsx
 import React, { useState } from "react";
@@ -76,38 +77,38 @@ import React, { useState } from "react";
 import { CheckboxGroup } from "@webiny/admin-ui";
 
 const CheckboxGroupExample = () => {
-    const [selectedValues, setSelectedValues] = useState<string[]>([]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newValues: string[]) => {
-        setSelectedValues(newValues);
-
-        // Simple required validation
-        if (!newValues || newValues.length === 0) {
-            setValidation({ isValid: false, message: "Please select at least one option." });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <div>
-            <CheckboxGroup
-                label="Select your preferences"
-                description="Choose one or more options."
-                note="Note: You can select multiple values."
-                required={true}
-                items={[
-                    { label: "Value 1", value: "value-1" },
-                    { label: "Value 2", value: "value-2" },
-                    { label: "Value 3", value: "value-3" }
-                ]}
-                value={selectedValues}
-                onChange={handleChange}
-                validation={validation}
-            />
-        </div>
-    );
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newValues: string[]) => {
+    setSelectedValues(newValues);
+
+    // Simple required validation
+    if (!newValues || newValues.length === 0) {
+      setValidation({ isValid: false, message: "Please select at least one option." });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <div>
+      <CheckboxGroup
+        label="Select your preferences"
+        description="Choose one or more options."
+        note="Note: You can select multiple values."
+        required={true}
+        items={[
+          { label: "Value 1", value: "value-1" },
+          { label: "Value 2", value: "value-2" },
+          { label: "Value 3", value: "value-3" }
+        ]}
+        value={selectedValues}
+        onChange={handleChange}
+        validation={validation}
+      />
+    </div>
+  );
 };
 
 export default CheckboxGroupExample;
@@ -116,10 +117,7 @@ export default CheckboxGroupExample;
 ## Anatomy
 
 ### General
-Checkbox Group input enable users to select a single or multiple items from a list of offered choices. A checkbox input group organizes related checkbox input options together for better clarity and functionality.
-
-<img src="/images/storybook/checkbox-group/general.png" alt="General"/>
-
-
 
+Checkbox Group input enable users to select a single or multiple items from a list of offered choices. A checkbox input group organizes related checkbox input options together for better clarity and functionality.
 
+<img src="/images/storybook/checkbox-group/general.png" alt="General" />

package/CheckboxGroup/CheckboxGroup.stories.d.ts

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

package/CheckboxGroup/CheckboxGroup.stories.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { CheckboxGroup } from "./";
+import { CheckboxGroup } from "./index.js";
 const meta = {
   title: "Components/Form/CheckboxGroup",
   component: CheckboxGroup,
@@ -212,8 +212,7 @@ export const Documentation = {
       control: "object"
     },
     onChange: {
-      description: "Callback function triggered when selection changes",
-      control: "none"
+      description: "Callback function triggered when selection changes"
     }
   }
 };

package/CheckboxGroup/CheckboxGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","CheckboxGroup","meta","title","component","argTypes","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","onChange","Default","items","label","WithLabel","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","selectedValues","setSelectedValues","setValidation","handleChange","newValues","length"],"sources":["CheckboxGroup.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CheckboxGroup } from \"~/CheckboxGroup\";\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            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","CheckboxGroup","meta","title","component","argTypes","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","onChange","Default","items","label","WithLabel","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","selectedValues","setSelectedValues","setValidation","handleChange","newValues","length"],"sources":["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"],"mappings":"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","ignoreList":[]}

package/CheckboxGroup/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./CheckboxGroup";
-export * from "./primitives";
+export * from "./CheckboxGroup.js";
+export * from "./primitives/index.js";

package/CheckboxGroup/index.js

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

package/CheckboxGroup/index.js.map

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

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CheckboxItemDto, CheckboxItemFormatted } from "../../Checkbox";
+import type { CheckboxItemDto, CheckboxItemFormatted } from "../../Checkbox/index.js";
 interface CheckboxGroupPrimitiveProps<TValue = any> {
     /**
      * Array of checkbox items.
@@ -13,28 +13,33 @@ interface CheckboxGroupPrimitiveProps<TValue = any> {
      * Array of selected checkbox values.
      */
     value?: TValue[];
+    /**
+     * Is checkbox group disabled?
+     */
+    disabled?: boolean;
 }
 interface CheckboxGroupPrimitiveVm {
     items: CheckboxItemFormatted[];
 }
 type CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveVm & {
     changeChecked: (value: TValue) => void;
+    disabled?: boolean;
 };
-declare const CheckboxGroupPrimitiveRenderer: (({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-    original: ({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+declare const CheckboxGroupPrimitiveRenderer: (({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
+    original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-        original: ({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+    original: (({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
+        original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-        original: ({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
+        original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -52,7 +57,7 @@ declare const CheckboxGroupPrimitive: ((props: CheckboxGroupPrimitiveProps) => R
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: CheckboxGroupPrimitiveProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: CheckboxGroupPrimitiveProps) => React.JSX.Element) & {
         original: (props: CheckboxGroupPrimitiveProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.js

@@ -1,19 +1,21 @@
 import React from "react";
-import { cn, makeDecoratable } from "../../utils";
-import { CheckboxPrimitiveRenderer } from "../../Checkbox";
-import { useCheckboxGroup } from "./useCheckboxGroup";
+import { cn, makeDecoratable } from "../../utils.js";
+import { CheckboxPrimitiveRenderer } from "../../Checkbox/index.js";
+import { useCheckboxGroup } from "./useCheckboxGroup.js";
 /**
  * Checkbox Group Renderer
  */
 const DecoratableCheckboxGroupPrimitiveRenderer = ({
   items,
-  changeChecked
+  changeChecked,
+  disabled
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-grid wby-gap-sm-extra wby-py-xs-plus")
+    className: cn("grid gap-sm-extra py-xs-plus")
   }, items.map(item => /*#__PURE__*/React.createElement(CheckboxPrimitiveRenderer, Object.assign({
     key: item.id
   }, item, {
+    disabled: disabled ?? item.disabled,
     changeChecked: () => changeChecked(item.value)
   }))));
 };
@@ -28,7 +30,8 @@ const DecoratableCheckboxGroupPrimitive = props => {
     changeChecked
   } = useCheckboxGroup(props);
   return /*#__PURE__*/React.createElement(CheckboxGroupPrimitiveRenderer, Object.assign({}, vm, {
-    changeChecked: changeChecked
+    changeChecked: changeChecked,
+    disabled: props.disabled
   }));
 };
 const CheckboxGroupPrimitive = makeDecoratable("CheckboxGroupPrimitive", DecoratableCheckboxGroupPrimitive);

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","CheckboxPrimitiveRenderer","useCheckboxGroup","DecoratableCheckboxGroupPrimitiveRenderer","items","changeChecked","createElement","className","map","item","Object","assign","key","id","value","CheckboxGroupPrimitiveRenderer","DecoratableCheckboxGroupPrimitive","props","vm","CheckboxGroupPrimitive"],"sources":["CheckboxGroupPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport type { CheckboxItemDto, CheckboxItemFormatted } from \"~/Checkbox\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox\";\nimport { useCheckboxGroup } from \"./useCheckboxGroup\";\n\ninterface CheckboxGroupPrimitiveProps<TValue = any> {\n    /**\n     * Array of checkbox items.\n     */\n    items: CheckboxItemDto[];\n    /**\n     * Callback function called when the checkbox values change.\n     */\n    onChange?: (values: TValue[]) => void;\n    /**\n     * Array of selected checkbox values.\n     */\n    value?: TValue[];\n}\n\ninterface CheckboxGroupPrimitiveVm {\n    items: CheckboxItemFormatted[];\n}\n\ntype CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveVm & {\n    changeChecked: (value: TValue) => void;\n};\n\n/**\n * Checkbox Group Renderer\n */\nconst DecoratableCheckboxGroupPrimitiveRenderer = ({\n    items,\n    changeChecked\n}: CheckboxGroupPrimitiveRendererProps) => {\n    return (\n        <div className={cn(\"wby-grid wby-gap-sm-extra wby-py-xs-plus\")}>\n            {items.map(item => (\n                <CheckboxPrimitiveRenderer\n                    key={item.id}\n                    {...item}\n                    changeChecked={() => changeChecked(item.value)}\n                />\n            ))}\n        </div>\n    );\n};\nconst CheckboxGroupPrimitiveRenderer = makeDecoratable(\n    \"CheckboxGroupPrimitiveRenderer\",\n    DecoratableCheckboxGroupPrimitiveRenderer\n);\n\n/**\n * Checkbox Group\n */\nconst DecoratableCheckboxGroupPrimitive = (props: CheckboxGroupPrimitiveProps) => {\n    const { vm, changeChecked } = useCheckboxGroup(props);\n    return <CheckboxGroupPrimitiveRenderer {...vm} changeChecked={changeChecked} />;\n};\nconst CheckboxGroupPrimitive = makeDecoratable(\n    \"CheckboxGroupPrimitive\",\n    DecoratableCheckboxGroupPrimitive\n);\n\nexport {\n    CheckboxGroupPrimitive,\n    CheckboxGroupPrimitiveRenderer,\n    type CheckboxGroupPrimitiveProps,\n    type CheckboxGroupPrimitiveRendererProps,\n    type CheckboxGroupPrimitiveVm\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAE5B,SAASC,yBAAyB;AAClC,SAASC,gBAAgB;AAyBzB;AACA;AACA;AACA,MAAMC,yCAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC;AACiC,CAAC,KAAK;EACvC,oBACIP,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAER,EAAE,CAAC,0CAA0C;EAAE,GAC1DK,KAAK,CAACI,GAAG,CAACC,IAAI,iBACXX,KAAA,CAAAQ,aAAA,CAACL,yBAAyB,EAAAS,MAAA,CAAAC,MAAA;IACtBC,GAAG,EAAEH,IAAI,CAACI;EAAG,GACTJ,IAAI;IACRJ,aAAa,EAAEA,CAAA,KAAMA,aAAa,CAACI,IAAI,CAACK,KAAK;EAAE,EAClD,CACJ,CACA,CAAC;AAEd,CAAC;AACD,MAAMC,8BAA8B,GAAGf,eAAe,CAClD,gCAAgC,EAChCG,yCACJ,CAAC;;AAED;AACA;AACA;AACA,MAAMa,iCAAiC,GAAIC,KAAkC,IAAK;EAC9E,MAAM;IAAEC,EAAE;IAAEb;EAAc,CAAC,GAAGH,gBAAgB,CAACe,KAAK,CAAC;EACrD,oBAAOnB,KAAA,CAAAQ,aAAA,CAACS,8BAA8B,EAAAL,MAAA,CAAAC,MAAA,KAAKO,EAAE;IAAEb,aAAa,EAAEA;EAAc,EAAE,CAAC;AACnF,CAAC;AACD,MAAMc,sBAAsB,GAAGnB,eAAe,CAC1C,wBAAwB,EACxBgB,iCACJ,CAAC;AAED,SACIG,sBAAsB,EACtBJ,8BAA8B","ignoreList":[]}
+{"version":3,"names":["React","cn","makeDecoratable","CheckboxPrimitiveRenderer","useCheckboxGroup","DecoratableCheckboxGroupPrimitiveRenderer","items","changeChecked","disabled","createElement","className","map","item","Object","assign","key","id","value","CheckboxGroupPrimitiveRenderer","DecoratableCheckboxGroupPrimitive","props","vm","CheckboxGroupPrimitive"],"sources":["CheckboxGroupPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport type { CheckboxItemDto, CheckboxItemFormatted } from \"~/Checkbox/index.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { useCheckboxGroup } from \"./useCheckboxGroup.js\";\n\ninterface CheckboxGroupPrimitiveProps<TValue = any> {\n    /**\n     * Array of checkbox items.\n     */\n    items: CheckboxItemDto[];\n    /**\n     * Callback function called when the checkbox values change.\n     */\n    onChange?: (values: TValue[]) => void;\n    /**\n     * Array of selected checkbox values.\n     */\n    value?: TValue[];\n    /**\n     * Is checkbox group disabled?\n     */\n    disabled?: boolean;\n}\n\ninterface CheckboxGroupPrimitiveVm {\n    items: CheckboxItemFormatted[];\n}\n\ntype CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveVm & {\n    changeChecked: (value: TValue) => void;\n    disabled?: boolean;\n};\n\n/**\n * Checkbox Group Renderer\n */\nconst DecoratableCheckboxGroupPrimitiveRenderer = ({\n    items,\n    changeChecked,\n    disabled\n}: CheckboxGroupPrimitiveRendererProps) => {\n    return (\n        <div className={cn(\"grid gap-sm-extra py-xs-plus\")}>\n            {items.map(item => (\n                <CheckboxPrimitiveRenderer\n                    key={item.id}\n                    {...item}\n                    disabled={disabled ?? item.disabled}\n                    changeChecked={() => changeChecked(item.value)}\n                />\n            ))}\n        </div>\n    );\n};\nconst CheckboxGroupPrimitiveRenderer = makeDecoratable(\n    \"CheckboxGroupPrimitiveRenderer\",\n    DecoratableCheckboxGroupPrimitiveRenderer\n);\n\n/**\n * Checkbox Group\n */\nconst DecoratableCheckboxGroupPrimitive = (props: CheckboxGroupPrimitiveProps) => {\n    const { vm, changeChecked } = useCheckboxGroup(props);\n    return (\n        <CheckboxGroupPrimitiveRenderer\n            {...vm}\n            changeChecked={changeChecked}\n            disabled={props.disabled}\n        />\n    );\n};\nconst CheckboxGroupPrimitive = makeDecoratable(\n    \"CheckboxGroupPrimitive\",\n    DecoratableCheckboxGroupPrimitive\n);\n\nexport {\n    CheckboxGroupPrimitive,\n    CheckboxGroupPrimitiveRenderer,\n    type CheckboxGroupPrimitiveProps,\n    type CheckboxGroupPrimitiveRendererProps,\n    type CheckboxGroupPrimitiveVm\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAE5B,SAASC,yBAAyB;AAClC,SAASC,gBAAgB;AA8BzB;AACA;AACA;AACA,MAAMC,yCAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,aAAa;EACbC;AACiC,CAAC,KAAK;EACvC,oBACIR,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAET,EAAE,CAAC,8BAA8B;EAAE,GAC9CK,KAAK,CAACK,GAAG,CAACC,IAAI,iBACXZ,KAAA,CAAAS,aAAA,CAACN,yBAAyB,EAAAU,MAAA,CAAAC,MAAA;IACtBC,GAAG,EAAEH,IAAI,CAACI;EAAG,GACTJ,IAAI;IACRJ,QAAQ,EAAEA,QAAQ,IAAII,IAAI,CAACJ,QAAS;IACpCD,aAAa,EAAEA,CAAA,KAAMA,aAAa,CAACK,IAAI,CAACK,KAAK;EAAE,EAClD,CACJ,CACA,CAAC;AAEd,CAAC;AACD,MAAMC,8BAA8B,GAAGhB,eAAe,CAClD,gCAAgC,EAChCG,yCACJ,CAAC;;AAED;AACA;AACA;AACA,MAAMc,iCAAiC,GAAIC,KAAkC,IAAK;EAC9E,MAAM;IAAEC,EAAE;IAAEd;EAAc,CAAC,GAAGH,gBAAgB,CAACgB,KAAK,CAAC;EACrD,oBACIpB,KAAA,CAAAS,aAAA,CAACS,8BAA8B,EAAAL,MAAA,CAAAC,MAAA,KACvBO,EAAE;IACNd,aAAa,EAAEA,aAAc;IAC7BC,QAAQ,EAAEY,KAAK,CAACZ;EAAS,EAC5B,CAAC;AAEV,CAAC;AACD,MAAMc,sBAAsB,GAAGpB,eAAe,CAC1C,wBAAwB,EACxBiB,iCACJ,CAAC;AAED,SACIG,sBAAsB,EACtBJ,8BAA8B","ignoreList":[]}

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

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