@mailstep/design-system 0.6.2-beta.2 → 0.6.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.2-beta.2",
+  "version": "0.6.3-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -60,7 +60,7 @@ var StyledCommonGrid = function (props) {
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         onClose: onClose,
-    }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", sizing: "iconLg", appearance: "ghost", icon: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
+    }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig, handleDragEnd = _d.handleDragEnd, onCloseForm = _d.onCloseForm, displayColumnsDefinitions = _d.displayColumnsDefinitions;
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", sizing: "iconLg", appearance: "ghost", icon: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: displayColumnsDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd }) }))] }));
 };
 export default StyledCommonGrid;

package/ui/Blocks/CommonGrid/components/HeadRow.js

@@ -48,7 +48,7 @@ var HeadRow = function (_a) {
         // move column from a position to the new position
         var column = newOrderColumns[fromIndex];
         newOrderColumns.splice(fromIndex, 1);
-        newOrderColumns.splice(toIndex, 0, column);
+        newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
         setColumnsOrder(newOrderColumns);
     }, [setColumnsOrder, columnsOrder, columns]);
     var _e = useState(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];

package/ui/Blocks/CommonGrid/components/ManageColumnForm/ManageColumnForm.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import { ColumnConfig, CommonGridProps } from '../../types';
+import { DropResult } from 'react-beautiful-dnd';
 type ManageColumnProps = {
     columns?: CommonGridProps['columnsDefinitions'];
     columnsConfigValues?: string[];
     setColumnsConfigOptions: (value: React.SetStateAction<{
         [x: string]: ColumnConfig | {};
     }>) => void;
+    handleDragEnd: (item: DropResult) => void;
 };
-declare const ManageColumnForm: ({ columns, columnsConfigValues, setColumnsConfigOptions }: ManageColumnProps) => JSX.Element;
+declare const ManageColumnForm: ({ columns, columnsConfigValues, setColumnsConfigOptions, handleDragEnd, }: ManageColumnProps) => JSX.Element;
 export default ManageColumnForm;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/ManageColumnForm.js

@@ -1,11 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { x } from '@xstyled/styled-components';
 import { ActionRow } from './components/ActionRow';
 import { Input } from '../../../../Forms/Input/Input';
 import { i18n } from '@lingui/core';
+import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
 var ManageColumnForm = function (_a) {
-    var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions;
+    var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd;
     var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
     var onChangeInputValue = useCallback(function (e) {
         setSearchedValue(e.target.value);
@@ -13,8 +25,8 @@ var ManageColumnForm = function (_a) {
     var clear = useCallback(function () {
         setSearchedValue('');
     }, [setSearchedValue]);
-    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
-                    return (_jsx(ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index));
-                }) })] }));
+    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "vertical", children: function (droppableProvided) { return (_jsx(x.div, __assign({ h: "400px", overflowY: "scroll", mt: "20px", ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
+                            return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: !!searchedValue, children: function (draggableProvided, snapshot) { return (_jsx(ActionRow, { column: column, innerRef: draggableProvided.innerRef, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue, draggableProps: draggableProvided.draggableProps, dragHandleProps: draggableProvided.dragHandleProps }, index)); } }, column.name));
+                        }) }))); } }) })] }));
 };
 export default ManageColumnForm;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ColumnConfig, ColumnDefinition } from '../../../types';
+import { DraggableProps, DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 type ActionRowProps = {
     column: ColumnDefinition;
     columnsConfigValues: string[] | undefined;
@@ -7,6 +8,9 @@ type ActionRowProps = {
         [x: string]: ColumnConfig | {};
     }>) => void;
     searchedValue: string;
+    innerRef?: Function;
+    draggableProps?: DraggableProps | any;
+    dragHandleProps?: DraggableProvidedDragHandleProps | null;
 };
-export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue, innerRef, draggableProps, dragHandleProps, }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.js

