@shlinkio/shlink-frontend-kit 0.8.6 → 0.8.8

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 (7) hide show
  1. package/dist/index.d.ts +3 -0
  2. package/dist/index.js +107 -104
  3. package/dist/tailwind.d.ts +60 -1
  4. package/dist/tailwind.js +503 -380
  5. package/dist/use-toggle-CNvdDGvy.js +22 -0
  6. package/package.json +1 -1
  7. package/dist/use-toggle-DlYE68B3.js +0 -24
package/dist/tailwind.js CHANGED
@@ -1,111 +1,219 @@
1
- import { jsx as o, jsxs as i, Fragment as S } from "react/jsx-runtime";
2
- import w, { clsx as p } from "clsx";
3
- import { createContext as M, useContext as f, forwardRef as b, useCallback as C, useId as j, useMemo as J, useRef as E, useEffect as F, useState as rt } from "react";
4
- import { Link as K, NavLink as ot } from "react-router";
5
- import { faClose as nt, faEyeSlash as at, faEye as dt, faSearch as lt, faChevronLeft as U, faChevronRight as W, faCircleNotch as st } from "@fortawesome/free-solid-svg-icons";
6
- import { FontAwesomeIcon as u } from "@fortawesome/react-fontawesome";
7
- import { a as wt, b as it, u as ct } from "./use-toggle-DlYE68B3.js";
8
- import { createPortal as mt } from "react-dom";
9
- const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className: r }) => {
10
- const { responsive: e } = f(v);
11
- return /* @__PURE__ */ o(I.Provider, { value: { section: "head" }, children: /* @__PURE__ */ o(
1
+ import { jsx as o, jsxs as b, Fragment as S } from "react/jsx-runtime";
2
+ import i, { clsx as x } from "clsx";
3
+ import { useState as K, useEffect as M, createContext as H, useContext as v, forwardRef as p, useCallback as I, useId as _, useRef as L, useMemo as Q } from "react";
4
+ import { Link as j, NavLink as nt } from "react-router";
5
+ import { faClose as at, faEyeSlash as lt, faEye as dt, faCircleNotch as V, faSearch as st, faChevronLeft as q, faChevronRight as z } from "@fortawesome/free-solid-svg-icons";
6
+ import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
7
+ import { a as it, u as wt } from "./use-toggle-CNvdDGvy.js";
8
+ import { createPortal as ct } from "react-dom";
9
+ const mt = ({ className: t, ...e }) => /* @__PURE__ */ o(
10
+ "div",
11
+ {
12
+ className: i(
13
+ "tw:px-4 tw:py-3 tw:rounded-t-md",
14
+ "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
15
+ t
16
+ ),
17
+ ...e
18
+ }
19
+ ), gt = ({ className: t, ...e }) => /* @__PURE__ */ o(
20
+ "div",
21
+ {
22
+ className: i(
23
+ "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
24
+ "tw:first:rounded-t-md tw:last:rounded-b-md",
25
+ t
26
+ ),
27
+ ...e
28
+ }
29
+ ), bt = ({ className: t, ...e }) => /* @__PURE__ */ o(
30
+ "div",
31
+ {
32
+ className: i(
33
+ "tw:px-4 tw:py-3 tw:rounded-b-md",
34
+ "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
35
+ t
36
+ ),
37
+ ...e
38
+ }
39
+ ), ut = ({ className: t, ...e }) => /* @__PURE__ */ o(
40
+ "div",
41
+ {
42
+ className: i(
43
+ "tw:group/card tw:rounded-md tw:shadow-md",
44
+ "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
45
+ t
46
+ ),
47
+ ...e
48
+ }
49
+ ), f = Object.assign(ut, { Body: gt, Header: mt, Footer: bt }), pt = ({ bodyClassName: t, children: e, ...r }) => {
50
+ const { title: n, titleSize: a = "md", ...d } = "title" in r ? r : {
51
+ ...r,
52
+ title: void 0,
53
+ titleSize: void 0
54
+ };
55
+ return /* @__PURE__ */ b(f, { ...d, children: [
56
+ n && /* @__PURE__ */ b(f.Header, { children: [
57
+ a === "lg" && /* @__PURE__ */ o("h4", { children: n }),
58
+ a === "md" && /* @__PURE__ */ o("h5", { children: n }),
59
+ a === "sm" && /* @__PURE__ */ o("h6", { children: n })
60
+ ] }),
61
+ /* @__PURE__ */ o(f.Body, { className: t, children: e })
62
+ ] });
63
+ };
64
+ function ht({
65
+ id: t,
66
+ items: e,
67
+ onSelectItem: r,
68
+ renderItem: n,
69
+ className: a,
70
+ noItemsMessage: d = "No items",
71
+ anchor: l,
72
+ "aria-label": s = "Items",
73
+ ...c
74
+ }) {
75
+ const [g, m] = K(0);
76
+ return M(() => {
77
+ const w = l == null ? void 0 : l.current;
78
+ if (!w)
79
+ return;
80
+ const u = (h) => {
81
+ h.key === "ArrowDown" ? m((y) => Math.min(y + 1, e.size - 1)) : h.key === "ArrowUp" ? m((y) => Math.max(y - 1, 0)) : h.key === "Enter" && r([...e.values()][g]);
82
+ };
83
+ return w.addEventListener("keydown", u), () => w.removeEventListener("keydown", u);
84
+ }, [g, l, e, r]), /* @__PURE__ */ b(
85
+ f,
86
+ {
87
+ id: t,
88
+ className: i("tw:py-1 tw:flex tw:flex-col", a),
89
+ role: "listbox",
90
+ "aria-orientation": "vertical",
91
+ "aria-label": s,
92
+ ...c,
93
+ children: [
94
+ e.size === 0 && /* @__PURE__ */ o("i", { role: "option", "aria-disabled": !0, "aria-selected": !1, "data-testid": "no-items", className: "tw:px-2 tw:py-1", children: d }),
95
+ [...e.entries()].map(([w, u], h) => /* @__PURE__ */ o(
96
+ "button",
97
+ {
98
+ type: "button",
99
+ role: "option",
100
+ "aria-selected": h === g,
101
+ className: i(
102
+ "tw:px-2 tw:py-1 tw:text-left tw:truncate",
103
+ { "tw:bg-lm-secondary tw:dark:bg-dm-secondary": h === g }
104
+ ),
105
+ tabIndex: -1,
106
+ onClick: () => r(u),
107
+ onMouseOver: () => m(h),
108
+ children: n(u)
109
+ },
110
+ w
111
+ ))
112
+ ]
113
+ }
114
+ );
115
+ }
116
+ const B = H(void 0), C = H({ responsive: !0 }), ft = ({ children: t, className: e }) => {
117
+ const { responsive: r } = v(C);
118
+ return /* @__PURE__ */ o(B.Provider, { value: { section: "head" }, children: /* @__PURE__ */ o(
12
119
  "thead",
13
120
  {
14
- className: w(
15
- { "tw:hidden tw:lg:table-header-group": e },
16
- r
121
+ className: i(
122
+ { "tw:hidden tw:lg:table-header-group": r },
123
+ e
17
124
  ),
18
125
  children: t
19
126
  }
20
127
  ) });
21
- }, bt = ({ children: t, className: r }) => {
22
- const { responsive: e } = f(v);
23
- return /* @__PURE__ */ o(I.Provider, { value: { section: "body" }, children: /* @__PURE__ */ o(
128
+ }, xt = ({ children: t, className: e }) => {
129
+ const { responsive: r } = v(C);
130
+ return /* @__PURE__ */ o(B.Provider, { value: { section: "body" }, children: /* @__PURE__ */ o(
24
131
  "tbody",
25
132
  {
26
- className: w(
27
- { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": e },
28
- r
133
+ className: i(
134
+ { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3": r },
135
+ e
29
136
  ),
30
137
  children: t
31
138
  }
32
139
  ) });
33
- }, pt = ({ children: t, className: r }) => {
34
- const { responsive: e } = f(v);
35
- return /* @__PURE__ */ o(I.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ o(
140
+ }, yt = ({ children: t, className: e }) => {
141
+ const { responsive: r } = v(C);
142
+ return /* @__PURE__ */ o(B.Provider, { value: { section: "footer" }, children: /* @__PURE__ */ o(
36
143
  "tfoot",
37
144
  {
38
- className: w(
39
- { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": e },
40
- r
145
+ className: i(
146
+ { "tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3 tw:mt-4": r },
147
+ e
41
148
  ),
42
149
  children: t
43
150
  }
44
151
  ) });
45
- }, ut = ({ children: t, className: r, ...e }) => {
46
- const n = f(I), a = (n == null ? void 0 : n.section) === "body", { responsive: l } = f(v);
152
+ }, kt = ({ children: t, className: e, ...r }) => {
153
+ const n = v(B), a = (n == null ? void 0 : n.section) === "body", { responsive: d } = v(C);
47
154
  return /* @__PURE__ */ o(
48
155
  "tr",
49
156
  {
50
- className: w(
157
+ className: i(
51
158
  "tw:group",
52
159
  {
53
- "tw:lg:table-row tw:flex tw:flex-col": l,
54
- "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": l,
160
+ "tw:lg:table-row tw:flex tw:flex-col": d,
161
+ "tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border": d,
55
162
  "tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary": a,
56
163
  // Use a different hover bg color depending on the table being inside a card or not
57
164
  "tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary": a
58
165
  },
59
- r
166
+ e
60
167
  ),
61
- ...e,
168
+ ...r,
62
169
  children: t
63
170
  }
64
171
  );
65
- }, ht = ({ children: t, className: r, columnName: e, type: n, ...a }) => {
66
- const l = f(I), d = n ?? ((l == null ? void 0 : l.section) !== "body" ? "th" : "td"), { responsive: s } = f(v);
172
+ }, vt = ({ children: t, className: e, columnName: r, type: n, ...a }) => {
173
+ const d = v(B), l = n ?? ((d == null ? void 0 : d.section) !== "body" ? "th" : "td"), { responsive: s } = v(C);
67
174
  return /* @__PURE__ */ o(
68
- d,
175
+ l,
69
176
  {
70
- "data-column": s ? e : void 0,
71
- className: w(
177
+ "data-column": s ? r : void 0,
178
+ className: i(
72
179
  "tw:p-2 tw:border-lm-border tw:dark:border-dm-border",
73
180
  {
74
181
  "tw:border-b-1": !s,
75
182
  "tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1": s,
76
183
  // For md and lower, display the content in data-column attribute as before
77
- "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && d === "td"
184
+ "tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1": s && l === "td"
78
185
  },
79
- r
186
+ e
80
187
  ),
81
188
  ...a,
82
189
  children: t
83
190
  }
84
191
  );
85
- }, ft = ({ header: t, footer: r, children: e, responsive: n = !0, ...a }) => /* @__PURE__ */ o(v.Provider, { value: { responsive: n }, children: /* @__PURE__ */ i("table", { className: "tw:w-full", ...a, children: [
86
- /* @__PURE__ */ o(gt, { children: t }),
87
- /* @__PURE__ */ o(bt, { children: e }),
88
- r && /* @__PURE__ */ o(pt, { children: r })
89
- ] }) }), Kt = Object.assign(ft, { Row: ut, Cell: ht }), xt = ({
192
+ }, Nt = ({ header: t, footer: e, children: r, responsive: n = !0, ...a }) => /* @__PURE__ */ o(C.Provider, { value: { responsive: n }, children: /* @__PURE__ */ b("table", { className: "tw:w-full", ...a, children: [
193
+ /* @__PURE__ */ o(ft, { children: t }),
194
+ /* @__PURE__ */ o(xt, { children: r }),
195
+ e && /* @__PURE__ */ o(yt, { children: e })
196
+ ] }) }), Kt = Object.assign(Nt, { Row: kt, Cell: vt }), Pt = ({
90
197
  children: t,
91
- className: r,
92
- disabled: e,
198
+ className: e,
199
+ disabled: r,
93
200
  variant: n = "primary",
94
201
  size: a = "md",
95
- inline: l = !1,
96
- solid: d = !1,
97
- ...s
202
+ inline: d = !1,
203
+ solid: l = !1,
204
+ type: s = "button",
205
+ ...c
98
206
  }) => {
99
- const c = "to" in s ? K : "button";
207
+ const g = "to" in c ? j : "button", m = g === j ? void 0 : s;
100
208
  return (
101
209
  // @ts-expect-error We are explicitly checking for the `to` prop before using Link
102
210
  /* @__PURE__ */ o(
103
- c,
211
+ g,
104
212
  {
105
- className: w(
213
+ className: i(
106
214
  {
107
- "tw:inline-flex": l,
108
- "tw:flex": !l
215
+ "tw:inline-flex": d,
216
+ "tw:flex": !d
109
217
  },
110
218
  "tw:gap-2 tw:items-center tw:justify-center",
111
219
  "tw:border tw:rounded-md tw:no-underline",
@@ -122,11 +230,11 @@ const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className:
122
230
  {
123
231
  "tw:border-brand tw:text-brand": n === "primary",
124
232
  "tw:border-zinc-500": n === "secondary",
125
- "tw:text-zinc-500": n === "secondary" && !d,
233
+ "tw:text-zinc-500": n === "secondary" && !l,
126
234
  "tw:border-danger": n === "danger",
127
- "tw:text-danger": n === "danger" && !d
235
+ "tw:text-danger": n === "danger" && !l
128
236
  },
129
- d && {
237
+ l && {
130
238
  "tw:text-white": !0,
131
239
  "tw:bg-brand": n === "primary",
132
240
  "tw:highlight:bg-brand-dark tw:highlight:border-brand-dark": n === "primary",
@@ -135,31 +243,32 @@ const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className:
135
243
  "tw:bg-danger": n === "danger",
136
244
  "tw:highlight:bg-danger-dark tw:highlight:border-danger-dark": n === "danger"
137
245
  },
138
- !e && {
139
- "tw:highlight:text-white": !d,
246
+ !r && {
247
+ "tw:highlight:text-white": !l,
140
248
  "tw:highlight:bg-brand": n === "primary",
141
249
  "tw:highlight:bg-zinc-500": n === "secondary",
142
250
  "tw:highlight:bg-danger": n === "danger"
143
251
  },
144
252
  {
145
- "tw:pointer-events-none tw:opacity-65": e
253
+ "tw:pointer-events-none tw:opacity-65": r
146
254
  },
147
- r
255
+ e
148
256
  ),
149
- disabled: e,
150
- ...s,
257
+ disabled: r,
258
+ type: m,
259
+ ...c,
151
260
  children: t
152
261
  }
153
262
  )
154
263
  );
155
- }, Q = b(({ className: t, onChange: r, ...e }, n) => {
156
- const a = C((l) => r == null ? void 0 : r(l.target.checked, l), [r]);
264
+ }, X = p(({ className: t, onChange: e, ...r }, n) => {
265
+ const a = I((d) => e == null ? void 0 : e(d.target.checked, d), [e]);
157
266
  return /* @__PURE__ */ o(
158
267
  "input",
159
268
  {
160
269
  ref: n,
161
270
  type: "checkbox",
162
- className: p(
271
+ className: x(
163
272
  "tw:appearance-none tw:focus-ring",
164
273
  "tw:border-1 tw:border-lm-input-border tw:dark:border-dm-input-border",
165
274
  "tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-brand tw:bg-no-repeat",
@@ -168,56 +277,57 @@ const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className:
168
277
  t
169
278
  ),
170
279
  onChange: a,
171
- ...e
280
+ ...r
172
281
  }
173
282
  );
174
- }), Qt = b(({ className: t, ...r }, e) => /* @__PURE__ */ o(
175
- Q,
283
+ }), Qt = p(({ className: t, ...e }, r) => /* @__PURE__ */ o(
284
+ X,
176
285
  {
177
- ref: e,
178
- className: p("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
179
- ...r
286
+ ref: r,
287
+ className: x("tw:rounded-sm tw:w-4 tw:h-4 tw:checked:bg-(image:--tick) tw:bg-center", t),
288
+ ...e
180
289
  }
181
- )), q = ({ onClick: t, label: r = "Close" }) => /* @__PURE__ */ o(
290
+ )), G = ({ onClick: t, label: e = "Close" }) => /* @__PURE__ */ o(
182
291
  "button",
183
292
  {
293
+ type: "button",
184
294
  onClick: t,
185
- className: w(
295
+ className: i(
186
296
  "tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity",
187
297
  "tw:rounded-md tw:focus-ring"
188
298
  ),
189
- "aria-label": r,
190
- children: /* @__PURE__ */ o(u, { icon: nt, size: "xl" })
299
+ "aria-label": e,
300
+ children: /* @__PURE__ */ o(k, { icon: at, size: "xl" })
191
301
  }
192
- ), H = b(({
302
+ ), A = p(({
193
303
  borderless: t = !1,
194
- size: r = "md",
195
- feedback: e,
304
+ size: e = "md",
305
+ feedback: r,
196
306
  className: n,
197
307
  disabled: a,
198
- readOnly: l,
199
- ...d
308
+ readOnly: d,
309
+ ...l
200
310
  }, s) => {
201
- const c = !a && !l;
311
+ const c = !a && !d;
202
312
  return /* @__PURE__ */ o(
203
313
  "input",
204
314
  {
205
315
  ref: s,
206
- className: w(
316
+ className: i(
207
317
  "tw:w-full",
208
318
  {
209
- "tw:focus-ring": !e,
210
- "tw:focus-ring-danger": e === "error"
319
+ "tw:focus-ring": !r,
320
+ "tw:focus-ring-danger": r === "error"
211
321
  },
212
322
  {
213
- "tw:px-2 tw:py-1 tw:text-sm": r === "sm",
214
- "tw:px-3 tw:py-1.5": r === "md",
215
- "tw:px-4 tw:py-2 tw:text-xl": r === "lg"
323
+ "tw:px-2 tw:py-1 tw:text-sm": e === "sm",
324
+ "tw:px-3 tw:py-1.5": e === "md",
325
+ "tw:px-4 tw:py-2 tw:text-xl": e === "lg"
216
326
  },
217
327
  {
218
328
  "tw:rounded-md tw:border": !t,
219
- "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !e,
220
- "tw:border-danger": !t && e === "error",
329
+ "tw:border-lm-input-border tw:dark:border-dm-input-border": !t && !r,
330
+ "tw:border-danger": !t && r === "error",
221
331
  "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": !c,
222
332
  "tw:bg-lm-primary tw:dark:bg-dm-primary": c,
223
333
  // Use different background color when rendered inside a card
@@ -226,55 +336,55 @@ const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className:
226
336
  n
227
337
  ),
228
338
  disabled: a,
229
- readOnly: l,
230
- ...d
339
+ readOnly: d,
340
+ ...l
231
341
  }
232
342
  );
233
- }), D = ({ required: t, children: r, ...e }) => /* @__PURE__ */ i("label", { ...e, children: [
234
- r,
343
+ }), O = ({ required: t, children: e, ...r }) => /* @__PURE__ */ b("label", { ...r, children: [
344
+ e,
235
345
  t && /* @__PURE__ */ o("span", { className: "tw:text-danger tw:ml-1", "data-testid": "required-indicator", children: "*" })
236
- ] }), Vt = b(({ label: t, inputClassName: r, required: e, hiddenRequired: n, error: a, ...l }, d) => {
237
- const s = j();
238
- return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
239
- /* @__PURE__ */ o(D, { htmlFor: s, required: e, children: t }),
346
+ ] }), Vt = p(({ label: t, inputClassName: e, required: r, hiddenRequired: n, error: a, ...d }, l) => {
347
+ const s = _();
348
+ return /* @__PURE__ */ b("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
349
+ /* @__PURE__ */ o(O, { htmlFor: s, required: r, children: t }),
240
350
  /* @__PURE__ */ o(
241
- H,
351
+ A,
242
352
  {
243
- ref: d,
353
+ ref: l,
244
354
  id: s,
245
- className: r,
246
- required: e || n,
355
+ className: e,
356
+ required: r || n,
247
357
  feedback: a ? "error" : void 0,
248
- ...l
358
+ ...d
249
359
  }
250
360
  ),
251
361
  a && /* @__PURE__ */ o("span", { className: "tw:text-danger", children: a })
252
362
  ] });
253
- }), yt = b(({ containerClassName: t, className: r, size: e, ...n }, a) => {
254
- const [l, d, , s] = wt(!1), c = it(), m = C(({ relatedTarget: y }) => {
255
- var g;
256
- (g = c.current) != null && g.contains(y) || s();
363
+ }), It = p(({ containerClassName: t, className: e, size: r, ...n }, a) => {
364
+ const [d, l, , s] = it(!1), c = L(null), g = I(({ relatedTarget: m }) => {
365
+ var w;
366
+ (w = c.current) != null && w.contains(m) || s();
257
367
  }, [c, s]);
258
- return /* @__PURE__ */ i(
368
+ return /* @__PURE__ */ b(
259
369
  "div",
260
370
  {
261
- className: p("tw:group tw:relative", t),
371
+ className: x("tw:group tw:relative", t),
262
372
  ref: c,
263
- onBlurCapture: m,
373
+ onBlurCapture: g,
264
374
  children: [
265
375
  /* @__PURE__ */ o(
266
- H,
376
+ A,
267
377
  {
268
378
  ref: a,
269
- type: l ? "text" : "password",
270
- className: p(
379
+ type: d ? "text" : "password",
380
+ className: x(
271
381
  {
272
- "tw:pr-10": e !== "sm",
273
- "tw:pr-8": e === "sm"
382
+ "tw:pr-10": r !== "sm",
383
+ "tw:pr-8": r === "sm"
274
384
  },
275
- r
385
+ e
276
386
  ),
277
- size: e,
387
+ size: r,
278
388
  "data-testid": "input",
279
389
  ...n
280
390
  }
@@ -282,68 +392,69 @@ const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className:
282
392
  /* @__PURE__ */ o(
283
393
  "button",
284
394
  {
285
- onClick: d,
286
- title: l ? "Hide password" : "Show password",
287
- "aria-label": l ? "Hide password" : "Show password",
288
- className: p(
395
+ type: "button",
396
+ onClick: l,
397
+ title: d ? "Hide password" : "Show password",
398
+ "aria-label": d ? "Hide password" : "Show password",
399
+ className: x(
289
400
  "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:px-1",
290
401
  "tw:text-placeholder tw:hover:text-lm-text tw:hover:dark:text-dm-text tw:transition-colors",
291
402
  {
292
- "tw:right-1.5": e !== "sm",
293
- "tw:scale-85 tw:right-1": e === "sm"
403
+ "tw:right-1.5": r !== "sm",
404
+ "tw:scale-85 tw:right-1": r === "sm"
294
405
  }
295
406
  ),
296
407
  tabIndex: -1,
297
- children: /* @__PURE__ */ o(u, { fixedWidth: !0, icon: l ? at : dt })
408
+ children: /* @__PURE__ */ o(k, { fixedWidth: !0, icon: d ? lt : dt })
298
409
  }
299
410
  )
300
411
  ]
301
412
  }
302
413
  );
303
- }), Xt = b(({ label: t, inputClassName: r, required: e, hiddenRequired: n, error: a, ...l }, d) => {
304
- const s = j();
305
- return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
306
- /* @__PURE__ */ o(D, { htmlFor: s, required: e, children: t }),
414
+ }), Xt = p(({ label: t, inputClassName: e, required: r, hiddenRequired: n, error: a, ...d }, l) => {
415
+ const s = _();
416
+ return /* @__PURE__ */ b("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
417
+ /* @__PURE__ */ o(O, { htmlFor: s, required: r, children: t }),
307
418
  /* @__PURE__ */ o(
308
- yt,
419
+ It,
309
420
  {
310
- ref: d,
421
+ ref: l,
311
422
  id: s,
312
- className: r,
313
- required: e || n,
423
+ className: e,
424
+ required: r || n,
314
425
  feedback: a ? "error" : void 0,
315
- ...l
426
+ ...d
316
427
  }
317
428
  ),
318
429
  a && /* @__PURE__ */ o("span", { className: "tw:text-danger", children: a })
319
430
  ] });
320
- }), kt = b(({
431
+ }), Ct = p(({
321
432
  className: t,
322
- size: r = "md",
323
- feedback: e,
433
+ size: e = "md",
434
+ feedback: r,
324
435
  style: n = {},
325
436
  disabled: a,
326
- ...l
327
- }, d) => /* @__PURE__ */ o(
437
+ ...d
438
+ }, l) => /* @__PURE__ */ o(
328
439
  "select",
329
440
  {
330
- ref: d,
331
- className: w(
441
+ ref: l,
442
+ className: i(
332
443
  "tw:w-full tw:appearance-none tw:pr-9",
333
444
  "tw:bg-(image:--chevron-down) tw:bg-no-repeat",
334
445
  {
335
- "tw:focus-ring": !e,
336
- "tw:focus-ring-danger": e === "error"
446
+ "tw:focus-ring": !r,
447
+ "tw:focus-ring-danger": r === "error"
337
448
  },
338
449
  "tw:rounded-md tw:border",
339
450
  {
340
- "tw:border-lm-input-border tw:dark:border-dm-input-border": !e,
341
- "tw:border-danger": e === "error"
451
+ "tw:border-lm-input-border tw:dark:border-dm-input-border": !r,
452
+ "tw:border-danger": r === "error"
342
453
  },
343
454
  {
344
- "tw:pl-2 tw:py-1 tw:text-sm": r === "sm",
345
- "tw:pl-3 tw:py-1.5": r === "md",
346
- "tw:pl-4 tw:py-2 tw:text-xl": r === "lg",
455
+ "tw:pl-2 tw:py-1 tw:text-sm": e === "sm",
456
+ "tw:pl-3 tw:py-1.5": e === "md",
457
+ "tw:pl-4 tw:py-2 tw:text-xl": e === "lg",
347
458
  "tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input": a,
348
459
  // Apply different background color when rendered inside a card
349
460
  "tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input": !a
@@ -355,31 +466,33 @@ const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className:
355
466
  background: "right 0.75rem center / 16px 12px"
356
467
  },
357
468
  disabled: a,
358
- ...l
469
+ ...d
359
470
  }
360
- )), Yt = b(({ selectClassName: t, label: r, required: e, hiddenRequired: n, ...a }, l) => {
361
- const d = j();
362
- return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
363
- /* @__PURE__ */ o(D, { htmlFor: d, required: e, children: r }),
364
- /* @__PURE__ */ o(kt, { ref: l, id: d, className: t, required: e || n, ...a })
471
+ )), Yt = p(({ selectClassName: t, label: e, required: r, hiddenRequired: n, ...a }, d) => {
472
+ const l = _();
473
+ return /* @__PURE__ */ b("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
474
+ /* @__PURE__ */ o(O, { htmlFor: l, required: r, children: e }),
475
+ /* @__PURE__ */ o(Ct, { ref: d, id: l, className: t, required: r || n, ...a })
365
476
  ] });
366
- }), Zt = b(({
477
+ }), Tt = p(({
367
478
  onChange: t,
368
- containerClassName: r,
369
- inputClassName: e,
479
+ containerClassName: e,
480
+ inputClassName: r,
370
481
  // Inputs have a default 'md' size. Search inputs are usually 'lg' as they are rendered at the top of sections
371
482
  size: n = "lg",
372
- ...a
483
+ loading: a = !1,
484
+ ...d
373
485
  }, l) => {
374
- const { setTimeout: d, clearCurrentTimeout: s } = ct(500), c = C((m) => {
375
- m ? d(() => t(m)) : (s(), t(m));
376
- }, [s, t, d]);
377
- return /* @__PURE__ */ i("div", { className: w("tw:group tw:relative tw:focus-within:z-10", r), children: [
486
+ const { setTimeout: s, clearCurrentTimeout: c } = wt(500), g = I((m) => {
487
+ m ? s(() => t(m)) : (c(), t(m));
488
+ }, [c, t, s]);
489
+ return /* @__PURE__ */ b("div", { className: i("tw:group tw:relative tw:focus-within:z-10", e), children: [
378
490
  /* @__PURE__ */ o(
379
- u,
491
+ k,
380
492
  {
381
- icon: lt,
382
- className: w(
493
+ icon: a ? V : st,
494
+ spin: a,
495
+ className: i(
383
496
  "tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:transition-colors",
384
497
  "tw:text-placeholder tw:group-focus-within:text-lm-text tw:dark:group-focus-within:text-dm-text",
385
498
  {
@@ -390,116 +503,124 @@ const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className:
390
503
  }
391
504
  ),
392
505
  /* @__PURE__ */ o(
393
- H,
506
+ A,
394
507
  {
395
508
  ref: l,
396
509
  type: "search",
397
- className: w(
510
+ className: i(
398
511
  {
399
512
  "tw:pl-9": n !== "sm",
400
513
  "tw:pl-7": n === "sm"
401
514
  },
402
- e
515
+ r
403
516
  ),
404
517
  placeholder: "Search...",
405
- onChange: (m) => c(m.target.value),
518
+ onChange: (m) => g(m.target.value),
406
519
  size: n,
407
- ...a
520
+ ...d
408
521
  }
409
522
  )
410
523
  ] });
411
- }), zt = b(({ className: t, ...r }, e) => /* @__PURE__ */ o(
412
- Q,
524
+ });
525
+ function Zt({
526
+ searchResults: t,
527
+ onSearch: e,
528
+ onSelectSearchResult: r,
529
+ renderSearchResult: n,
530
+ size: a = "md",
531
+ listboxSpan: d = "full",
532
+ onFocus: l,
533
+ ...s
534
+ }) {
535
+ const c = L(null), g = _(), m = I((w) => {
536
+ r(w), e(""), c.current.value = "";
537
+ }, [e, r]);
538
+ return /* @__PURE__ */ b(
539
+ "div",
540
+ {
541
+ className: "tw:relative",
542
+ onBlur: (w) => {
543
+ w.currentTarget.contains(w.relatedTarget) || e("");
544
+ },
545
+ children: [
546
+ /* @__PURE__ */ o(
547
+ Tt,
548
+ {
549
+ onChange: e,
550
+ size: a,
551
+ ref: c,
552
+ role: "combobox",
553
+ "aria-autocomplete": "list",
554
+ "aria-expanded": !!t,
555
+ "aria-controls": g,
556
+ onFocus: (w) => {
557
+ l == null || l(w), e(w.target.value);
558
+ },
559
+ ...s
560
+ }
561
+ ),
562
+ t && /* @__PURE__ */ o(
563
+ ht,
564
+ {
565
+ id: g,
566
+ items: t,
567
+ anchor: c,
568
+ onSelectItem: m,
569
+ renderItem: n,
570
+ className: i(
571
+ "tw:absolute tw:top-full tw:mt-1 tw:z-10",
572
+ {
573
+ "tw:min-w-60 tw:max-w-full": d === "auto",
574
+ "tw:w-full": d === "full"
575
+ }
576
+ ),
577
+ "aria-label": "Matching items",
578
+ noItemsMessage: "No results found matching search"
579
+ }
580
+ )
581
+ ]
582
+ }
583
+ );
584
+ }
585
+ const te = p(({ className: t, ...e }, r) => /* @__PURE__ */ o(
586
+ X,
413
587
  {
414
- ref: e,
415
- className: p(
588
+ ref: r,
589
+ className: x(
416
590
  "tw:rounded-full tw:w-8 tw:h-4",
417
591
  "tw:bg-(image:--circle-grey-dark) tw:dark:bg-(image:--circle-grey-light) tw:checked:bg-(image:--circle-white)",
418
592
  "tw:focus-visible:not-checked:bg-(image:--circle-light-blue)",
419
593
  "tw:checked:bg-right tw:transition-[background-position]",
420
594
  t
421
595
  ),
422
- ...r
596
+ ...e
423
597
  }
424
- )), Nt = ({ className: t, disabled: r, size: e = "md", ...n }) => /* @__PURE__ */ o(
598
+ )), Lt = ({ className: t, disabled: e, size: r = "md", type: n = "button", ...a }) => /* @__PURE__ */ o(
425
599
  "button",
426
600
  {
427
- className: w(
601
+ className: i(
428
602
  "tw:inline-flex tw:rounded-md tw:focus-ring",
429
603
  "tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline",
430
604
  {
431
- "tw:px-1.5 tw:py-1 tw:text-sm": e === "sm",
432
- "tw:px-3 tw:py-1.5": e === "md",
433
- "tw:px-4 tw:py-2 tw:text-lg": e === "lg",
434
- "tw:pointer-events-none tw:opacity-65": r
605
+ "tw:px-1.5 tw:py-1 tw:text-sm": r === "sm",
606
+ "tw:px-3 tw:py-1.5": r === "md",
607
+ "tw:px-4 tw:py-2 tw:text-lg": r === "lg",
608
+ "tw:pointer-events-none tw:opacity-65": e
435
609
  },
436
610
  t
437
611
  ),
438
- disabled: r,
439
- ...n
440
- }
441
- ), vt = ({ className: t, ...r }) => /* @__PURE__ */ o(
442
- "div",
443
- {
444
- className: w(
445
- "tw:px-4 tw:py-3 tw:rounded-t-md",
446
- "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border",
447
- t
448
- ),
449
- ...r
450
- }
451
- ), Pt = ({ className: t, ...r }) => /* @__PURE__ */ o(
452
- "div",
453
- {
454
- className: w(
455
- "tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md",
456
- "tw:first:rounded-t-md tw:last:rounded-b-md",
457
- t
458
- ),
459
- ...r
612
+ disabled: e,
613
+ type: n,
614
+ ...a
460
615
  }
461
- ), Ct = ({ className: t, ...r }) => /* @__PURE__ */ o(
462
- "div",
463
- {
464
- className: w(
465
- "tw:px-4 tw:py-3 tw:rounded-b-md",
466
- "tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border",
467
- t
468
- ),
469
- ...r
470
- }
471
- ), It = ({ className: t, ...r }) => /* @__PURE__ */ o(
472
- "div",
473
- {
474
- className: w(
475
- "tw:group/card tw:rounded-md tw:shadow-md",
476
- "tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary",
477
- t
478
- ),
479
- ...r
480
- }
481
- ), h = Object.assign(It, { Body: Pt, Header: vt, Footer: Ct }), Rt = ({ bodyClassName: t, children: r, ...e }) => {
482
- const { title: n, titleSize: a = "md", ...l } = "title" in e ? e : {
483
- ...e,
484
- title: void 0,
485
- titleSize: void 0
486
- };
487
- return /* @__PURE__ */ i(h, { ...l, children: [
488
- n && /* @__PURE__ */ i(h.Header, { children: [
489
- a === "lg" && /* @__PURE__ */ o("h4", { children: n }),
490
- a === "md" && /* @__PURE__ */ o("h5", { children: n }),
491
- a === "sm" && /* @__PURE__ */ o("h6", { children: n })
492
- ] }),
493
- /* @__PURE__ */ o(h.Body, { className: t, children: r })
494
- ] });
495
- }, V = M(null), Tt = ({ className: t, to: r, ...e }) => {
496
- const n = f(V);
616
+ ), Y = H(null), Bt = ({ className: t, to: e, ...r }) => {
617
+ const n = v(Y);
497
618
  return /* @__PURE__ */ o(
498
- ot,
619
+ nt,
499
620
  {
500
621
  role: "menuitem",
501
- to: r,
502
- className: ({ isActive: a }) => w(
622
+ to: e,
623
+ className: ({ isActive: a }) => i(
503
624
  "tw:px-4 tw:pt-2 tw:pb-[calc(0.5rem-3px)] tw:border-b-3",
504
625
  "tw:font-bold tw:no-underline tw:text-center tw:highlight:text-brand tw:transition-colors",
505
626
  "tw:rounded-none tw:outline-none tw:focus-visible:inset-ring-2 tw:focus-visible:inset-ring-brand/50",
@@ -510,167 +631,167 @@ const I = M(void 0), v = M({ responsive: !0 }), gt = ({ children: t, className:
510
631
  },
511
632
  t
512
633
  ),
513
- ...e
634
+ ...r
514
635
  }
515
636
  );
516
- }, Bt = ({ children: t, className: r, fill: e }) => /* @__PURE__ */ o(V.Provider, { value: { fill: e }, children: /* @__PURE__ */ o(h, { role: "menubar", className: w("tw:flex tw:overflow-hidden", r), children: t }) }), te = Object.assign(Bt, { Pill: Tt }), Lt = new Intl.NumberFormat("en-US"), St = (t) => Lt.format(Number(t)), G = 10, ee = (t) => Math.ceil(t / G) * G, N = 2, B = "...", Et = (t, r) => Array.from({ length: r - t }, (e, n) => t + n), Ft = (t, r) => {
517
- const e = Et(
518
- Math.max(N, t - N),
519
- Math.min(r - 1, t + N) + 1
637
+ }, Et = ({ children: t, className: e, fill: r }) => /* @__PURE__ */ o(Y.Provider, { value: { fill: r }, children: /* @__PURE__ */ o(f, { role: "menubar", className: i("tw:flex tw:overflow-hidden", e), children: t }) }), ee = Object.assign(Et, { Pill: Bt }), Mt = new Intl.NumberFormat("en-US"), Rt = (t) => Mt.format(Number(t)), J = 10, re = (t) => Math.ceil(t / J) * J, P = 2, R = "...", _t = (t, e) => Array.from({ length: e - t }, (r, n) => t + n), Ft = (t, e) => {
638
+ const r = _t(
639
+ Math.max(P, t - P),
640
+ Math.min(e - 1, t + P) + 1
520
641
  );
521
- return t - N > N && e.unshift(B), t + N < r - 1 && e.push(B), e.unshift(1), e.push(r), e;
522
- }, P = (t) => t === B, _t = (t) => P(t) ? t : St(t), Mt = (t, r) => P(t) ? `${t}_${r}` : `${t}`, X = [
642
+ return t - P > P && r.unshift(R), t + P < e - 1 && r.push(R), r.unshift(1), r.push(e), r;
643
+ }, T = (t) => t === R, St = (t) => T(t) ? t : Rt(t), jt = (t, e) => T(t) ? `${t}_${e}` : `${t}`, Z = [
523
644
  "tw:border tw:border-r-0 tw:last:border-r tw:border-lm-border tw:dark:border-dm-border",
524
645
  "tw:rounded-none tw:first:rounded-l tw:last:rounded-r"
525
- ], Y = (t = !1) => w(
526
- X,
646
+ ], tt = (t = !1) => i(
647
+ Z,
527
648
  "tw:px-3 py-2 tw:cursor-pointer tw:no-underline",
528
649
  "tw:focus-ring tw:focus-visible:z-1",
529
650
  {
530
651
  "tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand": !t,
531
652
  "tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white": t
532
653
  }
533
- ), _ = ({ children: t }) => /* @__PURE__ */ o("span", { "aria-hidden": !0, className: w(X, "tw:px-3 py-2 tw:text-gray-400"), children: t }), Z = () => /* @__PURE__ */ o(_, { children: B });
534
- function jt({ children: t, active: r, isEllipsis: e, href: n, ...a }) {
535
- const l = J(() => Y(r), [r]);
536
- return e ? /* @__PURE__ */ o(Z, {}) : /* @__PURE__ */ o(K, { className: l, to: n, ...a, children: t });
654
+ ), D = ({ children: t }) => /* @__PURE__ */ o("span", { "aria-hidden": !0, className: i(Z, "tw:px-3 py-2 tw:text-gray-400"), children: t }), et = () => /* @__PURE__ */ o(D, { children: R });
655
+ function Dt({ children: t, active: e, isEllipsis: r, href: n, ...a }) {
656
+ const d = Q(() => tt(e), [e]);
657
+ return r ? /* @__PURE__ */ o(et, {}) : /* @__PURE__ */ o(j, { className: d, to: n, ...a, children: t });
537
658
  }
538
- function Ht({ children: t, active: r, isEllipsis: e, ...n }) {
539
- const a = J(() => Y(r), [r]);
540
- return e ? /* @__PURE__ */ o(Z, {}) : /* @__PURE__ */ o("button", { type: "button", className: a, ...n, children: t });
659
+ function Ht({ children: t, active: e, isEllipsis: r, ...n }) {
660
+ const a = Q(() => tt(e), [e]);
661
+ return r ? /* @__PURE__ */ o(et, {}) : /* @__PURE__ */ o("button", { type: "button", className: a, ...n, children: t });
541
662
  }
542
- const re = ({ currentPage: t, pagesCount: r, ...e }) => {
543
- const n = "urlForPage" in e, a = n ? jt : Ht, l = C(
544
- (d) => n ? { href: P(d) ? void 0 : e.urlForPage(d) } : { onClick: () => !P(d) && e.onPageChange(d) },
545
- [n, e]
663
+ const oe = ({ currentPage: t, pagesCount: e, ...r }) => {
664
+ const n = "urlForPage" in r, a = n ? Dt : Ht, d = I(
665
+ (l) => n ? { href: T(l) ? void 0 : r.urlForPage(l) } : { onClick: () => !T(l) && r.onPageChange(l) },
666
+ [n, r]
546
667
  );
547
- return r < 2 ? null : /* @__PURE__ */ i("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
548
- t === 1 ? /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(u, { size: "xs", icon: U }) }) : /* @__PURE__ */ o(a, { ...l(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ o(u, { size: "xs", icon: U }) }),
549
- Ft(t, r).map((d, s) => /* @__PURE__ */ o(
668
+ return e < 2 ? null : /* @__PURE__ */ b("div", { className: "tw:select-none tw:flex", "data-testid": "paginator", children: [
669
+ t === 1 ? /* @__PURE__ */ o(D, { children: /* @__PURE__ */ o(k, { size: "xs", icon: q }) }) : /* @__PURE__ */ o(a, { ...d(Math.max(1, t - 1)), "aria-label": "Previous", children: /* @__PURE__ */ o(k, { size: "xs", icon: q }) }),
670
+ Ft(t, e).map((l, s) => /* @__PURE__ */ o(
550
671
  a,
551
672
  {
552
- active: d === t,
553
- isEllipsis: P(d),
554
- ...l(d),
555
- children: _t(d)
673
+ active: l === t,
674
+ isEllipsis: T(l),
675
+ ...d(l),
676
+ children: St(l)
556
677
  },
557
- Mt(d, s)
678
+ jt(l, s)
558
679
  )),
559
- t === r ? /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(u, { size: "xs", icon: W }) }) : /* @__PURE__ */ o(a, { ...l(Math.min(r, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ o(u, { size: "xs", icon: W }) })
680
+ t === e ? /* @__PURE__ */ o(D, { children: /* @__PURE__ */ o(k, { size: "xs", icon: z }) }) : /* @__PURE__ */ o(a, { ...d(Math.min(e, t + 1)), "aria-label": "Next", children: /* @__PURE__ */ o(k, { size: "xs", icon: z }) })
560
681
  ] });
561
- }, Dt = ({
682
+ }, At = ({
562
683
  open: t,
563
- children: r,
564
- className: e,
684
+ children: e,
685
+ className: r,
565
686
  onClose: n,
566
687
  ...a
567
688
  }) => {
568
- const l = E(null);
569
- return F(() => {
570
- var m, y;
571
- const d = document.body, s = d.style.overflow, c = d.style.paddingRight;
689
+ const d = L(null);
690
+ return M(() => {
691
+ var g, m;
692
+ const l = document.body, s = l.style.overflow, c = l.style.paddingRight;
572
693
  if (t) {
573
- const g = window.outerWidth - d.clientWidth, k = d.scrollHeight > d.clientHeight;
574
- d.style.overflow = "hidden", k && (d.style.paddingRight = `${g}px`), (m = l.current) == null || m.showModal();
694
+ const w = window.outerWidth - l.clientWidth, u = l.scrollHeight > l.clientHeight;
695
+ l.style.overflow = "hidden", u && (l.style.paddingRight = `${w}px`), (g = d.current) == null || g.showModal();
575
696
  } else
576
- (y = l.current) == null || y.close();
697
+ (m = d.current) == null || m.close();
577
698
  return () => {
578
- d.style.overflow = s, d.style.paddingRight = c;
699
+ l.style.overflow = s, l.style.paddingRight = c;
579
700
  };
580
- }, [t]), mt(
701
+ }, [t]), ct(
581
702
  /* @__PURE__ */ o(
582
703
  "dialog",
583
704
  {
584
- ref: l,
585
- className: w("tw:bg-transparent tw:backdrop:bg-black/50", e),
586
- onCancel: (d) => {
587
- d.preventDefault(), n();
705
+ ref: d,
706
+ className: i("tw:bg-transparent tw:backdrop:bg-black/50", r),
707
+ onCancel: (l) => {
708
+ l.preventDefault(), n();
588
709
  },
589
710
  ...a,
590
- children: t && r
711
+ children: t && e
591
712
  }
592
713
  ),
593
714
  document.body
594
715
  );
595
- }, oe = ({
716
+ }, ne = ({
596
717
  open: t,
597
- onClose: r,
598
- variant: e = "default",
718
+ onClose: e,
719
+ variant: r = "default",
599
720
  title: n,
600
721
  children: a,
601
- className: l,
602
- ...d
722
+ className: d,
723
+ ...l
603
724
  }) => {
604
725
  const {
605
726
  size: s = "md",
606
727
  confirmText: c = "Confirm",
607
- cancelText: m = "Cancel",
608
- confirmDisabled: y,
609
- onConfirm: g,
610
- onClosed: k,
611
- ...z
612
- } = "onConfirm" in d ? d : { ...d }, [R, O] = rt(t), T = E(null), L = E("cancel"), tt = C(() => {
613
- L.current = "confirm", g == null || g();
614
- }, [g]);
615
- return F(() => {
728
+ cancelText: g = "Cancel",
729
+ confirmDisabled: m,
730
+ onConfirm: w,
731
+ onClosed: u,
732
+ ...h
733
+ } = "onConfirm" in l ? l : { ...l }, [y, $] = K(t), E = L(null), F = L("cancel"), rt = I(() => {
734
+ F.current = "confirm", w == null || w();
735
+ }, [w]);
736
+ return M(() => {
616
737
  if (t) {
617
- L.current = "cancel", O(!0);
738
+ F.current = "cancel", $(!0);
618
739
  return;
619
740
  }
620
- const x = T.current;
621
- if (x) {
622
- delete T.current.dataset.open;
623
- let $ = !1;
624
- const A = (et) => {
625
- $ || et.target !== x || ($ = !0, O(!1), k == null || k(L.current));
741
+ const N = E.current;
742
+ if (N) {
743
+ delete E.current.dataset.open;
744
+ let U = !1;
745
+ const W = (ot) => {
746
+ U || ot.target !== N || (U = !0, $(!1), u == null || u(F.current));
626
747
  };
627
- return x.addEventListener("transitionend", A), () => {
628
- x.removeEventListener("transitionend", A);
748
+ return N.addEventListener("transitionend", W), () => {
749
+ N.removeEventListener("transitionend", W);
629
750
  };
630
751
  }
631
- }, [k, t]), F(() => {
632
- const x = T.current;
633
- R && x && (x.dataset.open = "");
634
- }, [R]), /* @__PURE__ */ o(
635
- Dt,
752
+ }, [u, t]), M(() => {
753
+ const N = E.current;
754
+ y && N && (N.dataset.open = "");
755
+ }, [y]), /* @__PURE__ */ o(
756
+ At,
636
757
  {
637
- open: R,
638
- onClose: r,
639
- className: w(
758
+ open: y,
759
+ onClose: e,
760
+ className: i(
640
761
  {
641
- "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": R,
642
- "tw:overflow-hidden": e === "cover"
762
+ "tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen": y,
763
+ "tw:overflow-hidden": r === "cover"
643
764
  },
644
- l
765
+ d
645
766
  ),
646
- ...z,
767
+ ...h,
647
768
  children: /* @__PURE__ */ o(
648
769
  "div",
649
770
  {
650
771
  "data-testid": "transition-container",
651
- ref: T,
652
- className: w(
772
+ ref: E,
773
+ className: i(
653
774
  "tw:w-full tw:m-auto tw:p-4 tw:sm:p-6",
654
775
  // CSS transitions are based on the presence of the `data-open` attribute
655
776
  "tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100",
656
777
  "tw:transition-[opacity_,_translate] tw:duration-300",
657
778
  // Handle modal dimensions for different variants and sizes
658
- e !== "cover" && {
779
+ r !== "cover" && {
659
780
  "tw:sm:w-sm": s === "sm",
660
781
  "tw:md:w-lg": s === "md",
661
782
  "tw:md:w-4xl": s === "lg",
662
783
  "tw:md:w-6xl": s === "xl"
663
784
  },
664
- { "tw:h-full": e === "cover" }
785
+ { "tw:h-full": r === "cover" }
665
786
  ),
666
- children: /* @__PURE__ */ o(h, { className: w(
787
+ children: /* @__PURE__ */ o(f, { className: i(
667
788
  "tw:w-full",
668
- { "tw:h-full tw:relative tw:overflow-auto": e === "cover" }
669
- ), children: e === "cover" ? /* @__PURE__ */ i(S, { children: [
670
- /* @__PURE__ */ i(
789
+ { "tw:h-full tw:relative tw:overflow-auto": r === "cover" }
790
+ ), children: r === "cover" ? /* @__PURE__ */ b(S, { children: [
791
+ /* @__PURE__ */ b(
671
792
  "div",
672
793
  {
673
- className: w(
794
+ className: i(
674
795
  "tw:px-4 tw:py-3 tw:absolute tw:top-0 tw:left-0 tw:right-0",
675
796
  "tw:flex tw:items-center tw:justify-between",
676
797
  "tw:text-white tw:bg-linear-to-b tw:from-black/70 tw:to-black/10",
@@ -678,37 +799,37 @@ const re = ({ currentPage: t, pagesCount: r, ...e }) => {
678
799
  ),
679
800
  children: [
680
801
  /* @__PURE__ */ o("h5", { children: n }),
681
- /* @__PURE__ */ o(q, { onClick: r, label: "Close dialog" })
802
+ /* @__PURE__ */ o(G, { onClick: e, label: "Close dialog" })
682
803
  ]
683
804
  }
684
805
  ),
685
806
  /* @__PURE__ */ o("div", { children: a })
686
- ] }) : /* @__PURE__ */ i(S, { children: [
687
- /* @__PURE__ */ i(h.Header, { className: w(
807
+ ] }) : /* @__PURE__ */ b(S, { children: [
808
+ /* @__PURE__ */ b(f.Header, { className: i(
688
809
  "tw:sticky tw:top-0",
689
810
  "tw:flex tw:items-center tw:justify-between tw:gap-x-2"
690
811
  ), children: [
691
- /* @__PURE__ */ o("h5", { className: w({ "tw:text-danger": e === "danger" }), children: n }),
692
- /* @__PURE__ */ o(q, { onClick: r, label: "Close dialog" })
812
+ /* @__PURE__ */ o("h5", { className: i({ "tw:text-danger": r === "danger" }), children: n }),
813
+ /* @__PURE__ */ o(G, { onClick: e, label: "Close dialog" })
693
814
  ] }),
694
- /* @__PURE__ */ o(h.Body, { children: a }),
695
- g && /* @__PURE__ */ i(
696
- h.Footer,
815
+ /* @__PURE__ */ o(f.Body, { children: a }),
816
+ w && /* @__PURE__ */ b(
817
+ f.Footer,
697
818
  {
698
819
  "data-testid": "footer",
699
- className: w(
820
+ className: i(
700
821
  "tw:flex tw:justify-end tw:items-center tw:gap-x-2",
701
822
  "tw:[&]:px-3 tw:sticky tw:bottom-0"
702
823
  ),
703
824
  children: [
704
- /* @__PURE__ */ o(Nt, { onClick: r, children: m }),
825
+ /* @__PURE__ */ o(Lt, { onClick: e, children: g }),
705
826
  /* @__PURE__ */ o(
706
- xt,
827
+ Pt,
707
828
  {
708
829
  solid: !0,
709
- variant: e === "danger" ? "danger" : "primary",
710
- disabled: y,
711
- onClick: tt,
830
+ variant: r === "danger" ? "danger" : "primary",
831
+ disabled: m,
832
+ onClick: rt,
712
833
  children: c
713
834
  }
714
835
  )
@@ -720,62 +841,64 @@ const re = ({ currentPage: t, pagesCount: r, ...e }) => {
720
841
  )
721
842
  }
722
843
  );
723
- }, ne = ({ className: t, children: r, loading: e = !1, variant: n = "default" }) => /* @__PURE__ */ o(Rt, { className: p({ "tw:[&]:border-danger": n === "error" }, t), children: /* @__PURE__ */ i("h3", { className: p("tw:text-center", {
844
+ }, ae = ({ className: t, children: e, loading: r = !1, variant: n = "default" }) => /* @__PURE__ */ o(pt, { className: x({ "tw:[&]:border-danger": n === "error" }, t), children: /* @__PURE__ */ b("h3", { className: x("tw:text-center", {
724
845
  "tw:text-gray-500 tw:dark:text-gray-400": n === "default",
725
846
  "tw:text-danger": n === "error"
726
847
  }), children: [
727
- e && /* @__PURE__ */ i(S, { children: [
728
- /* @__PURE__ */ o(u, { icon: st, spin: !0 }),
729
- /* @__PURE__ */ o("span", { className: "tw:ml-2", children: r ?? "Loading..." })
848
+ r && /* @__PURE__ */ b(S, { children: [
849
+ /* @__PURE__ */ o(k, { icon: V, spin: !0 }),
850
+ /* @__PURE__ */ o("span", { className: "tw:ml-2", children: e ?? "Loading..." })
730
851
  ] }),
731
- !e && r
732
- ] }) }), ae = ({ variant: t, className: r, size: e = "md", children: n }) => /* @__PURE__ */ o(
852
+ !r && e
853
+ ] }) }), le = ({ variant: t, className: e, size: r = "md", children: n }) => /* @__PURE__ */ o(
733
854
  "div",
734
855
  {
735
- className: p(
856
+ className: x(
736
857
  "tw:rounded-md tw:text-center",
737
858
  {
738
- "tw:p-2": e === "sm",
739
- "tw:p-4": e === "md",
740
- "tw:p-6": e === "lg",
859
+ "tw:p-2": r === "sm",
860
+ "tw:p-4": r === "md",
861
+ "tw:p-6": r === "lg",
741
862
  "tw:[&]:text-white": t !== "warning",
742
863
  "tw:bg-brand": t === "success",
743
864
  "tw:bg-danger": t === "error",
744
865
  "tw:bg-warning tw:text-black": t === "warning"
745
866
  },
746
- r
867
+ e
747
868
  ),
748
869
  children: n
749
870
  }
750
871
  );
751
872
  export {
752
- xt as Button,
753
- h as Card,
754
- oe as CardModal,
873
+ Pt as Button,
874
+ f as Card,
875
+ ne as CardModal,
755
876
  Qt as Checkbox,
756
- q as CloseButton,
757
- B as ELLIPSIS,
758
- H as Input,
759
- D as Label,
877
+ G as CloseButton,
878
+ R as ELLIPSIS,
879
+ A as Input,
880
+ O as Label,
760
881
  Vt as LabelledInput,
761
882
  Xt as LabelledRevealablePasswordInput,
762
883
  Yt as LabelledSelect,
763
- Nt as LinkButton,
764
- ne as Message,
765
- Dt as ModalDialog,
766
- te as NavPills,
767
- re as Paginator,
768
- ae as Result,
769
- yt as RevealablePasswordInput,
770
- Zt as SearchInput,
771
- kt as Select,
772
- Rt as SimpleCard,
884
+ Lt as LinkButton,
885
+ ht as Listbox,
886
+ ae as Message,
887
+ At as ModalDialog,
888
+ ee as NavPills,
889
+ oe as Paginator,
890
+ le as Result,
891
+ It as RevealablePasswordInput,
892
+ Zt as SearchCombobox,
893
+ Tt as SearchInput,
894
+ Ct as Select,
895
+ pt as SimpleCard,
773
896
  Kt as Table,
774
- zt as ToggleSwitch,
775
- St as formatNumber,
776
- Mt as keyForPage,
777
- P as pageIsEllipsis,
778
- _t as prettifyPageNumber,
897
+ te as ToggleSwitch,
898
+ Rt as formatNumber,
899
+ jt as keyForPage,
900
+ T as pageIsEllipsis,
901
+ St as prettifyPageNumber,
779
902
  Ft as progressivePagination,
780
- ee as roundTen
903
+ re as roundTen
781
904
  };