@mailstep/design-system 0.6.3-beta.9 → 0.6.4

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -45,19 +45,6 @@ var CommonGrid = function (_a) {
     var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _g = gridActions.addFilter, addFilter = _g === void 0 ? defaultVoidFunction : _g, _h = gridActions.addSorting, addSorting = _h === void 0 ? defaultVoidFunction : _h, _j = gridActions.setColumnWidth, setColumnWidth = _j === void 0 ? defaultVoidFunction : _j, _k = gridActions.setColumnsOrder, setColumnsOrder = _k === void 0 ? defaultVoidFunction : _k;
     var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
     useUxReset(rowsData, uxState, clearUxState);
-    var checksColumnsOrder = React.useCallback(function (colsOrder) {
-        var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
-        var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });
-        if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) {
-            console.error('Grid can have only sticky column on each side.');
-        }
-        if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0) {
-            console.error('The left sticky column should be the first one in a row');
-        }
-        if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1) {
-            console.error('The Right sticky column should be the last one in a row');
-        }
-    }, [columnsDefinitions]);
     var GridMessage;
     var messageClass = 'info';
     if (isLoading)

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -40,7 +40,7 @@ import ManageColumnForm from './components/ManageColumnForm';
 import { Trans } from '@lingui/react';
 import { Settings2 } from '../../Elements/Icon/icons/Settings2';
 var StyledCommonGrid = function (props) {
-    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, hideColumnConfig = props.hideColumnConfig, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "hideColumnConfig"]);
+    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
     useEffect(function () {
@@ -60,7 +60,6 @@ var StyledCommonGrid = function (props) {
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         onClose: onClose,
-        hideColumnConfig: hideColumnConfig,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig, handleDragEnd = _d.handleDragEnd, onCloseForm = _d.onCloseForm, displayColumnsDefinitions = _d.displayColumnsDefinitions, manageColumnsFormDefinitions = _d.manageColumnsFormDefinitions;
     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, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, 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: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
 };

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

@@ -6,9 +6,8 @@ type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
     onClose?: () => void;
-    hideColumnConfig?: boolean;
 };
-declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose, hideColumnConfig }: Props) => {
+declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }: Props) => {
     columnsConfigValues: string[];
     setColumnsConfigOptions: import("react").Dispatch<import("react").SetStateAction<{
         [x: string]: {

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

@@ -18,20 +18,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useCallback, useMemo, useState } from 'react';
-import { isColumnOn } from '../utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { checksColumnsOrder, isColumnOn } from '../utils';
 var useManageColumn = function (_a) {
-    var columns = _a.columns, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, onClose = _a.onClose, hideColumnConfig = _a.hideColumnConfig;
+    var columns = _a.columns, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, onClose = _a.onClose;
     var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig, setColumnsOrder = gridActions.setColumnsOrder;
     var columnConfig = gridSelectors.columnConfig, columnsOrder = gridSelectors.columnsOrder;
-    var initialColumnsOrder = useMemo(function () { return columns.map(function (col) { return col.name; }); }, []);
+    var initialColumnsOrder = useMemo(function () { return columns === null || columns === void 0 ? void 0 : columns.map(function (col) { return col.name; }); }, [columns]);
     var columnsOrderValue = (columnsOrder === null || columnsOrder === void 0 ? void 0 : columnsOrder.length) ? columnsOrder : initialColumnsOrder;
-    var _b = useState(__assign({}, columnConfig)), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
+    var _b = useState(__assign({}, (columnConfig !== null && columnConfig !== void 0 ? columnConfig : {}))), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
     var _c = useState(columnsOrderValue), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
-    console.log(9, 'columnConfig', columnConfig);
-    console.log('columnsOrder', columnsOrder);
-    console.log('columnsConfigOptions', columnsConfigOptions);
-    console.log('updatedColumnsOrder', updatedColumnsOrder);
     var columnsConfigValues = useMemo(function () {
         return columns === null || columns === void 0 ? void 0 : columns.filter(function (column) {
             var _a;
@@ -41,19 +37,29 @@ var useManageColumn = function (_a) {
     }, [columnConfig, columns]);
     var onConfirmForm = useCallback(function () {
         setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions);
-        setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(updatedColumnsOrder);
+        setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(columnsConfigValues);
         onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [columnsConfigOptions, updatedColumnsOrder, onClose, setColumnConfig]);
+    }, [columnsConfigOptions, updatedColumnsOrder, onClose, setColumnConfig, setColumnsOrder]);
     var resetColumnConfig = useCallback(function () {
         setUpdatedColumnsOrder(initialColumnsOrder);
         resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid();
         onClose === null || onClose === void 0 ? void 0 : onClose();
-        setColumnsConfigOptions(columnConfig || {});
-    }, [onClose, resetGrid]);
+        setColumnsConfigOptions({});
+    }, [onClose, resetGrid, initialColumnsOrder, columnConfig]);
     var onCloseForm = useCallback(function () {
-        setUpdatedColumnsOrder(columnsOrder !== null && columnsOrder !== void 0 ? columnsOrder : []);
+        setUpdatedColumnsOrder(columnsOrderValue);
         onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, []);
+        setColumnsConfigOptions({});
+    }, [columnsOrderValue, onClose]);
+    var getSortedColumns = useCallback(function (orderValues, isManageModal) {
+        return (!isManageModal ? columns.filter(function (column) { return isColumnOn(column, columnConfig); }) : columns).toSorted(function (col1, col2) {
+            var i = (orderValues || []).indexOf(col1.name);
+            var j = (orderValues || []).indexOf(col2.name);
+            return i > j ? 1 : i < j ? -1 : 0;
+        });
+    }, [columnConfig, columns]);
+    var displayColumnsDefinitions = useMemo(function () { return getSortedColumns(columnsOrderValue, false); }, [columnsOrderValue]);
+    var manageColumnsFormDefinitions = useMemo(function () { return getSortedColumns(updatedColumnsOrder, true); }, [updatedColumnsOrder]);
     var handleDragEnd = useCallback(function (isManageModal) {
         if (isManageModal === void 0) { isManageModal = false; }
         return function (item) {
@@ -63,33 +69,23 @@ var useManageColumn = function (_a) {
             if (to === from || !destination) {
                 return;
             }
-            var newOrderColumns = __spreadArray([], (isManageModal ? updatedColumnsOrder : columnsOrder !== null && columnsOrder !== void 0 ? columnsOrder : []), true);
+            var columns = isManageModal ? manageColumnsFormDefinitions : displayColumnsDefinitions;
+            var newOrderColumns = __spreadArray([], (isManageModal ? updatedColumnsOrder : columnsOrderValue), true);
             var fromIndex = newOrderColumns.findIndex(function (column) { return columns[from].name === column; });
-            var toIndex = newOrderColumns.findIndex(function (column) { return to && columns[to].name === column; });
+            var toIndex = newOrderColumns.findIndex(function (column) { return columns[to !== null && to !== void 0 ? to : 0].name === column; });
             // move column from a position to the new position
             var column = newOrderColumns[fromIndex];
             newOrderColumns.splice(fromIndex, 1);
-            newOrderColumns.splice(toIndex < 0 ? 0 : toIndex, 0, column);
+            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
             if (!isManageModal) {
                 setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
             }
             setUpdatedColumnsOrder(newOrderColumns);
         };
-    }, [columns, updatedColumnsOrder]);
-    var displayColumnsDefinitions = useMemo(function () {
-        return (!hideColumnConfig ? columns.filter(function (column) { return isColumnOn(column, columnConfig); }) : columns).sort(function (col1, col2) {
-            var i = (columnsOrder || []).indexOf(col1.name);
-            var j = (columnsOrder || []).indexOf(col2.name);
-            return i > j ? 1 : i < j ? -1 : 0;
-        });
-    }, [hideColumnConfig, columnConfig, columns, columnsOrder]);
-    var manageColumnsFormDefinitions = useMemo(function () {
-        return (!hideColumnConfig ? columns.filter(function (column) { return isColumnOn(column, columnConfig); }) : 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;
-        });
-    }, [hideColumnConfig, columnConfig, columns, columnsOrder]);
+    }, [updatedColumnsOrder, columnsOrderValue, setColumnsOrder, manageColumnsFormDefinitions, displayColumnsDefinitions]);
+    useEffect(function () {
+        checksColumnsOrder(columnsOrderValue, columns);
+    }, []);
     return {
         columnsConfigValues: columnsConfigValues,
         setColumnsConfigOptions: setColumnsConfigOptions,

package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.js

@@ -6,7 +6,7 @@ import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true, hideColumnConfig: true }) })); };
+export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true }) })); };
 LoadingState.story = {
     name: 'Loading state',
 };

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.js

