@mailstep/design-system 0.8.25 → 0.8.26-beta.0

package/ui/Blocks/Modal/Modal.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useEffect } from 'react';
-import Button from '../../Elements/Button';
-import { Icon, Cancel } from '../../Elements/Icon';
-import { Portal } from '../../Elements/Portal';
-import { H2, H5 } from '../../Elements/Typography';
-import { useClickOutside } from './hooks/useClickOutside';
-import { x } from '@xstyled/styled-components';
-import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper } from './styles';
-import { widthMap } from './utils';
-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, name = _a.name;
-    var closeDialog = useCallback(function () {
-        if (onClose) {
-            onClose();
-        }
-        else if (onCancel) {
-            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 () {
-        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(closeDialog);
-    }, [onConfirm, closeDialog]);
-    useEffect(function () {
-        window.addEventListener('popstate', closeDialog);
-        return function () {
-            window.removeEventListener('popstate', closeDialog);
-        };
-    }, []);
-    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: "secondary", variant: "ghost", children: extraActionLabel })), _jsxs(ButtonsWrapper, { hasExtraAction: !!onExtraAction, hasBothButtons: !!onCancel && !!onConfirm, children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "secondary", variant: "default", "data-testid": name ? "button-".concat(name, "-cancel") : undefined, children: cancelLabel || 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", appearance: "primary", variant: "default", "data-testid": name ? "button-".concat(name, "-confirm") : undefined, children: confirmLabel || 'Submit' }))] })] }))] }) }) }));
-});

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

@@ -1,30 +0,0 @@
-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 = useRef(null);
-    var onCloseModal = !ignoreClickOutside ? onClose : undefined;
-    var handleClickOutside = useCallback(function (e) {
-        var _a;
-        var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;
-        if (!ignoreEvent &&
-            elementRef.current &&
-            !elementRef.current.contains(e.target) &&
-            !((_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-            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) {
-        if (e.key === 'Escape') {
-            onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
-        }
-    }, [onCloseModal]);
-    useEffect(function () {
-        document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', keyPress);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', keyPress);
-        };
-    }, [handleClickOutside, keyPress]);
-    return elementRef;
-};

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

@@ -1,15 +0,0 @@
-import { useCallback, useState } from 'react';
-export 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 () {
-        setIsOpen(false);
-        setData(undefined);
-    }, []);
-    var onOpen = useCallback(function (data) {
-        data && setData(data);
-        setIsOpen(true);
-    }, []);
-    return { isOpen: isOpen, onClose: onClose, onOpen: onOpen, data: data };
-};

package/ui/Blocks/Modal/index.js

@@ -1,4 +0,0 @@
-import { Modal } from './Modal';
-export { useModal } from './hooks/useModal';
-export { useClickOutside } from './hooks/useClickOutside';
-export default Modal;

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

