@coveord/plasma-mantine 52.3.1 → 52.4.0

package/dist/{definitions → cjs}/components/collection/Collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,SAAS,EAAQ,MAAM,OAAO,CAAC;AAIvC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAG5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAyHtB,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAG5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAYD,eAAO,MAAM,UAAU,+CAsItB,CAAC"}

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

@@ -14,10 +14,11 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
-var _core = require("@mantine/core");
+var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
+var _sortable = require("@dnd-kit/sortable");
+var _core1 = require("@mantine/core");
 var _hooks = require("@mantine/hooks");
-var _react = require("react");
-var _reactbeautifuldnd = require("react-beautiful-dnd");
 var _button = require("../button");
 var _Collectionstyles = /*#__PURE__*/ _interop_require_default._(require("./Collection.styles"));
 var _CollectionItem = require("./CollectionItem");
@@ -27,10 +28,14 @@ var defaultProps = {
     addDisabledTooltip: "There is already an empty item",
     disabled: false,
     spacing: "xs",
-    required: false
+    required: false,
+    getItemId: function(param) {
+        var id = param.id;
+        return id;
+    }
 };
 var Collection = function(props) {
-    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, getItemId = _useComponentDefaultProps.getItemId, // Style props
+    var _useComponentDefaultProps = (0, _core1.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, getItemId = _useComponentDefaultProps.getItemId, // Style props
     classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _object_without_properties._(_useComponentDefaultProps, [
         "value",
         "onChange",
@@ -65,7 +70,9 @@ var Collection = function(props) {
         styles: styles,
         unstyled: unstyled
     }), classes = _useStyles.classes, cx = _useStyles.cx;
-    var collectionID = (0, _react.useId)();
+    var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
+        coordinateGetter: _sortable.sortableKeyboardCoordinates
+    }));
     var hasOnlyOneItem = value.length === 1;
     /**
      * Enforcing onChange when the value is modified will make sure the errors are carried through.
@@ -75,15 +82,15 @@ var Collection = function(props) {
         JSON.stringify(value)
     ]);
     var isRequired = typeof withAsterisk === "boolean" ? withAsterisk : required;
-    var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Label, _object_spread_props._(_object_spread._({
+    var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Label, _object_spread_props._(_object_spread._({
         required: isRequired
     }, labelProps), {
         children: label
     })) : null;
-    var _description = description ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Description, _object_spread_props._(_object_spread._({}, descriptionProps), {
+    var _description = description ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Description, _object_spread_props._(_object_spread._({}, descriptionProps), {
         children: description
     })) : null;
-    var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Error, _object_spread_props._(_object_spread._({}, errorProps), {
+    var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Error, _object_spread_props._(_object_spread._({}, errorProps), {
         children: error
     })) : null;
     var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -93,27 +100,33 @@ var Collection = function(props) {
         ]
     }) : null;
     var _getItemId;
-    var items = value.map(function(item, index) {
+    var standardizedItems = value.map(function(item, index) {
+        return {
+            id: (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item)) !== null && _getItemId !== void 0 ? _getItemId : String(index),
+            data: item
+        };
+    });
+    var items = standardizedItems.map(function(item, index) {
         /*#__PURE__*/ return (0, _jsxruntime.jsx)(_CollectionItem.CollectionItem, {
+            id: item.id,
             disabled: disabled,
             draggable: draggable,
-            index: index,
             onRemove: function() {
                 return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
             },
             styles: styles,
             removable: !(required && hasOnlyOneItem),
-            children: children(item, index)
-        }, (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item)) !== null && _getItemId !== void 0 ? _getItemId : index);
+            children: children(item.data, index)
+        }, item.id);
     });
     var _allowAdd;
     var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
     var _value_length;