@@ -6,7 +6,7 @@ import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
+export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
 ManyColumnsNoScrollLayout.story = {
     name: 'many columns no-scroll layout',
 };

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.js

@@ -6,7 +6,7 @@ import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
+export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
 ManyColumnsNormalLayoutANoControls.story = {
     name: 'many columns normal layout a no controls',
 };

package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.js

@@ -8,7 +8,7 @@ export default {
     title: '@Blocks/CommonGrid',
 };
 export var WithCustomGridActions = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions, hideColumnConfig: true }) }));
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions }) }));
 };
 WithCustomGridActions.story = {
     name: 'With custom grid actions',

package/ui/Blocks/CommonGrid/types.d.ts

@@ -255,7 +255,6 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     onBatchAction?: OnBatchActionFn;
     columnLayout?: ColumnLayout;
     confirmOnReset?: () => boolean;
-    hideColumnConfig?: boolean;
     className?: string;
     gridRef?: React.MutableRefObject<HTMLElement>;
     minColumnWidth?: number;
@@ -299,7 +298,7 @@ export type GridProps = Omit<CommonGridProps, 'filters'> & {
     queryRowsParam?: number | string;
     customPaginationHandler?: (page: number, rows: number) => void;
 };
-export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'hideColumnConfig' | 'minColumnWidth' | 'columnLayout'>;
+export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'minColumnWidth' | 'columnLayout'>;
 export type Item = {
     label: string | JSX.Element;
     value: string;

package/ui/Blocks/CommonGrid/utils/index.d.ts

@@ -18,3 +18,4 @@ export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickT
 export declare const GRID_MIN_ROWS = 6;
 export declare const rowHeight = 40;
 export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;
+export declare const checksColumnsOrder: (colsOrder: string[], columnsDefinitions: ColumnDefinition[]) => void;

package/ui/Blocks/CommonGrid/utils/index.js

@@ -77,3 +77,16 @@ export var getFilters = function (optimizeFilters) {
         filters.text.defaultExtraProps = { defaultComparator: 'eq' };
     return filters;
 };
+export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
+    var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
+    var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });
+    if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) {
+        console.error('Grid can have only sticky column on each side.');
+    }
+    if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0) {
+        console.error('The left sticky column should be the first one in a row');
+    }
+    if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1) {
+        console.error('The Right sticky column should be the last one in a row');
+    }
+};

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, } from './styles';
+import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper, } 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(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' }))] })] }))] }) }) }));
+    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' }))] })] }))] }) }) }));
 });

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,6 +40,10 @@ 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,4 +21,8 @@ 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,9 +67,16 @@ 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  > 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) {
+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) {
     var hasSpaceBetween = _a.hasSpaceBetween;
     return (hasSpaceBetween ? 'space-between' : 'flex-end');
 });
