@mailstep/design-system 0.8.26-beta.5 → 0.8.26

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

@@ -1,54 +0,0 @@
-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  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"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  height: fit-content;\n  align-items: center;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: column;\n  margin-top: 6px;\n  gap: 6px;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { minuteHeight } from "../../utils/constants";
-import styled, { th } from "@xstyled/styled-components";
-var BookedTimeSlot = styled.div(_templateObject(), function(param) {
-    var startPoint = param.startPoint;
-    return "".concat(startPoint * minuteHeight, "px");
-}, th.color("bgLightGray1"), th.shadow("gridShadow"), function(param) {
-    var heightInMinutes = param.heightInMinutes;
-    return "".concat(heightInMinutes * minuteHeight, "px");
-}, th.color("green60"));
-var Header = styled.div(_templateObject1());
-var Body = styled.div(_templateObject2());
-export { Body, BookedTimeSlot, Header };

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

@@ -1,64 +0,0 @@
-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 { useEffect, useState } from "react";
-import { convertDateToTime } from "../../../utils/convertDateToTime";
-var useCurrentTime = function useCurrentTime() {
-    var _useState = _sliced_to_array(useState(/* @__PURE__ */ new Date()), 2), time = _useState[0], setTime = _useState[1];
-    useEffect(function() {
-        var interval = setInterval(function() {
-            setTime(/* @__PURE__ */ new Date());
-        }, 6e4);
-        return function() {
-            clearInterval(interval);
-        };
-    }, []);
-    var formattedTime = convertDateToTime(time);
-    return {
-        time: formattedTime
-    };
-};
-export { useCurrentTime };

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

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

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

@@ -1,52 +0,0 @@
-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  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"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  background-color: ",
-        ";\n  width: calc(100% - ",
-        "px);\n  height: 1px;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { currentTimeHeight, currentTimeWidth, minuteHeight } from "../../utils/constants";
-import styled, { th } from "@xstyled/styled-components";
-var CurrentTimeContainer = styled.div(_templateObject(), function(param) {
-    var minutes = param.minutes;
-    return "".concat(minutes * minuteHeight - currentTimeHeight / 2, "px");
-}, currentTimeHeight);
-var CurrentTime = styled.div(_templateObject1(), th.color("red1"), currentTimeWidth);
-var Line = styled.div(_templateObject2(), th.color("red1"), currentTimeWidth);
-export { CurrentTime, CurrentTimeContainer, Line };

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