@@ -1,168 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import Modal from '../';
-var meta = {
-    title: 'Blocks/Modal',
-    component: Modal,
-    tags: ['autodocs'],
-    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" }),
-        title: 'Modal title',
-        width: 'narrow',
-        withCloseIcon: true,
-        onCancel: function () { return console.log('Cancel'); },
-        onConfirm: function () { return console.log('Confirm'); },
-        onExtraAction: undefined,
-    },
-};
-export var 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." })),
-        width: 'narrow',
-        withCloseIcon: false,
-        onClose: function () { return console.log('Close'); },
-        onConfirm: undefined,
-    },
-};
-export var ModalWithIconInTitle = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with icon" }),
-        title: 'Modal title',
-        width: 'narrow',
-        titleIcon: 'info',
-    },
-};
-export var ModalLoading = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with loading" }),
-        title: 'Modal title',
-        width: 'narrow',
-        isLoading: true,
-    },
-};
-export var ModalWithCustomBackground = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with white background" }),
-        title: 'Modal title',
-        width: 'narrow',
-        background: 'blue',
-    },
-};
-export var ModalWithoutHeader = {
-    args: {
-        children: _jsx(_Fragment, { children: "This is content of the Modal without header" }),
-        title: 'Modal title',
-        width: 'narrow',
-        hasHeader: false,
-    },
-};
-export var ModalWithoutFooter = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal without footer" }),
-        title: 'Modal title',
-        width: 'narrow',
-        hasFooter: false,
-        onClose: function () { return console.log('Close'); },
-    },
-};
-export var ModalWithoutHeaderAndFooter = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal without header and footer" }),
-        title: 'Modal title',
-        width: 'narrow',
-        hasHeader: false,
-        hasFooter: false,
-        onClose: function () { return console.log('Close'); },
-    },
-};
-export var ModalWithCustomLabels = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with custom labels" }),
-        title: 'Modal title',
-        width: 'narrow',
-        onClose: function () { return console.log('Close'); },
-        onConfirm: function () { return console.log('Submit'); },
-        confirmLabel: 'Custom confirm',
-        cancelLabel: 'Custom cancel',
-    },
-};
-export var ModalWideWidth = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with wide width" }),
-        title: 'Modal title',
-        width: 'wide',
-    },
-};
-export var ModalMediumLargeWidth = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with mediumLarge width" }),
-        title: 'Modal title',
-        width: 'mediumLarge',
-    },
-};
-export var ModalMediumWidth = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with medium width" }),
-        title: 'Modal title',
-        width: 'medium',
-    },
-};
-export var ModalAutoWidth = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with auto width" }),
-        title: 'Modal title',
-        width: 'auto',
-    },
-};
-export var ModalWithDisabledConfirm = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal with disabled confirm" }),
-        title: 'Modal title',
-        width: 'narrow',
-        onClose: function () { return console.log('Close'); },
-        onConfirm: function () { return console.log('Submit'); },
-        isConfirmDisabled: true,
-    },
-};
-export var ModalWithCustomOverlayColor = {
-    args: {
-        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'); },
-        onConfirm: function () { return console.log('Submit'); },
-        overlayColor: 'red1',
-    },
-};

package/ui/Blocks/Modal/styles.js

@@ -1,82 +0,0 @@
-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, { css, 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) {
-    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';
-}, function (_a) {
-    var $minWidth = _a.$minWidth;
-    return $minWidth || '10%';
-}, 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);
-}, 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;
-});
-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 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');
-});
-export var ButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"])), function (_a) {
-    var hasExtraAction = _a.hasExtraAction;
-    return (hasExtraAction ? 'auto' : '100%');
-}, function (_a) {
-    var hasBothButtons = _a.hasBothButtons;
-    return (hasBothButtons ? '50%' : 'auto');
-});
-export var CloseButton = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/ui/Blocks/Modal/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Blocks/Modal/utils.js

@@ -1,7 +0,0 @@
-export var widthMap = {
-    wide: '1450px',
-    mediumLarge: '1200px',
-    medium: '900px',
-    narrow: '600px',
-    auto: 'auto',
-};

package/ui/Blocks/Popover/index.js

@@ -1,21 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Popper } from 'react-popper';
-import Portal from '../../Elements/Portal';
-import { useClickOutside } from '../Modal/hooks/useClickOutside';
-import styled from '@xstyled/styled-components';
-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 = useClickOutside({ onClose: onClose, parentRef: parentRef });
-    var Wrapper = wrapper || PopoverWrapper;
-    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 (_jsx(Wrapper, { ref: ref, style: style, children: children }));
-                } }) }) }));
-};
-export default Popover;
-var templateObject_1;

