@kkkarsss/ui 1.1.6 → 1.2.0

package/dist/ui/information/calendar-like/calendar-item-wrapper.d.ts

@@ -9,6 +9,7 @@ export type TCalendarItemWrapperProps = {
         height: string;
     };
     onDragStart?: (e: DragEvent<HTMLDivElement>, id: string) => void;
+    onDragEnd?: (e: DragEvent<HTMLDivElement>, id: string) => void;
     onResize?: (id: string, newEstimatedTime: number) => void;
     renderTask: (task: TCalendarTask) => ReactNode;
 };

package/dist/ui/information/calendar-like/calendar-item-wrapper.js

@@ -1,24 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { jc } from '../../../utils';
-export const CalendarItemWrapper = ({ task, position, onDragStart, onResize, renderTask, }) => {
+export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, onResize, renderTask, }) => {
     const [previewEstimatedTime, setPreviewEstimatedTime] = useState(null);
     const handleMouseDown = (e) => {
         if (onResize) {
             e.preventDefault();
             e.stopPropagation();
             const startY = e.clientY;
-            const startHeight = (task.estimatedTime / 60) * 80;
+            const startHeight = (task.estimatedTime / 15) * 20;
             const onMouseMove = (moveEvent) => {
                 const deltaY = moveEvent.clientY - startY;
                 const newHeight = Math.max(20, startHeight + deltaY);
-                const newEstimatedTime = Math.max(15, Math.round(((newHeight / 80) * 60) / 15) * 15);
+                // Округляем до 15 минут (20px)
+                const newEstimatedTime = Math.max(15, Math.round(newHeight / 20) * 15);
                 setPreviewEstimatedTime(newEstimatedTime);
             };
             const onMouseUp = (upEvent) => {
                 const deltaY = upEvent.clientY - startY;
                 const newHeight = Math.max(20, startHeight + deltaY);
-                const newEstimatedTime = Math.max(15, Math.round(((newHeight / 80) * 60) / 15) * 15);
+                const newEstimatedTime = Math.max(15, Math.round(newHeight / 20) * 15);
                 if (newEstimatedTime !== task.estimatedTime) {
                     onResize(task.id, newEstimatedTime);
                 }
@@ -35,22 +36,32 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onResize, ren
             document.addEventListener('mouseup', onMouseUp);
         }
     };
-    const displayHeight = previewEstimatedTime ? `${(previewEstimatedTime / 60) * 80}px` : position.height;
+    const displayHeight = previewEstimatedTime ? `${(previewEstimatedTime / 15) * 20}px` : position.height;
     return (_jsx("div", { draggable: !!onDragStart, onDragStart: (e) => {
             onDragStart?.(e, task.id);
             const el = e.currentTarget;
+            // Создаем пустой элемент для скрытия стандартного ghost image браузера
+            const img = new Image();
+            img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+            e.dataTransfer.setDragImage(img, 0, 0);
             if (el) {
-                el.style.opacity = '0.4';
+                // Используем setTimeout, чтобы прозрачность и pointer-events применились после того, как браузер создаст ghost image
+                setTimeout(() => {
+                    el.style.opacity = '0';
+                    el.style.pointerEvents = 'none';
+                }, 0);
             }
         }, onDragEnd: (e) => {
+            onDragEnd?.(e, task.id);
             const el = e.currentTarget;
             if (el) {
                 el.style.opacity = '';
+                el.style.pointerEvents = '';
             }
         }, style: {
             height: displayHeight,
             width: position.width,
             left: position.left,
             top: position.top,
-        }, className: jc('calendar-item absolute p-[2px] transition-all flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', previewEstimatedTime !== null ? 'transition-none z-[60]' : ''), children: _jsxs("div", { className: "w-full h-full relative group/item", children: [renderTask(task), onResize && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center z-[70]", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
+        }, className: jc('calendar-item absolute p-[2px] transition-[height,width,left,opacity] flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', previewEstimatedTime !== null ? 'transition-none z-[60]' : ''), children: _jsxs("div", { className: "w-full h-full relative group/item", children: [renderTask(task), onResize && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center z-[70]", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
 };

package/dist/ui/information/calendar-like/calendar-like.js

@@ -1,26 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { CalendarHourSlot } from './calendar-hour-slot';
+import { useMemo, useState } from 'react';
 import { CalendarItemWrapper } from './calendar-item-wrapper';
-import { calculateTaskPositions, groupTasksByHour } from './utils';
+import { CalendarSlot } from './calendar-slot';
+import { calculateTaskPositions, groupTasksBySlot } from './utils';
+import { jc } from '../../../utils';
 export * from './types';
 export * from './calendar-item-wrapper';
 export * from './calendar-item';
-const DEFAULT_HOURS = Array.from({ length: 24 }, (_, i) => i);
-export const CalendarLike = ({ tasks, hours = DEFAULT_HOURS, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
+const DEFAULT_SLOTS = Array.from({ length: 96 }, (_, i) => i);
+export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
+    const [isDragging, setIsDragging] = useState(false);
     const tasksWithPosition = useMemo(() => calculateTaskPositions(tasks), [tasks]);
-    const tasksByHour = useMemo(() => groupTasksByHour(tasksWithPosition), [tasksWithPosition]);
-    const handleDragStart = (e, taskId) => {
-        e.dataTransfer.setData('taskId', taskId);
+    const tasksBySlot = useMemo(() => groupTasksBySlot(tasksWithPosition), [tasksWithPosition]);
+    const handleDragStart = (e, task) => {
+        setIsDragging(true);
+        e.dataTransfer.setData('taskId', task.id);
+        e.dataTransfer.setData('taskTitle', task.title || '');
+        e.dataTransfer.setData('taskEstimatedTime', String(task.estimatedTime));
+        if (task.color) {
+            e.dataTransfer.setData('taskColor', task.color);
+        }
+        // Сохраняем в глобальную переменную для доступа во время dragOver
+        // eslint-disable-next-line react-hooks/immutability
+        window._draggingTask = {
+            id: task.id,
+            title: task.title,
+            estimatedTime: task.estimatedTime,
+            color: task.color,
+        };
+    };
+    const handleDragEnd = () => {
+        setIsDragging(false);
+        delete window._draggingTask;
     };
     const handleDrop = (e, hour, minutes) => {
+        setIsDragging(false);
         const taskId = e.dataTransfer.getData('taskId');
         if (taskId && onTaskDrop) {
             onTaskDrop(taskId, hour, minutes);
         }
     };
-    return (_jsx("div", { className: "relative border-l border-secondary/20 ml-12 select-none", children: hours.map((hour) => {
-            const tasksForHour = tasksByHour[hour];
-            return (_jsx(CalendarHourSlot, { hour: hour, onDrop: handleDrop, onCreateTask: onCreateTask, children: tasksForHour?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: handleDragStart, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, hour));
+    return (_jsx("div", { className: jc('relative border-l border-secondary/20 ml-12 select-none', isDragging ? 'is-dragging' : ''), children: slots.map((slotIndex) => {
+            const tasksForSlot = tasksBySlot[slotIndex];
+            return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, children: tasksForSlot?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: (e) => handleDragStart(e, task), onDragEnd: handleDragEnd, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, slotIndex));
         }) }));
 };

package/dist/ui/information/calendar-like/calendar-like.stories.js

@@ -58,12 +58,13 @@ export const Interactive = {
         const [tasks, setTasks] = useState(INITIAL_TASKS);
         const [showCompleted, setShowCompleted] = useState(true);
         const filteredTasks = tasks.filter((t) => (showCompleted ? true : !t.isCompleted));
-        const handleTaskDrop = (taskId, hour) => {
-            console.log(`Task ${taskId} dropped at hour ${hour}`);
+        const handleTaskDrop = (taskId, hour, minutes) => {
+            console.log(`Task ${taskId} dropped at ${hour}:${minutes}`);
             setTasks((prev) => prev.map((t) => {
                 if (t.id === taskId) {
                     const newDate = new Date(t.dueDate);
-                    newDate.setHours(hour, 0, 0, 0);
+                    // Storybook handles the date update
+                    newDate.setHours(hour, minutes, 0, 0);
                     return { ...t, dueDate: newDate };
                 }
                 return t;

package/dist/ui/information/calendar-like/{calendar-hour-slot.d.ts → calendar-slot.d.ts}

@@ -1,8 +1,8 @@
 import { type FC, type DragEvent, ReactNode } from 'react';
-export type TCalendarHourSlotProps = {
-    hour: number;
+export type TCalendarSlotProps = {
+    slotIndex: number;
     onDrop?: (e: DragEvent<HTMLDivElement>, hour: number, minutes: number) => void;
     onCreateTask?: (hour: number, minutes: number, estimatedTime: number) => void;
     children?: ReactNode;
 };
-export declare const CalendarHourSlot: FC<TCalendarHourSlotProps>;
+export declare const CalendarSlot: FC<TCalendarSlotProps>;

package/dist/ui/information/calendar-like/calendar-slot.js

@@ -0,0 +1,70 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Typo } from '../text/typo';
+export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, children }) => {
+    const hour = Math.floor(slotIndex / 4);
+    const minutes = (slotIndex % 4) * 15;
+    const isTopSlot = slotIndex % 4 === 0;
+    const [selection, setSelection] = useState(null);
+    const [dragOverInfo, setDragOverInfo] = useState(null);
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        // Пытаемся получить данные из глобальной переменной
+        const draggingTask = window._draggingTask;
+        const title = draggingTask?.title || e.dataTransfer.getData('taskTitle');
+        const estimatedTime = draggingTask?.estimatedTime || Number(e.dataTransfer.getData('taskEstimatedTime')) || 15;
+        const color = draggingTask?.color || e.dataTransfer.getData('taskColor');
+        setDragOverInfo({
+            title,
+            estimatedTime,
+            color,
+            topOffset: 0, // Приклеиваем к началу слота (15-минутка)
+        });
+    };
+    const handleDragLeave = () => {
+        setDragOverInfo(null);
+    };
+    const handleInternalDrop = (e) => {
+        setDragOverInfo(null);
+        onDrop?.(e, hour, minutes); // Приклеиваем к началу слота (15-минутка)
+    };
+    const handleMouseDown = (e) => {
+        if (e.button !== 0 || !onCreateTask)
+            return;
+        if (e.target.closest('.calendar-item'))
+            return;
+        setSelection({
+            startMinutes: minutes,
+            currentEstimatedTime: 15,
+        });
+        const startY = e.clientY;
+        const onMouseMove = (moveEvent) => {
+            const deltaY = moveEvent.clientY - startY;
+            // Округляем до 15 минут (20px)
+            const newEstimatedTime = Math.max(15, Math.round(deltaY / 20) * 15 + 15);
+            setSelection((prev) => (prev ? { ...prev, currentEstimatedTime: newEstimatedTime } : null));
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            setSelection((finalSelection) => {
+                if (finalSelection) {
+                    onCreateTask(hour, minutes, finalSelection.currentEstimatedTime);
+                }
+                return null;
+            });
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    };
+    return (_jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleInternalDrop, onMouseDown: handleMouseDown, className: `relative h-5 group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30 ${isTopSlot ? 'border-t border-t-secondary/20' : ''}`, children: [isTopSlot && (_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) })), _jsxs("div", { className: "pl-4 relative h-full", children: [children, dragOverInfo !== null && (_jsx("div", { className: "absolute left-4 right-1 rounded-sm z-[40] pointer-events-none flex flex-col overflow-hidden border border-accent transition-colors", style: {
+                            top: `${dragOverInfo.topOffset}px`,
+                            height: `${(dragOverInfo.estimatedTime / 15) * 20}px`,
+                            minHeight: '20px',
+                            backgroundColor: dragOverInfo.color ? `${dragOverInfo.color}80` : 'var(--accent)',
+                            borderColor: dragOverInfo.color ? dragOverInfo.color : 'var(--accent)',
+                        }, children: _jsx("div", { className: "p-1", children: _jsx(Typo, { size: "s", weight: "500", className: "truncate leading-none", children: dragOverInfo.title || 'Переместить сюда' }) }) })), selection && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/30 border border-accent rounded-sm z-[40] pointer-events-none", style: {
+                            top: '0px',
+                            height: `${(selection.currentEstimatedTime / 15) * 20}px`,
+                        }, children: _jsxs("div", { className: "p-1", children: [_jsx(Typo, { size: "xs", weight: "500", children: "\u041D\u043E\u0432\u0430\u044F \u0437\u0430\u0434\u0430\u0447\u0430" }), _jsxs(Typo, { size: "xs", color: "secondary", children: [selection.currentEstimatedTime, " \u043C\u0438\u043D"] })] }) }))] })] }));
+};

package/dist/ui/information/calendar-like/index.d.ts

@@ -2,4 +2,3 @@ export * from './calendar-like';
 export * from './types';
 export * from './calendar-item';
 export * from './calendar-item-wrapper';
-export * from './calendar-hour-slot';

package/dist/ui/information/calendar-like/index.js

@@ -2,4 +2,3 @@ export * from './calendar-like';
 export * from './types';
 export * from './calendar-item';
 export * from './calendar-item-wrapper';
-export * from './calendar-hour-slot';

package/dist/ui/information/calendar-like/types.d.ts

@@ -16,6 +16,7 @@ export type TCalendarTaskWithPosition = TCalendarTask & {
 export type TCalendarLikeProps = {
     tasks: TCalendarTask[];
     hours?: number[];
+    slots?: number[];
     renderTask: (task: TCalendarTask) => ReactNode;
     onTaskDrop?: (taskId: string, hour: number, minutes: number) => void;
     onTaskResize?: (taskId: string, newEstimatedTime: number) => void;

package/dist/ui/information/calendar-like/utils.d.ts

@@ -1,3 +1,3 @@
 import { TCalendarTask, TCalendarTaskWithPosition } from './types';
 export declare const calculateTaskPositions: (tasks: TCalendarTask[]) => TCalendarTaskWithPosition[];
-export declare const groupTasksByHour: (tasksWithPosition: TCalendarTaskWithPosition[]) => Record<number, TCalendarTaskWithPosition[]>;
+export declare const groupTasksBySlot: (tasksWithPosition: TCalendarTaskWithPosition[]) => Record<number, TCalendarTaskWithPosition[]>;

package/dist/ui/information/calendar-like/utils.js

@@ -54,8 +54,12 @@ export const calculateTaskPositions = (tasks) => {
             column.forEach((task) => {
                 const width = clusterColumnsCount > 1 ? `${100 / clusterColumnsCount}%` : '100%';
                 const left = clusterColumnsCount > 1 ? `${(colIndex * 100) / clusterColumnsCount}%` : '0%';
-                const top = `${(task.dueDate.getMinutes() / 60) * 80}px`;
-                const height = `${(Math.max(15, task.estimatedTime || 15) / 60) * 80}px`;
+                // Расчитываем смещение внутри 15-минутного слота
+                const minutes = task.dueDate.getMinutes();
+                const minutesInSlot = minutes % 15;
+                const topOffset = (minutesInSlot / 15) * 20;
+                const top = `${Math.round(topOffset)}px`; // Округляем для надежности, но по идее minutesInSlot должен быть 0 если все по сетке
+                const height = `${Math.round((Math.max(15, task.estimatedTime || 15) / 15) * 20)}px`;
                 result.push({
                     ...task,
                     position: { width, left, top, height },
@@ -65,13 +69,15 @@ export const calculateTaskPositions = (tasks) => {
     });
     return result;
 };
-export const groupTasksByHour = (tasksWithPosition) => {
+export const groupTasksBySlot = (tasksWithPosition) => {
     const map = {};
     tasksWithPosition.forEach((task) => {
         const hour = task.dueDate.getHours();
-        if (!map[hour])
-            map[hour] = [];
-        map[hour].push(task);
+        const minutes = task.dueDate.getMinutes();
+        const slotIndex = hour * 4 + Math.floor(minutes / 15);
+        if (!map[slotIndex])
+            map[slotIndex] = [];
+        map[slotIndex].push(task);
     });
     return map;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",
@@ -26,12 +26,12 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.0",
     "@eslint/js": "^9.39.2",
-    "@storybook/addon-a11y": "^10.2.1",
-    "@storybook/addon-docs": "^10.2.1",
-    "@storybook/addon-onboarding": "^10.2.1",
-    "@storybook/addon-vitest": "^10.2.1",
-    "@storybook/react": "^10.2.1",
-    "@storybook/react-vite": "^10.2.1",
+    "@storybook/addon-a11y": "^10.2.7",
+    "@storybook/addon-docs": "^10.2.7",
+    "@storybook/addon-onboarding": "^10.2.7",
+    "@storybook/addon-vitest": "^10.2.7",
+    "@storybook/react": "^10.2.7",
+    "@storybook/react-vite": "^10.2.7",
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
@@ -44,7 +44,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-storybook": "^10.2.1",
+    "eslint-plugin-storybook": "^10.2.7",
     "globals": "^16.5.0",
     "lucide-react": "^0.563.0",
     "playwright": "^1.58.0",
@@ -52,7 +52,7 @@
     "prettier": "^3.8.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "storybook": "^10.2.1",
+    "storybook": "^10.2.7",
     "tailwindcss": "^3.4.19",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.53.1",

package/dist/ui/information/calendar-like/calendar-hour-slot.js

@@ -1,64 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Typo } from '../text/typo';
-export const CalendarHourSlot = ({ hour, onDrop, onCreateTask, children }) => {
-    const [selection, setSelection] = useState(null);
-    const [dragOverMinutes, setDragOverMinutes] = useState(null);
-    const handleDragOver = (e) => {
-        e.preventDefault();
-        const rect = e.currentTarget.getBoundingClientRect();
-        const offsetY = e.clientY - rect.top;
-        const minutes = Math.floor(offsetY / 20) * 15;
-        if (minutes !== dragOverMinutes) {
-            setDragOverMinutes(minutes);
-        }
-    };
-    const handleDragLeave = () => {
-        setDragOverMinutes(null);
-    };
-    const handleInternalDrop = (e) => {
-        setDragOverMinutes(null);
-        const rect = e.currentTarget.getBoundingClientRect();
-        const offsetY = e.clientY - rect.top;
-        const minutes = Math.floor(offsetY / 20) * 15;
-        onDrop?.(e, hour, minutes);
-    };
-    const handleMouseDown = (e) => {
-        if (e.button !== 0 || !onCreateTask)
-            return;
-        if (e.target.closest('.calendar-item'))
-            return;
-        const rect = e.currentTarget.getBoundingClientRect();
-        const offsetY = e.clientY - rect.top;
-        const startMinutes = Math.floor(offsetY / 20) * 15;
-        setSelection({
-            startMinutes,
-            currentEstimatedTime: 15,
-        });
-        const startY = e.clientY;
-        const onMouseMove = (moveEvent) => {
-            const deltaY = moveEvent.clientY - startY;
-            const newEstimatedTime = Math.max(15, Math.round(((deltaY / 80) * 60) / 15) * 15);
-            setSelection((prev) => (prev ? { ...prev, currentEstimatedTime: newEstimatedTime } : null));
-        };
-        const onMouseUp = () => {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-            setSelection((finalSelection) => {
-                if (finalSelection) {
-                    onCreateTask(hour, finalSelection.startMinutes, finalSelection.currentEstimatedTime);
-                }
-                return null;
-            });
-        };
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
-    };
-    return (_jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleInternalDrop, onMouseDown: handleMouseDown, className: "relative h-20 border-b border-secondary-foreground group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30", children: [_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) }), _jsxs("div", { className: "pl-4 py-1 relative h-full", children: [children, dragOverMinutes !== null && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/10 border border-dashed border-accent/50 rounded-sm z-[40] pointer-events-none", style: {
-                            top: `${(dragOverMinutes / 60) * 80}px`,
-                            height: '20px',
-                        } })), selection && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/30 border border-accent rounded-sm z-[40] pointer-events-none", style: {
-                            top: `${(selection.startMinutes / 60) * 80}px`,
-                            height: `${(selection.currentEstimatedTime / 60) * 80}px`,
-                        }, children: _jsxs("div", { className: "p-1", children: [_jsx(Typo, { size: "xs", weight: "500", children: "\u041D\u043E\u0432\u0430\u044F \u0437\u0430\u0434\u0430\u0447\u0430" }), _jsxs(Typo, { size: "xs", color: "secondary", children: [selection.currentEstimatedTime, " \u043C\u0438\u043D"] })] }) }))] })] }));
-};