@mailstep/design-system 0.8.16-beta.2 → 0.8.16-beta.21

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

@@ -14,7 +14,7 @@ export declare const calculatePaginator: (page: number, rowsPerPage: number) =>
     offset: number;
     limit: number;
 };
-export declare const createFilterType: (columnDefinition: ColumnDefinition) => FilterProps["type"];
+export declare const createFilterType: (columnDefinition: ColumnDefinition) => FilterProps['type'];
 export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
 export declare const getGroupClassNames: (group?: Group) => string;
 export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;

package/ui/Blocks/Header/components/MenuItems/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const MenuItemsList: import('styled-components').StyledComponent<"ul", import('@xstyled/system').Theme, {}, never>;
 export declare const MenuItemsListItem: import('styled-components').StyledComponent<"li", import('@xstyled/system').Theme, {
-    pointer?: boolean;
+    pointer?: boolean | undefined;
 }, never>;

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '@xstyled/styled-components';
-export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"], ["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"])));
+export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n"], ["\n  display: flex;\n  gap: 10px;\n"])));
 export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"], ["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"])), function (_a) {
     var pointer = _a.pointer;
     return pointer && 'cursor: pointer;';

package/ui/Blocks/Header/hooks/useChangeLanguage.js

@@ -2,7 +2,6 @@ export var useChangeLanguage = function (_a) {
     var onChangeLanguage = _a.onChangeLanguage;
     var handleChangeLanguage = function (languageCode) {
         onChangeLanguage === null || onChangeLanguage === void 0 ? void 0 : onChangeLanguage(languageCode);
-        location.reload();
     };
     return {
         handleChangeLanguage: handleChangeLanguage

package/ui/Blocks/Header/stories/Header.stories.d.ts

@@ -4,22 +4,22 @@ declare const meta: {
     title: string;
     component: FC<{
         homeLink: string;
-        isMobileMenuOpen?: boolean;
-        logo?: import('../../..').Brand;
-        logoVariant?: import('../../..').Variant;
-        logoSrc?: string;
-        logoSrcWidth?: string;
-        user?: import('../types').User | null;
-        currentLanguage?: string;
-        hasUserMenu?: boolean;
-        rightMenuItems?: import('../../SideMenu').MenuItemType[];
-        languageItems?: import('../../LanguageSwitch').LanguageItem[];
-        showLanguageWithTitle?: boolean;
-        languageFlagWrapBackgroundColor?: string;
-        onOpenMobileSideMenu?: () => void;
-        onChangeLanguage?: (language: string) => void;
-        onLogout?: () => void;
-        withLanguageSwitch?: boolean;
+        isMobileMenuOpen?: boolean | undefined;
+        logo?: import('../../..').Brand | undefined;
+        logoVariant?: import('../../..').Variant | undefined;
+        logoSrc?: string | undefined;
+        logoSrcWidth?: string | undefined;
+        user?: import('../types').User | null | undefined;
+        currentLanguage?: string | undefined;
+        hasUserMenu?: boolean | undefined;
+        rightMenuItems?: import('../../SideMenu').MenuItemType[] | undefined;
+        languageItems?: import('../../LanguageSwitch').LanguageItem[] | undefined;
+        showLanguageWithTitle?: boolean | undefined;
+        languageFlagWrapBackgroundColor?: string | undefined;
+        onOpenMobileSideMenu?: (() => void) | undefined;
+        onChangeLanguage?: ((language: string) => void) | undefined;
+        onLogout?: (() => void) | undefined;
+        withLanguageSwitch?: boolean | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Blocks/Header/styles.js

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { headerHeight } from './utils/constants';
 import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n"])), headerHeight, th.color('lightGray7'));
+export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"])), headerHeight, th.color('lightGray7'));
 export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 export var LanguageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n"])));
-export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 20px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 20px;\n  align-items: center;\n"])));
+export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/ui/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -1,5 +1,5 @@
 export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isDisabled?: boolean;
-    hasRemove?: boolean;
+    isDisabled?: boolean | undefined;
+    hasRemove?: boolean | undefined;
 }, never>;
 export declare const HiddenInput: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/ImageList/components/CloseButton/styles.d.ts

@@ -1,3 +1,3 @@
 export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isDisabled?: boolean;
+    isDisabled?: boolean | undefined;
 }, never>;

package/ui/Blocks/ImageList/components/ImageElement/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Image: import('styled-components').StyledComponent<"img", import('@xstyled/system').Theme, {
-    selected?: boolean;
+    selected?: boolean | undefined;
 }, never>;
 export declare const ImageWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     visible: boolean;

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

@@ -1,6 +1,6 @@
 export declare const ImageListContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Control: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isLeft?: boolean;
+    isLeft?: boolean | undefined;
     isDisabled: boolean;
-    hasRemove?: boolean;
+    hasRemove?: boolean | undefined;
 }, never>;

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -1,15 +1,20 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import DropdownMenu from '../../Elements/DropdownMenu';
 import Icon from '../../Elements/Icon/Icon';
-import { useClickOutside } from '../Modal/hooks/useClickOutside';
-import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap, StyledDropdownMenu } from './styles';
+import Popover from '../Popover';
+import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap } from './styles';
+var placementMap = {
+    left: 'bottom-start',
+    right: 'bottom-end'
+};
 var LanguageSwitch = function (_a) {
     var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, withTitle = _a.withTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor;
     var _c = useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
+    var flagWrapRef = useRef(null);
     var onClose = useCallback(function () {
         setFlagDropdownVisible(false);
     }, []);
-    var flagMenuRef = useClickOutside({ onClose: onClose });
     var handleFlagClick = useCallback(function () {
         setFlagDropdownVisible(!flagDropdownVisible);
     }, [flagDropdownVisible]);
@@ -30,6 +35,6 @@ var LanguageSwitch = function (_a) {
     }, [filteredLanguages, languageToggle]);
     if (!activeLanguageObj || !languageItems)
         return null;