package/ui/Blocks/Scheduler/Scheduler.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { groupBy } from 'lodash';
-import { useToggleAndClose } from '../../hooks/useToggleAndClose';
-import { DateChanger } from './components/DateChanger';
-import { Groups } from './components/Groups';
-import { TimeSlots } from './components/TimeSlots';
-import { useChangeDate } from './hooks/useChangeDate';
-import { generateTimeArray } from './utils/generateTimeArray';
-import { getClosestStep } from './utils/getClosestStep';
-import { Block, Container } from './styles';
-var timeArray = generateTimeArray();
-export var Scheduler = function (_a) {
-    var groups = _a.groups, activeHours = _a.activeHours, data = _a.data, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleReloadTimeSlots = _a.handleReloadTimeSlots, handleTimeSlotClick = _a.handleTimeSlotClick, isLoading = _a.isLoading, timeSlotDefinitions = _a.timeSlotDefinitions;
-    var groupedTimeSlots = useMemo(function () { return groupBy(data, function (_a) {
-        var groupId = _a.groupId, from = _a.from;
-        return "".concat(groupId, "-").concat(getClosestStep(from));
-    }); }, [data]);
-    var _b = useToggleAndClose(false), isDatepickerOpen = _b[0], toggleDatepicker = _b[1], closeDatePicker = _b[2];
-    var _c = useChangeDate({
-        closeDatePicker: closeDatePicker,
-        handleReloadTimeSlots: handleReloadTimeSlots
-    }), handlePrevDay = _c.handlePrevDay, handleNextDay = _c.handleNextDay, handleChangeDate = _c.handleChangeDate, date = _c.date, isTodayDate = _c.isTodayDate;
-    if (!(groups === null || groups === void 0 ? void 0 : groups.length))
-        return null;
-    return (_jsxs(Container, { children: [_jsx(DateChanger, { isLoading: isLoading, isDatepickerOpen: isDatepickerOpen, toggleDatepicker: toggleDatepicker, closeDatePicker: closeDatePicker, handlePrevDay: handlePrevDay, handleNextDay: handleNextDay, handleChangeDate: handleChangeDate, date: date }), _jsxs(Block, { children: [_jsx(Groups, { groups: groups }), _jsx(TimeSlots, { timeArray: timeArray, groups: groups, activeHours: activeHours, timeSlots: groupedTimeSlots, handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : undefined, handleTimeSlotClick: !isLoading ? handleTimeSlotClick : undefined, isTodayDate: isTodayDate, date: date, timeSlotDefinitions: timeSlotDefinitions })] })] }));
-};

package/ui/Blocks/Scheduler/components/BookedTimeSlots/index.js

@@ -1,46 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { convertDateToTime } from '../../utils/convertDateToTime';
-import { convertMinutesToDuration } from '../../utils/convertMinutesToDuration';
-import { getMinutesFromTime } from '../../utils/getMinutesFromTime';
-import { x } from '@xstyled/styled-components';
-import get from 'lodash/get';
-import { Body, BookedTimeSlot, Header } from './styles';
-export var BookedTimeSlots = function (_a) {
-    var bookedTimeSlots = _a.bookedTimeSlots, timeSlotDefinitions = _a.timeSlotDefinitions, handleTimeSlotClick = _a.handleTimeSlotClick, time = _a.time;
-    return (_jsx(_Fragment, { children: bookedTimeSlots.map(function (_a) {
-            var _b;
-            var id = _a.id, from = _a.from, to = _a.to, rest = __rest(_a, ["id", "from", "to"]);
-            var startTime = convertDateToTime(new Date(from));
-            var endTime = convertDateToTime(new Date(to));
-            var startTimeInMinutes = getMinutesFromTime(startTime);
-            var endTimeInMinutes = getMinutesFromTime(endTime);
-            var totalInMinutes = endTimeInMinutes - startTimeInMinutes;
-            var count = (timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.count) ? get(rest, timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.count) : 0;
-            return (_jsxs(BookedTimeSlot, { startPoint: startTimeInMinutes - getMinutesFromTime(time) + 1, heightInMinutes: totalInMinutes - 2, onClick: handleTimeSlotClick === null || handleTimeSlotClick === void 0 ? void 0 : handleTimeSlotClick(__assign({ id: id, from: from, to: to }, rest)), children: [_jsxs(Header, { children: [_jsx("div", { children: "".concat(startTime, " - ").concat(endTime, " (").concat(convertMinutesToDuration(totalInMinutes), ")") }), _jsxs(x.div, { display: "flex", gap: "6px", alignItems: "center", children: [!!count && count, timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.icon] })] }), _jsx(Body, { children: (_b = timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.data) === null || _b === void 0 ? void 0 : _b.map(function (key) {
-                            var value = get(rest, key);
-                            return _jsx("span", { children: Array.isArray(value) ? value.join(', ') : value }, "".concat(key, "-").concat(time));
-                        }) })] }, id));
-        }) }));
-};

