@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/Scheduler/Scheduler.js

@@ -1,108 +1,44 @@
-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 { useToggleAndClose } from "../../hooks/useToggleAndClose.js";
+import { DateChanger } from "./components/DateChanger/index.js";
+import { Groups } from "./components/Groups/index.js";
+import { TimeSlots } from "./components/TimeSlots/index.js";
+import { useChangeDate } from "./hooks/useChangeDate.js";
+import { generateTimeArray } from "./utils/generateTimeArray.js";
+import { getClosestStep } from "./utils/getClosestStep.js";
+import { Block, Container } from "./styles.js";
 import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 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
-                    })
-                ]
-            })
-        ]
-    });
+//#region packages/ui/Blocks/Scheduler/Scheduler.tsx
+const timeArray = generateTimeArray();
+const Scheduler = ({ groups, activeHours, data, handleSelectTimeSlot, handleReloadTimeSlots, handleTimeSlotClick, isLoading, timeSlotDefinitions }) => {
+	const groupedTimeSlots = useMemo(() => groupBy(data, ({ groupId, from }) => `${groupId}-${getClosestStep(from)}`), [data]);
+	const [isDatepickerOpen, toggleDatepicker, closeDatePicker] = useToggleAndClose(false);
+	const { handlePrevDay, handleNextDay, handleChangeDate, date, isTodayDate } = useChangeDate({
+		closeDatePicker,
+		handleReloadTimeSlots
+	});
+	if (!groups?.length) return null;
+	return /* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsx(DateChanger, {
+		isLoading,
+		isDatepickerOpen,
+		toggleDatepicker,
+		closeDatePicker,
+		handlePrevDay,
+		handleNextDay,
+		handleChangeDate,
+		date
+	}), /* @__PURE__ */ jsxs(Block, { children: [/* @__PURE__ */ jsx(Groups, { groups }), /* @__PURE__ */ jsx(TimeSlots, {
+		timeArray,
+		groups,
+		activeHours,
+		timeSlots: groupedTimeSlots,
+		handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : void 0,
+		handleTimeSlotClick: !isLoading ? handleTimeSlotClick : void 0,
+		isTodayDate,
+		date,
+		timeSlotDefinitions
+	})] })] });
 };
+//#endregion
 export { Scheduler };

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

@@ -1,126 +1,38 @@
-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 { getMinutesFromTime } from "../../utils/getMinutesFromTime.js";
+import { convertDateToTime } from "../../utils/convertDateToTime.js";
+import { convertMinutesToDuration } from "../../utils/convertMinutesToDuration.js";
+import { Body, BookedTimeSlot, Header } from "./styles.js";
 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);
-        })
-    });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import get from "lodash/get.js";
+//#region packages/ui/Blocks/Scheduler/components/BookedTimeSlots/index.tsx
+const BookedTimeSlots = ({ bookedTimeSlots, timeSlotDefinitions, handleTimeSlotClick, time }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: bookedTimeSlots.map(({ id, from, to, ...rest }) => {
+		const startTime = convertDateToTime(new Date(from));
+		const endTime = convertDateToTime(new Date(to));
+		const startTimeInMinutes = getMinutesFromTime(startTime);
+		const totalInMinutes = getMinutesFromTime(endTime) - startTimeInMinutes;
+		const count = timeSlotDefinitions?.count ? get(rest, timeSlotDefinitions?.count) : 0;
+		return /* @__PURE__ */ jsxs(BookedTimeSlot, {
+			startPoint: startTimeInMinutes - getMinutesFromTime(time) + 1,
+			heightInMinutes: totalInMinutes - 2,
+			onClick: handleTimeSlotClick?.({
+				id,
+				from,
+				to,
+				...rest
+			}),
+			children: [/* @__PURE__ */ jsxs(Header, { children: [/* @__PURE__ */ jsx("div", { children: `${startTime} - ${endTime} (${convertMinutesToDuration(totalInMinutes)})` }), /* @__PURE__ */ jsxs(x.div, {
+				display: "flex",
+				gap: "6px",
+				alignItems: "center",
+				children: [!!count && count, timeSlotDefinitions?.icon]
+			})] }), /* @__PURE__ */ jsx(Body, { children: timeSlotDefinitions?.data?.map((key) => {
+				const value = get(rest, key);
+				return /* @__PURE__ */ jsx("span", { children: Array.isArray(value) ? value.join(", ") : value }, `${key}-${time}`);
+			}) })]
+		}, id);
+	}) });
 };