-    return (_jsxs(LanguageSwitchWrap, { ref: flagMenuRef, children: [_jsxs(LanguageFlagWrap, { onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), _jsx(StyledDropdownMenu, { showMenu: flagDropdownVisible, items: formattedLanguages, placement: placement })] }));
+    return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(Popover, { parentRef: flagWrapRef, onClose: onClose, placement: placementMap[placement], children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
 };
 export default LanguageSwitch;

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

@@ -1,11 +1,6 @@
-import { Placement } from './types';
-
 export declare const StyledFlag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledDropdownMenu: import('styled-components').StyledComponent<(<T extends import('../../Elements/DropdownMenu/types').Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import('../../Elements/DropdownMenu/types').DropdownMenuProps<T>) => import('react').ReactElement), import('@xstyled/system').Theme, {
-    placement: Placement;
-}, never>;
 export declare const LanguageSwitchWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const LanguageFlagWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    backgroundColor?: string;
-    withTitle?: boolean;
+    backgroundColor?: string | undefined;
+    withTitle?: boolean | undefined;
 }, never>;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -2,22 +2,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import DropdownMenu from '../../Elements/DropdownMenu';
 import styled from '@xstyled/styled-components';
 export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"])));
-export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"], ["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"])), function (_a) {
-    var placement = _a.placement;
-    return "".concat(placement, ": -5px");
-}, function (_a) {
-    var placement = _a.placement;
-    return "".concat(placement, ": 15px");
-});
-export var LanguageSwitchWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
-export var LanguageFlagWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"])), function (_a) {
+export var LanguageSwitchWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
+export var LanguageFlagWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"])), function (_a) {
     var withTitle = _a.withTitle;
     return (withTitle ? '16px' : '8px');
 }, function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor || 'white';
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/LoginPage/stories/LoginPage.stories.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

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

@@ -1,7 +1,6 @@
-import { BackgroundImages } from './types';
-
+/// <reference types="react" />
 export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    backgroundImage?: BackgroundImages;
+    backgroundImage?: "mailship" | undefined;
 }, never>;
 export declare const LanguageBox: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const CardBodyWithLanguage: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

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

@@ -1,16 +1,16 @@
 import { Variant } from './types';
 
 export declare const DialogOverlay: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    backgroundColor?: string;
+    backgroundColor?: string | undefined;
 }, never>;
 export declare const DialogWindow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $backgroundColor?: string;
-    $minWidth?: string;
-    $minHeight?: string;
-    $maxWidth?: string;
-    $maxHeight?: string;
+    $backgroundColor?: string | undefined;
+    $minWidth?: string | undefined;
+    $minHeight?: string | undefined;
+    $maxWidth?: string | undefined;
+    $maxHeight?: string | undefined;
     variant: Variant;
-    top?: string;
+    top?: string | undefined;
 }, never>;
 export declare const HeaderContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     variant: Variant;

package/ui/Blocks/Modal/styles.js

@@ -2,8 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { css, th } from '@xstyled/styled-components';
 import { createRgba } from '../../utils';
