@vacano/ui 1.12.1 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +6 -5
  2. package/dist/ToggleGroup-DCWH4ngK.cjs +1283 -0
  3. package/dist/ToggleGroup-DCWH4ngK.cjs.map +1 -0
  4. package/dist/ToggleGroup-DYePk1bM.js +3935 -0
  5. package/dist/ToggleGroup-DYePk1bM.js.map +1 -0
  6. package/dist/{X-BIgkmQPR.cjs → X-CI1qRJDP.cjs} +4 -4
  7. package/dist/X-CI1qRJDP.cjs.map +1 -0
  8. package/dist/{X-Dyq6IJZW.js → X-Cm-i8Bh7.js} +195 -219
  9. package/dist/X-Cm-i8Bh7.js.map +1 -0
  10. package/dist/form.cjs +2 -0
  11. package/dist/form.cjs.map +1 -0
  12. package/dist/form.d.ts +540 -0
  13. package/dist/form.js +428 -0
  14. package/dist/form.js.map +1 -0
  15. package/dist/icons.cjs +1 -1
  16. package/dist/icons.cjs.map +1 -1
  17. package/dist/icons.js +1253 -1230
  18. package/dist/icons.js.map +1 -1
  19. package/dist/index-Abn5L42P.js +42 -0
  20. package/dist/index-Abn5L42P.js.map +1 -0
  21. package/dist/index-GSZAZ6Cz.cjs +2 -0
  22. package/dist/index-GSZAZ6Cz.cjs.map +1 -0
  23. package/dist/index.cjs +235 -1393
  24. package/dist/index.cjs.map +1 -1
  25. package/dist/index.d.ts +126 -43
  26. package/dist/index.js +1324 -4875
  27. package/dist/index.js.map +1 -1
  28. package/dist/{media-CWK1OED-.js → keyboard-D00e_brg.js} +63 -66
  29. package/dist/keyboard-D00e_brg.js.map +1 -0
  30. package/dist/{media-BuwIclXE.cjs → keyboard-D8zOi0jU.cjs} +3 -3
  31. package/dist/keyboard-D8zOi0jU.cjs.map +1 -0
  32. package/dist/lib.cjs +1 -1
  33. package/dist/lib.d.ts +38 -0
  34. package/dist/lib.js +15 -13
  35. package/dist/lib.js.map +1 -1
  36. package/package.json +25 -3
  37. package/dist/X-BIgkmQPR.cjs.map +0 -1
  38. package/dist/X-Dyq6IJZW.js.map +0 -1
  39. package/dist/media-BuwIclXE.cjs.map +0 -1
  40. package/dist/media-CWK1OED-.js.map +0 -1
