@mailstep/design-system 0.8.30 → 0.8.31-beta.1

package/ui/Blocks/Scheduler/Scheduler.js

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

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

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

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

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

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

@@ -1,6 +1,6 @@
-export declare const BookedTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const BookedTimeSlot: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     startPoint: number;
     heightInMinutes: number;
 }, never>;
-export declare const Header: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Body: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Header: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Body: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

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

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

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

@@ -1,17 +1,17 @@
-import { convertDateToTime } from "../../../utils/convertDateToTime.js";
-import { useEffect, useState } from "react";
-//#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) };
+import { useEffect, useState } from 'react';
+import { convertDateToTime } from '../../../utils/convertDateToTime';
+export var useCurrentTime = function () {
+    var _a = useState(new Date()), time = _a[0], setTime = _a[1];
+    useEffect(function () {
+        var interval = setInterval(function () {
+            setTime(new Date());
+        }, 60000);
+        return function () {
+            clearInterval(interval);
+        };
+    }, []);
+    var formattedTime = convertDateToTime(time);
+    return {
+        time: formattedTime
+    };
 };
-//#endregion
-export { useCurrentTime };

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

@@ -1,2 +1,3 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 export declare const CurrentTimeMarker: FC;

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

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

package/ui/Blocks/Scheduler/components/CurrentTimeMarker/styles.d.ts

@@ -1,5 +1,5 @@
-export declare const CurrentTimeContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const CurrentTimeContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     minutes: number;
 }, never>;
-export declare const CurrentTime: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CurrentTime: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

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

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

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

@@ -1,5 +1,6 @@
-import { type FC } from 'react';
-import { type DatePickerType } from '../../../../Elements/DatePicker/DatePicker';
+import { FC } from 'react';
+import { DatePickerType } from '../../../../Elements/DatePicker/DatePicker';
+
 type DateChangerProps = {
     isLoading?: boolean;
     isDatepickerOpen: boolean;

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

@@ -1,50 +1,19 @@
-import { ArrowDown } from "../../../../Elements/Icon/icons/ArrowDown.js";
-import "../../../../Elements/Icon/index.js";
-import { Spinner } from "../../../../Elements/Spinner/Spinner.js";
-import { LanguageContext } from "../../../../ThemeProvider/ThemeProvider.js";
-import DatePicker_default from "../../../../Elements/DatePicker/index.js";
-import Popover from "../../../Popover/index.js";
-import { formatDate } from "../../utils/formatDate.js";
-import { ArrowContainer, DateChangerContainer } from "./styles.js";
-import { useContext, useRef } from "react";
-import { x } from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/Scheduler/components/DateChanger/index.tsx
-const DateChanger = ({ isLoading, date, handleChangeDate, closeDatePicker, handleNextDay, handlePrevDay, toggleDatepicker, isDatepickerOpen }) => {
-	const ref = useRef(null);
-	const 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,
-			onClick: toggleDatepicker,
-			cursor: "pointer",
-			children: formatDate(date, locale)
-		}),
-		isDatepickerOpen && /* @__PURE__ */ jsx(Popover, {
-			parentRef: ref,
-			onClose: closeDatePicker,
-			children: /* @__PURE__ */ jsx(DatePicker_default, {
-				value: date,
-				input: false,
-				onChange: handleChangeDate,
-				isSecondDatePicker: true
-			})
-		}),
-		/* @__PURE__ */ jsx(ArrowContainer, {
-			onClick: handleNextDay,
-			rotate: -90,
-			children: /* @__PURE__ */ jsx(ArrowDown, {})
-		})
-	] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from 'react';
+import DatePicker from '../../../../Elements/DatePicker';
+import { ArrowDown } from '../../../../Elements/Icon';
+import Spinner from '../../../../Elements/Spinner/Spinner';
+import { LanguageContext } from '../../../../ThemeProvider/ThemeProvider';
+import Popover from '../../../Popover';
+import { formatDate } from '../../utils/formatDate';
+import { x } from '@xstyled/styled-components';
+import { ArrowContainer, DateChangerContainer } from './styles';
+export var DateChanger = function (_a) {
+    var isLoading = _a.isLoading, date = _a.date, handleChangeDate = _a.handleChangeDate, closeDatePicker = _a.closeDatePicker, handleNextDay = _a.handleNextDay, handlePrevDay = _a.handlePrevDay, toggleDatepicker = _a.toggleDatepicker, isDatepickerOpen = _a.isDatepickerOpen;
+    var ref = useRef(null);
+    var locale = useContext(LanguageContext);
+    if (isLoading) {
+        return (_jsx(x.div, { p: "6px 12px", children: _jsx(Spinner, { variant: "sm" }) }));
+    }
+    return (_jsxs(DateChangerContainer, { children: [_jsx(ArrowContainer, { onClick: handlePrevDay, rotate: 90, children: _jsx(ArrowDown, {}) }), _jsx(x.span, { ref: ref, onClick: toggleDatepicker, cursor: "pointer", children: formatDate(date, locale) }), isDatepickerOpen && (_jsx(Popover, { parentRef: ref, onClose: closeDatePicker, children: _jsx(DatePicker, { value: date, input: false, onChange: handleChangeDate, isSecondDatePicker: true }) })), _jsx(ArrowContainer, { onClick: handleNextDay, rotate: -90, children: _jsx(ArrowDown, {}) })] }));
 };
