@mailstep/design-system 0.8.26 → 0.8.27

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

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef } from "react";
+var useClickOutside = function useClickOutside(param) {
+    var onClose = param.onClose, parentRef = param.parentRef, _param_ignoreClickOutside = param.ignoreClickOutside, ignoreClickOutside = _param_ignoreClickOutside === void 0 ? false : _param_ignoreClickOutside, _param_closeCurrent = param.closeCurrent, closeCurrent = _param_closeCurrent === void 0 ? false : _param_closeCurrent, _param_allowScrollbarClick = param.allowScrollbarClick, allowScrollbarClick = _param_allowScrollbarClick === void 0 ? false : _param_allowScrollbarClick;
+    var elementRef = useRef(null);
+    var onCloseModal = !ignoreClickOutside ? onClose : void 0;
+    var handleClickOutside = useCallback(function(e) {
+        var _parentRef_current;
+        var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;
+        if (!ignoreEvent && elementRef.current && !elementRef.current.contains(e.target) && !(parentRef === null || parentRef === void 0 ? void 0 : (_parentRef_current = parentRef.current) === null || _parentRef_current === void 0 ? void 0 : _parentRef_current.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;
+};
+export { useClickOutside };

package/ui/Blocks/Modal/hooks/useModal.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps, ModalData } from '../types';
-
 export declare const useModal: <TData = ModalData>(initialState?: boolean) => ControlProps<TData>;

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

@@ -0,0 +1,67 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useCallback, useState } from "react";
+var useModal = function useModal() {
+    var initialState = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+    var _useState = _sliced_to_array(useState(initialState), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+    var _useState1 = _sliced_to_array(useState(), 2), data = _useState1[0], setData = _useState1[1];
+    var onClose = useCallback(function() {
+        setIsOpen(false);
+        setData(void 0);
+    }, []);
+    var onOpen = useCallback(function(data2) {
+        data2 && setData(data2);
+        setIsOpen(true);
+    }, []);
+    return {
+        isOpen: isOpen,
+        onClose: onClose,
+        onOpen: onOpen,
+        data: data
+    };
+};
+export { useModal };

package/ui/Blocks/Modal/index.d.js

@@ -0,0 +1,3 @@
+import { ControlProps, ModalProps, ModalData } from "./types";
+var index_d_default = Modal;
+export { ControlProps, ModalData, ModalProps, index_d_default as default };

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

@@ -1,5 +1,4 @@
 import { Modal } from './Modal';
-
 export { useModal } from './hooks/useModal';
 export { useClickOutside } from './hooks/useClickOutside';
 export type { ControlProps, ModalProps, ModalData } from './types';

package/ui/Blocks/Modal/index.js

@@ -0,0 +1,5 @@
+import { Modal } from "./Modal";
+import { useModal } from "./hooks/useModal";
+import { useClickOutside } from "./hooks/useClickOutside";
+var Modal_default = Modal;
+export { Modal_default as default, useClickOutside, useModal };

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

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react-webpack5';
-
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').ModalProps>;
+    component: import("react").FC<import("../types").ModalProps>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,9 +1,8 @@
 import { Variant } from './types';
-
-export declare const DialogOverlay: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const DialogOverlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     backgroundColor?: string;
 }, never>;
-export declare const DialogWindow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $backgroundColor?: string;
     $minWidth?: string;
     $minHeight?: string;
@@ -12,18 +11,18 @@ export declare const DialogWindow: import('styled-components').StyledComponent<"
     variant: Variant;
     top?: string;
 }, never>;
-export declare const HeaderContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     variant: Variant;
 }, never>;
-export declare const ContentContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     variant: Variant;
 }, never>;
-export declare const TitleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ButtonsContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     hasSpaceBetween: boolean;
 }, never>;
-export declare const ButtonsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     hasExtraAction: boolean;
     hasBothButtons: boolean;
 }, never>;
-export declare const CloseButton: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Modal/styles.js

