@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/inputs/fields/combobox/index.js

@@ -1,26 +1,146 @@
-import { jsx as i, jsxs as I } from "react/jsx-runtime";
-import { forwardRef as J, useState as d, useRef as m, useMemo as Q, useCallback as L } from "react";
+import { jsx as r, jsxs as O } from "react/jsx-runtime";
+import { forwardRef as J, useState as x, useRef as u, useMemo as Q, useCallback as C } from "react";
 import { useFilter as U, useComboBox as W, useListBox as X, useButton as Y } from "react-aria";
 import { Item as Z, useComboBoxState as _ } from "react-stately";
-import { useTheme as T } from "styled-components";
-import { S as k, O as ee } from "../../../../index-DrfjITyT.mjs";
-import { OutlineContainer as oe } from "../../outline-container/index.js";
-import { S as te } from "../../../../styles-lSVV9kjn.mjs";
-import { Popover as re } from "../../utils/popover/index.js";
-import { Icon as ie } from "../../../icon/index.js";
-import { IconButton as ne } from "../../../icon-button/index.js";
-const be = J(function({ disabled: x = !1, error: s, helpLink: O, helpLinkText: P, helpText: z, label: b, name: u, items: o, onChange: t, required: F, tooltip: N, value: v, weight: V, ...$ }, g) {
-  const C = T(), [a, B] = d(v ?? ""), [j, R] = d(v), [c, S] = d(o), { contains: l } = U({ sensitivity: "base" }), f = m(null), h = m(null), y = m(null), w = m(null), E = Q(() => o.map((e) => l(e.name, a) ? i(Z, { children: e.name }, e.value) : null), [l, a, o]), K = L((e) => {
-    B(e), R((n) => {
-      const p = e === "" ? "" : n;
-      return t == null || t(p), p;
-    }), S(o.filter((n) => l(n.name, e)));
-  }, [l, o, t]), M = L((e) => {
-    var n;
-    e && (B(((n = o.find((p) => p.value === e)) == null ? void 0 : n.name) ?? ""), R(String(e)), t == null || t(e), S(o));
-  }, [t, o]), r = _({ allowsEmptyCollection: !0, inputValue: a, items: c, shouldCloseOnBlur: !0, selectedKey: j, onInputChange: K, onSelectionChange: M, children: E }), { buttonProps: q, inputProps: A, listBoxProps: D } = W({ inputValue: a, items: c, buttonRef: f, id: u, inputRef: g, label: b, listBoxRef: h, name: u, popoverRef: w }, r), { listBoxProps: G } = X(D, r, h), { buttonProps: H } = Y(q, f);
-  return I(oe, { error: s, helpLink: O, helpLinkText: P, helpText: z, htmlFor: u, label: b, required: F, tooltip: N, weight: V, children: [I(te, { className: `${x ? "disabled" : ""} ${s ? "error" : ""}`, ref: y, children: [i("input", { ...A, ...$, "aria-invalid": s ? "true" : "false", ref: g }), s ? i(ie, { icon: "exclamation-circle", iconClass: "error-icon", iconColor: C.palette.error[500], iconSize: "xs" }) : void 0, i(ne, { ...H, className: "action", icon: r.isOpen ? "chevron-up" : "chevron-down", iconColor: C.palette.gray[400], iconSize: "xxs", iconType: "fa-light", px: 0.125, py: 0.125, ref: f, variant: "ghost" })] }), r.isOpen && r.collection.size > 0 && !x ? i(re, { className: "dropdown", offset: 4, placement: "bottom start", popoverRef: w, state: r, triggerRef: y, children: i(k, { ...G, ref: h, children: c.map((e) => i(ee, { item: e, state: r }, e.value)) }) }) : null] });
+import { useTheme as k } from "styled-components";
+import { S as g, O as oo } from "../../../../index-CUQBAqt_.mjs";
+import { OutlineContainer as to } from "../../outline-container/index.js";
+import { S as eo } from "../../../../styles-BXFVwnWT.mjs";
+import { Popover as no } from "../../utils/popover/index.js";
+import { Icon as ro } from "../../../icon/index.js";
+import { IconButton as so } from "../../../icon-button/index.js";
+const Io = J(function({
+  disabled: b = !1,
+  error: i,
+  helpLink: z,
+  helpLinkText: F,
+  helpText: N,
+  label: B,
+  name: m,
+  items: t,
+  onChange: e,
+  required: T,
+  tooltip: V,
+  value: S,
+  weight: j,
+  ...K
+}, I) {
+  const P = k(), [l, R] = x(S ?? ""), [L, v] = x(S), [a, h] = x(t), { contains: c } = U({ sensitivity: "base" }), f = u(null), d = u(null), w = u(null), y = u(null), $ = Q(() => t.map(
+    (o) => c(o.name, l) ? /* @__PURE__ */ r(Z, { children: o.name }, o.value) : null
+  ), [c, l, t]), D = C(
+    (o) => {
+      R(o), v((s) => {
+        const p = o === "" ? "" : s;
+        return e == null || e(p), p;
+      }), h(t.filter((s) => c(s.name, o)));
+    },
+    [c, t, e]
+  ), E = C(
+    (o) => {
+      var s;
+      o && (R(((s = t.find((p) => p.value === o)) == null ? void 0 : s.name) ?? ""), v(String(o)), e == null || e(o), h(t));
+    },
+    [e, t]
+  ), n = _({
+    allowsEmptyCollection: !0,
+    inputValue: l,
+    items: a,
+    shouldCloseOnBlur: !0,
+    selectedKey: L,
+    onInputChange: D,
+    onSelectionChange: E,
+    children: $
+  }), {
+    buttonProps: M,
+    inputProps: q,
+    listBoxProps: A
+  } = W(
+    {
+      inputValue: l,
+      items: a,
+      buttonRef: f,
+      id: m,
+      inputRef: I,
+      label: B,
+      listBoxRef: d,
+      name: m,
+      popoverRef: y
+    },
+    n
+  ), { listBoxProps: G } = X(A, n, d), { buttonProps: H } = Y(M, f);
+  return /* @__PURE__ */ O(
+    to,
+    {
+      error: i,
+      helpLink: z,
+      helpLinkText: F,
+      helpText: N,
+      htmlFor: m,
+      label: B,
+      required: T,
+      tooltip: V,
+      weight: j,
+      children: [
+        /* @__PURE__ */ O(
+          eo,
+          {
+            className: `${b ? "disabled" : ""} ${i ? "error" : ""}`,
+            ref: w,
+            children: [
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  ...q,
+                  ...K,
+                  "aria-invalid": i ? "true" : "false",
+                  ref: I
+                }
+              ),
+              i ? /* @__PURE__ */ r(
+                ro,
+                {
+                  icon: "exclamation-circle",
+                  iconClass: "error-icon",
+                  iconColor: P.palette.error[500],
+                  iconSize: "xs"
+                }
+              ) : void 0,
+              /* @__PURE__ */ r(
+                so,
+                {
+                  ...H,
+                  className: "action",
+                  icon: n.isOpen ? "chevron-up" : "chevron-down",
+                  iconColor: P.palette.gray[400],
+                  iconSize: "xxs",
+                  iconType: "fa-light",
+                  px: 0.125,
+                  py: 0.125,
+                  ref: f,
+                  variant: "ghost"
+                }
+              )
+            ]
+          }
+        ),
+        n.isOpen && n.collection.size > 0 && !b ? /* @__PURE__ */ r(
+          no,
+          {
+            className: "dropdown",
+            offset: 4,
+            placement: "bottom start",
+            popoverRef: y,
+            state: n,
+            triggerRef: w,
+            children: /* @__PURE__ */ r(g, { ...G, ref: d, children: a.map(
+              (o) => /* @__PURE__ */ r(oo, { item: o, state: n }, o.value)
+            ) })
+          }
+        ) : null
+      ]
+    }
+  );
 });
 export {
-  be as ComboBox
+  Io as ComboBox
 };