package/ui/Blocks/Scheduler/components/BookedTimeSlots/styles.js

@@ -1,16 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { minuteHeight } from '../../utils/constants';
-import styled, { th } from '@xstyled/styled-components';
-export var BookedTimeSlot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  top: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  box-shadow: ", ";\n  height: ", ";\n  border-left: 4px solid ", ";\n  padding: 10px;\n  margin-right: 10px;\n  margin-left: 6px; // -4px border\n  width: calc(100% - 16px);\n  cursor: pointer;\n  overflow-y: auto;\n  text-align: left;\n"], ["\n  position: absolute;\n  z-index: 1;\n  top: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  box-shadow: ", ";\n  height: ", ";\n  border-left: 4px solid ", ";\n  padding: 10px;\n  margin-right: 10px;\n  margin-left: 6px; // -4px border\n  width: calc(100% - 16px);\n  cursor: pointer;\n  overflow-y: auto;\n  text-align: left;\n"])), function (_a) {
-    var startPoint = _a.startPoint;
-    return "".concat(startPoint * minuteHeight, "px");
-}, th.color('bgLightGray1'), th.shadow('gridShadow'), function (_a) {
-    var heightInMinutes = _a.heightInMinutes;
-    return "".concat(heightInMinutes * minuteHeight, "px");
-}, th.color('green60'));
-export var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  height: fit-content;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  height: fit-content;\n  align-items: center;\n"])));
-export var Body = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 6px;\n  gap: 6px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-top: 6px;\n  gap: 6px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/Scheduler/components/CurrentTimeMarker/hooks/useCurrentTime.js

@@ -1,17 +0,0 @@
-import { useEffect, useState } from 'react';
-import { convertDateToTime } from '../../../utils/convertDateToTime';
-export var useCurrentTime = function () {
-    var _a = useState(new Date()), time = _a[0], setTime = _a[1];
-    useEffect(function () {
-        var interval = setInterval(function () {
-            setTime(new Date());
-        }, 60000);
-        return function () {
-            clearInterval(interval);
-        };
-    }, []);
-    var formattedTime = convertDateToTime(time);
-    return {
-        time: formattedTime
-    };
-};

package/ui/Blocks/Scheduler/components/CurrentTimeMarker/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getMinutesFromTime } from '../../utils/getMinutesFromTime';
-import { useCurrentTime } from './hooks/useCurrentTime';
-import { CurrentTime, CurrentTimeContainer, Line } from './styles';
-export var CurrentTimeMarker = function () {
-    var time = useCurrentTime().time;
-    var minutes = getMinutesFromTime(time);
-    return (_jsxs(CurrentTimeContainer, { minutes: minutes, children: [_jsx(CurrentTime, { children: time }), _jsx(Line, {})] }));
-};

package/ui/Blocks/Scheduler/components/CurrentTimeMarker/styles.js

