asma-ui-core 3.18.0 → 3.20.0

package/dist/datetime/components/date-picker/components/StyledCalendarPicker.module.js

@@ -0,0 +1,34 @@
+var _ = "_months_4o44h_5", a = "_month_4o44h_5", o = "_caption_4o44h_18", e = "_caption_label_4o44h_22", d = "_nav_4o44h_31", r = "_nav_button_4o44h_35", n = "_nav_button_previous_4o44h_41", t = "_nav_button_next_4o44h_45", h = "_head_row_4o44h_49", v = "_head_cell_4o44h_64", l = "_row_4o44h_73", i = "_cell_4o44h_85", c = "_has_4o44h_88", s = "_first_4o44h_91", y = "_last_4o44h_94", u = "_day_4o44h_98", b = "_day_today_4o44h_109", p = "_day_selected_4o44h_115", m = "_day_outside_4o44h_130", f = "_day_range_middle_4o44h_133", w = "_day_disabled_4o44h_141", k = "_day_hidden_4o44h_145", g = "_weeknumber_4o44h_149", x = "_caption_end_4o44h_153", C = {
+  "styled-calendar-day-picker": "_styled-calendar-day-picker_4o44h_1",
+  months: _,
+  month: a,
+  caption: o,
+  caption_label: e,
+  "custom-caption": "_custom-caption_4o44h_27",
+  nav: d,
+  nav_button: r,
+  nav_button_previous: n,
+  nav_button_next: t,
+  head_row: h,
+  "locale-nb": "_locale-nb_4o44h_60",
+  head_cell: v,
+  row: l,
+  cell: i,
+  has: c,
+  first: s,
+  last: y,
+  day: u,
+  "focus-visible": "_focus-visible_4o44h_104",
+  day_today: b,
+  day_selected: p,
+  "rdp-day_range_end": "_rdp-day_range_end_4o44h_118",
+  day_outside: m,
+  day_range_middle: f,
+  day_disabled: w,
+  day_hidden: k,
+  weeknumber: g,
+  caption_end: x
+};
+export {
+  C as default
+};

package/dist/datetime/components/date-picker/components/StyledCalendarPickerCaption.js

@@ -0,0 +1,30 @@
+import { StyledButton as i } from "../../../shared-components/button/StyledButton.js";
+import { CloseIcon as l } from "../../../shared-components/CloseIcon.js";
+import s from "./StyledCalendarPicker.module.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+function x(o) {
+  const { onClose: n, children: a, calendarMonth: c, displayIndex: m, ...t } = o;
+  return /* @__PURE__ */ d("div", {
+    ...t,
+    className: s["custom-caption"],
+    style: {
+      ...t.style,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginLeft: "10px"
+    },
+    children: [a, /* @__PURE__ */ e(i, {
+      dataTest: "close-button",
+      variant: "textGray",
+      onClick: (r) => n?.(r, "backdropClick"),
+      startIcon: /* @__PURE__ */ e(l, {
+        height: 20,
+        width: 20
+      })
+    })]
+  });
+}
+export {
+  x as CustomCaption
+};

package/dist/datetime/components/date-picker/components/StyledCalendarPickerFooter.js