@@ -1,54 +0,0 @@
-import { jsx, 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";
-var DateChanger = function DateChanger(param) {
-    var isLoading = param.isLoading, date = param.date, handleChangeDate = param.handleChangeDate, closeDatePicker = param.closeDatePicker, handleNextDay = param.handleNextDay, handlePrevDay = param.handlePrevDay, toggleDatepicker = param.toggleDatepicker, isDatepickerOpen = param.isDatepickerOpen;
-    var ref = useRef(null);
-    var locale = useContext(LanguageContext);
-    if (isLoading) {
-        return /* @__PURE__ */ jsx(x.div, {
-            p: "6px 12px",
-            children: /* @__PURE__ */ jsx(Spinner, {
-                variant: "sm"
-            })
-        });
-    }
-    return /* @__PURE__ */ jsxs(DateChangerContainer, {
-        children: [
-            /* @__PURE__ */ jsx(ArrowContainer, {
-                onClick: handlePrevDay,
-                rotate: 90,
-                children: /* @__PURE__ */ jsx(ArrowDown, {})
-            }),
-            /* @__PURE__ */ jsx(x.span, {
-                ref: ref,
-                onClick: toggleDatepicker,
-                cursor: "pointer",
-                children: formatDate(date, locale)
-            }),
-            isDatepickerOpen && /* @__PURE__ */ jsx(Popover, {
-                parentRef: ref,
-                onClose: closeDatePicker,
-                children: /* @__PURE__ */ jsx(DatePicker, {
-                    value: date,
-                    input: false,
-                    onChange: handleChangeDate,
-                    isSecondDatePicker: true
-                })
-            }),
-            /* @__PURE__ */ jsx(ArrowContainer, {
-                onClick: handleNextDay,
-                rotate: -90,
-                children: /* @__PURE__ */ jsx(ArrowDown, {})
-            })
-        ]
-    });
-};
-export { DateChanger };

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

@@ -1,36 +0,0 @@
-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  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"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  height: 15px;\n  width: 15px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transform: ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
-var DateChangerContainer = styled.div(_templateObject());
-var ArrowContainer = styled.div(_templateObject1(), function(param) {
-    var rotate = param.rotate;
-    return "rotate(".concat(rotate, "deg)");
-});
-export { ArrowContainer, DateChangerContainer };

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

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

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

@@ -1,54 +0,0 @@
-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  height: ",
-        "px;\n  display: flex;\n  border-bottom: 1px solid ",
-        ";\n  width: fit-content;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  background-color: ",
-        ";\n  height: 100%;\n  width: ",
-        "px;\n  min-width: ",
-        "px;\n  border-right: 1px solid ",
-        ";\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { groupsHeight, timeIntervalWidth } from "../../utils/constants";
-import styled, { th } from "@xstyled/styled-components";
-var GroupContainer = styled.div(_templateObject(), groupsHeight, th.color("lightGray6"));
-var GroupItem = styled.div(_templateObject1(), function(param) {
-    var bg = param.bg;
-    return bg || th.color("bgLightGray");
-}, th.color("lightGray6"));
-var Gap = styled.div(_templateObject2(), th.color("bgLightGray1"), timeIntervalWidth, timeIntervalWidth, th.color("lightGray6"));
-export { Gap, GroupContainer, GroupItem };

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useRangeSelection.js

@@ -1,117 +0,0 @@
-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";
-import { convertIndexToISOString } from "../../../utils/convertIndexToISOString";
-var useRangeSelection = function useRangeSelection(param) {
-    var handleSelectTimeSlot = param.handleSelectTimeSlot, date = param.date;
-    var _useState = _sliced_to_array(useState(false), 2), isSelecting = _useState[0], setIsSelecting = _useState[1];
-    var _useState1 = _sliced_to_array(useState([]), 2), selectionRange = _useState1[0], setSelectionRange = _useState1[1];
-    var _useState2 = _sliced_to_array(useState(null), 2), selectedGroup = _useState2[0], setSelectedGroup = _useState2[1];
-    var handleMouseDown = useCallback(function(index, groupId) {
-        return function() {
-            setSelectionRange([
-                index
-            ]);
-            setIsSelecting(true);
-            setSelectedGroup(groupId);
-        };
-    }, []);
-    var handleMouseOver = useCallback(function(index) {
-        return function() {
-            if (!isSelecting) return;
-            setSelectionRange(function(prevRange) {
-                var start = prevRange[0];
-                var end = prevRange.at(-1);
-                if (end && (end < index ? end + 1 !== index : end - 1 !== index)) {
-                    return [
-                        index
-                    ];
-                }
-                return Array.from({
-                    length: Math.abs(index - start) + 1
-                }, function(_, i) {
-                    return start < index ? start + i : start - i;
-                });
-            });
-        };
-    }, [
-        isSelecting
-    ]);
-    var handleMouseUp = useCallback(function() {
-        setIsSelecting(false);
-        if (selectedGroup && (selectionRange === null || selectionRange === void 0 ? void 0 : selectionRange.length)) {
-            var _selectionRange_at;
-            var start = selectionRange[0];
-            var end = ((_selectionRange_at = selectionRange.at(-1)) !== null && _selectionRange_at !== void 0 ? _selectionRange_at : 0) + 1;
-            handleSelectTimeSlot === null || handleSelectTimeSlot === void 0 ? void 0 : handleSelectTimeSlot({
-                groupId: selectedGroup,
-                from: convertIndexToISOString(start, date),
-                to: convertIndexToISOString(end, date)
-            });
-        }
-        setSelectedGroup(null);
-        setSelectionRange([]);
-    }, [
-        date,
-        handleSelectTimeSlot,
-        selectedGroup,
-        selectionRange
-    ]);
-    var isSlotSelected = useCallback(function(index, groupId) {
-        return groupId === selectedGroup && selectionRange.includes(index);
-    }, [
-        selectionRange,
-        selectedGroup
-    ]);
-    return {
-        handleMouseDown: handleMouseDown,
-        handleMouseOver: handleMouseOver,
-        handleMouseUp: handleMouseUp,
-        isSlotSelected: isSlotSelected
-    };
-};
-export { useRangeSelection };

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useScroll.js

@@ -1,20 +0,0 @@
-import { useEffect, useRef } from "react";
-var useScroll = function useScroll() {
-    var containerRef = useRef(null);
-    useEffect(function() {
-        var _containerRef_current;
-        var now = /* @__PURE__ */ new Date();
-        var hours = String(now.getHours()).padStart(2, "0");
-        var timeElement = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.querySelector('[data-time="'.concat(hours, ':00"]'));
-        if (timeElement) {
-            timeElement.scrollIntoView({
-                behavior: "smooth",
-                block: "center"
-            });
-        }
-    }, []);
-    return {
-        containerRef: containerRef
-    };
-};
-export { useScroll };

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

@@ -1,56 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isActiveTime } from "../../utils/isActiveTime";
-import { BookedTimeSlots } from "../BookedTimeSlots";
-import { CurrentTimeMarker } from "../CurrentTimeMarker";
-import { useRangeSelection } from "./hooks/useRangeSelection";
-import { useScroll } from "./hooks/useScroll";
-import { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer } from "./styles";
-var TimeSlots = function TimeSlots(param) {
-    var timeArray = param.timeArray, groups = param.groups, activeHours = param.activeHours, timeSlots = param.timeSlots, handleSelectTimeSlot = param.handleSelectTimeSlot, handleTimeSlotClick = param.handleTimeSlotClick, isTodayDate = param.isTodayDate, date = param.date, timeSlotDefinitions = param.timeSlotDefinitions;
-    var containerRef = useScroll().containerRef;
-    var _useRangeSelection = useRangeSelection({
-        handleSelectTimeSlot: handleSelectTimeSlot,
-        date: date
-    }), handleMouseUp = _useRangeSelection.handleMouseUp, handleMouseDown = _useRangeSelection.handleMouseDown, handleMouseOver = _useRangeSelection.handleMouseOver, isSlotSelected = _useRangeSelection.isSlotSelected;
-    return /* @__PURE__ */ jsxs(TimeSlotsContainer, {
-        ref: containerRef,
-        children: [
-            timeArray.map(function(time, index) {
-                var activeTime = isActiveTime({
-                    activeHours: activeHours,
-                    time: time
-                });
-                return /* @__PURE__ */ jsxs(TimeRow, {
-                    disabled: !activeTime,
-                    "data-time": time,
-                    children: [
-                        /* @__PURE__ */ jsx(TimeInterval, {
-                            children: time
-                        }),
-                        groups === null || groups === void 0 ? void 0 : groups.map(function(group) {
-                            var _ref;
-                            var bookedTimeSlots = (_ref = timeSlots === null || timeSlots === void 0 ? void 0 : timeSlots["".concat(group.id, "-").concat(time)]) !== null && _ref !== void 0 ? _ref : [];
-                            var canSelectSlot = !bookedTimeSlots.length && activeTime;
-                            return /* @__PURE__ */ jsx(EmptyTimeSlot, {
-                                groupsCount: groups === null || groups === void 0 ? void 0 : groups.length,
-                                activeTime: activeTime,
-                                isSlotSelected: canSelectSlot && isSlotSelected(index, group.id),
-                                onMouseDown: canSelectSlot ? handleMouseDown(index, group.id) : void 0,
-                                onMouseOver: canSelectSlot ? handleMouseOver(index) : void 0,
-                                onMouseUp: canSelectSlot ? handleMouseUp : void 0,
-                                children: /* @__PURE__ */ jsx(BookedTimeSlots, {
-                                    bookedTimeSlots: bookedTimeSlots,
-                                    timeSlotDefinitions: timeSlotDefinitions,
-                                    time: time,
-                                    handleTimeSlotClick: handleTimeSlotClick
-                                })
-                            }, group.id);
-                        })
-                    ]
-                }, time);
-            }),
-            isTodayDate && /* @__PURE__ */ jsx(CurrentTimeMarker, {})
-        ]
-    });
-};
-export { TimeSlots };

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