-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;
+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;

package/ui/Blocks/Tabs/Tabs.js

@@ -5,11 +5,11 @@ import { Text } from '../../Elements/Text';
 import { Icon } from '../../Elements/Icon';
 var Tab = function (_a) {
     var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;
-    var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount;
+    var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount, disabled = tabDefinition.disabled;
     var handleOnClick = useCallback(function () {
         onTabSwitch(value);
     }, [onTabSwitch, value]);
-    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: handleOnClick, active: isActive, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), isActive && badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
+    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), isActive && badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
 };
 export var Tabs = function (_a) {
     var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;

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

@@ -4,6 +4,7 @@ export declare const StyledTabWrapper: import("styled-components").StyledCompone
 export declare const RoundedWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     active: boolean;
+    disabled?: boolean | undefined;
 }, never>;
 export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $mb?: string | undefined;

package/ui/Blocks/Tabs/styles.js

@@ -7,7 +7,10 @@ export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1
 export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"])));
 export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"], ["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"])), th.color('lightGray7'));
 var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
-export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"])), th.color('gray'), th.color('typoPrimary'), activeTab, function (_a) {
+export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"])), th.color('gray'), th.color('typoPrimary'), function (_a) {
+    var disabled = _a.disabled;
+    return !disabled && activeTab;
+}, function (_a) {
     var active = _a.active;
     return (active ? activeTab : '');
 });

