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

package/ui/Blocks/LightBox/styles.js

@@ -1,16 +1,10 @@
-"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;
 };
-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"])));
+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 templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/LightBox/types.js

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

package/ui/Blocks/Modal/Modal.js

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

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

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

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

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModal = void 0;
-var react_1 = require("react");
-var useModal = function (initialState) {
+import { useCallback, useState } from 'react';
+export var useModal = function (initialState) {
     if (initialState === void 0) { initialState = false; }
-    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 () {
+    var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = useState(), data = _b[0], setData = _b[1];
+    var onClose = useCallback(function () {
         setIsOpen(false);
         setData(undefined);
     }, []);
-    var onOpen = (0, react_1.useCallback)(function (data) {
+    var onOpen = 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,9 +1,4 @@
-"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;
+import { Modal } from './Modal.js';
+export { useModal } from './hooks/useModal.js';
+export { useClickOutside } from './hooks/useClickOutside.js';
+export default Modal;

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

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

package/ui/Blocks/Modal/styles.js

@@ -1,35 +1,9 @@
-"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;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CloseButton = exports.ButtonsWrapper = exports.ButtonsContainer = exports.TitleContainer = exports.ContentContainer = exports.HeaderContainer = exports.DialogWindow = exports.DialogOverlay = void 0;
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var utils_1 = require("../../utils");
+import styled, { css, th } from '@xstyled/styled-components';
+import { createRgba } from '../../utils/index.js';
 var Component;
 (function (Component) {
     Component["Header"] = "header";
@@ -41,28 +15,28 @@ var variantStyles = function (component, variant) {
     if (variant === void 0) { variant = 'default'; }
     return ({
         header: {
-            default: (0, styled_components_1.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      "])), styled_components_1.th.color('lightGray6')),
-            compact: (0, styled_components_1.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      "])), styled_components_1.th.color('lightGray6')),
-            mobileFullscreen: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "]))),
+            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: (0, styled_components_1.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: (0, styled_components_1.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: (0, styled_components_1.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      "]))),
+            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: (0, styled_components_1.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: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n      "], ["\n        padding: 20px 20px 15px;\n      "]))),
-            mobileFullscreen: (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "]))),
+            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]);
 };
-exports.DialogOverlay = styled_components_1.default.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_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 (0, utils_1.createRgba)(backgroundColor, 0.6);
+    return createRgba(backgroundColor, 0.6);
 });
-exports.DialogWindow = styled_components_1.default.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) {
+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';
 }, function (_a) {
@@ -84,25 +58,25 @@ exports.DialogWindow = styled_components_1.default.div(templateObject_11 || (tem
     var _b = _a.top, top = _b === void 0 ? '100px' : _b;
     return top;
 });
-exports.HeaderContainer = styled_components_1.default.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) {
+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);
 });
-exports.ContentContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  min-height: 50px;\n  ", "\n"], ["\n  min-height: 50px;\n  ", "\n"])), function (_a) {
+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);
 });
-exports.TitleContainer = styled_components_1.default.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"])));
-exports.ButtonsContainer = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])), styled_components_1.th.color('lightGray6'), function (_a) {
+export var TitleContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
+export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])), th.color('lightGray6'), function (_a) {
     var hasSpaceBetween = _a.hasSpaceBetween;
     return (hasSpaceBetween ? 'space-between' : 'flex-end');
 });
-exports.ButtonsWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"])), function (_a) {
+export var ButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"])), function (_a) {
     var hasExtraAction = _a.hasExtraAction;
     return (hasExtraAction ? 'auto' : '100%');
 }, function (_a) {
     var hasBothButtons = _a.hasBothButtons;
     return (hasBothButtons ? '50%' : 'auto');
 });
-exports.CloseButton = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
+export var CloseButton = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/ui/Blocks/Modal/types.js

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

package/ui/Blocks/Modal/utils.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.widthMap = void 0;
-exports.widthMap = {
+export var widthMap = {
     wide: '1450px',
     mediumLarge: '1200px',
     medium: '900px',

package/ui/Blocks/Popover/index.js

@@ -1,26 +1,21 @@
-"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;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var react_popper_1 = require("react-popper");
-var useClickOutside_1 = require("../Modal/hooks/useClickOutside");
-var Portal_1 = __importDefault(require("../../Elements/Portal"));
-var PopoverWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n"], ["\n  z-index: 5;\n"])));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import { Popper } from 'react-popper';
+import { useClickOutside } from '../Modal/hooks/useClickOutside.js';
+import Portal from '../../Elements/Portal/index.js';
+var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n"], ["\n  z-index: 5;\n"])));
 var Popover = function (_a) {
     var placement = _a.placement, wrapper = _a.wrapper, children = _a.children, onClose = _a.onClose, parentRef = _a.parentRef;
-    var popperRef = (0, useClickOutside_1.useClickOutside)({ onClose: onClose, parentRef: parentRef });
+    var popperRef = useClickOutside({ onClose: onClose, parentRef: parentRef });
     var Wrapper = wrapper || PopoverWrapper;
-    return ((0, jsx_runtime_1.jsx)(Portal_1.default, { children: (0, jsx_runtime_1.jsx)("div", { ref: popperRef, children: (0, jsx_runtime_1.jsx)(react_popper_1.Popper, { innerRef: popperRef, referenceElement: parentRef.current, placement: placement, children: function (_a) {
+    return (_jsx(Portal, { children: _jsx("div", { ref: popperRef, children: _jsx(Popper, { innerRef: popperRef, referenceElement: parentRef.current, placement: placement, children: function (_a) {
                     var ref = _a.ref, style = _a.style;
-                    return ((0, jsx_runtime_1.jsx)(Wrapper, { ref: ref, style: style, children: children }));
+                    return (_jsx(Wrapper, { ref: ref, style: style, children: children }));
                 } }) }) }));
 };
-exports.default = Popover;
+export default Popover;
 var templateObject_1;

package/ui/Blocks/Tabs/TabContent.js

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabContent = void 0;
-var TabContent = function (_a) {
+export var TabContent = function (_a) {
     var activeTab = _a.activeTab, value = _a.value, children = _a.children;
     return activeTab === value ? children : null;
 };
-exports.TabContent = TabContent;