@mailstep/design-system 0.4.5 → 0.4.7

package/README.md

@@ -14,12 +14,6 @@ yarn install
 yarn dev
 ```
 
-### How to use
-```
-yarn add @mailstep/design-system
-```
-and add `import 'swiper/css'` somewhere to the root app.
-
 
 #### How to publish
 In root folder run 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -28,13 +28,13 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@storybook/addon-controls": "7.6.8",
-    "@storybook/addon-essentials": "7.6.8",
-    "@storybook/addon-interactions": "7.6.8",
-    "@storybook/addon-links": "7.6.8",
-    "@storybook/blocks": "7.6.8",
-    "@storybook/react": "7.6.8",
-    "@storybook/react-webpack5": "7.6.8",
+    "@storybook/addon-controls": "7.5.2",
+    "@storybook/addon-essentials": "7.5.2",
+    "@storybook/addon-interactions": "7.5.2",
+    "@storybook/addon-links": "7.5.2",
+    "@storybook/blocks": "7.5.2",
+    "@storybook/react": "7.5.2",
+    "@storybook/react-webpack5": "7.5.2",
     "@storybook/testing-library": "0.2.2",
     "@svgr/rollup": "^8.0.1",
     "@types/node": "^20.1.7",
@@ -57,7 +57,7 @@
     "react-script": "^2.0.5",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
-    "storybook": "7.6.8",
+    "storybook": "7.5.2",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",

package/ui/Blocks/ImageList/ImageList.js

@@ -24,6 +24,6 @@ export var ImageList = function (_a) {
     var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
     return (_jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
                     var _a, _b;
-                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index), isDisabled: isDisabled }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
                 }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
 };

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

@@ -64,5 +64,5 @@ export var AddPhoto = function (_a) {
     }, [onImageUpload]);
     if (!onImageUpload)
         return null;
-    return (_jsxs(Container, { isDisabled: isDisabled, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
+    return (_jsxs(Container, { isDisabled: isDisabled, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
 };

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

@@ -7,5 +7,5 @@ export var ImageElement = function (_a) {
     var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
     if (!imageUrl)
         return null;
-    return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", h: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
+    return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
 };

package/ui/Blocks/LightBox/LightBox.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Elements/Button';
 import Modal from '../Modal';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Container, Image, ButtonContainer, Description } from './styles';
+import { Container, Image, ButtonContainer } from './styles';
 export var LightBox = function (_a) {
     var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
     if (!(images === null || images === void 0 ? void 0 : images.length))
         return null;
-    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
+    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, mobileFullscreen: true, miniCloseBtn: true, withCloseIcon: true, children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
                 var _a;
-                return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && (_jsxs(Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
+                return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
             }) }) }));
 };

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

@@ -1,4 +1,3 @@
 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, {}, never>;
 export declare const ButtonContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/LightBox/styles.js

@@ -3,8 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n"])));
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"])));
 export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
 export var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: -60px;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: -60px;\n"])));
-export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.8);\n"], ["\n  padding: 10px;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.8);\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -10,11 +10,8 @@ export type UseLightBoxHookType = () => {
 export interface ImageData {
     id: string;
     url?: string;
-    label?: string;
-    date?: string;
     smallUrl?: string;
     originalUrl?: string;
-    description?: string | null;
     withLightBoxAction?: boolean;
 }
 export interface LightBoxProps {

package/ui/Blocks/Modal/Modal.js

@@ -1,15 +1,14 @@
 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 { Icon } from '../../Elements/Icon';
+import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, H4, } from './styles';
 import { x } from '@xstyled/styled-components';
 import { Button } from '../../Elements/Button';
 import { Portal } from '../../Elements/Portal';
 import { useClickOutside } from './hooks/useClickOutside';
-import { widthMap } from './utils';
+import { topSpaceMap, widthMap } from './utils';
 export var Modal = memo(function (_a) {
-    var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, onClose = _a.onClose, _d = _a.hasFooter, hasFooter = _d === void 0 ? true : _d, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e, background = _a.background, _f = _a.ignoreClickOutside, ignoreClickOutside = _f === void 0 ? false : _f, _g = _a.closeEverywhere, closeEverywhere = _g === void 0 ? false : _g, _h = _a.withCloseIcon, withCloseIcon = _h === void 0 ? true : _h, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _j = _a.variant, variant = _j === void 0 ? 'compact' : _j, top = _a.top;
+    var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, _d = _a.topSpace, topSpace = _d === void 0 ? 'default' : _d, onClose = _a.onClose, _e = _a.hasFooter, hasFooter = _e === void 0 ? true : _e, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, _g = _a.whiteBg, whiteBg = _g === void 0 ? false : _g, _h = _a.miniCloseBtn, miniCloseBtn = _h === void 0 ? false : _h, _j = _a.ignoreClickOutside, ignoreClickOutside = _j === void 0 ? false : _j, _k = _a.closeEverywhere, closeEverywhere = _k === void 0 ? false : _k, _l = _a.withCloseIcon, withCloseIcon = _l === void 0 ? true : _l, _m = _a.mobileFullscreen, mobileFullscreen = _m === void 0 ? false : _m, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
     var closeDialog = useCallback(function () {
         if (onClose) {
             onClose();
@@ -32,5 +31,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 && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { 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, "$whiteBg": whiteBg, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$mobileFullscreen": mobileFullscreen, children: [title && hasHeader && (_jsx(HeaderContainer, { topSpace: topSpaceMap[topSpace], children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), _jsx(H4, { children: title })] }) })), _jsx(ContentContainer, { topSpace: topSpaceMap[topSpace], "$mobileFullscreen": mobileFullscreen, children: children }), hasFooter && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { 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' }))] })), hasHeader && !closeEverywhere && withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Icon, { icon: "close", size: miniCloseBtn ? '20px' : '26px' }) }))] }) }) }));
 });

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

@@ -2,21 +2,18 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").ModalProps>;
+    component: import("react").FC<import("..").ModalProps>;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Compact: Story;
-export declare const MobileFullscreen: Story;
-export declare const ModalTopPosition: Story;
 export declare const ModalWithCloseAndConfirmBtns: Story;
-export declare const ModalWithoutCloseButton: Story;
-export declare const ModalWithIconInTitle: Story;
+export declare const MobileNotificationModal: Story;
+export declare const ModalWithIcon: Story;
 export declare const ModalLoading: Story;
-export declare const ModalWithCustomBackground: Story;
+export declare const ModalWithWhiteBg: Story;
+export declare const ModalWithoutCloseIcon: Story;
 export declare const ModalWithoutHeader: Story;
 export declare const ModalWithoutFooter: Story;
 export declare const ModalWithoutHeaderAndFooter: Story;

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import Modal from '../';
+import { Modal } from '../Modal';
 var meta = {
     title: 'Blocks/Modal',
     component: Modal,
@@ -7,52 +7,26 @@ var meta = {
     argTypes: {},
 };
 export default meta;
-export var Default = {
-    args: {
-        title: 'Modal default version',
-        children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
-        variant: 'default',
-    },
-};
-export var Compact = {
-    args: {
-        title: 'Modal title',
-        children: _jsx(_Fragment, { children: "Modal compact version" }),
-        variant: 'compact',
-    },
-};
-export var MobileFullscreen = {
-    args: {
-        children: _jsx(_Fragment, { children: "Mobile full screen version without title" }),
-        variant: 'mobileFullscreen',
-    },
-};
-export var ModalTopPosition = {
-    args: {
-        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'
-    },
-};
 export var ModalWithCloseAndConfirmBtns = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with narrow width" }),
+        children: _jsx(_Fragment, { children: "Modal Content with Cancel and Submit buttons" }),
         title: 'Modal title',
         width: 'narrow',
+        onClose: function () { return console.log('Close'); },
+        onConfirm: function () { return console.log('Submit'); },
     },
 };
-export var ModalWithoutCloseButton = {
+export var MobileNotificationModal = {
     args: {
-        title: 'Note',
         children: (_jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum, inventore natus qui repellendus suscipit vitae. Alias aliquam earum et ipsa labore, laboriosam maxime numquam odio recusandae, repellat, voluptas." })),
+        title: 'Poznamka',
         width: 'narrow',
         withCloseIcon: false,
         onClose: function () { return console.log('Close'); },
         onConfirm: undefined,
     },
 };
-export var ModalWithIconInTitle = {
+export var ModalWithIcon = {
     args: {
         children: _jsx(_Fragment, { children: "Modal with icon" }),
         title: 'Modal title',
@@ -68,17 +42,25 @@ export var ModalLoading = {
         isLoading: true,
     },
 };
-export var ModalWithCustomBackground = {
+export var ModalWithWhiteBg = {
     args: {
         children: _jsx(_Fragment, { children: "Modal with white background" }),
         title: 'Modal title',
         width: 'narrow',
-        background: 'blue',
+        whiteBg: true,
+    },
+};
+export var ModalWithoutCloseIcon = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal without close icon" }),
+        title: 'Modal title',
+        width: 'narrow',
+        withCloseIcon: false,
     },
 };
 export var ModalWithoutHeader = {
     args: {
-        children: _jsx(_Fragment, { children: "This is content of the Modal without header" }),
+        children: _jsx(_Fragment, { children: "Modal without header" }),
         title: 'Modal title',
         width: 'narrow',
         hasHeader: false,

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

@@ -1,22 +1,22 @@
-import { Variant } from './types';
 export declare const DialogOverlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     backgroundColor?: string | undefined;
 }, never>;
 export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $backgroundColor?: string | undefined;
+    $whiteBg?: boolean | undefined;
     $minWidth?: string | undefined;
     $minHeight?: string | undefined;
     $maxWidth?: string | undefined;
     $maxHeight?: string | undefined;
-    variant: Variant;
-    top?: string | undefined;
+    $mobileFullscreen: boolean;
 }, never>;
 export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    variant: Variant;
+    topSpace: string;
 }, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    variant: Variant;
+    topSpace: string;
+    $mobileFullscreen: boolean;
 }, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const H4: import("styled-components").StyledComponent<"h4", import("@xstyled/system").Theme, {}, never>;
 export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Modal/styles.js

@@ -2,71 +2,44 @@ 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 styled, { th } from '@xstyled/styled-components';
 import { createRgba } from '../../utils';
-var Component;
-(function (Component) {
-    Component["Header"] = "header";
-    Component["DialogWindow"] = "dialogWindow";
-    Component["ContentContainer"] = "contentContainer";
-    Component["Title"] = "title";
-})(Component || (Component = {}));
-var variantStyles = function (component, variant) {
-    if (variant === void 0) { variant = 'default'; }
-    return ({
-        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      "]))),
-        },
-        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      "]))),
-        },
-        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      "]))),
-        },
-        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) {
+export var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\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; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\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);
 });
-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';
+export var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\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 (max-width: 576px) {\n    margin: auto;\n    ", ";\n  }\n"], ["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\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 (max-width: 576px) {\n    margin: auto;\n    ", ";\n  }\n"])), function (_a) {
+    var $whiteBg = _a.$whiteBg;
+    return ($whiteBg ? th.color('white') : '#fefefe');
 }, function (_a) {
     var $minWidth = _a.$minWidth;
     return $minWidth || '10%';
+}, function (_a) {
+    var $maxWidth = _a.$maxWidth;
+    return $maxWidth || 'calc(100% - 32px)';
 }, function (_a) {
     var $minHeight = _a.$minHeight;
     return $minHeight || 'auto';
 }, function (_a) {
     var $maxHeight = _a.$maxHeight;
-    return $maxHeight || 'none';
-}, function (_a) {
-    var variant = _a.variant;
-    return variantStyles(Component.DialogWindow, variant);
+    return $maxHeight || 'auto';
 }, function (_a) {
-    var $maxWidth = _a.$maxWidth;
-    return $maxWidth && "max-width: ".concat($maxWidth);
-}, function (_a) {
-    var _b = _a.top, top = _b === void 0 ? '100px' : _b;
-    return top;
+    var $mobileFullscreen = _a.$mobileFullscreen;
+    return $mobileFullscreen && 'border-radius: 0; max-width: 100% !important;';
 });
-export var HeaderContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"])), function (_a) {
-    var variant = _a.variant;
-    return variantStyles(Component.Header, variant);
-});
-export var ContentContainer = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  min-height: 50px;\n  ", "\n"], ["\n  min-height: 50px;\n  ", "\n"])), function (_a) {
-    var variant = _a.variant;
-    return variantStyles(Component.ContentContainer, variant);
+export var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding: 30px;\n  padding-bottom: ", ";\n\n  @media (max-width: 576px) {\n    padding: 18px;\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding: 30px;\n  padding-bottom: ", ";\n\n  @media (max-width: 576px) {\n    padding: 18px;\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
+    var topSpace = _a.topSpace;
+    return topSpace;
+}, th.color('lightGray6'));
+export var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n"], ["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n"])), function (_a) {
+    var topSpace = _a.topSpace;
+    return topSpace;
+}, function (_a) {
+    var $mobileFullscreen = _a.$mobileFullscreen;
+    return ($mobileFullscreen ? '0' : '18px');
 });
-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  padding: 1.5rem;\n  text-align: right;\n  > * {\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  padding: 1.5rem;\n  text-align: right;\n  > * {\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"])));
-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 TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\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  > 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 H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: typoPrimary;\n  margin: 0;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 700;\n\n  @media (max-width: 576px) {\n    font-size: 18px;\n    line-height: 18px;\n  }\n"], ["\n  color: typoPrimary;\n  margin: 0;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 700;\n\n  @media (max-width: 576px) {\n    font-size: 18px;\n    line-height: 18px;\n  }\n"])));
+export var ButtonsContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 1.5rem;\n  text-align: right;\n  > * {\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  padding: 1.5rem;\n  text-align: right;\n  > * {\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"])));
+export var CloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n  top: 32px;\n  right: 24px;\n\n  @media (max-width: 576px) {\n    padding: 0;\n    width: 32px;\n    height: 32px;\n    background-color: bgLightGray1;\n    border-radius: 50%;\n    top: 12px;\n    right: 12px;\n  }\n"], ["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n  top: 32px;\n  right: 24px;\n\n  @media (max-width: 576px) {\n    padding: 0;\n    width: 32px;\n    height: 32px;\n    background-color: bgLightGray1;\n    border-radius: 50%;\n    top: 12px;\n    right: 12px;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1,5 +1,5 @@
 import { MutableRefObject } from 'react';
-export type Variant = 'default' | 'compact' | 'mobileFullscreen';
+export type TopSpace = 'default' | 'medium';
 export type Width = 'wide' | 'mediumLarge' | 'medium' | 'narrow' | 'auto';
 export interface ModalProps {
     isShown?: boolean;
@@ -16,7 +16,8 @@ export interface ModalProps {
     hasFooter?: boolean;
     hasHeader?: boolean;
     width?: Width;
-    background?: string;
+    whiteBg?: boolean;
+    miniCloseBtn?: boolean;
     ignoreClickOutside?: boolean;
     closeEverywhere?: boolean;
     withCloseIcon?: boolean;
@@ -25,8 +26,8 @@ export interface ModalProps {
     minHeight?: string;
     maxWidth?: string;
     maxHeight?: string;
-    variant?: Variant;
-    top?: string;
+    topSpace?: TopSpace;
+    mobileFullscreen?: boolean;
 }
 export type ModalData = Record<string, any>;
 export type ControlProps<T = ModalData> = {

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

@@ -1,2 +1,3 @@
-import { Width } from './types';
+import { TopSpace, Width } from './types';
 export declare const widthMap: Record<Width, string>;
+export declare const topSpaceMap: Record<TopSpace, string>;

package/ui/Blocks/Modal/utils.js

@@ -5,3 +5,7 @@ export var widthMap = {
     narrow: '600px',
     auto: 'auto',
 };
+export var topSpaceMap = {
+    default: '30px',
+    medium: '15px',
+};

package/ui/Elements/Icon/icons/Expeditions.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var Expeditions = function (props) { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", stroke: "#A3B3C1" }, props, { children: [_jsx("path", { d: "M5 4H12.8C12.9105 4 13 4.08954 13 4.2V8.8C13 8.91046 13.0895 9 13.2 9H18.9C18.963 9 19.0222 9.02964 19.06 9.08L20.46 10.9467C20.486 10.9813 20.5 11.0234 20.5 11.0667V14.8C20.5 14.9105 20.4105 15 20.3 15H18", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M3 6.5H9", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M2 9H6", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M2 12H6", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M4 15H6", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M10 15L14 15", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M12.5 5H15.2639C16.0215 5 16.714 5.428 17.0528 6.10557L18.5 9", strokeWidth: "1.5" }), _jsx("circle", { cx: "16", cy: "16", r: "2", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "8", cy: "16", r: "2", strokeWidth: "1.5", strokeLinecap: "round" })] }))); };
+export var Expeditions = function (props) { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", stroke: "#A3B3C1" }, props, { children: [_jsx("path", { d: "M11.1603 15.0024C11.1603 16.1027 10.2683 16.9946 9.16807 16.9946C8.0678 16.9946 7.17585 16.1027 7.17585 15.0024C7.17585 13.9021 8.0678 13.0102 9.16807 13.0102C10.2683 13.0102 11.1603 13.9021 11.1603 15.0024Z", strokeWidth: "1.35" }), _jsx("path", { d: "M18.4952 15.0024C18.4952 16.1027 17.6033 16.9946 16.503 16.9946C15.4028 16.9946 14.5108 16.1027 14.5108 15.0024C14.5108 13.9021 15.4028 13.0102 16.503 13.0102C17.6033 13.0102 18.4952 13.9021 18.4952 15.0024Z", strokeWidth: "1.35" }), _jsx("line", { x1: "10.9655", y1: "14.0546", x2: "14.2389", y2: "14.0546", strokeWidth: "1.35" }), _jsx("path", { d: "M4.41858 13.5637C4.04579 13.5637 3.74358 13.8659 3.74358 14.2387C3.74358 14.6115 4.04579 14.9137 4.41858 14.9137L4.41858 13.5637ZM4.41858 14.9137L7.0373 14.9137L7.0373 13.5637L4.41858 13.5637L4.41858 14.9137Z", strokeWidth: "0" }), _jsx("line", { x1: "18.1671", y1: "14.0546", x2: "20.7858", y2: "14.0546", strokeWidth: "1.35" }), _jsx("path", { d: "M5.83411 2.99166C5.46131 2.99166 5.15911 3.29386 5.15911 3.66666C5.15911 4.03945 5.46131 4.34166 5.83411 4.34166V2.99166ZM17.6841 5.36216L17.0804 5.66403L17.6841 5.36216ZM20.6937 10.4888L21.2208 10.0671L20.6937 10.4888ZM21.5122 15.0023V10.8978H20.1622V15.0023H21.5122ZM21.2208 10.0671L20.0307 8.57942L18.9765 9.42276L20.1667 10.9104L21.2208 10.0671ZM20.1073 8.69922L18.2879 5.06029L17.0804 5.66403L18.8999 9.30296L20.1073 8.69922ZM17.0986 4.32527H13.8358V5.67526H17.0986V4.32527ZM14.5108 5.00027V4.32134H13.1608V5.00027H14.5108ZM13.1811 2.99166H5.83411V4.34166H13.1811V2.99166ZM13.1608 5.00027V8.34641H14.5108V5.00027H13.1608ZM14.4904 9.67609H19.5036V8.32609H14.4904V9.67609ZM13.1608 8.34641C13.1608 9.08077 13.7561 9.67609 14.4904 9.67609V8.32609C14.492 8.32609 14.4952 8.32654 14.4986 8.32796C14.5015 8.3292 14.5035 8.33069 14.5048 8.33204C14.5062 8.33339 14.5076 8.33537 14.5089 8.33829C14.5103 8.34166 14.5108 8.34485 14.5108 8.34641H13.1608ZM14.5108 4.32134C14.5108 3.58698 13.9154 2.99166 13.1811 2.99166V4.34166C13.1795 4.34166 13.1763 4.34121 13.173 4.33978C13.17 4.33855 13.1681 4.33705 13.1667 4.33571C13.1654 4.33436 13.1639 4.33237 13.1626 4.32945C13.1612 4.32608 13.1608 4.3229 13.1608 4.32134H14.5108ZM18.2879 5.06029C18.0626 4.60982 17.6022 4.32527 17.0986 4.32527V5.67526C17.0909 5.67526 17.0838 5.67092 17.0804 5.66403L18.2879 5.06029ZM21.5122 10.8978C21.5122 10.5958 21.4094 10.3029 21.2208 10.0671L20.1667 10.9104C20.1638 10.9068 20.1622 10.9024 20.1622 10.8978H21.5122Z", strokeWidth: "0" }), _jsx("path", { d: "M9.16811 5.66718H3.16687", strokeWidth: "1.35", strokeLinecap: "round" }), _jsx("path", { d: "M7.83461 8.33435H1.83337", strokeWidth: "1.35", strokeLinecap: "round" }), _jsx("path", { d: "M8.50148 11.0016H2.50024", strokeWidth: "1.35", strokeLinecap: "round" })] }))); };

package/ui/Elements/Icon/icons/MenuItems.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var MenuItems = function (props) { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "#42526E" }, props, { children: [_jsx("rect", { x: "24", y: "24", width: "24", height: "24", rx: "5.4", transform: "rotate(180 24 24)" }), _jsx("g", { "clip-path": "url(#clip0_334_574)", children: _jsx("path", { d: "M16.95 12.124L9.72446 12.124M9.72446 12.124L12.8211 9.59512M9.72446 12.124L12.8211 14.653", stroke: "#A3B3C1", strokeWidth: "0.9", strokeLinecap: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_334_574", children: _jsx("rect", { width: "13.2", height: "13.2", fill: "white", transform: "matrix(-1 0 0 -1 18.6 18.6)" }) }) })] }))); };
+export var MenuItems = function (props) { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#A3B3C1" }, props, { children: [_jsx("rect", { x: "24", y: "24", width: "24", height: "24", rx: "5.4", transform: "rotate(180 24 24)" }), _jsx("g", { "clip-path": "url(#clip0_306_574)", children: _jsx("path", { d: "M16.95 12.124L9.72446 12.124M9.72446 12.124L12.8211 9.59512M9.72446 12.124L12.8211 14.653", strokeWidth: "0.9", strokeLinecap: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_306_574", children: _jsx("rect", { width: "13.2", height: "13.2", fill: "white", transform: "matrix(-1 0 0 -1 18.6 18.6)" }) }) })] }))); };

package/ui/Elements/Icon/icons/Return.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var Return = function (props) { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", stroke: "#A3B3C1" }, props, { children: [_jsx("path", { d: "M6 8.78947V13.7105L11.1 15.5M6 8.78947L11.1 10.5789M6 8.78947L11.1 7L16.2 8.34211M11.1 15.5V10.5789M11.1 15.5L16.2 13.7105V8.34211M11.1 10.5789L16.2 8.34211", strokeWidth: "1.35" }), _jsx("path", { d: "M2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C9.14985 2 6.5 3 5 4.5M5 4.5L5.5 1M5 4.5L8.5 5", strokeWidth: "1.35" })] }))); };
+export var Return = function (props) { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none" }, props, { children: [_jsx("g", { clipPath: "url(#clip0_7_1619)", children: _jsx("path", { d: "M21.5599 11C21.5599 16.8227 16.8227 21.56 10.9999 21.56C5.1772 21.56 0.439941 16.8227 0.439941 11C0.439941 10.6352 0.735181 10.34 1.09994 10.34C1.4647 10.34 1.75994 10.6352 1.75994 11C1.75994 16.095 5.90496 20.24 10.9999 20.24C16.0949 20.24 20.2399 16.095 20.2399 11C20.2399 5.90502 16.0949 1.76 10.9999 1.76C8.54408 1.76 6.26422 2.71458 4.5491 4.4H7.03994C7.4047 4.4 7.69994 4.69524 7.69994 5.06C7.69994 5.42476 7.4047 5.72 7.03994 5.72H3.07994C2.71518 5.72 2.41994 5.42476 2.41994 5.06V1.1C2.41994 0.735242 2.71518 0.440002 3.07994 0.440002C3.4447 0.440002 3.73994 0.735242 3.73994 1.1V3.35148C5.68716 1.49292 8.24576 0.440002 10.9999 0.440002C16.8227 0.440002 21.5599 5.17726 21.5599 11ZM16.9399 8.36V14.3C16.9399 14.5752 16.7692 14.8214 16.512 14.9182L11.232 16.8982C11.1572 16.9259 11.0785 16.94 10.9999 16.94C10.9214 16.94 10.8426 16.9259 10.7678 16.8982L5.48784 14.9182C5.23066 14.8214 5.05994 14.5752 5.05994 14.3V8.36C5.05994 8.08478 5.23066 7.8386 5.48784 7.7418L10.7678 5.7618C10.9174 5.70636 11.0824 5.70636 11.2318 5.7618L16.5118 7.7418C16.7692 7.8386 16.9399 8.08478 16.9399 8.36ZM7.5994 8.36L10.9999 9.6349L14.4005 8.36L10.9999 7.0851L7.5994 8.36ZM6.37994 13.8424L10.3399 15.3274V10.7976L6.37994 9.3126V13.8424ZM15.6199 13.8424V9.3126L11.6599 10.7976V15.3274L15.6199 13.8424Z", strokeWidth: "0" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_7_1619", children: _jsx("rect", { width: "22", height: "22", fill: "white" }) }) })] }))); };

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

@@ -1,4 +1,3 @@
-export { Cancel } from './Cancel';
 export { FlagUSA } from './FlagUSA';
 export { FlagCZ } from './FlagCZ';
 export { FlagEL } from './FlagEL';
@@ -32,16 +31,3 @@ export { Link } from './Link';
 export { OpenBox } from './OpenBox';
 export { Box } from './Box';
 export { Rack } from './Rack';
-export { CheckedBox } from './CheckedBox';
-export { Consolidation } from './Consolidation';
-export { Dispatch } from './Dispatch';
-export { EmptyRack } from './EmptyRack';
-export { Gift } from './Gift';
-export { Info } from './Info';
-export { Location } from './Location';
-export { MakePhoto } from './MakePhoto';
-export { Print } from './Print';
-export { TwoBoxes } from './TwoBoxes';
-export { TwoCheckedBoxes } from './TwoCheckedBoxes';
-export { ThreeDots } from './ThreeDots';
-export { Calendar } from './Calendar';

package/ui/Elements/Icon/icons/index.js

@@ -1,4 +1,3 @@
-export { Cancel } from './Cancel';
 export { FlagUSA } from './FlagUSA';
 export { FlagCZ } from './FlagCZ';
 export { FlagEL } from './FlagEL';
@@ -32,16 +31,3 @@ export { Link } from './Link';
 export { OpenBox } from './OpenBox';
 export { Box } from './Box';
 export { Rack } from './Rack';
-export { CheckedBox } from './CheckedBox';
-export { Consolidation } from './Consolidation';
-export { Dispatch } from './Dispatch';
-export { EmptyRack } from './EmptyRack';
-export { Gift } from './Gift';
-export { Info } from './Info';
-export { Location } from './Location';
-export { MakePhoto } from './MakePhoto';
-export { Print } from './Print';
-export { TwoBoxes } from './TwoBoxes';
-export { TwoCheckedBoxes } from './TwoCheckedBoxes';
-export { ThreeDots } from './ThreeDots';
-export { Calendar } from './Calendar';

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

@@ -5,7 +5,7 @@ declare const meta: {
     component: ({ badge, ...iconProps }: {
         badge: "warning";
     } & import("..").IconProps) => JSX.Element;
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
         badge: "warning";
         icon: string;
         style?: "normal" | "light" | "solid" | undefined;

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

@@ -1,4 +1,3 @@
 import Tag from './Tag';
 export { palletes } from './palletes';
-export { type Pallete } from './types';
 export default Tag;

package/ui/ThemeProvider/themes/default.d.ts

@@ -132,6 +132,7 @@ declare const defaultTheme: {
         headerShadowB: string;
         headerShadowNotifications: string;
         cornerDialogShadow: string;
+        gridShadow: string;
     };
     space: number[];
     transitions: {