@@ -14,7 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { x, th } from '@xstyled/styled-components';
 import styled from 'styled-components';
 import Toggle from '../../../../../Elements/Toggle/Toggle';
@@ -22,14 +22,15 @@ import { Group } from '../../../../../Elements/Icon/icons/Group';
 import { isObject } from 'lodash';
 import { H6 } from '../../../../../Elements/Typography/Typography';
 import { i18n } from '@lingui/core';
-var RowLayout = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
+var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
     var $isVisible = _a.$isVisible;
     return ($isVisible ? 'flex' : 'none');
 }, th.color('lightGray6'));
 export var ActionRow = function (_a) {
     var _b, _c, _d, _e, _f;
-    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue;
+    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue, innerRef = _a.innerRef, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps;
     var _g = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _g[0], setIsSelected = _g[1];
+    var style = useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
     var translatedValue = isObject(column === null || column === void 0 ? void 0 : column.title) &&
         'props' in column.title &&
         ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
@@ -42,6 +43,6 @@ export var ActionRow = function (_a) {
         });
         setIsSelected(!isSelected);
     }, [setColumnsConfigOptions, isSelected, column.name]);
-    return (_jsxs(RowLayout, { "$isVisible": isVisible, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] }));
+    return (_jsxs(RowLayout, __assign({ "$isVisible": isVisible }, draggableProps, dragHandleProps, { ref: innerRef, style: style, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] })));
 };
 var templateObject_1;

package/ui/Blocks/CommonGrid/hooks/useManageColumn.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { DropResult } from 'react-beautiful-dnd';
 import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
 type Props = {
     columns: CommonGridProps['columnsDefinitions'];
@@ -15,5 +16,8 @@ declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }
     }>>;
     onConfirmForm: () => void;
     resetColumnConfig: () => void;
+    handleDragEnd: (item: DropResult) => void;
+    onCloseForm: () => void;
+    displayColumnsDefinitions: import("../types").ColumnDefinition<string>[];
 };
 export default useManageColumn;

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -9,12 +9,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { useCallback, useMemo, useState } from 'react';
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useCallback, useEffect, useMemo, useState } from 'react';
 var useManageColumn = function (_a) {
     var columns = _a.columns, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, onClose = _a.onClose;
-    var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig;
-    var columnConfig = gridSelectors.columnConfig;
+    var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig, setColumnsOrder = gridActions.setColumnsOrder;
+    var columnConfig = gridSelectors.columnConfig, columnsOrder = gridSelectors.columnsOrder;
     var _b = useState(__assign({}, columnConfig)), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
+    var _c = useState(columnsOrder || columns.map(function (col) { return col.name; })), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
+    useEffect(function () {
+        (columnsOrder === null || columnsOrder === void 0 ? void 0 : columnsOrder.length) && (setUpdatedColumnsOrder === null || setUpdatedColumnsOrder === void 0 ? void 0 : setUpdatedColumnsOrder(columnsOrder));
+    }, [columnsOrder]);
     var columnsConfigValues = useMemo(function () {
         return columns === null || columns === void 0 ? void 0 : columns.filter(function (column) {
             var _a;
@@ -22,13 +35,53 @@ var useManageColumn = function (_a) {
             return (column === null || column === void 0 ? void 0 : column.alwaysOn) || typeof isHidden === 'boolean' ? !isHidden : !(column === null || column === void 0 ? void 0 : column.defaultHidden);
         }).map(function (column) { return column.name; });
     }, [columnConfig, columns]);
+    var columnsOrderValues = useMemo(function () {
+        var order = (columnsOrder === null || columnsOrder === void 0 ? void 0 : columnsOrder.length) ? columnsOrder : columns.map(function (column) { return column.name; });
+        return order;
+    }, [columns, columnsOrder]);
     var onConfirmForm = useCallback(function () {
-        (setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions)) && (onClose === null || onClose === void 0 ? void 0 : onClose());
-    }, [columnsConfigOptions, onClose, setColumnConfig]);
+        (setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions)) && (setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(updatedColumnsOrder)) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+    }, [columnsConfigOptions, updatedColumnsOrder, onClose, setColumnConfig]);
     var resetColumnConfig = useCallback(function () {
+        setUpdatedColumnsOrder(columnsOrderValues);
         (resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid()) && (onClose === null || onClose === void 0 ? void 0 : onClose());
         setColumnsConfigOptions(columnConfig || {});
     }, [onClose, resetGrid]);