package/ui/Blocks/Tabs/types.d.ts

@@ -4,6 +4,7 @@ export type TabDefinition = {
     icon?: string;
     badgeCount?: number;
     default?: true;
+    disabled?: boolean;
 };
 export type TabsProps = {
     tabsDefinition: TabDefinition[];

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: "danger" }), _jsx("span", { children: children })] }) }));
+    return (_jsx(StyledWrapper, { children: _jsxs(ErrorWrap, { className: appearance, children: [_jsx(Icon, { icon: "deleteX" }), _jsx("span", { children: children })] }) }));
 };
 export default ErrorMessage;
 var templateObject_1, templateObject_2, templateObject_3;

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

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

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useId } 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 });
-    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 })] }));
+    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 })] }));
 };
 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 () { },
+        onChange: function () { return console.log('Clicked'); },
         label: 'Checked',
     },
 };

package/ui/Forms/Checkbox/styles.d.ts

@@ -8,4 +8,4 @@ export declare const CheckIcon: import("styled-components").StyledComponent<({ i
 export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/Checkbox/styles.js

@@ -22,5 +22,5 @@ export var CheckboxWrap = styled.div(templateObject_3 || (templateObject_3 = __m
     var size = _a.size;
     return size;
 });
-export var Label = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
+export var Label = styled.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Forms/RadioButton/RadioButton.js

@@ -22,8 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from './styles';
+import { useId } from 'react';
 var RadioButton = function (_a) {
     var label = _a.label, id = _a.id, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, rest = __rest(_a, ["label", "id", "name", "disabled", "onChange"]);
-    return (_jsxs(Wrapper, { children: [_jsxs(Item, { children: [_jsx(StyledRadio, __assign({ type: "radio", id: id, name: name, disabled: disabled, onChange: onChange }, rest)), _jsx(PaintoverLayer, { disabled: disabled, children: _jsx(CenterDot, {}) })] }), label && _jsx(Label, { children: label })] }));
+    var customId = useId();
+    var inputId = id || customId;
+    return (_jsxs(Wrapper, { children: [_jsxs(Item, { children: [_jsx(StyledRadio, __assign({ type: "radio", id: inputId, name: name, disabled: disabled, onChange: onChange }, rest)), _jsx(PaintoverLayer, { disabled: disabled, children: _jsx(CenterDot, {}) })] }), label && _jsx(Label, { htmlFor: inputId, children: label })] }));
 };
 export default RadioButton;

package/ui/Forms/RadioButton/styles.d.ts

@@ -7,4 +7,4 @@ export declare const CenterDot: import("styled-components").StyledComponent<"spa
 export declare const StyledRadio: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
     disabled: boolean;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/RadioButton/styles.js

@@ -11,5 +11,5 @@ export var StyledRadio = styled.input(templateObject_5 || (templateObject_5 = __
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 });
-export var Label = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
+export var Label = styled.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/index.d.ts

@@ -18,7 +18,6 @@ import Line from './Elements/Line';
 import Link from './Elements/Link';
 import Logo from './Elements/Logo';
 import Pagination from './Elements/Pagination';
-import Paragraph from './Elements/Paragraph';
 import Portal from './Elements/Portal';
 import ProgressBar from './Elements/ProgressBar';
 import SimpleLink from './Elements/SimpleLink';
@@ -41,7 +40,7 @@ import MultiSelect from './Elements/MultiSelect';
 import Select from './Elements/Select';
 import DropdownSelect from './Elements/DropdownSelect';
 import TextArea from './Forms/TextArea';
-export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, };
+export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';
 export * from './Blocks/LightBox';
@@ -62,7 +61,6 @@ export * from './Elements/Line';
 export * from './Elements/Link';
 export * from './Elements/Logo';
 export * from './Elements/Pagination';
-export * from './Elements/Paragraph';
 export * from './Elements/Portal';
 export * from './Elements/ProgressBar';
 export * from './Elements/SimpleLink';