-    var _addButton = disabled ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
+    var _addButton = disabled ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Group, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Tooltip, {
             label: addDisabledTooltip,
             disabled: addAllowed,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Box, {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
                     variant: "subtle",
                     leftIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.AddSize16Px, {
@@ -128,36 +141,49 @@ var Collection = function(props) {
             })
         })
     });
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.DragDropContext, {
-        onDragEnd: function(param) {
-            var destination = param.destination, source = param.source;
-            return onReorderItem({
-                from: source.index,
-                to: (destination === null || destination === void 0 ? void 0 : destination.index) || 0
-            });
-        },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.Droppable, {
-            direction: "vertical",
-            droppableId: collectionID,
-            children: function(provided) {
-                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, _object_spread_props._(_object_spread._(_object_spread_props._(_object_spread._({}, provided.droppableProps), {
-                    ref: provided.innerRef,
-                    className: cx(classes.root, className)
-                }), others), {
-                    children: [
-                        _header,
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, {
-                            spacing: spacing,
-                            children: [
-                                items,
-                                provided.placeholder,
-                                _addButton,
-                                _error
-                            ]
-                        })
-                    ]
-                }));
+    var getIndex = function(id) {
+        return standardizedItems.findIndex(function(item) {
+            return item.id === id;
+        });
+    };
+    var handleDragEnd = function(param) {
+        var over = param.over, active = param.active;
+        if (over) {
+            var activeIndex = getIndex(String(active.id));
+            var overIndex = getIndex(String(over.id));
+            if (activeIndex !== overIndex) {
+                onReorderItem === null || onReorderItem === void 0 ? void 0 : onReorderItem({
+                    from: activeIndex,
+                    to: overIndex
+                });
             }
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.DndContext, {
+        onDragEnd: handleDragEnd,
+        sensors: sensors,
+        modifiers: [
+            _modifiers.restrictToVerticalAxis,
+            _modifiers.restrictToParentElement
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortable.SortableContext, {
+            items: standardizedItems,
+            strategy: _sortable.verticalListSortingStrategy,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Box, _object_spread_props._(_object_spread._({
+                className: cx(classes.root, className)
+            }, others), {
+                children: [
+                    _header,
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, {
+                        spacing: spacing,
+                        children: [
+                            items,
+                            _addButton,
+                            _error
+                        ]
+                    })
+                ]
+            }))
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ReactNode, useId} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     */\n    getItemId?: (originalItem: T) => string;\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The the value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const collectionID = useId();\n\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <>\n                {_label}\n                {_description}\n            </>\n        ) : null;\n\n    const items = value.map((item, index) => (\n        <CollectionItem\n            key={(getItemId?.(item) ?? index) as string}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","getItemId","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","items","map","item","index","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    Box,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     */\n    getItemId?: (originalItem: T) => string;\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The the value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <>\n                {_label}\n                {_description}\n            </>\n        ) : null;\n\n    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n    const items = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={disabled}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    return (\n        <DndContext\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n        >\n            <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                <Box className={cx(classes.root, className)} {...others}>\n                    {_header}\n                    <Stack spacing={spacing}>\n                        {items}\n                        {_addButton}\n                        {_error}\n                    </Stack>\n                </Box>\n            </SortableContext>\n        </DndContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","getItemId","id","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","root","Stack"],"mappings":"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"}

package/dist/{definitions → cjs}/components/collection/Collection.styles.d.ts

@@ -5,6 +5,7 @@ declare const _default: (params: void, options?: import("@mantine/core").UseStyl
         root: string;
         item: string;
         itemDragging: string;
+        dragHandle: string;
     };
     cx: (...args: any) => string;
     theme: import("@mantine/core").MantineTheme;

package/dist/{definitions → cjs}/components/collection/Collection.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;CAAG;;;;;;;;;;AAE1C,wBASI"}
+{"version":3,"file":"Collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;CAAG;;;;;;;;;;;AAE1C,wBAeI"}

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

@@ -11,13 +11,19 @@ Object.defineProperty(exports, "default", {
 var _core = require("@mantine/core");
 var _default = (0, _core.createStyles)(function(theme) {
     return {
-        root: {},
+        root: {
+            position: "relative"
+        },
         item: {
             backgroundColor: theme.colorScheme === "light" ? theme.white : theme.black,
             alignItems: "baseline"
         },
         itemDragging: {
-            boxShadow: theme.shadows.sm
+            boxShadow: theme.shadows.md,
+            zIndex: 2
+        },
+        dragHandle: {
+            cursor: "move"
         }
     };
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {},\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.sm,\n    },\n}));\n"],"names":["createStyles","theme","root","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","sm"],"mappings":";;;;+BAIA;;;eAAA;;;oBAJ2B;IAI3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {\n        position: 'relative',\n    },\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.md,\n        zIndex: 2,\n    },\n    dragHandle: {\n        cursor: 'move',\n    },\n}));\n"],"names":["createStyles","theme","root","position","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","md","zIndex","dragHandle","cursor"],"mappings":";;;;+BAIA;;;eAAA;;;oBAJ2B;IAI3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACpCC,MAAM;YACFC,UAAU;QACd;QACAC,MAAM;YACFC,iBAAiBJ,MAAMK,WAAW,KAAK,UAAUL,MAAMM,KAAK,GAAGN,MAAMO,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWV,MAAMW,OAAO,CAACC,EAAE;YAC3BC,QAAQ;QACZ;QACAC,YAAY;YACRC,QAAQ;QACZ;IACJ"}