+import styled, { css, th } from '@xstyled/styled-components';
 var Component;
 (function (Component) {
     Component["Header"] = "header";
@@ -17,28 +17,28 @@ var variantStyles = function (component, variant) {
         header: {
             default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "], ["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "])), th.color('lightGray6')),
             compact: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "], ["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "])), th.color('lightGray6')),
-            mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "]))),
+            mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "])))
         },
         dialogWindow: {
             default: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
             compact: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
-            mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 0;\n        max-width: 100% !important;\n      "], ["\n        border-radius: 0;\n        max-width: 100% !important;\n      "]))),
+            mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 0;\n        max-width: 100% !important;\n      "], ["\n        border-radius: 0;\n        max-width: 100% !important;\n      "])))
         },
         contentContainer: {
             default: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "], ["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "]))),
             compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n      "], ["\n        padding: 20px 20px 15px;\n      "]))),
-            mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "]))),
+            mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "])))
         },
-        title: {},
+        title: {}
     }[component][variant]);
 };
 export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"])), function (_a) {
-    var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
-    return createRgba(backgroundColor, 0.6);
+    var backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return createRgba(backgroundColor || theme.colors.blue2, 0.6);
 });
 export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"], ["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"])), function (_a) {
     var $backgroundColor = _a.$backgroundColor;
-    return $backgroundColor || '#fefefe';
+    return $backgroundColor || th.color('white');
 }, function (_a) {
     var $minWidth = _a.$minWidth;
     return $minWidth || '10%';

package/ui/Blocks/Scheduler/components/Groups/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const GroupContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const GroupItem: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    bg?: string;
+    bg?: string | undefined;
     groupsCount: number;
 }, never>;
 export declare const Gap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/Scheduler/components/TimeSlots/styles.d.ts

@@ -3,7 +3,7 @@ export declare const TimeRow: import('styled-components').StyledComponent<"div",
     disabled: boolean;
 }, never>;
 export declare const EmptyTimeSlot: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isSlotSelected?: boolean;
+    isSlotSelected?: boolean | undefined;
     activeTime: boolean;
     groupsCount: number;
 }, never>;

package/ui/Blocks/SideMenu/components/Footer.d.ts

@@ -5,7 +5,7 @@ export declare const FooterWrap: import('styled-components').StyledComponent<"di
 }, never>;
 export declare const SizeToggle: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isCompact: boolean;
