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

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"Checkbox/primitives/presenters/CheckboxPresenter.test.js","sources":["../../../../src/Checkbox/primitives/presenters/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"],"names":["describe","onCheckedChange","vi","it","presenter","CheckboxPresenter","expect","String"],"mappings":";;AAGAA,SAAS,qBAAqB;IAC1B,MAAMC,kBAAkBC,GAAG,EAAE;IAE7BC,GAAG,oDAAoD;QACnD,MAAMC,YAAY,IAAIC;QAIlBD,UAAU,IAAI,CAAC;YACXH;YACA,OAAO;QACX;QACAK,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,OAAO,CAAC;QACzCE,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,OAAO,CAAC;QAK5CA,UAAU,IAAI,CAAC;YACXH;YACA,IAAI;QACR;QACAK,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,OAAO,CAAC;QAKtCA,UAAU,IAAI,CAAC;YACXH;YACA,SAAS;QACb;QACAK,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,UAAU;QAK7CA,UAAU,IAAI,CAAC;YACXH;YACA,OAAO;QACX;QACAK,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,OAAO,CAAC;QAKzCA,UAAU,IAAI,CAAC;YACXH;YACA,eAAe;QACnB;QACAK,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,UAAU;QAKnDA,UAAU,IAAI,CAAC;YACXH;YACA,eAAe;YACf,SAAS;QACb;QACAK,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,OAAO,CAAC;QAKjDA,UAAU,IAAI,CAAC;YACXH;YACA,UAAU;QACd;QACAK,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,UAAU;QAK9CA,UAAU,IAAI,CAAC;YACXH;QACJ;QACAK,OAAOF,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;YAC9B,IAAIE,OAAO,GAAG,CAACC;YACf,SAAS;YACT,eAAe;YACf,UAAU;YACV,UAAU;QACd;IAER;IAEAJ,GAAG,yEAAyE;QACxE,MAAMC,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEH;QAAgB;QACjCG,UAAU,aAAa,CAAC;QACxBE,OAAOL,iBAAiB,oBAAoB,CAAC;IACjD;AACJ"}

package/Checkbox/primitives/presenters/index.js

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

package/Checkbox/primitives/useCheckbox.js

@@ -1,34 +1,45 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
 import { CheckboxPresenter } from "./presenters/CheckboxPresenter.js";
