@mailstep/design-system 0.6.2-beta.2 → 0.6.2-beta.3

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

@@ -1,9 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Tag from '../../../../Elements/Tag';
-import { Container } from './styles';
-export var ImageTag = function (_a) {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageTag = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Tag_1 = __importDefault(require("../../../../Elements/Tag"));
+var styles_1 = require("./styles");
+var ImageTag = function (_a) {
     var label = _a.label;
     if (!label)
         return null;
-    return (_jsx(Container, { children: _jsx(Tag, { size: "small", color: "darkGreen", textColor: "white", children: _jsx("b", { children: label }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "small", color: "darkGreen", textColor: "white", children: (0, jsx_runtime_1.jsx)("b", { children: label }) }) }));
 };
+exports.ImageTag = ImageTag;

package/ui/Blocks/ImageList/components/ImageTag/styles.js

@@ -1,7 +1,13 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"], ["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"])));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"], ["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"])));
 var templateObject_1;

package/ui/Blocks/ImageList/index.js

@@ -1,2 +1,4 @@
-import { ImageList } from './ImageList';
-export default ImageList;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ImageList_1 = require("./ImageList");
+exports.default = ImageList_1.ImageList;

package/ui/Blocks/ImageList/stories/ImageList.stories.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,32 +10,34 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { ImageList } from '../ImageList';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageListWithItemDescription = exports.ImageListDisabled = exports.ImageListDefault = void 0;
+var ImageList_1 = require("../ImageList");
 var meta = {
     title: 'Blocks/ImageList',
-    component: ImageList,
+    component: ImageList_1.ImageList,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
+exports.default = meta;
 var images = [
     { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
     { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
 ];
-export var ImageListDefault = {
+exports.ImageListDefault = {
     args: {
         images: images,
         isDisabled: false,
         onImageRemove: function (id) { return function () { return null; }; }
     },
 };
-export var ImageListDisabled = {
+exports.ImageListDisabled = {
     args: {
         images: images,
         isDisabled: true,
     },
 };
-export var ImageListWithItemDescription = {
+exports.ImageListWithItemDescription = {
     args: {
         images: images.map(function (img) { return (__assign(__assign({}, img), { label: 'Lorem Ipsum', date: '24.12.2024', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum' })); }),
     },

package/ui/Blocks/ImageList/styles.js

@@ -1,7 +1,13 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from '@xstyled/styled-components';
-export var ImageListContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageListContainer = void 0;
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+exports.ImageListContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
 var templateObject_1;

package/ui/Blocks/ImageList/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/Blocks/LightBox/LightBox.js

@@ -1,14 +1,21 @@
-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';
-export var LightBox = function (_a) {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightBox = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Button_1 = require("../../Elements/Button");
+var Modal_1 = __importDefault(require("../Modal"));
+var react_1 = require("swiper/react");
+var styles_1 = require("./styles");
+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 ((0, jsx_runtime_1.jsx)(Modal_1.default, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", children: (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { children: [(0, jsx_runtime_1.jsx)(styles_1.Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && ((0, jsx_runtime_1.jsxs)(styles_1.Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && ((0, jsx_runtime_1.jsx)(styles_1.ButtonContainer, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
             }) }) }));
 };
+exports.LightBox = LightBox;

package/ui/Blocks/LightBox/hooks/useLightBox.js

@@ -1,8 +1,11 @@
-import { useCallback } from 'react';
-import { useModal } from '../../Modal';
-export var useLightBox = function () {
-    var _a = useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;
-    var onOpenLightBox = useCallback(function (index) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLightBox = void 0;
+var react_1 = require("react");
+var Modal_1 = require("../../Modal");
+var useLightBox = function () {
+    var _a = (0, Modal_1.useModal)(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;
+    var onOpenLightBox = (0, react_1.useCallback)(function (index) {
         if (index === void 0) { index = 0; }
         return function () {
             onOpen({ initialSlide: index });
@@ -15,3 +18,4 @@ export var useLightBox = function () {
         lightBoxData: data
     };
 };
+exports.useLightBox = useLightBox;

package/ui/Blocks/LightBox/index.js

@@ -1,3 +1,7 @@
-import { LightBox } from './LightBox';
-export { useLightBox } from './hooks/useLightBox';
-export default LightBox;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLightBox = void 0;
+var LightBox_1 = require("./LightBox");
+var useLightBox_1 = require("./hooks/useLightBox");
+Object.defineProperty(exports, "useLightBox", { enumerable: true, get: function () { return useLightBox_1.useLightBox; } });
+exports.default = LightBox_1.LightBox;

package/ui/Blocks/LightBox/stories/LightBox.stories.js

@@ -1,18 +1,21 @@
-import { LightBox } from '../LightBox';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightBoxDefault = void 0;
+var LightBox_1 = require("../LightBox");
 var meta = {
     title: 'Blocks/LightBox',
-    component: LightBox,
+    component: LightBox_1.LightBox,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
+exports.default = meta;
 var images = [
     { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400', date: '1.12.2024', description: 'Lorem ipsum' },
     { id: '2', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400', description: 'Lorem ipsum' },
     { id: '3', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400', date: '1.12.2024' },
     { id: '3', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
 ];
-export var LightBoxDefault = {
+exports.LightBoxDefault = {
     args: {
         images: images,
         isLightBoxOpen: true

package/ui/Blocks/LightBox/styles.js

@@ -1,10 +1,16 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     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 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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Description = exports.ButtonContainer = exports.Image = exports.Container = void 0;
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+exports.Container = styled_components_1.default.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"])));
+exports.Image = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+exports.ButtonContainer = styled_components_1.default.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"])));
+exports.Description = styled_components_1.default.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;

package/ui/Blocks/LightBox/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/Blocks/Modal/Modal.js

@@ -1,16 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useEffect } from 'react';
-import { Icon, Cancel } from '../../Elements/Icon';
-import { H2, H5 } from '../../Elements/Typography';
-import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper, } from './styles';
-import { x } from '@xstyled/styled-components';
-import { Button } from '../../Elements/Button';
-import { Portal } from '../../Elements/Portal';
-import { useClickOutside } from './hooks/useClickOutside';
-import { widthMap } from './utils';
-export var Modal = memo(function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Icon_1 = require("../../Elements/Icon");
+var Typography_1 = require("../../Elements/Typography");
+var styles_1 = require("./styles");
+var styled_components_1 = require("@xstyled/styled-components");
+var Button_1 = require("../../Elements/Button");
+var Portal_1 = require("../../Elements/Portal");
+var useClickOutside_1 = require("./hooks/useClickOutside");
+var utils_1 = require("./utils");
+exports.Modal = (0, react_1.memo)(function (_a) {
     var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onExtraAction = _a.onExtraAction, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, extraActionLabel = _a.extraActionLabel, 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 closeDialog = useCallback(function () {
+    var closeDialog = (0, react_1.useCallback)(function () {
         if (onClose) {
             onClose();
         }
@@ -18,12 +21,12 @@ export var Modal = memo(function (_a) {
             onCancel();
         }
     }, [onClose, onCancel]);
-    var dialogStyle = useMemo(function () { return ({ width: widthMap[width] }); }, [width]);
-    var dialogRef = useClickOutside({ onClose: closeDialog, ignoreClickOutside: ignoreClickOutside, closeCurrent: true, allowScrollbarClick: true });
-    var onDialogConfirmClick = useCallback(function () {
+    var dialogStyle = (0, react_1.useMemo)(function () { return ({ width: utils_1.widthMap[width] }); }, [width]);
+    var dialogRef = (0, useClickOutside_1.useClickOutside)({ onClose: closeDialog, ignoreClickOutside: ignoreClickOutside, closeCurrent: true, allowScrollbarClick: true });
+    var onDialogConfirmClick = (0, react_1.useCallback)(function () {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(closeDialog);
     }, [onConfirm, closeDialog]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         window.addEventListener('popstate', closeDialog);
         return function () {
             window.removeEventListener('popstate', closeDialog);
@@ -32,5 +35,5 @@ export var Modal = memo(function (_a) {
     if (!isShown) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "ghostDanger", children: extraActionLabel })), _jsxs(ButtonsWrapper, { hasExtraAction: !!onExtraAction, hasBothButtons: !!onCancel && !!onConfirm, children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(styles_1.DialogOverlay, { backgroundColor: overlayColor, children: (0, jsx_runtime_1.jsxs)(styles_1.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 && ((0, jsx_runtime_1.jsx)(styles_1.HeaderContainer, { variant: variant, children: (0, jsx_runtime_1.jsxs)(styles_1.TitleContainer, { children: [titleIcon && ((0, jsx_runtime_1.jsx)(styled_components_1.x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? ((0, jsx_runtime_1.jsx)(Typography_1.H2, { mt: 0, mb: 0, variant: "bold", children: title })) : ((0, jsx_runtime_1.jsx)(Typography_1.H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && ((0, jsx_runtime_1.jsx)(styles_1.CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: (0, jsx_runtime_1.jsx)(Icon_1.Cancel, { width: "11px", height: "11px" }) })), (0, jsx_runtime_1.jsx)(styles_1.ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && ((0, jsx_runtime_1.jsxs)(styles_1.ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "ghostDanger", children: extraActionLabel })), (0, jsx_runtime_1.jsxs)(styles_1.ButtonsWrapper, { hasExtraAction: !!onExtraAction, hasBothButtons: !!onCancel && !!onConfirm, children: [onCancel && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
 });

package/ui/Blocks/Modal/hooks/useClickOutside.js

@@ -1,9 +1,12 @@
-import { useCallback, useEffect, useRef } from 'react';
-export var useClickOutside = function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickOutside = void 0;
+var react_1 = require("react");
+var useClickOutside = function (_a) {
     var onClose = _a.onClose, parentRef = _a.parentRef, _b = _a.ignoreClickOutside, ignoreClickOutside = _b === void 0 ? false : _b, _c = _a.closeCurrent, closeCurrent = _c === void 0 ? false : _c, _d = _a.allowScrollbarClick, allowScrollbarClick = _d === void 0 ? false : _d;
-    var elementRef = useRef(null);
+    var elementRef = (0, react_1.useRef)(null);
     var onCloseModal = !ignoreClickOutside ? onClose : undefined;
-    var handleClickOutside = useCallback(function (e) {
+    var handleClickOutside = (0, react_1.useCallback)(function (e) {
         var _a;
         var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;
         if (!ignoreEvent &&
@@ -13,12 +16,12 @@ export var useClickOutside = function (_a) {
             closeCurrent ? e.target.contains(elementRef.current) && (onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal()) : onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
         }
     }, [allowScrollbarClick, parentRef, closeCurrent, onCloseModal]);
-    var keyPress = useCallback(function (e) {
+    var keyPress = (0, react_1.useCallback)(function (e) {
         if (e.key === 'Escape') {
             onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
         }
     }, [onCloseModal]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         document.addEventListener('mousedown', handleClickOutside);
         document.addEventListener('keydown', keyPress);
         return function () {
@@ -28,3 +31,4 @@ export var useClickOutside = function (_a) {
     }, [handleClickOutside, keyPress]);
     return elementRef;
 };
+exports.useClickOutside = useClickOutside;

package/ui/Blocks/Modal/hooks/useModal.js

@@ -1,15 +1,19 @@
-import { useCallback, useState } from 'react';
-export var useModal = function (initialState) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModal = void 0;
+var react_1 = require("react");
+var useModal = function (initialState) {
     if (initialState === void 0) { initialState = false; }
-    var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];
-    var _b = useState(), data = _b[0], setData = _b[1];
-    var onClose = useCallback(function () {
+    var _a = (0, react_1.useState)(initialState), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = (0, react_1.useState)(), data = _b[0], setData = _b[1];
+    var onClose = (0, react_1.useCallback)(function () {
         setIsOpen(false);
         setData(undefined);
     }, []);
-    var onOpen = useCallback(function (data) {
+    var onOpen = (0, react_1.useCallback)(function (data) {
         data && setData(data);
         setIsOpen(true);
     }, []);
     return { isOpen: isOpen, onClose: onClose, onOpen: onOpen, data: data };
 };
+exports.useModal = useModal;

package/ui/Blocks/Modal/index.js

@@ -1,4 +1,9 @@
-import { Modal } from './Modal';
-export { useModal } from './hooks/useModal';
-export { useClickOutside } from './hooks/useClickOutside';
-export default Modal;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickOutside = exports.useModal = void 0;
+var Modal_1 = require("./Modal");
+var useModal_1 = require("./hooks/useModal");
+Object.defineProperty(exports, "useModal", { enumerable: true, get: function () { return useModal_1.useModal; } });
+var useClickOutside_1 = require("./hooks/useClickOutside");
+Object.defineProperty(exports, "useClickOutside", { enumerable: true, get: function () { return useClickOutside_1.useClickOutside; } });
+exports.default = Modal_1.Modal;

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

@@ -1,43 +1,49 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import Modal from '../';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalWithCustomOverlayColor = exports.ModalWithDisabledConfirm = exports.ModalAutoWidth = exports.ModalMediumWidth = exports.ModalMediumLargeWidth = exports.ModalWideWidth = exports.ModalWithCustomLabels = exports.ModalWithoutHeaderAndFooter = exports.ModalWithoutFooter = exports.ModalWithoutHeader = exports.ModalWithCustomBackground = exports.ModalLoading = exports.ModalWithIconInTitle = exports.ModalWithoutCloseButton = exports.ModalWithCloseAndConfirmBtns = exports.ModalTopPosition = exports.MobileFullscreen = exports.Compact = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var __1 = __importDefault(require("../"));
 var meta = {
     title: 'Blocks/Modal',
-    component: Modal,
+    component: __1.default,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Default = {
+exports.default = meta;
+exports.Default = {
     args: {
         title: 'Modal default version',
-        children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
         variant: 'default',
     },
 };
-export var Compact = {
+exports.Compact = {
     args: {
         title: 'Modal title',
-        children: _jsx(_Fragment, { children: "Modal compact version" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal compact version" }),
         variant: 'compact',
     },
 };
-export var MobileFullscreen = {
+exports.MobileFullscreen = {
     args: {
-        children: _jsx(_Fragment, { children: "Mobile full screen version without title" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Mobile full screen version without title" }),
         variant: 'mobileFullscreen',
     },
 };
-export var ModalTopPosition = {
+exports.ModalTopPosition = {
     args: {
         title: 'Modal default version',
-        children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
         variant: 'default',
         top: '0',
     },
 };
-export var ModalWithCloseAndConfirmBtns = {
+exports.ModalWithCloseAndConfirmBtns = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with narrow width" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with narrow width" }),
         title: 'Modal title',
         width: 'narrow',
         withCloseIcon: true,
@@ -46,60 +52,60 @@ export var ModalWithCloseAndConfirmBtns = {
         onExtraAction: undefined,
     },
 };
-export var ModalWithoutCloseButton = {
+exports.ModalWithoutCloseButton = {
     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." })),
+        children: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.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." })),
         width: 'narrow',
         withCloseIcon: false,
         onClose: function () { return console.log('Close'); },
         onConfirm: undefined,
     },
 };
-export var ModalWithIconInTitle = {
+exports.ModalWithIconInTitle = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with icon" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with icon" }),
         title: 'Modal title',
         width: 'narrow',
         titleIcon: 'info',
     },
 };
-export var ModalLoading = {
+exports.ModalLoading = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with loading" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with loading" }),
         title: 'Modal title',
         width: 'narrow',
         isLoading: true,
     },
 };
-export var ModalWithCustomBackground = {
+exports.ModalWithCustomBackground = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with white background" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with white background" }),
         title: 'Modal title',
         width: 'narrow',
         background: 'blue',
     },
 };
-export var ModalWithoutHeader = {
+exports.ModalWithoutHeader = {
     args: {
-        children: _jsx(_Fragment, { children: "This is content of the Modal without header" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "This is content of the Modal without header" }),
         title: 'Modal title',
         width: 'narrow',
         hasHeader: false,
     },
 };
-export var ModalWithoutFooter = {
+exports.ModalWithoutFooter = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal without footer" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal without footer" }),
         title: 'Modal title',
         width: 'narrow',
         hasFooter: false,
         onClose: function () { return console.log('Close'); },
     },
 };
-export var ModalWithoutHeaderAndFooter = {
+exports.ModalWithoutHeaderAndFooter = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal without header and footer" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal without header and footer" }),
         title: 'Modal title',
         width: 'narrow',
         hasHeader: false,
@@ -107,9 +113,9 @@ export var ModalWithoutHeaderAndFooter = {
         onClose: function () { return console.log('Close'); },
     },
 };
-export var ModalWithCustomLabels = {
+exports.ModalWithCustomLabels = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with custom labels" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with custom labels" }),
         title: 'Modal title',
         width: 'narrow',
         onClose: function () { return console.log('Close'); },
@@ -118,37 +124,37 @@ export var ModalWithCustomLabels = {
         cancelLabel: 'Custom cancel',
     },
 };
-export var ModalWideWidth = {
+exports.ModalWideWidth = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with wide width" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with wide width" }),
         title: 'Modal title',
         width: 'wide',
     },
 };
-export var ModalMediumLargeWidth = {
+exports.ModalMediumLargeWidth = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with mediumLarge width" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with mediumLarge width" }),
         title: 'Modal title',
         width: 'mediumLarge',
     },
 };
-export var ModalMediumWidth = {
+exports.ModalMediumWidth = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with medium width" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with medium width" }),
         title: 'Modal title',
         width: 'medium',
     },
 };
-export var ModalAutoWidth = {
+exports.ModalAutoWidth = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with auto width" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with auto width" }),
         title: 'Modal title',
         width: 'auto',
     },
 };
-export var ModalWithDisabledConfirm = {
+exports.ModalWithDisabledConfirm = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with disabled confirm" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with disabled confirm" }),
         title: 'Modal title',
         width: 'narrow',
         onClose: function () { return console.log('Close'); },
@@ -156,9 +162,9 @@ export var ModalWithDisabledConfirm = {
         isConfirmDisabled: true,
     },
 };
-export var ModalWithCustomOverlayColor = {
+exports.ModalWithCustomOverlayColor = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal with custom overlay color" }),
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Modal with custom overlay color" }),
         title: 'Modal title',
         width: 'narrow',
         onClose: function () { return console.log('Close Modal with custom overlay color'); },