-//#endregion
-export { DateChanger };

package/ui/Blocks/Scheduler/components/DateChanger/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const DateChangerContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ArrowContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const DateChangerContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const ArrowContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     rotate: number;
 }, never>;

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

@@ -1,23 +1,11 @@
-import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Blocks/Scheduler/components/DateChanger/styles.ts
-const DateChangerContainer = styled$1.div`
-  display: flex;
-  margin-bottom: 24px;
-  margin-top: 12px;
-  width: fit-content;
-  align-items: center;
-  column-gap: 12px;
-  font-size: 16px;
-  font-weight: 500;
-`;
-const ArrowContainer = styled$1.div`
-  display: flex;
-  height: 15px;
-  width: 15px;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transform: ${({ rotate }) => `rotate(${rotate}deg)`};
-`;
-//#endregion
-export { ArrowContainer, DateChangerContainer };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var DateChangerContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 24px;\n  margin-top: 12px;\n  width: fit-content;\n  align-items: center;\n  column-gap: 12px;\n  font-size: 16px;\n  font-weight: 500;\n"], ["\n  display: flex;\n  margin-bottom: 24px;\n  margin-top: 12px;\n  width: fit-content;\n  align-items: center;\n  column-gap: 12px;\n  font-size: 16px;\n  font-weight: 500;\n"])));
+export var ArrowContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: 15px;\n  width: 15px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transform: ", ";\n"], ["\n  display: flex;\n  height: 15px;\n  width: 15px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transform: ", ";\n"])), function (_a) {
+    var rotate = _a.rotate;
+    return "rotate(".concat(rotate, "deg)");
+});
+var templateObject_1, templateObject_2;

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

@@ -1,5 +1,6 @@
-import { type FC } from 'react';
-import { type GroupType } from '../../types';
+import { FC } from 'react';
+import { GroupType } from '../../types';
+
 type GroupsProps = {
     groups?: GroupType[];
 };

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

@@ -1,11 +1,6 @@
-import { Gap, GroupContainer, GroupItem } from "./styles.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/Scheduler/components/Groups/index.tsx
-const Groups = ({ groups }) => {
-	return /* @__PURE__ */ jsxs(GroupContainer, { children: [/* @__PURE__ */ jsx(Gap, {}), groups?.map((group, i) => /* @__PURE__ */ jsx(GroupItem, {
-		groupsCount: groups?.length,
-		children: group.name
-	}, group.id))] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GroupContainer, GroupItem, Gap } from './styles';
+export var Groups = function (_a) {
+    var groups = _a.groups;
+    return (_jsxs(GroupContainer, { children: [_jsx(Gap, {}), groups === null || groups === void 0 ? void 0 : groups.map(function (group, i) { return (_jsx(GroupItem, { groupsCount: groups === null || groups === void 0 ? void 0 : groups.length, children: group.name }, group.id)); })] }));
 };
-//#endregion
-export { Groups };

package/ui/Blocks/Scheduler/components/Groups/styles.d.ts

@@ -1,6 +1,6 @@
-export declare const GroupContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const GroupItem: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    bg?: string;
+export declare const GroupContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const GroupItem: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    bg?: string | undefined;
     groupsCount: number;
 }, never>;
-export declare const Gap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Gap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

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

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

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useRangeSelection.d.ts

@@ -1,4 +1,5 @@
-import { type SchedulerProps } from '../../../types';
+import { SchedulerProps } from '../../../types';
+
 type Props = {
     handleSelectTimeSlot: SchedulerProps['handleSelectTimeSlot'];
     date: Date;