@@ -0,0 +1,257 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n        padding: 20px;\n        border-bottom: 1px solid ",
+        ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n        padding: 20px 20px;\n        border-bottom: 1px solid ",
+        ";\n      "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n        padding: 20px;\n      "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n        border-radius: 0;\n        max-width: 100% !important;\n      "
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n        padding: 20px 20px 15px;\n      "
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _tagged_template_literal([
+        "\n        padding: 0;\n      "
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject9 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject10() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject10 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject11() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  justify-content: space-between;\n  ",
+        "\n"
+    ]);
+    _templateObject11 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject12() {
+    var data = _tagged_template_literal([
+        "\n  min-height: 50px;\n  ",
+        "\n"
+    ]);
+    _templateObject12 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject13() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject13 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject14() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject14 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject15() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject15 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject16() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject16 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { css, th } from "@xstyled/styled-components";
+import { createRgba } from "../../utils";
+var Component = /* @__PURE__ */ function(Component2) {
+    Component2["Header"] = "header";
+    Component2["DialogWindow"] = "dialogWindow";
+    Component2["ContentContainer"] = "contentContainer";
+    Component2["Title"] = "title";
+    return Component2;
+}(Component || {});
+var variantStyles = function variantStyles(component) {
+    var variant = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
+    return ({
+        header: {
+            default: css(_templateObject(), th.color("lightGray6")),
+            compact: css(_templateObject1(), th.color("lightGray6")),
+            mobileFullscreen: css(_templateObject2())
+        },
+        dialogWindow: {
+            default: css(_templateObject3()),
+            compact: css(_templateObject4()),
+            mobileFullscreen: css(_templateObject5())
+        },
+        contentContainer: {
+            default: css(_templateObject6()),
+            compact: css(_templateObject7()),
+            mobileFullscreen: css(_templateObject8())
+        },
+        title: {}
+    })[component][variant];
+};
+var DialogOverlay = styled.div(_templateObject9(), function(param) {
+    var _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? "blue2" : _param_backgroundColor;
+    return createRgba(backgroundColor, 0.6);
+});
+var DialogWindow = styled.div(_templateObject10(), function(param) {
+    var $backgroundColor = param.$backgroundColor;
+    return $backgroundColor || "#fefefe";
+}, function(param) {
+    var $minWidth = param.$minWidth;
+    return $minWidth || "10%";
+}, function(param) {
+    var $minHeight = param.$minHeight;
+    return $minHeight || "auto";
+}, function(param) {
+    var $maxHeight = param.$maxHeight;
+    return $maxHeight || "none";
+}, function(param) {
+    var variant = param.variant;
+    return variantStyles("dialogWindow" /* DialogWindow */ , variant);
+}, function(param) {
+    var $maxWidth = param.$maxWidth;
+    return $maxWidth && "max-width: ".concat($maxWidth);
+}, function(param) {
+    var _param_top = param.top, top = _param_top === void 0 ? "100px" : _param_top;
+    return top;
+});
+var HeaderContainer = styled.div(_templateObject11(), function(param) {
+    var variant = param.variant;
+    return variantStyles("header" /* Header */ , variant);
+});
+var ContentContainer = styled.div(_templateObject12(), function(param) {
+    var variant = param.variant;
+    return variantStyles("contentContainer" /* ContentContainer */ , variant);
+});
+var TitleContainer = styled.div(_templateObject13());
+var ButtonsContainer = styled.div(_templateObject14(), th.color("lightGray6"), function(param) {
+    var hasSpaceBetween = param.hasSpaceBetween;
+    return hasSpaceBetween ? "space-between" : "flex-end";
+});
+var ButtonsWrapper = styled.div(_templateObject15(), function(param) {
+    var hasExtraAction = param.hasExtraAction;
+    return hasExtraAction ? "auto" : "100%";
+}, function(param) {
+    var hasBothButtons = param.hasBothButtons;
+    return hasBothButtons ? "50%" : "auto";
+});
+var CloseButton = styled.div(_templateObject16());
+export { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer };

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

@@ -1,5 +1,4 @@
-import { MutableRefObject, ReactNode } from 'react';
-
+import { type MutableRefObject, type ReactNode } from 'react';
 export type Variant = 'default' | 'compact' | 'mobileFullscreen';
 export type Width = 'wide' | 'mediumLarge' | 'medium' | 'narrow' | 'auto';
 export interface ModalProps {

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

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

package/ui/Blocks/Modal/utils.js

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

package/ui/Blocks/Popover/index.d.ts

@@ -1,7 +1,6 @@
-import { default as React, FC } from 'react';
-import { StyledComponent } from 'styled-components';
-import { Placement } from '@popperjs/core';
-
+import React, { type FC } from 'react';
+import { type StyledComponent } from 'styled-components';
+import { type Placement } from '@popperjs/core';
 type DropdownMenuProps = {
     parentRef: React.MutableRefObject<HTMLDivElement | null | undefined>;
     onClose?: () => void;

package/ui/Blocks/Popover/index.js

@@ -0,0 +1,53 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  z-index: 5;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { 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());
+var Popover = function Popover(param) {
+    var placement = param.placement, wrapper = param.wrapper, children = param.children, onClose = param.onClose, parentRef = param.parentRef;
+    var popperRef = useClickOutside({
+        onClose: onClose,
+        parentRef: parentRef
+    });
+    var Wrapper = wrapper || PopoverWrapper;
+    return /* @__PURE__ */ jsx(Portal, {
+        children: /* @__PURE__ */ jsx("div", {
+            ref: popperRef,
+            children: /* @__PURE__ */ jsx(Popper, {
+                innerRef: popperRef,
+                referenceElement: parentRef.current,
+                placement: placement,
+                children: function children1(param) {
+                    var ref = param.ref, style = param.style;
+                    return /* @__PURE__ */ jsx(Wrapper, {
+                        ref: ref,
+                        style: style,
+                        children: children
+                    });
+                }
+            })
+        })
+    });
+};
+var Popover_default = Popover;
+export { Popover_default as default };

package/ui/Blocks/Scheduler/Scheduler.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { SchedulerProps } from './types';
-
+import { type FC } from 'react';
+import { type SchedulerProps } from './types';
 export declare const Scheduler: FC<SchedulerProps>;

package/ui/Blocks/Scheduler/Scheduler.js

@@ -0,0 +1,108 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx, 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();
+var Scheduler = function Scheduler(param) {
+    var groups = param.groups, activeHours = param.activeHours, data = param.data, handleSelectTimeSlot = param.handleSelectTimeSlot, handleReloadTimeSlots = param.handleReloadTimeSlots, handleTimeSlotClick = param.handleTimeSlotClick, isLoading = param.isLoading, timeSlotDefinitions = param.timeSlotDefinitions;
+    var groupedTimeSlots = useMemo(function() {
+        return groupBy(data, function(param) {
+            var groupId = param.groupId, from = param.from;
+            return "".concat(groupId, "-").concat(getClosestStep(from));
+        });
+    }, [
+        data
+    ]);
+    var _useToggleAndClose = _sliced_to_array(useToggleAndClose(false), 3), isDatepickerOpen = _useToggleAndClose[0], toggleDatepicker = _useToggleAndClose[1], closeDatePicker = _useToggleAndClose[2];
+    var _useChangeDate = useChangeDate({
+        closeDatePicker: closeDatePicker,
+        handleReloadTimeSlots: handleReloadTimeSlots
+    }), handlePrevDay = _useChangeDate.handlePrevDay, handleNextDay = _useChangeDate.handleNextDay, handleChangeDate = _useChangeDate.handleChangeDate, date = _useChangeDate.date, isTodayDate = _useChangeDate.isTodayDate;
+    if (!(groups === null || groups === void 0 ? void 0 : groups.length)) return null;
+    return /* @__PURE__ */ jsxs(Container, {
+        children: [
+            /* @__PURE__ */ jsx(DateChanger, {
+                isLoading: isLoading,
+                isDatepickerOpen: isDatepickerOpen,
+                toggleDatepicker: toggleDatepicker,
+                closeDatePicker: closeDatePicker,
+                handlePrevDay: handlePrevDay,
+                handleNextDay: handleNextDay,
+                handleChangeDate: handleChangeDate,
+                date: date
+            }),
+            /* @__PURE__ */ jsxs(Block, {
+                children: [
+                    /* @__PURE__ */ jsx(Groups, {
+                        groups: groups
+                    }),
+                    /* @__PURE__ */ jsx(TimeSlots, {
+                        timeArray: timeArray,
+                        groups: groups,
+                        activeHours: activeHours,
+                        timeSlots: groupedTimeSlots,
+                        handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : void 0,
+                        handleTimeSlotClick: !isLoading ? handleTimeSlotClick : void 0,
+                        isTodayDate: isTodayDate,
+                        date: date,
+                        timeSlotDefinitions: timeSlotDefinitions
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { Scheduler };

package/ui/Blocks/Scheduler/components/BookedTimeSlots/index.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { SchedulerProps, TimeSlotType } from '../../types';
-
+import { type FC } from 'react';
+import type { SchedulerProps, TimeSlotType } from '../../types';
 type BookedTimeSlotsProps = {
     bookedTimeSlots: TimeSlotType[];
     timeSlotDefinitions: SchedulerProps['timeSlotDefinitions'];