@@ -0,0 +1,88 @@
+import { ChevronLeftIcon as c } from "../../../shared-components/ChevronLeftIcon.js";
+import { ChevronRightIcon as f } from "../../../shared-components/ChevronRightIcon.js";
+import { StyledButton as a } from "../../../shared-components/button/StyledButton.js";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { useNavigation as v } from "react-day-picker";
+import { isDate as y, isValid as x } from "date-fns";
+import { compact as u, isArray as g, isObject as C } from "lodash-es";
+var W = ({ onClose: m, isNb: l, selected: i, removeSelection: h, setMonth: e, onClear: d, required: p }) => {
+  const { nextMonth: n, previousMonth: r } = v();
+  return /* @__PURE__ */ s("div", {
+    style: {
+      marginTop: "8px",
+      display: "flex",
+      justifyContent: "space-between"
+    },
+    children: [
+      /* @__PURE__ */ t(a, {
+        dataTest: "",
+        variant: "text",
+        onClick: (o) => {
+          d ? d() : h(o), e(new Date(Date.now()));
+        },
+        size: "small",
+        disabled: !!p || i === null || g(i) && i.length === 0 || y(i) && !x(i) || C(i) && !u(Object.values(i)).length,
+        style: { minWidth: "60px" },
+        children: l ? "Nullstill" : "Clear"
+      }),
+      /* @__PURE__ */ s("div", {
+        style: {
+          display: "flex",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ t(a, {
+            dataTest: "",
+            variant: "outlined",
+            size: "small",
+            disabled: !r,
+            onClick: () => {
+              r && e(r);
+            },
+            style: { minWidth: "25px" },
+            children: /* @__PURE__ */ t(c, {
+              width: 20,
+              height: 20
+            })
+          }),
+          /* @__PURE__ */ t(a, {
+            dataTest: "",
+            size: "small",
+            onClick: () => {
+              e(new Date(Date.now()));
+            },
+            variant: "outlined",
+            children: l ? "I dag" : "Today"
+          }),
+          /* @__PURE__ */ t(a, {
+            dataTest: "",
+            variant: "outlined",
+            size: "small",
+            disabled: !n,
+            onClick: () => {
+              n && e(n);
+            },
+            style: { minWidth: "25px" },
+            children: /* @__PURE__ */ t(f, {
+              width: 20,
+              height: 20
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ t(a, {
+        dataTest: "",
+        variant: "contained",
+        size: "small",
+        onClick: (o) => {
+          m?.(o, "backdropClick");
+        },
+        style: { minWidth: "60px" },
+        children: l ? "Velg" : "Select"
+      })
+    ]
+  });
+};
+export {
+  W as StyledCalendarPickerFooter
+};

package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectMonth.js

@@ -0,0 +1,42 @@
+import { StyledFormControl as c } from "../../../shared-components/StyledFormControl.js";
+import { StyledSelect as b } from "../../../shared-components/StyledSelect.js";
+import { StyledSelectItem as f } from "../../../shared-components/StyledSelectItem.js";
+import u from "./StyledCalendarPickerSelectPeriod.module.js";
+import { jsx as r } from "react/jsx-runtime";
+import { capitalize as S } from "lodash-es";
+function x(a) {
+  const { options: o = [], onChange: l, value: t, disabled: d, className: n, style: i, name: m } = a, s = a["aria-label"];
+  return /* @__PURE__ */ r(c, {
+    style: {
+      marginLeft: "-2px",
+      marginRight: "8px"
+    },
+    children: /* @__PURE__ */ r(b, {
+      dataTest: "StyledCalendarPickerSelectMonth",
+      size: "small",
+      variant: "standard",
+      name: m,
+      "aria-label": s,
+      disabled: d,
+      className: n,
+      style: i,
+      value: t ?? "",
+      onChange: (e) => l?.(e),
+      MenuProps: { className: u["styled-calendar-picker-select-period-menu"] },
+      sx: {
+        "&::before": { borderBottom: "none" },
+        "&:hover::before": { borderBottom: "none" },
+        "&:hover:not(.Mui-disabled, .Mui-error)::before": { borderBottom: "none" },
+        "&:focus::before": { borderBottom: "none" }
+      },
+      children: o.map((e) => /* @__PURE__ */ r(f, {
+        value: e.value,
+        disabled: e.disabled,
+        children: S(e.label)
+      }, e.value))
+    })
+  });
+}
+export {
+  x as StyledCalendarPickerSelectMonth
+};

package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectPeriod.module.js

@@ -0,0 +1,4 @@
+var e = { "styled-calendar-picker-select-period-menu": "_styled-calendar-picker-select-period-menu_gznro_1" };
+export {
+  e as default
+};

package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectYear.js

@@ -0,0 +1,35 @@
+import { StyledFormControl as o } from "../../../shared-components/StyledFormControl.js";
+import { StyledSelect as u } from "../../../shared-components/StyledSelect.js";
+import { StyledSelectItem as S } from "../../../shared-components/StyledSelectItem.js";
+import y from "./StyledCalendarPickerSelectPeriod.module.js";
+import { jsx as a } from "react/jsx-runtime";
+function C(l) {
+  const { options: r = [], onChange: t, value: d, disabled: i, className: n, style: m, name: c } = l, s = l["aria-label"];
+  return /* @__PURE__ */ a(o, {
+    style: {
+      width: "70px",
+      marginLeft: "5px"
+    },
+    children: /* @__PURE__ */ a(u, {
+      dataTest: "StyledCalendarPickerSelectYear",
+      size: "small",
+      variant: "standard",
+      name: c,
+      "aria-label": s,
+      disabled: i,
+      className: n,
+      style: m,
+      value: d ?? "",
+      onChange: (e) => t?.(e),
+      MenuProps: { className: y["styled-calendar-picker-select-period-menu"] },
+      children: r.map((e) => /* @__PURE__ */ a(S, {
+        value: e.value,
+        disabled: e.disabled,
+        children: e.label
+      }, e.value))
+    })
+  });
+}
+export {
+  C as StyledCalendarPickerSelectYear
+};

package/dist/datetime/components/date-picker/components/StyledDayPicker.js

@@ -0,0 +1,93 @@
+import { StyledCalendarPickerFooter as p } from "./StyledCalendarPickerFooter.js";
+import e from "./StyledCalendarPicker.module.js";
+import { CustomCaption as O } from "./StyledCalendarPickerCaption.js";
+import { StyledCalendarPickerSelectMonth as Y } from "./StyledCalendarPickerSelectMonth.js";
+import { StyledCalendarPickerSelectYear as F } from "./StyledCalendarPickerSelectYear.js";
+import { buildDisabled as x } from "../helpers.js";
+import { useState as N } from "react";
+import "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
+import { DayPicker as q } from "react-day-picker";
+import { endOfMonth as R, startOfToday as T } from "date-fns";
+import { enGB as W } from "date-fns/locale";
+var U = ({ datePickerProps: t, popoverProps: y }) => {
+  const { showOutsideDays: h = !0, locale: i = W, numberOfMonths: f, disabledDays: w, onClear: b, title: $, ...D } = t, { onClose: m } = y, [c, u] = N((t.mode === "range" ? t.selected?.from : t.selected) ?? /* @__PURE__ */ new Date()), _ = i.code === "nb", S = (f ?? 1) < 2, g = x(w, "disallowPast" in t ? t.disallowPast : void 0, "disallowFuture" in t ? t.disallowFuture : void 0, T()), v = (n) => {
+    if (!t.selected || !t.onSelect) return;
+    const o = /* @__PURE__ */ new Date(), a = {};
+    if (t.mode === "range") {
+      const d = t.onSelect;
+      d(void 0, o, a, n);
+      return;
+    }
+    const l = t.onSelect;
+    l(void 0, o, a, n);
+  };
+  return /* @__PURE__ */ r(q, {
+    ...D,
+    disabled: g,
+    month: c,
+    onMonthChange: (n) => {
+      if (u(n), !!t.onSelect && (!t.mode || t.mode === "single")) {
+        const o = t.selected;
+        if (o instanceof Date) {
+          const a = n.getFullYear(), l = n.getMonth(), d = o.getDate(), M = R(new Date(a, l, 1)).getDate(), C = Math.min(d, M), s = new Date(o);
+          s.setFullYear(a, l, C), t.onSelect(s, s, {}, {});
+        }
+      }
+    },
+    captionLayout: "dropdown",
+    weekStartsOn: 1,
+    locale: i,
+    startMonth: new Date(t.fromYear ?? 1900, 0),
+    endMonth: new Date(t.toYear ?? 2100, 11),
+    "data-test": "calendar-picker",
+    showWeekNumber: !0,
+    showOutsideDays: h,
+    fixedWeeks: !0,
+    className: `${e["styled-calendar-day-picker"]} ${_ ? e["locale-nb"] : ""}`,
+    classNames: {
+      months: e.months,
+      weeknumber: e.weeknumber,
+      month: e.month,
+      caption: e.caption,
+      caption_label: e.caption_label,
+      nav: e.nav,
+      nav_button: e.nav_button,
+      nav_button_previous: e.nav_button_previous,
+      nav_button_next: e.nav_button_next,
+      head_row: e.head_row,
+      head_cell: e.head_cell,
+      row: e.row,
+      cell: e.cell,
+      day: e.day,
+      day_today: e.day_today,
+      day_selected: e.day_selected,
+      day_outside: e.day_outside,
+      day_disabled: e.day_disabled,
+      day_range_middle: e.day_range_middle,
+      day_hidden: e.day_hidden,
+      caption_end: S ? "" : e.caption_end
+    },
+    components: {
+      MonthCaption: (n) => /* @__PURE__ */ r(O, {
+        ...n,
+        onClose: m
+      }),
+      MonthsDropdown: Y,
+      YearsDropdown: F
+    },
+    footer: /* @__PURE__ */ r(p, {
+      onClose: m,
+      isNb: _,
+      selected: t.selected,
+      removeSelection: v,
+      required: t?.required,
+      setMonth: u,
+      month: c,
+      onClear: b
+    })
+  });
+};
+export {
+  U as StyledDayPicker
+};

package/dist/datetime/components/date-picker/helpers.js

@@ -0,0 +1,31 @@
+import { format as p, startOfToday as c } from "date-fns";
+var w = (e, r = "dd/MM/yyyy") => e ? p(e, "dd/MM/yyyy") : "", D = (e, r) => {
+  const n = window.innerHeight, t = e.currentTarget.getBoundingClientRect(), o = t.top, i = n - t.bottom;
+  i < 300 && o > i ? r(!0) : r(!1);
+}, f = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), g = (e, r) => e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth() && e.getDate() === r.getDate(), F = ({ parsedDate: e, disabledDays: r }) => {
+  if (!e || !r) return !1;
+  const n = f(e);
+  return (Array.isArray(r) ? r : [r]).some((t) => {
+    if (!t) return !1;
+    if (typeof t == "function") return !!t(n);
+    if (t instanceof Date) return g(n, f(t));
+    if (Array.isArray(t)) return t.some((l) => g(n, f(l)));
+    if (typeof t != "object" || t === null) return !1;
+    const { before: o, after: i, from: s, to: a, dayOfWeek: u } = t;
+    if (u !== void 0 && (Array.isArray(u) ? u : [u]).includes(n.getDay()) || o && n < f(o) || i && n > f(i)) return !0;
+    if (s || a) {
+      const l = s ? f(s) : n, y = a ? f(a) : n;
+      if (n >= l && n <= y) return !0;
+    }
+    return !1;
+  });
+}, B = (e, r, n, t = c()) => {
+  const o = [];
+  return e && (Array.isArray(e) ? o.push(...e) : o.push(e)), r && o.push({ before: t }), n && o.push({ after: t }), o;
+};
+export {
+  B as buildDisabled,
+  w as getValue,
+  F as isDisabledDate,
+  D as setPickerPosition
+};

package/dist/datetime/components/date-picker/hooks/useDatePickerMask.js

@@ -0,0 +1,9 @@
+import { useMask as e } from "@react-input/mask";
+var a = () => ({ maskRef: e({
+  mask: "  /  /    ",
+  replacement: { " ": /\d/ },
+  showMask: !0
+}) });
+export {
+  a as useDatePickerMask
+};

package/dist/datetime/components/date-picker/hooks/useDatePickerValidation.js

@@ -0,0 +1,69 @@
+import { buildDisabled as k, isDisabledDate as N } from "../helpers.js";
+import { useCallback as g, useState as y } from "react";
+import { isValid as U, parse as x, startOfDay as b } from "date-fns";
+var r = {
+  en: {
+    required: "Required",
+    minDate: "End date must be after the start date",
+    invalidDay: "Invalid day",
+    invalidMonth: "Invalid month",
+    invalidYear: "Invalid year. Year must be between 1900-2100",
+    invalidDate: "Invalid date",
+    invalidFormat: "Invalid date. Use format DD.MM.YYYY",
+    dateDisabled: "Date is disabled",
+    pastNotAllowed: "Past date is not allowed",
+    futureNotAllowed: "Future date is not allowed"
+  },
+  nb: {
+    required: "Påkrevd",
+    minDate: "Sluttdato må være etter startdato",
+    invalidDay: "Ugyldig dag",
+    invalidMonth: "Ugyldig måned",
+    invalidYear: "Ugyldig år. År må være mellom 1900 og 2100",
+    invalidDate: "Ugyldig dato",
+    invalidFormat: "Ugyldig dato. Bruk formatet DD.MM.ÅÅÅÅ",
+    dateDisabled: "Dato er ugyldig",
+    pastNotAllowed: "Dato i fortiden er ikke tillatt",
+    futureNotAllowed: "Dato i fremtiden er ikke tillatt"
+  }
+}, F = /^(\d{2})\/(\d{2})\/(\d{4})$/, V = () => {
+  const [c, e] = y(!1), [p, t] = y(""), o = g(() => {
+    e(!1), t("");
+  }, []);
+  return {
+    validationError: c,
+    handleValidation: g(({ value: m, disabledDays: M, localeCode: h, disallowPast: w, disallowFuture: Y, required: s, minDate: v }) => {
+      const a = h === "nb" ? "nb" : "en";
+      if (!m.replace(/\D/g, "").length)
+        return e(!!s), t(s ? r[a].required : ""), !!s;
+      const i = F.exec(m);
+      if (!i)
+        return e(!0), t(r[a].invalidFormat), !0;
+      const d = Number(i[1]), l = Number(i[2]), n = Number(i[3]);
+      if (d < 1 || d > 31)
+        return e(!0), t(r[a].invalidDay), !0;
+      if (l < 1 || l > 12)
+        return e(!0), t(r[a].invalidMonth), !0;
+      if (n < 1900 || n > 2100)
+        return e(!0), t(r[a].invalidYear), !0;
+      const u = new Date(n, l - 1, d);
+      if (!(u.getFullYear() === n && u.getMonth() === l - 1 && u.getDate() === d))
+        return e(!0), t(r[a].invalidDate), !0;
+      const D = x(`${i[1]}/${i[2]}/${i[3]}`, "dd/MM/yyyy", /* @__PURE__ */ new Date());
+      if (!U(D))
+        return e(!0), t(r[a].invalidDate), !0;
+      if (v && b(D) <= b(v))
+        return e(!0), t(r[a].minDate), !0;
+      const f = k(M, w, Y);
+      return f.length && N({
+        parsedDate: D,
+        disabledDays: f
+      }) ? (t(r[a].dateDisabled), e(!0), !0) : (o(), !1);
+    }, [o]),
+    errHelperText: p,
+    clearValidation: o
+  };
+};
+export {
+  V as useDatePickerValidation
+};

package/dist/datetime/components/time-picker/StyledTimePicker.js

@@ -0,0 +1,71 @@
+import { TimePickerPopper as j } from "./TimePickerPopper.js";
+import { getTimeFromValue as H } from "./helpers/getTimeFromValue.js";
+import { TimePickerInput as T } from "./TimePickerInput.js";
+import { useState as h } from "react";
+import { ClickAwayListener as D } from "@mui/material";
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { format as v, isBefore as A, isValid as B } from "date-fns";
+import N from "material-ui-popup-state";
+var J = (i) => {
+  const { value: a, onSelect: l, notBeforeTime: m } = i, V = a ? v(a, "HH:mm") : "", [x, s] = h(V), [w, t] = h(!1), [g, n] = h(!0), c = w ? x : V, u = (e) => !e || !m || !B(m) || !A(e, m), k = c.length === 5 ? H(c, a) : null, y = k ? u(k) : !0, P = (e) => {
+    const r = e.close;
+    r?.();
+  }, C = (e, r) => {
+    const d = e.target.value;
+    if (t(!0), s(d), d.length !== 5) {
+      n(!1);
+      return;
+    }
+    const f = H(d, a);
+    if (!f) {
+      l(void 0), n(!1);
+      return;
+    }
+    n(!0), u(f) ? (l(f), t(!1), P(r)) : l(void 0);
+  }, I = (e) => {
+    if (n(!0), u(e)) {
+      l(e), s(e ? v(e, "HH:mm") : ""), t(!1);
+      return;
+    }
+    l(void 0), s(e ? v(e, "HH:mm") : ""), t(!0);
+  }, L = () => {
+    l(void 0), s(""), t(!1), n(!0);
+  };
+  return /* @__PURE__ */ o(N, {
+    variant: "popper",
+    popupId: "time-picker-popper",
+    children: (e) => i.disabled || i.readOnly ? /* @__PURE__ */ o(T, {
+      ...i,
+      popupState: e,
+      localValue: c,
+      isValidTime: g,
+      isValidEndTime: y,
+      handleChange: (r) => C(r, e)
+    }) : /* @__PURE__ */ o(D, {
+      mouseEvent: "onMouseDown",
+      onClickAway: () => P(e),
+      children: /* @__PURE__ */ E("div", {
+        className: "relative h-auto w-auto",
+        children: [/* @__PURE__ */ o("div", {
+          className: "m-0 flex h-fit items-center justify-center p-0",
+          children: /* @__PURE__ */ o(T, {
+            ...i,
+            popupState: e,
+            localValue: c,
+            isValidTime: g,
+            isValidEndTime: y,
+            handleChange: (r) => C(r, e)
+          })
+        }), e.isOpen && /* @__PURE__ */ o(j, {
+          ...i,
+          popupState: e,
+          handleClear: L,
+          onSelect: (r) => I(r)
+        })]
+      })
+    })
+  });
+};
+export {
+  J as StyledTimePicker
+};

package/dist/datetime/components/time-picker/StyledTimePicker.module.js

@@ -0,0 +1,11 @@
+var e = {
+  "styled-time-picker-root": "_styled-time-picker-root_hcwp1_1",
+  "styled-time-picker-root_column": "_styled-time-picker-root_column_hcwp1_4",
+  "styled-time-picker-root_cell": "_styled-time-picker-root_cell_hcwp1_7",
+  "styled-time-picker-root_cell__cell-now": "_styled-time-picker-root_cell__cell-now_hcwp1_10",
+  "styled-time-picker-root_cell__cell-selected": "_styled-time-picker-root_cell__cell-selected_hcwp1_13",
+  "shadow-mui": "_shadow-mui_hcwp1_17"
+};
+export {
+  e as default
+};

package/dist/datetime/components/time-picker/TimePickerInput.js

@@ -0,0 +1,66 @@
+import { StyledInputField as w } from "../../shared-components/StyledInputField.js";
+import { HelperText as y } from "./components/HelperText.js";
+import { ClockOutlineIcon as E } from "../../shared-components/ClockOutlineIcon.js";
+import { useEffect as I, useRef as R } from "react";
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { useMask as M } from "@react-input/mask";
+import "material-ui-popup-state/hooks";
+var S = (c) => {
+  const { placeholder: f, disabled: i, inputClassName: h, dataTest: n, width: l, error: u, helperText: x, label: T, locale: k = "en", popupState: e, handleChange: C, isValidTime: s, isValidEndTime: p, localValue: b, title: m, readOnly: t } = c, g = M({
+    mask: "xx:xx",
+    replacement: { x: /\d/ },
+    showMask: !1
+  }), d = !s || !p || !!u, a = R(null);
+  return I(() => {
+    a.current && e.setAnchorEl(a.current);
+  }, [e]), /* @__PURE__ */ v("div", {
+    style: { height: t ? "40px" : "75px" },
+    children: [m && /* @__PURE__ */ r("div", {
+      className: "pb-1 font-roboto font-semibold text-delta-800",
+      children: m
+    }), /* @__PURE__ */ r(w, {
+      inputRef: g,
+      autoComplete: "off",
+      type: "text",
+      dataTest: n,
+      "data-testid": n,
+      placeholder: f,
+      size: "small",
+      error: d,
+      helperText: /* @__PURE__ */ r(y, {
+        isValidTime: s,
+        isValidEndTime: p,
+        error: d,
+        localization: k,
+        helperText: x
+      }),
+      onChange: C,
+      InputProps: {
+        ref: a,
+        onMouseDown: (o) => {
+          !i && !t && e.open(o);
+        },
+        endAdornment: /* @__PURE__ */ r(E, {
+          width: 24,
+          height: 24,
+          onClick: (o) => {
+            o.stopPropagation(), !i && !t && e.open(o);
+          }
+        })
+      },
+      value: b,
+      sx: {
+        maxWidth: l ?? 130,
+        width: l,
+        minWidth: l
+      },
+      disabled: i,
+      readOnly: t,
+      className: h,
+      label: T
+    })]
+  });
+};
+export {
+  S as TimePickerInput
+};

package/dist/datetime/components/time-picker/TimePickerPopper.js

@@ -0,0 +1,73 @@
+import { StyledButton as r } from "../../shared-components/button/StyledButton.js";
+import s from "./StyledTimePicker.module.js";
+import { TimePickerBody as l } from "./components/TimePickerBody.js";
+import { EraserIcon as c } from "../../shared-components/EraserIcon.js";
+import { CheckIcon as h } from "../../shared-components/CheckIcon.js";
+import f from "clsx";
+import { Fade as u, Paper as x, Popper as k } from "@mui/material";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { bindPopper as y } from "material-ui-popup-state/hooks";
+var j = (a) => {
+  const { popupState: e, dataTest: m, value: i, onSelect: n, handleClear: p } = a;
+  return /* @__PURE__ */ t(k, {
+    ...y(e),
+    className: f(s["shadow-mui"]),
+    transition: !0,
+    style: {
+      zIndex: "1300",
+      position: "absolute"
+    },
+    children: ({ TransitionProps: d }) => /* @__PURE__ */ t(u, {
+      ...d,
+      timeout: 350,
+      children: /* @__PURE__ */ o(x, {
+        style: { paddingBottom: "1px" },
+        children: [/* @__PURE__ */ t(l, {
+          dataTest: `${m}-time-picker-body`,
+          value: i,
+          onSelect: n
+        }), /* @__PURE__ */ o("div", {
+          style: {
+            display: "flex",
+            marginTop: "12px",
+            marginBottom: "12px",
+            justifyContent: "space-between"
+          },
+          children: [/* @__PURE__ */ t(r, {
+            dataTest: "time-picker-erase-button",
+            "data-testid": "time-picker-erase-button",
+            variant: "text",
+            onClick: p,
+            size: "small",
+            disabled: !i,
+            style: {
+              minWidth: "40px",
+              marginLeft: "10px"
+            },
+            children: /* @__PURE__ */ t(c, {
+              width: 24,
+              height: 24
+            })
+          }), /* @__PURE__ */ t(r, {
+            dataTest: "time-picker-confirm-button",
+            "data-testid": "time-picker-confirm-button",
+            variant: "contained",
+            size: "small",
+            onClick: () => e.close(),
+            style: {
+              minWidth: "40px",
+              marginRight: "16px"
+            },
+            children: /* @__PURE__ */ t(h, {
+              width: 20,
+              height: 20
+            })
+          })]
+        })]
+      })
+    })
+  });
+};
+export {
+  j as TimePickerPopper
+};