+//#endregion
 export { BookedTimeSlots };

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

@@ -1,54 +1,35 @@
-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());
+import "../../utils/constants.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Scheduler/components/BookedTimeSlots/styles.ts
+const BookedTimeSlot = styled$1.div`
+  position: absolute;
+  z-index: 1;
+  top: ${({ startPoint }) => `${startPoint * 5}px`};
+  background-color: ${th.color("bgLightGray1")};
+  border-radius: 4px;
+  box-shadow: ${th.shadow("gridShadow")};
+  height: ${({ heightInMinutes }) => `${heightInMinutes * 5}px`};
+  border-left: 4px solid ${th.color("green60")};
+  padding: 10px;
+  margin-right: 10px;
+  margin-left: 6px; // -4px border
+  width: calc(100% - 16px);
+  cursor: pointer;
+  overflow-y: auto;
+  text-align: left;
+`;
+const Header = styled$1.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  height: fit-content;
+  align-items: center;
+`;
+const Body = styled$1.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 6px;
+  gap: 6px;
+`;
+//#endregion
 export { Body, BookedTimeSlot, Header };

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

@@ -1,64 +1,17 @@
-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 { convertDateToTime } from "../../../utils/convertDateToTime.js";
 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
-    };
+//#region packages/ui/Blocks/Scheduler/components/CurrentTimeMarker/hooks/useCurrentTime.ts
+const useCurrentTime = () => {
+	const [time, setTime] = useState(/* @__PURE__ */ new Date());
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setTime(/* @__PURE__ */ new Date());
+		}, 6e4);
+		return () => {
+			clearInterval(interval);
+		};
+	}, []);
+	return { time: convertDateToTime(time) };
 };
+//#endregion
 export { useCurrentTime };

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

@@ -1,18 +1,14 @@
+import { getMinutesFromTime } from "../../utils/getMinutesFromTime.js";
+import { useCurrentTime } from "./hooks/useCurrentTime.js";
+import { CurrentTime, CurrentTimeContainer, Line } from "./styles.js";
 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, {})
-        ]
-    });
+//#region packages/ui/Blocks/Scheduler/components/CurrentTimeMarker/index.tsx
+const CurrentTimeMarker = () => {
+	const { time } = useCurrentTime();
+	return /* @__PURE__ */ jsxs(CurrentTimeContainer, {
+		minutes: getMinutesFromTime(time),
+		children: [/* @__PURE__ */ jsx(CurrentTime, { children: time }), /* @__PURE__ */ jsx(Line, {})]
+	});
 };
+//#endregion
 export { CurrentTimeMarker };

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

@@ -1,52 +1,30 @@
-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);
+import "../../utils/constants.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Scheduler/components/CurrentTimeMarker/styles.ts
+const CurrentTimeContainer = styled$1.div`
+  position: absolute;
+  top: ${({ minutes }) => `${minutes * 5 - 22 / 2}px`};
+  left: 0;
+  padding-left: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: ${22}px;
+  z-index: 1;
+`;
+const CurrentTime = styled$1.div`
+  font-size: 10px;
+  color: white;
+  font-weight: 600;
+  background-color: ${th.color("red1")};
+  width: ${35}px;
+  padding: 5px;
+  border-radius: 14px;
+`;
+const Line = styled$1.div`
+  background-color: ${th.color("red1")};
+  width: calc(100% - ${35}px);
+  height: 1px;
+`;
+//#endregion
 export { CurrentTime, CurrentTimeContainer, Line };