-export const useCheckbox = props => {
-  const params = useMemo(() => ({
-    id: props.id,
-    label: props.label,
-    value: props.value,
-    checked: props.checked,
-    indeterminate: props.indeterminate,
-    disabled: props.disabled,
-    onCheckedChange: props.onChange
-  }), [props.id, props.label, props.value, props.checked, props.indeterminate, props.disabled, props.onChange]);
-  const presenter = useMemo(() => {
-    const presenter = new CheckboxPresenter();
-    presenter.init(params);
-    return presenter;
-  }, []);
-  const [vm, setVm] = useState(presenter.vm);
-  useEffect(() => {
-    presenter.init(params);
-  }, [params]);
-  useEffect(() => {
-    return autorun(() => {
-      setVm(presenter.vm);
-    });
-  }, [presenter]);
-  return {
-    vm,
-    changeChecked: presenter.changeChecked
-  };
+const useCheckbox = (props)=>{
+    const params = useMemo(()=>({
+            id: props.id,
+            label: props.label,
+            value: props.value,
+            checked: props.checked,
+            indeterminate: props.indeterminate,
+            disabled: props.disabled,
+            onCheckedChange: props.onChange
+        }), [
+        props.id,
+        props.label,
+        props.value,
+        props.checked,
+        props.indeterminate,
+        props.disabled,
+        props.onChange
+    ]);
+    const presenter = useMemo(()=>{
+        const presenter = new CheckboxPresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+    const [vm, setVm] = useState(presenter.vm);
+    useEffect(()=>{
+        presenter.init(params);
+    }, [
+        params
+    ]);
+    useEffect(()=>autorun(()=>{
+            setVm(presenter.vm);
+        }), [
+        presenter
+    ]);
+    return {
+        vm,
+        changeChecked: presenter.changeChecked
+    };
 };
+export { useCheckbox };
 
 //# sourceMappingURL=useCheckbox.js.map

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.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":[]}
+{"version":3,"file":"Checkbox/primitives/useCheckbox.js","sources":["../../../src/Checkbox/primitives/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"],"names":["useCheckbox","props","params","useMemo","presenter","CheckboxPresenter","vm","setVm","useState","useEffect","autorun"],"mappings":";;;AAMO,MAAMA,cAAc,CAACC;IACxB,MAAMC,SAAkCC,QACpC,IAAO;YACH,IAAIF,MAAM,EAAE;YACZ,OAAOA,MAAM,KAAK;YAClB,OAAOA,MAAM,KAAK;YAClB,SAASA,MAAM,OAAO;YACtB,eAAeA,MAAM,aAAa;YAClC,UAAUA,MAAM,QAAQ;YACxB,iBAAiBA,MAAM,QAAQ;QACnC,IACA;QACIA,MAAM,EAAE;QACRA,MAAM,KAAK;QACXA,MAAM,KAAK;QACXA,MAAM,OAAO;QACbA,MAAM,aAAa;QACnBA,MAAM,QAAQ;QACdA,MAAM,QAAQ;KACjB;IAEL,MAAMG,YAAYD,QAAQ;QACtB,MAAMC,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAACF;QACf,OAAOE;IACX,GAAG,EAAE;IAEL,MAAM,CAACE,IAAIC,MAAM,GAAGC,SAASJ,UAAU,EAAE;IAEzCK,UAAU;QACNL,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;KAAO;IAEXO,UAAU,IACCC,QAAQ;YACXH,MAAMH,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QAAEE;QAAI,eAAeF,UAAU,aAAa;IAAC;AACxD"}

package/CheckboxGroup/CheckboxGroup.d.ts

@@ -2,21 +2,21 @@ import React from "react";
 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/types.js").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,41 +1,36 @@
-import React, { useMemo } from "react";
+import react, { useMemo } from "react";
 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,
-  validation,
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: label,
-    required: required,
-    disabled: disabled,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled,
-    className: "mb-xs-plus"
-  }), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: disabled,
-    className: "mt-none mb-xs-plus"
-  }), /*#__PURE__*/React.createElement(CheckboxGroupPrimitive, props), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: disabled
-  }));
+const DecoratableCheckboxGroup = ({ label, description, note, required, disabled, hint, validation, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        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: "mb-xs-plus"
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled,
+        className: "mt-none mb-xs-plus"
+    }), /*#__PURE__*/ react.createElement(CheckboxGroupPrimitive, {
+        disabled: disabled,
+        ...props
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
 };
 const CheckboxGroup = makeDecoratable("CheckboxGroup", DecoratableCheckboxGroup);
 export { CheckboxGroup };

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.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    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                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 {...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;EAAS,gBACrBtB,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;EAAa,CAC3B,CAAC,eACFtB,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAE;EAAqB,CACnC,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,"file":"CheckboxGroup/CheckboxGroup.js","sources":["../../src/CheckboxGroup/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"],"names":["DecoratableCheckboxGroup","label","description","note","required","disabled","hint","validation","props","validationIsValid","validationMessage","invalid","useMemo","FormComponentLabel","FormComponentDescription","FormComponentErrorMessage","CheckboxGroupPrimitive","FormComponentNote","CheckboxGroup","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,2BAA2B,CAAC,EAC9BC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACV,GAAGC,OACc;IACjB,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,oBAAkBA;QACf,MAAMZ;QACN,MAAMK;QACN,UAAUF;QACV,UAAUC;QACV,SAASM;sBAEb,oBAACG,0BAAwBA;QACrB,MAAMZ;QACN,UAAUG;QACV,WAAW;sBAEf,oBAACU,2BAAyBA;QACtB,MAAML;QACN,SAASC;QACT,UAAUN;QACV,WAAW;sBAEf,oBAACW,wBAAsBA;QAAC,UAAUX;QAAW,GAAGG,KAAK;sBACrD,oBAACS,mBAAiBA;QAAC,MAAMd;QAAM,UAAUE;;AAGrD;AACA,MAAMa,gBAAgBC,gBAAgB,iBAAiBnB"}

package/CheckboxGroup/CheckboxGroup.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as 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" />