@@ -1,13 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { currentTimeHeight, currentTimeWidth, minuteHeight } from '../../utils/constants';
-import styled, { th } from '@xstyled/styled-components';
-export var CurrentTimeContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n  padding-left: 10px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  height: ", "px;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: ", ";\n  left: 0;\n  padding-left: 10px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  height: ", "px;\n  z-index: 1;\n"])), function (_a) {
-    var minutes = _a.minutes;
-    return "".concat(minutes * minuteHeight - currentTimeHeight / 2, "px");
-}, currentTimeHeight);
-export var CurrentTime = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 10px;\n  color: white;\n  font-weight: 600;\n  background-color: ", ";\n  width: ", "px;\n  padding: 5px;\n  border-radius: 14px;\n"], ["\n  font-size: 10px;\n  color: white;\n  font-weight: 600;\n  background-color: ", ";\n  width: ", "px;\n  padding: 5px;\n  border-radius: 14px;\n"])), th.color('red1'), currentTimeWidth);
-export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  width: calc(100% - ", "px);\n  height: 1px;\n"], ["\n  background-color: ", ";\n  width: calc(100% - ", "px);\n  height: 1px;\n"])), th.color('red1'), currentTimeWidth);
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/Scheduler/components/DateChanger/index.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useRef } from 'react';
-import DatePicker from '../../../../Elements/DatePicker';
-import { ArrowDown } from '../../../../Elements/Icon';
-import Spinner from '../../../../Elements/Spinner/Spinner';
-import { LanguageContext } from '../../../../ThemeProvider/ThemeProvider';
-import Popover from '../../../Popover';
-import { formatDate } from '../../utils/formatDate';
-import { x } from '@xstyled/styled-components';
-import { ArrowContainer, DateChangerContainer } from './styles';
-export var DateChanger = function (_a) {
-    var isLoading = _a.isLoading, date = _a.date, handleChangeDate = _a.handleChangeDate, closeDatePicker = _a.closeDatePicker, handleNextDay = _a.handleNextDay, handlePrevDay = _a.handlePrevDay, toggleDatepicker = _a.toggleDatepicker, isDatepickerOpen = _a.isDatepickerOpen;
-    var ref = useRef(null);
-    var locale = useContext(LanguageContext);
-    if (isLoading) {
-        return (_jsx(x.div, { p: "6px 12px", children: _jsx(Spinner, { variant: "sm" }) }));
-    }
-    return (_jsxs(DateChangerContainer, { children: [_jsx(ArrowContainer, { onClick: handlePrevDay, rotate: 90, children: _jsx(ArrowDown, {}) }), _jsx(x.span, { ref: ref, onClick: toggleDatepicker, cursor: "pointer", children: formatDate(date, locale) }), isDatepickerOpen && (_jsx(Popover, { parentRef: ref, onClose: closeDatePicker, children: _jsx(DatePicker, { value: date, input: false, onChange: handleChangeDate, isSecondDatePicker: true }) })), _jsx(ArrowContainer, { onClick: handleNextDay, rotate: -90, children: _jsx(ArrowDown, {}) })] }));
-};

package/ui/Blocks/Scheduler/components/DateChanger/styles.js

@@ -1,11 +0,0 @@
-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 DateChangerContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 24px;\n  margin-top: 12px;\n  width: fit-content;\n  align-items: center;\n  column-gap: 12px;\n  font-size: 16px;\n  font-weight: 500;\n"], ["\n  display: flex;\n  margin-bottom: 24px;\n  margin-top: 12px;\n  width: fit-content;\n  align-items: center;\n  column-gap: 12px;\n  font-size: 16px;\n  font-weight: 500;\n"])));
-export var ArrowContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: 15px;\n  width: 15px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transform: ", ";\n"], ["\n  display: flex;\n  height: 15px;\n  width: 15px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transform: ", ";\n"])), function (_a) {
-    var rotate = _a.rotate;
-    return "rotate(".concat(rotate, "deg)");
-});
-var templateObject_1, templateObject_2;

package/ui/Blocks/Scheduler/components/Groups/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GroupContainer, GroupItem, Gap } from './styles';
-export var Groups = function (_a) {
-    var groups = _a.groups;
-    return (_jsxs(GroupContainer, { children: [_jsx(Gap, {}), groups === null || groups === void 0 ? void 0 : groups.map(function (group, i) { return (_jsx(GroupItem, { groupsCount: groups === null || groups === void 0 ? void 0 : groups.length, children: group.name }, group.id)); })] }));
-};

package/ui/Blocks/Scheduler/components/Groups/styles.js

@@ -1,13 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { groupsHeight, timeIntervalWidth } from '../../utils/constants';
-import styled, { th } from '@xstyled/styled-components';
-export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: fit-content;\n"], ["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: fit-content;\n"])), groupsHeight, th.color('lightGray6'));
-export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  flex-shrink: 0;\n  min-width: 350px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  background-color: ", ";\n  flex-shrink: 0;\n  min-width: 350px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (_a) {
-    var bg = _a.bg;
-    return bg || th.color('bgLightGray');
-}, th.color('lightGray6'));
-export var Gap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  width: ", "px;\n  min-width: ", "px;\n  border-right: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  width: ", "px;\n  min-width: ", "px;\n  border-right: 1px solid ", ";\n"])), th.color('bgLightGray1'), timeIntervalWidth, timeIntervalWidth, th.color('lightGray6'));
-var templateObject_1, templateObject_2, templateObject_3;