package/dist/{definitions → cjs}/components/collection/CollectionItem.d.ts

@@ -6,7 +6,7 @@ interface CollectionItemProps extends CollectionItemSharedProps {
     disabled: boolean;
 }
 interface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {
-    index: number;
+    id: string;
     onRemove?: React.MouseEventHandler<HTMLButtonElement>;
     removable?: boolean;
 }

package/dist/{definitions → cjs}/components/collection/CollectionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG3D,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE5C,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAkED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}
+{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAE3D,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE5C,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACjF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAwED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}

package/dist/cjs/components/collection/CollectionItem.js

@@ -15,8 +15,9 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
 var _core = require("@mantine/core");
-var _reactbeautifuldnd = require("react-beautiful-dnd");
 var _Collectionstyles = /*#__PURE__*/ _interop_require_default._(require("./Collection.styles"));
 var RemoveButton = function(param) {
     var onClick = param.onClick;
@@ -68,7 +69,7 @@ var DisabledCollectionItem = function(param) {
     });
 };
 var DraggableCollectionItem = function(param) {
-    var index = param.index, onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
+    var id = param.id, onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
     var _useStyles = (0, _Collectionstyles.default)(null, {
         name: "Collection",
         styles: styles
@@ -76,30 +77,29 @@ var DraggableCollectionItem = function(param) {
     var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
         onClick: onRemove
     }) : null;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.Draggable, {
-        index: index,
-        draggableId: index.toString(),
-        children: function(provided, param) {
-            var isDragging = param.isDragging;
-            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
-                ref: provided.innerRef
-            }, provided.draggableProps), {
-                className: cx(classes.item, _define_property._({}, classes.itemDragging, isDragging)),
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({}, provided.dragHandleProps), {
-                        style: {
-                            alignSelf: "center"
-                        },
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.DragAndDropSize16Px, {
-                            height: 16
-                        })
-                    })),
-                    children,
-                    removeButton
-                ]
-            }));
-        }
-    }, index);
+    var _useSortable = (0, _sortable.useSortable)({
+        id: id
+    }), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition, isDragging = _useSortable.isDragging, setActivatorNodeRef = _useSortable.setActivatorNodeRef;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
+        ref: setNodeRef,
+        className: cx(classes.item, _define_property._({}, classes.itemDragging, isDragging)),
+        sx: transform ? {
+            transform: _utilities.CSS.Transform.toString(transform),
+            transition: transition
+        } : undefined,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
+                ref: setActivatorNodeRef
+            }, listeners, attributes), {
+                className: classes.dragHandle,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.DragAndDropSize24Px, {
+                    height: 16
+                })
+            })),
+            children,
+            removeButton
+        ]
+    });
 };
 var CollectionItem = function(_param) {
     var draggable = _param.draggable, disabled = _param.disabled, otherProps = _object_without_properties._(_param, [

package/dist/cjs/components/collection/CollectionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n    index: number;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon sx={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group className={cx(classes.item)}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    children,\n    styles,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    index,\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n    return (\n        <Draggable key={index} index={index} draggableId={index.toString()}>\n            {(provided, {isDragging}) => (\n                <Group\n                    ref={provided.innerRef}\n                    {...provided.draggableProps}\n                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n                >\n                    <div {...provided.dragHandleProps} style={{alignSelf: 'center'}}>\n                        <DragAndDropSize16Px height={16} />\n                    </div>\n                    {children}\n                    {removeButton}\n                </Group>\n            )}\n        </Draggable>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;;gCAlFqC;oBACO;iCAEjC;yEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC5E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAAaD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC3D,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,uBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,mDAAQsB,SAASM,eAAe;wBAAE3B,OAAO;4BAACP,WAAW;wBAAQ;kCAC1D,cAAA,qBAACmC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;OAXGM;AAgBxB;AAEO,IAAM7B,iBAA4E,iBAInF;QAHFyC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,6CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,8CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,2CAAyB6B;AACrC"}
+{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n    id: string;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon sx={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group className={cx(classes.item)}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    children,\n    styles,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    id,\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            ref={setNodeRef}\n            className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n            sx={\n                transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined\n            }\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} className={classes.dragHandle}>\n                <DragAndDropSize24Px height={16} />\n            </div>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","id","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","itemDragging","CSS","Transform","toString","undefined","dragHandle","DragAndDropSize24Px","draggable","disabled","otherProps"],"mappings":";;;;+BAyFaA;;;eAAAA;;;;;;;;;gCAzFqC;wBACxB;yBACR;oBACuC;yEAGnC;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC5E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,WAAAA,IACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;SAAe,IAAI;IACvF,IAAoGe,eAAAA,IAAAA,qBAAW,EAAC;QAC5GD,IAAAA;IACJ,IAFOE,aAA6FD,aAA7FC,YAAYC,YAAiFF,aAAjFE,WAAWC,aAAsEH,aAAtEG,YAAYC,YAA0DJ,aAA1DI,WAAWC,aAA+CL,aAA/CK,YAAYC,aAAmCN,aAAnCM,YAAYC,sBAAuBP,aAAvBO;IAI7E,qBACI,sBAACb,WAAK;QACFc,KAAKL;QACLR,WAAWH,GAAGD,QAAQK,IAAI,EAAG,uBAACL,QAAQkB,YAAY,EAAGH;QACrDhC,IACI8B,YACM;YACIA,WAAWM,cAAG,CAACC,SAAS,CAACC,QAAQ,CAACR;YAClCC,YAAAA;QACJ,IACAQ,SAAS;;0BAGnB,qBAAChC;gBAAI2B,KAAKD;eAAyBL,WAAeD;gBAAYN,WAAWJ,QAAQuB,UAAU;0BACvF,cAAA,qBAACC,qCAAmB;oBAACpC,QAAQ;;;YAEhCS;YACAK;;;AAGb;AAEO,IAAMvB,iBAA4E,iBAInF;QAHF8C,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACpB,6CAA2BqB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAAClB,8CAA4BoB;IACxC,CAAC;IACD,qBAAO,qBAAClC,2CAAyBkC;AACrC"}

package/dist/cjs/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/dist/esm/components/blank-slate/BlankSlate.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+interface BlankSlateProps {
+    /**
+     * Whether the Blankslate render with a border
+     *
+     * @default true
+     */
+    withBorder?: boolean;
+}
+export declare const BlankSlate: FunctionComponent<PropsWithChildren<BlankSlateProps>>;
+export {};
+//# sourceMappingURL=BlankSlate.d.ts.map

package/dist/esm/components/blank-slate/BlankSlate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlankSlate.d.ts","sourceRoot":"","sources":["../../../../src/components/blank-slate/BlankSlate.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAE3D,UAAU,eAAe;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAI5E,CAAC"}

package/dist/esm/components/blank-slate/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BlankSlate';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/blank-slate/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/blank-slate/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/esm/components/button/Button.d.ts

@@ -0,0 +1,16 @@
+import { Button as MantineButton, ButtonProps as MantineButtonProps } from '@mantine/core';
+import { MouseEventHandler } from 'react';
+import { ButtonWithDisabledTooltipProps } from './ButtonWithDisabledTooltip';
+export interface ButtonProps extends MantineButtonProps, ButtonWithDisabledTooltipProps {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const Button: (<C = "button">(props: import("@mantine/utils").PolymorphicComponentProps<C, ButtonProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(ButtonProps & {
+    component?: any;
+} & Omit<Pick<any, string | number | symbol>, "component" | keyof ButtonProps> & {
+    ref?: any;
+}) | (ButtonProps & {
+    component: import("react").ElementType<any>;
+})>, never> & {
+    Group: typeof MantineButton.Group;
+};
+//# sourceMappingURL=Button.d.ts.map

package/dist/esm/components/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,IAAI,aAAa,EAAE,WAAW,IAAI,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACzF,OAAO,EAAyB,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAG1E,OAAO,EAA4B,8BAA8B,EAAC,MAAM,6BAA6B,CAAC;AAEtG,MAAM,WAAW,WAAY,SAAQ,kBAAkB,EAAE,8BAA8B;IAEnF,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAClD;AA6CD,eAAO,MAAM,MAAM;;;;;;;WAA6D,OAAO,cAAc,KAAK;CAAW,CAAC"}

package/dist/esm/components/button/ButtonWithDisabledTooltip.d.ts

@@ -0,0 +1,29 @@
+import { TooltipProps } from '@mantine/core';
+import { ReactNode } from 'react';
+export interface ButtonWithDisabledTooltipProps {
+    /**
+     * The tooltip message to display when disabled
+     */
+    disabledTooltip?: string;
+    /**
+     * Whether the button underneath the tooltip is disabled
+     */
+    disabled?: boolean;
+    children?: ReactNode;
+    /**
+     * Additional tooltip props to set on the disabled button tooltip
+     */
+    disabledTooltipProps?: Omit<TooltipProps, 'disabled' | 'label' | 'children'>;
+    /**
+     * Sets button width to 100% of parent element
+     */
+    fullWidth?: boolean;
+}
+export declare const ButtonWithDisabledTooltip: (<C = "div">(props: import("@mantine/utils").PolymorphicComponentProps<C, ButtonWithDisabledTooltipProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(ButtonWithDisabledTooltipProps & {
+    component?: any;
+} & Omit<Pick<any, string | number | symbol>, "component" | keyof ButtonWithDisabledTooltipProps> & {
+    ref?: any;
+}) | (ButtonWithDisabledTooltipProps & {
+    component: import("react").ElementType<any>;
+})>, never> & Record<string, never>;
+//# sourceMappingURL=ButtonWithDisabledTooltip.d.ts.map

package/dist/esm/components/button/ButtonWithDisabledTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithDisabledTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/button/ButtonWithDisabledTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAC,MAAM,eAAe,CAAC;AACzD,OAAO,EAAa,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5C,MAAM,WAAW,8BAA8B;IAC3C;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;IAC7E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAeD,eAAO,MAAM,yBAAyB;;;;;;mCAErC,CAAC"}

package/dist/esm/components/button/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Button';
+export { type ButtonWithDisabledTooltipProps } from './ButtonWithDisabledTooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAC,KAAK,8BAA8B,EAAC,MAAM,6BAA6B,CAAC"}

package/dist/esm/components/code-editor/CodeEditor.d.ts

@@ -0,0 +1,53 @@
+import { DefaultProps, InputWrapperBaseProps, Selectors } from '@mantine/core';
+import { FunctionComponent } from 'react';
+declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        root: string;
+        editor: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+interface CodeEditorProps extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>, DefaultProps<Selectors<typeof useStyles>> {
+    /**
+     * The language syntax of the editor
+     *
+     * @default 'plaintext'
+     */
+    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';
+    /** Default value for uncontrolled input */
+    defaultValue?: string;
+    /** Value for controlled input */
+    value?: string;
+    /** onChange value for controlled input */
+    onChange?(value: string): void;
+    /** Called whenever the code editor gets the focus */
+    onFocus?(): void;
+    /**
+     * The minimal height of the CodeEditor (label and description included)
+     *
+     * By default the CodeEditor is adjusted to fill its parent height.
+     * In the case where the parent height is too short, it will use this value as minimum.
+     *
+     * @default 300
+     */
+    minHeight?: number;
+    /**
+     * The maximal height of the CodeEditor (label and description included)
+     *
+     * By default the CodeEditor is adjusted to fill its parent height.
+     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.
+     */
+    maxHeight?: number;
+    disabled?: boolean;
+    /**
+     * Defines how the monaco editor files will be loaded.
+     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).
+     *
+     * @default 'local'
+     */
+    monacoLoader?: 'cdn' | 'local';
+}
+export declare const CodeEditor: FunctionComponent<CodeEditorProps>;
+export {};
+//# sourceMappingURL=CodeEditor.d.ts.map

package/dist/esm/components/code-editor/CodeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAM7D,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAiIzD,CAAC"}

package/dist/esm/components/code-editor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CodeEditor';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/code-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/esm/components/code-editor/languages/xml.d.ts

@@ -0,0 +1,5 @@
+import { Monaco } from '@monaco-editor/react';
+export declare const XML: {
+    register: (monaco: Monaco) => void;
+};
+//# sourceMappingURL=xml.d.ts.map