-    return { columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, onConfirmForm: onConfirmForm, resetColumnConfig: resetColumnConfig };
+    var onCloseForm = useCallback(function () {
+        setUpdatedColumnsOrder(columnsOrderValues);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, []);
+    var handleDragEnd = useCallback(function (item) {
+        var destination = item.destination, source = item.source;
+        var to = destination === null || destination === void 0 ? void 0 : destination.index;
+        var from = source === null || source === void 0 ? void 0 : source.index;
+        if (to === from || !destination) {
+            return;
+        }
+        var newOrderColumns = __spreadArray([], updatedColumnsOrder, true);
+        var fromIndex = newOrderColumns.findIndex(function (column) { return columns[from].name === column; });
+        var toIndex = newOrderColumns.findIndex(function (column) { return to && columns[to].name === column; });
+        // move column from a position to the new position
+        var column = newOrderColumns[fromIndex];
+        newOrderColumns.splice(fromIndex, 1);
+        newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
+        setUpdatedColumnsOrder(newOrderColumns);
+    }, [columns, updatedColumnsOrder]);
+    var displayColumnsDefinitions = useMemo(function () {
+        return columns.sort(function (col1, col2) {
+            var i = (updatedColumnsOrder || []).indexOf(col1.name);
+            var j = (updatedColumnsOrder || []).indexOf(col2.name);
+            return i > j ? 1 : i < j ? -1 : 0;
+        });
+    }, [columns, updatedColumnsOrder]);
+    return {
+        columnsConfigValues: columnsConfigValues,
+        setColumnsConfigOptions: setColumnsConfigOptions,
+        onConfirmForm: onConfirmForm,
+        resetColumnConfig: resetColumnConfig,
+        handleDragEnd: handleDragEnd,
+        onCloseForm: onCloseForm,
+        displayColumnsDefinitions: displayColumnsDefinitions,
+    };
 };
 export default useManageColumn;

package/ui/Blocks/Modal/Modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useEffect } from 'react';
 import { Icon, Cancel } from '../../Elements/Icon';
 import { H2, H5 } from '../../Elements/Typography';
-import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper, } from './styles';
+import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, } from './styles';
 import { x } from '@xstyled/styled-components';
 import { Button } from '../../Elements/Button';
 import { Portal } from '../../Elements/Portal';
@@ -32,5 +32,5 @@ export var Modal = memo(function (_a) {
     if (!isShown) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "ghostDanger", children: extraActionLabel })), _jsxs(ButtonsWrapper, { hasExtraAction: !!onExtraAction, hasBothButtons: !!onCancel && !!onConfirm, children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
+    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "ghostDanger", children: extraActionLabel })), _jsxs(x.div, { children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
 });

package/ui/Blocks/Modal/stories/Modal.stories.js

@@ -32,7 +32,7 @@ export var ModalTopPosition = {
         title: 'Modal default version',
         children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
         variant: 'default',
-        top: '0',
+        top: '0'
     },
 };
 export var ModalWithCloseAndConfirmBtns = {
@@ -40,10 +40,6 @@ export var ModalWithCloseAndConfirmBtns = {
         children: _jsx(_Fragment, { children: "Modal with narrow width" }),
         title: 'Modal title',
         width: 'narrow',
-        withCloseIcon: true,
-        onCancel: function () { return console.log('Cancel'); },
-        onConfirm: function () { return console.log('Confirm'); },
-        onExtraAction: undefined,
     },
 };
 export var ModalWithoutCloseButton = {

package/ui/Blocks/Modal/styles.d.ts

@@ -21,8 +21,4 @@ export declare const TitleContainer: import("styled-components").StyledComponent
 export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     hasSpaceBetween: boolean;
 }, never>;
