@helpwave/hightide 0.1.46 → 0.1.48

package/dist/components/user-action/DateAndTimePicker.js

@@ -1,1458 +0,0 @@
-// src/components/user-action/DateAndTimePicker.tsx
-import clsx7 from "clsx";
-
-// src/utils/array.ts
-var equalSizeGroups = (array, groupSize) => {
-  if (groupSize <= 0) {
-    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
-    return [[...array]];
-  }
-  const groups = [];
-  for (let i = 0; i < array.length; i += groupSize) {
-    groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
-  }
-  return groups;
-};
-var defaultRangeOptions = {
-  allowEmptyRange: false,
-  stepSize: 1,
-  exclusiveStart: false,
-  exclusiveEnd: true
-};
-var range = (endOrRange, options) => {
-  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
-  let start = 0;
-  let end;
-  if (typeof endOrRange === "number") {
-    end = endOrRange;
-  } else {
-    start = endOrRange[0];
-    end = endOrRange[1];
-  }
-  if (!exclusiveEnd) {
-    end -= 1;
-  }
-  if (exclusiveStart) {
-    start += 1;
-  }
-  if (end - 1 < start) {
-    if (!allowEmptyRange) {
-      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
-    }
-    return [];
-  }
-  return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
-};
-var closestMatch = (list, firstCloser) => {
-  return list.reduce((item1, item2) => {
-    return firstCloser(item1, item2) ? item1 : item2;
-  });
-};
-var moveItems = (list, move = 0) => {
-  const result = [];
-  let start = move;
-  if (start < 0) {
-    start = list.length - move;
-  }
-  start = start % list.length;
-  for (let i = 0; i < list.length; i++) {
-    result[i] = list[(i + start) % list.length];
-  }
-  return result;
-};
-function resolveSingleOrArray(value) {
-  if (Array.isArray(value)) {
-    return value;
-  } else if (value) {
-    return [value];
-  }
-  return [];
-}
-var ArrayUtil = {
-  unique: (list) => {
-    const seen = /* @__PURE__ */ new Set();
-    return list.filter((item) => {
-      if (seen.has(item)) {
-        return false;
-      }
-      seen.add(item);
-      return true;
-    });
-  },
-  difference: (list, removeList) => {
-    const remove = new Set(removeList);
-    return list.filter((item) => !remove.has(item));
-  },
-  moveItems,
-  resolveSingleOrArray
-};
-
-// src/utils/date.ts
-var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
-var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
-var changeDuration = (date, duration, isAdding) => {
-  const {
-    years = 0,
-    months = 0,
-    days = 0,
-    hours = 0,
-    minutes = 0,
-    seconds = 0,
-    milliseconds = 0
-  } = duration;
-  if (years < 0) {
-    console.error(`Range error years must be greater than 0: received ${years}`);
-    return new Date(date);
-  }
-  if (months < 0 || months > 11) {
-    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
-    return new Date(date);
-  }
-  if (days < 0) {
-    console.error(`Range error days must be greater than 0: received ${days}`);
-    return new Date(date);
-  }
-  if (hours < 0 || hours > 23) {
-    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
-    return new Date(date);
-  }
-  if (minutes < 0 || minutes > 59) {
-    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
-    return new Date(date);
-  }
-  if (seconds < 0 || seconds > 59) {
-    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
-    return new Date(date);
-  }
-  if (milliseconds < 0) {
-    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
-    return new Date(date);
-  }
-  const multiplier = isAdding ? 1 : -1;
-  const newDate = new Date(date);
-  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
-  newDate.setMonth(newDate.getMonth() + multiplier * months);
-  newDate.setDate(newDate.getDate() + multiplier * days);
-  newDate.setHours(newDate.getHours() + multiplier * hours);
-  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
-  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
-  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
-  return newDate;
-};
-var addDuration = (date, duration) => {
-  return changeDuration(date, duration, true);
-};
-var subtractDuration = (date, duration) => {
-  return changeDuration(date, duration, false);
-};
-var isInTimeSpan = (value, startDate, endDate) => {
-  if (startDate && endDate) {
-    console.assert(startDate <= endDate);
-    return startDate <= value && value <= endDate;
-  } else if (startDate) {
-    return startDate <= value;
-  } else if (endDate) {
-    return endDate >= value;
-  } else {
-    return true;
-  }
-};
-var equalDate = (date1, date2) => {
-  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
-};
-var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
-  const month = date.getMonth();
-  const year = date.getFullYear();
-  const dayList = [];
-  let currentDate = new Date(year, month, 1);
-  const weekStartIndex = weekDayList.indexOf(weekStart);
-  while (currentDate.getDay() !== weekStartIndex) {
-    currentDate = subtractDuration(currentDate, { days: 1 });
-  }
-  while (dayList.length < 7 * weeks) {
-    const date2 = new Date(currentDate);
-    date2.setHours(date2.getHours(), date2.getMinutes());
-    dayList.push(date2);
-    currentDate = addDuration(currentDate, { days: 1 });
-  }
-  return equalSizeGroups(dayList, 7);
-};
-
-// src/components/user-action/Button.tsx
-import { forwardRef } from "react";
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ButtonColorUtil = {
-  solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
-  text: ["primary", "negative", "neutral"],
-  outline: ["primary"]
-};
-var IconButtonUtil = {
-  icon: [...ButtonColorUtil.solid, "transparent"]
-};
-var paddingMapping = {
-  none: "",
-  small: "btn-sm",
-  medium: "btn-md",
-  large: "btn-lg"
-};
-var iconPaddingMapping = {
-  none: "",
-  tiny: "icon-btn-xs",
-  small: "icon-btn-sm",
-  medium: "icon-btn-md",
-  large: "icon-btn-lg"
-};
-var ButtonUtil = {
-  paddingMapping,
-  iconPaddingMapping
-};
-var SolidButton = forwardRef(function SolidButton2({
-  children,
-  color = "primary",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  className,
-  ...restProps
-}, ref) {
-  const colorClasses = {
-    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
-    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
-    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
-    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
-    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
-    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
-    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
-  }[color];
-  const iconColorClasses = {
-    primary: "not-group-disabled:text-button-solid-primary-icon",
-    secondary: "not-group-disabled:text-button-solid-secondary-icon",
-    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
-    positive: "not-group-disabled:text-button-solid-positive-icon",
-    warning: "not-group-disabled:text-button-solid-warning-icon",
-    negative: "not-group-disabled:text-button-solid-negative-icon",
-    neutral: "not-group-disabled:text-button-solid-neutral-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      onClick,
-      className: clsx(
-        "group font-semibold",
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled disabled:bg-disabled-background",
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-});
-var TextButton = ({
-  children,
-  color = "neutral",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  coloredHoverBackground = true,
-  className,
-  ...restProps
-}) => {
-  const colorClasses = {
-    primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text not-disabled:focus-visible:outline-button-text-primary-text",
-    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text not-disabled:focus-visible:outline-button-text-negative-text",
-    neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text not-disabled:focus-visible:outline-button-text-neutral-text"
-  }[color];
-  const backgroundColor = {
-    primary: "not-disabled:hover:bg-button-text-primary-text/20 not-disabled:focus-visible:bg-button-text-primary-text/20",
-    negative: "not-disabled:hover:bg-button-text-negative-text/20 not-disabled:focus-visible:bg-button-text-negative-text/20",
-    neutral: "not-disabled:hover:bg-button-text-neutral-text/20 not-disabled:focus-visible:bg-button-text-neutral-text/20"
-  }[color];
-  const iconColorClasses = {
-    primary: "not-group-disabled:text-button-text-primary-icon",
-    negative: "not-group-disabled:text-button-text-negative-icon",
-    neutral: "not-group-disabled:text-button-text-neutral-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick,
-      className: clsx(
-        "group font-semibold",
-        "disabled:text-disabled",
-        colorClasses,
-        {
-          [backgroundColor]: coloredHoverBackground,
-          "not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
-        },
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-};
-var IconButton = forwardRef(function IconButton2({
-  children,
-  color = "primary",
-  size = "medium",
-  className,
-  ...restProps
-}, ref) {
-  const colorClasses = {
-    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
-    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
-    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
-    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
-    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
-    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
-    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
-    transparent: "not-disabled:bg-transparent"
-  }[color];
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      className: clsx(
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled",
-        {
-          "disabled:bg-disabled-background": color !== "transparent",
-          "disabled:opacity-70": color === "transparent",
-          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
-        },
-        ButtonUtil.iconPaddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children
-    }
-  );
-});
-
-// src/components/date/TimePicker.tsx
-import { useEffect as useEffect2, useRef } from "react";
-import { Scrollbars } from "react-custom-scrollbars-2";
-import clsx2 from "clsx";
-
-// src/hooks/useOverwritableState.ts
-import { useEffect, useState } from "react";
-
-// src/utils/resolveSetState.ts
-function resolveSetState(action, prev) {
-  return typeof action === "function" ? action(prev) : action;
-}
-
-// src/hooks/useOverwritableState.ts
-var useOverwritableState = (initialValue, onChange) => {
-  const [state, setState] = useState(initialValue);
-  useEffect(() => {
-    setState(initialValue);
-  }, [initialValue]);
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, state);
-    setState(resolved);
-    onChange?.(state);
-  };
-  return [state, onChangeWrapper];
-};
-
-// src/components/date/TimePicker.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var TimePicker = ({
-  time = /* @__PURE__ */ new Date(),
-  onChange,
-  is24HourFormat = true,
-  minuteIncrement = "5min",
-  maxHeight = 300,
-  className = ""
-}) => {
-  const minuteRef = useRef(null);
-  const hourRef = useRef(null);
-  const isPM = time.getHours() >= 11;
-  const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false });
-  let minutes = range(60);
-  useEffect2(() => {
-    const scrollToItem = () => {
-      if (minuteRef.current) {
-        const container = minuteRef.current.parentElement;
-        const hasOverflow = container.scrollHeight > maxHeight;
-        if (hasOverflow) {
-          minuteRef.current.scrollIntoView({
-            behavior: "instant",
-            block: "nearest"
-          });
-        }
-      }
-    };
-    scrollToItem();
-  }, [minuteRef, minuteRef.current]);
-  useEffect2(() => {
-    const scrollToItem = () => {
-      if (hourRef.current) {
-        const container = hourRef.current.parentElement;
-        const hasOverflow = container.scrollHeight > maxHeight;
-        if (hasOverflow) {
-          hourRef.current.scrollIntoView({
-            behavior: "instant",
-            block: "nearest"
-          });
-        }
-      }
-    };
-    scrollToItem();
-  }, [hourRef, hourRef.current]);
-  switch (minuteIncrement) {
-    case "5min":
-      minutes = minutes.filter((value) => value % 5 === 0);
-      break;
-    case "10min":
-      minutes = minutes.filter((value) => value % 10 === 0);
-      break;
-    case "15min":
-      minutes = minutes.filter((value) => value % 15 === 0);
-      break;
-    case "30min":
-      minutes = minutes.filter((value) => value % 30 === 0);
-      break;
-  }
-  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
-  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 }
-  );
-  const onChangeWrapper = (transformer) => {
-    const newDate = new Date(time);
-    transformer(newDate);
-    onChange?.(newDate);
-  };
-  return /* @__PURE__ */ jsxs2("div", { className: clsx2("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
-    /* @__PURE__ */ jsx2(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx2("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
-      const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ jsx2(
-        "button",
-        {
-          ref: currentHour ? hourRef : void 0,
-          className: style(currentHour),
-          onClick: () => onChangeWrapper((newDate) => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0))),
-          children: hour.toString().padStart(2, "0")
-        },
-        hour
-      );
-    }) }) }),
-    /* @__PURE__ */ jsx2(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx2("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
-      const currentMinute = minute === closestMinute;
-      return /* @__PURE__ */ jsx2(
-        "button",
-        {
-          ref: currentMinute ? minuteRef : void 0,
-          className: style(currentMinute),
-          onClick: () => onChangeWrapper((newDate) => newDate.setMinutes(minute)),
-          children: minute.toString().padStart(2, "0")
-        },
-        minute + minuteIncrement
-      );
-    }) }) }),
-    !is24HourFormat && /* @__PURE__ */ jsxs2("div", { className: "flex-col-1", children: [
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          className: style(!isPM),
-          onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
-          children: "AM"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          className: style(isPM),
-          onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
-          children: "PM"
-        }
-      )
-    ] })
-  ] });
-};
-
-// src/components/date/DatePicker.tsx
-import { useEffect as useEffect6, useState as useState5 } from "react";
-import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
-import clsx6 from "clsx";
-
-// src/components/date/DayPicker.tsx
-import clsx3 from "clsx";
-
-// src/i18n/LocaleProvider.tsx
-import { createContext, useContext, useEffect as useEffect3, useMemo, useState as useState3 } from "react";
-
-// src/hooks/useLocalStorage.ts
-import { useCallback, useState as useState2 } from "react";
-
-// src/i18n/translations.ts
-import { TranslationGen } from "@helpwave/internationalization";
-var hightideTranslationLocales = ["de-DE", "en-US"];
-var hightideTranslation = {
-  "de-DE": {
-    "add": `Hinzuf\xFCgen`,
-    "age": `Alter`,
-    "all": `Alle`,
-    "apply": `Anwenden`,
-    "back": `Zur\xFCck`,
-    "cancel": `Abbrechen`,
-    "carousel": `Karussell`,
-    "change": `\xC4ndern`,
-    "chooseLanguage": `W\xE4hle deine bevorzugte Sprache`,
-    "chooseSlide": `W\xE4hle die angezeigte Slide aus`,
-    "chooseTheme": `W\xE4hle dein bevorzugtes Farbschema.`,
-    "clear": `L\xF6schen`,
-    "click": `Klicken`,
-    "clickToCopy": `Zum kopieren klicken`,
-    "clickToSelect": `Zum Ausw\xE4hlen dr\xFCcken`,
-    "close": `Schlie\xDFen`,
-    "confirm": `Best\xE4tigen`,
-    "copied": `Kopiert`,
-    "copy": `Kopieren`,
-    "create": `Erstellen`,
-    "decline": `Ablehnen`,
-    "delete": `L\xF6schen`,
-    "discard": `Verwerfen`,
-    "discardChanges": `\xC4nderungen Verwerfen`,
-    "done": `Fertig`,
-    "edit": `Bearbeiten`,
-    "endDate": `Ende`,
-    "enterText": `Text hier eingeben`,
-    "entryDate": `Eintragsdatum`,
-    "error": `Fehler`,
-    "errorOccurred": `Ein Fehler ist aufgetreten`,
-    "exit": `Beenden`,
-    "fieldRequiredError": `Dieses Feld ist erforderlich.`,
-    "filter": `Filter`,
-    "gender": ({ gender }) => {
-      return TranslationGen.resolveSelect(gender, {
-        "male": `M\xE4nnlich`,
-        "female": `Weiblich`,
-        "other": `Divers`
-      });
-    },
-    "goodToSeeYou": `Sch\xF6n dich zu sehen`,
-    "identifier": `Identifikator`,
-    "invalidEmail": `Die E-Mail ist ung\xFCltig.`,
-    "invalidEmailError": `Bitte geben Sie eine g\xFCltige E-Mail-Adresse ein.`,
-    "language": `Sprache`,
-    "less": `Weniger`,
-    "loading": `L\xE4dt`,
-    "locale": `Locale`,
-    "max": `Max`,
-    "maxLengthError": `Maximale L\xE4nge \xFCberschritten.`,
-    "min": `Min`,
-    "minLengthError": `Mindestl\xE4nge nicht erreicht.`,
-    "more": `Mehr`,
-    "name": `Name`,
-    "next": `Weiter`,
-    "no": `Nein`,
-    "none": `Nichts`,
-    "notEmpty": `Das Feld darf nicht leer sein.`,
-    "nothingFound": `Nichts gefunden`,
-    "of": `von`,
-    "optional": `Optional`,
-    "outOfRangeNumber": ({ min, max }) => {
-      return `Der Wert muss zwischen ${min} und ${max} liegen.`;
-    },
-    "outOfRangeSelectionItems": ({ min, max }) => {
-      return `Es m\xFCssen zwischen ${min} und ${max} Elemente ausgew\xE4hlt werden.`;
-    },
-    "outOfRangeString": ({ min, max }) => {
-      return `Der Wert muss zwischen ${min} und ${max} Zeichen lang sein.`;
-    },
-    "pleaseWait": `Bitte warten...`,
-    "previous": `Vorherige`,
-    "remove": `Entfernen`,
-    "required": `Erforderlich`,
-    "reset": `Zur\xFCcksetzen`,
-    "save": `Speichern`,
-    "saved": `Gespeichert`,
-    "search": `Suche`,
-    "select": `Select`,
-    "selectOption": `Option ausw\xE4hlen`,
-    "show": `Anzeigen`,
-    "showLess": `Weniger anzeigen`,
-    "showMore": `Mehr anzeigen`,
-    "showSlide": ({ index }) => {
-      return `Zeige Slide ${index}`;
-    },
-    "slide": `Slide`,
-    "slideNavigation": `Slide Navigation`,
-    "slideOf": ({ index, length }) => {
-      return `Slide ${index} von ${length} slides`;
-    },
-    "startDate": `Start`,
-    "street": `Stra\xDFe`,
-    "submit": `Abschicken`,
-    "success": `Erfolg`,
-    "text": `Text`,
-    "themeMode": ({ theme }) => {
-      return TranslationGen.resolveSelect(theme, {
-        "dark": `Dunkel`,
-        "light": `Hell`,
-        "system": `System`
-      });
-    },
-    "themes": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Farbschema`,
-        "other": `Farbschemas`
-      });
-    },
-    "time.ago": `vor`,
-    "time.agoDays": ({ days }) => {
-      return `var ${days} Tagen`;
-    },
-    "time.april": `April`,
-    "time.august": `August`,
-    "time.century": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Jahrhundert`,
-        "other": `Jahrhunderte`
-      });
-    },
-    "time.day": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Tag`,
-        "other": `Tage`
-      });
-    },
-    "time.decade": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Jahrzehnt`,
-        "other": `Jahrzehnte`
-      });
-    },
-    "time.december": `December`,
-    "time.february": `Febuar`,
-    "time.hour": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Stunde`,
-        "other": `Stunden`
-      });
-    },
-    "time.in": `in`,
-    "time.inDays": ({ days }) => {
-      return `in ${days} Tagen`;
-    },
-    "time.january": `Januar`,
-    "time.july": `Juli`,
-    "time.june": `Juni`,
-    "time.march": `M\xE4rz`,
-    "time.may": `Mai`,
-    "time.microsecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Mikrosekunde`,
-        "other": `Mikrosekunden`
-      });
-    },
-    "time.millisecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Millisekunde`,
-        "other": `Millisekunden`
-      });
-    },
-    "time.minute": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Minute`,
-        "other": `Minuten`
-      });
-    },
-    "time.month": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Monat`,
-        "other": `Monate`
-      });
-    },
-    "time.monthName": ({ month }) => {
-      return TranslationGen.resolveSelect(month, {
-        "january": `Januar`,
-        "february": `Februar`,
-        "march": `M\xE4rz`,
-        "april": `April`,
-        "may": `Mai`,
-        "june": `Juni`,
-        "july": `Juli`,
-        "august": `August`,
-        "september": `September`,
-        "october": `Oktober`,
-        "november": `November`,
-        "december": `Dezember`,
-        "other": `Unbekannter Monat`
-      });
-    },
-    "time.nanosecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Nanosekunde`,
-        "other": `Nanosekunden`
-      });
-    },
-    "time.november": `November`,
-    "time.october": `October`,
-    "time.second": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Sekunde`,
-        "other": `Sekunden`
-      });
-    },
-    "time.september": `September`,
-    "time.today": `Heute`,
-    "time.tomorrow": `Morgen`,
-    "time.year": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Jahr`,
-        "other": `Jahre`
-      });
-    },
-    "time.yesterday": `Gestern`,
-    "tooFewSelectionItems": ({ min }) => {
-      return `Es m\xFCssen mindestens ${min} Elemente ausgew\xE4hlt werden.`;
-    },
-    "tooLong": ({ max }) => {
-      return `Der Wert darf h\xF6chstens ${max} Zeichen enthalten.`;
-    },
-    "tooManySelectionItems": ({ max }) => {
-      return `Es m\xFCssen maximal ${max} Elemente ausgew\xE4hlt werden.`;
-    },
-    "tooShort": ({ min }) => {
-      return `Der Wert muss mindestens ${min} Zeichen enthalten.`;
-    },
-    "unsavedChanges": `Ungespeicherte \xC4nderungen`,
-    "unsavedChangesSaveQuestion": `M\xF6chtest du die \xC4nderungen speichern?`,
-    "update": `Update`,
-    "value": `Wert`,
-    "welcome": `Willkommen`,
-    "yes": `Ja`
-  },
-  "en-US": {
-    "add": `Add`,
-    "age": `Age`,
-    "all": `All`,
-    "apply": `Apply`,
-    "back": `Back`,
-    "cancel": `Cancel`,
-    "carousel": `Carousel`,
-    "change": `Change`,
-    "chooseLanguage": `Choose your language`,
-    "chooseSlide": `Choose slide to display`,
-    "chooseTheme": `Choose your preferred color theme.`,
-    "clear": `Clear`,
-    "click": `Click`,
-    "clickToCopy": `Click to Copy`,
-    "clickToSelect": `Click to select`,
-    "close": `Close`,
-    "confirm": `Confirm`,
-    "copied": `Copied`,
-    "copy": `Copy`,
-    "create": `Create`,
-    "decline": `Decline`,
-    "delete": `Delete`,
-    "discard": `Discard`,
-    "discardChanges": `Discard Changes`,
-    "done": `Done`,
-    "edit": `Edit`,
-    "endDate": `End`,
-    "enterText": `Enter text here`,
-    "entryDate": `Entry Date`,
-    "error": `Error`,
-    "errorOccurred": `An error occurred`,
-    "exit": `Exit`,
-    "fieldRequiredError": `This field is required.`,
-    "filter": `Filter`,
-    "gender": ({ gender }) => {
-      return TranslationGen.resolveSelect(gender, {
-        "male": `Male`,
-        "female": `Female`,
-        "other": `Other`
-      });
-    },
-    "goodToSeeYou": `Good to see you`,
-    "identifier": `Identifier`,
-    "invalidEmail": `The email is not valid.`,
-    "invalidEmailError": `Please enter a valid email address.`,
-    "language": `Language`,
-    "less": `Less`,
-    "loading": `Loading`,
-    "locale": `Locale`,
-    "max": `Max`,
-    "maxLengthError": `Maximum length exceeded.`,
-    "min": `Min`,
-    "minLengthError": `Minimum length not met.`,
-    "more": `More`,
-    "name": `Name`,
-    "next": `Next`,
-    "no": `No`,
-    "none": `None`,
-    "notEmpty": `The field cannot be empty.`,
-    "nothingFound": `Nothing found`,
-    "of": `of`,
-    "optional": `Optional`,
-    "outOfRangeNumber": ({ min, max }) => {
-      return `The value must be between ${min} and ${max}.`;
-    },
-    "outOfRangeSelectionItems": ({ min, max }) => {
-      return `Between ${min} and ${max} items must be selected.`;
-    },
-    "outOfRangeString": ({ min, max }) => {
-      return `The value needs to have between ${min} and ${max} characters.`;
-    },
-    "pleaseWait": `Please wait...`,
-    "previous": `Previous`,
-    "remove": `Remove`,
-    "required": `Required`,
-    "reset": `Reset`,
-    "save": `Save`,
-    "saved": `Saved`,
-    "search": `Search`,
-    "select": `Select`,
-    "selectOption": `Select an option`,
-    "show": `Show`,
-    "showLess": `Show less`,
-    "showMore": `Show more`,
-    "showSlide": ({ index }) => {
-      return `Show Slide ${index}`;
-    },
-    "slide": `Slide`,
-    "slideNavigation": `Slide navigation`,
-    "slideOf": ({ index, length }) => {
-      return `Slide ${index} of ${length} slides`;
-    },
-    "startDate": `Start`,
-    "street": `Street`,
-    "submit": `Submit`,
-    "success": `Success`,
-    "text": `Text`,
-    "themeMode": ({ theme }) => {
-      return TranslationGen.resolveSelect(theme, {
-        "dark": `Dark`,
-        "light": `Light`,
-        "system": `System`
-      });
-    },
-    "themes": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Theme`,
-        "other": `Themes`
-      });
-    },
-    "time.ago": `ago`,
-    "time.agoDays": ({ days }) => {
-      return `days ${days} ago`;
-    },
-    "time.april": `April`,
-    "time.august": `August`,
-    "time.century": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Century`,
-        "other": `Centuries`
-      });
-    },
-    "time.day": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Day`,
-        "other": `Days`
-      });
-    },
-    "time.decade": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Decade`,
-        "other": `Decades`
-      });
-    },
-    "time.december": `December`,
-    "time.february": `Febuary`,
-    "time.hour": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Hour`,
-        "other": `Hours`
-      });
-    },
-    "time.in": `in`,
-    "time.inDays": ({ days }) => {
-      return `in ${days} days`;
-    },
-    "time.january": `January`,
-    "time.july": `July`,
-    "time.june": `June`,
-    "time.march": `March`,
-    "time.may": `May`,
-    "time.microsecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Microsecond`,
-        "other": `Microseconds`
-      });
-    },
-    "time.millisecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Millisecond`,
-        "other": `Milliseconds`
-      });
-    },
-    "time.minute": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Minute`,
-        "other": `Minutes`
-      });
-    },
-    "time.month": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Month`,
-        "other": `Months`
-      });
-    },
-    "time.monthName": ({ month }) => {
-      return TranslationGen.resolveSelect(month, {
-        "january": `January`,
-        "february": `February`,
-        "march": `March`,
-        "april": `April`,
-        "may": `May`,
-        "june": `June`,
-        "july": `July`,
-        "august": `August`,
-        "september": `September`,
-        "october": `October`,
-        "november": `November`,
-        "december": `December`,
-        "other": `Unknown Month`
-      });
-    },
-    "time.nanosecond": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Nanosecond`,
-        "other": `Nanoseconds`
-      });
-    },
-    "time.november": `November`,
-    "time.october": `October`,
-    "time.second": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Second`,
-        "other": `Seconds`
-      });
-    },
-    "time.september": `September`,
-    "time.today": `Today`,
-    "time.tomorrow": `Tomorrow`,
-    "time.year": ({ count }) => {
-      return TranslationGen.resolveSelect(count, {
-        "=1": `Year`,
-        "other": `Years`
-      });
-    },
-    "time.yesterday": `Yesterday`,
-    "tooFewSelectionItems": ({ min }) => {
-      return `Select at least ${min} items.`;
-    },
-    "tooLong": ({ max }) => {
-      return `The value requires less than ${max} characters.`;
-    },
-    "tooManySelectionItems": ({ max }) => {
-      return `Select at most ${max} items.`;
-    },
-    "tooShort": ({ min }) => {
-      return `The value requires at least ${min} characters.`;
-    },
-    "unsavedChanges": `Unsaved Changes`,
-    "unsavedChangesSaveQuestion": `Do you want to save your changes?`,
-    "update": `Update`,
-    "value": `Value`,
-    "welcome": `Welcome`,
-    "yes": `Yes`
-  }
-};
-
-// src/i18n/util.ts
-var localsNames = {
-  "en-US": "English (US)",
-  "de-DE": "Deutsch"
-};
-var DEFAULT_LOCALE = "en-US";
-function localeToLanguage(locale) {
-  return locale.split("-")[0];
-}
-var LocalizationUtil = {
-  locals: hightideTranslationLocales,
-  localToLanguage: localeToLanguage,
-  DEFAULT_LOCALE,
-  languagesLocalNames: localsNames
-};
-
-// src/i18n/LocaleProvider.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var LocaleContext = createContext({
-  locale: LocalizationUtil.DEFAULT_LOCALE,
-  setLocale: (v) => v
-});
-var useLocale = () => {
-  const context = useContext(LocaleContext);
-  if (!context) {
-    throw new Error("useLocale must be used within LocaleContext. Try adding a LocaleProvider around your app.");
-  }
-  return context;
-};
-
-// src/components/date/DayPicker.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var DayPicker = ({
-  displayedMonth,
-  selected,
-  start,
-  end,
-  onChange,
-  weekStart = "monday",
-  markToday = true,
-  className = ""
-}) => {
-  const { locale } = useLocale();
-  const month = displayedMonth.getMonth();
-  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ jsxs3("div", { className: clsx3("flex-col-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ jsx4("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx4("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ jsx4("div", { className: "flex-row-2 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__ */ jsx4(
-        "button",
-        {
-          disabled: !isDayValid,
-          className: clsx3(
-            "flex-1 rounded-full border-2",
-            {
-              "text-description": !isSameMonth && !isSelected && isDayValid,
-              "text-button-solid-neutral-text bg-button-solid-neutral-background": !isSelected && isSameMonth && isDayValid,
-              "text-button-solid-primary-text bg-button-solid-primary-background": isSelected && isDayValid,
-              "hover:brightness-90 hover:bg-button-solid-primary-background hover:text-button-solid-primary-text": isDayValid,
-              "text-disabled bg-disabled-background cursor-not-allowed": !isDayValid,
-              "border-secondary": isToday && markToday,
-              "border-transparent": !isToday || !markToday
-            }
-          ),
-          onClick: () => onChange?.(date),
-          children: date.getDate()
-        },
-        date.getDate()
-      );
-    }) }, index))
-  ] });
-};
-
-// src/components/date/YearMonthPicker.tsx
-import { useEffect as useEffect5, useRef as useRef2 } from "react";
-import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
-import clsx5 from "clsx";
-
-// src/components/layout/Expandable.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback2, useId } from "react";
-import { ChevronDown } from "lucide-react";
-import clsx4 from "clsx";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var ExpansionIcon = ({ isExpanded, className }) => {
-  return /* @__PURE__ */ jsx5(
-    ChevronDown,
-    {
-      "aria-hidden": true,
-      className: clsx4(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
-        { "rotate-180": isExpanded },
-        className
-      )
-    }
-  );
-};
-var Expandable = forwardRef2(function Expandable2({
-  children,
-  id: providedId,
-  label,
-  icon,
-  isExpanded = false,
-  onChange,
-  clickOnlyOnHeader = true,
-  disabled = false,
-  className,
-  headerClassName,
-  contentClassName,
-  contentExpandedClassName
-}, ref) {
-  const defaultIcon = useCallback2((expanded) => /* @__PURE__ */ jsx5(ExpansionIcon, { isExpanded: expanded }), []);
-  icon ??= defaultIcon;
-  const generatedId = useId();
-  const id = providedId ?? generatedId;
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      ref,
-      onClick: () => !clickOnlyOnHeader && !disabled && onChange?.(!isExpanded),
-      className: clsx4(
-        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
-        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs4(
-          "button",
-          {
-            onClick: () => clickOnlyOnHeader && !disabled && onChange?.(!isExpanded),
-            className: clsx4(
-              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
-              {
-                "group-hover:brightness-97": !isExpanded,
-                "hover:brightness-97": isExpanded && !disabled,
-                "cursor-pointer": clickOnlyOnHeader && !disabled
-              },
-              headerClassName
-            ),
-            "aria-expanded": isExpanded,
-            "aria-controls": `${id}-content`,
-            "aria-disabled": disabled ?? void 0,
-            children: [
-              label,
-              icon(isExpanded)
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            id: `${id}-content`,
-            className: clsx4(
-              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
-              {
-                [clsx4("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
-                "max-h-0 opacity-0 overflow-hidden": !isExpanded
-              },
-              contentClassName
-            ),
-            role: "region",
-            children
-          }
-        )
-      ]
-    }
-  );
-});
-var ExpandableUncontrolled = forwardRef2(function ExpandableUncontrolled2({
-  isExpanded,
-  onChange,
-  ...props
-}, ref) {
-  const [usedIsExpanded, setUsedIsExpanded] = useOverwritableState(isExpanded, onChange);
-  return /* @__PURE__ */ jsx5(
-    Expandable,
-    {
-      ...props,
-      ref,
-      isExpanded: usedIsExpanded,
-      onChange: setUsedIsExpanded
-    }
-  );
-});
-
-// src/components/date/YearMonthPicker.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var YearMonthPicker = ({
-  displayedYearMonth = /* @__PURE__ */ new Date(),
-  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  onChange,
-  className = "",
-  maxHeight = 300,
-  showValueOpen = true
-}) => {
-  const { locale } = useLocale();
-  const ref = useRef2(null);
-  useEffect5(() => {
-    const scrollToItem = () => {
-      if (ref.current) {
-        ref.current.scrollIntoView({
-          behavior: "instant",
-          block: "center"
-        });
-      }
-    };
-    scrollToItem();
-  }, [ref]);
-  if (end < start) {
-    console.error(`startYear: (${start}) less than endYear: (${end})`);
-    return null;
-  }
-  const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ jsx6("div", { className: clsx5("flex-col-0 select-none", className), children: /* @__PURE__ */ jsx6(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx6("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
-    const selectedYear = displayedYearMonth.getFullYear() === year;
-    return /* @__PURE__ */ jsx6(
-      ExpandableUncontrolled,
-      {
-        ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
-        label: /* @__PURE__ */ jsx6("span", { className: clsx5({ "text-primary font-bold": selectedYear }), children: year }),
-        isExpanded: showValueOpen && selectedYear,
-        contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx6("div", { className: "flex-row-1", children: monthList.map((month) => {
-          const monthIndex = monthsList.indexOf(month);
-          const newDate = new Date(year, monthIndex);
-          const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
-          const firstOfMonth = new Date(year, monthIndex, 1);
-          const lastOfMonth = new Date(year, monthIndex, 1);
-          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__ */ jsx6(
-            SolidButton,
-            {
-              disabled: !isValid,
-              color: selectedMonth && isValid ? "primary" : "neutral",
-              className: "flex-1",
-              size: "small",
-              onClick: () => {
-                onChange?.(newDate);
-              },
-              children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
-            },
-            month
-          );
-        }) }, index))
-      },
-      year
-    );
-  }) }) }) });
-};
-
-// src/i18n/useHightideTranslation.ts
-import { combineTranslation, ICUUtil } from "@helpwave/internationalization";
-function useHightideTranslation(extensions, overwrites) {
-  const { locale: inferredLocale } = useLocale();
-  const locale = overwrites?.locale ?? inferredLocale;
-  const translationExtensions = ArrayUtil.resolveSingleOrArray(extensions);
-  return combineTranslation([
-    ...translationExtensions,
-    hightideTranslation
-  ], locale);
-}
-
-// src/components/date/DatePicker.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var DatePicker = ({
-  value = /* @__PURE__ */ new Date(),
-  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  initialDisplay = "day",
-  onChange,
-  yearMonthPickerProps,
-  dayPickerProps,
-  className = ""
-}) => {
-  const { locale } = useLocale();
-  const translation = useHightideTranslation();
-  const [displayedMonth, setDisplayedMonth] = useState5(value);
-  const [displayMode, setDisplayMode] = useState5(initialDisplay);
-  useEffect6(() => {
-    setDisplayedMonth(value);
-  }, [value]);
-  return /* @__PURE__ */ jsxs5("div", { className: clsx6("flex-col-4", className), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex-row-2 items-center justify-between h-7", children: [
-      /* @__PURE__ */ jsxs5(
-        TextButton,
-        {
-          className: clsx6("flex-row-1 items-center cursor-pointer select-none", {
-            "text-disabled": displayMode !== "day"
-          }),
-          onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
-          children: [
-            `${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ jsx7(ChevronDown2, { size: 16 })
-          ]
-        }
-      ),
-      displayMode === "day" && /* @__PURE__ */ jsxs5("div", { className: "flex-row-2 justify-end", children: [
-        /* @__PURE__ */ jsx7(
-          SolidButton,
-          {
-            size: "small",
-            color: "primary",
-            disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
-            onClick: () => {
-              setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
-            },
-            children: /* @__PURE__ */ jsx7(ArrowUp, { size: 20 })
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          SolidButton,
-          {
-            size: "small",
-            color: "primary",
-            disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
-            onClick: () => {
-              setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
-            },
-            children: /* @__PURE__ */ jsx7(ArrowDown, { size: 20 })
-          }
-        )
-      ] })
-    ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ jsx7(
-      YearMonthPicker,
-      {
-        ...yearMonthPickerProps,
-        displayedYearMonth: value,
-        start,
-        end,
-        onChange: (newDate) => {
-          setDisplayedMonth(newDate);
-          setDisplayMode("day");
-        }
-      }
-    ) : /* @__PURE__ */ jsxs5("div", { children: [
-      /* @__PURE__ */ jsx7(
-        DayPicker,
-        {
-          ...dayPickerProps,
-          displayedMonth,
-          start,
-          end,
-          selected: value,
-          onChange: (date) => {
-            onChange?.(date);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx7("div", { className: "mt-2", children: /* @__PURE__ */ jsx7(
-        TextButton,
-        {
-          color: "primary",
-          onClick: () => {
-            const newDate = /* @__PURE__ */ new Date();
-            newDate.setHours(value.getHours(), value.getMinutes());
-            onChange(newDate);
-          },
-          children: translation("time.today")
-        }
-      ) })
-    ] })
-  ] });
-};
-
-// src/components/user-action/DateAndTimePicker.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var DateTimePicker = ({
-  value = /* @__PURE__ */ new Date(),
-  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  mode = "dateTime",
-  onFinish,
-  onChange,
-  onRemove,
-  timePickerProps,
-  datePickerProps
-}) => {
-  const translation = useHightideTranslation();
-  const useDate = mode === "dateTime" || mode === "date";
-  const useTime = mode === "dateTime" || mode === "time";
-  let dateDisplay;
-  let timeDisplay;
-  if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx8(
-      DatePicker,
-      {
-        ...datePickerProps,
-        className: "min-w-[320px] min-h-[250px]",
-        yearMonthPickerProps: { maxHeight: 218 },
-        value,
-        start,
-        end,
-        onChange
-      }
-    );
-  }
-  if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx8(
-      TimePicker,
-      {
-        ...timePickerProps,
-        className: clsx7("h-full", { "justify-between w-full": mode === "time" }),
-        maxHeight: 250,
-        time: value,
-        onChange
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs6("div", { className: "flex-col-2 w-fit", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex-row-4", children: [
-      dateDisplay,
-      timeDisplay
-    ] }),
-    /* @__PURE__ */ jsx8("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ jsx8(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx8(
-        SolidButton,
-        {
-          size: "medium",
-          onClick: () => onFinish?.(value),
-          children: translation("change")
-        }
-      )
-    ] }) })
-  ] });
-};
-export {
-  DateTimePicker
-};
-//# sourceMappingURL=DateAndTimePicker.js.map