@helpwave/hightide 0.1.6 → 0.1.7

package/dist/components/user-action/{DateAndTimePicker.cjs → DateAndTimePicker.mjs}

@@ -1,45 +1,11 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
 // src/components/user-action/DateAndTimePicker.tsx
-var DateAndTimePicker_exports = {};
-__export(DateAndTimePicker_exports, {
-  DateTimePicker: () => DateTimePicker
-});
-module.exports = __toCommonJS(DateAndTimePicker_exports);
-var import_clsx7 = __toESM(require("clsx"), 1);
+import clsx7 from "clsx";
 
 // src/localization/LanguageProvider.tsx
-var import_react2 = require("react");
+import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/hooks/useLocalStorage.ts
-var import_react = require("react");
+import { useCallback, useEffect, useState } from "react";
 
 // src/localization/util.ts
 var languages = ["en", "de"];
@@ -55,12 +21,12 @@ var LanguageUtil = {
 };
 
 // src/localization/LanguageProvider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var LanguageContext = (0, import_react2.createContext)({
+import { jsx } from "react/jsx-runtime";
+var LanguageContext = createContext({
   language: LanguageUtil.DEFAULT_LANGUAGE,
   setLanguage: (v) => v
 });
-var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
+var useLanguage = () => useContext(LanguageContext);
 var useLocale = (overWriteLanguage) => {
   const { language } = useLanguage();
   const mapping = {
@@ -204,8 +170,8 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
 };
 
 // src/components/user-action/Button.tsx
-var import_clsx = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
+import clsx from "clsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var paddingMapping = {
   small: "btn-sm",
   medium: "btn-md",
@@ -249,25 +215,25 @@ var SolidButton = ({
     negative: "text-button-solid-negative-icon",
     neutral: "text-button-solid-neutral-icon"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: (0, import_clsx.default)(
+      className: clsx(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
+          [clsx(colorClasses, "hover:brightness-90")]: !disabled
         },
         ButtonUtil.paddingMapping[size],
         className
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        startIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -275,10 +241,10 @@ var SolidButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        endIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -310,25 +276,25 @@ var TextButton = ({
     negative: "text-button-text-negative-icon",
     neutral: "text-button-text-neutral-icon"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: (0, import_clsx.default)(
+      className: clsx(
         {
           "text-disabled-text cursor-not-allowed": disabled,
-          [(0, import_clsx.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
+          [clsx(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
         },
         ButtonUtil.paddingMapping[size],
         className
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        startIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -336,10 +302,10 @@ var TextButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        endIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -352,10 +318,10 @@ var TextButton = ({
 };
 
 // src/components/date/TimePicker.tsx
-var import_react3 = require("react");
-var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
-var import_clsx2 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
+import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { Scrollbars } from "react-custom-scrollbars-2";
+import clsx2 from "clsx";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var TimePicker = ({
   time = /* @__PURE__ */ new Date(),
   onChange = noop,
@@ -364,12 +330,12 @@ var TimePicker = ({
   maxHeight = 300,
   className = ""
 }) => {
-  const minuteRef = (0, import_react3.useRef)(null);
-  const hourRef = (0, import_react3.useRef)(null);
+  const minuteRef = useRef(null);
+  const hourRef = useRef(null);
   const isPM = time.getHours() >= 11;
   const hours = is24HourFormat ? range(0, 23) : range(1, 12);
   let minutes = range(0, 59);
-  (0, import_react3.useEffect)(() => {
+  useEffect3(() => {
     const scrollToItem = () => {
       if (minuteRef.current) {
         const container = minuteRef.current.parentElement;
@@ -384,7 +350,7 @@ var TimePicker = ({
     };
     scrollToItem();
   }, [minuteRef, minuteRef.current]);
-  (0, import_react3.useEffect)(() => {
+  useEffect3(() => {
     const scrollToItem = () => {
       if (hourRef.current) {
         const container = hourRef.current.parentElement;
@@ -414,7 +380,7 @@ var TimePicker = ({
       break;
   }
   const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
-  const style = (selected) => (0, import_clsx2.default)(
+  const style = (selected) => clsx2(
     "chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3",
     { "bg-primary text-on-primary": selected, "bg-white text-black": !selected }
   );
@@ -423,10 +389,10 @@ var TimePicker = ({
     transformer(newDate);
     onChange(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
+  return /* @__PURE__ */ jsxs2("div", { className: clsx2("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
+    /* @__PURE__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
       const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ jsx3(
         "button",
         {
           ref: currentHour ? hourRef : void 0,
@@ -437,9 +403,9 @@ var TimePicker = ({
         hour
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
+    /* @__PURE__ */ jsx3(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx3("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
       const currentMinute = minute === closestMinute;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ jsx3(
         "button",
         {
           ref: currentMinute ? minuteRef : void 0,
@@ -450,8 +416,8 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }) }),
-    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "col gap-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    !is24HourFormat && /* @__PURE__ */ jsxs2("div", { className: "col gap-y-1", children: [
+      /* @__PURE__ */ jsx3(
         "button",
         {
           className: style(!isPM),
@@ -459,7 +425,7 @@ var TimePicker = ({
           children: "AM"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ jsx3(
         "button",
         {
           className: style(isPM),
@@ -472,22 +438,22 @@ var TimePicker = ({
 };
 
 // src/components/date/DatePicker.tsx
-var import_react7 = require("react");
-var import_lucide_react2 = require("lucide-react");
-var import_clsx6 = __toESM(require("clsx"), 1);
+import { useEffect as useEffect7, useState as useState7 } from "react";
+import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
+import clsx6 from "clsx";
 
 // src/components/date/YearMonthPicker.tsx
-var import_react5 = require("react");
-var import_react_custom_scrollbars_22 = require("react-custom-scrollbars-2");
-var import_clsx4 = __toESM(require("clsx"), 1);
+import { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
+import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
+import clsx4 from "clsx";
 
 // src/components/layout-and-navigation/Expandable.tsx
-var import_react4 = require("react");
-var import_lucide_react = require("lucide-react");
-var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "min-w-[16px]" });
-var Expandable = (0, import_react4.forwardRef)(function Expandable2({
+import { forwardRef, useEffect as useEffect4, useState as useState4 } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import clsx3 from "clsx";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx4(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx4(ChevronDown, { size: 16, className: "min-w-[16px]" });
+var Expandable = forwardRef(function Expandable2({
   children,
   label,
   icon,
@@ -499,17 +465,17 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
   headerClassName = ""
 }, ref) {
   icon ??= DefaultIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref,
-      className: (0, import_clsx3.default)("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
+      className: clsx3("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ jsxs3(
           "div",
           {
-            className: (0, import_clsx3.default)(
+            className: clsx3(
               "row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
                 "group-hover:brightness-95": !isExpanded,
@@ -525,21 +491,21 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ jsx4("div", { className: "col px-4 pb-2", children })
       ]
     }
   );
 });
-var ExpandableUncontrolled = (0, import_react4.forwardRef)(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
   isExpanded,
   onChange = noop,
   ...props
 }, ref) {
-  const [usedIsExpanded, setUsedIsExpanded] = (0, import_react4.useState)(isExpanded);
-  (0, import_react4.useEffect)(() => {
+  const [usedIsExpanded, setUsedIsExpanded] = useState4(isExpanded);
+  useEffect4(() => {
     setUsedIsExpanded(isExpanded);
   }, [isExpanded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ jsx4(
     Expandable,
     {
       ...props,
@@ -554,7 +520,7 @@ var ExpandableUncontrolled = (0, import_react4.forwardRef)(function ExpandableUn
 });
 
 // src/components/date/YearMonthPicker.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+import { jsx as jsx5 } from "react/jsx-runtime";
 var YearMonthPicker = ({
   displayedYearMonth = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
@@ -565,8 +531,8 @@ var YearMonthPicker = ({
   showValueOpen = true
 }) => {
   const locale = useLocale();
-  const ref = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const ref = useRef2(null);
+  useEffect5(() => {
     const scrollToItem = () => {
       if (ref.current) {
         ref.current.scrollIntoView({
@@ -582,15 +548,15 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range(start.getFullYear(), end.getFullYear());
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx4.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ jsx5("div", { className: clsx4("col select-none", className), children: /* @__PURE__ */ jsx5(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx5("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ jsx5(
       ExpandableUncontrolled,
       {
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
-        label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_clsx4.default)({ "text-primary font-bold": selectedYear }), children: year }),
+        label: /* @__PURE__ */ jsx5("span", { className: clsx4({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx5("div", { className: "row", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -599,11 +565,11 @@ var YearMonthPicker = ({
           const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
           const isBeforeEnd = end === void 0 || firstOfMonth <= end;
           const isValid = isAfterStart && isBeforeEnd;
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          return /* @__PURE__ */ jsx5(
             "button",
             {
               disabled: !isValid,
-              className: (0, import_clsx4.default)(
+              className: clsx4(
                 "chip hover:brightness-95 flex-1",
                 {
                   "bg-gray-50 text-black": !selectedMonth && isValid,
@@ -618,7 +584,7 @@ var YearMonthPicker = ({
             },
             month
           );
-        }) }, index)) })
+        }) }, index))
       },
       year
     );
@@ -626,9 +592,9 @@ var YearMonthPicker = ({
 };
 
 // src/components/date/DayPicker.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+import clsx5 from "clsx";
+import { useEffect as useEffect6, useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth,
   selected,
@@ -642,18 +608,18 @@ var DayPicker = ({
   const locale = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("col gap-y-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "row text-center", children: week.map((date) => {
+  return /* @__PURE__ */ jsxs4("div", { className: clsx5("col gap-y-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ jsx6("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx6("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ jsx6("div", { className: "row text-center", children: week.map((date) => {
       const isSelected = !!selected && equalDate(selected, date);
       const isToday = equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ jsx6(
         "button",
         {
           disabled: !isDayValid,
-          className: (0, import_clsx5.default)(
+          className: clsx5(
             "flex-1 rounded-full border-2 border-transparent shadow-sm",
             {
               "text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
@@ -674,7 +640,7 @@ var DayPicker = ({
 };
 
 // src/components/date/DatePicker.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultDatePickerTranslation = {
   en: {
     today: "Today"
@@ -696,28 +662,28 @@ var DatePicker = ({
 }) => {
   const locale = useLocale();
   const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
-  const [displayedMonth, setDisplayedMonth] = (0, import_react7.useState)(value);
-  const [displayMode, setDisplayMode] = (0, import_react7.useState)(initialDisplay);
-  (0, import_react7.useEffect)(() => {
+  const [displayedMonth, setDisplayedMonth] = useState7(value);
+  const [displayMode, setDisplayMode] = useState7(initialDisplay);
+  useEffect7(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_clsx6.default)("col gap-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row items-center justify-between h-7", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ jsxs5("div", { className: clsx6("col gap-y-4", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "row items-center justify-between h-7", children: [
+      /* @__PURE__ */ jsxs5(
         TextButton,
         {
-          className: (0, import_clsx6.default)("row gap-x-1 items-center cursor-pointer select-none", {
+          className: clsx6("row gap-x-1 items-center cursor-pointer select-none", {
             "text-disabled-text": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(locale, { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ChevronDown, { size: 16 })
+            /* @__PURE__ */ jsx7(ChevronDown2, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row justify-end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      displayMode === "day" && /* @__PURE__ */ jsxs5("div", { className: "row justify-end", children: [
+        /* @__PURE__ */ jsx7(
           SolidButton,
           {
             size: "small",
@@ -726,10 +692,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ jsx7(ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ jsx7(
           SolidButton,
           {
             size: "small",
@@ -738,12 +704,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ jsx7(ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    displayMode === "yearMonth" ? /* @__PURE__ */ jsx7(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -755,8 +721,8 @@ var DatePicker = ({
           setDisplayMode("day");
         }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ) : /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx7(
         DayPicker,
         {
           ...dayPickerProps,
@@ -769,9 +735,10 @@ var DatePicker = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ jsx7("div", { className: "mt-2", children: /* @__PURE__ */ jsx7(
         TextButton,
         {
+          color: "primary",
           onClick: () => {
             const newDate = /* @__PURE__ */ new Date();
             newDate.setHours(value.getHours(), value.getMinutes());
@@ -785,7 +752,7 @@ var DatePicker = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultTimeTranslation = {
   en: {
     clear: "Clear",
@@ -844,7 +811,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    dateDisplay = /* @__PURE__ */ jsx8(
       DatePicker,
       {
         ...datePickerProps,
@@ -858,25 +825,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    timeDisplay = /* @__PURE__ */ jsx8(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx7.default)("h-full", { "justify-between w-full": mode === "time" }),
+        className: clsx7("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-4", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "col w-fit", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "row gap-x-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ jsx8("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs6("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ jsx8(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
+      /* @__PURE__ */ jsx8(
         SolidButton,
         {
           size: "medium",
@@ -887,8 +854,7 @@ var DateTimePicker = ({
     ] }) })
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   DateTimePicker
-});
-//# sourceMappingURL=DateAndTimePicker.cjs.map
+};
+//# sourceMappingURL=DateAndTimePicker.mjs.map