@coveord/plasma-mantine 48.6.0 → 48.9.1

package/src/components/modal-wizard/ModalWizard.tsx

@@ -1,10 +1,10 @@
-import {Button, createStyles, Modal, Progress} from '@mantine/core';
+import {Button, Modal, ModalProps, Progress} from '@mantine/core';
 import {Children, ReactElement, useMemo, useState} from 'react';
 import {StickyFooter} from '../sticky-footer';
 import {ModalWizardStep} from './ModalWizardStep';
 import {Header} from '../header';
 
-interface ModalWizardProps {
+interface ModalWizardProps extends Omit<ModalProps, 'centered' | 'title'> {
     /**
      * The label of the cancel button
      *
@@ -17,20 +17,20 @@ interface ModalWizardProps {
      *
      * @default "Next"
      */
-
     nextButtonLabel?: string;
+
     /**
      * The label of the previous button
      *
      * @default "Previous"
      */
     previousButtonLabel?: string;
+
     /**
      * The label of the finish button
      *
      * @default "Finish"
      */
-
     finishButtonLabel?: string;
 
     /**
@@ -43,12 +43,6 @@ interface ModalWizardProps {
      */
     onPrevious?: () => unknown;
 
-    /**
-     * A callback function that is executed when the user clicks on the cancel button
-     */
-
-    onClose?: () => unknown;
-
     /**
      * A function that is executed when user completes all the steps.
      *
@@ -59,7 +53,6 @@ interface ModalWizardProps {
     /**
      * Determine if user interacted with any steps in the modal wizard
      */
-
     isDirty?: () => boolean;
 
     /**
@@ -67,32 +60,14 @@ interface ModalWizardProps {
      */
     handleDirtyState?: () => boolean;
 
-    /**
-     * Props to pass to each modal
-     */
-    modalProps?: any;
-
-    /**
-     * Label for close button
-     */
-    closeButtonLabel?: string;
-
     /**
      * Children to display in modal wizard
      * */
     children?: Array<ReturnType<typeof ModalWizardStep>>;
 }
 
-const useStyles = createStyles(() => ({
-    modal: {
-        height: '70%',
-        display: 'flex',
-        flexDirection: 'column',
-    },
-}));
-
 interface ModalWizardType {
-    <T>(props: ModalWizardProps): ReactElement;
+    (props: ModalWizardProps): ReactElement;
 
     Step: typeof ModalWizardStep;
 }
@@ -102,15 +77,16 @@ export const ModalWizard: ModalWizardType = ({
     nextButtonLabel = 'Next',
     previousButtonLabel = 'Previous',
     finishButtonLabel = 'Finish',
+    opened,
     onNext,
     onPrevious,
     onClose,
     onFinish,
     isDirty,
-    modalProps,
     handleDirtyState,
-    closeButtonLabel,
+    classNames,
     children,
+    ...modalProps
 }) => {
     const [currentStepIndex, setCurrentStepIndex] = useState(0);
     const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);
@@ -124,8 +100,6 @@ export const ModalWizard: ModalWizardType = ({
     const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};
     const isModalDirty = isDirty && isDirty();
 
-    const {classes} = useStyles();
-
     const closeModalWizard = () => {
         if (isModalDirty && handleDirtyState) {
             handleDirtyState() && onClose?.();
@@ -145,14 +119,12 @@ export const ModalWizard: ModalWizardType = ({
 
     return (
         <Modal
-            opened
-            classNames={{modal: classes.modal}}
+            opened={opened}
+            classNames={classNames}
             centered
-            closeButtonLabel={closeButtonLabel}
-            padding="xl"
             title={
                 <Header
-                    docLink={currentStep.props.docLin}
+                    docLink={currentStep.props.docLink}
                     description={
                         typeof currentStep.props.description === 'function'
                             ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)
@@ -169,13 +141,13 @@ export const ModalWizard: ModalWizardType = ({
             onClose={closeModalWizard}
             {...modalProps}
         >
-            {currentStep.props.showProgressBar && <Progress value={getProgressMemo} />}
+            {currentStep.props.showProgressBar && <Progress color="teal" size="lg" value={getProgressMemo} />}
             {currentStep}
             <StickyFooter borderTop py={null} px={null} pt="md">
                 <Button
                     name={isFirstStep ? cancelButtonLabel : previousButtonLabel}
                     disabled={false}
-                    size="md"
+                    size="sm"
                     variant="outline"
                     onClick={() => {
                         if (isFirstStep) {
@@ -191,7 +163,7 @@ export const ModalWizard: ModalWizardType = ({
 
                 <Button
                     disabled={!isValid}
-                    size="md"
+                    size="sm"
                     onClick={() => {
                         if (isLastStep) {
                             onFinish ? onFinish() : onClose();

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -2,31 +2,32 @@ import {render, screen, userEvent} from '@test-utils';
 import {ModalWizard} from '../ModalWizard';
 
 describe('ModalWizard', () => {
-    it('navigate slides using footer buttons', async () => {
-        const user = userEvent.setup({delay: null});
+    it('navigate modal steps using footer buttons', async () => {
+        const user = userEvent.setup();
+
         const modelSteps = [
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: true}),
                 element: <div> Slide 1</div>,
             },
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: true}),
                 element: <div> Slide 2</div>,
             },
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: false}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: false}),
                 element: <div> Slide 3</div>,
             },
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: false}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: false}),
                 element: <div> Unreachable slide</div>,
             },
         ];
@@ -38,11 +39,13 @@ describe('ModalWizard', () => {
                 closeButtonLabel="closebuttonlabel"
                 isDirty={isDirty}
                 handleDirtyState={() => confirm('Are you sure you want to close?')}
+                opened={true}
+                onClose={undefined}
             >
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
-                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
                     >
                         {model_item.element}
@@ -153,13 +156,14 @@ describe('ModalWizard', () => {
         ).toBeInTheDocument();
     });
 
-    it('modal wizard onClose', async () => {
-        const user = userEvent.setup({delay: null});
+    it('calls the onClose prop when closing the modal', async () => {
+        const user = userEvent.setup();
+
         const modelSteps = [
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: true}),
                 element: <div> Slide 1</div>,
             },
         ];
@@ -168,11 +172,11 @@ describe('ModalWizard', () => {
         const onClose = jest.fn();
 
         render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} closeButtonLabel="closebuttonlabel">
+            <ModalWizard isDirty={isDirty} onClose={onClose} closeButtonLabel="closebuttonlabel" opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
-                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
                     >
                         {model_item.element}
@@ -189,13 +193,13 @@ describe('ModalWizard', () => {
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('modal wizard onCancel', async () => {
-        const user = userEvent.setup({delay: null});
+    it('closes the modal when clicking on cancel', async () => {
+        const user = userEvent.setup();
         const modelSteps = [
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: true}),
                 element: <div> Slide 1</div>,
             },
         ];
@@ -204,11 +208,11 @@ describe('ModalWizard', () => {
         const onClose = jest.fn();
 
         render(
-            <ModalWizard isDirty={isDirty} onClose={onClose}>
+            <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
-                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
                     >
                         {model_item.element}
@@ -225,13 +229,13 @@ describe('ModalWizard', () => {
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('modal wizard onFinish', async () => {
-        const user = userEvent.setup({delay: null});
+    it('calls onFinish prop when clicking on finish button', async () => {
+        const user = userEvent.setup();
         const modelSteps = [
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: true}),
                 element: <div> Slide 1</div>,
             },
         ];
@@ -241,11 +245,11 @@ describe('ModalWizard', () => {
         const onFinish = jest.fn();
 
         render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} onFinish={onFinish}>
+            <ModalWizard isDirty={isDirty} onClose={onClose} onFinish={onFinish} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
-                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
                     >
                         {model_item.element}
@@ -262,13 +266,13 @@ describe('ModalWizard', () => {
         expect(onFinish).toHaveBeenCalledTimes(1);
     });
 
-    it('handle dirty state if user confirms close', async () => {
-        const user = userEvent.setup({delay: null});
+    it('triggers handleDirty callback when the modal wizard has dirty state', async () => {
+        const user = userEvent.setup();
         const modelSteps = [
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: true}),
                 element: <div> Slide 1</div>,
             },
         ];
@@ -283,11 +287,12 @@ describe('ModalWizard', () => {
                 onClose={onClose}
                 handleDirtyState={handleDirtyState}
                 closeButtonLabel="closebuttonlabel"
+                opened={true}
             >
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
-                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
                     >
                         {model_item.element}
@@ -306,13 +311,13 @@ describe('ModalWizard', () => {
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('handle dirty state if user confirms cancel', async () => {
-        const user = userEvent.setup({delay: null});
+    it('close the modal if user confirms close when the modal wizard has dirty state', async () => {
+        const user = userEvent.setup();
         const modelSteps = [
             {
                 docLink: 'https://google.com',
-                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
-                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                title: (currentStep: string) => 'Current Step is: ' + currentStep,
+                validateStep: () => ({isValid: true}),
                 element: <div> Slide 1</div>,
             },
         ];
@@ -327,11 +332,12 @@ describe('ModalWizard', () => {
                 onClose={onClose}
                 handleDirtyState={handleDirtyState}
                 closeButtonLabel="closebuttonlabel"
+                opened={true}
             >
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
-                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
                     >
                         {model_item.element}

package/src/theme/Theme.tsx

@@ -135,12 +135,6 @@ export const plasmaTheme: MantineThemeOverride = {
             defaultProps: {
                 radius: 'sm',
             },
-            styles: {
-                labelWrapper: {
-                    display: 'flex',
-                    alignItems: 'center',
-                },
-            },
         },
         List: {
             styles: () => ({

package/dist/cjs/components/collection/Collection.example.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _jsxRuntime = require("react/jsx-runtime");
-var _core = require("@mantine/core");
-var _form = require("@mantine/form");
-var _collection = require("./Collection");
-var _default = function() {
-    var form = (0, _form.useForm)({
-        initialValues: {
-            todoList: [
-                {
-                    name: "wash the dishes",
-                    done: true
-                },
-                {
-                    name: "take out the trash",
-                    done: false
-                },
-                {
-                    name: "vacuum the floors",
-                    done: true
-                }
-            ]
-        }
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_collection.Collection, _objectSpreadProps(_objectSpread({
-        draggable: true,
-        addLabel: "Add task",
-        newItem: {
-            name: "",
-            done: false
-        }
-    }, form.getInputProps("todoList")), {
-        children: function(task, index) {
-            return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.TextInput, _objectSpreadProps(_objectSpread({
-                        autoFocus: true,
-                        placeholder: "Do something ..."
-                    }, form.getInputProps("todoList.".concat(index, ".name"))), {
-                        styles: {
-                            flex: 1
-                        }
-                    })),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Checkbox, _objectSpread({}, form.getInputProps("todoList.".concat(index, ".done"), {
-                        type: "checkbox"
-                    })))
-                ]
-            });
-        }
-    }));
-};
-
-//# sourceMappingURL=Collection.example.js.map

package/dist/cjs/components/collection/Collection.example.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.example.tsx"],"sourcesContent":["import {Checkbox, TextInput} from '@mantine/core';\nimport {useForm} from '@mantine/form';\n\nimport {Collection} from './Collection';\n\nexport default () => {\n    const form = useForm({\n        initialValues: {\n            todoList: [\n                {name: 'wash the dishes', done: true},\n                {name: 'take out the trash', done: false},\n                {name: 'vacuum the floors', done: true},\n            ],\n        },\n    });\n\n    return (\n        <Collection<{name: string; done: boolean}>\n            draggable\n            addLabel=\"Add task\"\n            newItem={{name: '', done: false}}\n            {...form.getInputProps('todoList')}\n        >\n            {(task, index) => (\n                <>\n                    <TextInput\n                        autoFocus\n                        placeholder=\"Do something ...\"\n                        {...form.getInputProps(`todoList.${index}.name`)}\n                        styles={{flex: 1}}\n                    />\n                    <Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />\n                </>\n            )}\n        </Collection>\n    );\n};\n"],"names":["form","useForm","initialValues","todoList","name","done","Collection","draggable","addLabel","newItem","getInputProps","task","index","TextInput","autoFocus","placeholder","styles","flex","Checkbox","type"],"mappings":"AAAA;;;;+BAKA,SA+BE;;;eA/BF,QA+BE;;;;;;oBApCgC,eAAe;oBAC3B,eAAe;0BAEZ,cAAc;IAEvC,QA+BE,GA/Ba,WAAM;IACjB,IAAMA,IAAI,GAAGC,IAAAA,KAAO,QAAA,EAAC;QACjBC,aAAa,EAAE;YACXC,QAAQ,EAAE;gBACN;oBAACC,IAAI,EAAE,iBAAiB;oBAAEC,IAAI,EAAE,IAAI;iBAAC;gBACrC;oBAACD,IAAI,EAAE,oBAAoB;oBAAEC,IAAI,EAAE,KAAK;iBAAC;gBACzC;oBAACD,IAAI,EAAE,mBAAmB;oBAAEC,IAAI,EAAE,IAAI;iBAAC;aAC1C;SACJ;KACJ,CAAC,AAAC;IAEH,qBACI,qBAACC,WAAU,WAAA;QACPC,SAAS;QACTC,QAAQ,EAAC,UAAU;QACnBC,OAAO,EAAE;YAACL,IAAI,EAAE,EAAE;YAAEC,IAAI,EAAE,KAAK;SAAC;OAC5BL,IAAI,CAACU,aAAa,CAAC,UAAU,CAAC;kBAEjC,SAACC,IAAI,EAAEC,KAAK;iCACT;;kCACI,qBAACC,KAAS,UAAA;wBACNC,SAAS;wBACTC,WAAW,EAAC,kBAAkB;uBAC1Bf,IAAI,CAACU,aAAa,CAAC,AAAC,WAAS,CAAQ,MAAK,CAAXE,KAAK,EAAC,OAAK,CAAC,CAAC;wBAChDI,MAAM,EAAE;4BAACC,IAAI,EAAE,CAAC;yBAAC;uBACnB;kCACF,qBAACC,KAAQ,SAAA,oBAAKlB,IAAI,CAACU,aAAa,CAAC,AAAC,WAAS,CAAQ,MAAK,CAAXE,KAAK,EAAC,OAAK,CAAC,EAAE;wBAACO,IAAI,EAAE,UAAU;qBAAC,CAAC,EAAI;;cACnF;SACN;OACQ,CACf;AACN,CAAC"}

package/dist/definitions/components/collection/Collection.example.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-export default _default;
-//# sourceMappingURL=Collection.example.d.ts.map

package/dist/definitions/components/collection/Collection.example.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Collection.example.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.example.tsx"],"names":[],"mappings":";;AAKA,wBA+BE"}

package/dist/esm/components/collection/Collection.example.js

@@ -1,54 +0,0 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Checkbox, TextInput } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { Collection } from "./Collection";
-export default function() {
-    var form = useForm({
-        initialValues: {
-            todoList: [
-                {
-                    name: "wash the dishes",
-                    done: true
-                },
-                {
-                    name: "take out the trash",
-                    done: false
-                },
-                {
-                    name: "vacuum the floors",
-                    done: true
-                }
-            ]
-        }
-    });
-    return /*#__PURE__*/ _jsx(Collection, _object_spread_props(_object_spread({
-        draggable: true,
-        addLabel: "Add task",
-        newItem: {
-            name: "",
-            done: false
-        }
-    }, form.getInputProps("todoList")), {
-        children: function(task, index) {
-            return /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsx(TextInput, _object_spread_props(_object_spread({
-                        autoFocus: true,
-                        placeholder: "Do something ..."
-                    }, form.getInputProps("todoList.".concat(index, ".name"))), {
-                        styles: {
-                            flex: 1
-                        }
-                    })),
-                    /*#__PURE__*/ _jsx(Checkbox, _object_spread({}, form.getInputProps("todoList.".concat(index, ".done"), {
-                        type: "checkbox"
-                    })))
-                ]
-            });
-        }
-    }));
-};
-
-//# sourceMappingURL=Collection.example.js.map

package/dist/esm/components/collection/Collection.example.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.example.tsx"],"sourcesContent":["import {Checkbox, TextInput} from '@mantine/core';\nimport {useForm} from '@mantine/form';\n\nimport {Collection} from './Collection';\n\nexport default () => {\n    const form = useForm({\n        initialValues: {\n            todoList: [\n                {name: 'wash the dishes', done: true},\n                {name: 'take out the trash', done: false},\n                {name: 'vacuum the floors', done: true},\n            ],\n        },\n    });\n\n    return (\n        <Collection<{name: string; done: boolean}>\n            draggable\n            addLabel=\"Add task\"\n            newItem={{name: '', done: false}}\n            {...form.getInputProps('todoList')}\n        >\n            {(task, index) => (\n                <>\n                    <TextInput\n                        autoFocus\n                        placeholder=\"Do something ...\"\n                        {...form.getInputProps(`todoList.${index}.name`)}\n                        styles={{flex: 1}}\n                    />\n                    <Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />\n                </>\n            )}\n        </Collection>\n    );\n};\n"],"names":["Checkbox","TextInput","useForm","Collection","form","initialValues","todoList","name","done","draggable","addLabel","newItem","getInputProps","task","index","autoFocus","placeholder","styles","flex","type"],"mappings":"AAAA;;;AAAA,SAAQA,QAAQ,EAAEC,SAAS,QAAO,eAAe,CAAC;AAClD,SAAQC,OAAO,QAAO,eAAe,CAAC;AAEtC,SAAQC,UAAU,QAAO,cAAc,CAAC;AAExC,eAAe,WAAM;IACjB,IAAMC,IAAI,GAAGF,OAAO,CAAC;QACjBG,aAAa,EAAE;YACXC,QAAQ,EAAE;gBACN;oBAACC,IAAI,EAAE,iBAAiB;oBAAEC,IAAI,EAAE,IAAI;iBAAC;gBACrC;oBAACD,IAAI,EAAE,oBAAoB;oBAAEC,IAAI,EAAE,KAAK;iBAAC;gBACzC;oBAACD,IAAI,EAAE,mBAAmB;oBAAEC,IAAI,EAAE,IAAI;iBAAC;aAC1C;SACJ;KACJ,CAAC,AAAC;IAEH,qBACI,KAACL,UAAU;QACPM,SAAS;QACTC,QAAQ,EAAC,UAAU;QACnBC,OAAO,EAAE;YAACJ,IAAI,EAAE,EAAE;YAAEC,IAAI,EAAE,KAAK;SAAC;OAC5BJ,IAAI,CAACQ,aAAa,CAAC,UAAU,CAAC;kBAEjC,SAACC,IAAI,EAAEC,KAAK;iCACT;;kCACI,KAACb,SAAS;wBACNc,SAAS;wBACTC,WAAW,EAAC,kBAAkB;uBAC1BZ,IAAI,CAACQ,aAAa,CAAC,AAAC,WAAS,CAAQ,MAAK,CAAXE,KAAK,EAAC,OAAK,CAAC,CAAC;wBAChDG,MAAM,EAAE;4BAACC,IAAI,EAAE,CAAC;yBAAC;uBACnB;kCACF,KAAClB,QAAQ,qBAAKI,IAAI,CAACQ,aAAa,CAAC,AAAC,WAAS,CAAQ,MAAK,CAAXE,KAAK,EAAC,OAAK,CAAC,EAAE;wBAACK,IAAI,EAAE,UAAU;qBAAC,CAAC,EAAI;;cACnF;SACN;OACQ,CACf;AACN,CAAC,CAAC"}

package/src/components/collection/Collection.example.tsx

@@ -1,37 +0,0 @@
-import {Checkbox, TextInput} from '@mantine/core';
-import {useForm} from '@mantine/form';
-
-import {Collection} from './Collection';
-
-export default () => {
-    const form = useForm({
-        initialValues: {
-            todoList: [
-                {name: 'wash the dishes', done: true},
-                {name: 'take out the trash', done: false},
-                {name: 'vacuum the floors', done: true},
-            ],
-        },
-    });
-
-    return (
-        <Collection<{name: string; done: boolean}>
-            draggable
-            addLabel="Add task"
-            newItem={{name: '', done: false}}
-            {...form.getInputProps('todoList')}
-        >
-            {(task, index) => (
-                <>
-                    <TextInput
-                        autoFocus
-                        placeholder="Do something ..."
-                        {...form.getInputProps(`todoList.${index}.name`)}
-                        styles={{flex: 1}}
-                    />
-                    <Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />
-                </>
-            )}
-        </Collection>
-    );
-};