-export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    hasExtraAction: boolean;
-    hasBothButtons: boolean;
-}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Modal/styles.js

@@ -67,16 +67,9 @@ export var ContentContainer = styled.div(templateObject_13 || (templateObject_13
     return variantStyles(Component.ContentContainer, variant);
 });
 export var TitleContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
-export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])), th.color('lightGray6'), function (_a) {
+export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n  > div > * {\n    margin: 0 0.5em;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n  > div > * {\n    margin: 0 0.5em;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])), th.color('lightGray6'), function (_a) {
     var hasSpaceBetween = _a.hasSpaceBetween;
     return (hasSpaceBetween ? 'space-between' : 'flex-end');
 });
-export var ButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"])), function (_a) {
-    var hasExtraAction = _a.hasExtraAction;
-    return (hasExtraAction ? 'auto' : '100%');
-}, function (_a) {
-    var hasBothButtons = _a.hasBothButtons;
-    return (hasBothButtons ? '50%' : 'auto');
-});
-export var CloseButton = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+export var CloseButton = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

package/ui/Elements/Alert/Alert.d.ts

@@ -1,3 +1,3 @@
-import type { IAlert } from './types';
+import { IAlert } from './types';
 declare const Alert: IAlert;
 export default Alert;

package/ui/Elements/BorderedBox/BorderedBox.d.ts

@@ -1,3 +1,3 @@
-import type { BorderedBoxProps } from './types';
+import { BorderedBoxProps } from './types';
 declare const BorderedBox: ({ children, className, id, ...rest }: BorderedBoxProps) => JSX.Element;
 export default BorderedBox;

package/ui/Elements/Button/Button.d.ts

