@shlinkio/shlink-frontend-kit 0.9.12 → 1.0.0

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.
package/dist/index.js CHANGED
@@ -1,275 +1,1680 @@
1
- import { jsx as n, jsxs as i, Fragment as f } from "react/jsx-runtime";
2
- import { faCircleNotch as S, faSearch as R, faEllipsisV as D, faSortAmountUp as P, faSortAmountDown as E } from "@fortawesome/free-solid-svg-icons";
3
- import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
4
- import { clsx as u } from "clsx";
5
- import { Card as w, CardHeader as H, CardBody as M, Dropdown as v, DropdownToggle as k, DropdownMenu as C, NavItem as $, NavLink as F, Nav as G, DropdownItem as b } from "reactstrap";
6
- import { useId as O, useState as x, useRef as j, useCallback as U, useMemo as q, Children as Q, isValidElement as V, useEffect as Y } from "react";
7
- import { u as L, d as W } from "./ordering-pAYMfJPl.js";
8
- import { e as He, i as Me, o as $e, s as Fe, f as Ge, a as je, g as Ue, b as qe, c as Qe } from "./ordering-pAYMfJPl.js";
9
- import { useNavigate as z, useLocation as J, NavLink as X } from "react-router";
10
- const ue = ({ className: r, children: e, loading: s = !1, type: t = "default", fullWidth: a = !1 }) => /* @__PURE__ */ n(
11
- w,
1
+ import { jsxs as b, jsx as s, Fragment as G } from "react/jsx-runtime";
2
+ import p, { clsx as f } from "clsx";
3
+ import { useRef as I, useState as S, useEffect as T, forwardRef as N, useCallback as v, createContext as X, useContext as E, useId as _, useImperativeHandle as ke, useMemo as D } from "react";
4
+ import { Link as q, useNavigate as we, useLocation as se, NavLink as ve } from "react-router";
5
+ import { faClose as Ne, faEyeSlash as Ce, faEye as Ae, faCircleNotch as le, faSearch as Ie, faCheck as Oe, faCaretDown as Le, faChevronUp as Re, faChevronDown as Te, faChevronLeft as te, faChevronRight as re, faEllipsisV as Se, faSortAmountUp as Pe, faSortAmountDown as De } from "@fortawesome/free-solid-svg-icons";
6
+ import { FontAwesomeIcon as A } from "@fortawesome/react-fontawesome";
7
+ import { useFloating as ie, flip as Ee, offset as Me, useClick as _e, useInteractions as de, autoPlacement as Be, arrow as Fe, useHover as $e, useTransitionStyles as He } from "@floating-ui/react";
8
+ import { faClone as je } from "@fortawesome/free-regular-svg-icons";
9
+ import { createPortal as Ue } from "react-dom";
10
+ const er = ({ children: t, summary: r, summaryClasses: e, ...n }) => {
11
+ const a = I(null), [o, l] = S(!1);
12
+ return T(() => {
13
+ const i = a.current, d = () => l(!!(i != null && i.open));
14
+ return i == null || i.addEventListener("toggle", d), () => i == null ? void 0 : i.removeEventListener("toggle", d);
15
+ }, []), /* @__PURE__ */ b("details", { ref: a, ...n, children: [
16
+ /* @__PURE__ */ s("summary", { className: f("focus-ring px-1 -mx-1 rounded-sm", e), children: r }),
17
+ o && /* @__PURE__ */ s("div", { className: "mt-3 flex flex-col gap-y-3", children: t })
18
+ ] });
19
+ }, Ge = N(({ className: t, ...r }, e) => /* @__PURE__ */ s(
20
+ "div",
12
21
  {
13
- body: !0,
14
- className: u(r, {
15
- "w-100": a,
16
- "w-75 mx-auto": !a,
17
- "border-danger": t === "error"
18
- }),
19
- children: /* @__PURE__ */ i(
20
- "h3",
21
- {
22
- className: u("text-center mb-0", {
23
- "text-muted": t === "default",
24
- "text-danger": t === "error"
25
- }),
26
- children: [
27
- s && /* @__PURE__ */ n(g, { icon: S, spin: !0 }),
28
- s && /* @__PURE__ */ n("span", { className: "ms-2", children: e ?? "Loading..." }),
29
- !s && e
30
- ]
31
- }
32
- )
22
+ className: p(
23
+ "px-4 py-3 rounded-t-md",
24
+ "bg-lm-primary dark:bg-dm-primary border-b border-lm-border dark:border-dm-border",
25
+ t
26
+ ),
27
+ ...r,
28
+ ref: e
29
+ }
30
+ )), We = N(({ className: t, ...r }, e) => /* @__PURE__ */ s(
31
+ "div",
32
+ {
33
+ className: p(
34
+ "p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md",
35
+ "first:rounded-t-md last:rounded-b-md",
36
+ t
37
+ ),
38
+ ...r,
39
+ ref: e
33
40
  }
34
- ), Z = ({ title: r, children: e, bodyClassName: s, ...t }) => /* @__PURE__ */ i(w, { ...t, children: [
35
- r && /* @__PURE__ */ n(H, { role: "heading", "aria-level": 4, children: r }),
36
- /* @__PURE__ */ n(M, { className: s, children: e })
37
- ] }), fe = ({ children: r, type: e, className: s, small: t = !1 }) => /* @__PURE__ */ n(
38
- Z,
41
+ )), Ke = N(({ className: t, ...r }, e) => /* @__PURE__ */ s(
42
+ "div",
39
43
  {
40
- role: "document",
41
- className: u("text-center", {
42
- "w-75 mx-auto": !t,
43
- "w-100": t,
44
- "bg-main": e === "success",
45
- "bg-danger": e === "error",
46
- "bg-warning": e === "warning",
47
- "text-white": e !== "warning"
48
- }, s),
49
- bodyClassName: u({ "p-2": t }),
50
- children: r
44
+ className: p(
45
+ "px-4 py-3 rounded-b-md",
46
+ "bg-lm-primary dark:bg-dm-primary border-t border-lm-border dark:border-dm-border",
47
+ t
48
+ ),
49
+ ...r,
50
+ ref: e
51
51
  }
52
- ), T = ({ checked: r = !1, onChange: e, className: s, children: t, type: a, inline: c = !1 }) => {
53
- const l = O(), h = (m) => e == null ? void 0 : e(m.target.checked, m), d = {
54
- "form-switch": a === "switch",
55
- "form-checkbox": a === "checkbox"
56
- }, o = c ? { display: "inline-block" } : {};
57
- return /* @__PURE__ */ i("span", { className: u("form-check", d, s), style: o, children: [
58
- /* @__PURE__ */ n("input", { type: "checkbox", className: "form-check-input", id: l, checked: r, onChange: h }),
59
- /* @__PURE__ */ n("label", { className: "form-check-label", htmlFor: l, children: t })
52
+ )), qe = N(({ className: t, ...r }, e) => /* @__PURE__ */ s(
53
+ "div",
54
+ {
55
+ className: p(
56
+ "group/card rounded-md shadow-md",
57
+ "border border-lm-border dark:border-dm-border bg-lm-primary dark:bg-dm-primary",
58
+ t
59
+ ),
60
+ ...r,
61
+ ref: e
62
+ }
63
+ )), L = Object.assign(qe, { Body: We, Header: Ge, Footer: Ke }), Qe = N(({ bodyClassName: t, children: r, ...e }, n) => {
64
+ const { title: a, titleSize: o = "md", ...l } = "title" in e ? e : {
65
+ ...e,
66
+ title: void 0,
67
+ titleSize: void 0
68
+ };
69
+ return /* @__PURE__ */ b(L, { ...l, ref: n, children: [
70
+ a && /* @__PURE__ */ b(L.Header, { children: [
71
+ o === "lg" && /* @__PURE__ */ s("h4", { children: a }),
72
+ o === "md" && /* @__PURE__ */ s("h5", { children: a }),
73
+ o === "sm" && /* @__PURE__ */ s("h6", { children: a })
74
+ ] }),
75
+ /* @__PURE__ */ s(L.Body, { className: t, children: r })
60
76
  ] });
61
- }, pe = (r) => /* @__PURE__ */ n(T, { type: "checkbox", ...r }), ge = (r) => /* @__PURE__ */ n(T, { type: "switch", ...r }), B = ({ children: r, label: e, className: s = "", labelClassName: t = "", noMargin: a = !1, id: c }) => /* @__PURE__ */ i("div", { className: `${s} ${a ? "" : "mb-3"}`, children: [
62
- /* @__PURE__ */ n("label", { className: `form-label ${t}`, htmlFor: c, children: e }),
63
- r
64
- ] }), be = ({ children: r, value: e, onChange: s, type: t, required: a, placeholder: c, className: l, labelClassName: h }) => {
65
- const d = O();
66
- return /* @__PURE__ */ n(B, { label: /* @__PURE__ */ i(f, { children: [
67
- r,
68
- ":"
69
- ] }), className: l, labelClassName: h, id: d, children: /* @__PURE__ */ n(
70
- "input",
77
+ });
78
+ function Ye({
79
+ id: t,
80
+ items: r,
81
+ onSelectItem: e,
82
+ onActiveItemChange: n,
83
+ renderItem: a,
84
+ className: o,
85
+ noItemsMessage: l = "No items",
86
+ anchor: i,
87
+ "aria-label": d = "Items",
88
+ ...c
89
+ }) {
90
+ const [k, w] = S(0), x = v((g) => {
91
+ if (w(g), n) {
92
+ const [m, h] = [...r.entries()][g];
93
+ n(m, h);
94
+ }
95
+ }, [r, n]);
96
+ return T(() => {
97
+ const g = i == null ? void 0 : i.current;
98
+ if (!g)
99
+ return;
100
+ const m = (h) => {
101
+ ["Enter", "ArrowUp", "ArrowDown"].includes(h.key) && h.preventDefault(), h.key === "ArrowDown" ? x(Math.min(k + 1, r.size - 1)) : h.key === "ArrowUp" ? x(Math.max(k - 1, 0)) : h.key === "Enter" && e([...r.values()][k]);
102
+ };
103
+ return g.addEventListener("keydown", m), () => g.removeEventListener("keydown", m);
104
+ }, [k, i, x, r, e]), /* @__PURE__ */ b(
105
+ L,
71
106
  {
72
- id: d,
73
- className: "form-control",
74
- type: t ?? "text",
75
- value: e,
76
- required: a ?? !0,
77
- placeholder: c,
78
- onChange: (o) => s(o.target.value)
107
+ id: t,
108
+ className: p("py-1 flex flex-col", o),
109
+ role: "listbox",
110
+ "aria-orientation": "vertical",
111
+ "aria-label": d,
112
+ ...c,
113
+ children: [
114
+ r.size === 0 && /* @__PURE__ */ s("i", { role: "option", "aria-disabled": !0, "aria-selected": !1, "data-testid": "no-items", className: "px-2 py-1", children: l }),
115
+ [...r.entries()].map(([g, m], h) => /* @__PURE__ */ s(
116
+ "button",
117
+ {
118
+ id: `${t}_${g}`,
119
+ type: "button",
120
+ role: "option",
121
+ "aria-selected": h === k,
122
+ className: p(
123
+ "px-2 py-1 text-left truncate",
124
+ { "bg-lm-secondary dark:bg-dm-secondary": h === k }
125
+ ),
126
+ tabIndex: -1,
127
+ onClick: () => e(m),
128
+ onMouseOver: () => x(h),
129
+ children: a(m)
130
+ },
131
+ g
132
+ ))
133
+ ]
134
+ }
135
+ );
136
+ }
137
+ const W = X(void 0), F = X({ responsive: !0, size: "md" }), Xe = ({ children: t, className: r }) => {
138
+ const { responsive: e } = E(F);
139
+ return /* @__PURE__ */ s(W.Provider, { value: { section: "head" }, children: /* @__PURE__ */ s(
140
+ "thead",
141
+ {
142
+ className: p(
143
+ { "hidden lg:table-header-group": e },
144
+ r
145
+ ),
146
+ children: t
79
147
  }
80
148
  ) });
81
- }, K = 500;
82
- let p;
83
- const _ = () => {
84
- p !== null && clearTimeout(p), p = null;
85
- }, we = ({ onChange: r, className: e, large: s = !0, noBorder: t = !1, initialValue: a = "", setTimeout_: c = setTimeout }) => {
86
- const [l, h] = x(a), d = (o, m = K) => {
87
- h(o), _(), p = c(() => {
88
- r(o), _();
89
- }, m);
90
- };
91
- return /* @__PURE__ */ i("div", { className: u("search-field", e), children: [
92
- /* @__PURE__ */ n(
93
- "input",
149
+ }, Je = ({ children: t, className: r }) => {
150
+ const { responsive: e } = E(F);
151
+ return /* @__PURE__ */ s(W.Provider, { value: { section: "body" }, children: /* @__PURE__ */ s(
152
+ "tbody",
153
+ {
154
+ className: p(
155
+ { "lg:table-row-group flex flex-col gap-y-3": e },
156
+ r
157
+ ),
158
+ children: t
159
+ }
160
+ ) });
161
+ }, Ze = ({ children: t, className: r }) => {
162
+ const { responsive: e } = E(F);
163
+ return /* @__PURE__ */ s(W.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ s(
164
+ "tfoot",
165
+ {
166
+ className: p(
167
+ { "lg:table-row-group flex flex-col gap-y-3 mt-4": e },
168
+ r
169
+ ),
170
+ children: t
171
+ }
172
+ ) });
173
+ }, Ve = ({ children: t, className: r, ...e }) => {
174
+ const n = E(W), a = (n == null ? void 0 : n.section) === "body", { responsive: o } = E(F);
175
+ return /* @__PURE__ */ s(
176
+ "tr",
177
+ {
178
+ className: p(
179
+ "group",
180
+ {
181
+ "lg:table-row flex flex-col": o,
182
+ "lg:border-0 border-y-2 border-lm-border dark:border-dm-border": o,
183
+ "hover:bg-lm-primary dark:hover:bg-dm-primary": a,
184
+ // Use a different hover bg color depending on the table being inside a card or not
185
+ "group-[&]/card:hover:bg-lm-secondary dark:group-[&]/card:hover:bg-dm-secondary": a
186
+ },
187
+ r
188
+ ),
189
+ ...e,
190
+ children: t
191
+ }
192
+ );
193
+ }, ze = ({ children: t, className: r, columnName: e, type: n, ...a }) => {
194
+ const o = E(W), l = n ?? ((o == null ? void 0 : o.section) !== "body" ? "th" : "td"), { responsive: i, size: d } = E(F);
195
+ return /* @__PURE__ */ s(
196
+ l,
197
+ {
198
+ "data-column": i ? e : void 0,
199
+ className: p(
200
+ "border-lm-border dark:border-dm-border",
201
+ {
202
+ "p-1": d === "sm",
203
+ "p-2": d === "md",
204
+ "p-3": d === "lg",
205
+ "border-b-1": !i,
206
+ "block lg:table-cell not-last:border-b-1 lg:border-b-1": i,
207
+ "text-left": l === "th",
208
+ // For responsive tables, display the content in data-column attribute for md sizes and lower
209
+ "before:lg:hidden before:content-[attr(data-column)] before:font-bold before:mr-1": i && l === "td"
210
+ },
211
+ r
212
+ ),
213
+ ...a,
214
+ children: t
215
+ }
216
+ );
217
+ }, et = ({ header: t, footer: r, children: e, responsive: n = !0, size: a = "md", ...o }) => /* @__PURE__ */ s(F.Provider, { value: { responsive: n, size: a }, children: /* @__PURE__ */ b("table", { className: "w-full", ...o, children: [
218
+ /* @__PURE__ */ s(Xe, { children: t }),
219
+ /* @__PURE__ */ s(Je, { children: e }),
220
+ r && /* @__PURE__ */ s(Ze, { children: r })
221
+ ] }) }), tr = Object.assign(et, { Row: Ve, Cell: ze }), ce = N(({
222
+ className: t,
223
+ disabled: r,
224
+ variant: e = "primary",
225
+ size: n = "md",
226
+ inline: a = !1,
227
+ solid: o = !1,
228
+ type: l = "button",
229
+ ...i
230
+ }, d) => {
231
+ const c = "to" in i && typeof i.to == "string", k = c ? q : "button", w = c ? void 0 : l;
232
+ return /* @__PURE__ */ s(
233
+ k,
234
+ {
235
+ ref: d,
236
+ className: p(
237
+ {
238
+ "inline-flex": a,
239
+ flex: !a
240
+ },
241
+ "gap-2 items-center justify-center",
242
+ "border rounded-md no-underline",
243
+ "transition-colors",
244
+ {
245
+ "focus-ring": e === "primary",
246
+ "focus-ring-secondary": e === "secondary",
247
+ "focus-ring-danger": e === "danger"
248
+ },
249
+ {
250
+ "px-1.5 py-1 text-sm": n === "sm",
251
+ "px-3 py-1.5": n === "md",
252
+ "px-4 py-2 text-lg": n === "lg"
253
+ },
254
+ {
255
+ "border-lm-brand dark:border-dm-brand": e === "primary",
256
+ "text-lm-brand dark:text-dm-brand": e === "primary" && !o,
257
+ "border-zinc-500": e === "secondary",
258
+ "text-zinc-500": e === "secondary" && !o,
259
+ "border-danger": e === "danger",
260
+ "text-danger": e === "danger" && !o
261
+ },
262
+ o && {
263
+ "text-white": !0,
264
+ "bg-lm-brand dark:bg-dm-brand": e === "primary",
265
+ "highlight:bg-lm-brand-dark dark:highlight:bg-dm-brand-dark": e === "primary",
266
+ "highlight:border-lm-brand-dark dark:highlight:border-dm-brand-dark": e === "primary",
267
+ "bg-zinc-500": e === "secondary",
268
+ "highlight:bg-zinc-600 highlight:border-zinc-600": e === "secondary",
269
+ "bg-danger": e === "danger",
270
+ "highlight:bg-danger-dark highlight:border-danger-dark": e === "danger"
271
+ },
272
+ !r && {
273
+ "highlight:text-white": !o,
274
+ "highlight:bg-lm-brand dark:highlight:bg-dm-brand": e === "primary",
275
+ "highlight:bg-zinc-500": e === "secondary",
276
+ "highlight:bg-danger": e === "danger"
277
+ },
278
+ {
279
+ "cursor-pointer": !r,
280
+ "pointer-events-none opacity-65": r
281
+ },
282
+ t
283
+ ),
284
+ disabled: c ? void 0 : r,
285
+ "aria-disabled": c ? r : void 0,
286
+ type: w,
287
+ ...i
288
+ }
289
+ );
290
+ }), me = N(({ className: t, onChange: r, ...e }, n) => {
291
+ const a = v((o) => r == null ? void 0 : r(o.target.checked, o), [r]);
292
+ return /* @__PURE__ */ s(
293
+ "input",
294
+ {
295
+ ref: n,
296
+ type: "checkbox",
297
+ className: f(
298
+ "appearance-none focus-ring cursor-[inherit]",
299
+ "border-1 border-lm-input-border dark:border-dm-input-border",
300
+ "bg-lm-primary dark:bg-dm-primary checked:bg-lm-brand dark:checked:bg-dm-brand bg-no-repeat",
301
+ // Use different background color when rendered inside a card
302
+ "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input",
303
+ t
304
+ ),
305
+ onChange: a,
306
+ ...e
307
+ }
308
+ );
309
+ }), rr = N(({ className: t, ...r }, e) => /* @__PURE__ */ s(
310
+ me,
311
+ {
312
+ ref: e,
313
+ className: f("rounded-sm w-4 h-4 checked:bg-(image:--tick) bg-center", t),
314
+ ...r
315
+ }
316
+ )), Q = N(({ onClick: t, className: r, label: e = "Close", size: n = "lg", solid: a }, o) => /* @__PURE__ */ s(
317
+ "button",
318
+ {
319
+ ref: o,
320
+ type: "button",
321
+ onClick: t,
322
+ className: p(
323
+ "rounded-md focus-ring cursor-pointer",
94
324
  {
95
- type: "text",
96
- className: u("form-control search-field__input", {
97
- "form-control-lg": s,
98
- "search-field__input--no-border": t
99
- }),
100
- placeholder: "Search...",
101
- value: l,
102
- onChange: (o) => d(o.target.value)
325
+ "opacity-50 highlight:opacity-80 transition-opacity": !a
326
+ },
327
+ r
328
+ ),
329
+ "aria-label": e,
330
+ children: /* @__PURE__ */ s(A, { icon: Ne, size: n === "lg" ? "xl" : n === "md" ? "lg" : void 0 })
331
+ }
332
+ )), J = N(({
333
+ borderless: t = !1,
334
+ size: r = "md",
335
+ feedback: e,
336
+ variant: n = "default",
337
+ className: a,
338
+ disabled: o,
339
+ ...l
340
+ }, i) => /* @__PURE__ */ s(
341
+ "input",
342
+ {
343
+ ref: i,
344
+ className: p(
345
+ "outline-none",
346
+ n === "default" && [
347
+ "w-full",
348
+ {
349
+ "focus-ring": !e,
350
+ "focus-ring-danger": e === "error",
351
+ "px-2 py-1 text-sm": r === "sm",
352
+ "px-3 py-1.5": r === "md",
353
+ "px-4 py-2 text-xl": r === "lg",
354
+ "rounded-md border": !t,
355
+ "border-lm-input-border dark:border-dm-input-border": !t && !e,
356
+ "border-danger": !t && e === "error",
357
+ "bg-lm-disabled-input dark:bg-dm-disabled-input": o,
358
+ "bg-lm-primary dark:bg-dm-primary": !o,
359
+ // Use different background color when rendered inside a card
360
+ "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !o
361
+ }
362
+ ],
363
+ a
364
+ ),
365
+ disabled: o,
366
+ ...l
367
+ }
368
+ )), Z = ({ required: t, children: r, className: e, ...n }) => /* @__PURE__ */ b("label", { className: f("cursor-pointer", e), ...n, children: [
369
+ r,
370
+ t && /* @__PURE__ */ s("span", { className: "text-danger ml-1", "data-testid": "required-indicator", children: "*" })
371
+ ] }), V = ({ children: t, helpText: r, error: e, "data-testid": n }) => /* @__PURE__ */ b("div", { className: "flex flex-col gap-1", "data-testid": n, children: [
372
+ t,
373
+ r && /* @__PURE__ */ s(
374
+ "small",
375
+ {
376
+ "data-testid": n ? `${n}-help-text` : "help-text",
377
+ className: "text-gray-500 dark:text-gray-400",
378
+ children: r
379
+ }
380
+ ),
381
+ e && /* @__PURE__ */ s("span", { "data-testid": n ? `${n}-error` : "error", className: "text-danger", children: e })
382
+ ] }), nr = N(({ label: t, inputClassName: r, required: e, hiddenRequired: n, error: a, helpText: o, "data-testid": l, ...i }, d) => {
383
+ const c = _();
384
+ return /* @__PURE__ */ b(V, { error: a, helpText: o, "data-testid": l, children: [
385
+ /* @__PURE__ */ s(Z, { htmlFor: c, required: e, children: t }),
386
+ /* @__PURE__ */ s(
387
+ J,
388
+ {
389
+ ref: d,
390
+ id: c,
391
+ className: r,
392
+ required: e || n,
393
+ feedback: a ? "error" : void 0,
394
+ ...i
395
+ }
396
+ )
397
+ ] });
398
+ }), tt = N(({ containerClassName: t, className: r, size: e, ...n }, a) => {
399
+ const { flag: o, toggle: l, setToFalse: i } = pe(), d = I(null), c = v(({ relatedTarget: k }) => {
400
+ var w;
401
+ (w = d.current) != null && w.contains(k) || i();
402
+ }, [d, i]);
403
+ return /* @__PURE__ */ b(
404
+ "div",
405
+ {
406
+ className: f("group relative", t),
407
+ ref: d,
408
+ onBlurCapture: c,
409
+ children: [
410
+ /* @__PURE__ */ s(
411
+ J,
412
+ {
413
+ ref: a,
414
+ type: o ? "text" : "password",
415
+ className: f(
416
+ {
417
+ "pr-10": e !== "sm",
418
+ "pr-8": e === "sm"
419
+ },
420
+ r
421
+ ),
422
+ size: e,
423
+ "data-testid": "input",
424
+ ...n
425
+ }
426
+ ),
427
+ /* @__PURE__ */ s(
428
+ "button",
429
+ {
430
+ type: "button",
431
+ onClick: l,
432
+ title: o ? "Hide password" : "Show password",
433
+ "aria-label": o ? "Hide password" : "Show password",
434
+ className: f(
435
+ "absolute top-[50%] translate-y-[-50%] px-1 cursor-pointer",
436
+ "text-placeholder hover:text-lm-text hover:dark:text-dm-text transition-colors",
437
+ {
438
+ "right-1.5": e !== "sm",
439
+ "scale-85 right-1": e === "sm"
440
+ }
441
+ ),
442
+ tabIndex: -1,
443
+ children: /* @__PURE__ */ s(A, { fixedWidth: !0, icon: o ? Ce : Ae })
444
+ }
445
+ )
446
+ ]
447
+ }
448
+ );
449
+ }), or = N(({ label: t, inputClassName: r, required: e, hiddenRequired: n, error: a, helpText: o, "data-testid": l, ...i }, d) => {
450
+ const c = _();
451
+ return /* @__PURE__ */ b(V, { error: a, helpText: o, "data-testid": l, children: [
452
+ /* @__PURE__ */ s(Z, { htmlFor: c, required: e, children: t }),
453
+ /* @__PURE__ */ s(
454
+ tt,
455
+ {
456
+ ref: d,
457
+ id: c,
458
+ className: r,
459
+ required: e || n,
460
+ feedback: a ? "error" : void 0,
461
+ ...i
462
+ }
463
+ )
464
+ ] });
465
+ }), rt = N(({
466
+ className: t,
467
+ size: r = "md",
468
+ feedback: e,
469
+ disabled: n,
470
+ ...a
471
+ }, o) => /* @__PURE__ */ s(
472
+ "select",
473
+ {
474
+ ref: o,
475
+ className: p(
476
+ "w-full rounded-md border appearance-none pr-9",
477
+ "bg-(image:--chevron-down) bg-no-repeat bg-position-[right_0.75rem_center] bg-size-[16px_12px]",
478
+ {
479
+ "focus-ring": !e,
480
+ "focus-ring-danger": e === "error",
481
+ "border-lm-input-border dark:border-dm-input-border": !e,
482
+ "border-danger": e === "error",
483
+ "pl-2 py-1 text-sm": r === "sm",
484
+ "pl-3 py-1.5": r === "md",
485
+ "pl-4 py-2 text-xl": r === "lg",
486
+ "bg-lm-disabled-input dark:bg-dm-disabled-input": n,
487
+ // Apply different background color when rendered inside a card
488
+ "bg-lm-primary dark:bg-dm-primary group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !n
489
+ },
490
+ t
491
+ ),
492
+ disabled: n,
493
+ ...a
494
+ }
495
+ )), ar = N(({ selectClassName: t, label: r, error: e, helpText: n, required: a, hiddenRequired: o, "data-testid": l, ...i }, d) => {
496
+ const c = _();
497
+ return /* @__PURE__ */ b(V, { error: e, helpText: n, "data-testid": l, children: [
498
+ /* @__PURE__ */ s(Z, { htmlFor: c, required: a, children: r }),
499
+ /* @__PURE__ */ s(
500
+ rt,
501
+ {
502
+ ref: d,
503
+ id: c,
504
+ className: t,
505
+ required: a || o,
506
+ feedback: e ? "error" : void 0,
507
+ ...i
508
+ }
509
+ )
510
+ ] });
511
+ }), nt = N(({
512
+ onChange: t,
513
+ containerClassName: r,
514
+ inputClassName: e,
515
+ // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
516
+ size: n = "lg",
517
+ loading: a = !1,
518
+ variant: o = "default",
519
+ immediate: l = !1,
520
+ ...i
521
+ }, d) => {
522
+ const { setTimeout: c, clearCurrentTimeout: k } = ue(500), w = v((x) => {
523
+ !x || l ? (k(), t(x)) : c(() => t(x));
524
+ }, [k, l, t, c]);
525
+ return /* @__PURE__ */ b("div", { className: p("group relative focus-within:z-10", r), children: [
526
+ o === "default" && /* @__PURE__ */ s(
527
+ A,
528
+ {
529
+ icon: a ? le : Ie,
530
+ spin: a,
531
+ className: p(
532
+ "absolute top-[50%] translate-y-[-50%] transition-colors",
533
+ "text-placeholder group-focus-within:text-lm-text dark:group-focus-within:text-dm-text",
534
+ {
535
+ "left-3": n !== "sm",
536
+ "scale-85 left-2": n === "sm"
537
+ }
538
+ )
103
539
  }
104
540
  ),
105
- /* @__PURE__ */ n(g, { icon: R, className: "search-field__icon" }),
106
- /* @__PURE__ */ n(
107
- "button",
541
+ /* @__PURE__ */ s(
542
+ J,
108
543
  {
109
- "aria-label": "Clear search",
110
- type: "button",
111
- className: "close search-field__close btn-close",
112
- hidden: l === "",
113
- id: "search-field__close",
114
- onClick: () => d("", 0)
544
+ ref: d,
545
+ variant: o,
546
+ type: "search",
547
+ className: p(
548
+ o === "default" && {
549
+ "pl-9": n !== "sm",
550
+ "pl-7": n === "sm"
551
+ },
552
+ e
553
+ ),
554
+ placeholder: "Search...",
555
+ onChange: (x) => w(x.target.value),
556
+ size: n,
557
+ ...i
115
558
  }
116
559
  )
117
560
  ] });
118
- }, Ne = () => j(null), _e = () => {
119
- const r = z();
120
- return U(() => r(-1), [r]);
121
- }, ee = (r) => {
122
- const e = new URLSearchParams(r), s = {};
123
- return e.forEach((t, a) => {
561
+ });
562
+ function ot({
563
+ searchResults: t,
564
+ onSearch: r,
565
+ onSelectSearchResult: e,
566
+ renderSearchResult: n,
567
+ size: a = "md",
568
+ // SearchInput defaults its size to 'lg'. Change it to 'md'
569
+ listboxSpan: o = "full",
570
+ onFocus: l,
571
+ containerClassName: i,
572
+ listboxClassName: d,
573
+ ...c
574
+ }, k) {
575
+ const w = _(), [x, g] = S(), m = I(null);
576
+ ke(k, () => m.current);
577
+ const h = D(
578
+ () => t ? x ?? [...t.keys()][0] : void 0,
579
+ [x, t]
580
+ ), y = v((u) => {
581
+ e(u), r(""), m.current.value = "";
582
+ }, [r, e, m]);
583
+ return /* @__PURE__ */ b(
584
+ "div",
585
+ {
586
+ className: p("relative", i),
587
+ onBlur: (u) => {
588
+ u.currentTarget.contains(u.relatedTarget) || r("");
589
+ },
590
+ children: [
591
+ /* @__PURE__ */ s(
592
+ nt,
593
+ {
594
+ onChange: r,
595
+ size: a,
596
+ ref: m,
597
+ role: "combobox",
598
+ "aria-autocomplete": "list",
599
+ "aria-expanded": !!t,
600
+ "aria-controls": w,
601
+ "aria-activedescendant": h ? `${w}_${h}` : void 0,
602
+ autoComplete: "off",
603
+ autoCorrect: "off",
604
+ onFocus: (u) => {
605
+ l == null || l(u), r(u.target.value);
606
+ },
607
+ ...c
608
+ }
609
+ ),
610
+ t && /* @__PURE__ */ s(
611
+ Ye,
612
+ {
613
+ id: w,
614
+ items: t,
615
+ anchor: m,
616
+ onSelectItem: y,
617
+ onActiveItemChange: g,
618
+ renderItem: n,
619
+ className: p(
620
+ "absolute top-full mt-1 z-10",
621
+ {
622
+ "min-w-60": o === "auto",
623
+ "w-full": o === "full"
624
+ },
625
+ d
626
+ ),
627
+ "aria-label": "Matching items",
628
+ noItemsMessage: "No results found matching search"
629
+ }
630
+ )
631
+ ]
632
+ }
633
+ );
634
+ }
635
+ const at = N(ot), st = ({ name: t, color: r }) => /* @__PURE__ */ b("div", { className: "inline-flex items-center gap-2", children: [
636
+ /* @__PURE__ */ s("div", { "aria-hidden": !0, className: "w-4 h-4 rounded-full", style: { backgroundColor: r } }),
637
+ t
638
+ ] }), lt = ({ tag: t, color: r, size: e, onRemove: n }) => (
639
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
640
+ /* @__PURE__ */ b(
641
+ "li",
642
+ {
643
+ className: f(
644
+ "inline-flex items-center gap-1 font-bold [&]:rounded-md",
645
+ {
646
+ "px-1 text-sm": e === "sm",
647
+ "py-0.25 px-1.5": e === "md",
648
+ "py-0.5 px-1.5": e === "lg"
649
+ }
650
+ ),
651
+ style: {
652
+ backgroundColor: r,
653
+ color: mt(r) ? "#000" : "#fff"
654
+ },
655
+ onClick: (a) => a.stopPropagation(),
656
+ children: [
657
+ t,
658
+ /* @__PURE__ */ s(Q, { label: `Remove ${t}`, solid: !0, size: "sm", onClick: () => n(t) })
659
+ ]
660
+ }
661
+ )
662
+ ), it = /\s+/g, ne = "#99a1af", oe = (t) => t.trim().toLowerCase().replace(it, "-"), sr = ({
663
+ tags: t,
664
+ selectedTags: r = [],
665
+ onTagsChange: e,
666
+ getColorForTag: n,
667
+ searchMode: a = "startsWith",
668
+ immutable: o = !1,
669
+ size: l = "md",
670
+ disabled: i,
671
+ containerClassName: d,
672
+ ...c
673
+ }) => {
674
+ const [k, w] = S(), x = v((y) => {
675
+ const u = y.toLowerCase().trim();
676
+ if (!u) {
677
+ w(void 0);
678
+ return;
679
+ }
680
+ const O = t.filter((C) => {
681
+ if (r.includes(C))
682
+ return !1;
683
+ const M = C.toLowerCase();
684
+ return a === "startsWith" ? M.startsWith(u) : M.includes(u);
685
+ }).slice(0, 5);
686
+ o || O.push(`Add "${u.split(",").map(oe).join(",")}" tag`), w(new Map(O.map((C) => [C, C])));
687
+ }, [o, a, r, t]), g = v((y) => {
688
+ const u = y.match(/Add\s+"([^"]+)"\s+tag/), O = ((u == null ? void 0 : u[1]) ?? y).split(",").map(oe);
689
+ e == null || e([.../* @__PURE__ */ new Set([...r, ...O])]);
690
+ }, [e, r]), m = v(
691
+ (y) => e == null ? void 0 : e(r.filter((u) => u !== y)),
692
+ [e, r]
693
+ ), h = I(null);
694
+ return (
695
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
696
+ /* @__PURE__ */ b(
697
+ "div",
698
+ {
699
+ className: f(
700
+ "rounded-md flex flex-wrap gap-1",
701
+ "border border-lm-input-border dark:border-dm-input-border",
702
+ "cursor-text focus-within:focus-within-ring",
703
+ {
704
+ "p-0.5": l === "sm",
705
+ "p-1.25": l === "md",
706
+ "p-2": l === "lg",
707
+ "bg-lm-disabled-input dark:bg-dm-disabled-input": i,
708
+ "bg-lm-primary dark:bg-dm-primary": !i,
709
+ // Use different background color when rendered inside a card
710
+ "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": !i
711
+ },
712
+ d
713
+ ),
714
+ onClick: (y) => {
715
+ var u;
716
+ y.target !== h.current && ((u = h.current) == null || u.focus());
717
+ },
718
+ children: [
719
+ /* @__PURE__ */ s("ul", { className: "m-0 p-0 flex flex-wrap gap-1", children: r.map((y, u) => {
720
+ const O = (n == null ? void 0 : n(y)) ?? ne;
721
+ return /* @__PURE__ */ s(lt, { tag: y, color: O, onRemove: m, size: l }, `${y}${u}`);
722
+ }) }),
723
+ /* @__PURE__ */ s(
724
+ at,
725
+ {
726
+ variant: "unstyled",
727
+ listboxSpan: "auto",
728
+ containerClassName: "flex items-center",
729
+ listboxClassName: "whitespace-nowrap",
730
+ inputClassName: f(
731
+ "no-clear-button",
732
+ {
733
+ "px-1 text-sm": l === "sm",
734
+ "px-2 h-[26px]": l === "md",
735
+ "px-3 text-xl": l === "lg"
736
+ }
737
+ ),
738
+ searchResults: k,
739
+ onSearch: x,
740
+ onSelectSearchResult: g,
741
+ renderSearchResult: (y) => y.match(/Add\s+"([^"]+)"\s+tag/) ? y : /* @__PURE__ */ s(st, { name: y, color: (n == null ? void 0 : n(y)) ?? ne }),
742
+ onKeyDown: (y) => {
743
+ y.key === "Backspace" && !k && m(r[r.length - 1]);
744
+ },
745
+ size: l,
746
+ disabled: i,
747
+ ref: h,
748
+ immediate: !0,
749
+ ...c
750
+ }
751
+ )
752
+ ]
753
+ }
754
+ )
755
+ );
756
+ }, lr = N(({ className: t, ...r }, e) => /* @__PURE__ */ s(
757
+ me,
758
+ {
759
+ ref: e,
760
+ className: f(
761
+ "rounded-full w-8 h-4",
762
+ "bg-(image:--circle-grey-dark) dark:bg-(image:--circle-grey-light) checked:bg-(image:--circle-white)",
763
+ "focus-visible:not-checked:bg-(image:--circle-blue-light)",
764
+ "checked:bg-right transition-[background-position]",
765
+ t
766
+ ),
767
+ ...r
768
+ }
769
+ ));
770
+ function dt(t, { elementsSelector: r, focusFirstItem: e = !1, vertical: n = !0, horizontal: a = !0 }) {
771
+ const o = D(() => {
772
+ const d = [];
773
+ return n && d.push("ArrowDown"), a && d.push("ArrowRight"), d;
774
+ }, [a, n]), l = D(() => {
775
+ const d = [];
776
+ return n && d.push("ArrowUp"), a && d.push("ArrowLeft"), d;
777
+ }, [a, n]), i = D(() => [...o, ...l], [o, l]);
778
+ T(() => {
779
+ const d = t.current;
780
+ if (!d)
781
+ return () => {
782
+ };
783
+ const c = new AbortController(), k = () => [...d.querySelectorAll(r)], w = k(), x = Math.max(w.findIndex((g) => g.dataset.selected === "true"), 0);
784
+ return w.forEach((g, m) => {
785
+ g.tabIndex = m === x ? 0 : -1, e && m === x && g.focus();
786
+ }), d.addEventListener("keydown", (g) => {
787
+ if (!i.includes(g.key))
788
+ return;
789
+ g.preventDefault();
790
+ const m = k(), h = m.findIndex((u) => u.tabIndex === 0), y = o.includes(g.key) ? m[h + 1] ?? m[0] : m[h - 1] ?? m[m.length - 1];
791
+ m.forEach((u) => {
792
+ u.tabIndex = -1;
793
+ }), y.tabIndex = 0, y.focus();
794
+ }, { signal: c.signal }), () => c.abort();
795
+ }, [i, t, r, e, o]);
796
+ }
797
+ const ir = () => {
798
+ const t = we();
799
+ return v(() => t(-1), [t]);
800
+ }, ct = 128;
801
+ function mt(t) {
802
+ const [r, e, n] = (t.match(/../g) ?? []).map((o) => parseInt(o, 16) || 0);
803
+ return Math.round(Math.sqrt(0.299 * r ** 2 + 0.587 * e ** 2 + 0.114 * n ** 2)) >= ct;
804
+ }
805
+ const dr = ({ text: t, className: r, size: e = "lg", initialCopied: n = !1, navigator_: a = globalThis.navigator, ...o }) => {
806
+ const [l, i] = bt({ initialValue: n }), d = v(
807
+ () => a.clipboard.writeText(t).then(i),
808
+ [a.clipboard, t, i]
809
+ );
810
+ return /* @__PURE__ */ s(
811
+ "button",
812
+ {
813
+ type: "button",
814
+ className: f(
815
+ "focus-ring rounded-sm cursor-pointer",
816
+ {
817
+ "text-md": e === "sm",
818
+ "text-lg": e === "md",
819
+ "text-xl": e === "lg"
820
+ },
821
+ r
822
+ ),
823
+ "aria-label": `Copy ${t} to clipboard`,
824
+ title: "Copy to clipboard",
825
+ onClick: d,
826
+ ...o,
827
+ children: /* @__PURE__ */ s(A, { icon: l ? Oe : je, fixedWidth: !0 })
828
+ }
829
+ );
830
+ }, ut = (t) => {
831
+ const r = new URLSearchParams(t), e = {};
832
+ return r.forEach((n, a) => {
124
833
  if (a.endsWith("[]")) {
125
- const c = a.slice(0, -2);
126
- s[c] ?? (s[c] = []), s[c].push(t);
834
+ const o = a.slice(0, -2);
835
+ e[o] ?? (e[o] = []), e[o].push(n);
127
836
  } else
128
- s[a] = t;
129
- }), s;
130
- }, ve = (r) => {
131
- const e = new URLSearchParams();
132
- for (const [s, t] of Object.entries(r))
133
- t !== void 0 && (Array.isArray(t) ? t.forEach((a) => e.append(`${s}[]`, `${a}`)) : e.append(s, `${t}`));
134
- return e.toString();
135
- }, ke = () => {
136
- const { search: r } = J();
137
- return q(() => ee(r), [r]);
138
- }, re = ({
139
- text: r,
140
- disabled: e = !1,
141
- className: s,
837
+ e[a] = n;
838
+ }), e;
839
+ }, cr = (t) => {
840
+ const r = new URLSearchParams();
841
+ for (const [e, n] of Object.entries(t))
842
+ n !== void 0 && (Array.isArray(n) ? n.forEach((a) => r.append(`${e}[]`, `${a}`)) : r.append(e, `${n}`));
843
+ return r.toString();
844
+ }, mr = () => {
845
+ const { search: t } = se();
846
+ return D(() => ut(t), [t]);
847
+ };
848
+ function ue(t, r = globalThis.setTimeout, e = globalThis.clearTimeout) {
849
+ const n = I(null), a = v(() => {
850
+ n.current && e(n.current);
851
+ }, [e]), o = v((l, i) => {
852
+ a(), n.current = r(() => {
853
+ l(), n.current = null;
854
+ }, i ?? t);
855
+ }, [a, t, r]);
856
+ return T(() => a, [a]), D(
857
+ () => ({ setTimeout: o, clearCurrentTimeout: a }),
858
+ [a, o]
859
+ );
860
+ }
861
+ const pt = 2e3, bt = ({ initialValue: t = !1, delay: r = pt } = {}, e = globalThis.setTimeout, n = globalThis.clearTimeout) => {
862
+ const { setTimeout: a } = ue(r, e, n), [o, l] = S(t), i = I(t), d = v(() => {
863
+ l(!i.current), a(() => l(i.current));
864
+ }, [a]);
865
+ return [o, d];
866
+ };
867
+ function pe(t = !1) {
868
+ const [r, e] = S(t), n = v(() => e((l) => !l), []), a = v(() => e(!0), []), o = v(() => e(!1), []);
869
+ return { flag: r, toggle: n, setToTrue: a, setToFalse: o };
870
+ }
871
+ const gt = ({ className: t, selected: r, disabled: e, ...n }) => {
872
+ const a = "to" in n && typeof n.to == "string";
873
+ return (
874
+ // @ts-expect-error The Tag is inferred from provided props, so they should always match
875
+ /* @__PURE__ */ s(
876
+ a ? q : "button",
877
+ {
878
+ role: "menuitem",
879
+ "data-selected": r,
880
+ className: f(
881
+ "flex items-center gap-2",
882
+ "w-full px-3 py-1.5 focus-ring",
883
+ // Overwrite link styles in case a Link is being used
884
+ "no-underline text-inherit",
885
+ {
886
+ "cursor-pointer": !e,
887
+ "pointer-events-none opacity-50": e,
888
+ "bg-lm-secondary dark:bg-dm-secondary": r && !e,
889
+ "highlight:bg-lm-secondary dark:highlight:bg-dm-secondary highlight:z-1 relative": !r && !e
890
+ },
891
+ t
892
+ ),
893
+ tabIndex: -1,
894
+ disabled: a ? void 0 : e,
895
+ "aria-disabled": a ? e : void 0,
896
+ ...n
897
+ }
898
+ )
899
+ );
900
+ }, ht = () => (
901
+ // TODO Use an <hr /> tag once tailwind styles are not set with !important
902
+ /* @__PURE__ */ s("div", { role: "separator", "aria-hidden": !0, className: "border-b border-lm-border dark:border-dm-border my-2" })
903
+ ), ft = ({ children: t }) => /* @__PURE__ */ s(
904
+ "div",
905
+ {
906
+ role: "heading",
907
+ "aria-level": 6,
908
+ "aria-hidden": !0,
909
+ className: f(
910
+ "flex items-center w-full px-3 py-1.5",
911
+ "text-gray-500 text-sm font-semibold"
912
+ ),
913
+ onClick: (r) => r.stopPropagation(),
914
+ children: t
915
+ }
916
+ ), xt = ({ className: t, onClick: r, ...e }) => (
917
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
918
+ /* @__PURE__ */ s(
919
+ "div",
920
+ {
921
+ className: f("px-3 py-1.5", t),
922
+ ...e,
923
+ onClick: (n) => {
924
+ n.stopPropagation(), r == null || r(n);
925
+ }
926
+ }
927
+ )
928
+ ), yt = ({
142
929
  children: t,
143
- dropdownClassName: a,
144
- noCaret: c,
145
- end: l = !1,
146
- minWidth: h,
147
- inline: d,
148
- size: o,
149
- ...m
930
+ className: r,
931
+ focusableElementsSelector: e = '[role="menuitem"]:not([disabled]):not([aria-disabled])',
932
+ focusFirstItem: n = !1,
933
+ ...a
150
934
  }) => {
151
- const [N, y] = L(), A = u("dropdown-btn__toggle", s, {
152
- "btn-block": !d,
153
- "dropdown-btn__toggle--with-caret": !c
154
- }), I = { minWidth: h && `${h}px` };
155
- return /* @__PURE__ */ i(v, { isOpen: N, toggle: y, disabled: e, className: a, children: [
156
- /* @__PURE__ */ n(k, { size: o, caret: !c, className: A, color: "primary", ...m, children: r }),
157
- /* @__PURE__ */ n(C, { className: "w-100", end: l, style: I, children: N && t })
935
+ const o = I(null);
936
+ return dt(o, { elementsSelector: e, focusFirstItem: n }), /* @__PURE__ */ s(L, { ref: o, role: "menu", className: f("py-2 whitespace-nowrap", r), ...a, children: t });
937
+ }, j = Object.assign(yt, { Item: gt, Separator: ht, Title: ft, Misc: xt }), kt = ({
938
+ children: t,
939
+ menuAlignment: r = "left",
940
+ buttonVariant: e = "button",
941
+ buttonContent: n,
942
+ buttonClassName: a,
943
+ buttonSize: o = "md",
944
+ buttonDisabled: l = !1,
945
+ containerClassName: i,
946
+ menuClassName: d,
947
+ caretless: c,
948
+ buttonLabel: k,
949
+ menuOffset: w = 3
950
+ }) => {
951
+ const [x, g] = S(!1), m = I(null), { refs: h, floatingStyles: y, context: u } = ie({
952
+ open: x,
953
+ onOpenChange: g,
954
+ placement: r === "right" ? "bottom-end" : "bottom-start",
955
+ middleware: [Ee(), Me(w)],
956
+ // eslint-disable-next-line react-compiler/react-compiler
957
+ elements: { reference: m.current }
958
+ }), O = _e(u), { getReferenceProps: C, getFloatingProps: M } = de([
959
+ O
960
+ ]), $ = _(), H = I(null);
961
+ return T(() => {
962
+ const P = H.current, z = m.current;
963
+ if (!P || !z)
964
+ return () => {
965
+ };
966
+ const ee = new AbortController();
967
+ return document.body.addEventListener("click", (ye) => {
968
+ ye.composedPath().includes(z) || g(!1);
969
+ }, { signal: ee.signal }), () => ee.abort();
970
+ }, []), // eslint-disable-next-line jsx-a11y/no-static-element-interactions
971
+ /* @__PURE__ */ b(
972
+ "div",
973
+ {
974
+ ref: H,
975
+ className: f("relative inline-block", i),
976
+ onKeyDown: (P) => {
977
+ P.key === "Escape" && g(!1);
978
+ },
979
+ onBlur: (P) => {
980
+ P.relatedTarget && !H.current.contains(P.relatedTarget) && g(!1);
981
+ },
982
+ children: [
983
+ /* @__PURE__ */ b(
984
+ "button",
985
+ {
986
+ ref: m,
987
+ ...C(),
988
+ type: "button",
989
+ "aria-haspopup": !0,
990
+ "aria-expanded": x,
991
+ "aria-controls": $,
992
+ "aria-label": k,
993
+ disabled: l,
994
+ className: f(
995
+ "flex items-center rounded-md focus-ring",
996
+ {
997
+ "justify-between": !c,
998
+ "cursor-pointer": !l,
999
+ "pointer-events-none opacity-50": l,
1000
+ // Button variant
1001
+ "border border-lm-border dark:border-dm-border": e === "button",
1002
+ "bg-lm-primary dark:bg-dm-primary": e === "button",
1003
+ // Use different bg color when inside a card
1004
+ "group-[&]/card:bg-lm-input group-[&]/card:dark:bg-dm-input": e === "button",
1005
+ // Link variant
1006
+ "text-lm-brand dark:text-dm-brand": e === "link",
1007
+ "highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline": e === "link",
1008
+ // Button sizes
1009
+ "px-1.5 py-1 text-sm": e !== "text" && o === "sm",
1010
+ "px-3 py-1.5": e !== "text" && o === "md",
1011
+ "px-4 py-2 text-lg": e !== "text" && o === "lg",
1012
+ "gap-x-1.5": o === "sm",
1013
+ "gap-x-2": o !== "sm"
1014
+ },
1015
+ a
1016
+ ),
1017
+ onKeyDown: (P) => {
1018
+ P.key === "ArrowDown" && (P.preventDefault(), g(!0));
1019
+ },
1020
+ children: [
1021
+ n,
1022
+ !c && /* @__PURE__ */ s(A, { icon: Le, size: "xs" })
1023
+ ]
1024
+ }
1025
+ ),
1026
+ x && /* @__PURE__ */ s(
1027
+ "div",
1028
+ {
1029
+ ref: h.setFloating,
1030
+ style: y,
1031
+ className: "min-w-full z-500",
1032
+ ...M(),
1033
+ children: /* @__PURE__ */ s(
1034
+ j,
1035
+ {
1036
+ className: d,
1037
+ id: $,
1038
+ focusableElementsSelector: '[role="menuitem"]:not([disabled]):not([aria-disabled]),input:not([disabled]),select:not([disabled])',
1039
+ focusFirstItem: !0,
1040
+ children: t
1041
+ }
1042
+ )
1043
+ }
1044
+ )
1045
+ ]
1046
+ }
1047
+ );
1048
+ }, R = Object.assign(kt, {
1049
+ Item: j.Item,
1050
+ Separator: j.Separator,
1051
+ Title: j.Title,
1052
+ Misc: j.Misc
1053
+ }), wt = N(({ className: t, disabled: r, size: e = "md", type: n = "button", ...a }, o) => /* @__PURE__ */ s(
1054
+ "button",
1055
+ {
1056
+ className: p(
1057
+ "inline-flex rounded-md focus-ring",
1058
+ "text-lm-brand dark:text-dm-brand",
1059
+ "highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline",
1060
+ {
1061
+ "px-1.5 py-1 text-sm": e === "sm",
1062
+ "px-3 py-1.5": e === "md",
1063
+ "px-4 py-2 text-lg": e === "lg",
1064
+ "cursor-pointer": !r,
1065
+ "pointer-events-none opacity-65": r
1066
+ },
1067
+ t
1068
+ ),
1069
+ disabled: r,
1070
+ type: n,
1071
+ ...a,
1072
+ ref: o
1073
+ }
1074
+ )), vt = ({ className: t, active: r, ...e }) => /* @__PURE__ */ s("li", { role: "menuitem", className: "w-full flex", "data-active": r, children: /* @__PURE__ */ s(
1075
+ q,
1076
+ {
1077
+ className: f(
1078
+ "px-2 py-3",
1079
+ "max-md:w-full max-md:px-3 max-md:py-2",
1080
+ "text-white no-underline highlight:opacity-100 transition-opacity",
1081
+ {
1082
+ "opacity-60": !r,
1083
+ "opacity-100": r
1084
+ },
1085
+ t
1086
+ ),
1087
+ ...e
1088
+ }
1089
+ ) }), Nt = ({ containerClassName: t, buttonClassName: r, menuClassName: e, active: n, ...a }) => /* @__PURE__ */ s("li", { role: "menuitem", "aria-haspopup": !0, className: "w-full flex", "data-active": n, children: /* @__PURE__ */ s(
1090
+ R,
1091
+ {
1092
+ containerClassName: f("max-md:w-full", t),
1093
+ buttonVariant: "text",
1094
+ buttonClassName: f(
1095
+ "px-2 py-3",
1096
+ "max-md:w-full max-md:px-3 max-md:py-2",
1097
+ "text-white highlight:opacity-100 transition-opacity",
1098
+ {
1099
+ "opacity-60": !n,
1100
+ "opacity-100": n
1101
+ },
1102
+ r
1103
+ ),
1104
+ menuAlignment: "right",
1105
+ menuOffset: -3,
1106
+ menuClassName: f("mx-2", e),
1107
+ ...a
1108
+ }
1109
+ ) }), Ct = ({ className: t, brand: r, children: e }) => {
1110
+ const { flag: n, toggle: a, setToFalse: o } = pe(), l = _(), i = _(), { pathname: d } = se();
1111
+ return T(() => o(), [d, o]), /* @__PURE__ */ b(
1112
+ "nav",
1113
+ {
1114
+ className: f(
1115
+ "w-full relative",
1116
+ "bg-lm-main dark:bg-dm-main",
1117
+ "flex max-md:flex-col items-center justify-between",
1118
+ t
1119
+ ),
1120
+ children: [
1121
+ /* @__PURE__ */ b("div", { className: "w-full relative", children: [
1122
+ /* @__PURE__ */ s(
1123
+ "h4",
1124
+ {
1125
+ className: f(
1126
+ "text-white px-4 py-3",
1127
+ "max-md:w-full max-md:flex max-md:flex-col items-center"
1128
+ ),
1129
+ children: r
1130
+ }
1131
+ ),
1132
+ /* @__PURE__ */ s(
1133
+ ce,
1134
+ {
1135
+ id: i,
1136
+ variant: "secondary",
1137
+ className: f(
1138
+ "absolute right-0 top-[50%] translate-y-[-50%]",
1139
+ "md:hidden mx-2 [&]:px-2",
1140
+ "opacity-60 highlight:opacity-100 transition-opacity",
1141
+ "[&]:text-inherit [&]:border-white [&]:highlight:bg-transparent"
1142
+ ),
1143
+ onClick: a,
1144
+ "aria-label": `${n ? "Hide" : "Show"} menu`,
1145
+ "aria-controls": l,
1146
+ children: /* @__PURE__ */ s(A, { icon: n ? Re : Te })
1147
+ }
1148
+ )
1149
+ ] }),
1150
+ /* @__PURE__ */ s(
1151
+ "ul",
1152
+ {
1153
+ id: l,
1154
+ "aria-labelledby": i,
1155
+ role: "menu",
1156
+ className: f(
1157
+ "m-0 p-0",
1158
+ "max-md:w-full md:mr-2 max-md:absolute max-md:top-full z-2000",
1159
+ "flex max-md:flex-col items-center",
1160
+ "bg-lm-main dark:bg-dm-main",
1161
+ { "max-md:hidden": !n }
1162
+ ),
1163
+ children: e
1164
+ }
1165
+ )
1166
+ ]
1167
+ }
1168
+ );
1169
+ }, ur = Object.assign(Ct, { MenuItem: vt, Dropdown: Nt }), be = X(null), At = ({ className: t, to: r, ...e }) => {
1170
+ const n = E(be);
1171
+ return /* @__PURE__ */ s(
1172
+ ve,
1173
+ {
1174
+ role: "menuitem",
1175
+ to: r,
1176
+ className: ({ isActive: a }) => p(
1177
+ "px-4 pt-2 pb-[calc(0.5rem-3px)] border-b-3",
1178
+ "highlight:text-lm-brand dark:highlight:text-dm-brand",
1179
+ "font-bold text-center no-underline transition-colors",
1180
+ "rounded-none outline-none focus-visible:inset-ring-2",
1181
+ "focus-visible:inset-ring-lm-brand/50 dark:focus-visible:inset-ring-dm-brand/50",
1182
+ {
1183
+ "text-lm-brand dark:text-dm-brand": a,
1184
+ "border-b-lm-brand dark:border-b-dm-brand active": a,
1185
+ "border-b-transparent text-gray-500": !a,
1186
+ "flex-grow": n == null ? void 0 : n.fill
1187
+ },
1188
+ t
1189
+ ),
1190
+ ...e
1191
+ }
1192
+ );
1193
+ }, It = ({ children: t, className: r, fill: e }) => /* @__PURE__ */ s(be.Provider, { value: { fill: e }, children: /* @__PURE__ */ s(L, { role: "menubar", className: p("flex overflow-hidden", r), children: t }) }), pr = Object.assign(It, { Pill: At }), Ot = new Intl.NumberFormat("en-US"), Lt = (t) => Ot.format(Number(t)), ae = 10, br = (t) => Math.ceil(t / ae) * ae, B = 2, K = "...", Rt = (t, r) => Array.from({ length: r - t }, (e, n) => t + n), Tt = (t, r) => {
1194
+ const e = Rt(
1195
+ Math.max(B, t - B),
1196
+ Math.min(r - 1, t + B) + 1
1197
+ );
1198
+ return t - B > B && e.unshift(K), t + B < r - 1 && e.push(K), e.unshift(1), e.push(r), e;
1199
+ }, U = (t) => t === K, St = (t) => U(t) ? t : Lt(t), Pt = (t, r) => U(t) ? `${t}_${r}` : `${t}`, ge = [
1200
+ "border border-r-0 last:border-r border-lm-border dark:border-dm-border",
1201
+ "rounded-none first:rounded-l last:rounded-r"
1202
+ ], he = (t = !1) => p(
1203
+ ge,
1204
+ "px-3 py-2 cursor-pointer no-underline",
1205
+ "focus-ring focus-visible:z-1",
1206
+ !t && [
1207
+ "text-lm-brand dark:text-dm-brand",
1208
+ "bg-lm-primary dark:bg-dm-primary",
1209
+ "highlight:bg-lm-secondary dark:highlight:bg-dm-secondary"
1210
+ ],
1211
+ t && "bg-lm-main dark:bg-dm-main text-white"
1212
+ ), Y = ({ children: t }) => /* @__PURE__ */ s("span", { "aria-hidden": !0, className: p(ge, "px-3 py-2 text-gray-400"), children: t }), fe = () => /* @__PURE__ */ s(Y, { children: K });
1213
+ function Dt({ children: t, active: r, isEllipsis: e, href: n, ...a }) {
1214
+ const o = D(() => he(r), [r]);
1215
+ return e ? /* @__PURE__ */ s(fe, {}) : /* @__PURE__ */ s(q, { className: o, to: n, ...a, children: t });
1216
+ }
1217
+ function Et({ children: t, active: r, isEllipsis: e, ...n }) {
1218
+ const a = D(() => he(r), [r]);
1219
+ return e ? /* @__PURE__ */ s(fe, {}) : /* @__PURE__ */ s("button", { type: "button", className: a, ...n, children: t });
1220
+ }
1221
+ const gr = ({ currentPage: t, pagesCount: r, ...e }) => {
1222
+ const n = "urlForPage" in e, a = n ? Dt : Et, o = v(
1223
+ (l) => n ? { href: U(l) ? void 0 : e.urlForPage(l) } : { onClick: () => !U(l) && e.onPageChange(l) },
1224
+ [n, e]
1225
+ );
1226
+ return r < 2 ? null : /* @__PURE__ */ b("div", { className: "select-none flex", "data-testid": "paginator", children: [
1227
+ t === 1 ? /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(A, { size: "xs", icon: te }) }) : /* @__PURE__ */ s(a, { ...o(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ s(A, { size: "xs", icon: te }) }),
1228
+ Tt(t, r).map((l, i) => /* @__PURE__ */ s(
1229
+ a,
1230
+ {
1231
+ active: l === t,
1232
+ isEllipsis: U(l),
1233
+ ...o(l),
1234
+ children: St(l)
1235
+ },
1236
+ Pt(l, i)
1237
+ )),
1238
+ t === r ? /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(A, { size: "xs", icon: re }) }) : /* @__PURE__ */ s(a, { ...o(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ s(A, { size: "xs", icon: re }) })
158
1239
  ] });
159
- }, Ce = ({ children: r, minWidth: e, label: s = "Options" }) => /* @__PURE__ */ n(
160
- re,
1240
+ }, Mt = ({ buttonLabel: t = "Options", buttonSize: r = "md", ...e }) => /* @__PURE__ */ s(
1241
+ R,
161
1242
  {
162
- text: /* @__PURE__ */ n(g, { className: "px-1", icon: D }),
163
- "aria-label": s,
164
- size: "sm",
165
- minWidth: e,
166
- end: !0,
167
- noCaret: !0,
168
- inline: !0,
169
- children: r
1243
+ buttonContent: /* @__PURE__ */ s(
1244
+ A,
1245
+ {
1246
+ icon: Se,
1247
+ className: f({ "px-1": r === "sm" })
1248
+ }
1249
+ ),
1250
+ caretless: !0,
1251
+ buttonLabel: t,
1252
+ buttonSize: r,
1253
+ ...e
170
1254
  }
171
- ), te = ({ children: r, ...e }) => /* @__PURE__ */ n($, { children: /* @__PURE__ */ n(F, { className: "nav-pills__nav-link", tag: X, ...e, children: r }) }), Oe = ({ children: r, fill: e = !1, className: s = "" }) => /* @__PURE__ */ n(w, { className: `nav-pills__nav p-0 overflow-hidden ${s}`, body: !0, children: /* @__PURE__ */ n(G, { pills: !0, fill: e, children: Q.map(r, (t) => {
172
- if (!V(t) || t.type !== te)
173
- throw new Error("Only NavPillItem children are allowed inside NavPills.");
174
- return t;
175
- }) }) });
176
- function xe({ items: r, order: e, onChange: s, isButton: t = !0, right: a = !1, prefixed: c = !0 }) {
177
- const [l, h] = L(), d = (o) => () => {
178
- const m = W(o, e.field, e.dir);
179
- s(m ? o : void 0, m);
180
- };
181
- return /* @__PURE__ */ i(v, { isOpen: l, toggle: h, children: [
182
- /* @__PURE__ */ i(
183
- k,
1255
+ ), hr = Object.assign(Mt, {
1256
+ Item: R.Item,
1257
+ Separator: R.Separator,
1258
+ Title: R.Title,
1259
+ Misc: R.Misc
1260
+ }), _t = ({
1261
+ open: t,
1262
+ children: r,
1263
+ className: e,
1264
+ onClose: n,
1265
+ ...a
1266
+ }) => {
1267
+ const o = I(null);
1268
+ return T(() => {
1269
+ var c, k;
1270
+ const l = document.body, i = l.style.overflow, d = l.style.paddingRight;
1271
+ if (t) {
1272
+ const w = window.outerWidth - l.clientWidth, x = l.scrollHeight > l.clientHeight;
1273
+ l.style.overflow = "hidden", x && (l.style.paddingRight = `${w}px`), (c = o.current) == null || c.showModal();
1274
+ } else
1275
+ (k = o.current) == null || k.close();
1276
+ return () => {
1277
+ l.style.overflow = i, l.style.paddingRight = d;
1278
+ };
1279
+ }, [t]), Ue(
1280
+ /* @__PURE__ */ s(
1281
+ "dialog",
184
1282
  {
185
- caret: !0,
186
- color: t ? "primary" : "link",
187
- className: u({
188
- "dropdown-btn__toggle btn-block pe-4 overflow-hidden": t,
189
- "btn-sm p-0": !t
190
- }),
191
- children: [
192
- !t && /* @__PURE__ */ n(f, { children: "Order by" }),
193
- t && !e.field && /* @__PURE__ */ n("i", { children: "Order by..." }),
194
- t && e.field && /* @__PURE__ */ i(f, { children: [
195
- c && "Order by: ",
196
- r[e.field],
197
- " - ",
198
- /* @__PURE__ */ n("small", { children: e.dir ?? "DESC" })
199
- ] })
200
- ]
1283
+ ref: o,
1284
+ className: p("bg-transparent backdrop:bg-black/50", e),
1285
+ onCancel: (l) => {
1286
+ l.preventDefault(), n();
1287
+ },
1288
+ ...a,
1289
+ children: t && r
201
1290
  }
202
1291
  ),
203
- /* @__PURE__ */ n(C, { end: a, className: "w-100", style: t ? void 0 : { minWidth: "11rem" }, children: l && /* @__PURE__ */ i(f, { children: [
204
- Object.entries(r).map(([o, m]) => /* @__PURE__ */ i(
205
- b,
1292
+ document.body
1293
+ );
1294
+ }, fr = ({
1295
+ open: t,
1296
+ onClose: r,
1297
+ variant: e = "default",
1298
+ title: n,
1299
+ children: a,
1300
+ className: o,
1301
+ ...l
1302
+ }) => {
1303
+ const {
1304
+ size: i = "md",
1305
+ confirmText: d = "Confirm",
1306
+ cancelText: c = "Cancel",
1307
+ confirmDisabled: k,
1308
+ onConfirm: w,
1309
+ onClosed: x,
1310
+ ...g
1311
+ } = "onConfirm" in l ? l : { ...l }, [m, h] = S(t), y = I(null), u = I("cancel"), O = v((C) => {
1312
+ C.preventDefault(), C.stopPropagation(), u.current = "confirm", w == null || w();
1313
+ }, [w]);
1314
+ return T(() => {
1315
+ if (t) {
1316
+ u.current = "cancel", h(!0);
1317
+ return;
1318
+ }
1319
+ const C = y.current;
1320
+ if (C) {
1321
+ delete y.current.dataset.open;
1322
+ let M = !1;
1323
+ const $ = (H) => {
1324
+ M || H.target !== C || (M = !0, h(!1), x == null || x(u.current));
1325
+ };
1326
+ return C.addEventListener("transitionend", $), () => {
1327
+ C.removeEventListener("transitionend", $);
1328
+ };
1329
+ }
1330
+ }, [x, t]), T(() => {
1331
+ const C = y.current;
1332
+ m && C && (C.dataset.open = "");
1333
+ }, [m]), /* @__PURE__ */ s(
1334
+ _t,
1335
+ {
1336
+ open: m,
1337
+ onClose: r,
1338
+ className: p(
206
1339
  {
207
- active: e.field === o,
208
- onClick: d(o),
209
- className: "d-flex justify-content-between align-items-center",
210
- tabIndex: -1,
211
- children: [
212
- m,
213
- e.field === o && /* @__PURE__ */ n(g, { icon: e.dir === "ASC" ? P : E })
214
- ]
1340
+ "flex w-screen h-screen max-w-screen max-h-screen": m,
1341
+ "overflow-hidden": e === "cover"
215
1342
  },
216
1343
  o
217
- )),
218
- /* @__PURE__ */ n(b, { divider: !0, tag: "hr" }),
219
- /* @__PURE__ */ n(b, { disabled: !e.field, onClick: () => s(), tabIndex: -1, children: /* @__PURE__ */ n("i", { children: "Clear selection" }) })
220
- ] }) })
221
- ] });
1344
+ ),
1345
+ ...g,
1346
+ children: /* @__PURE__ */ s(
1347
+ "form",
1348
+ {
1349
+ "data-testid": "transition-container",
1350
+ ref: y,
1351
+ className: p(
1352
+ "w-full m-auto p-4 sm:p-6",
1353
+ // CSS transitions are based on the presence of the `data-open` attribute
1354
+ "-translate-y-4 data-open:translate-y-0 opacity-0 data-open:opacity-100",
1355
+ "transition-[opacity_,_translate] duration-300",
1356
+ // Handle modal dimensions for different variants and sizes
1357
+ e !== "cover" && {
1358
+ "sm:w-sm": i === "sm",
1359
+ "md:w-lg": i === "md",
1360
+ "md:w-4xl": i === "lg",
1361
+ "md:w-6xl": i === "xl"
1362
+ },
1363
+ { "h-full": e === "cover" }
1364
+ ),
1365
+ onSubmit: O,
1366
+ children: /* @__PURE__ */ s(L, { className: p(
1367
+ "w-full",
1368
+ { "h-full relative overflow-auto": e === "cover" }
1369
+ ), children: e === "cover" ? /* @__PURE__ */ b(G, { children: [
1370
+ /* @__PURE__ */ b(
1371
+ "div",
1372
+ {
1373
+ className: p(
1374
+ "px-4 py-3 absolute top-0 left-0 right-0 z-3000",
1375
+ "flex items-center justify-between",
1376
+ "text-white bg-linear-to-b from-black/70 to-black/10",
1377
+ "[text-shadow:_0_2px_4px_rgb(0_0_0/_0.8)]"
1378
+ ),
1379
+ children: [
1380
+ /* @__PURE__ */ s("h5", { children: n }),
1381
+ /* @__PURE__ */ s(Q, { onClick: r, label: "Close dialog" })
1382
+ ]
1383
+ }
1384
+ ),
1385
+ a
1386
+ ] }) : /* @__PURE__ */ b(G, { children: [
1387
+ /* @__PURE__ */ b(L.Header, { className: p(
1388
+ "sticky top-0",
1389
+ "flex items-center justify-between gap-x-2"
1390
+ ), children: [
1391
+ /* @__PURE__ */ s("h5", { className: p({ "text-danger": e === "danger" }), children: n }),
1392
+ /* @__PURE__ */ s(Q, { onClick: r, label: "Close dialog" })
1393
+ ] }),
1394
+ /* @__PURE__ */ s(L.Body, { children: a }),
1395
+ w && /* @__PURE__ */ b(
1396
+ L.Footer,
1397
+ {
1398
+ "data-testid": "footer",
1399
+ className: p(
1400
+ "flex justify-end items-center gap-x-2",
1401
+ "[&]:px-3 sticky bottom-0"
1402
+ ),
1403
+ children: [
1404
+ /* @__PURE__ */ s(wt, { onClick: r, children: c }),
1405
+ /* @__PURE__ */ s(
1406
+ ce,
1407
+ {
1408
+ solid: !0,
1409
+ variant: e === "danger" ? "danger" : "primary",
1410
+ disabled: k,
1411
+ type: "submit",
1412
+ children: d
1413
+ }
1414
+ )
1415
+ ]
1416
+ }
1417
+ )
1418
+ ] }) })
1419
+ }
1420
+ )
1421
+ }
1422
+ );
1423
+ }, xr = ({ className: t, children: r, loading: e = !1, variant: n = "default" }) => /* @__PURE__ */ s(Qe, { className: f({ "[&]:border-danger": n === "error" }, t), children: /* @__PURE__ */ b("h3", { className: f("text-center", {
1424
+ "text-gray-500 dark:text-gray-400": n === "default",
1425
+ "text-danger": n === "error"
1426
+ }), children: [
1427
+ e && /* @__PURE__ */ b(G, { children: [
1428
+ /* @__PURE__ */ s(A, { icon: le, spin: !0 }),
1429
+ /* @__PURE__ */ s("span", { className: "ml-2", children: r ?? "Loading..." })
1430
+ ] }),
1431
+ !e && r
1432
+ ] }) }), yr = ({ variant: t, className: r, size: e = "md", children: n }) => /* @__PURE__ */ s(
1433
+ "div",
1434
+ {
1435
+ className: f(
1436
+ "rounded-md text-center",
1437
+ {
1438
+ "p-2": e === "sm",
1439
+ "p-4": e === "md",
1440
+ "p-6": e === "lg",
1441
+ "[&]:text-white": t !== "warning",
1442
+ "bg-lm-brand dark:bg-dm-brand": t === "success",
1443
+ "bg-danger": t === "error",
1444
+ "bg-warning text-black": t === "warning"
1445
+ },
1446
+ r
1447
+ ),
1448
+ children: n
1449
+ }
1450
+ ), kr = ({ placement: t = "auto" } = {}) => {
1451
+ const r = I(null), e = (() => {
1452
+ const h = [];
1453
+ return t === "auto" && h.push(Be()), h.push(Fe({ element: r })), h;
1454
+ })(), [n, a] = S(!1), { refs: o, floatingStyles: l, context: i, middlewareData: d } = ie({
1455
+ placement: t === "auto" ? void 0 : t,
1456
+ open: n,
1457
+ onOpenChange: a,
1458
+ middleware: e
1459
+ }), c = $e(i, {
1460
+ delay: { open: 300 },
1461
+ move: !0
1462
+ }), { getFloatingProps: k, getReferenceProps: w } = de([c]), { isMounted: x, styles: g } = He(i, { duration: 200 }), m = D(() => {
1463
+ const h = i.placement.split("-")[0];
1464
+ return {
1465
+ top: "bottom",
1466
+ right: "left",
1467
+ bottom: "top",
1468
+ left: "right"
1469
+ }[h] ?? "";
1470
+ }, [i.placement]);
1471
+ return {
1472
+ anchor: { ...w(), ref: o.setReference },
1473
+ tooltip: {
1474
+ ...k(),
1475
+ refSetter: o.setFloating,
1476
+ isMounted: x,
1477
+ styles: { ...l, ...g },
1478
+ arrowPos: d.arrow,
1479
+ arrowRef: r,
1480
+ arrowSide: m
1481
+ }
1482
+ };
1483
+ }, wr = ({ children: t, isMounted: r, styles: e, refSetter: n, arrowRef: a, arrowPos: o, arrowSide: l, ...i }) => {
1484
+ var d;
1485
+ return r && /* @__PURE__ */ s(
1486
+ "div",
1487
+ {
1488
+ role: "tooltip",
1489
+ "aria-live": "polite",
1490
+ className: f(
1491
+ "z-500 max-w-64",
1492
+ // Add space between anchor and tooltip via padding, so that if the tooltip is inside the anchor, you can hover it
1493
+ // and it's never closed
1494
+ {
1495
+ "pt-2.5": l === "top",
1496
+ "pb-2.5": l === "bottom",
1497
+ "pr-2.5": l === "right",
1498
+ "pl-2.5": l === "left"
1499
+ }
1500
+ ),
1501
+ ref: n,
1502
+ style: e,
1503
+ ...i,
1504
+ children: /* @__PURE__ */ b("div", { className: "relative px-1.5 py-1 rounded bg-black/90 text-white text-center", children: [
1505
+ /* @__PURE__ */ s("span", { className: "sr-only", children: "Tooltip: " }),
1506
+ t,
1507
+ /* @__PURE__ */ s(
1508
+ "div",
1509
+ {
1510
+ ref: a,
1511
+ className: f(
1512
+ "absolute",
1513
+ // Render as a triangle
1514
+ "border-l-6 border-r-6 border-b-6 border-l-transparent border-r-transparent border-b-black/90",
1515
+ // Rotate triangle so that it points to the correct direction
1516
+ {
1517
+ "rotate-180": l === "bottom",
1518
+ "rotate-90 mr-[-3px]": l === "right",
1519
+ "rotate-270 ml-[-3px]": l === "left"
1520
+ }
1521
+ ),
1522
+ style: {
1523
+ left: o == null ? void 0 : o.x,
1524
+ top: o == null ? void 0 : o.y,
1525
+ [l]: `${-(((d = a.current) == null ? void 0 : d.offsetWidth) ?? 0) / 2}px`
1526
+ },
1527
+ "data-testid": "arrow"
1528
+ }
1529
+ )
1530
+ ] })
1531
+ }
1532
+ );
1533
+ };
1534
+ function Bt(t) {
1535
+ if (t.currentField !== t.newField)
1536
+ return "ASC";
1537
+ const r = {
1538
+ ASC: "DESC",
1539
+ DESC: void 0
1540
+ };
1541
+ return t.currentOrderDir ? r[t.currentOrderDir] : "ASC";
1542
+ }
1543
+ function Ft(t) {
1544
+ const r = Bt(t);
1545
+ return {
1546
+ field: r ? t.newField : void 0,
1547
+ dir: r
1548
+ };
1549
+ }
1550
+ const vr = (t, { field: r, dir: e }) => !r || !e ? t : t.sort((n, a) => {
1551
+ const o = e === "ASC" ? 1 : -1, l = e === "ASC" ? -1 : 1;
1552
+ return n[r] > a[r] ? o : l;
1553
+ }), Nr = (t) => t.dir ? `${t.field}-${t.dir}` : void 0, Cr = (t) => {
1554
+ const [r, e] = t.split("-");
1555
+ return { field: r, dir: e };
1556
+ };
1557
+ function Ar({ items: t, order: r, onChange: e, prefixed: n = !0, buttonVariant: a = "button", ...o }) {
1558
+ const l = v((d) => {
1559
+ const c = Ft({ currentOrderDir: r.dir, currentField: r.field, newField: d });
1560
+ e(c);
1561
+ }, [e, r.dir, r.field]), i = a === "button";
1562
+ return /* @__PURE__ */ b(
1563
+ R,
1564
+ {
1565
+ buttonContent: /* @__PURE__ */ b(G, { children: [
1566
+ !i && "Order by",
1567
+ i && !r.field && /* @__PURE__ */ s("i", { children: "Order by..." }),
1568
+ i && r.field && /* @__PURE__ */ b(G, { children: [
1569
+ n && "Order by: ",
1570
+ t[r.field],
1571
+ " - ",
1572
+ r.dir ?? "DESC"
1573
+ ] })
1574
+ ] }),
1575
+ buttonVariant: a,
1576
+ ...o,
1577
+ children: [
1578
+ Object.entries(t).map(([d, c]) => /* @__PURE__ */ b(
1579
+ R.Item,
1580
+ {
1581
+ selected: r.field === d,
1582
+ onClick: () => l(d),
1583
+ className: "flex items-center justify-between gap-2",
1584
+ children: [
1585
+ c,
1586
+ r.field === d && /* @__PURE__ */ s(A, { icon: r.dir === "ASC" ? Pe : De })
1587
+ ]
1588
+ },
1589
+ d
1590
+ )),
1591
+ /* @__PURE__ */ s(R.Separator, {}),
1592
+ /* @__PURE__ */ s(R.Item, { disabled: !r.field, onClick: () => e({}), children: /* @__PURE__ */ s("i", { children: "Clear selection" }) })
1593
+ ]
1594
+ }
1595
+ );
222
1596
  }
223
- const Le = "#4696e5", Te = "rgba(70, 150, 229, 0.4)", ye = "#f77f28", Ae = "rgba(247, 127, 40, 0.4)", Ie = "white", Se = "#161b22", se = (r) => {
224
- var e;
225
- return (e = document.querySelector("html")) == null ? void 0 : e.setAttribute("data-theme", r);
226
- }, Re = () => {
1597
+ const $t = "#4696e5", Ht = "rgba(70, 150, 229, 0.4)", jt = "#2078CF", Ut = "rgba(32, 120, 207, 0.4)", Ir = () => xe() ? $t : jt, Or = () => xe() ? Ht : Ut, Lr = "#f77f28", Rr = "rgba(247, 127, 40, 0.4)", Tr = "white", Sr = "#161b22", Gt = (t) => {
227
1598
  var r;
228
- return ((r = document.querySelector("html")) == null ? void 0 : r.getAttribute("data-theme")) === "dark";
229
- }, ne = (r = window.matchMedia.bind(window)) => r("(prefers-color-scheme: dark)").matches ? "dark" : "light", De = (r) => {
230
- const [e, s] = x(() => r ?? ne());
231
- return Y(() => {
232
- se(e);
233
- }, [e]), [e, s];
1599
+ return (r = document.querySelector("html")) == null ? void 0 : r.setAttribute("data-theme", t);
1600
+ }, xe = () => {
1601
+ var t;
1602
+ return ((t = document.querySelector("html")) == null ? void 0 : t.getAttribute("data-theme")) === "dark";
1603
+ }, Wt = (t = window.matchMedia.bind(window)) => t("(prefers-color-scheme: dark)").matches ? "dark" : "light", Pr = (t) => {
1604
+ const [r, e] = S(() => t ?? Wt());
1605
+ return T(() => {
1606
+ Gt(r);
1607
+ }, [r]), [r, e];
234
1608
  };
235
1609
  export {
236
- pe as Checkbox,
237
- re as DropdownBtn,
238
- ye as HIGHLIGHTED_COLOR,
239
- Ae as HIGHLIGHTED_COLOR_ALPHA,
240
- be as InputFormGroup,
241
- B as LabeledFormGroup,
242
- Le as MAIN_COLOR,
243
- Te as MAIN_COLOR_ALPHA,
244
- ue as Message,
245
- te as NavPillItem,
246
- Oe as NavPills,
247
- xe as OrderingDropdown,
248
- Se as PRIMARY_DARK_COLOR,
249
- Ie as PRIMARY_LIGHT_COLOR,
250
- fe as Result,
251
- Ce as RowDropdownBtn,
252
- we as SearchField,
253
- Z as SimpleCard,
254
- ge as ToggleSwitch,
255
- se as changeThemeInMarkup,
256
- He as determineOrder,
257
- W as determineOrderDir,
258
- ne as getSystemPreferredTheme,
259
- Re as isDarkThemeEnabled,
260
- Me as isLightColor,
261
- $e as orderToString,
262
- ee as parseQueryString,
263
- Fe as sortList,
264
- Ge as stringToOrder,
265
- ve as stringifyQueryParams,
266
- je as useArrowKeyNavigation,
267
- Ne as useElementRef,
268
- _e as useGoBack,
269
- Ue as useOrder,
270
- ke as useParsedQuery,
271
- De as useTheme,
272
- qe as useTimeout,
273
- Qe as useTimeoutToggle,
274
- L as useToggle
1610
+ Ht as BRAND_COLOR_ALPHA_DM,
1611
+ Ut as BRAND_COLOR_ALPHA_LM,
1612
+ $t as BRAND_COLOR_DM,
1613
+ jt as BRAND_COLOR_LM,
1614
+ Ct as BaseNavBar,
1615
+ ce as Button,
1616
+ L as Card,
1617
+ fr as CardModal,
1618
+ rr as Checkbox,
1619
+ Q as CloseButton,
1620
+ dr as CopyToClipboardButton,
1621
+ er as Details,
1622
+ R as Dropdown,
1623
+ K as ELLIPSIS,
1624
+ Lr as HIGHLIGHTED_COLOR,
1625
+ Rr as HIGHLIGHTED_COLOR_ALPHA,
1626
+ J as Input,
1627
+ Z as Label,
1628
+ nr as LabelledInput,
1629
+ or as LabelledRevealablePasswordInput,
1630
+ ar as LabelledSelect,
1631
+ wt as LinkButton,
1632
+ Ye as Listbox,
1633
+ j as Menu,
1634
+ xr as Message,
1635
+ _t as ModalDialog,
1636
+ ur as NavBar,
1637
+ pr as NavPills,
1638
+ Ar as OrderingDropdown,
1639
+ Sr as PRIMARY_DARK_COLOR,
1640
+ Tr as PRIMARY_LIGHT_COLOR,
1641
+ gr as Paginator,
1642
+ yr as Result,
1643
+ tt as RevealablePasswordInput,
1644
+ hr as RowDropdown,
1645
+ at as SearchCombobox,
1646
+ nt as SearchInput,
1647
+ rt as Select,
1648
+ Qe as SimpleCard,
1649
+ tr as Table,
1650
+ sr as TagsAutocomplete,
1651
+ lr as ToggleSwitch,
1652
+ wr as Tooltip,
1653
+ Ir as brandColor,
1654
+ Or as brandColorAlpha,
1655
+ Gt as changeThemeInMarkup,
1656
+ Ft as determineOrder,
1657
+ Bt as determineOrderDir,
1658
+ Lt as formatNumber,
1659
+ Wt as getSystemPreferredTheme,
1660
+ xe as isDarkThemeEnabled,
1661
+ mt as isLightColor,
1662
+ Pt as keyForPage,
1663
+ Nr as orderToString,
1664
+ U as pageIsEllipsis,
1665
+ ut as parseQueryString,
1666
+ St as prettifyPageNumber,
1667
+ Tt as progressivePagination,
1668
+ br as roundTen,
1669
+ vr as sortList,
1670
+ Cr as stringToOrder,
1671
+ cr as stringifyQueryParams,
1672
+ dt as useArrowKeyNavigation,
1673
+ ir as useGoBack,
1674
+ mr as useParsedQuery,
1675
+ Pr as useTheme,
1676
+ ue as useTimeout,
1677
+ bt as useTimeoutToggle,
1678
+ pe as useToggle,
1679
+ kr as useTooltip
275
1680
  };