@mailstep/design-system 0.8.26 → 0.8.27-beta.0

package/ui/Blocks/Modal/Modal.js

@@ -0,0 +1,125 @@
+import { Cancel } from "../../Elements/Icon/icons/Cancel.js";
+import Icon from "../../Elements/Icon/Icon.js";
+import "../../Elements/Icon/index.js";
+import Button_default from "../../Elements/Button/index.js";
+import { useClickOutside } from "./hooks/useClickOutside.js";
+import { H2, H5 } from "../../Elements/Typography/Typography.js";
+import "../../Elements/Typography/index.js";
+import { Portal } from "../../Elements/Portal/index.js";
+import { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer } from "./styles.js";
+import { widthMap } from "./utils.js";
+import { memo, useCallback, useEffect, useMemo } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Modal/Modal.tsx
+const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title, titleIcon, onConfirm, confirmLabel, cancelLabel, extraActionLabel, isLoading, isConfirmDisabled, width = "narrow", onClose, hasFooter = true, hasHeader = true, background, ignoreClickOutside = false, closeEverywhere = false, withCloseIcon = true, overlayColor, minWidth, minHeight, maxWidth, maxHeight, variant = "compact", top, name }) => {
+	const closeDialog = useCallback(() => {
+		if (onClose) onClose();
+		else if (onCancel) onCancel();
+	}, [onClose, onCancel]);
+	const dialogStyle = useMemo(() => ({ width: widthMap[width] }), [width]);
+	const dialogRef = useClickOutside({
+		onClose: closeDialog,
+		ignoreClickOutside,
+		closeCurrent: true,
+		allowScrollbarClick: true
+	});
+	const onDialogConfirmClick = useCallback(() => {
+		onConfirm?.(closeDialog);
+	}, [onConfirm, closeDialog]);
+	useEffect(() => {
+		window.addEventListener("popstate", closeDialog);
+		return () => {
+			window.removeEventListener("popstate", closeDialog);
+		};
+	}, []);
+	if (!isShown) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DialogOverlay, {
+		backgroundColor: overlayColor,
+		children: /* @__PURE__ */ jsxs(DialogWindow, {
+			ref: dialogRef,
+			style: dialogStyle,
+			$backgroundColor: background,
+			top,
+			"data-cy": "dialogWindow",
+			onClick: closeEverywhere ? closeDialog : void 0,
+			$minWidth: minWidth,
+			$minHeight: minHeight,
+			$maxWidth: maxWidth,
+			$maxHeight: maxHeight,
+			variant,
+			children: [
+				title && hasHeader && /* @__PURE__ */ jsx(HeaderContainer, {
+					variant,
+					children: /* @__PURE__ */ jsxs(TitleContainer, { children: [titleIcon && /* @__PURE__ */ jsx(x.div, {
+						as: "span",
+						className: "icon",
+						children: typeof titleIcon === "string" ? /* @__PURE__ */ jsx(Icon, {
+							icon: titleIcon,
+							fill: "blue2"
+						}) : titleIcon
+					}), variant == "default" ? /* @__PURE__ */ jsx(H2, {
+						mt: 0,
+						mb: 0,
+						variant: "bold",
+						children: title
+					}) : /* @__PURE__ */ jsx(H5, {
+						mt: 0,
+						mb: 0,
+						variant: "bold",
+						children: title
+					})] })
+				}),
+				withCloseIcon && /* @__PURE__ */ jsx(CloseButton, {
+					onClick: closeDialog,
+					"data-cy": "dialogCloseBtn",
+					children: /* @__PURE__ */ jsx(Cancel, {
+						width: "11px",
+						height: "11px"
+					})
+				}),
+				/* @__PURE__ */ jsx(ContentContainer, {
+					variant,
+					children
+				}),
+				hasFooter && (onExtraAction || onCancel || onConfirm) && /* @__PURE__ */ jsxs(ButtonsContainer, {
+					hasSpaceBetween: !!onExtraAction,
+					children: [onExtraAction && /* @__PURE__ */ jsx(Button_default, {
+						type: "button",
+						onClick: onExtraAction,
+						isLoading,
+						"data-cy": "extraActionBtn",
+						appearance: "secondary",
+						variant: "ghost",
+						children: extraActionLabel
+					}), /* @__PURE__ */ jsxs(ButtonsWrapper, {
+						hasExtraAction: !!onExtraAction,
+						hasBothButtons: !!onCancel && !!onConfirm,
+						children: [onCancel && /* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							onClick: onCancel,
+							isLoading,
+							"data-cy": "cancelBtn",
+							appearance: "secondary",
+							variant: "default",
+							"data-testid": name ? `button-${name}-cancel` : void 0,
+							children: cancelLabel || "Cancel"
+						}), onConfirm && /* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							onClick: onDialogConfirmClick,
+							isLoading,
+							disabled: isConfirmDisabled,
+							"data-cy": "submitBtn",
+							appearance: "primary",
+							variant: "default",
+							"data-testid": name ? `button-${name}-confirm` : void 0,
+							children: confirmLabel || "Submit"
+						})]
+					})]
+				})
+			]
+		})
+	}) });
+});
+//#endregion
+export { Modal };

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

@@ -1,4 +1,3 @@
-import { RefObject } from 'react';
-import { UseClickOutsideProps } from '../types';
-
+import { type RefObject } from 'react';
+import { type UseClickOutsideProps } from '../types';
 export declare const useClickOutside: ({ onClose, parentRef, ignoreClickOutside, closeCurrent, allowScrollbarClick }: UseClickOutsideProps) => RefObject<HTMLDivElement>;

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

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useRef } from "react";
+//#region packages/ui/Blocks/Modal/hooks/useClickOutside.ts
+const useClickOutside = ({ onClose, parentRef, ignoreClickOutside = false, closeCurrent = false, allowScrollbarClick = false }) => {
+	const elementRef = useRef(null);
+	const onCloseModal = !ignoreClickOutside ? onClose : void 0;
+	const handleClickOutside = useCallback((e) => {
+		if (!(allowScrollbarClick && e.offsetX > e.target.clientWidth) && elementRef.current && !elementRef.current.contains(e.target) && !parentRef?.current?.contains(e.target)) closeCurrent ? e.target.contains(elementRef.current) && onCloseModal?.() : onCloseModal?.();
+	}, [
+		allowScrollbarClick,
+		parentRef,
+		closeCurrent,
+		onCloseModal
+	]);
+	const keyPress = useCallback((e) => {
+		if (e.key === "Escape") onCloseModal?.();
+	}, [onCloseModal]);
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", keyPress);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", keyPress);
+		};
+	}, [handleClickOutside, keyPress]);
+	return elementRef;
+};
+//#endregion
+export { useClickOutside };

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

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

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

@@ -0,0 +1,20 @@
+import { useCallback, useState } from "react";
+//#region packages/ui/Blocks/Modal/hooks/useModal.ts
+const useModal = (initialState = false) => {
+	const [isOpen, setIsOpen] = useState(initialState);
+	const [data, setData] = useState();
+	return {
+		isOpen,
+		onClose: useCallback(() => {
+			setIsOpen(false);
+			setData(void 0);
+		}, []),
+		onOpen: useCallback((data) => {
+			data && setData(data);
+			setIsOpen(true);
+		}, []),
+		data
+	};
+};
+//#endregion
+export { useModal };

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

@@ -0,0 +1 @@
+export { ControlProps, ModalData, ModalProps };

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

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

package/ui/Blocks/Modal/index.js

@@ -0,0 +1,7 @@
+import { useModal } from "./hooks/useModal.js";
+import { useClickOutside } from "./hooks/useClickOutside.js";
+import { Modal } from "./Modal.js";
+//#region packages/ui/Blocks/Modal/index.ts
+var Modal_default = Modal;
+//#endregion
+export { Modal_default as default, useClickOutside, useModal };

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

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

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

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

package/ui/Blocks/Modal/styles.js

@@ -0,0 +1,183 @@
+import { createRgba } from "../../utils/CreateRgba/createRgba.js";
+import "../../utils/index.js";
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Modal/styles.ts
+const variantStyles = (component, variant = "default") => ({
+	header: {
+		default: css`
+        padding: 20px;
+        border-bottom: 1px solid ${th.color("lightGray6")};
+        @media (min-width: 576px) {
+          padding: 30px;
+          border-bottom: 0;
+        }
+      `,
+		compact: css`
+        padding: 20px 20px;
+        border-bottom: 1px solid ${th.color("lightGray6")};
+      `,
+		mobileFullscreen: css`
+        padding: 20px;
+      `
+	},
+	dialogWindow: {
+		default: css`
+        border-radius: 10px;
+        max-width: calc(100% - 32px);
+      `,
+		compact: css`
+        border-radius: 10px;
+        max-width: calc(100% - 32px);
+      `,
+		mobileFullscreen: css`
+        border-radius: 0;
+        max-width: 100% !important;
+      `
+	},
+	contentContainer: {
+		default: css`
+        padding: 20px 20px 15px;
+        @media (min-width: 576px) {
+          padding: 30px;
+        }
+      `,
+		compact: css`
+        padding: 20px 20px 15px;
+      `,
+		mobileFullscreen: css`
+        padding: 0;
+      `
+	},
+	title: {}
+})[component][variant];
+const DialogOverlay = styled$1.div`
+  position: fixed;
+  z-index: 9;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: ${({ backgroundColor = "blue2" }) => createRgba(backgroundColor, .6)};
+  text-align: center;
+
+  @media print {
+    position: absolute !important;
+    left: 0 !important;
+    top: 0 !important;
+    height: auto !important;
+    visibility: hidden;
+  }
+
+  @media (max-width: 576px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+  }
+`;
+const DialogWindow = styled$1.div`
+  background-color: ${({ $backgroundColor }) => $backgroundColor || "#fefefe"};
+  margin: auto;
+  box-shadow: dialogShadow;
+  min-width: ${({ $minWidth }) => $minWidth || "10%"};
+  min-height: ${({ $minHeight }) => $minHeight || "auto"};
+  max-height: ${({ $maxHeight }) => $maxHeight || "none"};
+  display: inline-block;
+  position: relative;
+  text-align: left;
+
+  ${({ variant }) => variantStyles("dialogWindow", variant)}
+  ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth}`};
+
+  @media print {
+    background-color: #fff;
+    margin: 0;
+    visibility: visible;
+    overflow: visible;
+    box-shadow: none;
+    max-width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    margin: ${({ top = "100px" }) => top} auto 0 auto;
+  }
+`;
+const HeaderContainer = styled$1.div`
+  display: flex;
+  justify-content: space-between;
+  ${({ variant }) => variantStyles("header", variant)}
+`;
+const ContentContainer = styled$1.div`
+  min-height: 50px;
+  ${({ variant }) => variantStyles("contentContainer", variant)}
+`;
+const TitleContainer = styled$1.div`
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  color: typoPrimary;
+  padding-right: 34px;
+
+  > div:first-of-type {
+    margin-right: 0.5em;
+    display: block;
+  }
+
+  .icon {
+    font-size: 24px;
+    margin-right: 15px;
+    display: flex;
+
+    @media (max-width: 576px) {
+      font-size: 18px;
+      margin-right: 12px;
+    }
+  }
+`;
+const ButtonsContainer = styled$1.div`
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  border-top: 1px solid ${th.color("lightGray6")};
+  text-align: right;
+  justify-content: ${({ hasSpaceBetween }) => hasSpaceBetween ? "space-between" : "flex-end"};
+
+  @media (max-width: 576px) {
+    display: flex;
+    justify-content: space-around;
+    padding: 32px 18px 18px;
+
+    > * {
+      margin: 0;
+    }
+  }
+`;
+const ButtonsWrapper = styled$1.div`
+  width: ${({ hasExtraAction }) => hasExtraAction ? "auto" : "100%"};
+  display: flex;
+  justify-content: inherit;
+  column-gap: 8px;
+
+  @media (max-width: 576px) {
+    & > button {
+      width: ${({ hasBothButtons }) => hasBothButtons ? "50%" : "auto"};
+    }
+  }
+`;
+const CloseButton = styled$1.div`
+  position: absolute;
+  z-index: 2;
+  background-color: bgLightGray1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  top: 11px;
+  right: 20px;
+  width: 34px;
+  height: 34px;
+`;
+//#endregion
+export { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer };

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

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

package/ui/Blocks/Modal/types.js

@@ -0,0 +1 @@
+export {};

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

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

package/ui/Blocks/Modal/utils.js

@@ -0,0 +1,10 @@
+//#region packages/ui/Blocks/Modal/utils.ts
+const widthMap = {
+	wide: "1450px",
+	mediumLarge: "1200px",
+	medium: "900px",
+	narrow: "600px",
+	auto: "auto"
+};
+//#endregion
+export { widthMap };

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

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

package/ui/Blocks/Popover/index.js

@@ -0,0 +1,32 @@
+import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
+import { Portal } from "../../Elements/Portal/index.js";
+import "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import { Popper } from "react-popper";
+//#region packages/ui/Blocks/Popover/index.tsx
+const PopoverWrapper = styled$1.div`
+  z-index: 5;
+`;
+const Popover = ({ placement, wrapper, children, onClose, parentRef }) => {
+	const popperRef = useClickOutside({
+		onClose,
+		parentRef
+	});
+	const Wrapper = wrapper || PopoverWrapper;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+		ref: popperRef,
+		children: /* @__PURE__ */ jsx(Popper, {
+			innerRef: popperRef,
+			referenceElement: parentRef.current,
+			placement,
+			children: ({ ref, style }) => /* @__PURE__ */ jsx(Wrapper, {
+				ref,
+				style,
+				children
+			})
+		})
+	}) });
+};
+//#endregion
+export { Popover as default };

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

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

package/ui/Blocks/Scheduler/Scheduler.js

@@ -0,0 +1,44 @@
+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
+	})] })] });
+};
+//#endregion
+export { Scheduler };

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

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

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

@@ -0,0 +1,38 @@
+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.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.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

@@ -0,0 +1,35 @@
+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 };