@@ -1,76 +0,0 @@
-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  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  width: fit-content;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  background-color: ",
-        ";\n  display: flex;\n  width: fit-content;\n  border-bottom: 1px solid ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  height: ",
-        "px;\n  flex-shrink: 0;\n  min-width: 350px;\n  box-sizing: border-box;\n  position: relative;\n  background-color: ",
-        ";\n  cursor: ",
-        ";\n  border-right: 1px solid ",
-        ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ",
-        ";\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 12px;\n  font-weight: 500;\n  height: ",
-        "px;\n  width: ",
-        "px;\n  border-right: 1px solid ",
-        ";\n  padding: 10px;\n  min-width: ",
-        "px;\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { minuteHeight, stepInMinutes, timeIntervalWidth } from "../../utils/constants";
-import styled, { th } from "@xstyled/styled-components";
-var TimeSlotsContainer = styled.div(_templateObject());
-var TimeRow = styled.div(_templateObject1(), function(param) {
-    var disabled = param.disabled;
-    return disabled ? th.color("lightGray7") : "white";
-}, th.color("lightGray6"));
-var EmptyTimeSlot = styled.div(_templateObject2(), minuteHeight * stepInMinutes, function(param) {
-    var isSlotSelected = param.isSlotSelected;
-    return isSlotSelected ? th.color("blue20") : "";
-}, function(param) {
-    var isSlotSelected = param.isSlotSelected, activeTime = param.activeTime;
-    return isSlotSelected || !activeTime ? "default" : "pointer";
-}, th.color("lightGray6"), function(param) {
-    var isSlotSelected = param.isSlotSelected, activeTime = param.activeTime;
-    return !isSlotSelected && activeTime ? th.color("blue10") : "";
-});
-var TimeInterval = styled.div(_templateObject3(), minuteHeight * stepInMinutes, timeIntervalWidth, th.color("lightGray6"), timeIntervalWidth);
-export { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer };