impact-nova 1.7.31 → 1.7.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/ui/date-picker/date-range-picker.js +182 -165
  2. package/dist/components/ui/date-picker/month-range-picker.js +221 -166
  3. package/dist/components/ui/horizontal-scroller/horizontal-scroller.js +98 -93
  4. package/dist/components/ui/types/horizontal-scroller.types.d.ts +4 -0
  5. package/dist/impact-nova.css +1 -1
  6. package/package.json +1 -1
package/dist/components/ui/date-picker/month-range-picker.js CHANGED
@@ -1,237 +1,292 @@
1
- import { jsxs as c, jsx as o } from "react/jsx-runtime";
2
- import * as d from "react";
3
- import { X as pt } from "lucide-react";
4
- import { CalendarMonth as ht, Info as O } from "../../../icons/index.js";
5
- import { isValid as P, parse as v } from "date-fns";
6
- import { cn as l, padValidDateString as T, maskDate as H } from "../../../lib/utils.js";
7
- import { Popover as ut, PopoverTrigger as xt, PopoverContent as gt } from "../popover.js";
8
- import { Calendar as Mt } from "../calendar.js";
9
- import { Tooltip as X, TooltipTrigger as q, TooltipContent as G } from "../tooltip.js";
10
- import { useImpactNovaI18n as Yt } from "../../../i18n/ImpactNovaI18nContext.js";
11
- const r = (t, f = "MM/YYYY") => {
12
- const V = (t.month + 1).toString().padStart(2, "0");
13
- return f === "YYYY/MM" ? `${t.year}/${V}` : `${V}/${t.year}`;
14
- }, wt = d.forwardRef(
1
+ import { jsxs as u, jsx as d } from "react/jsx-runtime";
2
+ import * as p from "react";
3
+ import { X as ht } from "lucide-react";
4
+ import { CalendarMonth as gt, Info as G } from "../../../icons/index.js";
5
+ import { isValid as x, parse as M } from "date-fns";
6
+ import { cn as h, padValidDateString as R, maskDate as J } from "../../../lib/utils.js";
7
+ import { Popover as xt, PopoverTrigger as Mt, PopoverContent as Yt } from "../popover.js";
8
+ import { Calendar as yt } from "../calendar.js";
9
+ import { Tooltip as L, TooltipTrigger as Q, TooltipContent as U } from "../tooltip.js";
10
+ import { useImpactNovaI18n as bt } from "../../../i18n/ImpactNovaI18nContext.js";
11
+ const m = (e, i = "MM/YYYY") => {
12
+ const A = (e.month + 1).toString().padStart(2, "0");
13
+ return i === "YYYY/MM" ? `${e.year}/${A}` : `${A}/${e.year}`;
14
+ }, wt = p.forwardRef(
15
15
  ({
16
- value: t,
17
- onChange: f,
18
- placeholder: V,
19
- minDate: C,
20
- maxDate: J,
21
- startMonth: K,
22
- endMonth: L,
23
- showFooter: x = !0,
24
- disabled: k,
25
- className: Q,
26
- isError: g,
27
- size: E,
28
- label: $,
29
- helperText: I,
30
- helperTextPosition: A = "absolute",
31
- required: U,
32
- prefix: bt,
33
- prefixClick: kt,
34
- displayFormat: n = "MM/YYYY",
35
- ...W
36
- }, Z) => {
37
- const { t: w } = Yt();
38
- V ?? w("datePicker.selectMonthRange");
39
- const j = d.useRef(null), _ = d.useRef(null), m = d.useMemo(
40
- () => n === "YYYY/MM" ? "yyyy/MM" : "MM/yyyy",
41
- [n]
16
+ value: e,
17
+ onChange: i,
18
+ placeholder: A,
19
+ minDate: I,
20
+ maxDate: W,
21
+ startMonth: Z,
22
+ endMonth: _,
23
+ showFooter: g = !0,
24
+ disabled: P,
25
+ className: F,
26
+ isError: D,
27
+ size: B,
28
+ label: O,
29
+ helperText: E,
30
+ helperTextPosition: K = "absolute",
31
+ required: tt,
32
+ prefix: kt,
33
+ prefixClick: Dt,
34
+ displayFormat: a = "MM/YYYY",
35
+ ...et
36
+ }, nt) => {
37
+ const { t: Y } = bt();
38
+ A ?? Y("datePicker.selectMonthRange");
39
+ const T = p.useRef(null), ot = p.useRef(null), c = p.useMemo(
40
+ () => a === "YYYY/MM" ? "yyyy/MM" : "MM/yyyy",
41
+ [a]
42
42
  );
43
- d.useImperativeHandle(Z, () => j.current);
44
- const [i, R] = d.useState(!1), [N, p] = d.useState(t), [S, M] = d.useState(t?.from ? r(t.from, n) : ""), [y, Y] = d.useState(t?.to ? r(t.to, n) : ""), [F, D] = d.useState(() => t?.from ? new Date(t.from.year, t.from.month, 1) : C || /* @__PURE__ */ new Date());
45
- d.useEffect(() => {
46
- i || (M(t?.from ? r(t.from, n) : ""), Y(t?.to ? r(t.to, n) : ""), p(t));
47
- }, [i, t, n]), d.useEffect(() => {
48
- i && (p(t), M(t?.from ? r(t.from, n) : ""), Y(t?.to ? r(t.to, n) : ""), D(t?.from ? new Date(t.from.year, t.from.month, 1) : C || /* @__PURE__ */ new Date()));
49
- }, [i, t, n, C]);
50
- const tt = (e) => {
51
- p(e), e?.from && M(r(e.from, n)), e?.to && Y(r(e.to, n)), !x && e?.from && e?.to && (e.from.month !== e.to.month || e.from.year !== e.to.year) && (f?.(e), R(!1));
52
- }, et = (e) => {
53
- f?.(e !== void 0 ? e : N), R(!1);
54
- }, nt = () => {
55
- p(t), M(t?.from ? r(t.from, n) : ""), Y(t?.to ? r(t.to, n) : ""), R(!1);
43
+ p.useImperativeHandle(nt, () => T.current);
44
+ const [s, y] = p.useState(!1), V = p.useRef(!1), [v, b] = p.useState(e), [w, S] = p.useState(e?.from ? m(e.from, a) : ""), [k, N] = p.useState(e?.to ? m(e.to, a) : ""), [rt, j] = p.useState(() => e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date());
45
+ p.useEffect(() => {
46
+ s || (S(e?.from ? m(e.from, a) : ""), N(e?.to ? m(e.to, a) : ""), b(e));
47
+ }, [s, e, a]), p.useEffect(() => {
48
+ s && (b(e), S(e?.from ? m(e.from, a) : ""), N(e?.to ? m(e.to, a) : ""), j(e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date()));
49
+ }, [s, e, a, I]);
50
+ const at = (t) => {
51
+ b(t), t?.from && S(m(t.from, a)), t?.to && N(m(t.to, a)), !g && t?.from && t?.to && (t.from.month !== t.to.month || t.from.year !== t.to.year) && (i?.(t), y(!1));
52
+ }, st = (t) => {
53
+ i?.(t !== void 0 ? t : v), y(!1);
54
+ }, $ = () => {
55
+ b(e), S(e?.from ? m(e.from, a) : ""), N(e?.to ? m(e.to, a) : ""), y(!1);
56
56
  }, z = () => {
57
- p(void 0), M(""), Y(""), f?.(void 0), x || R(!1);
58
- }, ot = (e) => {
59
- const u = e.target.value, s = H(u, m, S);
60
- if (M(s), s === "") {
61
- const h = { from: void 0, to: N?.to };
62
- p(h), x || f?.(h);
57
+ b(void 0), S(""), N(""), i?.(void 0), g || y(!1);
58
+ }, it = (t) => {
59
+ const f = t.target.value, r = J(f, c, w);
60
+ if (S(r), r === "") {
61
+ const o = { from: void 0, to: v?.to };
62
+ b(o), g || i?.(o);
63
63
  return;
64
64
  }
65
- const a = v(s, m, /* @__PURE__ */ new Date());
66
- if (P(a) && s.length === 7) {
67
- const b = { from: { month: a.getMonth(), year: a.getFullYear() }, to: N?.to };
68
- p(b), D(a), x || f?.(b);
65
+ const n = M(r, c, /* @__PURE__ */ new Date());
66
+ if (x(n) && r.length === 7) {
67
+ const l = { from: { month: n.getMonth(), year: n.getFullYear() }, to: v?.to };
68
+ b(l), j(n), g || i?.(l);
69
69
  }
70
- }, rt = (e) => {
71
- const u = e.target.value, s = H(u, m, y);
72
- if (Y(s), s === "") {
73
- const h = { from: N?.from, to: void 0 };
74
- p(h), x || f?.(h);
70
+ }, ct = (t) => {
71
+ const f = t.target.value, r = J(f, c, k);
72
+ if (N(r), r === "") {
73
+ const o = { from: v?.from, to: void 0 };
74
+ b(o), g || i?.(o);
75
75
  return;
76
76
  }
77
- const a = v(s, m, /* @__PURE__ */ new Date());
78
- if (P(a) && s.length === 7) {
79
- const h = { month: a.getMonth(), year: a.getFullYear() }, b = { from: N?.from, to: h };
80
- p(b), D(a), x || f?.(b);
77
+ const n = M(r, c, /* @__PURE__ */ new Date());
78
+ if (x(n) && r.length === 7) {
79
+ const o = { month: n.getMonth(), year: n.getFullYear() }, l = { from: v?.from, to: o };
80
+ b(l), j(n), g || i?.(l);
81
81
  }
82
- }, B = () => {
83
- if (i) return;
84
- const e = T(S, m), u = T(y, m), s = v(e, m, /* @__PURE__ */ new Date()), a = v(u, m, /* @__PURE__ */ new Date()), h = P(s) && e.length === 7, b = P(a) && u.length === 7;
85
- !h || !b ? (M(t?.from ? r(t.from, n) : ""), Y(t?.to ? r(t.to, n) : ""), p(t)) : (M(e), Y(u), x || f?.({
86
- from: { month: s.getMonth(), year: s.getFullYear() },
87
- to: { month: a.getMonth(), year: a.getFullYear() }
88
- }));
89
- }, st = t?.from ? r(t.from, n) : "", at = t?.to ? r(t.to, n) : "", ct = S !== st, dt = y !== at, it = S.length === 7 && !P(v(S, m, /* @__PURE__ */ new Date())), lt = y.length === 7 && !P(v(y, m, /* @__PURE__ */ new Date())), ft = w("datePicker.startMonth"), mt = w("datePicker.endMonth");
90
- return /* @__PURE__ */ c("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "month-range-picker", "data-disabled": k || void 0, children: [
91
- /* @__PURE__ */ c("div", { className: "flex flex-col gap-[6px]", children: [
92
- $ && /* @__PURE__ */ c(
82
+ }, H = () => {
83
+ if (s) return;
84
+ const t = R(w, c), f = R(k, c), r = M(t, c, /* @__PURE__ */ new Date()), n = M(f, c, /* @__PURE__ */ new Date()), o = x(r) && t.length === 7, l = x(n) && f.length === 7;
85
+ w && !o ? S(e?.from ? m(e.from, a) : "") : o && S(t), k && !l ? N(e?.to ? m(e.to, a) : "") : l && N(f), o && l && !g ? i?.({
86
+ from: { month: r.getMonth(), year: r.getFullYear() },
87
+ to: { month: n.getMonth(), year: n.getFullYear() }
88
+ }) : o && !g ? i?.({
89
+ from: { month: r.getMonth(), year: r.getFullYear() },
90
+ to: e?.to
91
+ }) : l && !g && i?.({
92
+ from: e?.from,
93
+ to: { month: n.getMonth(), year: n.getFullYear() }
94
+ });
95
+ }, dt = e?.from ? m(e.from, a) : "", lt = e?.to ? m(e.to, a) : "", ft = w !== dt, mt = k !== lt, pt = w.length === 7 && !x(M(w, c, /* @__PURE__ */ new Date())), ut = k.length === 7 && !x(M(k, c, /* @__PURE__ */ new Date())), X = Y("datePicker.startMonth"), q = Y("datePicker.endMonth");
96
+ return /* @__PURE__ */ u("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "month-range-picker", "data-disabled": P || void 0, children: [
97
+ /* @__PURE__ */ u("div", { className: "flex flex-col gap-[6px]", children: [
98
+ O && /* @__PURE__ */ u(
93
99
  "label",
94
100
  {
95
- className: l(
101
+ className: h(
96
102
  "text-xs font-medium leading-[18px] text-content-tertiary",
97
- k && "opacity-70",
98
- g && "text-destructive"
103
+ P && "opacity-70",
104
+ D && "text-destructive"
99
105
  ),
100
106
  children: [
101
- $,
107
+ O,
102
108
  " ",
103
- U && /* @__PURE__ */ o("span", { className: "text-destructive", children: "*" })
109
+ tt && /* @__PURE__ */ d("span", { className: "text-destructive", children: "*" })
104
110
  ]
105
111
  }
106
112
  ),
107
- /* @__PURE__ */ c(
113
+ /* @__PURE__ */ u(
108
114
  "div",
109
115
  {
110
- className: l(
116
+ className: h(
111
117
  "w-full",
112
- I && A === "absolute" && "relative"
118
+ E && K === "absolute" && "relative"
113
119
  ),
114
120
  children: [
115
- /* @__PURE__ */ c(ut, { open: i, onOpenChange: R, children: [
116
- /* @__PURE__ */ o(xt, { asChild: !0, children: /* @__PURE__ */ c(
121
+ /* @__PURE__ */ u(xt, { open: s, onOpenChange: y, children: [
122
+ /* @__PURE__ */ d(Mt, { asChild: !0, children: /* @__PURE__ */ u(
117
123
  "div",
118
124
  {
119
- "data-state": i ? "open" : "closed",
120
- className: l(
125
+ "data-state": s ? "open" : "closed",
126
+ className: h(
121
127
  "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
122
- g ? "border-destructive hover:border-destructive" : "border-field",
123
- E === "sm" ? "h-6" : E === "md" ? "h-[28px]" : "h-8",
124
- k && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
128
+ D ? "border-destructive hover:border-destructive" : "border-field",
129
+ B === "sm" ? "h-6" : B === "md" ? "h-[28px]" : "h-8",
130
+ P && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
125
131
  "cursor-pointer",
126
- Q
132
+ F
127
133
  ),
128
134
  children: [
129
- /* @__PURE__ */ c("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
130
- /* @__PURE__ */ o(
135
+ /* @__PURE__ */ u("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
136
+ /* @__PURE__ */ d(
131
137
  "input",
132
138
  {
133
- ref: j,
139
+ ref: T,
134
140
  type: "text",
135
- value: S,
136
- onChange: ot,
137
- onBlur: B,
138
- onClick: (e) => i && e.stopPropagation(),
139
- placeholder: i ? n === "YYYY/MM" ? "YYYY/MM" : w("datePicker.monthYearFormat") : ft,
140
- disabled: !!k,
141
+ value: w,
142
+ onChange: it,
143
+ onBlur: H,
144
+ onClick: (t) => s && t.stopPropagation(),
145
+ onKeyDown: (t) => {
146
+ if (t.key === "Enter" && !s) {
147
+ t.preventDefault();
148
+ const f = R(w, c), r = R(k, c), n = M(f, c, /* @__PURE__ */ new Date()), o = M(r, c, /* @__PURE__ */ new Date()), l = x(n) && f.length === 7, C = x(o) && r.length === 7;
149
+ l && C ? i?.({
150
+ from: { month: n.getMonth(), year: n.getFullYear() },
151
+ to: { month: o.getMonth(), year: o.getFullYear() }
152
+ }) : l ? i?.({
153
+ from: { month: n.getMonth(), year: n.getFullYear() },
154
+ to: e?.to
155
+ }) : C && i?.({
156
+ from: e?.from,
157
+ to: { month: o.getMonth(), year: o.getFullYear() }
158
+ });
159
+ }
160
+ t.key === "ArrowDown" && !s && (t.preventDefault(), V.current = !0, y(!0)), t.key === "Escape" && s && (t.preventDefault(), $());
161
+ },
162
+ placeholder: s ? a === "YYYY/MM" ? "YYYY/MM" : Y("datePicker.monthYearFormat") : X,
163
+ disabled: !!P,
164
+ "aria-label": X,
141
165
  "data-field": "start",
142
- className: l(
166
+ className: h(
143
167
  "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
144
- it ? "text-destructive" : ct ? "text-content-muted" : ""
168
+ pt ? "text-destructive" : ft ? "text-content-muted" : ""
145
169
  ),
146
- ...W
170
+ ...et
147
171
  }
148
172
  ),
149
- /* @__PURE__ */ o(
173
+ /* @__PURE__ */ d(
150
174
  "input",
151
175
  {
152
- ref: _,
176
+ ref: ot,
153
177
  type: "text",
154
- value: y,
155
- onChange: rt,
156
- onBlur: B,
157
- onClick: (e) => i && e.stopPropagation(),
158
- placeholder: i ? n === "YYYY/MM" ? "YYYY/MM" : w("datePicker.monthYearFormat") : mt,
159
- disabled: !!k,
178
+ value: k,
179
+ onChange: ct,
180
+ onBlur: H,
181
+ onClick: (t) => s && t.stopPropagation(),
182
+ onKeyDown: (t) => {
183
+ if (t.key === "Enter" && !s) {
184
+ t.preventDefault();
185
+ const f = R(w, c), r = R(k, c), n = M(f, c, /* @__PURE__ */ new Date()), o = M(r, c, /* @__PURE__ */ new Date()), l = x(n) && f.length === 7, C = x(o) && r.length === 7;
186
+ l && C ? i?.({
187
+ from: { month: n.getMonth(), year: n.getFullYear() },
188
+ to: { month: o.getMonth(), year: o.getFullYear() }
189
+ }) : l ? i?.({
190
+ from: { month: n.getMonth(), year: n.getFullYear() },
191
+ to: e?.to
192
+ }) : C && i?.({
193
+ from: e?.from,
194
+ to: { month: o.getMonth(), year: o.getFullYear() }
195
+ });
196
+ }
197
+ t.key === "ArrowDown" && !s && (t.preventDefault(), V.current = !0, y(!0)), t.key === "Escape" && s && (t.preventDefault(), $());
198
+ },
199
+ placeholder: s ? a === "YYYY/MM" ? "YYYY/MM" : Y("datePicker.monthYearFormat") : q,
200
+ disabled: !!P,
201
+ "aria-label": q,
160
202
  "data-field": "end",
161
- className: l(
203
+ className: h(
162
204
  "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
163
- lt ? "text-destructive" : dt ? "text-content-muted" : ""
205
+ ut ? "text-destructive" : mt ? "text-content-muted" : ""
164
206
  )
165
207
  }
166
208
  )
167
209
  ] }),
168
- /* @__PURE__ */ c("div", { className: "flex items-center gap-1 shrink-0", children: [
169
- t?.from && !k && /* @__PURE__ */ c(X, { children: [
170
- /* @__PURE__ */ o(q, { asChild: !0, children: /* @__PURE__ */ o(
171
- pt,
210
+ /* @__PURE__ */ u("div", { className: "flex items-center gap-1 shrink-0", children: [
211
+ e?.from && !P && /* @__PURE__ */ u(L, { children: [
212
+ /* @__PURE__ */ d(Q, { asChild: !0, children: /* @__PURE__ */ d(
213
+ "button",
172
214
  {
173
- className: "h-4 w-4 cursor-pointer hover:text-content text-content-muted",
174
- onClick: (e) => {
175
- e.stopPropagation(), z();
176
- }
215
+ type: "button",
216
+ tabIndex: 0,
217
+ "aria-label": Y("calendar.clear"),
218
+ onClick: (t) => {
219
+ t.stopPropagation(), z();
220
+ },
221
+ onKeyDown: (t) => {
222
+ (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), z());
223
+ },
224
+ className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
225
+ children: /* @__PURE__ */ d(ht, { className: "h-4 w-4 hover:text-content text-content-muted" })
177
226
  }
178
227
  ) }),
179
- /* @__PURE__ */ o(G, { variant: "tertiary", side: "top", children: w("calendar.clear") })
228
+ /* @__PURE__ */ d(U, { variant: "tertiary", side: "top", children: Y("calendar.clear") })
180
229
  ] }),
181
- /* @__PURE__ */ c(X, { children: [
182
- /* @__PURE__ */ o(q, { asChild: !0, children: /* @__PURE__ */ o(ht, { className: "h-4 w-4 text-secondary-foreground" }) }),
183
- /* @__PURE__ */ o(G, { variant: "tertiary", side: "top", children: w("datePicker.selectMonthRange") })
230
+ /* @__PURE__ */ u(L, { children: [
231
+ /* @__PURE__ */ d(Q, { asChild: !0, children: /* @__PURE__ */ d("button", { type: "button", tabIndex: 0, "aria-label": Y("datePicker.selectMonthRange"), onClick: (t) => {
232
+ t.stopPropagation(), y(!s);
233
+ }, onKeyDown: (t) => {
234
+ (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), V.current = !0, y(!s));
235
+ }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ d(gt, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
236
+ /* @__PURE__ */ d(U, { variant: "tertiary", side: "top", children: Y("datePicker.selectMonthRange") })
184
237
  ] })
185
238
  ] })
186
239
  ]
187
240
  }
188
241
  ) }),
189
- /* @__PURE__ */ o(
190
- gt,
242
+ /* @__PURE__ */ d(
243
+ Yt,
191
244
  {
192
245
  className: "w-auto p-0",
193
246
  align: "start",
194
- onOpenAutoFocus: (e) => e.preventDefault(),
195
- children: /* @__PURE__ */ o(
196
- Mt,
247
+ onOpenAutoFocus: (t) => {
248
+ V.current || t.preventDefault(), V.current = !1;
249
+ },
250
+ children: /* @__PURE__ */ d(
251
+ yt,
197
252
  {
198
253
  pickerType: "month",
199
254
  monthMode: "range",
200
- selectedMonths: N,
201
- onMonthSelect: tt,
202
- month: F,
203
- onMonthChange: D,
204
- disabled: { before: C, after: J },
205
- startMonth: K,
206
- endMonth: L,
207
- showFooter: x,
208
- onApply: et,
209
- onCancel: nt,
255
+ selectedMonths: v,
256
+ onMonthSelect: at,
257
+ month: rt,
258
+ onMonthChange: j,
259
+ disabled: { before: I, after: W },
260
+ startMonth: Z,
261
+ endMonth: _,
262
+ showFooter: g,
263
+ onApply: st,
264
+ onCancel: $,
210
265
  onClear: z
211
266
  }
212
267
  )
213
268
  }
214
269
  )
215
270
  ] }),
216
- I && A === "absolute" && /* @__PURE__ */ c("div", { className: l("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", g && "text-destructive"), children: [
217
- /* @__PURE__ */ o(
218
- O,
271
+ E && K === "absolute" && /* @__PURE__ */ u("div", { className: h("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", D && "text-destructive"), children: [
272
+ /* @__PURE__ */ d(
273
+ G,
219
274
  {
220
275
  size: "xs",
221
- className: l(
276
+ className: h(
222
277
  "shrink-0",
223
- g ? "text-destructive" : "text-content-muted"
278
+ D ? "text-destructive" : "text-content-muted"
224
279
  )
225
280
  }
226
281
  ),
227
- /* @__PURE__ */ o(
282
+ /* @__PURE__ */ d(
228
283
  "p",
229
284
  {
230
- className: l(
285
+ className: h(
231
286
  "min-w-0 text-[12px] font-medium leading-[18px] text-navigation-muted",
232
- g && "text-destructive"
287
+ D && "text-destructive"
233
288
  ),
234
- children: I
289
+ children: E
235
290
  }
236
291
  )
237
292
  ] })
@@ -239,25 +294,25 @@ const r = (t, f = "MM/YYYY") => {
239
294
  }
240
295
  )
241
296
  ] }),
242
- I && A === "flow" && /* @__PURE__ */ c("div", { className: l("flex items-center gap-[6px]", g && "text-destructive"), children: [
243
- /* @__PURE__ */ o(
244
- O,
297
+ E && K === "flow" && /* @__PURE__ */ u("div", { className: h("flex items-center gap-[6px]", D && "text-destructive"), children: [
298
+ /* @__PURE__ */ d(
299
+ G,
245
300
  {
246
301
  size: "xs",
247
- className: l(
302
+ className: h(
248
303
  "shrink-0",
249
- g ? "text-destructive" : "text-content-muted"
304
+ D ? "text-destructive" : "text-content-muted"
250
305
  )
251
306
  }
252
307
  ),
253
- /* @__PURE__ */ o(
308
+ /* @__PURE__ */ d(
254
309
  "p",
255
310
  {
256
- className: l(
311
+ className: h(
257
312
  "text-[12px] font-medium leading-[18px] text-navigation-muted",
258
- g && "text-destructive"
313
+ D && "text-destructive"
259
314
  ),
260
- children: I
315
+ children: E
261
316
  }
262
317
  )
263
318
  ] })