package/dist/components/inputs/fields/combobox/option/index.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "react-aria";
-import { O } from "../../../../../index-DrfjITyT.mjs";
+import { O } from "../../../../../index-CUQBAqt_.mjs";
 import "../../../../icon/index.js";
 export {
   O as Option

package/dist/components/inputs/fields/date/calendar/cell/index.js

@@ -1,15 +1,26 @@
-import { jsx as l, jsxs as p } from "react/jsx-runtime";
-import { isToday as u, getLocalTimeZone as R, isSameDay as c } from "@internationalized/date";
-import { isNull as m } from "lodash";
-import { useRef as b } from "react";
-import { useCalendarCell as x } from "react-aria";
-import { a as $, b as C } from "../../../../../../styles-CI-I6joH.mjs";
-import { Icon as j } from "../../../../../icon/index.js";
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { isToday as u, getLocalTimeZone as R, isSameDay as a } from "@internationalized/date";
+import { isNull as g } from "lodash";
+import { useRef as S } from "react";
+import { useCalendarCell as b } from "react-aria";
+import { a as x, b as y } from "../../../../../../styles-BlHspTrz.mjs";
+import { Icon as C } from "../../../../../icon/index.js";
 const k = ({ state: e, date: i }) => {
-  const t = b(null), a = u(i, R()), { cellProps: g, buttonProps: h, isSelected: s, isDisabled: o, formattedDate: f } = x({ date: i }, e, t), r = "highlightedRange" in e && !m(e.highlightedRange) ? c(i, e.highlightedRange.start) : s, d = "highlightedRange" in e && !m(e.highlightedRange) ? c(i, e.highlightedRange.end) : s, n = !s || o || r || d ? "" : "range";
-  return l($, { id: n, ...g, children: p("div", { ...h, className: `cell ${r || d ? "selected" : ""}
-          ${o ? "disabled" : ""} ${a ? "today" : ""}
-          ${e.isFocused || a ? "" : "focused"} ${n}`, ref: t, children: [f, a ? l(C, { children: l(j, { clickable: !1, icon: "circle", iconSize: "xxs" }) }) : void 0] }) });
+  const r = S(null), o = u(i, R()), { cellProps: h, buttonProps: m, isSelected: l, isDisabled: c, formattedDate: f } = b({ date: i }, e, r), s = "highlightedRange" in e && !g(e.highlightedRange) ? a(i, e.highlightedRange.start) : l, d = "highlightedRange" in e && !g(e.highlightedRange) ? a(i, e.highlightedRange.end) : l, t = l && !c && !(s || d) ? "range" : "";
+  return /* @__PURE__ */ n(x, { id: t, ...h, children: /* @__PURE__ */ p(
+    "div",
+    {
+      ...m,
+      className: `cell ${s || d ? "selected" : ""}
+          ${c ? "disabled" : ""} ${o ? "today" : ""}
+          ${!e.isFocused && !o ? "focused" : ""} ${t}`,
+      ref: r,
+      children: [
+        f,
+        o ? /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n(C, { clickable: !1, icon: "circle", iconSize: "xxs" }) }) : void 0
+      ]
+    }
+  ) });
 };
 export {
   k as CalendarCell

package/dist/components/inputs/fields/date/calendar/grid/index.js

@@ -1,15 +1,26 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { getWeeksInMonth as p } from "@internationalized/date";
-import { useLocale as h, useCalendarGrid as k } from "react-aria";
+import { getWeeksInMonth as h } from "@internationalized/date";
+import { useLocale as k, useCalendarGrid as p } from "react-aria";
 import { CalendarCell as y } from "../cell/index.js";
-import { W as n, D as f } from "../../../../../../styles-CI-I6joH.mjs";
-const D = ({ state: a, ...o }) => {
-  const { locale: d } = h(), { weekDays: i } = k(o, a), l = p(a.visibleRange.start, d);
-  return m("table", { children: [e("thead", { children: e(n, { children: i.map((r, t) => e(f, { children: r }, `key_${t}`)) }) }), e("tbody", { children: [...new Array(l).keys()].map((r) => e(n, { children: a.getDatesInWeek(r).map((t, c) => {
-    const s = `key_${c}`;
-    return t ? e(y, { date: t, state: a }, s) : e("td", {}, s);
-  }) }, r)) })] });
+import { W as s, D as f } from "../../../../../../styles-BlHspTrz.mjs";
+const g = ({
+  state: r,
+  ...l
+}) => {
+  const { locale: d } = k(), { weekDays: i } = p(l, r), c = h(r.visibleRange.start, d);
+  return /* @__PURE__ */ m("table", { children: [
+    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e(s, { children: i.map((n, o) => {
+      const a = `key_${o}`;
+      return /* @__PURE__ */ e(f, { children: n }, a);
+    }) }) }),
+    /* @__PURE__ */ e("tbody", { children: [...new Array(c).keys()].map(
+      (n) => /* @__PURE__ */ e(s, { children: r.getDatesInWeek(n).map((o, a) => {
+        const t = `key_${a}`;
+        return o ? /* @__PURE__ */ e(y, { date: o, state: r }, t) : /* @__PURE__ */ e("td", {}, t);
+      }) }, n)
+    ) })
+  ] });
 };
 export {
-  D as CalendarGrid
+  g as CalendarGrid
 };