-    $lightMode?: boolean;
+    $lightMode?: boolean | undefined;
 }, never>;
 type Props = {
     isCompact: boolean;

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -6,8 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
 import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
-import { css, x } from '@xstyled/styled-components';
-import { useTheme } from '@xstyled/styled-components';
+import { css, x, useTheme } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
     var isLeftMenuOpen = _a.isLeftMenuOpen;
@@ -19,6 +18,6 @@ export var HamburgerMenuButton = function (_a) {
     var theme = useTheme();
     var neutralColor = th.color('neutral20')({ theme: theme });
     var dispalyedIcon = isLeftMenuOpen ? (_jsx(MobileCancel, { fill: neutralColor })) : (_jsx(HamburgerMenuIcon, { fill: neutralColor, stroke: 'none' }));
-    return (_jsx(HamburgerMenuWrapper, { mr: 3, onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
+    return (_jsx(HamburgerMenuWrapper, { mr: "8px", onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/SideMenu/stories/SideMenu.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const meta: {
     title: string;
     component: import('react').FC<import('../types').SideMenuProps>;

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

@@ -1,40 +1,40 @@
 import { NavLink } from 'react-router-dom';
 
 export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isLeftMenuOpen?: boolean;
+    isLeftMenuOpen?: boolean | undefined;
 }, never>;
 export declare const SubItemsWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const ItemsSeparator: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const ItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $isCompact?: boolean;
-    isSubitem?: boolean;
+    $isCompact?: boolean | undefined;
+    isSubitem?: boolean | undefined;
 }, never>;
 export declare const ItemDropdownArrow: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
-    $lightMode?: boolean;
+    $lightMode?: boolean | undefined;
 }, never>;
 export declare const TooltipItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const ItemLinkWrap: import('styled-components').StyledComponent<typeof NavLink, import('@xstyled/system').Theme, {
-    $isCompact?: boolean;
-    $lightMode?: boolean;
-    appearance?: "gray" | "default";
+    $isCompact?: boolean | undefined;
+    $lightMode?: boolean | undefined;
+    appearance?: "default" | "gray" | undefined;
 }, never>;
 export declare const MenuItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $isCompact?: boolean;
-    $lightMode?: boolean;
-    hasChildren?: boolean;
-    isHovering?: boolean;
+    $isCompact?: boolean | undefined;
+    $lightMode?: boolean | undefined;
+    hasChildren?: boolean | undefined;
+    isHovering?: boolean | undefined;
 }, never>;
 export declare const ItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
-    $isCompact?: boolean;
+    $isCompact?: boolean | undefined;
 }, never>;
 export declare const TooltipWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $lightMode?: boolean;
+    $lightMode?: boolean | undefined;
 }, never>;
 export declare const OverflowWithEllipsis: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
 export declare const TopLevelWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isCompact: boolean;
-    isLeftMenuOpen?: boolean;
-    lightMode?: boolean;
+    isLeftMenuOpen?: boolean | undefined;
+    lightMode?: boolean | undefined;
 }, never>;
 export declare const ScrollWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const BodyWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {

package/ui/Blocks/Stepper/components/StepCircle/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const StepCircleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isCompleted?: boolean;
-    isActiveStep?: boolean;
+    isCompleted?: boolean | undefined;
+    isActiveStep?: boolean | undefined;
 }, never>;

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -1,9 +1,9 @@
 export declare const StepItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isActiveStep: boolean;
-    isDisabled?: boolean;
-    isVisible?: boolean;
+    isDisabled?: boolean | undefined;
+    isVisible?: boolean | undefined;
     total: number;
-    onClick?: () => void;
+    onClick?: (() => void) | undefined;
 }, never>;
 export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isActiveStep: boolean;

package/ui/Blocks/Table/stories/Table.stories.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 declare const meta: {
     title: string;
     component: import('react').FC<{
         columnDefinitions: import('../types').ColumnDefinitions;
-        data?: import('../types').DataRow[] | null;
-        onRowClick?: (dataRow: import('../types').DataRow) => void;
+        data?: import('../types').DataRow[] | null | undefined;
+        onRowClick?: ((dataRow: import('../types').DataRow) => void) | undefined;
     }>;
     tags: string[];
     argTypes: {};

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

@@ -1,12 +1,13 @@
-export declare const StyledImageBox: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+/// <reference types="react" />
+export declare const StyledImageBox: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
 export declare const StyledTabWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 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;
-    minWidth?: string | string[];
+    disabled?: boolean | undefined;
+    minWidth?: string | string[] | undefined;
 }, never>;
 export declare const TabPanel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $mb?: string;
-    $mt?: string;
+    $mb?: string | undefined;
+    $mt?: string | undefined;
 }, never>;

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

@@ -1,28 +1,29 @@
-export declare const StyledAlert: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
-    $inline?: boolean;
+/// <reference types="react" />
+export declare const StyledAlert: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+    $inline?: boolean | undefined;
     $colorFill: string;
     $bgColor: string;
 }, "color">;
-export declare const VerticalSeparator: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
-    $colorFill?: string;
+export declare const VerticalSeparator: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+    $colorFill?: string | undefined;
 }, "color">;
-export declare const IconWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const IconWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
 export declare const Title: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const Text: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const LinkWrapper: import('styled-components').StyledComponent<import('react').FC<{
     as?: any;
-    children?: React.ReactNode;
-    to?: string | {
-        pathname?: string;
-        search?: string;
-        hash?: string;
-        state?: object;
-    } | Function;
-    target?: string;
-    color?: string;
-    size?: number | "inherit";
-    disabled?: boolean;
-    onClick?: Function;
+    children?: import('react').ReactNode;
+    to?: string | Function | {
+        pathname?: string | undefined;
+        search?: string | undefined;
+        hash?: string | undefined;
+        state?: object | undefined;
+    } | undefined;
+    target?: string | undefined;
+    color?: string | undefined;
+    size?: number | "inherit" | undefined;
+    disabled?: boolean | undefined;
+    onClick?: Function | undefined;
 }>, any, {
     $colorFill: string;
 }, never>;

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import('react').FC<import('..').AsyncSelectProps>;
+    component: import('react').FC<import('../AsyncSelect').AsyncSelectProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/ui/Elements/BarChartSymbol/styles.d.ts

@@ -4,6 +4,6 @@ export declare const Bar: import('styled-components').StyledComponent<"div", imp
     index: number;
     total: number;
     selected: number;
-    color?: string;
-    width?: number;
+    color?: string | undefined;
+    width?: number | undefined;
 }, never>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type BorderedBoxProps = {
     children: React.ReactNode;
     className?: string;