snapflow-ui-kit 0.0.4 → 1.0.0

package/dist/index.js

@@ -1,144 +1,646 @@
-import { clsx as i } from "clsx";
-import { clsx as ye } from "clsx";
-import v from "simplebar-react";
-import { default as ve } from "simplebar-react";
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as S, useRef as w, useEffect as q } from "react";
-import { A as C } from "./ArrowDownIcon-XyCc_cD9.js";
-const O = "_button_dqki1_1", $ = "_primary_dqki1_25", I = "_secondary_dqki1_48", B = "_outlined_dqki1_71", E = "_text_dqki1_97", L = "_icon_dqki1_117", g = {
-  button: O,
-  primary: $,
-  secondary: I,
-  outlined: B,
-  text: E,
-  icon: L
-}, be = (s) => {
-  const { className: r, variant: c = "primary", asLink: l, icon: o, ...p } = s, d = i(g.button, g[c], r);
-  if (l) {
-    const { children: u, ...b } = p;
-    return /* @__PURE__ */ a("a", { className: d, ...b, children: [
-      o && /* @__PURE__ */ e("span", { className: g.icon, children: o }),
-      u
+import D, { clsx as u } from "clsx";
+import { clsx as Pn } from "clsx";
+import nt from "simplebar-react";
+import { default as zn } from "simplebar-react";
+import { jsxs as i, jsx as a, Fragment as ot } from "react/jsx-runtime";
+import { E as at, a as st, C as J, A as rt, b as ct } from "./CloseIcon-BASungOx.js";
+import { forwardRef as K, useId as Q, useState as L, useEffect as G, useMemo as F, useRef as U } from "react";
+import { DayPicker as H } from "react-day-picker";
+import { parse as O, isValid as P, format as R } from "date-fns";
+import { toast as j } from "react-hot-toast";
+const lt = "_button_dqki1_1", it = "_primary_dqki1_25", dt = "_secondary_dqki1_48", _t = "_outlined_dqki1_71", pt = "_text_dqki1_97", ut = "_icon_dqki1_117", $ = {
+  button: lt,
+  primary: it,
+  secondary: dt,
+  outlined: _t,
+  text: pt,
+  icon: ut
+}, xn = (t) => {
+  const { className: e, variant: n = "primary", asLink: o, icon: s, ...r } = t, c = u($.button, $[n], e);
+  if (o) {
+    const { children: m, ...h } = r;
+    return /* @__PURE__ */ i("a", { className: c, ...h, children: [
+      s && /* @__PURE__ */ a("span", { className: $.icon, children: s }),
+      m
     ] });
   }
-  const { children: m, ..._ } = p;
-  return /* @__PURE__ */ a("button", { className: d, ..._, children: [
-    o && /* @__PURE__ */ e("span", { className: g.icon, children: o }),
-    m
+  const { children: d, ...p } = r;
+  return /* @__PURE__ */ i("button", { className: c, ...p, children: [
+    s && /* @__PURE__ */ a("span", { className: $.icon, children: s }),
+    d
   ] });
-}, R = "_checkbox_1q28z_1", j = "_input_1q28z_11", A = "_labelSpan_1q28z_16", P = "_control_1q28z_23", z = {
-  checkbox: R,
-  input: j,
-  labelSpan: A,
-  control: P
-}, he = ({ children: s, className: r, checked: c, onChange: l, ...o }) => /* @__PURE__ */ a("label", { className: i(z.checkbox, r), children: [
-  /* @__PURE__ */ e("input", { type: "checkbox", className: z.input, checked: c, onChange: l, ...o }),
-  /* @__PURE__ */ e("span", { className: z.control }),
-  s && /* @__PURE__ */ e("span", { className: z.labelSpan, children: s })
-] }), T = "_radio_yk69v_1", D = "_input_yk69v_12", H = "_labelSpan_yk69v_18", F = "_control_yk69v_26", x = {
-  radio: T,
-  input: D,
-  labelSpan: H,
-  control: F
-}, ge = ({ children: s, className: r, checked: c, onChange: l, ...o }) => /* @__PURE__ */ a("label", { className: i(x.radio, r), children: [
-  /* @__PURE__ */ e("input", { type: "radio", className: x.input, checked: c, onChange: l, ...o }),
-  /* @__PURE__ */ e("span", { className: x.control }),
-  s && /* @__PURE__ */ e("span", { className: x.labelSpan, children: s })
-] }), G = "_container_zuge2_1", J = "_label_zuge2_7", K = "_select_zuge2_14", M = "_trigger_zuge2_19", Q = "_triggerOpen_zuge2_46", U = "_placeholder_zuge2_67", V = "_selectedContent_zuge2_71", W = "_optionIcon_zuge2_81", X = "_arrow_zuge2_87", Y = "_open_zuge2_98", Z = "_dropdown_zuge2_102", ee = "_option_zuge2_81", te = "_selected_zuge2_71", n = {
-  container: G,
-  label: J,
-  select: K,
-  trigger: M,
-  triggerOpen: Q,
-  placeholder: U,
-  selectedContent: V,
-  optionIcon: W,
-  arrow: X,
-  open: Y,
-  dropdown: Z,
-  option: ee,
+}, mt = "_wrapper_ck06d_1", ht = "_label_ck06d_7", bt = "_disabled_ck06d_14", ft = "_inputContainer_ck06d_18", yt = "_input_ck06d_18", wt = "_error_ck06d_51", gt = "_withStartIcon_ck06d_64", Nt = "_withEndIcon_ck06d_68", vt = "_startIcon_ck06d_72", xt = "_endIcon_ck06d_73", kt = "_errorMessage_ck06d_115", Ct = "_required_ck06d_122", b = {
+  wrapper: mt,
+  label: ht,
+  disabled: bt,
+  inputContainer: ft,
+  input: yt,
+  error: wt,
+  withStartIcon: gt,
+  withEndIcon: Nt,
+  startIcon: vt,
+  endIcon: xt,
+  errorMessage: kt,
+  required: Ct
+}, It = K(
+  ({
+    label: t,
+    errorMessage: e,
+    startIcon: n,
+    endIcon: o,
+    onEndIconClick: s,
+    allowPasswordToggle: r,
+    disabled: c,
+    type: d = "text",
+    className: p,
+    required: m,
+    id: h,
+    ...y
+  }, N) => {
+    const w = Q(), _ = h ?? w, C = e ? `${_}-error` : void 0, S = !!e, I = d === "password" && r, [x, E] = L(!1);
+    return /* @__PURE__ */ i("div", { className: u(b.wrapper, p), children: [
+      t && /* @__PURE__ */ i("label", { htmlFor: _, className: u(b.label, { [b.disabled]: c }), children: [
+        t,
+        m && /* @__PURE__ */ a("sup", { className: b.required, children: " *" })
+      ] }),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: u(b.inputContainer, {
+            [b.error]: S,
+            [b.disabled]: c,
+            [b.withStartIcon]: !!n,
+            [b.withEndIcon]: !!o || I
+          }),
+          children: [
+            n && /* @__PURE__ */ a("span", { className: b.startIcon, children: n }),
+            /* @__PURE__ */ a(
+              "input",
+              {
+                ref: N,
+                id: _,
+                className: b.input,
+                type: I && x ? "text" : d,
+                autoComplete: d === "password" ? "current-password" : "off",
+                required: m,
+                disabled: c,
+                "aria-invalid": S,
+                "aria-describedby": C,
+                ...y
+              }
+            ),
+            I && /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                className: b.endIcon,
+                onClick: () => E((v) => !v),
+                "aria-label": x ? "Hide password" : "Show password",
+                disabled: c,
+                tabIndex: -1,
+                children: x ? /* @__PURE__ */ a(at, {}) : /* @__PURE__ */ a(st, {})
+              }
+            ),
+            o && !I && /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                className: b.endIcon,
+                onClick: s,
+                "aria-label": "Action",
+                disabled: c,
+                children: o
+              }
+            )
+          ]
+        }
+      ),
+      S && /* @__PURE__ */ a("span", { id: C, className: b.errorMessage, role: "alert", children: e })
+    ] });
+  }
+);
+It.displayName = "Input";
+const St = "_textareaWrapper_ahoiy_1", Dt = "_label_ahoiy_7", Et = "_disabled_ahoiy_14", $t = "_textarea_ahoiy_1", Bt = "_errorState_ahoiy_46", qt = "_errorMessage_ahoiy_52", Ot = "_required_ahoiy_59", k = {
+  textareaWrapper: St,
+  label: Dt,
+  disabled: Et,
+  textarea: $t,
+  errorState: Bt,
+  errorMessage: qt,
+  required: Ot
+}, Pt = K(
+  ({ label: t, errorMessage: e, id: n, className: o, disabled: s, minHeight: r = 84, required: c, ...d }, p) => {
+    const m = Q(), h = n ?? m, y = e ? `${h}-error` : void 0;
+    return /* @__PURE__ */ i("div", { className: u(k.textareaWrapper, o), children: [
+      t && /* @__PURE__ */ i("label", { htmlFor: h, className: u(k.label, { [k.disabled]: s }), children: [
+        t,
+        c && /* @__PURE__ */ a("sup", { className: k.required, children: " *" })
+      ] }),
+      /* @__PURE__ */ a(
+        "textarea",
+        {
+          ref: p,
+          id: h,
+          className: u(k.textarea, { [k.errorState]: !!e }),
+          "aria-invalid": !!e,
+          "aria-describedby": y,
+          required: c,
+          disabled: s,
+          style: { minHeight: r },
+          ...d
+        }
+      ),
+      e && /* @__PURE__ */ a("span", { id: y, role: "alert", className: k.errorMessage, children: e })
+    ] });
+  }
+);
+Pt.displayName = "Textarea";
+const Rt = "_alert_5jfpm_1", zt = "_content_5jfpm_15", Tt = "_error_5jfpm_22", jt = "_success_5jfpm_28", Lt = "_closeButton_5jfpm_33", Mt = "_message_5jfpm_39", At = "_title_5jfpm_40", Wt = "_toastEnter_5jfpm_50", Ft = "_toastExit_5jfpm_54", g = {
+  alert: Rt,
+  content: zt,
+  error: Tt,
+  success: jt,
+  closeButton: Lt,
+  message: Mt,
+  title: At,
+  toastEnter: Wt,
+  "fade-in": "_fade-in_5jfpm_1",
+  toastExit: Ft,
+  "fade-out": "_fade-out_5jfpm_1"
+}, X = ({
+  variant: t = "error",
+  title: e,
+  message: n,
+  className: o,
+  onClose: s
+}) => /* @__PURE__ */ i("div", { className: D(g.alert, g[t], o), role: "alert", children: [
+  /* @__PURE__ */ i("div", { className: g.content, children: [
+    e && /* @__PURE__ */ a("div", { className: g.title, children: e }),
+    /* @__PURE__ */ a("div", { className: g.message, children: n })
+  ] }),
+  s && /* @__PURE__ */ a("button", { type: "button", className: g.closeButton, onClick: s, "aria-label": "Close alert", children: /* @__PURE__ */ a(J, {}) })
+] }), kn = (t) => {
+  j.custom((e) => /* @__PURE__ */ a(
+    X,
+    {
+      variant: "success",
+      message: t,
+      className: e.visible ? g.toastEnter : g.toastExit,
+      onClose: () => j.dismiss(e.id)
+    }
+  ));
+}, Cn = (t, e = "Error!") => {
+  j.custom((n) => /* @__PURE__ */ a(
+    X,
+    {
+      variant: "error",
+      title: e,
+      message: t,
+      className: n.visible ? g.toastEnter : g.toastExit,
+      onClose: () => j.dismiss(n.id)
+    }
+  ));
+}, Vt = "_card_1ah7i_1", Gt = {
+  card: Vt
+}, In = ({ className: t, children: e, ...n }) => /* @__PURE__ */ a("div", { className: u(Gt.card, t), ...n, children: e }), Ht = "_checkbox_1q28z_1", Yt = "_input_1q28z_11", Jt = "_labelSpan_1q28z_16", Kt = "_control_1q28z_23", B = {
+  checkbox: Ht,
+  input: Yt,
+  labelSpan: Jt,
+  control: Kt
+}, Sn = ({ children: t, className: e, checked: n, onChange: o, ...s }) => /* @__PURE__ */ i("label", { className: u(B.checkbox, e), children: [
+  /* @__PURE__ */ a("input", { type: "checkbox", className: B.input, checked: n, onChange: o, ...s }),
+  /* @__PURE__ */ a("span", { className: B.control }),
+  t && /* @__PURE__ */ a("span", { className: B.labelSpan, children: t })
+] }), Qt = "_label_ndvr9_1", Ut = "_required_ndvr9_5", Xt = "_srOnly_ndvr9_10", M = {
+  label: Qt,
+  required: Ut,
+  srOnly: Xt
+}, Dn = ({
+  text: t,
+  textVariant: e = "text-14-medium",
+  required: n = !1,
+  color: o,
+  className: s,
+  htmlFor: r,
+  ...c
+}) => /* @__PURE__ */ i(
+  V,
+  {
+    as: "label",
+    variant: e,
+    className: D(M.label, s),
+    htmlFor: r,
+    style: o ? { color: o } : void 0,
+    ...c,
+    children: [
+      t,
+      n && /* @__PURE__ */ i(ot, { children: [
+        /* @__PURE__ */ a("span", { className: M.required, "aria-hidden": "true", children: "*" }),
+        /* @__PURE__ */ a("span", { className: M.srOnly, children: " (required)" })
+      ] })
+    ]
+  }
+), Zt = "_tab_78cv0_1", te = "_selected_78cv0_21", A = {
+  tab: Zt,
   selected: te
-}, ze = (s) => {
-  const { className: r, disabled: c = !1, label: l, onChange: o, options: p, placeholder: d, value: m } = s, [_, u] = S(!1), b = w(null), h = p.find((t) => t.value === m), k = () => {
-    c || u(!_);
-  }, y = (t) => {
-    o?.(t), u(!1);
+}, En = (t) => {
+  const { children: e, selected: n = !1, className: o, disabled: s = !1, ...r } = t, c = u(A.tab, n && A.selected, s && A.disabled, o);
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      className: c,
+      disabled: s,
+      tabIndex: s ? -1 : 0,
+      "aria-selected": n,
+      "aria-disabled": s,
+      ...r,
+      children: e
+    }
+  );
+}, ee = "_radio_10hqy_1", ne = "_input_10hqy_12", oe = "_labelSpan_10hqy_18", ae = "_control_10hqy_26", q = {
+  radio: ee,
+  input: ne,
+  labelSpan: oe,
+  control: ae
+}, $n = ({ children: t, className: e, checked: n, onChange: o, ...s }) => /* @__PURE__ */ i("label", { className: u(q.radio, e), children: [
+  /* @__PURE__ */ a("input", { type: "radio", className: q.input, checked: n, onChange: o, ...s }),
+  /* @__PURE__ */ a("span", { className: q.control }),
+  t && /* @__PURE__ */ a("span", { className: q.labelSpan, children: t })
+] }), se = "_typography_11tbz_1", re = "_icon_11tbz_8", ce = "_large_11tbz_14", le = "_h1_11tbz_20", ie = "_h2_11tbz_26", de = "_h3_11tbz_32", _e = "_small_11tbz_68", pe = "_link_11tbz_80", W = {
+  typography: se,
+  icon: re,
+  large: ce,
+  h1: le,
+  h2: ie,
+  h3: de,
+  "text-16": "_text-16_11tbz_38",
+  "text-16-bold": "_text-16-bold_11tbz_44",
+  "text-14": "_text-14_11tbz_50",
+  "text-14-bold": "_text-14-bold_11tbz_56",
+  "text-14-medium": "_text-14-medium_11tbz_62",
+  small: _e,
+  "small-semibold": "_small-semibold_11tbz_74",
+  link: pe,
+  "small-link": "_small-link_11tbz_89"
+}, V = (t) => {
+  const { as: e = "span", children: n, className: o, icon: s, variant: r, ...c } = t;
+  return /* @__PURE__ */ i(e, { className: u(W.typography, W[r], o), ...c, children: [
+    s && /* @__PURE__ */ a("span", { className: W.icon, children: s }),
+    n
+  ] });
+}, ue = "_wrapper_l023w_1", me = "_inputContainer_l023w_5", he = "_label_l023w_11", be = "_inputWrapper_l023w_15", fe = "_trigger_l023w_22", ye = "_icon_l023w_38", we = "_placeholder_l023w_45", ge = "_clearButton_l023w_49", Ne = "_clearIcon_l023w_89", ve = "_disabledLabel_l023w_101", xe = "_error_l023w_123", ke = "_calendar_l023w_141", Ce = "_open_l023w_160", Ie = "_monthsCaption_l023w_166", Se = "_navButtonPrevious_l023w_172", De = "_navButtonNext_l023w_173", Ee = "_navIcon_l023w_193", $e = "_monthGrid_l023w_199", Be = "_dropdowns_l023w_205", qe = "_weekday_l023w_209", Oe = "_day_l023w_220", Pe = "_dayButton_l023w_227", Re = "_dayOutside_l023w_254", ze = "_dayToday_l023w_258", Te = "_daySelected_l023w_263", je = "_dayRangeStart_l023w_264", Le = "_dayRangeEnd_l023w_265", Me = "_dayRangeMiddle_l023w_266", l = {
+  wrapper: ue,
+  inputContainer: me,
+  label: he,
+  inputWrapper: be,
+  trigger: fe,
+  icon: ye,
+  placeholder: we,
+  clearButton: ge,
+  clearIcon: Ne,
+  disabledLabel: ve,
+  error: xe,
+  calendar: ke,
+  open: Ce,
+  monthsCaption: Ie,
+  navButtonPrevious: Se,
+  navButtonNext: De,
+  navIcon: Ee,
+  monthGrid: $e,
+  dropdowns: Be,
+  weekday: qe,
+  day: Oe,
+  dayButton: Pe,
+  dayOutside: Re,
+  dayToday: ze,
+  daySelected: Te,
+  dayRangeStart: je,
+  dayRangeEnd: Le,
+  dayRangeMiddle: Me
+}, Ae = ({
+  ref: t,
+  isOpen: e,
+  onDismiss: n
+}) => {
+  G(() => {
+    if (!e) return;
+    const o = (r) => {
+      t.current && !t.current.contains(r.target) && n();
+    }, s = (r) => {
+      r.key === "Escape" && n();
+    };
+    return document.addEventListener("mousedown", o), document.addEventListener("touchstart", o), document.addEventListener("keydown", s), () => {
+      document.removeEventListener("mousedown", o), document.removeEventListener("touchstart", o), document.removeEventListener("keydown", s);
+    };
+  }, [e, n, t]);
+}, z = "dd.MM.yyyy", We = (t) => {
+  if (!t) return;
+  const e = O(t, z, /* @__PURE__ */ new Date());
+  return P(e) ? e : void 0;
+}, Fe = (t) => {
+  if (!t) return;
+  const e = " - ", n = t.indexOf(e);
+  if (n === -1) {
+    const d = O(t.trim(), z, /* @__PURE__ */ new Date());
+    return P(d) ? { from: d, to: void 0 } : void 0;
+  }
+  const o = t.substring(0, n).trim(), s = t.substring(n + e.length).trim();
+  if (!o || !s) return;
+  const r = O(o, z, /* @__PURE__ */ new Date()), c = O(s, z, /* @__PURE__ */ new Date());
+  if (P(r) && P(c))
+    return { from: r, to: c };
+}, Z = (t, e) => {
+  if (t)
+    return e === "single" ? We(t) : Fe(t);
+}, Ve = (t, e) => {
+  const [n, o] = L(/* @__PURE__ */ new Date());
+  return {
+    month: F(() => {
+      const c = Z(t, e);
+      if (!c) return n;
+      if (e === "single" && c instanceof Date)
+        return c;
+      if (e === "range" && typeof c == "object" && "from" in c) {
+        const d = c;
+        if (d.from)
+          return d.from;
+        if (d.to)
+          return d.to;
+      }
+      return n;
+    }, [t, e, n]),
+    setMonth: (c) => {
+      o(c);
+    }
+  };
+}, Ge = "_container_15bt3_1", He = "_label_15bt3_7", Ye = "_select_15bt3_14", Je = "_trigger_15bt3_19", Ke = "_triggerOpen_15bt3_46", Qe = "_placeholder_15bt3_67", Ue = "_selectedContent_15bt3_71", Xe = "_optionIcon_15bt3_81", Ze = "_arrow_15bt3_87", tn = "_open_15bt3_98", en = "_dropdown_15bt3_102", nn = "_option_15bt3_81", on = "_selected_15bt3_71", f = {
+  container: Ge,
+  label: He,
+  select: Ye,
+  trigger: Je,
+  triggerOpen: Ke,
+  placeholder: Qe,
+  selectedContent: Ue,
+  optionIcon: Xe,
+  arrow: Ze,
+  open: tn,
+  dropdown: en,
+  option: nn,
+  selected: on
+}, an = (t) => {
+  const { className: e, disabled: n = !1, label: o, onChange: s, options: r, placeholder: c, value: d } = t, [p, m] = L(!1), h = U(null), y = r.find((_) => _.value === d), N = () => {
+    n || m(!p);
+  }, w = (_) => {
+    s?.(_), m(!1);
   };
-  return q(() => {
-    const t = (f) => {
-      b.current && !b.current.contains(f.target) && u(!1);
+  return G(() => {
+    const _ = (C) => {
+      h.current && !h.current.contains(C.target) && m(!1);
     };
-    return _ && document.addEventListener("mousedown", t), () => {
-      document.removeEventListener("mousedown", t);
+    return p && document.addEventListener("mousedown", _), () => {
+      document.removeEventListener("mousedown", _);
     };
-  }, [_]), /* @__PURE__ */ a("div", { className: i(n.container, r), children: [
-    l && /* @__PURE__ */ e("label", { className: n.label, children: l }),
-    /* @__PURE__ */ a("div", { className: n.select, ref: b, children: [
-      /* @__PURE__ */ a(
+  }, [p]), /* @__PURE__ */ i("div", { className: u(f.container, e), children: [
+    o && /* @__PURE__ */ a("label", { className: f.label, children: o }),
+    /* @__PURE__ */ i("div", { className: f.select, ref: h, children: [
+      /* @__PURE__ */ i(
         "button",
         {
-          className: i(n.trigger, _ && n.triggerOpen),
-          disabled: c,
-          onClick: k,
+          className: u(f.trigger, p && f.triggerOpen),
+          disabled: n,
+          onClick: N,
           type: "button",
           "aria-haspopup": "listbox",
-          "aria-expanded": _,
+          "aria-expanded": p,
           children: [
-            /* @__PURE__ */ a("span", { className: h ? n.selectedContent : n.placeholder, children: [
-              h?.icon && /* @__PURE__ */ e("span", { className: n.optionIcon, children: h.icon }),
-              h ? h.label : d || "Select an option"
+            /* @__PURE__ */ i("span", { className: y ? f.selectedContent : f.placeholder, children: [
+              y?.icon && /* @__PURE__ */ a("span", { className: f.optionIcon, children: y.icon }),
+              y ? y.label : c || "Select an option"
             ] }),
-            /* @__PURE__ */ e("span", { className: i(n.arrow, _ && n.open), children: /* @__PURE__ */ e(C, {}) })
+            /* @__PURE__ */ a("span", { className: u(f.arrow, p && f.open), children: /* @__PURE__ */ a(rt, {}) })
           ]
         }
       ),
-      _ && /* @__PURE__ */ e(v, { className: n.dropdown, role: "listbox", style: { maxHeight: 191 }, children: p.map((t) => /* @__PURE__ */ a(
+      p && /* @__PURE__ */ a(nt, { className: f.dropdown, role: "listbox", style: { maxHeight: 191 }, children: r.map((_) => /* @__PURE__ */ i(
         "button",
         {
-          className: i(n.option, t.value === m && n.selected),
-          onClick: () => y(t.value),
+          className: u(f.option, _.value === d && f.selected),
+          onClick: () => w(_.value),
           type: "button",
           role: "option",
-          "aria-selected": t.value === m,
+          "aria-selected": _.value === d,
           children: [
-            t.icon && /* @__PURE__ */ e("span", { className: n.optionIcon, children: t.icon }),
-            t.label
+            _.icon && /* @__PURE__ */ a("span", { className: f.optionIcon, children: _.icon }),
+            _.label
           ]
         },
-        t.value
+        _.value
       )) })
     ] })
   ] });
-}, ne = "_typography_11tbz_1", oe = "_icon_11tbz_8", se = "_large_11tbz_14", ce = "_h1_11tbz_20", le = "_h2_11tbz_26", ae = "_h3_11tbz_32", re = "_small_11tbz_68", _e = "_link_11tbz_80", N = {
-  typography: ne,
-  icon: oe,
-  large: se,
-  h1: ce,
-  h2: le,
-  h3: ae,
-  "text-16": "_text-16_11tbz_38",
-  "text-16-bold": "_text-16-bold_11tbz_44",
-  "text-14": "_text-14_11tbz_50",
-  "text-14-bold": "_text-14-bold_11tbz_56",
-  "text-14-medium": "_text-14-medium_11tbz_62",
-  small: re,
-  "small-semibold": "_small-semibold_11tbz_74",
-  link: _e,
-  "small-link": "_small-link_11tbz_89"
-}, xe = (s) => {
-  const { as: r = "span", children: c, className: l, icon: o, variant: p, ...d } = s;
-  return /* @__PURE__ */ a(r, { className: i(N.typography, N[p], l), ...d, children: [
-    o && /* @__PURE__ */ e("span", { className: N.icon, children: o }),
-    c
+}, tt = (t) => {
+  const e = (o) => {
+    if (t.onChange) {
+      const s = {
+        target: {
+          value: o
+        }
+      };
+      t.onChange(s);
+    }
+  }, n = t.options?.map((o) => ({
+    value: o.value.toString(),
+    label: o.label
+  })) || [];
+  return /* @__PURE__ */ a(
+    an,
+    {
+      className: t.className,
+      options: n,
+      value: t.value?.toString() || "",
+      onChange: e
+    }
+  );
+};
+tt.displayName = "DatePickerDropdown";
+const sn = {
+  month_caption: l.monthsCaption,
+  button_previous: l.navButtonPrevious,
+  button_next: l.navButtonNext,
+  chevron: l.navIcon,
+  caption_label: l.captionLabel,
+  dropdowns: l.dropdowns,
+  dropdown_root: l.dropdown_root,
+  dropdown: l.dropdown,
+  dropdown_select_option: l.option,
+  months_dropdown: l.monthsDropdown,
+  years_dropdown: l.yearsDropdown,
+  month_grid: l.monthGrid,
+  weekday: l.weekday,
+  day_button: l.dayButton,
+  day: l.day,
+  outside: l.dayOutside,
+  selected: l.daySelected,
+  range_start: l.dayRangeStart,
+  range_middle: l.dayRangeMiddle,
+  range_end: l.dayRangeEnd,
+  today: l.dayToday
+}, rn = {
+  Dropdown: tt
+}, cn = {
+  weekStartsOn: 1,
+  showOutsideDays: !0,
+  reverseYears: !0,
+  captionLayout: "dropdown"
+}, ln = {
+  components: rn,
+  ...cn
+}, dn = (t) => ({
+  ...ln,
+  classNames: {
+    root: D(l.calendar, t && l.open),
+    ...sn
+  }
+}), T = "dd.MM.yyyy", _n = (t) => t ? R(t, T) : "", pn = (t) => !t || !t.from ? "" : t.to && t.from.getTime() !== t.to.getTime() ? `${R(t.from, T)} - ${R(t.to, T)}` : R(t.from, T), Y = (t, e) => t ? e === "single" && t instanceof Date ? _n(t) : e === "range" && typeof t == "object" && "from" in t ? pn(t) : "" : "", un = ({
+  value: t,
+  mode: e,
+  onChange: n,
+  setMonth: o,
+  setIsOpen: s
+}) => {
+  if (!t) {
+    n("");
+    return;
+  }
+  if (e === "single") {
+    t instanceof Date && (o(t), n(Y(t, "single")), s(!1));
+    return;
+  }
+  if (e === "range" && typeof t == "object" && "from" in t) {
+    const r = t;
+    r.from ? o(r.from) : r.to && o(r.to);
+    const c = Y(r, "range");
+    n(c), r.from && r.to && r.from.getTime() !== r.to.getTime() && s(!1);
+  }
+}, mn = (t, e, n) => {
+  if (t) {
+    if (e === "single" && t instanceof Date) {
+      n(t);
+      return;
+    }
+    if (e === "range" && typeof t == "object" && "from" in t) {
+      const o = t;
+      o.from ? n(o.from) : o.to && n(o.to);
+    }
+  }
+}, Bn = ({
+  mode: t,
+  value: e,
+  onChange: n,
+  disabled: o,
+  label: s,
+  error: r,
+  placeholder: c,
+  ...d
+}) => {
+  const [p, m] = L(!1), h = U(null), { month: y, setMonth: N } = Ve(e, t), w = F(() => Z(e, t), [e, t]);
+  G(() => {
+    mn(w, t, N);
+  }, [w, t, N]), Ae({ ref: h, isOpen: p, onDismiss: () => {
+    m(!1);
+  } });
+  const C = (v) => {
+    v.stopPropagation(), x(void 0);
+  }, S = () => {
+    o || m((v) => !v);
+  }, I = (v) => {
+    const et = v.currentTarget.value;
+    n(et);
+  }, x = (v) => {
+    un({
+      value: v,
+      mode: t,
+      onChange: n,
+      setMonth: N,
+      setIsOpen: m
+    });
+  }, E = F(() => dn(p), [p]);
+  return /* @__PURE__ */ i("div", { ref: h, className: l.wrapper, children: [
+    /* @__PURE__ */ i("div", { className: l.inputContainer, children: [
+      s && /* @__PURE__ */ a("span", { className: o ? l.disabledLabel : l.label, children: /* @__PURE__ */ a(V, { variant: "text-14", children: s }) }),
+      /* @__PURE__ */ i("div", { className: l.inputWrapper, children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "text",
+            className: D(l.trigger, r && l.error),
+            onClick: S,
+            value: e,
+            onChange: I,
+            placeholder: c,
+            disabled: o,
+            "aria-label": s || "Select date",
+            "aria-expanded": p,
+            "aria-haspopup": "dialog",
+            "aria-invalid": r ? "true" : "false",
+            ...d
+          }
+        ),
+        e && !o && /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: l.clearButton,
+            onClick: C,
+            "aria-label": "Clear date",
+            children: /* @__PURE__ */ a(J, { className: l.clearIcon })
+          }
+        ),
+        /* @__PURE__ */ a(ct, { className: D(l.icon, !e && l.placeholder) })
+      ] }),
+      r && /* @__PURE__ */ a(V, { variant: "small", className: l.error, children: r })
+    ] }),
+    t === "single" ? /* @__PURE__ */ a(
+      H,
+      {
+        ...E,
+        month: y,
+        onMonthChange: N,
+        mode: "single",
+        selected: w instanceof Date ? w : void 0,
+        onSelect: x
+      }
+    ) : /* @__PURE__ */ a(
+      H,
+      {
+        ...E,
+        month: y,
+        onMonthChange: N,
+        mode: "range",
+        selected: w && typeof w == "object" && "from" in w ? w : void 0,
+        onSelect: x
+      }
+    )
   ] });
 };
 export {
-  be as Button,
-  he as Checkbox,
-  ge as Radio,
-  ze as Select,
-  ve as SimpleBar,
-  xe as Typography,
-  ye as clsx
+  X as Alert,
+  xn as Button,
+  In as Card,
+  Sn as Checkbox,
+  Bn as DatePicker,
+  It as Input,
+  Dn as Label,
+  $n as Radio,
+  an as Select,
+  zn as SimpleBar,
+  En as Tab,
+  Pt as Textarea,
+  V as Typography,
+  Pn as clsx,
+  Cn as toastError,
+  kn as toastSuccess
 };
 //# sourceMappingURL=index.js.map