@mailstep/design-system 0.8.26-beta.3 → 0.8.26-beta.4

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.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/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/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.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.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.js

@@ -0,0 +1,126 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { Fragment, jsx, jsxs } 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";
+var BookedTimeSlots = function BookedTimeSlots(param) {
+    var bookedTimeSlots = param.bookedTimeSlots, timeSlotDefinitions = param.timeSlotDefinitions, handleTimeSlotClick = param.handleTimeSlotClick, time = param.time;
+    return /* @__PURE__ */ jsx(Fragment, {
+        children: bookedTimeSlots.map(function(_0) {
+            var id = _0.id, from = _0.from, to = _0.to, rest = _object_without_properties(_0, [
+                "id",
+                "from",
+                "to"
+            ]);
+            var _timeSlotDefinitions_data;
+            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 /* @__PURE__ */ jsxs(BookedTimeSlot, {
+                startPoint: startTimeInMinutes - getMinutesFromTime(time) + 1,
+                heightInMinutes: totalInMinutes - 2,
+                onClick: handleTimeSlotClick === null || handleTimeSlotClick === void 0 ? void 0 : handleTimeSlotClick(_object_spread({
+                    id: id,
+                    from: from,
+                    to: to
+                }, rest)),
+                children: [
+                    /* @__PURE__ */ jsxs(Header, {
+                        children: [
+                            /* @__PURE__ */ jsx("div", {
+                                children: "".concat(startTime, " - ").concat(endTime, " (").concat(convertMinutesToDuration(totalInMinutes), ")")
+                            }),
+                            /* @__PURE__ */ jsxs(x.div, {
+                                display: "flex",
+                                gap: "6px",
+                                alignItems: "center",
+                                children: [
+                                    !!count && count,
+                                    timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.icon
+                                ]
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ jsx(Body, {
+                        children: timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : (_timeSlotDefinitions_data = timeSlotDefinitions.data) === null || _timeSlotDefinitions_data === void 0 ? void 0 : _timeSlotDefinitions_data.map(function(key) {
+                            var value = get(rest, key);
+                            return /* @__PURE__ */ jsx("span", {
+                                children: Array.isArray(value) ? value.join(", ") : value
+                            }, "".concat(key, "-").concat(time));
+                        })
+                    })
+                ]
+            }, id);
+        })
+    });
+};
+export { BookedTimeSlots };