@@ -1,3 +1,3 @@
-import type { Props } from './types';
+import { Props } from './types';
 declare const Button: ({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: Props) => JSX.Element;
 export default Button;

package/ui/Elements/Button/index.d.ts

@@ -1,5 +1,5 @@
 import Button from './Button';
-import type { AppearanceValue } from './types';
+import { AppearanceValue } from './types';
 export { Button };
 export type { AppearanceValue };
 export default Button;

package/ui/Elements/DatePicker/Datetime/DateTime.d.ts

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import React from 'react';
-import type { DatetimepickerProps } from './types';
+import { DatetimepickerProps } from './types';
 export default class Datetime extends React.Component<DatetimepickerProps> {
     static defaultProps: {
         onOpen: () => void;

package/ui/Elements/Dropdown/Dropdown.d.ts

@@ -1,3 +1,3 @@
-import type { DropdownProps } from './types';
+import { DropdownProps } from './types';
 declare const Dropdown: ({ show, className, wrapRef, children, showArrow, verticalShift, customDropdownPosition, }: DropdownProps) => JSX.Element;
 export default Dropdown;

package/ui/Elements/DropdownMenu/DropdownMenu.d.ts

@@ -1,2 +1,2 @@
-import type { DropdownMenuProps, Item } from './types';
+import { DropdownMenuProps, Item } from './types';
 export declare const DropdownMenu: <T extends Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: DropdownMenuProps<T>) => JSX.Element;

package/ui/Elements/ErrorMessage/ErrorMessage.d.ts

@@ -1,3 +1,3 @@
-import type { Props } from './types';
+import { Props } from './types';
 declare const ErrorMessage: ({ children, appearance }: Props) => JSX.Element;
 export default ErrorMessage;

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -11,7 +11,7 @@ var ErrorWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplat
 var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .inline {\n    margin-top: 1;\n    svg {\n      margin-right: 2;\n    }\n  }\n  .tooltip {\n    ", "\n    svg {\n      position: absolute;\n      top: 0;\n      right: 0;\n    }\n  }\n"], ["\n  .inline {\n    margin-top: 1;\n    svg {\n      margin-right: 2;\n    }\n  }\n  .tooltip {\n    ", "\n    svg {\n      position: absolute;\n      top: 0;\n      right: 0;\n    }\n  }\n"])), tooltip);
 var ErrorMessage = function (_a) {
     var children = _a.children, appearance = _a.appearance;
-    return (_jsx(StyledWrapper, { children: _jsxs(ErrorWrap, { className: appearance, children: [_jsx(Icon, { icon: "deleteX" }), _jsx("span", { children: children })] }) }));
+    return (_jsx(StyledWrapper, { children: _jsxs(ErrorWrap, { className: appearance, children: [_jsx(Icon, { icon: "danger" }), _jsx("span", { children: children })] }) }));
 };
 export default ErrorMessage;
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Icon/BadgeIcon.d.ts

@@ -1,4 +1,4 @@
-import type { IconProps } from './types';
+import { IconProps } from './types';
 type Props = {
     badge: 'warning';
 } & IconProps;

package/ui/Elements/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { FlipProp } from '@fortawesome/fontawesome-svg-core';
-import type { IconProps } from './types';
+import { IconProps } from './types';
 export declare const iconDictionary: {
     [name: string]: IconDefinition | [IconDefinition, FlipProp];
 };

package/ui/Elements/Image/Image.d.ts

@@ -1,3 +1,3 @@
-import type { ImageProps } from './types';
+import { ImageProps } from './types';
 declare const Image: (props: ImageProps) => JSX.Element;
 export default Image;

package/ui/Elements/Line/Line.d.ts

@@ -1,3 +1,3 @@
-import type { ILine } from './types';
+import { ILine } from './types';
 declare const Line: ILine;
 export default Line;

package/ui/Elements/Logo/Logo.d.ts

@@ -1,3 +1,3 @@
-import type { LogoProps } from './types';
+import { LogoProps } from './types';
 declare const Logo: ({ brand, variant, size, width, height, ...rest }: LogoProps) => JSX.Element | null;
 export default Logo;

package/ui/Elements/Paragraph/Paragraph.d.ts

@@ -0,0 +1,2 @@
+declare const Paragraph: () => import("react/jsx-runtime").JSX.Element;
+export default Paragraph;

package/ui/Elements/Paragraph/Paragraph.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Paragraph = function () { return _jsx("p", { children: "paragraph" }); };
+export default Paragraph;

package/ui/Elements/Paragraph/index.d.ts

@@ -0,0 +1,3 @@
+import Paragraph from './Paragraph';
+export { Paragraph };
+export default Paragraph;

package/ui/Elements/Paragraph/index.js

@@ -0,0 +1,3 @@
+import Paragraph from './Paragraph';
+export { Paragraph };
+export default Paragraph;

package/ui/Elements/Paragraph/stories/Paragraph.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/ui/Elements/Paragraph/stories/Paragraph.stories.js

@@ -0,0 +1,34 @@
+import { Paragraph } from '../';
+var meta = {
+    title: 'Elements/Paragraph',
+    component: Paragraph,
+    tags: ['autodocs'],
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export var Primary = {
+    args: {
+        primary: true,
+        label: 'Paragraph',
+    },
+};
+export var Secondary = {
+    args: {
+        label: 'Paragraph',
+    },
+};
+export var Large = {
+    args: {
+        size: 'large',
+        label: 'Paragraph',
+    },
+};
+export var Small = {
+    args: {
+        size: 'small',
+        label: 'Paragraph',
+    },
+};

package/ui/Elements/Select/themes/formStyles.d.ts

@@ -8,6 +8,9 @@ type CustomTheme = Omit<BaseStylesTheme, 'colors'> & {
         inputBorderHoverColor: string;
         menuHoverBackgroundColor: string;
         dropdownIndicatorColor: string;
+        hoverToActiveOptionBackground: string;
+        scrollbarThumbColor: string;
+        scrollbarTrackColor: string;
     };
     textWeightRegular: string;
     textWeightSemiBold: string;

package/ui/Elements/Select/themes/formStyles.js

@@ -58,7 +58,13 @@ export var CustomStyles = __assign(__assign({}, baseStylesConfig), { control: fu
             marginBottom: '2px',
             lineHeight: '22px',
             borderRadius: th.radius('ml')({ theme: selectProps === null || selectProps === void 0 ? void 0 : selectProps.systemTheme }),
-            '&:hover': { backgroundColor: !isDisabled ? theme.colors.menuHoverBackgroundColor : undefined },
+            '&:hover': {
+                backgroundColor: isSelected
+                    ? theme.colors.hoverToActiveOptionBackground
+                    : !isDisabled
+                        ? theme.colors.menuHoverBackgroundColor
+                        : undefined,
+            },
         };
     }, menu: function (styles, state) {
         var _a;
@@ -95,6 +101,9 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
         menuBackgroundColor: th.color('white')({ theme: theme }),
         menuHoverBackgroundColor: th.color('bgLightGray1')({ theme: theme }),
         dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
+        hoverToActiveOptionBackground: th.color('red30')({ theme: theme }),
+        scrollbarThumbColor: th.color('lightGray5')({ theme: theme }),
+        scrollbarTrackColor: th.color('bgLightGray1')({ theme: theme }),
     };
     return function (reactSelectTheme) {
         return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: useFilterSubvariant ? '32px' : '38px', textWeightRegular: th.fontWeight('regular')({ theme: theme }), textWeightSemiBold: th.fontWeight('semiBold')({ theme: theme }), textWeightBold: th.fontWeight('bold')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });

package/ui/Elements/SpaceAround/SpaceAround.d.ts

@@ -1,3 +1,3 @@
-import type { Props } from './types';
+import { Props } from './types';
 declare const SpaceAroundWrap: ({ children, spaceBetween, spaceAround, ...rest }: Props) => JSX.Element;
 export default SpaceAroundWrap;

package/ui/Elements/Spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-import type { ISpinner } from './types';
+import { ISpinner } from './types';
 export declare const appearanceToColorMap: {
     error: string;
     concept: string;

package/ui/Elements/Text/types.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 export type TextProps = {
-    children?: ReactNode | ReactNode[];
+    children?: string | number | JSX.Element | (JSX.Element | undefined)[];
     fontSize?: number;
     fontWeight?: string;
     variant?: 'normal' | 'medium' | 'semiBold' | 'bold';

package/ui/Elements/Toggle/Toggle.d.ts

@@ -1,3 +1,3 @@
-import type { Props } from './types';
+import { Props } from './types';
 declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, readOnly, ...rest }: Props) => JSX.Element;
 export default Toggle;

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useId } from 'react';
+import { memo } from 'react';
 import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
 import { th, useTheme } from '@xstyled/styled-components';
 var Checkbox = function (_a) {
     var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;
     var theme = useTheme();
     var themeSize = th.fontSize(size)({ theme: theme });
-    var id = useId();
-    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name && "".concat(name, "Checkbox"), id: id }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { htmlFor: id, children: label })] }));
+    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name && "".concat(name, "Checkbox") }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { children: label })] }));
 };
 export default memo(Checkbox);

package/ui/Forms/Checkbox/stories/Checkbox.stories.js

@@ -9,7 +9,7 @@ export default meta;
 export var CheckboxChecked = {
     args: {
         checked: true,
-        onChange: function () { return console.log('Clicked'); },
+        onChange: function () { },
         label: 'Checked',
     },
 };