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