package/dist/components/inputs/fields/date/calendar/header/index.js

@@ -1,16 +1,38 @@
-import { jsxs as e, jsx as s } from "react/jsx-runtime";
-import { useCallback as r } from "react";
-import { T as h, Y as f, C as t } from "../../../../../../styles-CI-I6joH.mjs";
-import { Icon as c } from "../../../../../icon/index.js";
-import { Button as i } from "../../../../utils/calendar-button/index.js";
-const k = ({ state: o, prevButtonProps: n, nextButtonProps: l, title: p }) => {
-  const a = o.focusedDate, d = r(() => {
-    o.setFocusedDate(a.add({ years: 1 }));
-  }, [a, o]), m = r(() => {
-    o.setFocusedDate(a.subtract({ years: 1 }));
-  }, [a, o]);
-  return e("div", { className: "header flex items-start", children: [s(i, { icon: "chevron-left", props: n }), e(h, { children: [p, e(f, { children: [s(t, { "aria-label": "top", onClick: d, children: s(c, { icon: "caret-up", iconClass: "fa-sharp", iconSize: "xxss" }) }), s(t, { "aria-label": "bottom", onClick: m, children: s(c, { icon: "caret-down", iconClass: "fa-sharp", iconSize: "xxss" }) })] })] }), s(i, { icon: "chevron-right", props: l })] });
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { useCallback as c } from "react";
+import { T as m, Y as u, C as i } from "../../../../../../styles-BlHspTrz.mjs";
+import { Icon as s } from "../../../../../icon/index.js";
+import { Button as t } from "../../../../utils/calendar-button/index.js";
+const v = ({
+  state: r,
+  prevButtonProps: n,
+  nextButtonProps: l,
+  title: d
+}) => {
+  const e = r.focusedDate, h = c(() => {
+    r.setFocusedDate(e.add({ years: 1 }));
+  }, [e, r]), p = c(() => {
+    r.setFocusedDate(e.subtract({ years: 1 }));
+  }, [e, r]);
+  return /* @__PURE__ */ a("div", { className: "header flex items-start", children: [
+    /* @__PURE__ */ o(t, { icon: "chevron-left", props: n }),
+    /* @__PURE__ */ a(m, { children: [
+      d,
+      /* @__PURE__ */ a(u, { children: [
+        /* @__PURE__ */ o(i, { "aria-label": "top", onClick: h, children: /* @__PURE__ */ o(s, { icon: "caret-up", iconClass: "fa-sharp", iconSize: "xxss" }) }),
+        /* @__PURE__ */ o(i, { "aria-label": "bottom", onClick: p, children: /* @__PURE__ */ o(
+          s,
+          {
+            icon: "caret-down",
+            iconClass: "fa-sharp",
+            iconSize: "xxss"
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ o(t, { icon: "chevron-right", props: l })
+  ] });
 };
 export {
-  k as Header
+  v as Header
 };

package/dist/components/inputs/fields/date/calendar/index.js

@@ -1,14 +1,29 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { createCalendar as m } from "@internationalized/date";
-import { useLocale as p, useCalendar as d } from "react-aria";
-import { useCalendarState as c } from "react-stately";
-import { CalendarGrid as u } from "./grid/index.js";
-import { Header as f } from "./header/index.js";
-import { F as C } from "../../../../../styles-CI-I6joH.mjs";
-import { Button as x } from "../../../../button/index.js";
-const G = ({ onClose: e, props: t }) => {
-  const { locale: o } = p(), a = c({ ...t, createCalendar: m, locale: o }), { prevButtonProps: s, nextButtonProps: n, title: l } = d(t, a);
-  return i("div", { className: "calendar", children: [r(f, { nextButtonProps: n, prevButtonProps: s, state: a, title: l }), r(u, { state: a }), r(C, { children: r(x, { onClick: e, variant: "ghost", children: "Cancel" }) })] });
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { createCalendar as s } from "@internationalized/date";
+import { useLocale as c, useCalendar as d } from "react-aria";
+import { useCalendarState as p } from "react-stately";
+import { CalendarGrid as f } from "./grid/index.js";
+import { Header as C } from "./header/index.js";
+import { F as u } from "../../../../../styles-BlHspTrz.mjs";
+import { Button as h } from "../../../../button/index.js";
+const G = ({
+  onClose: e,
+  props: t
+}) => {
+  const { locale: a } = c(), o = p({ ...t, createCalendar: s, locale: a }), { prevButtonProps: n, nextButtonProps: i, title: m } = d(t, o);
+  return /* @__PURE__ */ l("div", { className: "calendar", children: [
+    /* @__PURE__ */ r(
+      C,
+      {
+        nextButtonProps: i,
+        prevButtonProps: n,
+        state: o,
+        title: m
+      }
+    ),
+    /* @__PURE__ */ r(f, { state: o }),
+    /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(h, { onClick: e, variant: "ghost", children: "Cancel" }) })
+  ] });
 };
 export {
   G as Calendar

package/dist/components/inputs/fields/date/index.js

@@ -1,18 +1,68 @@
-import { jsxs as R, jsx as e } from "react/jsx-runtime";
-import { parseDate as h } from "@internationalized/date";
-import n from "lodash";
-import { forwardRef as k, useRef as v } from "react";
-import { useDatePicker as C } from "react-aria";
-import { useDatePickerState as q } from "react-stately";
-import { Calendar as y } from "./calendar/index.js";
-import { OutlineContainer as E } from "../../outline-container/index.js";
-import { DateSelector as O } from "../../utils/date-selector/index.js";
-import { Dialog as S } from "../../utils/dialog/index.js";
-import { Popover as j } from "../../utils/popover/index.js";
-const K = k(function({ disabled: s = !1, error: i, required: f, label: p, name: t, tooltip: u, value: r, ...l }, d) {
-  const a = v(null), o = q(l), { close: c } = o, { groupProps: P, fieldProps: m, buttonProps: g, dialogProps: b, calendarProps: D } = C({ ...l, "aria-label": p ?? t }, o, a);
-  return R(E, { error: i, htmlFor: t, label: p, required: f, tooltip: u, children: [e(O, { buttonProps: g, datePickerRef: a, disabled: s, error: i, fieldProps: n.isNil(r) || n.isEmpty(r) || r === "-" ? m : { ...m, value: h(r.replace(/\//gu, "-")) }, groupProps: P, inputRef: d, name: t }), o.isOpen && !s ? e(j, { offset: 8, placement: "bottom start", state: o, triggerRef: a, children: e(S, { ...b, children: e(y, { onClose: c, props: { ...D } }) }) }) : null] });
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { parseDate as k } from "@internationalized/date";
+import a from "lodash";
+import { forwardRef as x, useRef as C } from "react";
+import { useDatePicker as j } from "react-aria";
+import { useDatePickerState as I } from "react-stately";
+import { Calendar as O } from "./calendar/index.js";
+import { OutlineContainer as S } from "../../outline-container/index.js";
+import { DateSelector as b } from "../../utils/date-selector/index.js";
+import { Dialog as w } from "../../utils/dialog/index.js";
+import { Popover as y } from "../../utils/popover/index.js";
+const L = x(function({
+  disabled: p = !1,
+  error: s,
+  required: l,
+  label: m,
+  name: e,
+  tooltip: c,
+  value: o,
+  ...f
+}, u) {
+  const i = C(null), r = I(f), { close: P } = r, { groupProps: d, fieldProps: n, buttonProps: D, dialogProps: g, calendarProps: R } = j(
+    { ...f, "aria-label": m ?? e },
+    r,
+    i
+  );
+  return /* @__PURE__ */ h(
+    S,
+    {
+      error: s,
+      htmlFor: e,
+      label: m,
+      required: l,
+      tooltip: c,
+      children: [
+        /* @__PURE__ */ t(
+          b,
+          {
+            buttonProps: D,
+            datePickerRef: i,
+            disabled: p,
+            error: s,
+            fieldProps: a.isNil(o) || a.isEmpty(o) || o === "-" ? n : {
+              ...n,
+              value: k(o.replace(/\//gu, "-"))
+            },
+            groupProps: d,
+            inputRef: u,
+            name: e
+          }
+        ),
+        r.isOpen && !p ? /* @__PURE__ */ t(
+          y,
+          {
+            offset: 8,
+            placement: "bottom start",
+            state: r,
+            triggerRef: i,
+            children: /* @__PURE__ */ t(w, { ...g, children: /* @__PURE__ */ t(O, { onClose: P, props: { ...R } }) })
+          }
+        ) : null
+      ]
+    }
+  );
 });
 export {
-  K as InputDate
+  L as InputDate
 };

package/dist/components/inputs/fields/date-range/calendar/index.js

@@ -1,15 +1,34 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { createCalendar as p } from "@internationalized/date";
-import { useRef as c } from "react";
-import { useLocale as d, useRangeCalendar as f } from "react-aria";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { createCalendar as c } from "@internationalized/date";
+import { useRef as d } from "react";
+import { useLocale as f, useRangeCalendar as p } from "react-aria";
 import { useRangeCalendarState as u } from "react-stately";
 import { CalendarGrid as C } from "../../date/calendar/grid/index.js";
-import { Header as x } from "../../date/calendar/header/index.js";
-import { F as h } from "../../../../../styles-CI-I6joH.mjs";
-import { Button as v } from "../../../../button/index.js";
-const L = ({ onClose: o, props: e }) => {
-  const { locale: s } = d(), t = c(null), a = u({ ...e, createCalendar: p, locale: s }), { prevButtonProps: n, nextButtonProps: l, title: m } = f(e, a, t);
-  return i("div", { className: "calendar-range", ref: t, children: [r(x, { nextButtonProps: l, prevButtonProps: n, state: a, title: m }), r(C, { state: a }), r(h, { children: r(v, { onClick: o, variant: "ghost", children: "Cancel" }) })] });
+import { Header as g } from "../../date/calendar/header/index.js";
+import { F as h } from "../../../../../styles-BlHspTrz.mjs";
+import { Button as x } from "../../../../button/index.js";
+const L = ({
+  onClose: a,
+  props: o
+}) => {
+  const { locale: n } = f(), t = d(null), e = u({ ...o, createCalendar: c, locale: n }), { prevButtonProps: l, nextButtonProps: m, title: i } = p(
+    o,
+    e,
+    t
+  );
+  return /* @__PURE__ */ s("div", { className: "calendar-range", ref: t, children: [
+    /* @__PURE__ */ r(
+      g,
+      {
+        nextButtonProps: m,
+        prevButtonProps: l,
+        state: e,
+        title: i
+      }
+    ),
+    /* @__PURE__ */ r(C, { state: e }),
+    /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(x, { onClick: a, variant: "ghost", children: "Cancel" }) })
+  ] });
 };
 export {
   L as Calendar

package/dist/components/inputs/fields/date-range/index.js

@@ -1,28 +1,108 @@
-import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import { forwardRef as w, useRef as x } from "react";
-import { useDateRangePicker as q } from "react-aria";
-import { useDateRangePickerState as y } from "react-stately";
-import { Calendar as D } from "./calendar/index.js";
-import { styled as C } from "styled-components";
-import { OutlineContainer as F } from "../../outline-container/index.js";
-import { DateSelector as c } from "../../utils/date-selector/index.js";
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { forwardRef as k, useRef as w } from "react";
+import { useDateRangePicker as y } from "react-aria";
+import { useDateRangePickerState as S } from "react-stately";
+import { Calendar as C } from "./calendar/index.js";
+import { styled as F } from "styled-components";
+import { OutlineContainer as O } from "../../outline-container/index.js";
+import { DateSelector as g } from "../../utils/date-selector/index.js";
 import { Dialog as j } from "../../utils/dialog/index.js";
-import { Popover as S } from "../../utils/popover/index.js";
-const O = C.div`
-  ${({ theme: e, $disabled: r, $show: n }) => `
-    border-color: ${n ? e.palette.error[500] : e.palette.gray[300]};
+import { Popover as q } from "../../utils/popover/index.js";
+const I = F.div`
+  ${({ theme: t, $disabled: e, $show: a }) => `
+    border-color: ${a ? t.palette.error[500] : t.palette.gray[300]};
     display: flex;
-    gap: ${e.spacing[0.25]};
+    gap: ${t.spacing[0.25]};
     width: 100%;
 
     ~ div {
-      background: ${r ? e.palette.gray[200] : e.palette.white};
+      background: ${e ? t.palette.gray[200] : t.palette.white};
     }
   `}
-`, M = w(function({ disabled: e = !1, error: r, label: n, name: a, required: P, tooltip: g, ...p }, m) {
-  const o = x(null), l = y(p), { close: h } = l, $ = `min${a}`, v = `max${a}`, { groupProps: u, startFieldProps: s, endFieldProps: i, buttonProps: f, dialogProps: R, calendarProps: k } = q(p, l, o);
-  return b(F, { error: r, htmlFor: a, label: n, required: P, tooltip: g, children: [b(O, { $disabled: e, $show: r !== void 0, ref: o, children: [t(c, { buttonProps: f, datePickerRef: o, disabled: e, error: r, fieldProps: { ...s, "aria-label": `${s["aria-label"]} ${a}`, validate: (d) => i.value && d > i.value ? "Start date must be less than or equal to end date" : null }, groupProps: u, inputRef: m, name: $ }), t(c, { buttonProps: f, datePickerRef: o, disabled: e, error: r, fieldProps: { ...i, "aria-label": `${i["aria-label"]} ${a}`, validate: (d) => s.value && d < s.value ? "End date must be greater than or equal to start date" : null }, groupProps: u, inputRef: m, name: v })] }), l.isOpen && !e ? t(S, { offset: 8, placement: "bottom start", state: l, triggerRef: o, children: t(j, { ...R, children: t(D, { onClose: h, props: { ...k } }) }) }) : null] });
+`, N = k(function({
+  disabled: e = !1,
+  error: a,
+  label: P,
+  name: o,
+  required: $,
+  tooltip: R,
+  ...d
+}, u) {
+  const r = w(null), n = S(d), { close: v } = n, b = `min${o}`, D = `max${o}`, {
+    groupProps: f,
+    startFieldProps: i,
+    endFieldProps: s,
+    buttonProps: c,
+    dialogProps: h,
+    calendarProps: x
+  } = y(d, n, r);
+  return /* @__PURE__ */ m(
+    O,
+    {
+      error: a,
+      htmlFor: o,
+      label: P,
+      required: $,
+      tooltip: R,
+      children: [
+        /* @__PURE__ */ m(
+          I,
+          {
+            $disabled: e,
+            $show: a !== void 0,
+            ref: r,
+            children: [
+              /* @__PURE__ */ l(
+                g,
+                {
+                  buttonProps: c,
+                  datePickerRef: r,
+                  disabled: e,
+                  error: a,
+                  fieldProps: {
+                    ...i,
+                    "aria-label": `${i["aria-label"]} ${o}`,
+                    validate: (p) => s.value && p > s.value ? "Start date must be less than or equal to end date" : null
+                  },
+                  groupProps: f,
+                  inputRef: u,
+                  name: b
+                }
+              ),
+              /* @__PURE__ */ l(
+                g,
+                {
+                  buttonProps: c,
+                  datePickerRef: r,
+                  disabled: e,
+                  error: a,
+                  fieldProps: {
+                    ...s,
+                    "aria-label": `${s["aria-label"]} ${o}`,
+                    validate: (p) => i.value && p < i.value ? "End date must be greater than or equal to start date" : null
+                  },
+                  groupProps: f,
+                  inputRef: u,
+                  name: D
+                }
+              )
+            ]
+          }
+        ),
+        n.isOpen && !e ? /* @__PURE__ */ l(
+          q,
+          {
+            offset: 8,
+            placement: "bottom start",
+            state: n,
+            triggerRef: r,
+            children: /* @__PURE__ */ l(j, { ...h, children: /* @__PURE__ */ l(C, { onClose: v, props: { ...x } }) })
+          }
+        ) : null
+      ]
+    }
+  );
 });
 export {
-  M as InputDateRange
+  N as InputDateRange
 };