@trackunit/react-date-and-time-components 1.10.13 → 1.10.18

package/index.cjs.js

@@ -631,7 +631,7 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
     return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: !actionButton ? (jsxRuntime.jsx(reactComponents.Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), dataTestId: dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "secondary" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsxRuntime.jsx("div", { children: actionButton })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { dataTestId: dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
                     return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuList, { className: "min-w-[280px]", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsxRuntime.jsx(reactFormComponents.Search, { className: "w-full", dataTestId: dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
                                             ? t("input.placeholder.customRange.last")
-                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, jsxRuntime.jsx(reactComponents.Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsxRuntime.jsx("hr", { className: "border-secondary-200 my-1", role: "separator" }), jsxRuntime.jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isCustomDateRangeSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null, jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsxRuntime.jsx(reactComponents.Card, { children: jsxRuntime.jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
+                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, jsxRuntime.jsx(reactComponents.Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsxRuntime.jsx("hr", { className: "my-1 border-neutral-200", role: "separator" }), jsxRuntime.jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isCustomDateRangeSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null, jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsxRuntime.jsx(reactComponents.Card, { children: jsxRuntime.jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
                                 ? {
                                     start: dateRange.start ?? undefined,
                                     end: dateRange.end ?? undefined,
@@ -683,17 +683,14 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
             }, value: selectedDay ?? null }) }));
 };
 
-const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "group/timeline",
-], {
+const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge(["flex", "group/timeline"], {
     variants: {
         selected: {
             true: "bg-info-50 rounded-[4px]",
             false: "",
         },
         hoverBehavior: {
-            true: "hover:bg-gray-50 hover:rounded-[4px]",
+            true: "hover:rounded-[4px] hover:bg-neutral-50",
             false: "",
         },
     },
@@ -715,14 +712,14 @@ const cvaLine = cssClassVarianceUtilities.cvaMerge([
     "w-px",
     "h-full",
     "border-l",
-    "border-slate-300",
+    "border-neutral-300",
     "group-first/timeline:top-3.5",
     "group-last/timeline:h-4",
 ], {
     variants: {
         lineStyle: {
             dashed: "border-dashed",
-            solid: ""
+            solid: "",
         },
     },
 });
@@ -736,15 +733,9 @@ const cvaCustomDot = cssClassVarianceUtilities.cvaMerge([
     "rounded-full",
     "border",
     "border-white",
-    "z-[2]"
+    "z-[2]",
 ]);
-const cvaToggleBtnIcon = cssClassVarianceUtilities.cvaMerge([
-    "mr-1",
-    "rounded-lg",
-    "transition-transform",
-    "duration-300",
-    "cursor-pointer",
-], {
+const cvaToggleBtnIcon = cssClassVarianceUtilities.cvaMerge(["mr-1", "rounded-lg", "transition-transform", "duration-300", "cursor-pointer"], {
     variants: {
         rotated: {
             true: "rotate-180",
@@ -752,10 +743,7 @@ const cvaToggleBtnIcon = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
-const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge([
-    "min-h-6",
-    "content-center",
-], {
+const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge(["min-h-6", "content-center"], {
     variants: {
         width: {
             large: "min-w-16",
@@ -821,7 +809,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
     }, [isOpen]);
     const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [childProps.date ? (jsxRuntime.jsx("div", { className: cvaTimelineElementTime({
                     width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
-                }) })) : null, jsxRuntime.jsx("div", { className: cvaDotWrapper(), children: jsxRuntime.jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxRuntime.jsxs("div", { className: "text-secondary-500 hover:text-secondary-600 flex min-h-8 cursor-pointer items-center text-sm", "data-testid": "timeline-toggle-btn", onClick: () => {
+                }) })) : null, jsxRuntime.jsx("div", { className: cvaDotWrapper(), children: jsxRuntime.jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxRuntime.jsxs("div", { className: "flex min-h-8 cursor-pointer items-center text-sm text-neutral-500 hover:text-neutral-600", "data-testid": "timeline-toggle-btn", onClick: () => {
                     toggleButton?.onClick && toggleButton.onClick();
                     setIsOpen(!isOpen);
                 }, children: [jsxRuntime.jsx(reactComponents.Icon, { className: cvaToggleBtnIcon({ rotated: isOpen }), name: "ChevronDown", size: "small" }), jsxRuntime.jsx("span", { children: isOpen ? toggleButton?.collapsedLabel : toggleButton?.expandedLabel })] })] }));
@@ -833,12 +821,12 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
             return null;
         }
         const { date, dateRange, showTime } = dateHeader;
-        return (jsxRuntime.jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsxRuntime.jsx(reactComponents.Text, { className: "text-secondary-500", size: "medium", type: "span", weight: "thick", children: ` (${dateAndTimeUtils.timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsxRuntime.jsx(reactComponents.Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
+        return (jsxRuntime.jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-500", size: "medium", type: "span", weight: "thick", children: ` (${dateAndTimeUtils.timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsxRuntime.jsx(reactComponents.Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     }, [dateHeader, formatDate, formatRange, customHeader, locale]);
     return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsxRuntime.jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsxRuntime.jsx("div", { className: "flex justify-center py-2", onClick: e => {
                                     e.stopPropagation(); // Prevent parent handlers from firing
                                     loadMoreItems();
-                                }, children: jsxRuntime.jsx(reactComponents.Text, { className: "text-secondary-500 hover:text-secondary-600 cursor-pointer", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));
+                                }, children: jsxRuntime.jsx(reactComponents.Text, { className: "cursor-pointer text-neutral-500 hover:text-neutral-600", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));
 };
 
 /**
@@ -886,7 +874,7 @@ const renderChildren = (children) => {
     if (!children) {
         return null;
     }
-    return jsxRuntime.jsx("div", { className: "text-secondary-500 mt-0.5 content-center text-sm", children: children });
+    return jsxRuntime.jsx("div", { className: "mt-0.5 content-center text-sm text-neutral-500", children: children });
 };
 const renderActionButton = (actionButton) => {
     if (!actionButton) {

package/index.esm.js

@@ -629,7 +629,7 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
     return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsx(PopoverTrigger, { children: !actionButton ? (jsx(Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), dataTestId: dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsx(Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "secondary" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") })) : (jsx("div", { children: actionButton })) }), jsx(PopoverContent, { dataTestId: dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
                     return !isCustomDateRangeOpen ? (jsxs(MenuList, { className: "min-w-[280px]", children: [jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsx(Search, { className: "w-full", dataTestId: dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
                                             ? t("input.placeholder.customRange.last")
-                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, jsx(Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsx("hr", { className: "border-secondary-200 my-1", role: "separator" }), jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxs("section", { children: [jsx(MenuDivider, {}), jsx(MenuItem, { dataTestId: dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxs(Fragment, { children: [isCustomDateRangeSelected ? jsx(Icon, { color: "primary", name: "Check", size: "small" }) : null, jsx(Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsx(Card, { children: jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
+                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, jsx(Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsx("hr", { className: "my-1 border-neutral-200", role: "separator" }), jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxs("section", { children: [jsx(MenuDivider, {}), jsx(MenuItem, { dataTestId: dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxs(Fragment, { children: [isCustomDateRangeSelected ? jsx(Icon, { color: "primary", name: "Check", size: "small" }) : null, jsx(Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsx(Card, { children: jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
                                 ? {
                                     start: dateRange.start ?? undefined,
                                     end: dateRange.end ?? undefined,
@@ -681,17 +681,14 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
             }, value: selectedDay ?? null }) }));
 };
 
-const cvaTimelineElement = cvaMerge([
-    "flex",
-    "group/timeline",
-], {
+const cvaTimelineElement = cvaMerge(["flex", "group/timeline"], {
     variants: {
         selected: {
             true: "bg-info-50 rounded-[4px]",
             false: "",
         },
         hoverBehavior: {
-            true: "hover:bg-gray-50 hover:rounded-[4px]",
+            true: "hover:rounded-[4px] hover:bg-neutral-50",
             false: "",
         },
     },
@@ -713,14 +710,14 @@ const cvaLine = cvaMerge([
     "w-px",
     "h-full",
     "border-l",
-    "border-slate-300",
+    "border-neutral-300",
     "group-first/timeline:top-3.5",
     "group-last/timeline:h-4",
 ], {
     variants: {
         lineStyle: {
             dashed: "border-dashed",
-            solid: ""
+            solid: "",
         },
     },
 });
@@ -734,15 +731,9 @@ const cvaCustomDot = cvaMerge([
     "rounded-full",
     "border",
     "border-white",
-    "z-[2]"
+    "z-[2]",
 ]);
-const cvaToggleBtnIcon = cvaMerge([
-    "mr-1",
-    "rounded-lg",
-    "transition-transform",
-    "duration-300",
-    "cursor-pointer",
-], {
+const cvaToggleBtnIcon = cvaMerge(["mr-1", "rounded-lg", "transition-transform", "duration-300", "cursor-pointer"], {
     variants: {
         rotated: {
             true: "rotate-180",
@@ -750,10 +741,7 @@ const cvaToggleBtnIcon = cvaMerge([
         },
     },
 });
-const cvaTimelineElementTime = cvaMerge([
-    "min-h-6",
-    "content-center",
-], {
+const cvaTimelineElementTime = cvaMerge(["min-h-6", "content-center"], {
     variants: {
         width: {
             large: "min-w-16",
@@ -819,7 +807,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
     }, [isOpen]);
     const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [childProps.date ? (jsx("div", { className: cvaTimelineElementTime({
                     width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
-                }) })) : null, jsx("div", { className: cvaDotWrapper(), children: jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxs("div", { className: "text-secondary-500 hover:text-secondary-600 flex min-h-8 cursor-pointer items-center text-sm", "data-testid": "timeline-toggle-btn", onClick: () => {
+                }) })) : null, jsx("div", { className: cvaDotWrapper(), children: jsx("div", { className: cvaLine({ lineStyle: childProps.lineStyle }) }) }), jsxs("div", { className: "flex min-h-8 cursor-pointer items-center text-sm text-neutral-500 hover:text-neutral-600", "data-testid": "timeline-toggle-btn", onClick: () => {
                     toggleButton?.onClick && toggleButton.onClick();
                     setIsOpen(!isOpen);
                 }, children: [jsx(Icon, { className: cvaToggleBtnIcon({ rotated: isOpen }), name: "ChevronDown", size: "small" }), jsx("span", { children: isOpen ? toggleButton?.collapsedLabel : toggleButton?.expandedLabel })] })] }));
@@ -831,12 +819,12 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
             return null;
         }
         const { date, dateRange, showTime } = dateHeader;
-        return (jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxs(Fragment, { children: [jsx(Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsx(Text, { className: "text-secondary-500", size: "medium", type: "span", weight: "thick", children: ` (${timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsx(Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
+        return (jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxs(Fragment, { children: [jsx(Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsx(Text, { className: "text-neutral-500", size: "medium", type: "span", weight: "thick", children: ` (${timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsx(Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     }, [dateHeader, formatDate, formatRange, customHeader, locale]);
     return (jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsx("div", { className: "flex justify-center py-2", onClick: e => {
                                     e.stopPropagation(); // Prevent parent handlers from firing
                                     loadMoreItems();
-                                }, children: jsx(Text, { className: "text-secondary-500 hover:text-secondary-600 cursor-pointer", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));
+                                }, children: jsx(Text, { className: "cursor-pointer text-neutral-500 hover:text-neutral-600", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));
 };
 
 /**
@@ -884,7 +872,7 @@ const renderChildren = (children) => {
     if (!children) {
         return null;
     }
-    return jsx("div", { className: "text-secondary-500 mt-0.5 content-center text-sm", children: children });
+    return jsx("div", { className: "mt-0.5 content-center text-sm text-neutral-500", children: children });
 };
 const renderActionButton = (actionButton) => {
     if (!actionButton) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.10.13",
+  "version": "1.10.18",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,15 +8,15 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.9.13",
-    "@trackunit/date-and-time-utils": "1.7.8",
-    "@trackunit/react-date-and-time-hooks": "1.7.11",
-    "@trackunit/css-class-variance-utilities": "1.7.8",
-    "@trackunit/ui-icons": "1.7.10",
-    "@trackunit/shared-utils": "1.9.8",
-    "@trackunit/i18n-library-translation": "1.7.11",
-    "@trackunit/react-test-setup": "1.4.8",
-    "@trackunit/react-form-components": "1.8.13",
+    "@trackunit/react-components": "1.9.18",
+    "@trackunit/date-and-time-utils": "1.7.10",
+    "@trackunit/react-date-and-time-hooks": "1.7.14",
+    "@trackunit/css-class-variance-utilities": "1.7.10",
+    "@trackunit/ui-icons": "1.7.12",
+    "@trackunit/shared-utils": "1.9.10",
+    "@trackunit/i18n-library-translation": "1.7.14",
+    "@trackunit/react-test-setup": "1.4.10",
+    "@trackunit/react-form-components": "1.8.18",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/Timeline/TimelineElement.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps, IconColors } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
-import { ReactNode, MouseEvent } from "react";
+import { MouseEvent, ReactNode } from "react";
 interface TimeLineElementProps extends CommonProps {
     date?: Date;
     header?: ReactNode;