@@ -0,0 +1,3935 @@
1
+ import { m as Ir, g as _r, s as Ar, r as Er, u as Lr, i as Mr, a as w, j as a, L as Fr, M as Yr, C as rr, X as or, b as ir, c as Qe, d as et, F as Ke } from "./X-Cm-i8Bh7.js";
2
+ import * as Ne from "react";
3
+ import { useState as B, useRef as K, useEffect as fe, useCallback as A, useMemo as oe, useImperativeHandle as Vr, useLayoutEffect as nr } from "react";
4
+ import { C as t, a as o, K as $t, g as Br, u as Hr } from "./keyboard-D00e_brg.js";
5
+ import { withEmotionCache as Wr, ThemeContext as jr, keyframes as Gr } from "@emotion/react";
6
+ import { n as L } from "./tooling-YDHxmiMT.js";
7
+ import { createPortal as qe } from "react-dom";
8
+ function bt() {
9
+ return bt = Object.assign ? Object.assign.bind() : function(e) {
10
+ for (var r = 1; r < arguments.length; r++) {
11
+ var i = arguments[r];
12
+ for (var l in i) ({}).hasOwnProperty.call(i, l) && (e[l] = i[l]);
13
+ }
14
+ return e;
15
+ }, bt.apply(null, arguments);
16
+ }
17
+ var Ur = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/, Kr = /* @__PURE__ */ Ir(
18
+ function(e) {
19
+ return Ur.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91;
20
+ }
21
+ /* Z+1 */
22
+ ), Xr = Kr, qr = function(r) {
23
+ return r !== "theme";
24
+ }, St = function(r) {
25
+ return typeof r == "string" && // 96 is one less than the char code
26
+ // for "a" so this is checking that
27
+ // it's a lowercase character
28
+ r.charCodeAt(0) > 96 ? Xr : qr;
29
+ }, mt = function(r, i, l) {
30
+ var d;
31
+ if (i) {
32
+ var p = i.shouldForwardProp;
33
+ d = r.__emotion_forwardProp && p ? function(b) {
34
+ return r.__emotion_forwardProp(b) && p(b);
35
+ } : p;
36
+ }
37
+ return typeof d != "function" && l && (d = r.__emotion_forwardProp), d;
38
+ }, Zr = function(r) {
39
+ var i = r.cache, l = r.serialized, d = r.isStringTag;
40
+ return Er(i, l, d), Lr(function() {
41
+ return Mr(i, l, d);
42
+ }), null;
43
+ }, Jr = function e(r, i) {
44
+ var l = r.__emotion_real === r, d = l && r.__emotion_base || r, p, b;
45
+ i !== void 0 && (p = i.label, b = i.target);
46
+ var c = mt(r, i, l), g = c || St(d), u = !g("as");
47
+ return function() {
48
+ var $ = arguments, h = l && r.__emotion_styles !== void 0 ? r.__emotion_styles.slice(0) : [];
49
+ if (p !== void 0 && h.push("label:" + p + ";"), $[0] == null || $[0].raw === void 0)
50
+ h.push.apply(h, $);
51
+ else {
52
+ var z = $[0];
53
+ h.push(z[0]);
54
+ for (var S = $.length, C = 1; C < S; C++)
55
+ h.push($[C], z[C]);
56
+ }
57
+ var v = Wr(function(P, D, k) {
58
+ var y = u && P.as || d, s = "", _ = [], E = P;
59
+ if (P.theme == null) {
60
+ E = {};
61
+ for (var I in P)
62
+ E[I] = P[I];
63
+ E.theme = Ne.useContext(jr);
64
+ }
65
+ typeof P.className == "string" ? s = _r(D.registered, _, P.className) : P.className != null && (s = P.className + " ");
66
+ var W = Ar(h.concat(_), D.registered, E);
67
+ s += D.key + "-" + W.name, b !== void 0 && (s += " " + b);
68
+ var H = u && c === void 0 ? St(y) : g, Y = {};
69
+ for (var V in P)
70
+ u && V === "as" || H(V) && (Y[V] = P[V]);
71
+ return Y.className = s, k && (Y.ref = k), /* @__PURE__ */ Ne.createElement(Ne.Fragment, null, /* @__PURE__ */ Ne.createElement(Zr, {
72
+ cache: D,
73
+ serialized: W,
74
+ isStringTag: typeof y == "string"
75
+ }), /* @__PURE__ */ Ne.createElement(y, Y));
76
+ });
77
+ return v.displayName = p !== void 0 ? p : "Styled(" + (typeof d == "string" ? d : d.displayName || d.name || "Component") + ")", v.defaultProps = r.defaultProps, v.__emotion_real = v, v.__emotion_base = d, v.__emotion_styles = h, v.__emotion_forwardProp = c, Object.defineProperty(v, "toString", {
78
+ value: function() {
79
+ return "." + b;
80
+ }
81
+ }), v.withComponent = function(P, D) {
82
+ var k = e(P, bt({}, i, D, {
83
+ shouldForwardProp: mt(v, D, !0)
84
+ }));
85
+ return k.apply(void 0, h);
86
+ }, v;
87
+ };
88
+ }, Qr = [
89
+ "a",
90
+ "abbr",
91
+ "address",
92
+ "area",
93
+ "article",
94
+ "aside",
95
+ "audio",
96
+ "b",
97
+ "base",
98
+ "bdi",
99
+ "bdo",
100
+ "big",
101
+ "blockquote",
102
+ "body",
103
+ "br",
104
+ "button",
105
+ "canvas",
106
+ "caption",
107
+ "cite",
108
+ "code",
109
+ "col",
110
+ "colgroup",
111
+ "data",
112
+ "datalist",
113
+ "dd",
114
+ "del",
115
+ "details",
116
+ "dfn",
117
+ "dialog",
118
+ "div",
119
+ "dl",
120
+ "dt",
121
+ "em",
122
+ "embed",
123
+ "fieldset",
124
+ "figcaption",
125
+ "figure",
126
+ "footer",
127
+ "form",
128
+ "h1",
129
+ "h2",
130
+ "h3",
131
+ "h4",
132
+ "h5",
133
+ "h6",
134
+ "head",
135
+ "header",
136
+ "hgroup",
137
+ "hr",
138
+ "html",
139
+ "i",
140
+ "iframe",
141
+ "img",
142
+ "input",
143
+ "ins",
144
+ "kbd",
145
+ "keygen",
146
+ "label",
147
+ "legend",
148
+ "li",
149
+ "link",
150
+ "main",
151
+ "map",
152
+ "mark",
153
+ "marquee",
154
+ "menu",
155
+ "menuitem",
156
+ "meta",
157
+ "meter",
158
+ "nav",
159
+ "noscript",
160
+ "object",
161
+ "ol",
162
+ "optgroup",
163
+ "option",
164
+ "output",
165
+ "p",
166
+ "param",
167
+ "picture",
168
+ "pre",
169
+ "progress",
170
+ "q",
171
+ "rp",
172
+ "rt",
173
+ "ruby",
174
+ "s",
175
+ "samp",
176
+ "script",
177
+ "section",
178
+ "select",
179
+ "small",
180
+ "source",
181
+ "span",
182
+ "strong",
183
+ "style",
184
+ "sub",
185
+ "summary",
186
+ "sup",
187
+ "table",
188
+ "tbody",
189
+ "td",
190
+ "textarea",
191
+ "tfoot",
192
+ "th",
193
+ "thead",
194
+ "time",
195
+ "title",
196
+ "tr",
197
+ "track",
198
+ "u",
199
+ "ul",
200
+ "var",
201
+ "video",
202
+ "wbr",
203
+ // SVG
204
+ "circle",
205
+ "clipPath",
206
+ "defs",
207
+ "ellipse",
208
+ "foreignObject",
209
+ "g",
210
+ "image",
211
+ "line",
212
+ "linearGradient",
213
+ "mask",
214
+ "path",
215
+ "pattern",
216
+ "polygon",
217
+ "polyline",
218
+ "radialGradient",
219
+ "rect",
220
+ "stop",
221
+ "svg",
222
+ "text",
223
+ "tspan"
224
+ ], n = Jr.bind(null);
225
+ Qr.forEach(function(e) {
226
+ n[e] = n(e);
227
+ });
228
+ const eo = n.span`
229
+ font-size: 12px;
230
+ font-weight: 500;
231
+ color: ${(e) => e.$variant === "normal" ? t.black : t.red};
232
+ `, to = L("field-label"), le = ({
233
+ children: e,
234
+ className: r,
235
+ ref: i,
236
+ required: l,
237
+ variant: d = "normal",
238
+ ...p
239
+ }) => e ? /* @__PURE__ */ w(
240
+ eo,
241
+ {
242
+ ...p,
243
+ ref: i,
244
+ className: to("container", r),
245
+ $variant: d,
246
+ children: [
247
+ e,
248
+ " ",
249
+ l && "*"
250
+ ]
251
+ }
252
+ ) : null, ro = {
253
+ normal: t["iron-grey"],
254
+ error: t.red,
255
+ success: t.green,
256
+ warning: t.yellow
257
+ }, oo = n.span`
258
+ display: block;
259
+ font-size: 12px;
260
+ font-weight: 500;
261
+ line-height: 1.4;
262
+ color: ${(e) => ro[e.$variant]};
263
+ `, io = L("field-message"), ce = ({
264
+ children: e,
265
+ className: r,
266
+ ref: i,
267
+ variant: l = "normal",
268
+ ...d
269
+ }) => e ? /* @__PURE__ */ a(
270
+ oo,
271
+ {
272
+ ...d,
273
+ ref: i,
274
+ className: io("container", r),
275
+ $variant: l,
276
+ children: e
277
+ }
278
+ ) : null, tt = {
279
+ compact: {
280
+ height: "32px",
281
+ padding: "0 10px",
282
+ radius: "14px"
283
+ },
284
+ default: {
285
+ height: "40px",
286
+ padding: "0 14px",
287
+ radius: "16px"
288
+ }
289
+ }, ae = {
290
+ normal: {
291
+ background: {
292
+ static: o(t.black, 2),
293
+ disabled: o(t.black, 10)
294
+ },
295
+ border: {
296
+ static: o(t.black, 60),
297
+ disabled: o(t.black, 10)
298
+ },
299
+ color: {
300
+ static: t.black,
301
+ disabled: o(t.black, 65)
302
+ },
303
+ placeholder: {
304
+ static: o(t.black, 40),
305
+ disabled: o(t.black, 65)
306
+ },
307
+ focus: o(t["iron-grey"], 30)
308
+ },
309
+ error: {
310
+ background: {
311
+ static: o(t.red, 2),
312
+ disabled: o(t.red, 10)
313
+ },
314
+ border: {
315
+ static: o(t.red, 60),
316
+ disabled: o(t.red, 10)
317
+ },
318
+ color: {
319
+ static: t.red,
320
+ disabled: o(t.red, 65)
321
+ },
322
+ placeholder: {
323
+ static: o(t.red, 40),
324
+ disabled: o(t.red, 65)
325
+ },
326
+ focus: o(t.red, 30)
327
+ }
328
+ }, no = n.div`
329
+ position: relative;
330
+ display: grid;
331
+ gap: 2px;
332
+ width: ${(e) => e.$fullWidth ? "100%" : "fit-content"};
333
+ `, ao = n(le)`
334
+ margin-left: 6px;
335
+ `, lo = n(ce)`
336
+ margin-left: 6px;
337
+ `, co = n.div`
338
+ position: relative;
339
+ display: flex;
340
+ align-items: center;
341
+ `, so = n.input`
342
+ flex: 1;
343
+ min-width: 0;
344
+ width: 100%;
345
+ outline: none;
346
+ font-size: 14px;
347
+ font-weight: 500;
348
+ height: ${(e) => tt[e.$size].height};
349
+ padding: ${(e) => tt[e.$size].padding};
350
+ padding-right: 40px;
351
+ border-radius: ${(e) => tt[e.$size].radius};
352
+
353
+ color: ${(e) => ae[e.$variant].color.static};
354
+ border: 1px solid ${(e) => ae[e.$variant].border.static};
355
+ background-color: ${(e) => ae[e.$variant].background.static};
356
+
357
+ &::placeholder {
358
+ color: ${(e) => ae[e.$variant].placeholder.static};
359
+ }
360
+
361
+ &:disabled {
362
+ cursor: not-allowed;
363
+ color: ${(e) => ae[e.$variant].color.disabled};
364
+ background-color: ${(e) => ae[e.$variant].background.disabled};
365
+ border-color: ${(e) => ae[e.$variant].border.disabled};
366
+
367
+ &::placeholder {
368
+ color: ${(e) => ae[e.$variant].placeholder.disabled};
369
+ }
370
+ }
371
+ `, po = n.div`
372
+ position: absolute;
373
+ right: 12px;
374
+ top: 50%;
375
+ transform: translateY(-50%);
376
+ display: flex;
377
+ align-items: center;
378
+ justify-content: center;
379
+ `, uo = n.div`
380
+ position: absolute;
381
+ top: 100%;
382
+ left: 0;
383
+ right: 0;
384
+ z-index: 100;
385
+ margin-top: 4px;
386
+ max-height: 240px;
387
+ overflow-y: auto;
388
+ background-color: ${t.white};
389
+ border: 1px solid ${t.gray};
390
+ border-radius: 12px;
391
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
392
+ opacity: ${({ $open: e }) => e ? 1 : 0};
393
+ visibility: ${({ $open: e }) => e ? "visible" : "hidden"};
394
+ transform: ${({ $open: e }) => e ? "translateY(0)" : "translateY(-8px)"};
395
+ transition:
396
+ opacity 0.15s ease,
397
+ transform 0.15s ease,
398
+ visibility 0.15s;
399
+ `, bo = n.div`
400
+ display: flex;
401
+ align-items: center;
402
+ gap: 10px;
403
+ padding: 10px 14px;
404
+ cursor: pointer;
405
+ font-size: 14px;
406
+ font-weight: 500;
407
+ color: ${t.black};
408
+ transition: background-color 0.1s ease;
409
+
410
+ &:first-of-type {
411
+ border-radius: 12px 12px 0 0;
412
+ }
413
+
414
+ &:last-of-type {
415
+ border-radius: 0 0 12px 12px;
416
+ }
417
+
418
+ &:only-child {
419
+ border-radius: 12px;
420
+ }
421
+
422
+ &:hover {
423
+ background-color: ${o(t.black, 5)};
424
+ }
425
+ `, ho = n.img`
426
+ width: 24px;
427
+ height: 24px;
428
+ border-radius: 6px;
429
+ object-fit: cover;
430
+ `, go = n.span`
431
+ flex: 1;
432
+ overflow: hidden;
433
+ text-overflow: ellipsis;
434
+ white-space: nowrap;
435
+ `, fo = n.div`
436
+ padding: 12px 14px;
437
+ font-size: 14px;
438
+ color: ${o(t.black, 50)};
439
+ text-align: center;
440
+ `, Pt = {
441
+ xs: { size: "16px", borderWidth: "2px" },
442
+ sm: { size: "20px", borderWidth: "2px" },
443
+ md: { size: "32px", borderWidth: "3px" },
444
+ lg: { size: "48px", borderWidth: "4px" }
445
+ }, Ct = {
446
+ track: o(t.black, 15),
447
+ indicator: t.black
448
+ }, rt = (e) => Pt[e] ?? Pt.md, $o = Gr`
449
+ 0% {
450
+ transform: rotate(0deg);
451
+ }
452
+ 100% {
453
+ transform: rotate(360deg);
454
+ }
455
+ `, xo = n.div`
456
+ display: inline-block;
457
+ width: ${(e) => rt(e.$size).size};
458
+ height: ${(e) => rt(e.$size).size};
459
+ border: ${(e) => rt(e.$size).borderWidth} solid ${Ct.track};
460
+ border-top-color: ${Ct.indicator};
461
+ border-radius: 50%;
462
+ animation: ${$o} 0.8s linear infinite;
463
+ `, yo = L("spinner"), ko = ({
464
+ "aria-label": e = "Loading",
465
+ className: r,
466
+ ref: i,
467
+ size: l = "md",
468
+ ...d
469
+ }) => /* @__PURE__ */ a(
470
+ xo,
471
+ {
472
+ ...d,
473
+ ref: i,
474
+ className: yo("container", r),
475
+ role: "status",
476
+ "aria-label": e,
477
+ $size: l
478
+ }
479
+ ), ze = L("autocomplete"), Zn = ({
480
+ className: e,
481
+ classnames: r,
482
+ disabled: i,
483
+ fullWidth: l,
484
+ label: d,
485
+ ref: p,
486
+ message: b,
487
+ size: c = "default",
488
+ variant: g = "normal",
489
+ value: u,
490
+ onChange: $,
491
+ onSearch: h,
492
+ debounceMs: z = 300,
493
+ minChars: S = 1,
494
+ noResultsMessage: C = "No results found",
495
+ ...v
496
+ }) => {
497
+ const [P, D] = B((u == null ? void 0 : u.value) ?? ""), [k, y] = B([]), [s, _] = B(!1), [E, I] = B(!1), [W, H] = B(!1), Y = K(null), V = K(null);
498
+ fe(() => {
499
+ (u == null ? void 0 : u.value) !== void 0 && D(u.value);
500
+ }, [u == null ? void 0 : u.value]);
501
+ const j = A(
502
+ async (O) => {
503
+ if (O.length < S) {
504
+ y([]), H(!1);
505
+ return;
506
+ }
507
+ _(!0), H(!0);
508
+ try {
509
+ const G = await h(O);
510
+ y(G), I(!0);
511
+ } catch {
512
+ y([]);
513
+ } finally {
514
+ _(!1);
515
+ }
516
+ },
517
+ [h, S]
518
+ ), T = A(
519
+ (O) => {
520
+ const G = O.target.value;
521
+ D(G), $ == null || $({ value: G, image_url: null }), V.current && clearTimeout(V.current), V.current = setTimeout(() => {
522
+ j(G);
523
+ }, z);
524
+ },
525
+ [$, j, z]
526
+ ), f = A(
527
+ (O) => {
528
+ D(O.value), y([]), I(!1), H(!1), $ == null || $({ value: O.value, image_url: O.image_url });
529
+ },
530
+ [$]
531
+ ), M = A(() => {
532
+ setTimeout(() => {
533
+ I(!1);
534
+ }, 150);
535
+ }, []), N = A(() => {
536
+ k.length > 0 && I(!0);
537
+ }, [k.length]);
538
+ return fe(() => () => {
539
+ V.current && clearTimeout(V.current);
540
+ }, []), /* @__PURE__ */ w(
541
+ no,
542
+ {
543
+ ref: Y,
544
+ className: ze("container", e),
545
+ $fullWidth: !!l,
546
+ children: [
547
+ d && /* @__PURE__ */ a(ao, { variant: g, className: ze("label", r == null ? void 0 : r.label), children: d }),
548
+ /* @__PURE__ */ w(co, { children: [
549
+ /* @__PURE__ */ a(
550
+ so,
551
+ {
552
+ ...v,
553
+ ref: p,
554
+ type: "text",
555
+ value: P,
556
+ onChange: T,
557
+ onBlur: M,
558
+ onFocus: N,
559
+ disabled: i,
560
+ $size: c,
561
+ $variant: g,
562
+ className: ze("input", r == null ? void 0 : r.input)
563
+ }
564
+ ),
565
+ s && /* @__PURE__ */ a(po, { children: /* @__PURE__ */ a(ko, { size: "xs" }) })
566
+ ] }),
567
+ b && /* @__PURE__ */ a(lo, { variant: g, children: b }),
568
+ /* @__PURE__ */ a(
569
+ uo,
570
+ {
571
+ $open: E && W && !s,
572
+ className: ze("dropdown", r == null ? void 0 : r.dropdown),
573
+ children: k.length > 0 ? k.map((O) => /* @__PURE__ */ w(
574
+ bo,
575
+ {
576
+ onClick: () => f(O),
577
+ className: ze("item", r == null ? void 0 : r.item),
578
+ children: [
579
+ O.image_url && /* @__PURE__ */ a(ho, { src: O.image_url, alt: O.value }),
580
+ /* @__PURE__ */ a(go, { children: O.value })
581
+ ]
582
+ },
583
+ O.id
584
+ )) : !s && /* @__PURE__ */ a(fo, { children: C })
585
+ }
586
+ )
587
+ ]
588
+ }
589
+ );
590
+ }, Nt = {
591
+ compact: {
592
+ height: "32px",
593
+ padding: "0 8px",
594
+ radius: "12px",
595
+ iconSize: "16px"
596
+ },
597
+ default: {
598
+ height: "40px",
599
+ padding: "0 12px",
600
+ radius: "16px",
601
+ iconSize: "20px"
602
+ }
603
+ }, zt = {
604
+ normal: {
605
+ background: {
606
+ static: t["steel-blue"],
607
+ hover: o(t["steel-blue"], 90),
608
+ active: o(t["steel-blue"], 80),
609
+ disabled: o(t["steel-blue"], 50)
610
+ },
611
+ color: {
612
+ static: t.white,
613
+ hover: t.white,
614
+ active: t.white,
615
+ disabled: t.white
616
+ },
617
+ borderColor: {
618
+ static: "transparent",
619
+ hover: "transparent",
620
+ active: "transparent",
621
+ disabled: "transparent"
622
+ }
623
+ },
624
+ system: {
625
+ background: {
626
+ static: t.black,
627
+ hover: o(t.black, 90),
628
+ active: o(t.black, 80),
629
+ disabled: o(t.black, 50)
630
+ },
631
+ color: {
632
+ static: t.white,
633
+ hover: t.white,
634
+ active: t.white,
635
+ disabled: t.white
636
+ },
637
+ borderColor: {
638
+ static: "transparent",
639
+ hover: "transparent",
640
+ active: "transparent",
641
+ disabled: "transparent"
642
+ }
643
+ },
644
+ success: {
645
+ background: {
646
+ static: t.green,
647
+ hover: o(t.green, 90),
648
+ active: o(t.green, 80),
649
+ disabled: o(t.green, 50)
650
+ },
651
+ color: {
652
+ static: t.white,
653
+ hover: t.white,
654
+ active: t.white,
655
+ disabled: t.white
656
+ },
657
+ borderColor: {
658
+ static: "transparent",
659
+ hover: "transparent",
660
+ active: "transparent",
661
+ disabled: "transparent"
662
+ }
663
+ },
664
+ warning: {
665
+ background: {
666
+ static: t.yellow,
667
+ hover: o(t.yellow, 90),
668
+ active: o(t.yellow, 80),
669
+ disabled: o(t.yellow, 50)
670
+ },
671
+ color: {
672
+ static: t.black,
673
+ hover: t.black,
674
+ active: t.black,
675
+ disabled: t.black
676
+ },
677
+ borderColor: {
678
+ static: "transparent",
679
+ hover: "transparent",
680
+ active: "transparent",
681
+ disabled: "transparent"
682
+ }
683
+ },
684
+ danger: {
685
+ background: {
686
+ static: t.red,
687
+ hover: o(t.red, 90),
688
+ active: o(t.red, 80),
689
+ disabled: o(t.red, 50)
690
+ },
691
+ color: {
692
+ static: t.white,
693
+ hover: t.white,
694
+ active: t.white,
695
+ disabled: t.white
696
+ },
697
+ borderColor: {
698
+ static: "transparent",
699
+ hover: "transparent",
700
+ active: "transparent",
701
+ disabled: "transparent"
702
+ }
703
+ },
704
+ transparent: {
705
+ background: {
706
+ static: o(t["iron-grey"], 1),
707
+ hover: o(t["iron-grey"], 5),
708
+ active: o(t["iron-grey"], 10),
709
+ disabled: o(t["iron-grey"], 5)
710
+ },
711
+ color: {
712
+ static: t.black,
713
+ hover: t.black,
714
+ active: t.black,
715
+ disabled: o(t.black, 30)
716
+ },
717
+ borderColor: {
718
+ static: o(t["iron-grey"], 20),
719
+ hover: o(t["iron-grey"], 20),
720
+ active: o(t["iron-grey"], 20),
721
+ disabled: o(t["iron-grey"], 10)
722
+ }
723
+ }
724
+ }, J = (e) => {
725
+ const r = zt[e];
726
+ return r || zt.normal;
727
+ }, ie = (e) => {
728
+ const r = Nt[e];
729
+ return r || Nt.default;
730
+ }, vo = (e) => e ? "auto" : "fit-content", wo = n.button`
731
+ display: flex;
732
+ gap: 6px;
733
+ text-decoration: none;
734
+ align-items: center;
735
+ justify-content: center;
736
+ width: ${(e) => e.$iconOnly ? ie(e.$size).height : vo(!!e.$fullWidth)};
737
+ color: ${(e) => J(e.$variant).color.static};
738
+ background-color: ${(e) => J(e.$variant).background.static};
739
+ height: ${(e) => ie(e.$size).height};
740
+ padding: ${(e) => e.$iconOnly ? "0" : ie(e.$size).padding};
741
+ border-radius: ${(e) => ie(e.$size).radius};
742
+ border: 1px solid ${(e) => J(e.$variant).borderColor.static};
743
+
744
+ &:hover:not(:disabled) {
745
+ color: ${(e) => J(e.$variant).color.hover};
746
+ background-color: ${(e) => J(e.$variant).background.hover};
747
+ border-color: ${(e) => J(e.$variant).borderColor.hover};
748
+ }
749
+
750
+ &:active:not(:disabled) {
751
+ color: ${(e) => J(e.$variant).color.active};
752
+ background-color: ${(e) => J(e.$variant).background.active};
753
+ border-color: ${(e) => J(e.$variant).borderColor.active};
754
+ }
755
+
756
+ &:disabled {
757
+ cursor: not-allowed;
758
+ color: ${(e) => J(e.$variant).color.disabled};
759
+ background-color: ${(e) => J(e.$variant).background.disabled};
760
+ border-color: ${(e) => J(e.$variant).borderColor.disabled};
761
+ }
762
+ `, So = n.div`
763
+ display: grid;
764
+ place-items: center;
765
+ width: ${(e) => ie(e.$size).iconSize};
766
+ height: ${(e) => ie(e.$size).iconSize};
767
+
768
+ & svg {
769
+ width: ${(e) => ie(e.$size).iconSize};
770
+ height: ${(e) => ie(e.$size).iconSize};
771
+ }
772
+ `, mo = n.span`
773
+ font-weight: 600;
774
+ overflow: hidden;
775
+ white-space: nowrap;
776
+ text-overflow: ellipsis;
777
+ `, Po = n(Fr)`
778
+ width: ${(e) => ie(e.$size).iconSize};
779
+ height: ${(e) => ie(e.$size).iconSize};
780
+ animation: ${$t.rotate} 0.8s linear infinite;
781
+ `, Co = n.div`
782
+ display: flex;
783
+ gap: 3px;
784
+ `, No = n.span`
785
+ text-align: center;
786
+ display: flex;
787
+ justify-content: center;
788
+ align-items: center;
789
+ font-size: 12px;
790
+ height: 18px;
791
+ min-width: 18px;
792
+ line-height: 1.6;
793
+ padding: 2px 4px;
794
+ border-radius: 4px;
795
+ width: fit-content;
796
+ background-color: ${(e) => e.$variant === "light" ? o(t.white, 25) : o(t.black, 25)};
797
+ `, zo = L("key-symbol"), To = ({
798
+ className: e,
799
+ ref: r,
800
+ symbol: i,
801
+ variant: l = "light",
802
+ ...d
803
+ }) => i ? /* @__PURE__ */ a(No, { ...d, ref: r, className: zo("container", e), $variant: l, children: i }) : null, Tt = L("key-bindings"), Do = ({
804
+ className: e,
805
+ classnames: r,
806
+ keys: i,
807
+ ref: l,
808
+ variant: d,
809
+ ...p
810
+ }) => {
811
+ const b = oe(() => Br(i), [i]);
812
+ return b.length === 0 ? null : /* @__PURE__ */ a(Co, { ...p, ref: l, className: Tt("container", e), children: b.map((c) => /* @__PURE__ */ a(
813
+ To,
814
+ {
815
+ symbol: c,
816
+ className: Tt("item", r == null ? void 0 : r.item),
817
+ variant: d
818
+ },
819
+ c
820
+ )) });
821
+ }, Dt = L("button"), Oo = ({
822
+ children: e,
823
+ className: r,
824
+ classnames: i,
825
+ disabled: l,
826
+ fullWidth: d,
827
+ icon: p,
828
+ loading: b,
829
+ onClick: c,
830
+ ref: g = null,
831
+ keyBindings: u = [],
832
+ size: $ = "default",
833
+ type: h = "button",
834
+ variant: z = "normal",
835
+ ...S
836
+ }) => {
837
+ const C = K(null);
838
+ Vr(g, () => C.current, []), Hr(u, () => {
839
+ var P;
840
+ (P = C.current) == null || P.click();
841
+ });
842
+ const v = oe(() => {
843
+ switch (h) {
844
+ case "link":
845
+ return "button";
846
+ default:
847
+ return h;
848
+ }
849
+ }, [h]);
850
+ return /* @__PURE__ */ w(
851
+ wo,
852
+ {
853
+ ...S,
854
+ onClick: c,
855
+ ref: C,
856
+ type: v,
857
+ disabled: l,
858
+ className: Dt("container", r),
859
+ $variant: z,
860
+ $size: $,
861
+ $fullWidth: !!d,
862
+ $iconOnly: !!p && !(e || (u == null ? void 0 : u.length) > 0),
863
+ children: [
864
+ b && /* @__PURE__ */ a(Po, { $size: $ }),
865
+ p && !b && /* @__PURE__ */ a(So, { $size: $, children: p }),
866
+ e && /* @__PURE__ */ a(mo, { className: Dt("label", i == null ? void 0 : i.label), children: e }),
867
+ /* @__PURE__ */ a(Do, { keys: u, variant: z === "system" ? "light" : "dark" })
868
+ ]
869
+ }
870
+ );
871
+ }, Ot = {
872
+ normal: {
873
+ box: {
874
+ border: o(t["iron-grey"], 30),
875
+ borderChecked: t["iron-grey"],
876
+ background: t.white,
877
+ backgroundChecked: t.black,
878
+ focusShadow: o(t["iron-grey"], 30)
879
+ },
880
+ label: t.black,
881
+ icon: t.white
882
+ },
883
+ error: {
884
+ box: {
885
+ border: t.red,
886
+ borderChecked: t.red,
887
+ background: t.white,
888
+ backgroundChecked: t.red,
889
+ focusShadow: o(t.red, 30)
890
+ },
891
+ label: t.red,
892
+ icon: t.white
893
+ }
894
+ }, we = (e) => Ot[e] ?? Ot.normal, Ro = n.label`
895
+ display: inline-flex;
896
+ align-items: flex-start;
897
+ gap: 8px;
898
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
899
+ opacity: ${(e) => e.$disabled ? 0.5 : 1};
900
+ `, Io = n.input`
901
+ position: absolute;
902
+ opacity: 0;
903
+ width: 0;
904
+ height: 0;
905
+ pointer-events: none;
906
+ `, _o = n.span`
907
+ display: inline-flex;
908
+ align-items: center;
909
+ justify-content: center;
910
+ flex-shrink: 0;
911
+ width: 18px;
912
+ height: 18px;
913
+ border-radius: 6px;
914
+ border: 1.5px solid
915
+ ${(e) => e.$checked || e.$indeterminate ? we(e.$variant).box.borderChecked : we(e.$variant).box.border};
916
+ background-color: ${(e) => e.$checked || e.$indeterminate ? we(e.$variant).box.backgroundChecked : we(e.$variant).box.background};
917
+ transition:
918
+ border-color 0.15s ease,
919
+ background-color 0.15s ease,
920
+ box-shadow 0.15s ease;
921
+ `, Ao = n.span`
922
+ display: inline-flex;
923
+ align-items: center;
924
+ justify-content: center;
925
+ color: ${(e) => we(e.$variant).icon};
926
+ opacity: ${(e) => e.$visible ? 1 : 0};
927
+ transform: ${(e) => e.$visible ? "scale(1)" : "scale(0.5)"};
928
+ transition:
929
+ opacity 0.15s ease,
930
+ transform 0.15s ease;
931
+
932
+ & svg {
933
+ width: 12px;
934
+ height: 12px;
935
+ }
936
+ `, Eo = n.span`
937
+ font-size: 14px;
938
+ font-weight: 500;
939
+ line-height: 1.3;
940
+ color: ${(e) => we(e.$variant).label};
941
+ user-select: none;
942
+
943
+ a {
944
+ color: inherit;
945
+ text-decoration: underline;
946
+ cursor: pointer;
947
+
948
+ &:hover {
949
+ text-decoration: none;
950
+ }
951
+ }
952
+ `, Te = L("checkbox"), xt = ({
953
+ checked: e,
954
+ className: r,
955
+ classnames: i,
956
+ disabled: l,
957
+ indeterminate: d = !1,
958
+ label: p,
959
+ onChange: b,
960
+ ref: c,
961
+ variant: g = "normal",
962
+ ...u
963
+ }) => /* @__PURE__ */ w(
964
+ Ro,
965
+ {
966
+ className: Te("container", r),
967
+ $disabled: !!l,
968
+ $variant: g,
969
+ children: [
970
+ /* @__PURE__ */ a(
971
+ Io,
972
+ {
973
+ ...u,
974
+ ref: c,
975
+ type: "checkbox",
976
+ className: Te("input", i == null ? void 0 : i.input),
977
+ checked: e,
978
+ disabled: l,
979
+ onChange: b
980
+ }
981
+ ),
982
+ /* @__PURE__ */ a(
983
+ _o,
984
+ {
985
+ className: Te("box", i == null ? void 0 : i.box),
986
+ $checked: e,
987
+ $indeterminate: d,
988
+ $variant: g,
989
+ children: /* @__PURE__ */ a(
990
+ Ao,
991
+ {
992
+ className: Te("icon", i == null ? void 0 : i.icon),
993
+ $visible: d || e,
994
+ $variant: g,
995
+ children: d ? /* @__PURE__ */ a(Yr, {}) : /* @__PURE__ */ a(rr, {})
996
+ }
997
+ )
998
+ }
999
+ ),
1000
+ p && /* @__PURE__ */ a(Eo, { className: Te("label", i == null ? void 0 : i.label), $variant: g, children: p })
1001
+ ]
1002
+ }
1003
+ ), Rt = {
1004
+ normal: {
1005
+ border: {
1006
+ static: o(t.black, 20),
1007
+ hover: o(t.black, 40),
1008
+ active: o(t.black, 40),
1009
+ disabled: o(t.black, 10)
1010
+ },
1011
+ borderChecked: t.black,
1012
+ background: {
1013
+ static: t.white,
1014
+ hover: t.white,
1015
+ active: t.white,
1016
+ disabled: o(t.black, 5)
1017
+ },
1018
+ backgroundChecked: o(t.black, 5),
1019
+ focusRing: o(t.black, 20),
1020
+ label: {
1021
+ static: t.black,
1022
+ hover: t.black,
1023
+ active: t.black,
1024
+ disabled: o(t.black, 40)
1025
+ },
1026
+ description: {
1027
+ static: o(t.black, 60),
1028
+ hover: o(t.black, 60),
1029
+ active: o(t.black, 60),
1030
+ disabled: o(t.black, 30)
1031
+ }
1032
+ },
1033
+ error: {
1034
+ border: {
1035
+ static: t.red,
1036
+ hover: t.red,
1037
+ active: t.red,
1038
+ disabled: o(t.red, 30)
1039
+ },
1040
+ borderChecked: t.red,
1041
+ background: {
1042
+ static: t.white,
1043
+ hover: t.white,
1044
+ active: t.white,
1045
+ disabled: o(t.red, 5)
1046
+ },
1047
+ backgroundChecked: o(t.red, 5),
1048
+ focusRing: o(t.red, 20),
1049
+ label: {
1050
+ static: t.red,
1051
+ hover: t.red,
1052
+ active: t.red,
1053
+ disabled: o(t.red, 40)
1054
+ },
1055
+ description: {
1056
+ static: o(t.red, 70),
1057
+ hover: o(t.red, 70),
1058
+ active: o(t.red, 70),
1059
+ disabled: o(t.red, 40)
1060
+ }
1061
+ }
1062
+ }, be = (e) => Rt[e] ?? Rt.normal, Lo = n.label`
1063
+ display: grid;
1064
+ grid-template-columns: auto 1fr;
1065
+ align-items: start;
1066
+ gap: 8px;
1067
+ padding: 12px;
1068
+ background-color: ${(e) => {
1069
+ const r = be(e.$variant);
1070
+ return e.$disabled ? r.background.disabled : e.$checked ? r.backgroundChecked : r.background.static;
1071
+ }};
1072
+ border: 1px solid
1073
+ ${(e) => {
1074
+ const r = be(e.$variant);
1075
+ return e.$disabled ? r.border.disabled : e.$checked ? r.borderChecked : r.border.static;
1076
+ }};
1077
+ border-radius: 12px;
1078
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
1079
+ transition:
1080
+ border-color 0.15s ease,
1081
+ background-color 0.15s ease;
1082
+ width: ${(e) => e.$fullWidth ? "100%" : "fit-content"};
1083
+ min-width: 0;
1084
+
1085
+ &:hover:not([data-disabled='true']) {
1086
+ border-color: ${(e) => {
1087
+ const r = be(e.$variant);
1088
+ return e.$checked ? r.borderChecked : r.border.hover;
1089
+ }};
1090
+ }
1091
+
1092
+ .vacano_checkbox_container {
1093
+ pointer-events: none;
1094
+ }
1095
+ `, Mo = n.input`
1096
+ position: absolute;
1097
+ width: 1px;
1098
+ height: 1px;
1099
+ margin: -1px;
1100
+ padding: 0;
1101
+ overflow: hidden;
1102
+ clip: rect(0, 0, 0, 0);
1103
+ white-space: nowrap;
1104
+ border: 0;
1105
+ `, Fo = n.div`
1106
+ display: flex;
1107
+ flex-direction: column;
1108
+ gap: 2px;
1109
+ min-width: 0;
1110
+ `, Yo = n.span`
1111
+ font-size: 14px;
1112
+ font-weight: 500;
1113
+ line-height: 1.4;
1114
+ color: ${(e) => be(e.$variant).label.static};
1115
+
1116
+ label[data-disabled='true'] & {
1117
+ color: ${(e) => be(e.$variant).label.disabled};
1118
+ }
1119
+ `, Vo = n.span`
1120
+ font-size: 12px;
1121
+ font-weight: 400;
1122
+ line-height: 1.4;
1123
+ color: ${(e) => be(e.$variant).description.static};
1124
+
1125
+ label[data-disabled='true'] & {
1126
+ color: ${(e) => be(e.$variant).description.disabled};
1127
+ }
1128
+ `, Ve = L("checkbox-card"), Jn = ({
1129
+ checked: e,
1130
+ className: r,
1131
+ classnames: i,
1132
+ description: l,
1133
+ disabled: d,
1134
+ fullWidth: p = !1,
1135
+ label: b,
1136
+ onChange: c,
1137
+ ref: g,
1138
+ variant: u = "normal",
1139
+ ...$
1140
+ }) => /* @__PURE__ */ w(
1141
+ Lo,
1142
+ {
1143
+ className: Ve("container", r),
1144
+ $checked: e,
1145
+ $disabled: !!d,
1146
+ $fullWidth: p,
1147
+ $variant: u,
1148
+ "data-disabled": d,
1149
+ children: [
1150
+ /* @__PURE__ */ a(
1151
+ Mo,
1152
+ {
1153
+ ...$,
1154
+ ref: g,
1155
+ type: "checkbox",
1156
+ checked: e,
1157
+ disabled: d,
1158
+ onChange: c
1159
+ }
1160
+ ),
1161
+ /* @__PURE__ */ a(
1162
+ xt,
1163
+ {
1164
+ className: i == null ? void 0 : i.checkbox,
1165
+ checked: e,
1166
+ disabled: d,
1167
+ variant: u,
1168
+ onChange: () => {
1169
+ },
1170
+ tabIndex: -1,
1171
+ "aria-hidden": !0
1172
+ }
1173
+ ),
1174
+ /* @__PURE__ */ w(Fo, { className: Ve("content", i == null ? void 0 : i.content), children: [
1175
+ /* @__PURE__ */ a(Yo, { className: Ve("label", i == null ? void 0 : i.label), $variant: u, children: b }),
1176
+ l && /* @__PURE__ */ a(
1177
+ Vo,
1178
+ {
1179
+ className: Ve("description", i == null ? void 0 : i.description),
1180
+ $variant: u,
1181
+ children: l
1182
+ }
1183
+ )
1184
+ ] })
1185
+ ]
1186
+ }
1187
+ ), It = {
1188
+ label: {
1189
+ color: t.black,
1190
+ disabledColor: o(t.black, 40)
1191
+ }
1192
+ }, Bo = n.div`
1193
+ display: flex;
1194
+ flex-direction: column;
1195
+ gap: 8px;
1196
+ `, Ho = n.span`
1197
+ font-size: 13px;
1198
+ font-weight: 500;
1199
+ line-height: 1.5;
1200
+ color: ${(e) => e.$disabled ? It.label.disabledColor : It.label.color};
1201
+ margin-bottom: 4px;
1202
+ `, Wo = n.div`
1203
+ display: flex;
1204
+ flex-direction: column;
1205
+ gap: 12px;
1206
+ `, ot = L("checkbox-group"), Qn = ({
1207
+ className: e,
1208
+ classnames: r,
1209
+ disabled: i,
1210
+ label: l,
1211
+ onChange: d,
1212
+ options: p,
1213
+ ref: b,
1214
+ value: c,
1215
+ variant: g = "normal",
1216
+ ...u
1217
+ }) => {
1218
+ const $ = (h, z) => {
1219
+ d(z ? [...c, h] : c.filter((S) => S !== h));
1220
+ };
1221
+ return /* @__PURE__ */ w(Bo, { ...u, ref: b, className: ot("container", e), children: [
1222
+ l && /* @__PURE__ */ a(Ho, { className: ot("label", r == null ? void 0 : r.label), $disabled: i, children: l }),
1223
+ /* @__PURE__ */ a(Wo, { className: ot("options", r == null ? void 0 : r.options), children: p.map((h) => /* @__PURE__ */ a(
1224
+ xt,
1225
+ {
1226
+ className: r == null ? void 0 : r.checkbox,
1227
+ checked: c.includes(h.value),
1228
+ label: h.label,
1229
+ disabled: i,
1230
+ variant: g,
1231
+ onChange: (z) => $(h.value, z.target.checked)
1232
+ },
1233
+ h.value
1234
+ )) })
1235
+ ] });
1236
+ }, _t = {
1237
+ gray: {
1238
+ background: o(t["iron-grey"], 10),
1239
+ color: t["iron-grey"],
1240
+ deleteHover: o(t["iron-grey"], 20)
1241
+ },
1242
+ red: {
1243
+ background: o(t.red, 10),
1244
+ color: t.red,
1245
+ deleteHover: o(t.red, 20)
1246
+ },
1247
+ blue: {
1248
+ background: o(t["steel-blue"], 10),
1249
+ color: t["steel-blue"],
1250
+ deleteHover: o(t["steel-blue"], 20)
1251
+ },
1252
+ black: {
1253
+ background: t.black,
1254
+ color: t.white,
1255
+ deleteHover: o(t.white, 20)
1256
+ }
1257
+ }, ht = (e) => _t[e] ?? _t.gray, jo = n.span`
1258
+ display: inline-flex;
1259
+ align-items: center;
1260
+ gap: 4px;
1261
+ padding: 0 ${(e) => e.$deletable ? "7px" : "10px"} 0 10px;
1262
+ border-radius: 12px;
1263
+ height: 24px;
1264
+ font-size: 12px;
1265
+ font-weight: 500;
1266
+ line-height: 1.5;
1267
+ background-color: ${(e) => ht(e.$variant).background};
1268
+ color: ${(e) => ht(e.$variant).color};
1269
+ `, Go = n.button`
1270
+ display: inline-flex;
1271
+ align-items: center;
1272
+ justify-content: center;
1273
+ padding: 0;
1274
+ margin: 0;
1275
+ margin-left: 2px;
1276
+ border: none;
1277
+ background: transparent;
1278
+ color: inherit;
1279
+ cursor: pointer;
1280
+ border-radius: 4px;
1281
+ transition: background-color 0.15s ease;
1282
+
1283
+ &:hover {
1284
+ background-color: ${(e) => ht(e.$variant).deleteHover};
1285
+ }
1286
+
1287
+ & svg {
1288
+ width: 14px;
1289
+ height: 14px;
1290
+ }
1291
+ `, Uo = n.span`
1292
+ flex: 1 0 auto;
1293
+ text-align: center;
1294
+ `, it = L("chip"), gt = ({
1295
+ children: e,
1296
+ className: r,
1297
+ classnames: i,
1298
+ deletable: l,
1299
+ onDelete: d,
1300
+ ref: p,
1301
+ variant: b = "gray",
1302
+ ...c
1303
+ }) => /* @__PURE__ */ w(
1304
+ jo,
1305
+ {
1306
+ ...c,
1307
+ ref: p,
1308
+ className: it("container", r),
1309
+ $variant: b,
1310
+ $deletable: !!l,
1311
+ children: [
1312
+ /* @__PURE__ */ a(Uo, { className: it("label", i == null ? void 0 : i.label), children: e }),
1313
+ l && /* @__PURE__ */ a(
1314
+ Go,
1315
+ {
1316
+ type: "button",
1317
+ className: it("delete", i == null ? void 0 : i.delete),
1318
+ $variant: b,
1319
+ onClick: d,
1320
+ children: /* @__PURE__ */ a(or, {})
1321
+ }
1322
+ )
1323
+ ]
1324
+ }
1325
+ ), Xe = {
1326
+ compact: {
1327
+ height: "32px",
1328
+ padding: "0 10px",
1329
+ radius: "14px",
1330
+ iconSize: 16
1331
+ },
1332
+ default: {
1333
+ height: "40px",
1334
+ padding: "0 14px",
1335
+ radius: "16px",
1336
+ iconSize: 20
1337
+ }
1338
+ }, De = {
1339
+ normal: {
1340
+ background: {
1341
+ static: o(t.black, 2),
1342
+ disabled: o(t.black, 10)
1343
+ },
1344
+ border: {
1345
+ static: o(t.black, 60),
1346
+ disabled: o(t.black, 10)
1347
+ },
1348
+ color: {
1349
+ static: t.black,
1350
+ disabled: o(t.black, 65)
1351
+ },
1352
+ placeholder: {
1353
+ static: o(t.black, 40),
1354
+ disabled: o(t.black, 65)
1355
+ },
1356
+ focus: o(t["iron-grey"], 30)
1357
+ },
1358
+ error: {
1359
+ background: {
1360
+ static: o(t.red, 2),
1361
+ disabled: o(t.red, 10)
1362
+ },
1363
+ border: {
1364
+ static: o(t.red, 60),
1365
+ disabled: o(t.red, 10)
1366
+ },
1367
+ color: {
1368
+ static: t.red,
1369
+ disabled: o(t.red, 65)
1370
+ },
1371
+ placeholder: {
1372
+ static: o(t.red, 40),
1373
+ disabled: o(t.red, 65)
1374
+ },
1375
+ focus: o(t.red, 30)
1376
+ }
1377
+ }, ne = 36, Ze = 2, Ko = 12, Xo = (e, r, i = "en") => {
1378
+ const l = e.getFullYear(), d = e.getMonth(), p = e.getDate(), b = e.getHours(), c = e.getMinutes(), g = e.getSeconds(), u = b % 12 || 12, $ = b >= 12, h = new Intl.DateTimeFormat(i, { month: "long" }).format(e), z = new Intl.DateTimeFormat(i, { month: "short" }).format(e), S = new Intl.DateTimeFormat(i, { weekday: "long" }).format(e), C = new Intl.DateTimeFormat(i, { weekday: "short" }).format(e), v = (s) => s.toString().padStart(2, "0"), P = (s) => s.toString().padStart(2, " "), D = (s) => `\0${s}\0`, k = [
1379
+ ["2006", "YEARFOUR", l.toString()],
1380
+ ["January", "MONTHLONG", h],
1381
+ ["Monday", "WEEKDAYLONG", S],
1382
+ ["Jan", "MONTHSHORT", z],
1383
+ ["Mon", "WEEKDAYSHORT", C],
1384
+ ["06", "YEARTWO", l.toString().slice(-2)],
1385
+ ["01", "MONTHPAD", v(d + 1)],
1386
+ ["_2", "DAYSPACE", P(p)],
1387
+ ["02", "DAYPAD", v(p)],
1388
+ ["15", "HOURTWENTYFOUR", v(b)],
1389
+ ["03", "HOURTWELVEPAD", v(u)],
1390
+ ["04", "MINUTE", v(c)],
1391
+ ["05", "SECOND", v(g)],
1392
+ ["PM", "AMPMUP", $ ? "PM" : "AM"],
1393
+ ["pm", "AMPMLOW", $ ? "pm" : "am"],
1394
+ // Single character tokens must come last
1395
+ ["1", "MONTH", (d + 1).toString()],
1396
+ ["2", "DAY", p.toString()],
1397
+ ["3", "HOURTWELVE", u.toString()]
1398
+ ];
1399
+ let y = r;
1400
+ for (const [s, _] of k)
1401
+ y = y.split(s).join(D(_));
1402
+ for (const [, s, _] of k)
1403
+ y = y.split(D(s)).join(_);
1404
+ return y;
1405
+ }, qo = (e, r) => new Date(e, r + 1, 0).getDate(), Zo = (e, r) => new Date(e, r, 1).getDay(), Jo = (e, r, i = 1) => {
1406
+ const l = qo(e, r);
1407
+ let p = Zo(e, r) - i;
1408
+ p < 0 && (p += 7);
1409
+ const b = [];
1410
+ for (let c = 0; c < p; c++)
1411
+ b.push(null);
1412
+ for (let c = 1; c <= l; c++)
1413
+ b.push(c);
1414
+ for (; b.length < 42; )
1415
+ b.push(null);
1416
+ return b;
1417
+ }, Qo = (e, r = 1) => {
1418
+ const i = [];
1419
+ for (let l = 0; l < 7; l++) {
1420
+ const d = (r + l) % 7, p = new Date(2024, 0, 7 + d);
1421
+ i.push(new Intl.DateTimeFormat(e, { weekday: "short" }).format(p));
1422
+ }
1423
+ return i;
1424
+ }, ei = (e) => {
1425
+ const r = [];
1426
+ for (let i = 0; i < 12; i++) {
1427
+ const l = new Date(2024, i, 1);
1428
+ r.push(new Intl.DateTimeFormat(e, { month: "short" }).format(l));
1429
+ }
1430
+ return r;
1431
+ }, At = (e, r) => e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth() && e.getDate() === r.getDate(), Et = (e, r) => e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth(), ti = (e, r) => e.getFullYear() === r.getFullYear(), Lt = (e, r, i, l, d) => {
1432
+ const p = new Date(e, r, i);
1433
+ if (l) {
1434
+ const b = new Date(l.getFullYear(), l.getMonth(), l.getDate());
1435
+ if (p < b) return !0;
1436
+ }
1437
+ if (d) {
1438
+ const b = new Date(d.getFullYear(), d.getMonth(), d.getDate());
1439
+ if (p > b) return !0;
1440
+ }
1441
+ return !1;
1442
+ }, Mt = (e, r, i, l) => {
1443
+ if (i) {
1444
+ const d = i.getFullYear(), p = i.getMonth();
1445
+ if (e < d || e === d && r < p) return !0;
1446
+ }
1447
+ if (l) {
1448
+ const d = l.getFullYear(), p = l.getMonth();
1449
+ if (e > d || e === d && r > p) return !0;
1450
+ }
1451
+ return !1;
1452
+ }, Ft = (e, r, i) => !!(r && e < r.getFullYear() || i && e > i.getFullYear()), ri = (e, r = 12) => {
1453
+ const i = e - Math.floor(r / 2), l = [];
1454
+ for (let d = 0; d < r; d++)
1455
+ l.push(i + d);
1456
+ return l;
1457
+ }, oi = (e) => {
1458
+ switch (e) {
1459
+ case "date":
1460
+ return "02.01.2006";
1461
+ case "month":
1462
+ return "January 2006";
1463
+ case "year":
1464
+ return "2006";
1465
+ }
1466
+ }, ii = n.div`
1467
+ position: relative;
1468
+ display: inline-flex;
1469
+ flex-direction: column;
1470
+ gap: 2px;
1471
+ min-width: 180px;
1472
+ width: ${({ $fullWidth: e }) => e ? "100%" : "fit-content"};
1473
+ `, ni = n(le)`
1474
+ margin-left: 6px;
1475
+ `, ai = n(ce)`
1476
+ margin-left: 6px;
1477
+ `, di = n.button`
1478
+ display: flex;
1479
+ align-items: center;
1480
+ justify-content: space-between;
1481
+ gap: 8px;
1482
+ width: 100%;
1483
+ cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
1484
+ outline: none;
1485
+ font-size: 14px;
1486
+ font-weight: 500;
1487
+ text-align: left;
1488
+ height: ${({ $size: e }) => Xe[e].height};
1489
+ padding: ${({ $size: e }) => Xe[e].padding};
1490
+ border-radius: ${({ $size: e }) => Xe[e].radius};
1491
+ color: ${({ $variant: e, $disabled: r, $hasValue: i }) => i ? De[e].color[r ? "disabled" : "static"] : De[e].placeholder[r ? "disabled" : "static"]};
1492
+ border: 1px solid
1493
+ ${({ $variant: e, $disabled: r }) => De[e].border[r ? "disabled" : "static"]};
1494
+ background-color: ${({ $variant: e, $disabled: r }) => De[e].background[r ? "disabled" : "static"]};
1495
+
1496
+ ${({ $open: e, $variant: r }) => e && `
1497
+ outline: 2px solid ${De[r].focus};
1498
+ `}
1499
+ `, li = n.span`
1500
+ flex: 1;
1501
+ overflow: hidden;
1502
+ text-overflow: ellipsis;
1503
+ white-space: nowrap;
1504
+ `, ci = n.span`
1505
+ display: flex;
1506
+ align-items: center;
1507
+ justify-content: center;
1508
+ flex-shrink: 0;
1509
+ transition: transform 0.15s ease;
1510
+ transform: ${({ $open: e }) => e ? "rotate(180deg)" : "rotate(0deg)"};
1511
+ `, ar = `
1512
+ z-index: 100;
1513
+ background-color: ${t.white};
1514
+ border: 1px solid ${o(t.black, 15)};
1515
+ border-radius: 12px;
1516
+ box-shadow: 0 4px 16px ${o(t.black, 12)};
1517
+ padding: ${Ko}px;
1518
+ `, dr = (e, r) => e ? "translateY(0)" : r === "bottom" ? "translateY(-8px)" : "translateY(8px)", si = n.div`
1519
+ position: absolute;
1520
+ ${({ $position: e }) => e === "bottom" ? "top: calc(100% + 4px);" : "bottom: calc(100% + 4px);"}
1521
+ left: 0;
1522
+ ${ar}
1523
+ opacity: ${({ $open: e }) => e ? 1 : 0};
1524
+ visibility: ${({ $open: e }) => e ? "visible" : "hidden"};
1525
+ transform: ${({ $open: e, $position: r }) => dr(e, r)};
1526
+ transition:
1527
+ opacity 0.15s ease,
1528
+ transform 0.15s ease,
1529
+ visibility 0.15s;
1530
+ `, pi = n.div`
1531
+ position: fixed;
1532
+ ${ar}
1533
+ opacity: ${({ $open: e }) => e ? 1 : 0};
1534
+ visibility: ${({ $open: e }) => e ? "visible" : "hidden"};
1535
+ transform: ${({ $open: e, $position: r }) => dr(e, r)};
1536
+ transition:
1537
+ opacity 0.15s ease,
1538
+ transform 0.15s ease,
1539
+ visibility 0.15s;
1540
+ `, nt = n.div`
1541
+ display: flex;
1542
+ align-items: center;
1543
+ justify-content: space-between;
1544
+ margin-bottom: 8px;
1545
+ `, at = n.button`
1546
+ display: flex;
1547
+ align-items: center;
1548
+ gap: 4px;
1549
+ padding: 4px 8px;
1550
+ border: none;
1551
+ background: transparent;
1552
+ border-radius: 6px;
1553
+ font-size: 14px;
1554
+ font-weight: 600;
1555
+ color: ${t.black};
1556
+ cursor: pointer;
1557
+
1558
+ &:hover {
1559
+ background-color: ${o(t.black, 5)};
1560
+ }
1561
+ `, ye = n.button`
1562
+ display: flex;
1563
+ align-items: center;
1564
+ justify-content: center;
1565
+ width: 28px;
1566
+ height: 28px;
1567
+ border: none;
1568
+ background: transparent;
1569
+ border-radius: 6px;
1570
+ color: ${t.black};
1571
+ cursor: pointer;
1572
+
1573
+ &:hover {
1574
+ background-color: ${o(t.black, 5)};
1575
+ }
1576
+
1577
+ &:disabled {
1578
+ opacity: 0.3;
1579
+ cursor: not-allowed;
1580
+
1581
+ &:hover {
1582
+ background: transparent;
1583
+ }
1584
+ }
1585
+ `, dt = n.div`
1586
+ display: flex;
1587
+ gap: 4px;
1588
+ `, ui = n.div`
1589
+ display: grid;
1590
+ grid-template-columns: repeat(7, ${ne}px);
1591
+ gap: ${Ze}px;
1592
+ margin-bottom: 4px;
1593
+ `, bi = n.div`
1594
+ display: flex;
1595
+ align-items: center;
1596
+ justify-content: center;
1597
+ height: ${ne}px;
1598
+ font-size: 12px;
1599
+ font-weight: 500;
1600
+ color: ${o(t.black, 50)};
1601
+ text-transform: uppercase;
1602
+ `, hi = n.div`
1603
+ display: grid;
1604
+ grid-template-columns: repeat(7, ${ne}px);
1605
+ gap: ${Ze}px;
1606
+ `, gi = n.button`
1607
+ display: flex;
1608
+ align-items: center;
1609
+ justify-content: center;
1610
+ width: ${ne}px;
1611
+ height: ${ne}px;
1612
+ border: none;
1613
+ border-radius: 8px;
1614
+ font-size: 13px;
1615
+ font-weight: ${({ $selected: e, $today: r }) => e || r ? 600 : 500};
1616
+ cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
1617
+ background-color: ${({ $selected: e }) => e ? t.black : "transparent"};
1618
+ color: ${({ $selected: e, $disabled: r }) => e ? t.white : r ? o(t.black, 30) : t.black};
1619
+
1620
+ ${({ $today: e, $selected: r }) => e && !r && `
1621
+ box-shadow: inset 0 0 0 1px ${t.black};
1622
+ `}
1623
+
1624
+ &:hover:not(:disabled) {
1625
+ background-color: ${({ $selected: e }) => e ? t.black : o(t.black, 8)};
1626
+ }
1627
+
1628
+ &:disabled {
1629
+ cursor: not-allowed;
1630
+ }
1631
+ `, fi = n.div`
1632
+ display: grid;
1633
+ grid-template-columns: repeat(3, 1fr);
1634
+ gap: 8px;
1635
+ width: ${7 * ne + 6 * Ze}px;
1636
+ `, $i = n.button`
1637
+ display: flex;
1638
+ align-items: center;
1639
+ justify-content: center;
1640
+ padding: 12px 8px;
1641
+ border: none;
1642
+ border-radius: 8px;
1643
+ font-size: 14px;
1644
+ font-weight: ${({ $selected: e, $current: r }) => e || r ? 600 : 400};
1645
+ cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
1646
+ background-color: ${({ $selected: e }) => e ? t.black : "transparent"};
1647
+ color: ${({ $selected: e, $disabled: r }) => e ? t.white : r ? o(t.black, 30) : t.black};
1648
+
1649
+ ${({ $current: e, $selected: r }) => e && !r && `
1650
+ box-shadow: inset 0 0 0 1px ${t.black};
1651
+ `}
1652
+
1653
+ &:hover:not(:disabled) {
1654
+ background-color: ${({ $selected: e }) => e ? t.black : o(t.black, 8)};
1655
+ }
1656
+ `, xi = n.div`
1657
+ display: grid;
1658
+ grid-template-columns: repeat(3, 1fr);
1659
+ gap: 8px;
1660
+ width: ${7 * ne + 6 * Ze}px;
1661
+ `, yi = n.button`
1662
+ display: flex;
1663
+ align-items: center;
1664
+ justify-content: center;
1665
+ padding: 12px 8px;
1666
+ border: none;
1667
+ border-radius: 8px;
1668
+ font-size: 14px;
1669
+ font-weight: ${({ $selected: e, $current: r }) => e || r ? 600 : 400};
1670
+ cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
1671
+ background-color: ${({ $selected: e }) => e ? t.black : "transparent"};
1672
+ color: ${({ $selected: e, $disabled: r }) => e ? t.white : r ? o(t.black, 30) : t.black};
1673
+
1674
+ ${({ $current: e, $selected: r }) => e && !r && `
1675
+ box-shadow: inset 0 0 0 1px ${t.black};
1676
+ `}
1677
+
1678
+ &:hover:not(:disabled) {
1679
+ background-color: ${({ $selected: e }) => e ? t.black : o(t.black, 8)};
1680
+ }
1681
+ `, ki = n.div`
1682
+ width: ${ne}px;
1683
+ height: ${ne}px;
1684
+ `, q = L("date-picker"), Be = 4, vi = 300, ea = ({
1685
+ value: e,
1686
+ onChange: r,
1687
+ mode: i = "date",
1688
+ displayFormat: l,
1689
+ placeholder: d,
1690
+ locale: p = "en",
1691
+ weekStartsOn: b = 1,
1692
+ minDate: c,
1693
+ maxDate: g,
1694
+ size: u = "default",
1695
+ variant: $ = "normal",
1696
+ disabled: h = !1,
1697
+ fullWidth: z = !1,
1698
+ label: S,
1699
+ message: C,
1700
+ portalRenderNode: v,
1701
+ open: P,
1702
+ onOpen: D,
1703
+ onClose: k,
1704
+ className: y,
1705
+ classnames: s,
1706
+ ref: _,
1707
+ ...E
1708
+ }) => {
1709
+ const I = oe(() => /* @__PURE__ */ new Date(), []), [W, H] = B(!1), [Y, V] = B({ top: 0, left: 0 }), [j, T] = B("bottom"), [f, M] = B(() => i === "year" ? "years" : i === "month" ? "months" : "days"), [N, O] = B(() => e ?? I), [G, te] = B(() => ((e == null ? void 0 : e.getFullYear()) ?? I.getFullYear()) - 6), se = K(null), m = K(null), R = K(null), U = P !== void 0, X = U ? P : W, $e = l ?? oi(i), Le = oe(() => Qo(p, b), [p, b]), Je = oe(() => ei(p), [p]), gr = oe(
1710
+ () => Jo(N.getFullYear(), N.getMonth(), b),
1711
+ [N, b]
1712
+ ), Me = oe(() => ri(G + 6, 12), [G]), yt = oe(() => e ? Xo(e, $e, p) : null, [e, $e, p]), fr = d ?? $e.replace(/2006|06|January|Jan|01|02/g, "__"), me = A(() => {
1713
+ var Ce;
1714
+ if (!m.current) return;
1715
+ const x = m.current.getBoundingClientRect(), F = ((Ce = R.current) == null ? void 0 : Ce.offsetHeight) ?? vi, Pe = window.innerHeight - x.bottom - Be, Fe = x.top - Be, xe = Pe < F && Fe > Pe ? "top" : "bottom";
1716
+ if (T(xe), v) {
1717
+ const Ye = xe === "bottom" ? x.bottom + Be : x.top - F - Be;
1718
+ V({
1719
+ top: Ye,
1720
+ left: x.left
1721
+ });
1722
+ }
1723
+ }, [v]), kt = A(() => {
1724
+ if (h) return;
1725
+ U || H(!0), D == null || D(), M(i === "year" ? "years" : i === "month" ? "months" : "days");
1726
+ const x = e ?? I;
1727
+ O(x), te(x.getFullYear() - 6);
1728
+ }, [h, U, D, i, e, I]), Z = A(() => {
1729
+ U || H(!1), k == null || k();
1730
+ }, [U, k]), $r = A(() => {
1731
+ X ? Z() : kt();
1732
+ }, [X, Z, kt]), xr = A(
1733
+ (x) => {
1734
+ const F = new Date(N.getFullYear(), N.getMonth(), x);
1735
+ r == null || r(F), Z();
1736
+ },
1737
+ [N, r, Z]
1738
+ ), yr = A(
1739
+ (x) => {
1740
+ if (i === "month") {
1741
+ const F = new Date(N.getFullYear(), x, 1);
1742
+ r == null || r(F), Z();
1743
+ } else
1744
+ O(new Date(N.getFullYear(), x, 1)), M("days");
1745
+ },
1746
+ [i, N, r, Z]
1747
+ ), kr = A(
1748
+ (x) => {
1749
+ if (i === "year") {
1750
+ const F = new Date(x, 0, 1);
1751
+ r == null || r(F), Z();
1752
+ } else i === "month" ? (O(new Date(x, N.getMonth(), 1)), M("months")) : (O(new Date(x, N.getMonth(), 1)), M("months"));
1753
+ },
1754
+ [i, N, r, Z]
1755
+ ), vr = A(() => {
1756
+ O((x) => new Date(x.getFullYear(), x.getMonth() - 1, 1));
1757
+ }, []), wr = A(() => {
1758
+ O((x) => new Date(x.getFullYear(), x.getMonth() + 1, 1));
1759
+ }, []), Sr = A(() => {
1760
+ O((x) => new Date(x.getFullYear() - 1, x.getMonth(), 1));
1761
+ }, []), mr = A(() => {
1762
+ O((x) => new Date(x.getFullYear() + 1, x.getMonth(), 1));
1763
+ }, []), Pr = A(() => {
1764
+ te((x) => x - 12);
1765
+ }, []), Cr = A(() => {
1766
+ te((x) => x + 12);
1767
+ }, []), vt = A(() => {
1768
+ f === "days" ? M("months") : f === "months" && M("years");
1769
+ }, [f]);
1770
+ nr(() => {
1771
+ X && me();
1772
+ }, [X, me]), fe(() => {
1773
+ const x = (xe) => {
1774
+ const Ce = xe.target, Ye = se.current && !se.current.contains(Ce), Rr = R.current && !R.current.contains(Ce);
1775
+ v ? Ye && Rr && Z() : Ye && Z();
1776
+ }, F = (xe) => {
1777
+ xe.key === "Escape" && Z();
1778
+ }, Pe = () => {
1779
+ X && v && me();
1780
+ }, Fe = () => {
1781
+ X && v && me();
1782
+ };
1783
+ return X && (document.addEventListener("mousedown", x), document.addEventListener("keydown", F), v && (window.addEventListener("scroll", Pe, !0), window.addEventListener("resize", Fe))), () => {
1784
+ document.removeEventListener("mousedown", x), document.removeEventListener("keydown", F), window.removeEventListener("scroll", Pe, !0), window.removeEventListener("resize", Fe);
1785
+ };
1786
+ }, [X, Z, v, me]);
1787
+ const Nr = Xe[u].iconSize, zr = () => /* @__PURE__ */ w(Ke, { children: [
1788
+ /* @__PURE__ */ w(nt, { className: q("header", s == null ? void 0 : s.header), children: [
1789
+ /* @__PURE__ */ a(at, { onClick: vt, type: "button", children: new Intl.DateTimeFormat(p, { month: "long", year: "numeric" }).format(N) }),
1790
+ /* @__PURE__ */ w(dt, { children: [
1791
+ /* @__PURE__ */ a(ye, { onClick: vr, type: "button", "aria-label": "Previous month", children: /* @__PURE__ */ a(Qe, { size: 16 }) }),
1792
+ /* @__PURE__ */ a(ye, { onClick: wr, type: "button", "aria-label": "Next month", children: /* @__PURE__ */ a(et, { size: 16 }) })
1793
+ ] })
1794
+ ] }),
1795
+ /* @__PURE__ */ a(ui, { children: Le.map((x, F) => /* @__PURE__ */ a(bi, { children: x }, F)) }),
1796
+ /* @__PURE__ */ a(hi, { className: q("grid", s == null ? void 0 : s.grid), children: gr.map(
1797
+ (x, F) => x === null ? /* @__PURE__ */ a(ki, {}, F) : /* @__PURE__ */ a(
1798
+ gi,
1799
+ {
1800
+ type: "button",
1801
+ className: q("cell", s == null ? void 0 : s.cell),
1802
+ $selected: e ? At(e, new Date(N.getFullYear(), N.getMonth(), x)) : !1,
1803
+ $today: At(I, new Date(N.getFullYear(), N.getMonth(), x)),
1804
+ $disabled: Lt(
1805
+ N.getFullYear(),
1806
+ N.getMonth(),
1807
+ x,
1808
+ c,
1809
+ g
1810
+ ),
1811
+ disabled: Lt(
1812
+ N.getFullYear(),
1813
+ N.getMonth(),
1814
+ x,
1815
+ c,
1816
+ g
1817
+ ),
1818
+ onClick: () => xr(x),
1819
+ children: x
1820
+ },
1821
+ F
1822
+ )
1823
+ ) })
1824
+ ] }), Tr = () => /* @__PURE__ */ w(Ke, { children: [
1825
+ /* @__PURE__ */ w(nt, { className: q("header", s == null ? void 0 : s.header), children: [
1826
+ /* @__PURE__ */ a(at, { onClick: vt, type: "button", children: N.getFullYear() }),
1827
+ /* @__PURE__ */ w(dt, { children: [
1828
+ /* @__PURE__ */ a(ye, { onClick: Sr, type: "button", "aria-label": "Previous year", children: /* @__PURE__ */ a(Qe, { size: 16 }) }),
1829
+ /* @__PURE__ */ a(ye, { onClick: mr, type: "button", "aria-label": "Next year", children: /* @__PURE__ */ a(et, { size: 16 }) })
1830
+ ] })
1831
+ ] }),
1832
+ /* @__PURE__ */ a(fi, { className: q("grid", s == null ? void 0 : s.grid), children: Je.map((x, F) => /* @__PURE__ */ a(
1833
+ $i,
1834
+ {
1835
+ type: "button",
1836
+ className: q("cell", s == null ? void 0 : s.cell),
1837
+ $selected: e ? Et(e, new Date(N.getFullYear(), F, 1)) : !1,
1838
+ $current: Et(I, new Date(N.getFullYear(), F, 1)),
1839
+ $disabled: Mt(N.getFullYear(), F, c, g),
1840
+ disabled: Mt(N.getFullYear(), F, c, g),
1841
+ onClick: () => yr(F),
1842
+ children: x
1843
+ },
1844
+ F
1845
+ )) })
1846
+ ] }), Dr = () => /* @__PURE__ */ w(Ke, { children: [
1847
+ /* @__PURE__ */ w(nt, { className: q("header", s == null ? void 0 : s.header), children: [
1848
+ /* @__PURE__ */ w(at, { type: "button", style: { cursor: "default" }, children: [
1849
+ Me[0],
1850
+ " - ",
1851
+ Me[Me.length - 1]
1852
+ ] }),
1853
+ /* @__PURE__ */ w(dt, { children: [
1854
+ /* @__PURE__ */ a(ye, { onClick: Pr, type: "button", "aria-label": "Previous years", children: /* @__PURE__ */ a(Qe, { size: 16 }) }),
1855
+ /* @__PURE__ */ a(ye, { onClick: Cr, type: "button", "aria-label": "Next years", children: /* @__PURE__ */ a(et, { size: 16 }) })
1856
+ ] })
1857
+ ] }),
1858
+ /* @__PURE__ */ a(xi, { className: q("grid", s == null ? void 0 : s.grid), children: Me.map((x) => /* @__PURE__ */ a(
1859
+ yi,
1860
+ {
1861
+ type: "button",
1862
+ className: q("cell", s == null ? void 0 : s.cell),
1863
+ $selected: e ? ti(e, new Date(x, 0, 1)) : !1,
1864
+ $current: I.getFullYear() === x,
1865
+ $disabled: Ft(x, c, g),
1866
+ disabled: Ft(x, c, g),
1867
+ onClick: () => kr(x),
1868
+ children: x
1869
+ },
1870
+ x
1871
+ )) })
1872
+ ] }), wt = () => {
1873
+ switch (f) {
1874
+ case "days":
1875
+ return zr();
1876
+ case "months":
1877
+ return Tr();
1878
+ case "years":
1879
+ return Dr();
1880
+ }
1881
+ }, Or = v ? qe(
1882
+ /* @__PURE__ */ a(
1883
+ pi,
1884
+ {
1885
+ ref: R,
1886
+ $open: X,
1887
+ $position: j,
1888
+ className: q("calendar", s == null ? void 0 : s.calendar),
1889
+ style: { top: Y.top, left: Y.left },
1890
+ children: wt()
1891
+ }
1892
+ ),
1893
+ v
1894
+ ) : /* @__PURE__ */ a(
1895
+ si,
1896
+ {
1897
+ ref: R,
1898
+ $open: X,
1899
+ $position: j,
1900
+ className: q("calendar", s == null ? void 0 : s.calendar),
1901
+ children: wt()
1902
+ }
1903
+ );
1904
+ return /* @__PURE__ */ w(
1905
+ ii,
1906
+ {
1907
+ ...E,
1908
+ ref: _ ?? se,
1909
+ $fullWidth: z,
1910
+ className: q("container", y),
1911
+ children: [
1912
+ S && /* @__PURE__ */ a(ni, { variant: $, children: S }),
1913
+ /* @__PURE__ */ w(
1914
+ di,
1915
+ {
1916
+ ref: m,
1917
+ type: "button",
1918
+ onClick: $r,
1919
+ disabled: h,
1920
+ $size: u,
1921
+ $variant: $,
1922
+ $disabled: h,
1923
+ $open: X,
1924
+ $hasValue: !!yt,
1925
+ className: q("trigger", s == null ? void 0 : s.trigger),
1926
+ children: [
1927
+ /* @__PURE__ */ a(li, { children: yt ?? fr }),
1928
+ /* @__PURE__ */ a(ci, { $open: X, children: /* @__PURE__ */ a(ir, { size: Nr }) })
1929
+ ]
1930
+ }
1931
+ ),
1932
+ Or,
1933
+ C && /* @__PURE__ */ a(ai, { variant: $, children: C })
1934
+ ]
1935
+ }
1936
+ );
1937
+ }, Yt = {
1938
+ compact: {
1939
+ height: "32px",
1940
+ padding: "0 10px",
1941
+ radius: "14px",
1942
+ prefixSize: "16px"
1943
+ },
1944
+ default: {
1945
+ height: "40px",
1946
+ padding: "0 14px",
1947
+ radius: "16px",
1948
+ prefixSize: "20px"
1949
+ }
1950
+ }, Vt = {
1951
+ normal: {
1952
+ background: {
1953
+ static: o(t.black, 2),
1954
+ disabled: o(t.black, 10)
1955
+ },
1956
+ border: {
1957
+ static: o(t.black, 60),
1958
+ disabled: o(t.black, 10)
1959
+ },
1960
+ color: {
1961
+ static: t.black,
1962
+ disabled: o(t.black, 65)
1963
+ },
1964
+ placeholder: {
1965
+ static: o(t.black, 40),
1966
+ disabled: o(t.black, 65)
1967
+ },
1968
+ focus: o(t["iron-grey"], 30)
1969
+ },
1970
+ error: {
1971
+ background: {
1972
+ static: o(t.red, 2),
1973
+ disabled: o(t.red, 10)
1974
+ },
1975
+ border: {
1976
+ static: o(t.red, 60),
1977
+ disabled: o(t.red, 10)
1978
+ },
1979
+ color: {
1980
+ static: t.red,
1981
+ disabled: o(t.red, 65)
1982
+ },
1983
+ placeholder: {
1984
+ static: o(t.red, 40),
1985
+ disabled: o(t.red, 65)
1986
+ },
1987
+ focus: o(t.red, 30)
1988
+ }
1989
+ }, re = (e) => Vt[e] ?? Vt.normal, Ee = (e) => Yt[e] ?? Yt.default, wi = n.div`
1990
+ display: grid;
1991
+ flex-direction: column;
1992
+ gap: 2px;
1993
+ width: ${(e) => e.$fullWidth ? "100%" : "fit-content"};
1994
+ `, Si = n(le)`
1995
+ margin-left: 6px;
1996
+ `, mi = n(ce)`
1997
+ margin-left: 6px;
1998
+ `, Pi = n.div`
1999
+ display: flex;
2000
+ align-items: stretch;
2001
+ border: 1px solid
2002
+ ${(e) => re(e.$variant).border[e.$disabled ? "disabled" : "static"]};
2003
+ border-radius: ${(e) => Ee(e.$size).radius};
2004
+ overflow: hidden;
2005
+ `, Ci = n.span`
2006
+ display: flex;
2007
+ align-items: center;
2008
+ flex-shrink: 0;
2009
+ padding: ${(e) => Ee(e.$size).padding};
2010
+ font-size: 14px;
2011
+ font-weight: 500;
2012
+ white-space: nowrap;
2013
+ user-select: none;
2014
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "default"};
2015
+ color: ${(e) => re(e.$variant).color[e.$disabled ? "disabled" : "static"]};
2016
+ background-color: ${(e) => e.$variant === "error" ? o(t.red, 8) : o(t.black, 6)};
2017
+ border-right: 1px solid
2018
+ ${(e) => re(e.$variant).border[e.$disabled ? "disabled" : "static"]};
2019
+ `, Ni = n.input`
2020
+ flex: 1;
2021
+ min-width: 0;
2022
+ outline: none;
2023
+ font-size: 14px;
2024
+ font-weight: 500;
2025
+ height: ${(e) => Ee(e.$size).height};
2026
+ padding: ${(e) => Ee(e.$size).padding};
2027
+ border-radius: ${(e) => e.$hasPrefix ? "0" : Ee(e.$size).radius};
2028
+
2029
+ color: ${(e) => re(e.$variant).color.static};
2030
+ border: ${(e) => e.$hasPrefix ? "none" : `1px solid ${re(e.$variant).border.static}`};
2031
+ background-color: ${(e) => re(e.$variant).background.static};
2032
+
2033
+ &::placeholder {
2034
+ color: ${(e) => re(e.$variant).placeholder.static};
2035
+ }
2036
+
2037
+ &:disabled {
2038
+ cursor: not-allowed;
2039
+ color: ${(e) => re(e.$variant).color.disabled};
2040
+ background-color: ${(e) => re(e.$variant).background.disabled};
2041
+ border-color: ${(e) => e.$hasPrefix ? "transparent" : re(e.$variant).border.disabled};
2042
+
2043
+ &::placeholder {
2044
+ color: ${(e) => re(e.$variant).placeholder.disabled};
2045
+ }
2046
+ }
2047
+ `, He = L("input"), zi = ({
2048
+ className: e,
2049
+ classnames: r,
2050
+ disabled: i,
2051
+ fullWidth: l,
2052
+ label: d,
2053
+ ref: p,
2054
+ message: b,
2055
+ prefix: c,
2056
+ size: g = "default",
2057
+ variant: u = "normal",
2058
+ ...$
2059
+ }) => {
2060
+ const h = c != null, z = /* @__PURE__ */ a(
2061
+ Ni,
2062
+ {
2063
+ ...$,
2064
+ ref: p,
2065
+ disabled: i,
2066
+ $size: g,
2067
+ $variant: u,
2068
+ $hasPrefix: h,
2069
+ className: He("input", r == null ? void 0 : r.input)
2070
+ }
2071
+ );
2072
+ return /* @__PURE__ */ w(wi, { className: He("container", e), $fullWidth: !!l, children: [
2073
+ /* @__PURE__ */ a(Si, { variant: u, className: He("label", r == null ? void 0 : r.label), children: d }),
2074
+ h ? /* @__PURE__ */ w(Pi, { $size: g, $variant: u, $disabled: !!i, children: [
2075
+ /* @__PURE__ */ a(
2076
+ Ci,
2077
+ {
2078
+ $size: g,
2079
+ $variant: u,
2080
+ $disabled: !!i,
2081
+ className: He("prefix"),
2082
+ children: c
2083
+ }
2084
+ ),
2085
+ z
2086
+ ] }) : z,
2087
+ b && /* @__PURE__ */ a(mi, { variant: u, children: b })
2088
+ ] });
2089
+ }, Ti = n.div`
2090
+ position: fixed;
2091
+ inset: 0;
2092
+ z-index: 1000;
2093
+ display: flex;
2094
+ align-items: center;
2095
+ justify-content: center;
2096
+ background-color: ${o(t.black, 50)};
2097
+ animation: ${$t.fadeIn} ${(e) => e.$animated ? "0.15s" : "0s"} ease-out forwards;
2098
+ `, Di = n.div`
2099
+ position: relative;
2100
+ z-index: 1001;
2101
+ width: ${(e) => e.$width};
2102
+ max-width: calc(100vw - 32px);
2103
+ max-height: calc(100vh - 32px);
2104
+ overflow: auto;
2105
+ background-color: ${t.white};
2106
+ border-radius: 16px;
2107
+ box-shadow: 0 8px 32px ${o(t.black, 20)};
2108
+ animation: ${$t.scaleIn} ${(e) => e.$animated ? "0.15s" : "0s"} ease-out forwards;
2109
+ `, Bt = L("modal"), Oi = ({
2110
+ animated: e,
2111
+ children: r,
2112
+ className: i,
2113
+ classnames: l,
2114
+ open: d,
2115
+ ref: p,
2116
+ width: b = "500px",
2117
+ ...c
2118
+ }) => d ? qe(
2119
+ /* @__PURE__ */ a(Ti, { className: Bt("overlay", l == null ? void 0 : l.overlay), $animated: !!e, children: /* @__PURE__ */ a(
2120
+ Di,
2121
+ {
2122
+ ...c,
2123
+ ref: p,
2124
+ className: Bt("content", i, l == null ? void 0 : l.content),
2125
+ $animated: !!e,
2126
+ $width: b,
2127
+ children: r
2128
+ }
2129
+ ) }),
2130
+ document.body
2131
+ ) : null, lr = {
2132
+ normal: {
2133
+ border: t["iron-grey"],
2134
+ placeholder: t["iron-grey"]
2135
+ },
2136
+ error: {
2137
+ border: t.red,
2138
+ placeholder: o(t.red, 40)
2139
+ }
2140
+ }, Ri = n.div`
2141
+ display: flex;
2142
+ flex-direction: column;
2143
+ gap: 4px;
2144
+ `, Ii = n(le)`
2145
+ margin-left: 6px;
2146
+ `, _i = n.div`
2147
+ display: flex;
2148
+ flex-wrap: wrap;
2149
+ align-items: center;
2150
+ gap: 6px;
2151
+ min-height: 44px;
2152
+ padding: 8px 12px;
2153
+ border: 1px dashed ${(e) => lr[e.$variant].border};
2154
+ border-radius: 8px;
2155
+ background: ${t.white};
2156
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
2157
+ opacity: ${(e) => e.$disabled ? 0.5 : 1};
2158
+ transition: border-color 0.15s ease;
2159
+ text-align: left;
2160
+
2161
+ &:hover {
2162
+ border-color: ${(e) => e.$disabled ? void 0 : e.$variant === "error" ? t.red : t.black};
2163
+ }
2164
+ `, Ai = n.span`
2165
+ color: ${(e) => lr[e.$variant].placeholder};
2166
+ font-size: 14px;
2167
+ `, Ei = n.div`
2168
+ display: flex;
2169
+ flex-direction: column;
2170
+ padding: 20px;
2171
+ gap: 16px;
2172
+ `, Li = n.div`
2173
+ display: flex;
2174
+ align-items: center;
2175
+ justify-content: space-between;
2176
+ `, Mi = n.h3`
2177
+ margin: 0;
2178
+ font-size: 18px;
2179
+ font-weight: 600;
2180
+ color: ${t.black};
2181
+ `, Fi = n.div`
2182
+ display: flex;
2183
+ flex-direction: column;
2184
+ gap: 4px;
2185
+ min-height: 200px;
2186
+ max-height: 300px;
2187
+ overflow-y: auto;
2188
+ `, Yi = n.label`
2189
+ display: flex;
2190
+ align-items: center;
2191
+ gap: 10px;
2192
+ padding: 10px 12px;
2193
+ border-radius: 8px;
2194
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
2195
+ opacity: ${(e) => e.$disabled ? 0.5 : 1};
2196
+ transition: background-color 0.15s ease;
2197
+
2198
+ &:hover {
2199
+ background-color: ${(e) => e.$disabled ? "transparent" : t.gray};
2200
+ }
2201
+ `, Vi = n.span`
2202
+ font-size: 14px;
2203
+ color: ${t.black};
2204
+ `, Bi = n.div`
2205
+ display: flex;
2206
+ align-items: center;
2207
+ justify-content: center;
2208
+ padding: 32px 16px;
2209
+ color: ${t["iron-grey"]};
2210
+ font-size: 14px;
2211
+ text-align: center;
2212
+ `, Hi = n(ce)`
2213
+ margin-left: 6px;
2214
+ `, Q = L("multi-select"), ta = ({
2215
+ className: e,
2216
+ classnames: r,
2217
+ disabled: i = !1,
2218
+ emptyMessage: l = "No options found",
2219
+ label: d,
2220
+ maxVisible: p = 1 / 0,
2221
+ message: b,
2222
+ modalTitle: c = "Select options",
2223
+ onChange: g,
2224
+ options: u,
2225
+ placeholder: $ = "Select...",
2226
+ ref: h,
2227
+ searchPlaceholder: z = "Search...",
2228
+ value: S,
2229
+ variant: C = "normal",
2230
+ ...v
2231
+ }) => {
2232
+ const [P, D] = B(!1), [k, y] = B(""), s = K(null), _ = oe(() => u.filter((T) => S.includes(T.value)), [u, S]), E = oe(() => {
2233
+ if (!k.trim()) return u;
2234
+ const T = k.toLowerCase().trim();
2235
+ return u.filter((f) => f.label.toLowerCase().includes(T));
2236
+ }, [u, k]), I = p === 1 / 0 ? _ : _.slice(0, p), W = _.length - I.length, H = () => {
2237
+ i || (D(!0), y(""));
2238
+ }, Y = A(() => {
2239
+ D(!1), y("");
2240
+ }, []), V = (T) => {
2241
+ S.includes(T) ? g(S.filter((f) => f !== T)) : g([...S, T]);
2242
+ }, j = (T) => {
2243
+ g(S.filter((f) => f !== T));
2244
+ };
2245
+ return fe(() => {
2246
+ if (!P) return;
2247
+ const T = (f) => {
2248
+ s.current && !s.current.contains(f.target) && Y();
2249
+ };
2250
+ return document.addEventListener("mousedown", T), () => {
2251
+ document.removeEventListener("mousedown", T);
2252
+ };
2253
+ }, [P, Y]), /* @__PURE__ */ w(Ri, { ...v, ref: h, className: Q("container", e), children: [
2254
+ d && /* @__PURE__ */ a(Ii, { variant: C, className: Q("label", r == null ? void 0 : r.trigger), children: d }),
2255
+ /* @__PURE__ */ a(
2256
+ _i,
2257
+ {
2258
+ $variant: C,
2259
+ $disabled: i,
2260
+ onClick: H,
2261
+ className: Q("trigger", r == null ? void 0 : r.trigger),
2262
+ children: _.length === 0 ? /* @__PURE__ */ a(
2263
+ Ai,
2264
+ {
2265
+ $variant: C,
2266
+ className: Q("placeholder", r == null ? void 0 : r.placeholder),
2267
+ children: $
2268
+ }
2269
+ ) : /* @__PURE__ */ w(Ke, { children: [
2270
+ I.map((T) => /* @__PURE__ */ a(
2271
+ gt,
2272
+ {
2273
+ variant: C === "error" ? "red" : "gray",
2274
+ deletable: !0,
2275
+ onDelete: () => j(T.value),
2276
+ onClick: (f) => f.stopPropagation(),
2277
+ className: Q("chip", r == null ? void 0 : r.chip),
2278
+ children: T.label
2279
+ },
2280
+ T.value
2281
+ )),
2282
+ W > 0 && /* @__PURE__ */ w(
2283
+ gt,
2284
+ {
2285
+ variant: C === "error" ? "red" : "gray",
2286
+ onClick: (T) => T.stopPropagation(),
2287
+ className: Q("chip", r == null ? void 0 : r.chip),
2288
+ children: [
2289
+ "+",
2290
+ W
2291
+ ]
2292
+ }
2293
+ )
2294
+ ] })
2295
+ }
2296
+ ),
2297
+ b && /* @__PURE__ */ a(Hi, { variant: C, className: Q("message"), children: b }),
2298
+ /* @__PURE__ */ a(Oi, { open: P, width: "400px", animated: !0, className: Q("modal", r == null ? void 0 : r.modal), children: /* @__PURE__ */ w(Ei, { ref: s, children: [
2299
+ /* @__PURE__ */ w(Li, { children: [
2300
+ /* @__PURE__ */ a(Mi, { children: c }),
2301
+ /* @__PURE__ */ a(
2302
+ Oo,
2303
+ {
2304
+ variant: "transparent",
2305
+ size: "compact",
2306
+ icon: /* @__PURE__ */ a(or, {}),
2307
+ keyBindings: ["Escape"],
2308
+ onClick: Y
2309
+ }
2310
+ )
2311
+ ] }),
2312
+ /* @__PURE__ */ a(
2313
+ zi,
2314
+ {
2315
+ type: "text",
2316
+ value: k,
2317
+ onChange: (T) => y(T.target.value),
2318
+ placeholder: z,
2319
+ autoFocus: !0,
2320
+ fullWidth: !0,
2321
+ className: Q("search", r == null ? void 0 : r.search)
2322
+ }
2323
+ ),
2324
+ /* @__PURE__ */ a(Fi, { className: Q("options", r == null ? void 0 : r.options), children: E.length === 0 ? /* @__PURE__ */ a(Bi, { className: Q("empty", r == null ? void 0 : r.empty), children: l }) : E.map((T) => /* @__PURE__ */ w(
2325
+ Yi,
2326
+ {
2327
+ $disabled: !!T.disabled,
2328
+ className: Q("option", r == null ? void 0 : r.option),
2329
+ children: [
2330
+ /* @__PURE__ */ a(
2331
+ xt,
2332
+ {
2333
+ checked: S.includes(T.value),
2334
+ disabled: T.disabled,
2335
+ onChange: () => V(T.value)
2336
+ }
2337
+ ),
2338
+ /* @__PURE__ */ a(Vi, { children: T.label })
2339
+ ]
2340
+ },
2341
+ T.value
2342
+ )) })
2343
+ ] }) })
2344
+ ] });
2345
+ }, Ht = {
2346
+ compact: {
2347
+ width: "36px",
2348
+ height: "40px",
2349
+ fontSize: "16px",
2350
+ radius: "10px",
2351
+ gap: "8px"
2352
+ },
2353
+ default: {
2354
+ width: "44px",
2355
+ height: "52px",
2356
+ fontSize: "20px",
2357
+ radius: "12px",
2358
+ gap: "10px"
2359
+ }
2360
+ }, Wt = {
2361
+ normal: {
2362
+ background: {
2363
+ static: o(t.black, 2),
2364
+ disabled: o(t.black, 10)
2365
+ },
2366
+ border: {
2367
+ static: o(t.black, 60),
2368
+ disabled: o(t.black, 10)
2369
+ },
2370
+ color: {
2371
+ static: t.black,
2372
+ disabled: o(t.black, 65)
2373
+ },
2374
+ focus: o(t["iron-grey"], 30)
2375
+ },
2376
+ error: {
2377
+ background: {
2378
+ static: o(t.red, 2),
2379
+ disabled: o(t.red, 10)
2380
+ },
2381
+ border: {
2382
+ static: o(t.red, 60),
2383
+ disabled: o(t.red, 10)
2384
+ },
2385
+ color: {
2386
+ static: t.red,
2387
+ disabled: o(t.red, 65)
2388
+ },
2389
+ focus: o(t.red, 30)
2390
+ }
2391
+ }, Ae = (e) => Ht[e] ?? Ht.default, ke = (e) => Wt[e] ?? Wt.normal, Wi = n.div`
2392
+ display: inline-flex;
2393
+ flex-direction: column;
2394
+ gap: 2px;
2395
+ `, ji = n(le)`
2396
+ margin-left: 6px;
2397
+ `, Gi = n.div`
2398
+ display: flex;
2399
+ gap: ${(e) => Ae(e.$size).gap};
2400
+ `, Ui = n.input`
2401
+ width: ${(e) => Ae(e.$size).width};
2402
+ height: ${(e) => Ae(e.$size).height};
2403
+ border-radius: ${(e) => Ae(e.$size).radius};
2404
+ font-size: ${(e) => Ae(e.$size).fontSize};
2405
+ font-weight: 600;
2406
+ text-align: center;
2407
+ outline: none;
2408
+ border: 1px solid ${(e) => ke(e.$variant).border.static};
2409
+ background-color: ${(e) => ke(e.$variant).background.static};
2410
+ color: ${(e) => ke(e.$variant).color.static};
2411
+ transition:
2412
+ border-color 0.15s ease,
2413
+ box-shadow 0.15s ease;
2414
+
2415
+ &:disabled {
2416
+ cursor: not-allowed;
2417
+ color: ${(e) => ke(e.$variant).color.disabled};
2418
+ background-color: ${(e) => ke(e.$variant).background.disabled};
2419
+ border-color: ${(e) => ke(e.$variant).border.disabled};
2420
+ }
2421
+
2422
+ &::selection {
2423
+ background-color: transparent;
2424
+ }
2425
+ `, Ki = n(ce)`
2426
+ margin-left: 6px;
2427
+ `, We = L("otp-code"), ra = ({
2428
+ autoFocus: e,
2429
+ className: r,
2430
+ classnames: i,
2431
+ disabled: l,
2432
+ label: d,
2433
+ length: p = 6,
2434
+ message: b,
2435
+ onChange: c,
2436
+ ref: g,
2437
+ size: u = "default",
2438
+ value: $ = "",
2439
+ variant: h = "normal",
2440
+ ...z
2441
+ }) => {
2442
+ const S = K([]);
2443
+ fe(() => {
2444
+ e && S.current[0] && S.current[0].focus();
2445
+ }, [e]);
2446
+ const C = A((k) => {
2447
+ const y = S.current[k];
2448
+ y && (y.focus(), y.select());
2449
+ }, []), v = A(
2450
+ (k, y) => {
2451
+ const _ = y.target.value.replace(/\D/g, "").slice(-1);
2452
+ if (!_) return;
2453
+ const E = $.padEnd(p, " ").split(""), I = E.findIndex((V) => V === " " || V === ""), W = I !== -1 ? I : k;
2454
+ E[W] = _;
2455
+ const H = E.join("").replace(/ /g, "");
2456
+ c == null || c(H);
2457
+ const Y = W + 1;
2458
+ Y < p && C(Y);
2459
+ },
2460
+ [$, p, c, C]
2461
+ ), P = A(
2462
+ (k, y) => {
2463
+ if (y.key === "Backspace") {
2464
+ y.preventDefault();
2465
+ const s = $.split("");
2466
+ s[k] ? (s[k] = "", c == null || c(s.join(""))) : k > 0 && (s[k - 1] = "", c == null || c(s.join("")), C(k - 1));
2467
+ } else y.key === "ArrowLeft" && k > 0 ? (y.preventDefault(), C(k - 1)) : y.key === "ArrowRight" && k < p - 1 && (y.preventDefault(), C(k + 1));
2468
+ },
2469
+ [$, p, c, C]
2470
+ ), D = A(
2471
+ (k) => {
2472
+ k.preventDefault();
2473
+ const y = k.clipboardData.getData("text").replace(/\D/g, "").slice(0, p);
2474
+ if (y) {
2475
+ c == null || c(y);
2476
+ const s = Math.min(y.length, p - 1);
2477
+ C(s);
2478
+ }
2479
+ },
2480
+ [p, c, C]
2481
+ );
2482
+ return /* @__PURE__ */ w(Wi, { ref: g, className: We("container", r), ...z, children: [
2483
+ d && /* @__PURE__ */ a(ji, { variant: h, className: We("label", i == null ? void 0 : i.label), children: d }),
2484
+ /* @__PURE__ */ a(Gi, { $size: u, children: Array.from({ length: p }).map((k, y) => /* @__PURE__ */ a(
2485
+ Ui,
2486
+ {
2487
+ ref: (s) => {
2488
+ S.current[y] = s;
2489
+ },
2490
+ type: "text",
2491
+ inputMode: "numeric",
2492
+ autoComplete: "one-time-code",
2493
+ maxLength: 2,
2494
+ disabled: l,
2495
+ value: $[y] ?? "",
2496
+ onChange: (s) => v(y, s),
2497
+ onKeyDown: (s) => P(y, s),
2498
+ onPaste: D,
2499
+ onFocus: (s) => s.target.select(),
2500
+ $size: u,
2501
+ $variant: h,
2502
+ className: We("input", i == null ? void 0 : i.input)
2503
+ },
2504
+ y
2505
+ )) }),
2506
+ b && /* @__PURE__ */ a(Ki, { variant: h, className: We("message"), children: b })
2507
+ ] });
2508
+ }, jt = {
2509
+ normal: {
2510
+ box: {
2511
+ border: o(t["iron-grey"], 30),
2512
+ borderChecked: t["iron-grey"],
2513
+ background: t.white,
2514
+ backgroundChecked: t.white,
2515
+ focusShadow: o(t["iron-grey"], 30)
2516
+ },
2517
+ dot: t.black,
2518
+ label: t.black
2519
+ },
2520
+ error: {
2521
+ box: {
2522
+ border: t.red,
2523
+ borderChecked: t.red,
2524
+ background: t.white,
2525
+ backgroundChecked: t.white,
2526
+ focusShadow: o(t.red, 30)
2527
+ },
2528
+ dot: t.red,
2529
+ label: t.red
2530
+ }
2531
+ }, Se = (e) => jt[e] ?? jt.normal, Xi = n.label`
2532
+ display: inline-flex;
2533
+ align-items: flex-start;
2534
+ gap: 8px;
2535
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
2536
+ opacity: ${(e) => e.$disabled ? 0.5 : 1};
2537
+ `, qi = n.input`
2538
+ position: absolute;
2539
+ opacity: 0;
2540
+ width: 0;
2541
+ height: 0;
2542
+ pointer-events: none;
2543
+ `, Zi = n.span`
2544
+ display: inline-flex;
2545
+ align-items: center;
2546
+ justify-content: center;
2547
+ flex-shrink: 0;
2548
+ width: 18px;
2549
+ height: 18px;
2550
+ border-radius: 50%;
2551
+ border: 1.5px solid
2552
+ ${(e) => e.$checked ? Se(e.$variant).box.borderChecked : Se(e.$variant).box.border};
2553
+ background-color: ${(e) => e.$checked ? Se(e.$variant).box.backgroundChecked : Se(e.$variant).box.background};
2554
+ transition:
2555
+ border-color 0.15s ease,
2556
+ background-color 0.15s ease,
2557
+ box-shadow 0.15s ease;
2558
+ `, Ji = n.span`
2559
+ width: 8px;
2560
+ height: 8px;
2561
+ border-radius: 50%;
2562
+ background-color: ${(e) => Se(e.$variant).dot};
2563
+ opacity: ${(e) => e.$visible ? 1 : 0};
2564
+ transform: ${(e) => e.$visible ? "scale(1)" : "scale(0.5)"};
2565
+ transition:
2566
+ opacity 0.15s ease,
2567
+ transform 0.15s ease;
2568
+ `, Qi = n.span`
2569
+ font-size: 14px;
2570
+ font-weight: 500;
2571
+ line-height: 1.5;
2572
+ color: ${(e) => Se(e.$variant).label};
2573
+ user-select: none;
2574
+
2575
+ a {
2576
+ color: inherit;
2577
+ text-decoration: underline;
2578
+ cursor: pointer;
2579
+
2580
+ &:hover {
2581
+ text-decoration: none;
2582
+ }
2583
+ }
2584
+ `, Oe = L("radio"), cr = ({
2585
+ checked: e,
2586
+ className: r,
2587
+ classnames: i,
2588
+ disabled: l,
2589
+ label: d,
2590
+ onChange: p,
2591
+ ref: b,
2592
+ variant: c = "normal",
2593
+ ...g
2594
+ }) => /* @__PURE__ */ w(
2595
+ Xi,
2596
+ {
2597
+ className: Oe("container", r),
2598
+ $disabled: !!l,
2599
+ $variant: c,
2600
+ children: [
2601
+ /* @__PURE__ */ a(
2602
+ qi,
2603
+ {
2604
+ ...g,
2605
+ ref: b,
2606
+ type: "radio",
2607
+ className: Oe("input", i == null ? void 0 : i.input),
2608
+ checked: e,
2609
+ disabled: l,
2610
+ onChange: p
2611
+ }
2612
+ ),
2613
+ /* @__PURE__ */ a(Zi, { className: Oe("box", i == null ? void 0 : i.box), $checked: e, $variant: c, children: /* @__PURE__ */ a(Ji, { className: Oe("dot", i == null ? void 0 : i.dot), $visible: e, $variant: c }) }),
2614
+ d && /* @__PURE__ */ a(Qi, { className: Oe("label", i == null ? void 0 : i.label), $variant: c, children: d })
2615
+ ]
2616
+ }
2617
+ ), Gt = {
2618
+ normal: {
2619
+ border: {
2620
+ static: o(t.black, 20),
2621
+ hover: o(t.black, 40),
2622
+ active: o(t.black, 40),
2623
+ disabled: o(t.black, 10)
2624
+ },
2625
+ borderChecked: t.black,
2626
+ background: {
2627
+ static: t.white,
2628
+ hover: t.white,
2629
+ active: t.white,
2630
+ disabled: o(t.black, 5)
2631
+ },
2632
+ backgroundChecked: o(t.black, 5),
2633
+ focusRing: o(t.black, 20),
2634
+ label: {
2635
+ static: t.black,
2636
+ hover: t.black,
2637
+ active: t.black,
2638
+ disabled: o(t.black, 40)
2639
+ },
2640
+ description: {
2641
+ static: o(t.black, 60),
2642
+ hover: o(t.black, 60),
2643
+ active: o(t.black, 60),
2644
+ disabled: o(t.black, 30)
2645
+ }
2646
+ },
2647
+ error: {
2648
+ border: {
2649
+ static: t.red,
2650
+ hover: t.red,
2651
+ active: t.red,
2652
+ disabled: o(t.red, 30)
2653
+ },
2654
+ borderChecked: t.red,
2655
+ background: {
2656
+ static: t.white,
2657
+ hover: t.white,
2658
+ active: t.white,
2659
+ disabled: o(t.red, 5)
2660
+ },
2661
+ backgroundChecked: o(t.red, 5),
2662
+ focusRing: o(t.red, 20),
2663
+ label: {
2664
+ static: t.red,
2665
+ hover: t.red,
2666
+ active: t.red,
2667
+ disabled: o(t.red, 40)
2668
+ },
2669
+ description: {
2670
+ static: o(t.red, 70),
2671
+ hover: o(t.red, 70),
2672
+ active: o(t.red, 70),
2673
+ disabled: o(t.red, 40)
2674
+ }
2675
+ }
2676
+ }, he = (e) => Gt[e] ?? Gt.normal, en = n.label`
2677
+ display: grid;
2678
+ grid-template-columns: auto 1fr;
2679
+ align-items: start;
2680
+ gap: 8px;
2681
+ padding: 12px;
2682
+ background-color: ${(e) => {
2683
+ const r = he(e.$variant);
2684
+ return e.$disabled ? r.background.disabled : e.$checked ? r.backgroundChecked : r.background.static;
2685
+ }};
2686
+ border: 1px solid
2687
+ ${(e) => {
2688
+ const r = he(e.$variant);
2689
+ return e.$disabled ? r.border.disabled : e.$checked ? r.borderChecked : r.border.static;
2690
+ }};
2691
+ border-radius: 12px;
2692
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
2693
+ transition:
2694
+ border-color 0.15s ease,
2695
+ background-color 0.15s ease;
2696
+ width: ${(e) => e.$fullWidth ? "100%" : "fit-content"};
2697
+ min-width: 0;
2698
+
2699
+ &:hover:not([data-disabled='true']) {
2700
+ border-color: ${(e) => {
2701
+ const r = he(e.$variant);
2702
+ return e.$checked ? r.borderChecked : r.border.hover;
2703
+ }};
2704
+ }
2705
+
2706
+ .vacano_radio_container {
2707
+ pointer-events: none;
2708
+ }
2709
+ `, tn = n.input`
2710
+ position: absolute;
2711
+ width: 1px;
2712
+ height: 1px;
2713
+ margin: -1px;
2714
+ padding: 0;
2715
+ overflow: hidden;
2716
+ clip: rect(0, 0, 0, 0);
2717
+ white-space: nowrap;
2718
+ border: 0;
2719
+ `, rn = n.div`
2720
+ display: flex;
2721
+ flex-direction: column;
2722
+ gap: 2px;
2723
+ min-width: 0;
2724
+ `, on = n.span`
2725
+ font-size: 14px;
2726
+ font-weight: 500;
2727
+ line-height: 1.4;
2728
+ color: ${(e) => he(e.$variant).label.static};
2729
+
2730
+ label[data-disabled='true'] & {
2731
+ color: ${(e) => he(e.$variant).label.disabled};
2732
+ }
2733
+ `, nn = n.span`
2734
+ font-size: 12px;
2735
+ font-weight: 400;
2736
+ line-height: 1.4;
2737
+ color: ${(e) => he(e.$variant).description.static};
2738
+
2739
+ label[data-disabled='true'] & {
2740
+ color: ${(e) => he(e.$variant).description.disabled};
2741
+ }
2742
+ `, je = L("radio-card"), oa = ({
2743
+ checked: e,
2744
+ className: r,
2745
+ classnames: i,
2746
+ description: l,
2747
+ disabled: d,
2748
+ fullWidth: p = !1,
2749
+ label: b,
2750
+ onChange: c,
2751
+ ref: g,
2752
+ variant: u = "normal",
2753
+ ...$
2754
+ }) => /* @__PURE__ */ w(
2755
+ en,
2756
+ {
2757
+ className: je("container", r),
2758
+ $checked: e,
2759
+ $disabled: !!d,
2760
+ $fullWidth: p,
2761
+ $variant: u,
2762
+ "data-disabled": d,
2763
+ children: [
2764
+ /* @__PURE__ */ a(
2765
+ tn,
2766
+ {
2767
+ ...$,
2768
+ ref: g,
2769
+ type: "radio",
2770
+ checked: e,
2771
+ disabled: d,
2772
+ onChange: c
2773
+ }
2774
+ ),
2775
+ /* @__PURE__ */ a(
2776
+ cr,
2777
+ {
2778
+ className: i == null ? void 0 : i.radio,
2779
+ checked: e,
2780
+ disabled: d,
2781
+ variant: u,
2782
+ onChange: () => {
2783
+ },
2784
+ tabIndex: -1,
2785
+ "aria-hidden": !0
2786
+ }
2787
+ ),
2788
+ /* @__PURE__ */ w(rn, { className: je("content", i == null ? void 0 : i.content), children: [
2789
+ /* @__PURE__ */ a(on, { className: je("label", i == null ? void 0 : i.label), $variant: u, children: b }),
2790
+ l && /* @__PURE__ */ a(
2791
+ nn,
2792
+ {
2793
+ className: je("description", i == null ? void 0 : i.description),
2794
+ $variant: u,
2795
+ children: l
2796
+ }
2797
+ )
2798
+ ] })
2799
+ ]
2800
+ }
2801
+ ), Ut = {
2802
+ label: {
2803
+ color: t.black,
2804
+ disabledColor: o(t.black, 40)
2805
+ }
2806
+ }, an = n.div`
2807
+ display: flex;
2808
+ flex-direction: column;
2809
+ gap: 8px;
2810
+ `, dn = n.span`
2811
+ font-size: 13px;
2812
+ font-weight: 500;
2813
+ line-height: 1.5;
2814
+ color: ${(e) => e.$disabled ? Ut.label.disabledColor : Ut.label.color};
2815
+ margin-bottom: 4px;
2816
+ `, ln = n.div`
2817
+ display: flex;
2818
+ flex-direction: column;
2819
+ gap: 12px;
2820
+ `, lt = L("radio-group"), ia = ({
2821
+ className: e,
2822
+ classnames: r,
2823
+ disabled: i,
2824
+ label: l,
2825
+ name: d,
2826
+ onChange: p,
2827
+ options: b,
2828
+ ref: c,
2829
+ value: g,
2830
+ variant: u = "normal",
2831
+ ...$
2832
+ }) => /* @__PURE__ */ w(an, { ...$, ref: c, className: lt("container", e), children: [
2833
+ l && /* @__PURE__ */ a(dn, { className: lt("label", r == null ? void 0 : r.label), $disabled: i, children: l }),
2834
+ /* @__PURE__ */ a(ln, { className: lt("options", r == null ? void 0 : r.options), children: b.map((h) => /* @__PURE__ */ a(
2835
+ cr,
2836
+ {
2837
+ className: r == null ? void 0 : r.radio,
2838
+ name: d,
2839
+ checked: g === h.value,
2840
+ label: h.label,
2841
+ disabled: i,
2842
+ variant: u,
2843
+ onChange: () => p(h.value)
2844
+ },
2845
+ h.value
2846
+ )) })
2847
+ ] }), ct = 40, st = 2, Re = 4, Kt = {
2848
+ compact: {
2849
+ height: "32px",
2850
+ padding: "0 10px",
2851
+ radius: "14px"
2852
+ },
2853
+ default: {
2854
+ height: "40px",
2855
+ padding: "0 14px",
2856
+ radius: "16px"
2857
+ }
2858
+ }, Xt = {
2859
+ normal: {
2860
+ background: {
2861
+ static: o(t.black, 2),
2862
+ disabled: o(t.black, 10)
2863
+ },
2864
+ border: {
2865
+ static: o(t.black, 60),
2866
+ disabled: o(t.black, 10)
2867
+ },
2868
+ color: {
2869
+ static: t.black,
2870
+ disabled: o(t.black, 65)
2871
+ },
2872
+ placeholder: o(t.black, 40),
2873
+ focus: o(t["iron-grey"], 30)
2874
+ },
2875
+ error: {
2876
+ background: {
2877
+ static: o(t.red, 2),
2878
+ disabled: o(t.red, 10)
2879
+ },
2880
+ border: {
2881
+ static: o(t.red, 60),
2882
+ disabled: o(t.red, 10)
2883
+ },
2884
+ color: {
2885
+ static: t.red,
2886
+ disabled: o(t.red, 65)
2887
+ },
2888
+ placeholder: o(t.red, 40),
2889
+ focus: o(t.red, 30)
2890
+ }
2891
+ }, pt = (e) => Kt[e] ?? Kt.default, pe = (e) => Xt[e] ?? Xt.normal, cn = n.div`
2892
+ position: relative;
2893
+ display: grid;
2894
+ gap: 2px;
2895
+ min-width: 180px;
2896
+ width: ${(e) => e.$fullWidth ? "100%" : "fit-content"};
2897
+ `, sn = n(le)`
2898
+ margin-left: 6px;
2899
+ `, pn = n(ce)`
2900
+ margin-left: 6px;
2901
+ `, un = n.button`
2902
+ display: flex;
2903
+ align-items: center;
2904
+ justify-content: space-between;
2905
+ gap: 8px;
2906
+ width: 100%;
2907
+ outline: none;
2908
+ font-size: 14px;
2909
+ font-weight: 500;
2910
+ text-align: left;
2911
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
2912
+ height: ${(e) => pt(e.$size).height};
2913
+ padding: ${(e) => pt(e.$size).padding};
2914
+ border-radius: ${(e) => pt(e.$size).radius};
2915
+
2916
+ color: ${(e) => e.$hasValue ? e.$disabled ? pe(e.$variant).color.disabled : pe(e.$variant).color.static : pe(e.$variant).placeholder};
2917
+ border: 1px solid
2918
+ ${(e) => e.$disabled ? pe(e.$variant).border.disabled : pe(e.$variant).border.static};
2919
+ background-color: ${(e) => e.$disabled ? pe(e.$variant).background.disabled : pe(e.$variant).background.static};
2920
+ `, bn = n.span`
2921
+ flex: 1;
2922
+ min-width: 0;
2923
+ overflow: hidden;
2924
+ text-overflow: ellipsis;
2925
+ white-space: nowrap;
2926
+ `, hn = n.span`
2927
+ display: flex;
2928
+ align-items: center;
2929
+ justify-content: center;
2930
+ flex-shrink: 0;
2931
+ transition: transform 0.2s ease;
2932
+ transform: rotate(${(e) => e.$open ? "180deg" : "0deg"});
2933
+ `, sr = `
2934
+ display: grid;
2935
+ gap: 2px;
2936
+ padding: 4px;
2937
+ background: ${t.white};
2938
+ border: 1px solid ${o(t.black, 10)};
2939
+ border-radius: 16px;
2940
+ box-shadow: 0 4px 20px ${o(t.black, 15)};
2941
+ z-index: 1000;
2942
+ `, gn = n.div`
2943
+ position: absolute;
2944
+ left: -4px;
2945
+ width: calc(100% + 8px);
2946
+ overflow: hidden;
2947
+ ${sr}
2948
+ `, fn = n.div`
2949
+ position: fixed;
2950
+ overflow: hidden;
2951
+ ${sr}
2952
+ `, $n = n.button`
2953
+ display: flex;
2954
+ align-items: center;
2955
+ justify-content: space-between;
2956
+ gap: 8px;
2957
+ width: 100%;
2958
+ min-width: 0;
2959
+ height: 40px;
2960
+ padding: 0 14px;
2961
+ border: none;
2962
+ background: ${(e) => e.$selected ? o(t.black, 6) : "transparent"};
2963
+ border-radius: 12px;
2964
+ font-size: 14px;
2965
+ font-weight: 500;
2966
+ text-align: left;
2967
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
2968
+ color: ${(e) => e.$disabled ? o(t.black, 40) : t.black};
2969
+ transition: background-color 0.15s ease;
2970
+
2971
+ &:hover:not(:disabled) {
2972
+ background: ${o(t.black, 8)};
2973
+ }
2974
+
2975
+ & > span {
2976
+ overflow: hidden;
2977
+ text-overflow: ellipsis;
2978
+ white-space: nowrap;
2979
+ min-width: 0;
2980
+ }
2981
+ `, xn = n.span`
2982
+ display: flex;
2983
+ align-items: center;
2984
+ justify-content: center;
2985
+ flex-shrink: 0;
2986
+ color: ${t.black};
2987
+ `, ve = L("select"), na = ({
2988
+ className: e,
2989
+ classnames: r,
2990
+ disabled: i = !1,
2991
+ fullWidth: l = !1,
2992
+ label: d,
2993
+ message: p,
2994
+ onChange: b,
2995
+ options: c,
2996
+ placeholder: g = "Select...",
2997
+ portalRenderNode: u,
2998
+ ref: $,
2999
+ size: h = "default",
3000
+ value: z,
3001
+ variant: S = "normal",
3002
+ ...C
3003
+ }) => {
3004
+ const [v, P] = B(!1), [D, k] = B({
3005
+ top: 0,
3006
+ left: 0,
3007
+ width: 0
3008
+ }), y = K(null), s = K(null), _ = K(null), E = c.find((f) => f.value === z), I = Math.max(
3009
+ 0,
3010
+ c.findIndex((f) => f.value === z)
3011
+ ), W = -(I * (ct + st) + Re), H = () => {
3012
+ if (!s.current || !u) return;
3013
+ const f = s.current.getBoundingClientRect(), M = I * (ct + st) + Re;
3014
+ let N = f.top - M;
3015
+ const O = c.length * ct + (c.length - 1) * st + Re * 2, G = 8, te = window.innerHeight - O - 8;
3016
+ N < G && (N = G), N > te && (N = te), k({
3017
+ top: N,
3018
+ left: f.left - Re,
3019
+ width: f.width + Re * 2
3020
+ });
3021
+ }, Y = (f) => {
3022
+ var M;
3023
+ b == null || b(f), P(!1), (M = s.current) == null || M.focus();
3024
+ }, V = (f) => {
3025
+ i || c.length === 0 || (f.key === "Enter" || f.key === " " ? (f.preventDefault(), P((M) => !M)) : f.key === "Escape" && v ? (f.preventDefault(), P(!1)) : f.key === "ArrowDown" && !v && (f.preventDefault(), P(!0)));
3026
+ };
3027
+ nr(() => {
3028
+ v && u && H();
3029
+ }, [v, u, I, c.length]), fe(() => {
3030
+ if (!v) return;
3031
+ const f = (O) => {
3032
+ const G = O.target, te = y.current && !y.current.contains(G), se = _.current && !_.current.contains(G);
3033
+ u ? te && se && P(!1) : te && P(!1);
3034
+ }, M = () => {
3035
+ u && H();
3036
+ }, N = () => {
3037
+ u && H();
3038
+ };
3039
+ return document.addEventListener("mousedown", f), u && (window.addEventListener("scroll", M, !0), window.addEventListener("resize", N)), () => {
3040
+ document.removeEventListener("mousedown", f), window.removeEventListener("scroll", M, !0), window.removeEventListener("resize", N);
3041
+ };
3042
+ }, [v, u]);
3043
+ const j = () => c.map((f) => /* @__PURE__ */ w(
3044
+ $n,
3045
+ {
3046
+ type: "button",
3047
+ role: "option",
3048
+ $selected: f.value === z,
3049
+ $disabled: f.disabled ?? !1,
3050
+ disabled: f.disabled,
3051
+ "aria-selected": f.value === z,
3052
+ onClick: () => Y(f.value),
3053
+ className: ve("option", r == null ? void 0 : r.option),
3054
+ children: [
3055
+ /* @__PURE__ */ a("span", { children: f.label }),
3056
+ f.value === z && /* @__PURE__ */ a(xn, { children: /* @__PURE__ */ a(rr, { size: 16 }) })
3057
+ ]
3058
+ },
3059
+ f.value
3060
+ )), T = u ? qe(
3061
+ /* @__PURE__ */ a(
3062
+ fn,
3063
+ {
3064
+ ref: _,
3065
+ role: "listbox",
3066
+ style: {
3067
+ top: D.top,
3068
+ left: D.left,
3069
+ width: D.width
3070
+ },
3071
+ className: ve("dropdown", r == null ? void 0 : r.dropdown),
3072
+ children: j()
3073
+ }
3074
+ ),
3075
+ u
3076
+ ) : /* @__PURE__ */ a(
3077
+ gn,
3078
+ {
3079
+ ref: _,
3080
+ role: "listbox",
3081
+ style: { top: W },
3082
+ className: ve("dropdown", r == null ? void 0 : r.dropdown),
3083
+ children: j()
3084
+ }
3085
+ );
3086
+ return /* @__PURE__ */ w(
3087
+ cn,
3088
+ {
3089
+ ...C,
3090
+ ref: (f) => {
3091
+ y.current = f, typeof $ == "function" ? $(f) : $ && ($.current = f);
3092
+ },
3093
+ $fullWidth: l,
3094
+ className: ve("container", e),
3095
+ children: [
3096
+ d && /* @__PURE__ */ a(
3097
+ sn,
3098
+ {
3099
+ variant: S === "error" ? "error" : "normal",
3100
+ className: ve("label", r == null ? void 0 : r.label),
3101
+ children: d
3102
+ }
3103
+ ),
3104
+ /* @__PURE__ */ w(
3105
+ un,
3106
+ {
3107
+ ref: s,
3108
+ type: "button",
3109
+ $size: h,
3110
+ $variant: S,
3111
+ $disabled: i,
3112
+ $hasValue: !!E,
3113
+ disabled: i,
3114
+ onClick: () => !i && c.length > 0 && P((f) => !f),
3115
+ onKeyDown: V,
3116
+ "aria-haspopup": "listbox",
3117
+ "aria-expanded": v,
3118
+ className: ve("trigger", r == null ? void 0 : r.trigger),
3119
+ children: [
3120
+ /* @__PURE__ */ a(bn, { children: (E == null ? void 0 : E.label) ?? g }),
3121
+ /* @__PURE__ */ a(hn, { $open: v, children: /* @__PURE__ */ a(ir, { size: 16 }) })
3122
+ ]
3123
+ }
3124
+ ),
3125
+ v && T,
3126
+ p && /* @__PURE__ */ a(pn, { variant: S, children: p })
3127
+ ]
3128
+ }
3129
+ );
3130
+ }, ft = {
3131
+ normal: {
3132
+ border: t["iron-grey"],
3133
+ placeholder: t["iron-grey"]
3134
+ },
3135
+ error: {
3136
+ border: t.red,
3137
+ placeholder: o(t.red, 40)
3138
+ }
3139
+ }, yn = n.div`
3140
+ position: relative;
3141
+ display: flex;
3142
+ flex-direction: column;
3143
+ gap: 4px;
3144
+ `, kn = n(le)`
3145
+ margin-left: 6px;
3146
+ `, vn = n.div`
3147
+ display: flex;
3148
+ flex-wrap: wrap;
3149
+ align-items: center;
3150
+ gap: 6px;
3151
+ min-height: 44px;
3152
+ padding: 8px 12px;
3153
+ border: 1px dashed ${(e) => ft[e.$variant].border};
3154
+ border-radius: 8px;
3155
+ background: ${t.white};
3156
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "text"};
3157
+ opacity: ${(e) => e.$disabled ? 0.5 : 1};
3158
+ transition: border-color 0.15s ease;
3159
+
3160
+ &:hover {
3161
+ border-color: ${(e) => e.$disabled ? ft[e.$variant].border : e.$variant === "error" ? t.red : t.black};
3162
+ }
3163
+
3164
+ ${(e) => e.$focused && `
3165
+ outline: 2px solid ${e.$variant === "error" ? t.red : t["steel-blue"]};
3166
+ outline-offset: 2px;
3167
+ `}
3168
+ `, wn = n.input`
3169
+ flex: 1;
3170
+ min-width: 80px;
3171
+ border: none;
3172
+ outline: none;
3173
+ background: transparent;
3174
+ font-size: 14px;
3175
+ color: ${t.black};
3176
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "text"};
3177
+
3178
+ &::placeholder {
3179
+ color: ${(e) => ft[e.$variant].placeholder};
3180
+ }
3181
+
3182
+ &:disabled {
3183
+ cursor: not-allowed;
3184
+ }
3185
+ `, pr = `
3186
+ z-index: 100;
3187
+ background-color: ${t.white};
3188
+ border: 1px solid ${o(t.black, 15)};
3189
+ border-radius: 8px;
3190
+ box-shadow: 0 4px 16px ${o(t.black, 12)};
3191
+ max-height: 200px;
3192
+ overflow-y: auto;
3193
+ `, ur = (e, r) => e ? "translateY(0)" : r === "bottom" ? "translateY(-8px)" : "translateY(8px)", br = `
3194
+ opacity 0.15s ease,
3195
+ transform 0.15s ease,
3196
+ visibility 0.15s;
3197
+ `, Sn = n.div`
3198
+ position: absolute;
3199
+ left: 0;
3200
+ right: 0;
3201
+ ${(e) => e.$position === "bottom" ? "top: calc(100% + 4px);" : "bottom: calc(100% + 4px);"}
3202
+ ${pr}
3203
+ opacity: ${(e) => e.$open ? 1 : 0};
3204
+ visibility: ${(e) => e.$open ? "visible" : "hidden"};
3205
+ transform: ${(e) => ur(e.$open, e.$position)};
3206
+ transition: ${br};
3207
+ `, mn = n.div`
3208
+ position: fixed;
3209
+ ${pr}
3210
+ opacity: ${(e) => e.$open ? 1 : 0};
3211
+ visibility: ${(e) => e.$open ? "visible" : "hidden"};
3212
+ transform: ${(e) => ur(e.$open, e.$position)};
3213
+ transition: ${br};
3214
+ `, qt = n.button`
3215
+ display: flex;
3216
+ align-items: center;
3217
+ width: 100%;
3218
+ padding: 10px 12px;
3219
+ border: none;
3220
+ background: transparent;
3221
+ font-size: 14px;
3222
+ color: ${t.black};
3223
+ text-align: left;
3224
+ cursor: pointer;
3225
+ transition: background-color 0.15s ease;
3226
+
3227
+ &:hover {
3228
+ background-color: ${t.gray};
3229
+ }
3230
+
3231
+ &:first-of-type {
3232
+ border-radius: 7px 7px 0 0;
3233
+ }
3234
+
3235
+ &:last-of-type {
3236
+ border-radius: 0 0 7px 7px;
3237
+ }
3238
+
3239
+ &:only-child {
3240
+ border-radius: 7px;
3241
+ }
3242
+ `, Zt = n.div`
3243
+ display: flex;
3244
+ align-items: center;
3245
+ justify-content: center;
3246
+ padding: 16px;
3247
+ color: ${t["iron-grey"]};
3248
+ font-size: 14px;
3249
+ text-align: center;
3250
+ `, Pn = n(ce)`
3251
+ margin-left: 6px;
3252
+ `, ee = L("tags"), Ge = 4, aa = ({
3253
+ className: e,
3254
+ classnames: r,
3255
+ createKey: i = "Tab",
3256
+ disabled: l = !1,
3257
+ emptyMessage: d = "No options",
3258
+ freeSolo: p = !0,
3259
+ label: b,
3260
+ message: c,
3261
+ onChange: g,
3262
+ options: u = [],
3263
+ placeholder: $ = "Add tag...",
3264
+ portalRenderNode: h,
3265
+ ref: z,
3266
+ value: S,
3267
+ variant: C = "normal",
3268
+ ...v
3269
+ }) => {
3270
+ const P = K(null), D = K(null), k = K(null), y = K(null), [s, _] = B(""), [E, I] = B(!1), [W, H] = B("bottom"), [Y, V] = B({
3271
+ top: 0,
3272
+ left: 0,
3273
+ width: 0
3274
+ }), j = oe(() => {
3275
+ const m = u.filter((U) => !S.includes(U.value));
3276
+ if (!s.trim()) return m;
3277
+ const R = s.toLowerCase().trim();
3278
+ return m.filter((U) => U.label.toLowerCase().includes(R));
3279
+ }, [u, S, s]), T = E && u.length > 0, f = A(() => {
3280
+ var Le;
3281
+ if (!D.current) return;
3282
+ const m = D.current.getBoundingClientRect(), R = ((Le = k.current) == null ? void 0 : Le.offsetHeight) ?? 200, U = window.innerHeight - m.bottom - Ge, X = m.top - Ge, $e = U < R && X > U ? "top" : "bottom";
3283
+ if (H($e), h) {
3284
+ const Je = $e === "bottom" ? m.bottom + Ge : m.top - R - Ge;
3285
+ V({
3286
+ top: Je,
3287
+ left: m.left,
3288
+ width: m.width
3289
+ });
3290
+ }
3291
+ }, [h]);
3292
+ fe(() => {
3293
+ if (E)
3294
+ return f(), window.addEventListener("scroll", f, !0), window.addEventListener("resize", f), () => {
3295
+ window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
3296
+ };
3297
+ }, [E, f]);
3298
+ const M = A(
3299
+ (m) => {
3300
+ const R = m.trim();
3301
+ return !R || S.includes(R) ? !1 : (g([...S, R]), _(""), !0);
3302
+ },
3303
+ [S, g]
3304
+ ), N = (m) => {
3305
+ if (m.key === i && s.trim())
3306
+ if (m.preventDefault(), p)
3307
+ M(s);
3308
+ else {
3309
+ const R = j.find(
3310
+ (U) => U.label.toLowerCase() === s.toLowerCase().trim()
3311
+ );
3312
+ R && M(R.value);
3313
+ }
3314
+ else m.key === "Backspace" && !s && S.length > 0 && g(S.slice(0, -1));
3315
+ }, O = (m) => {
3316
+ var R;
3317
+ M(m), (R = y.current) == null || R.focus();
3318
+ }, G = (m) => {
3319
+ g(S.filter((R) => R !== m));
3320
+ }, te = () => {
3321
+ var m;
3322
+ l || (m = y.current) == null || m.focus();
3323
+ }, se = (m) => {
3324
+ const R = u.find((U) => U.value === m);
3325
+ return (R == null ? void 0 : R.label) ?? m;
3326
+ };
3327
+ return /* @__PURE__ */ w(yn, { ...v, ref: z, className: ee("container", e), children: [
3328
+ b && /* @__PURE__ */ a(kn, { variant: C, className: ee("label"), children: b }),
3329
+ /* @__PURE__ */ w("div", { ref: P, style: { position: "relative" }, children: [
3330
+ /* @__PURE__ */ w(
3331
+ vn,
3332
+ {
3333
+ ref: D,
3334
+ $variant: C,
3335
+ $disabled: l,
3336
+ $focused: E,
3337
+ onClick: te,
3338
+ className: ee("trigger", r == null ? void 0 : r.trigger),
3339
+ children: [
3340
+ S.map((m) => /* @__PURE__ */ a(
3341
+ gt,
3342
+ {
3343
+ variant: C === "error" ? "red" : "gray",
3344
+ deletable: !l,
3345
+ onDelete: () => G(m),
3346
+ className: ee("chip", r == null ? void 0 : r.chip),
3347
+ children: se(m)
3348
+ },
3349
+ m
3350
+ )),
3351
+ /* @__PURE__ */ a(
3352
+ wn,
3353
+ {
3354
+ ref: y,
3355
+ type: "text",
3356
+ value: s,
3357
+ onChange: (m) => _(m.target.value),
3358
+ onFocus: () => I(!0),
3359
+ onBlur: () => setTimeout(() => I(!1), 150),
3360
+ onKeyDown: N,
3361
+ placeholder: S.length === 0 ? $ : "",
3362
+ disabled: l,
3363
+ $disabled: l,
3364
+ $variant: C,
3365
+ className: ee("input", r == null ? void 0 : r.input)
3366
+ }
3367
+ )
3368
+ ]
3369
+ }
3370
+ ),
3371
+ u.length > 0 && (h ? qe(
3372
+ /* @__PURE__ */ a(
3373
+ mn,
3374
+ {
3375
+ ref: k,
3376
+ $open: T,
3377
+ $position: W,
3378
+ style: {
3379
+ top: Y.top,
3380
+ left: Y.left,
3381
+ width: Y.width
3382
+ },
3383
+ className: ee("dropdown", r == null ? void 0 : r.dropdown),
3384
+ children: j.length === 0 ? /* @__PURE__ */ a(Zt, { className: ee("empty", r == null ? void 0 : r.empty), children: d }) : j.map((m) => /* @__PURE__ */ a(
3385
+ qt,
3386
+ {
3387
+ type: "button",
3388
+ onMouseDown: (R) => R.preventDefault(),
3389
+ onClick: () => O(m.value),
3390
+ className: ee("option", r == null ? void 0 : r.option),
3391
+ children: m.label
3392
+ },
3393
+ m.value
3394
+ ))
3395
+ }
3396
+ ),
3397
+ h
3398
+ ) : /* @__PURE__ */ a(
3399
+ Sn,
3400
+ {
3401
+ ref: k,
3402
+ $open: T,
3403
+ $position: W,
3404
+ className: ee("dropdown", r == null ? void 0 : r.dropdown),
3405
+ children: j.length === 0 ? /* @__PURE__ */ a(Zt, { className: ee("empty", r == null ? void 0 : r.empty), children: d }) : j.map((m) => /* @__PURE__ */ a(
3406
+ qt,
3407
+ {
3408
+ type: "button",
3409
+ onMouseDown: (R) => R.preventDefault(),
3410
+ onClick: () => O(m.value),
3411
+ className: ee("option", r == null ? void 0 : r.option),
3412
+ children: m.label
3413
+ },
3414
+ m.value
3415
+ ))
3416
+ }
3417
+ ))
3418
+ ] }),
3419
+ c && /* @__PURE__ */ a(Pn, { variant: C, className: ee("message"), children: c })
3420
+ ] });
3421
+ }, Jt = {
3422
+ normal: {
3423
+ background: {
3424
+ static: o(t.black, 2),
3425
+ disabled: o(t.black, 10)
3426
+ },
3427
+ border: {
3428
+ static: o(t.black, 60),
3429
+ disabled: o(t.black, 10)
3430
+ },
3431
+ color: {
3432
+ static: t.black,
3433
+ disabled: o(t.black, 65)
3434
+ },
3435
+ placeholder: {
3436
+ static: o(t.black, 40),
3437
+ disabled: o(t.black, 65)
3438
+ },
3439
+ focus: o(t["iron-grey"], 30)
3440
+ },
3441
+ error: {
3442
+ background: {
3443
+ static: o(t.red, 2),
3444
+ disabled: o(t.red, 10)
3445
+ },
3446
+ border: {
3447
+ static: o(t.red, 60),
3448
+ disabled: o(t.red, 10)
3449
+ },
3450
+ color: {
3451
+ static: t.red,
3452
+ disabled: o(t.red, 65)
3453
+ },
3454
+ placeholder: {
3455
+ static: o(t.red, 40),
3456
+ disabled: o(t.red, 65)
3457
+ },
3458
+ focus: o(t.red, 30)
3459
+ }
3460
+ }, de = (e) => Jt[e] ?? Jt.normal, Cn = n.div`
3461
+ display: grid;
3462
+ flex-direction: column;
3463
+ gap: 2px;
3464
+ width: ${(e) => e.$fullWidth ? "100%" : "fit-content"};
3465
+ `, Nn = n(le)`
3466
+ margin-left: 6px;
3467
+ `, zn = n.textarea`
3468
+ flex: 1;
3469
+ min-width: 0;
3470
+ outline: none;
3471
+ font-size: 14px;
3472
+ font-weight: 500;
3473
+ font-family: inherit;
3474
+ padding: 10px 14px;
3475
+ border-radius: 16px;
3476
+ resize: vertical;
3477
+
3478
+ color: ${(e) => de(e.$variant).color.static};
3479
+ border: 1px solid ${(e) => de(e.$variant).border.static};
3480
+ background-color: ${(e) => de(e.$variant).background.static};
3481
+
3482
+ &::placeholder {
3483
+ color: ${(e) => de(e.$variant).placeholder.static};
3484
+ }
3485
+
3486
+ &:disabled {
3487
+ cursor: not-allowed;
3488
+ resize: none;
3489
+ color: ${(e) => de(e.$variant).color.disabled};
3490
+ background-color: ${(e) => de(e.$variant).background.disabled};
3491
+ border-color: ${(e) => de(e.$variant).border.disabled};
3492
+
3493
+ &::placeholder {
3494
+ color: ${(e) => de(e.$variant).placeholder.disabled};
3495
+ }
3496
+ }
3497
+ `, Tn = n.div`
3498
+ display: flex;
3499
+ align-items: flex-start;
3500
+ gap: 8px;
3501
+ margin: 0 6px;
3502
+ `, Dn = n(ce)`
3503
+ flex: 1;
3504
+ min-width: 0;
3505
+ `, On = n.span`
3506
+ flex-shrink: 0;
3507
+ margin-left: auto;
3508
+ font-size: 12px;
3509
+ font-weight: 500;
3510
+ color: ${(e) => e.$variant === "error" ? t.red : t["iron-grey"]};
3511
+ `, Ie = L("textarea"), da = ({
3512
+ className: e,
3513
+ classnames: r,
3514
+ count: i,
3515
+ disabled: l,
3516
+ fullWidth: d,
3517
+ label: p,
3518
+ message: b,
3519
+ ref: c,
3520
+ value: g,
3521
+ variant: u = "normal",
3522
+ rows: $ = 4,
3523
+ ...h
3524
+ }) => {
3525
+ const z = typeof g == "string" ? g.length : 0, S = b || i !== void 0;
3526
+ return /* @__PURE__ */ w(Cn, { className: Ie("container", e), $fullWidth: !!d, children: [
3527
+ p && /* @__PURE__ */ a(Nn, { variant: u, className: Ie("label", r == null ? void 0 : r.label), children: p }),
3528
+ /* @__PURE__ */ a(
3529
+ zn,
3530
+ {
3531
+ ...h,
3532
+ ref: c,
3533
+ rows: $,
3534
+ value: g,
3535
+ disabled: l,
3536
+ $variant: u,
3537
+ className: Ie("textarea", r == null ? void 0 : r.textarea)
3538
+ }
3539
+ ),
3540
+ S && /* @__PURE__ */ w(Tn, { children: [
3541
+ b && /* @__PURE__ */ a(Dn, { variant: u, className: Ie("message"), children: b }),
3542
+ i !== void 0 && /* @__PURE__ */ w(On, { $variant: u, className: Ie("counter"), children: [
3543
+ z,
3544
+ "/",
3545
+ i
3546
+ ] })
3547
+ ] })
3548
+ ] });
3549
+ }, Qt = {
3550
+ normal: {
3551
+ track: {
3552
+ background: o(t["iron-grey"], 20),
3553
+ backgroundChecked: t.black,
3554
+ border: o(t["iron-grey"], 30),
3555
+ borderChecked: t.black
3556
+ },
3557
+ thumb: {
3558
+ background: t.white,
3559
+ backgroundChecked: t.white
3560
+ },
3561
+ label: t.black
3562
+ },
3563
+ error: {
3564
+ track: {
3565
+ background: o(t.red, 15),
3566
+ backgroundChecked: t.red,
3567
+ border: t.red,
3568
+ borderChecked: t.red
3569
+ },
3570
+ thumb: {
3571
+ background: t.white,
3572
+ backgroundChecked: t.white
3573
+ },
3574
+ label: t.red
3575
+ }
3576
+ }, ue = (e) => Qt[e] ?? Qt.normal, Rn = n.label`
3577
+ display: inline-flex;
3578
+ align-items: flex-start;
3579
+ gap: 8px;
3580
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
3581
+ opacity: ${(e) => e.$disabled ? 0.5 : 1};
3582
+ `, In = n.input`
3583
+ position: absolute;
3584
+ opacity: 0;
3585
+ width: 0;
3586
+ height: 0;
3587
+ pointer-events: none;
3588
+ `, _n = n.span`
3589
+ position: relative;
3590
+ flex-shrink: 0;
3591
+ width: 36px;
3592
+ height: 20px;
3593
+ border-radius: 10px;
3594
+ border: 1px solid
3595
+ ${(e) => e.$checked ? ue(e.$variant).track.borderChecked : ue(e.$variant).track.border};
3596
+ background-color: ${(e) => e.$checked ? ue(e.$variant).track.backgroundChecked : ue(e.$variant).track.background};
3597
+ transition:
3598
+ border-color 0.2s ease,
3599
+ background-color 0.2s ease;
3600
+ `, An = n.span`
3601
+ position: absolute;
3602
+ top: 2px;
3603
+ left: ${(e) => e.$checked ? "18px" : "2px"};
3604
+ width: 14px;
3605
+ height: 14px;
3606
+ border-radius: 50%;
3607
+ background-color: ${(e) => e.$checked ? ue(e.$variant).thumb.backgroundChecked : ue(e.$variant).thumb.background};
3608
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
3609
+ transition: left 0.2s ease;
3610
+ `, En = n.span`
3611
+ font-size: 14px;
3612
+ font-weight: 500;
3613
+ line-height: 1.3;
3614
+ color: ${(e) => ue(e.$variant).label};
3615
+ user-select: none;
3616
+
3617
+ a {
3618
+ color: inherit;
3619
+ text-decoration: underline;
3620
+ cursor: pointer;
3621
+
3622
+ &:hover {
3623
+ text-decoration: none;
3624
+ }
3625
+ }
3626
+ `, _e = L("toggle"), hr = ({
3627
+ checked: e,
3628
+ className: r,
3629
+ classnames: i,
3630
+ disabled: l,
3631
+ label: d,
3632
+ onChange: p,
3633
+ ref: b,
3634
+ variant: c = "normal",
3635
+ ...g
3636
+ }) => /* @__PURE__ */ w(
3637
+ Rn,
3638
+ {
3639
+ className: _e("container", r),
3640
+ $disabled: !!l,
3641
+ $variant: c,
3642
+ children: [
3643
+ /* @__PURE__ */ a(
3644
+ In,
3645
+ {
3646
+ ...g,
3647
+ ref: b,
3648
+ type: "checkbox",
3649
+ className: _e("input", i == null ? void 0 : i.input),
3650
+ checked: e,
3651
+ disabled: l,
3652
+ onChange: p
3653
+ }
3654
+ ),
3655
+ /* @__PURE__ */ a(
3656
+ _n,
3657
+ {
3658
+ className: _e("track", i == null ? void 0 : i.track),
3659
+ $checked: e,
3660
+ $variant: c,
3661
+ children: /* @__PURE__ */ a(
3662
+ An,
3663
+ {
3664
+ className: _e("thumb", i == null ? void 0 : i.thumb),
3665
+ $checked: e,
3666
+ $variant: c
3667
+ }
3668
+ )
3669
+ }
3670
+ ),
3671
+ d && /* @__PURE__ */ a(En, { className: _e("label", i == null ? void 0 : i.label), $variant: c, children: d })
3672
+ ]
3673
+ }
3674
+ ), er = {
3675
+ normal: {
3676
+ border: {
3677
+ static: o(t.black, 20),
3678
+ hover: o(t.black, 40),
3679
+ active: o(t.black, 40),
3680
+ disabled: o(t.black, 10)
3681
+ },
3682
+ borderChecked: t.black,
3683
+ background: {
3684
+ static: t.white,
3685
+ hover: t.white,
3686
+ active: t.white,
3687
+ disabled: o(t.black, 5)
3688
+ },
3689
+ backgroundChecked: o(t.black, 5),
3690
+ label: {
3691
+ static: t.black,
3692
+ hover: t.black,
3693
+ active: t.black,
3694
+ disabled: o(t.black, 40)
3695
+ },
3696
+ description: {
3697
+ static: o(t.black, 60),
3698
+ hover: o(t.black, 60),
3699
+ active: o(t.black, 60),
3700
+ disabled: o(t.black, 30)
3701
+ }
3702
+ },
3703
+ error: {
3704
+ border: {
3705
+ static: t.red,
3706
+ hover: t.red,
3707
+ active: t.red,
3708
+ disabled: o(t.red, 30)
3709
+ },
3710
+ borderChecked: t.red,
3711
+ background: {
3712
+ static: t.white,
3713
+ hover: t.white,
3714
+ active: t.white,
3715
+ disabled: o(t.red, 5)
3716
+ },
3717
+ backgroundChecked: o(t.red, 5),
3718
+ label: {
3719
+ static: t.red,
3720
+ hover: t.red,
3721
+ active: t.red,
3722
+ disabled: o(t.red, 40)
3723
+ },
3724
+ description: {
3725
+ static: o(t.red, 70),
3726
+ hover: o(t.red, 70),
3727
+ active: o(t.red, 70),
3728
+ disabled: o(t.red, 40)
3729
+ }
3730
+ }
3731
+ }, ge = (e) => er[e] ?? er.normal, Ln = n.label`
3732
+ display: grid;
3733
+ grid-template-columns: 1fr auto;
3734
+ align-items: start;
3735
+ gap: 8px;
3736
+ padding: 12px;
3737
+ background-color: ${(e) => {
3738
+ const r = ge(e.$variant);
3739
+ return e.$disabled ? r.background.disabled : e.$checked ? r.backgroundChecked : r.background.static;
3740
+ }};
3741
+ border: 1px solid
3742
+ ${(e) => {
3743
+ const r = ge(e.$variant);
3744
+ return e.$disabled ? r.border.disabled : e.$checked ? r.borderChecked : r.border.static;
3745
+ }};
3746
+ border-radius: 12px;
3747
+ cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
3748
+ transition:
3749
+ border-color 0.15s ease,
3750
+ background-color 0.15s ease;
3751
+ width: ${(e) => e.$fullWidth ? "100%" : "fit-content"};
3752
+ min-width: 0;
3753
+
3754
+ &:hover:not([data-disabled='true']) {
3755
+ border-color: ${(e) => {
3756
+ const r = ge(e.$variant);
3757
+ return e.$checked ? r.borderChecked : r.border.hover;
3758
+ }};
3759
+ }
3760
+
3761
+ .vacano_toggle_container {
3762
+ pointer-events: none;
3763
+ }
3764
+ `, Mn = n.input`
3765
+ position: absolute;
3766
+ width: 1px;
3767
+ height: 1px;
3768
+ margin: -1px;
3769
+ padding: 0;
3770
+ overflow: hidden;
3771
+ clip: rect(0, 0, 0, 0);
3772
+ white-space: nowrap;
3773
+ border: 0;
3774
+ `, Fn = n.div`
3775
+ display: flex;
3776
+ flex-direction: column;
3777
+ gap: 2px;
3778
+ min-width: 0;
3779
+ `, Yn = n.span`
3780
+ font-size: 14px;
3781
+ font-weight: 500;
3782
+ line-height: 1.4;
3783
+ color: ${(e) => ge(e.$variant).label.static};
3784
+
3785
+ label[data-disabled='true'] & {
3786
+ color: ${(e) => ge(e.$variant).label.disabled};
3787
+ }
3788
+ `, Vn = n.span`
3789
+ font-size: 12px;
3790
+ font-weight: 400;
3791
+ line-height: 1.4;
3792
+ color: ${(e) => ge(e.$variant).description.static};
3793
+
3794
+ label[data-disabled='true'] & {
3795
+ color: ${(e) => ge(e.$variant).description.disabled};
3796
+ }
3797
+ `, Ue = L("toggle-card"), la = ({
3798
+ checked: e,
3799
+ className: r,
3800
+ classnames: i,
3801
+ description: l,
3802
+ disabled: d,
3803
+ fullWidth: p = !1,
3804
+ label: b,
3805
+ onChange: c,
3806
+ ref: g,
3807
+ variant: u = "normal",
3808
+ ...$
3809
+ }) => /* @__PURE__ */ w(
3810
+ Ln,
3811
+ {
3812
+ className: Ue("container", r),
3813
+ $checked: e,
3814
+ $disabled: !!d,
3815
+ $fullWidth: p,
3816
+ $variant: u,
3817
+ "data-disabled": d,
3818
+ children: [
3819
+ /* @__PURE__ */ a(
3820
+ Mn,
3821
+ {
3822
+ ...$,
3823
+ ref: g,
3824
+ type: "checkbox",
3825
+ checked: e,
3826
+ disabled: d,
3827
+ onChange: c
3828
+ }
3829
+ ),
3830
+ /* @__PURE__ */ w(Fn, { className: Ue("content", i == null ? void 0 : i.content), children: [
3831
+ /* @__PURE__ */ a(Yn, { className: Ue("label", i == null ? void 0 : i.label), $variant: u, children: b }),
3832
+ l && /* @__PURE__ */ a(
3833
+ Vn,
3834
+ {
3835
+ className: Ue("description", i == null ? void 0 : i.description),
3836
+ $variant: u,
3837
+ children: l
3838
+ }
3839
+ )
3840
+ ] }),
3841
+ /* @__PURE__ */ a(
3842
+ hr,
3843
+ {
3844
+ className: i == null ? void 0 : i.toggle,
3845
+ checked: e,
3846
+ disabled: d,
3847
+ variant: u,
3848
+ onChange: () => {
3849
+ },
3850
+ tabIndex: -1,
3851
+ "aria-hidden": !0
3852
+ }
3853
+ )
3854
+ ]
3855
+ }
3856
+ ), tr = {
3857
+ label: {
3858
+ color: t.black,
3859
+ disabledColor: o(t.black, 40)
3860
+ }
3861
+ }, Bn = n.div`
3862
+ display: flex;
3863
+ flex-direction: column;
3864
+ gap: 8px;
3865
+ `, Hn = n.span`
3866
+ font-size: 13px;
3867
+ font-weight: 500;
3868
+ line-height: 1.5;
3869
+ color: ${(e) => e.$disabled ? tr.label.disabledColor : tr.label.color};
3870
+ margin-bottom: 4px;
3871
+ `, Wn = n.div`
3872
+ display: flex;
3873
+ flex-direction: column;
3874
+ gap: 12px;
3875
+ `, ut = L("toggle-group"), ca = ({
3876
+ className: e,
3877
+ classnames: r,
3878
+ disabled: i,
3879
+ label: l,
3880
+ onChange: d,
3881
+ options: p,
3882
+ ref: b,
3883
+ value: c,
3884
+ variant: g = "normal",
3885
+ ...u
3886
+ }) => {
3887
+ const $ = (h, z) => {
3888
+ d(z ? [...c, h] : c.filter((S) => S !== h));
3889
+ };
3890
+ return /* @__PURE__ */ w(Bn, { ...u, ref: b, className: ut("container", e), children: [
3891
+ l && /* @__PURE__ */ a(Hn, { className: ut("label", r == null ? void 0 : r.label), $disabled: i, children: l }),
3892
+ /* @__PURE__ */ a(Wn, { className: ut("options", r == null ? void 0 : r.options), children: p.map((h) => /* @__PURE__ */ a(
3893
+ hr,
3894
+ {
3895
+ className: r == null ? void 0 : r.toggle,
3896
+ checked: c.includes(h.value),
3897
+ label: h.label,
3898
+ disabled: i,
3899
+ variant: g,
3900
+ onChange: (z) => $(h.value, z.target.checked)
3901
+ },
3902
+ h.value
3903
+ )) })
3904
+ ] });
3905
+ };
3906
+ export {
3907
+ Zn as A,
3908
+ Oo as B,
3909
+ xt as C,
3910
+ ea as D,
3911
+ le as F,
3912
+ zi as I,
3913
+ Do as K,
3914
+ ta as M,
3915
+ ra as O,
3916
+ cr as R,
3917
+ na as S,
3918
+ aa as T,
3919
+ Jn as a,
3920
+ Qn as b,
3921
+ oa as c,
3922
+ ia as d,
3923
+ da as e,
3924
+ hr as f,
3925
+ la as g,
3926
+ ca as h,
3927
+ ko as i,
3928
+ gt as j,
3929
+ Xo as k,
3930
+ ce as l,
3931
+ To as m,
3932
+ Oi as n,
3933
+ n as s
3934
+ };
3935
+ //# sourceMappingURL=ToggleGroup-DYePk1bM.js.map