@bestow-ui/react 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/dist/{chunk-PFEZ3D2H.js → chunk-LHT64JDG.js} +7 -1
- package/dist/chunk-LHT64JDG.js.map +1 -0
- package/dist/client.js +698 -692
- package/dist/client.js.map +1 -1
- package/dist/index.cjs +1096 -847
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +736 -638
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +211 -115
- package/dist/index.d.ts +211 -115
- package/dist/shared.js +236 -3
- package/dist/shared.js.map +1 -1
- package/package.json +1 -2
- package/dist/chunk-PFEZ3D2H.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -54,11 +54,17 @@ __export(src_exports, {
|
|
|
54
54
|
Drawer: () => Drawer,
|
|
55
55
|
DrawerClose: () => DrawerClose,
|
|
56
56
|
DropdownMenu: () => DropdownMenu,
|
|
57
|
+
DropdownMenuCheckboxItem: () => DropdownMenuCheckboxItem,
|
|
57
58
|
DropdownMenuContent: () => DropdownMenuContent,
|
|
58
59
|
DropdownMenuGroup: () => DropdownMenuGroup,
|
|
59
60
|
DropdownMenuItem: () => DropdownMenuItem,
|
|
60
61
|
DropdownMenuLabel: () => DropdownMenuLabel,
|
|
62
|
+
DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
|
|
63
|
+
DropdownMenuRadioItem: () => DropdownMenuRadioItem,
|
|
61
64
|
DropdownMenuSeparator: () => DropdownMenuSeparator,
|
|
65
|
+
DropdownMenuSub: () => DropdownMenuSub,
|
|
66
|
+
DropdownMenuSubContent: () => DropdownMenuSubContent,
|
|
67
|
+
DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
|
|
62
68
|
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
63
69
|
IconButton: () => IconButton,
|
|
64
70
|
Input: () => Input,
|
|
@@ -66,12 +72,13 @@ __export(src_exports, {
|
|
|
66
72
|
LocaleProvider: () => LocaleProvider,
|
|
67
73
|
Modal: () => Modal,
|
|
68
74
|
ModalClose: () => ModalClose,
|
|
75
|
+
NumberInput: () => NumberInput,
|
|
69
76
|
Pagination: () => Pagination,
|
|
70
77
|
PhoneNumberInput: () => PhoneNumberInput,
|
|
71
78
|
Popover: () => Popover2,
|
|
72
79
|
PopoverClose: () => PopoverClose,
|
|
73
80
|
Progress: () => Progress,
|
|
74
|
-
RadioGroup: () =>
|
|
81
|
+
RadioGroup: () => RadioGroup2,
|
|
75
82
|
SegmentedControl: () => SegmentedControl,
|
|
76
83
|
Select: () => Select,
|
|
77
84
|
Skeleton: () => Skeleton,
|
|
@@ -223,11 +230,11 @@ var rgba = (hex, alpha) => {
|
|
|
223
230
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
224
231
|
};
|
|
225
232
|
function createIntentColors(intent, color) {
|
|
226
|
-
const
|
|
227
|
-
const base = rgbToOklch(parseHex(
|
|
233
|
+
const input6 = toHex(parseHex(color));
|
|
234
|
+
const base = rgbToOklch(parseHex(input6));
|
|
228
235
|
const lightSubtle = withL(base, 0.97, Math.min(base.c, 0.12) * 0.3);
|
|
229
236
|
const lightSubtleHover = withL(base, 0.93, Math.min(base.c, 0.12) * 0.45);
|
|
230
|
-
const { solid, contrast: lightContrast } = solidWithContrast(
|
|
237
|
+
const { solid, contrast: lightContrast } = solidWithContrast(input6);
|
|
231
238
|
const light = {
|
|
232
239
|
solid,
|
|
233
240
|
solidHover: hoverFor(rgbToOklch(parseHex(solid)), -0.06, lightContrast),
|
|
@@ -237,7 +244,7 @@ function createIntentColors(intent, color) {
|
|
|
237
244
|
text: findReadable(base, Math.min(base.l, 0.55), -0.02, [import_tokens.lightColors.bg.default, lightSubtle, lightSubtleHover])
|
|
238
245
|
};
|
|
239
246
|
const darkBg = import_tokens.darkColors.bg.default;
|
|
240
|
-
const { solid: darkSolid, contrast: darkContrast } = solidWithContrast(base.l < 0.5 ? withL(base, 0.55) :
|
|
247
|
+
const { solid: darkSolid, contrast: darkContrast } = solidWithContrast(base.l < 0.5 ? withL(base, 0.55) : input6);
|
|
241
248
|
const darkBase = rgbToOklch(parseHex(darkSolid));
|
|
242
249
|
const darkSubtleOnBg = blend(darkSolid, 0.16, darkBg);
|
|
243
250
|
const darkSubtleHoverOnBg = blend(darkSolid, 0.26, darkBg);
|
|
@@ -277,9 +284,9 @@ function deepMerge(target, source) {
|
|
|
277
284
|
function createTheme(...inputs) {
|
|
278
285
|
let light = {};
|
|
279
286
|
let dark = {};
|
|
280
|
-
for (const
|
|
281
|
-
light = deepMerge(deepMerge(light,
|
|
282
|
-
dark = deepMerge(deepMerge(dark,
|
|
287
|
+
for (const input6 of inputs) {
|
|
288
|
+
light = deepMerge(deepMerge(light, input6.common), input6.light);
|
|
289
|
+
dark = deepMerge(deepMerge(dark, input6.common), input6.dark);
|
|
283
290
|
}
|
|
284
291
|
return Object.freeze({ light, dark });
|
|
285
292
|
}
|
|
@@ -333,6 +340,8 @@ var en = {
|
|
|
333
340
|
openList: "Show options",
|
|
334
341
|
clearSelection: "Clear selection",
|
|
335
342
|
skipToContent: "Skip to main content",
|
|
343
|
+
decrement: "Decrease",
|
|
344
|
+
increment: "Increase",
|
|
336
345
|
rangeStart: "minimum",
|
|
337
346
|
rangeEnd: "maximum",
|
|
338
347
|
agreeAll: "Agree to all",
|
|
@@ -377,14 +386,14 @@ var en = {
|
|
|
377
386
|
};
|
|
378
387
|
|
|
379
388
|
// src/utils/koreanFormat.ts
|
|
380
|
-
var onlyDigits = (
|
|
389
|
+
var onlyDigits = (input6) => input6.replace(/\D/g, "");
|
|
381
390
|
function phoneNumberMaxDigits(digits) {
|
|
382
391
|
if (digits.startsWith("02")) return 10;
|
|
383
392
|
if (/^1[568]/.test(digits)) return 8;
|
|
384
393
|
return 11;
|
|
385
394
|
}
|
|
386
|
-
function formatPhoneNumber(
|
|
387
|
-
const d = onlyDigits(
|
|
395
|
+
function formatPhoneNumber(input6) {
|
|
396
|
+
const d = onlyDigits(input6).slice(0, phoneNumberMaxDigits(onlyDigits(input6)));
|
|
388
397
|
if (d.startsWith("02")) {
|
|
389
398
|
if (d.length <= 2) return d;
|
|
390
399
|
if (d.length <= 5) return `${d.slice(0, 2)}-${d.slice(2)}`;
|
|
@@ -399,14 +408,14 @@ function formatPhoneNumber(input5) {
|
|
|
399
408
|
if (d.length <= 10) return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
|
|
400
409
|
return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7)}`;
|
|
401
410
|
}
|
|
402
|
-
function formatBusinessNumber(
|
|
403
|
-
const d = onlyDigits(
|
|
411
|
+
function formatBusinessNumber(input6) {
|
|
412
|
+
const d = onlyDigits(input6).slice(0, 10);
|
|
404
413
|
if (d.length <= 3) return d;
|
|
405
414
|
if (d.length <= 5) return `${d.slice(0, 3)}-${d.slice(3)}`;
|
|
406
415
|
return `${d.slice(0, 3)}-${d.slice(3, 5)}-${d.slice(5)}`;
|
|
407
416
|
}
|
|
408
|
-
function isValidBusinessNumber(
|
|
409
|
-
const d = onlyDigits(
|
|
417
|
+
function isValidBusinessNumber(input6) {
|
|
418
|
+
const d = onlyDigits(input6);
|
|
410
419
|
if (d.length !== 10) return false;
|
|
411
420
|
const weights = [1, 3, 7, 1, 3, 7, 1, 3, 5];
|
|
412
421
|
const digits = [...d].map(Number);
|
|
@@ -414,9 +423,9 @@ function isValidBusinessNumber(input5) {
|
|
|
414
423
|
sum += Math.floor(digits[8] * 5 / 10);
|
|
415
424
|
return (10 - sum % 10) % 10 === digits[9];
|
|
416
425
|
}
|
|
417
|
-
function formatKoreanAmount(amount,
|
|
426
|
+
function formatKoreanAmount(amount, unit2 = "\uC6D0") {
|
|
418
427
|
const n = Math.floor(Math.abs(amount));
|
|
419
|
-
if (n === 0) return `0${
|
|
428
|
+
if (n === 0) return `0${unit2}`;
|
|
420
429
|
const units = [
|
|
421
430
|
{ value: 1e12, label: "\uC870" },
|
|
422
431
|
{ value: 1e8, label: "\uC5B5" },
|
|
@@ -430,7 +439,7 @@ function formatKoreanAmount(amount, unit = "\uC6D0") {
|
|
|
430
439
|
rest %= u.value;
|
|
431
440
|
if (q > 0) parts.push(`${q.toLocaleString("ko-KR")}${u.label}`);
|
|
432
441
|
}
|
|
433
|
-
return `${amount < 0 ? "-" : ""}${parts.join(" ")}${
|
|
442
|
+
return `${amount < 0 ? "-" : ""}${parts.join(" ")}${unit2}`;
|
|
434
443
|
}
|
|
435
444
|
|
|
436
445
|
// src/utils/date.ts
|
|
@@ -523,7 +532,7 @@ function hasAllRequiredAgreements(items2, value4) {
|
|
|
523
532
|
return items2.every((item8) => !item8.required || value4.includes(item8.value));
|
|
524
533
|
}
|
|
525
534
|
|
|
526
|
-
// src/
|
|
535
|
+
// src/components/Badge/Badge.tsx
|
|
527
536
|
var import_react = require("react");
|
|
528
537
|
|
|
529
538
|
// src/utils/cx.ts
|
|
@@ -531,27 +540,247 @@ function cx(...classNames) {
|
|
|
531
540
|
return classNames.filter(Boolean).join(" ");
|
|
532
541
|
}
|
|
533
542
|
|
|
543
|
+
// src/components/Badge/Badge.css.ts
|
|
544
|
+
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
545
|
+
var badge = /* @__PURE__ */ (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb", warning: "_1295cfnc" }, size: { sm: "_1295cfnd", md: "_1295cfne", lg: "_1295cfnf" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
|
|
546
|
+
var icon = "_1295cfng";
|
|
547
|
+
|
|
548
|
+
// src/components/Badge/Badge.tsx
|
|
549
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
550
|
+
var Badge = /* @__PURE__ */ (0, import_react.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
551
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
552
|
+
startIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: icon, children: startIcon }),
|
|
553
|
+
children
|
|
554
|
+
] });
|
|
555
|
+
});
|
|
556
|
+
|
|
557
|
+
// src/components/Card/Card.tsx
|
|
558
|
+
var import_react2 = require("react");
|
|
559
|
+
|
|
560
|
+
// src/components/Card/Card.css.ts
|
|
561
|
+
var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
562
|
+
var body = "dnuf1u9";
|
|
563
|
+
var card = /* @__PURE__ */ (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "dnuf1u0", variantClassNames: { variant: { outline: "dnuf1u1", elevated: "dnuf1u2", soft: "dnuf1u3" }, padding: { none: "dnuf1u4", sm: "dnuf1u5", md: "dnuf1u6", lg: "dnuf1u7" } }, defaultVariants: { variant: "outline", padding: "md" }, compoundVariants: [] });
|
|
564
|
+
var footer = "dnuf1ua";
|
|
565
|
+
var header = "dnuf1u8";
|
|
566
|
+
|
|
567
|
+
// src/components/Card/Card.tsx
|
|
568
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
569
|
+
var Card = /* @__PURE__ */ (0, import_react2.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
571
|
+
});
|
|
572
|
+
var CardHeader = /* @__PURE__ */ (0, import_react2.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
|
|
573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx(header, className), ...rest });
|
|
574
|
+
});
|
|
575
|
+
var CardBody = /* @__PURE__ */ (0, import_react2.forwardRef)(function CardBody2({ className, ...rest }, ref) {
|
|
576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx(body, className), ...rest });
|
|
577
|
+
});
|
|
578
|
+
var CardFooter = /* @__PURE__ */ (0, import_react2.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
|
|
579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx(footer, className), ...rest });
|
|
580
|
+
});
|
|
581
|
+
|
|
582
|
+
// src/components/Divider/Divider.tsx
|
|
583
|
+
var import_react3 = require("react");
|
|
584
|
+
|
|
585
|
+
// src/components/Divider/Divider.css.ts
|
|
586
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
587
|
+
var divider = /* @__PURE__ */ (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
588
|
+
var labeled = "_1t3gq8v3";
|
|
589
|
+
var line = "_1t3gq8v4";
|
|
590
|
+
|
|
591
|
+
// src/components/Divider/Divider.tsx
|
|
592
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
593
|
+
var Divider = /* @__PURE__ */ (0, import_react3.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
|
|
594
|
+
if (children && orientation === "horizontal") {
|
|
595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, className: cx(labeled, className), ...rest, children: [
|
|
596
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: line, "aria-hidden": true }),
|
|
597
|
+
children,
|
|
598
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: line, "aria-hidden": true })
|
|
599
|
+
] });
|
|
600
|
+
}
|
|
601
|
+
const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
|
|
602
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
|
|
603
|
+
});
|
|
604
|
+
|
|
605
|
+
// src/components/Progress/Progress.tsx
|
|
606
|
+
var import_react4 = require("react");
|
|
607
|
+
|
|
608
|
+
// src/components/Progress/Progress.css.ts
|
|
609
|
+
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
610
|
+
var header2 = "_1tvkq001";
|
|
611
|
+
var indicator = /* @__PURE__ */ (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
|
|
612
|
+
var label = "_1tvkq002";
|
|
613
|
+
var root = "_1tvkq000";
|
|
614
|
+
var track = /* @__PURE__ */ (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
615
|
+
var value = "_1tvkq003";
|
|
616
|
+
|
|
617
|
+
// src/components/Progress/Progress.tsx
|
|
618
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
619
|
+
var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
|
|
620
|
+
var Progress = /* @__PURE__ */ (0, import_react4.forwardRef)(function Progress2({
|
|
621
|
+
value: value4,
|
|
622
|
+
max = 100,
|
|
623
|
+
label: label6,
|
|
624
|
+
"aria-label": ariaLabel,
|
|
625
|
+
showValue,
|
|
626
|
+
formatValue = defaultFormat,
|
|
627
|
+
size,
|
|
628
|
+
color,
|
|
629
|
+
className,
|
|
630
|
+
...rest
|
|
631
|
+
}, ref) {
|
|
632
|
+
const labelId = (0, import_react4.useId)();
|
|
633
|
+
const isIndeterminate = value4 === void 0 || value4 === null;
|
|
634
|
+
const safeMax = max > 0 ? max : 100;
|
|
635
|
+
const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
|
|
636
|
+
const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
|
|
637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: cx(root, className), ...rest, children: [
|
|
638
|
+
(label6 || showValue && valueText) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: header2, children: [
|
|
639
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: labelId, className: label, children: label6 }),
|
|
640
|
+
showValue && valueText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: value, "aria-hidden": true, children: valueText })
|
|
641
|
+
] }),
|
|
642
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
643
|
+
"div",
|
|
644
|
+
{
|
|
645
|
+
role: "progressbar",
|
|
646
|
+
"aria-labelledby": label6 ? labelId : void 0,
|
|
647
|
+
"aria-label": label6 ? void 0 : ariaLabel,
|
|
648
|
+
"aria-valuemin": 0,
|
|
649
|
+
"aria-valuemax": safeMax,
|
|
650
|
+
"aria-valuenow": isIndeterminate ? void 0 : clamped,
|
|
651
|
+
"aria-valuetext": valueText,
|
|
652
|
+
className: track({ size }),
|
|
653
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
654
|
+
"div",
|
|
655
|
+
{
|
|
656
|
+
className: indicator({ color }),
|
|
657
|
+
"data-state": isIndeterminate ? "indeterminate" : clamped >= safeMax ? "complete" : "loading",
|
|
658
|
+
style: isIndeterminate ? void 0 : { width: `${clamped / safeMax * 100}%` }
|
|
659
|
+
}
|
|
660
|
+
)
|
|
661
|
+
}
|
|
662
|
+
)
|
|
663
|
+
] });
|
|
664
|
+
});
|
|
665
|
+
|
|
666
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
667
|
+
var import_dynamic2 = require("@vanilla-extract/dynamic");
|
|
668
|
+
var import_react5 = require("react");
|
|
669
|
+
|
|
670
|
+
// src/components/Skeleton/Skeleton.css.ts
|
|
671
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
672
|
+
var height = "var(--_1s8datd1)";
|
|
673
|
+
var lines = "_1s8datd6";
|
|
674
|
+
var skeleton = /* @__PURE__ */ (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
|
|
675
|
+
var width = "var(--_1s8datd0)";
|
|
676
|
+
|
|
677
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
678
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
679
|
+
var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
|
|
680
|
+
var Skeleton = /* @__PURE__ */ (0, import_react5.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
|
|
681
|
+
const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
|
|
682
|
+
const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
|
|
683
|
+
if (variant === "text" && lines2 > 1) {
|
|
684
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
685
|
+
"span",
|
|
686
|
+
{
|
|
687
|
+
ref,
|
|
688
|
+
"aria-hidden": true,
|
|
689
|
+
className: cx(lines, className),
|
|
690
|
+
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w }), ...style },
|
|
691
|
+
...rest,
|
|
692
|
+
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
693
|
+
"span",
|
|
694
|
+
{
|
|
695
|
+
className: skeleton({ variant }),
|
|
696
|
+
style: (0, import_dynamic2.assignInlineVars)({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
|
|
697
|
+
},
|
|
698
|
+
i
|
|
699
|
+
))
|
|
700
|
+
}
|
|
701
|
+
);
|
|
702
|
+
}
|
|
703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
704
|
+
"span",
|
|
705
|
+
{
|
|
706
|
+
ref,
|
|
707
|
+
"aria-hidden": true,
|
|
708
|
+
className: cx(skeleton({ variant }), className),
|
|
709
|
+
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w, [height]: h }), ...style },
|
|
710
|
+
...rest
|
|
711
|
+
}
|
|
712
|
+
);
|
|
713
|
+
});
|
|
714
|
+
|
|
715
|
+
// src/components/Stack/Stack.tsx
|
|
716
|
+
var import_react6 = require("react");
|
|
717
|
+
|
|
718
|
+
// src/components/Stack/Stack.css.ts
|
|
719
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
720
|
+
var stack = /* @__PURE__ */ (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
|
|
721
|
+
|
|
722
|
+
// src/components/Stack/Stack.tsx
|
|
723
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
724
|
+
var Stack = /* @__PURE__ */ (0, import_react6.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
|
|
726
|
+
});
|
|
727
|
+
|
|
728
|
+
// src/components/Typography/Typography.tsx
|
|
729
|
+
var import_react7 = require("react");
|
|
730
|
+
|
|
731
|
+
// src/components/Typography/Typography.css.ts
|
|
732
|
+
var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
733
|
+
var typography = /* @__PURE__ */ (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", warning: "kioliog", inherit: "kiolioh" }, weight: { regular: "kiolioi", medium: "kiolioj", semibold: "kioliok", bold: "kioliol" }, align: { start: "kioliom", center: "kiolion", end: "kiolioo" }, truncate: { true: "kioliop" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
|
|
734
|
+
|
|
735
|
+
// src/components/Typography/Typography.tsx
|
|
736
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
737
|
+
var defaultElement = {
|
|
738
|
+
display: "h1",
|
|
739
|
+
h1: "h1",
|
|
740
|
+
h2: "h2",
|
|
741
|
+
h3: "h3",
|
|
742
|
+
h4: "h4",
|
|
743
|
+
"body-lg": "p",
|
|
744
|
+
body: "p",
|
|
745
|
+
"body-sm": "p",
|
|
746
|
+
caption: "span"
|
|
747
|
+
};
|
|
748
|
+
var Typography = /* @__PURE__ */ (0, import_react7.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
749
|
+
const Component = as ?? defaultElement[variant];
|
|
750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
751
|
+
Component,
|
|
752
|
+
{
|
|
753
|
+
ref,
|
|
754
|
+
className: cx(typography({ variant, color, weight, align, truncate }), className),
|
|
755
|
+
...rest
|
|
756
|
+
}
|
|
757
|
+
);
|
|
758
|
+
});
|
|
759
|
+
|
|
760
|
+
// src/theme/ThemeProvider.tsx
|
|
761
|
+
var import_react8 = require("react");
|
|
762
|
+
|
|
534
763
|
// src/theme/ThemeProvider.css.ts
|
|
535
764
|
var portal = "sfyhlv0";
|
|
536
|
-
var
|
|
765
|
+
var root2 = "sfyhlv1 sfyhlv0";
|
|
537
766
|
|
|
538
767
|
// src/theme/ThemeProvider.tsx
|
|
539
|
-
var
|
|
540
|
-
var ThemeContext = /* @__PURE__ */ (0,
|
|
541
|
-
var ThemeProvider = /* @__PURE__ */ (0,
|
|
542
|
-
const parent = (0,
|
|
768
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
769
|
+
var ThemeContext = /* @__PURE__ */ (0, import_react8.createContext)({ theme: "light" });
|
|
770
|
+
var ThemeProvider = /* @__PURE__ */ (0, import_react8.forwardRef)(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
|
|
771
|
+
const parent = (0, import_react8.useContext)(ThemeContext);
|
|
543
772
|
const theme = themeProp ?? parent.theme;
|
|
544
|
-
const merged = (0,
|
|
545
|
-
const value4 = (0,
|
|
773
|
+
const merged = (0, import_react8.useMemo)(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
|
|
774
|
+
const value4 = (0, import_react8.useMemo)(
|
|
546
775
|
() => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
|
|
547
776
|
[theme, merged]
|
|
548
777
|
);
|
|
549
|
-
return /* @__PURE__ */ (0,
|
|
778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ThemeContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
550
779
|
"div",
|
|
551
780
|
{
|
|
552
781
|
ref,
|
|
553
782
|
"data-theme": theme,
|
|
554
|
-
className: cx(themeClass[theme],
|
|
783
|
+
className: cx(themeClass[theme], root2, className),
|
|
555
784
|
style: value4.style ? { ...value4.style, ...style } : style,
|
|
556
785
|
...rest,
|
|
557
786
|
children
|
|
@@ -559,96 +788,96 @@ var ThemeProvider = /* @__PURE__ */ (0, import_react.forwardRef)(function ThemeP
|
|
|
559
788
|
) });
|
|
560
789
|
});
|
|
561
790
|
function useTheme() {
|
|
562
|
-
return (0,
|
|
791
|
+
return (0, import_react8.useContext)(ThemeContext).theme;
|
|
563
792
|
}
|
|
564
793
|
function usePortalProps() {
|
|
565
|
-
const { theme, style } = (0,
|
|
794
|
+
const { theme, style } = (0, import_react8.useContext)(ThemeContext);
|
|
566
795
|
return { className: cx(themeClass[theme], portal), style };
|
|
567
796
|
}
|
|
568
797
|
|
|
569
798
|
// src/i18n/LocaleProvider.tsx
|
|
570
|
-
var
|
|
571
|
-
var
|
|
572
|
-
var MessagesContext = /* @__PURE__ */ (0,
|
|
799
|
+
var import_react9 = require("react");
|
|
800
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
801
|
+
var MessagesContext = /* @__PURE__ */ (0, import_react9.createContext)({});
|
|
573
802
|
function LocaleProvider({ messages, children }) {
|
|
574
|
-
const parent = (0,
|
|
575
|
-
const value4 = (0,
|
|
576
|
-
return /* @__PURE__ */ (0,
|
|
803
|
+
const parent = (0, import_react9.useContext)(MessagesContext);
|
|
804
|
+
const value4 = (0, import_react9.useMemo)(() => ({ ...parent, ...messages }), [parent, messages]);
|
|
805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MessagesContext.Provider, { value: value4, children });
|
|
577
806
|
}
|
|
578
807
|
function useMessages() {
|
|
579
|
-
return (0,
|
|
808
|
+
return (0, import_react9.useContext)(MessagesContext);
|
|
580
809
|
}
|
|
581
810
|
|
|
582
811
|
// src/components/Accordion/Accordion.tsx
|
|
583
812
|
var RadixAccordion = __toESM(require("@radix-ui/react-accordion"), 1);
|
|
584
813
|
var import_icons = require("@bestow-ui/icons");
|
|
585
|
-
var
|
|
814
|
+
var import_react10 = require("react");
|
|
586
815
|
|
|
587
816
|
// src/components/Accordion/Accordion.css.ts
|
|
588
817
|
var chevron = "v58j0l4";
|
|
589
818
|
var content = "v58j0l5";
|
|
590
819
|
var contentInner = "v58j0l6";
|
|
591
|
-
var
|
|
820
|
+
var header3 = "v58j0l2";
|
|
592
821
|
var item = "v58j0l1";
|
|
593
|
-
var
|
|
822
|
+
var root3 = "v58j0l0";
|
|
594
823
|
var trigger = "v58j0l3";
|
|
595
824
|
|
|
596
825
|
// src/components/Accordion/Accordion.tsx
|
|
597
|
-
var
|
|
598
|
-
var Accordion = /* @__PURE__ */ (0,
|
|
826
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
827
|
+
var Accordion = /* @__PURE__ */ (0, import_react10.forwardRef)(function Accordion2({ className, ...props }, ref) {
|
|
599
828
|
const { collapsible, ...multipleProps } = props;
|
|
600
829
|
const typedProps = props.type === "multiple" ? multipleProps : { ...multipleProps, collapsible };
|
|
601
830
|
const rootProps = "value" in props ? { ...typedProps, value: props.value ?? (props.type === "multiple" ? [] : "") } : typedProps;
|
|
602
|
-
return /* @__PURE__ */ (0,
|
|
831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixAccordion.Root, { ref, className: cx(root3, className), ...rootProps });
|
|
603
832
|
});
|
|
604
|
-
var AccordionItem = /* @__PURE__ */ (0,
|
|
833
|
+
var AccordionItem = /* @__PURE__ */ (0, import_react10.forwardRef)(function AccordionItem2({ title: title6, headingLevel = 3, className, children, ...rest }, ref) {
|
|
605
834
|
const Heading = `h${headingLevel}`;
|
|
606
|
-
return /* @__PURE__ */ (0,
|
|
607
|
-
/* @__PURE__ */ (0,
|
|
835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RadixAccordion.Item, { ref, className: cx(item, className), ...rest, children: [
|
|
836
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixAccordion.Header, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Heading, { className: header3, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RadixAccordion.Trigger, { className: trigger, children: [
|
|
608
837
|
title6,
|
|
609
|
-
/* @__PURE__ */ (0,
|
|
838
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons.ChevronDownIcon, { size: 18, className: chevron })
|
|
610
839
|
] }) }) }),
|
|
611
|
-
/* @__PURE__ */ (0,
|
|
840
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixAccordion.Content, { className: content, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: contentInner, children }) })
|
|
612
841
|
] });
|
|
613
842
|
});
|
|
614
843
|
|
|
615
844
|
// src/components/AddressInput/AddressInput.tsx
|
|
616
|
-
var
|
|
845
|
+
var import_react16 = require("react");
|
|
617
846
|
|
|
618
847
|
// src/components/Button/Button.tsx
|
|
619
|
-
var
|
|
848
|
+
var import_react12 = require("react");
|
|
620
849
|
|
|
621
850
|
// src/components/Spinner/Spinner.tsx
|
|
622
851
|
var import_icons2 = require("@bestow-ui/icons");
|
|
623
|
-
var
|
|
852
|
+
var import_react11 = require("react");
|
|
624
853
|
|
|
625
854
|
// src/styles/visuallyHidden.css.ts
|
|
626
855
|
var visuallyHidden = "_1kdtbw10";
|
|
627
856
|
|
|
628
857
|
// src/components/Spinner/Spinner.css.ts
|
|
629
|
-
var
|
|
630
|
-
var spinner = /* @__PURE__ */ (0,
|
|
858
|
+
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
859
|
+
var spinner = /* @__PURE__ */ (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_4b5tg40", variantClassNames: { color: { inherit: "_4b5tg41", primary: "_4b5tg42", neutral: "_4b5tg43", danger: "_4b5tg44" }, size: { sm: "_4b5tg45", md: "_4b5tg46", lg: "_4b5tg47" } }, defaultVariants: { color: "inherit", size: "md" }, compoundVariants: [] });
|
|
631
860
|
|
|
632
861
|
// src/components/Spinner/Spinner.tsx
|
|
633
|
-
var
|
|
634
|
-
var Spinner = /* @__PURE__ */ (0,
|
|
862
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
863
|
+
var Spinner = /* @__PURE__ */ (0, import_react11.forwardRef)(function Spinner2({ size, color, label: labelProp, className, ...rest }, ref) {
|
|
635
864
|
const m = useMessages();
|
|
636
865
|
const label6 = labelProp ?? m.loading ?? "\uB85C\uB529 \uC911";
|
|
637
866
|
const a11y = label6 ? { role: "status" } : { "aria-hidden": true };
|
|
638
|
-
return /* @__PURE__ */ (0,
|
|
639
|
-
/* @__PURE__ */ (0,
|
|
640
|
-
label6 && /* @__PURE__ */ (0,
|
|
867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
|
|
868
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons2.LoaderIcon, { size: "100%" }),
|
|
869
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: visuallyHidden, children: label6 })
|
|
641
870
|
] });
|
|
642
871
|
});
|
|
643
872
|
|
|
644
873
|
// src/components/Button/Button.css.ts
|
|
645
|
-
var
|
|
646
|
-
var button = /* @__PURE__ */ (0,
|
|
647
|
-
var
|
|
874
|
+
var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
875
|
+
var button = /* @__PURE__ */ (0, import_createRuntimeFn9.createRuntimeFn)({ defaultClassName: "xcekda6", variantClassNames: { variant: { solid: "xcekda7", soft: "xcekda8", outline: "xcekda9", ghost: "xcekdaa" }, color: { primary: "xcekdab", neutral: "xcekdac", danger: "xcekdad" }, size: { sm: "xcekdae", md: "xcekdaf", lg: "xcekdag" }, fullWidth: { true: "xcekdah" } }, defaultVariants: { variant: "solid", color: "primary", size: "md" }, compoundVariants: [] });
|
|
876
|
+
var icon2 = "xcekdai";
|
|
648
877
|
|
|
649
878
|
// src/components/Button/Button.tsx
|
|
650
|
-
var
|
|
651
|
-
var Button = /* @__PURE__ */ (0,
|
|
879
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
880
|
+
var Button = /* @__PURE__ */ (0, import_react12.forwardRef)(function Button2({
|
|
652
881
|
variant,
|
|
653
882
|
color,
|
|
654
883
|
size,
|
|
@@ -669,8 +898,8 @@ var Button = /* @__PURE__ */ (0, import_react5.forwardRef)(function Button2({
|
|
|
669
898
|
}
|
|
670
899
|
onClick?.(event);
|
|
671
900
|
};
|
|
672
|
-
const leading = loading2 ? /* @__PURE__ */ (0,
|
|
673
|
-
return /* @__PURE__ */ (0,
|
|
901
|
+
const leading = loading2 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, { size: "sm", label: "" }) : startIcon;
|
|
902
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
674
903
|
"button",
|
|
675
904
|
{
|
|
676
905
|
ref,
|
|
@@ -681,38 +910,38 @@ var Button = /* @__PURE__ */ (0, import_react5.forwardRef)(function Button2({
|
|
|
681
910
|
onClick: handleClick,
|
|
682
911
|
...rest,
|
|
683
912
|
children: [
|
|
684
|
-
leading && /* @__PURE__ */ (0,
|
|
913
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: icon2, children: leading }),
|
|
685
914
|
children,
|
|
686
|
-
endIcon && /* @__PURE__ */ (0,
|
|
915
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: icon2, children: endIcon })
|
|
687
916
|
]
|
|
688
917
|
}
|
|
689
918
|
);
|
|
690
919
|
});
|
|
691
920
|
|
|
692
921
|
// src/components/Input/Input.css.ts
|
|
693
|
-
var
|
|
922
|
+
var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
694
923
|
var adornment = "_19p5zvh6";
|
|
695
924
|
var field = "_19p5zvh7";
|
|
696
925
|
var fieldFullWidth = "_19p5zvh8";
|
|
697
|
-
var helperText = /* @__PURE__ */ (0,
|
|
926
|
+
var helperText = /* @__PURE__ */ (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
698
927
|
var input = "_19p5zvh5";
|
|
699
|
-
var
|
|
928
|
+
var label2 = "_19p5zvh9";
|
|
700
929
|
var requiredMark = "_19p5zvha";
|
|
701
|
-
var
|
|
930
|
+
var root4 = /* @__PURE__ */ (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
702
931
|
|
|
703
932
|
// src/components/Input/Input.tsx
|
|
704
|
-
var
|
|
705
|
-
var
|
|
706
|
-
var Input = /* @__PURE__ */ (0,
|
|
707
|
-
return /* @__PURE__ */ (0,
|
|
933
|
+
var import_react13 = require("react");
|
|
934
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
935
|
+
var Input = /* @__PURE__ */ (0, import_react13.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
708
937
|
"div",
|
|
709
938
|
{
|
|
710
|
-
className: cx(
|
|
939
|
+
className: cx(root4({ size, fullWidth }), rootClassName),
|
|
711
940
|
"data-invalid": invalid || void 0,
|
|
712
941
|
"data-disabled": disabled || void 0,
|
|
713
942
|
children: [
|
|
714
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
715
|
-
/* @__PURE__ */ (0,
|
|
943
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: adornment, children: startAdornment }),
|
|
944
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
716
945
|
"input",
|
|
717
946
|
{
|
|
718
947
|
ref,
|
|
@@ -722,25 +951,25 @@ var Input = /* @__PURE__ */ (0, import_react6.forwardRef)(function Input2({ size
|
|
|
722
951
|
...rest
|
|
723
952
|
}
|
|
724
953
|
),
|
|
725
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
954
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: adornment, children: endAdornment })
|
|
726
955
|
]
|
|
727
956
|
}
|
|
728
957
|
);
|
|
729
958
|
});
|
|
730
959
|
|
|
731
960
|
// src/components/Input/TextField.tsx
|
|
732
|
-
var
|
|
733
|
-
var
|
|
734
|
-
var TextField = /* @__PURE__ */ (0,
|
|
735
|
-
const generatedId = (0,
|
|
961
|
+
var import_react14 = require("react");
|
|
962
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
963
|
+
var TextField = /* @__PURE__ */ (0, import_react14.forwardRef)(function TextField2({ label: label6, helperText: helperText3, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
|
|
964
|
+
const generatedId = (0, import_react14.useId)();
|
|
736
965
|
const inputId = id ?? generatedId;
|
|
737
966
|
const helperId = helperText3 ? `${inputId}-helper` : void 0;
|
|
738
|
-
return /* @__PURE__ */ (0,
|
|
739
|
-
label6 && /* @__PURE__ */ (0,
|
|
967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
968
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { htmlFor: inputId, className: label2, children: [
|
|
740
969
|
label6,
|
|
741
|
-
required && /* @__PURE__ */ (0,
|
|
970
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
742
971
|
] }),
|
|
743
|
-
/* @__PURE__ */ (0,
|
|
972
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
744
973
|
Input,
|
|
745
974
|
{
|
|
746
975
|
ref,
|
|
@@ -752,7 +981,7 @@ var TextField = /* @__PURE__ */ (0, import_react7.forwardRef)(function TextField
|
|
|
752
981
|
...rest
|
|
753
982
|
}
|
|
754
983
|
),
|
|
755
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
984
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
756
985
|
] });
|
|
757
986
|
});
|
|
758
987
|
|
|
@@ -761,9 +990,9 @@ var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
|
761
990
|
var import_icons3 = require("@bestow-ui/icons");
|
|
762
991
|
|
|
763
992
|
// src/utils/useReturnFocus.ts
|
|
764
|
-
var
|
|
993
|
+
var import_react15 = require("react");
|
|
765
994
|
function useReturnFocus(hasTrigger, onCloseAutoFocus) {
|
|
766
|
-
const returnTo = (0,
|
|
995
|
+
const returnTo = (0, import_react15.useRef)(null);
|
|
767
996
|
return {
|
|
768
997
|
onOpenAutoFocus: () => {
|
|
769
998
|
returnTo.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
@@ -781,19 +1010,19 @@ function useReturnFocus(hasTrigger, onCloseAutoFocus) {
|
|
|
781
1010
|
}
|
|
782
1011
|
|
|
783
1012
|
// src/components/Modal/Modal.css.ts
|
|
784
|
-
var
|
|
785
|
-
var
|
|
1013
|
+
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1014
|
+
var body2 = "_1pdsmv0a";
|
|
786
1015
|
var closeButton = "_1pdsmv09";
|
|
787
|
-
var content2 = /* @__PURE__ */ (0,
|
|
1016
|
+
var content2 = /* @__PURE__ */ (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
788
1017
|
var description = "_1pdsmv08";
|
|
789
|
-
var
|
|
790
|
-
var
|
|
1018
|
+
var footer2 = "_1pdsmv0b";
|
|
1019
|
+
var header4 = "_1pdsmv05";
|
|
791
1020
|
var headings = "_1pdsmv06";
|
|
792
1021
|
var overlay = "_1pdsmv00";
|
|
793
1022
|
var title = "_1pdsmv07";
|
|
794
1023
|
|
|
795
1024
|
// src/components/Modal/Modal.tsx
|
|
796
|
-
var
|
|
1025
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
797
1026
|
function Modal({
|
|
798
1027
|
open,
|
|
799
1028
|
defaultOpen,
|
|
@@ -812,11 +1041,11 @@ function Modal({
|
|
|
812
1041
|
const portal2 = usePortalProps();
|
|
813
1042
|
const m = useMessages();
|
|
814
1043
|
const focus = useReturnFocus(Boolean(trigger4), onCloseAutoFocus);
|
|
815
|
-
return /* @__PURE__ */ (0,
|
|
816
|
-
trigger4 && /* @__PURE__ */ (0,
|
|
817
|
-
/* @__PURE__ */ (0,
|
|
818
|
-
/* @__PURE__ */ (0,
|
|
819
|
-
/* @__PURE__ */ (0,
|
|
1044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1045
|
+
trigger4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Trigger, { asChild: true, children: trigger4 }),
|
|
1046
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dialog.Portal, { children: [
|
|
1047
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
1048
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
820
1049
|
Dialog.Content,
|
|
821
1050
|
{
|
|
822
1051
|
className: cx(portal2.className, content2({ size }), className),
|
|
@@ -826,15 +1055,15 @@ function Modal({
|
|
|
826
1055
|
onCloseAutoFocus: focus.onCloseAutoFocus,
|
|
827
1056
|
...description6 ? {} : { "aria-describedby": void 0 },
|
|
828
1057
|
children: [
|
|
829
|
-
/* @__PURE__ */ (0,
|
|
830
|
-
/* @__PURE__ */ (0,
|
|
831
|
-
/* @__PURE__ */ (0,
|
|
832
|
-
description6 && /* @__PURE__ */ (0,
|
|
1058
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: header4, children: [
|
|
1059
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: headings, children: [
|
|
1060
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Title, { className: title, children: title6 }),
|
|
1061
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Description, { className: description, children: description6 })
|
|
833
1062
|
] }),
|
|
834
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
1063
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Close, { className: closeButton, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.XIcon, { size: 16 }) })
|
|
835
1064
|
] }),
|
|
836
|
-
children && /* @__PURE__ */ (0,
|
|
837
|
-
footer6 && /* @__PURE__ */ (0,
|
|
1065
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: body2, children }),
|
|
1066
|
+
footer6 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: footer2, children: footer6 })
|
|
838
1067
|
]
|
|
839
1068
|
}
|
|
840
1069
|
)
|
|
@@ -852,7 +1081,7 @@ var searchStatus = "_16fi7uy5";
|
|
|
852
1081
|
var zonecode = "_16fi7uy3";
|
|
853
1082
|
|
|
854
1083
|
// src/components/AddressInput/AddressInput.tsx
|
|
855
|
-
var
|
|
1084
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
856
1085
|
var EMPTY = { zonecode: "", address: "", extraAddress: "", detail: "" };
|
|
857
1086
|
function SearchArea({
|
|
858
1087
|
provider,
|
|
@@ -860,13 +1089,13 @@ function SearchArea({
|
|
|
860
1089
|
loadErrorText,
|
|
861
1090
|
loadingText
|
|
862
1091
|
}) {
|
|
863
|
-
const containerRef = (0,
|
|
864
|
-
const [status, setStatus] = (0,
|
|
865
|
-
const onSelectRef = (0,
|
|
866
|
-
(0,
|
|
1092
|
+
const containerRef = (0, import_react16.useRef)(null);
|
|
1093
|
+
const [status, setStatus] = (0, import_react16.useState)("loading");
|
|
1094
|
+
const onSelectRef = (0, import_react16.useRef)(onSelect);
|
|
1095
|
+
(0, import_react16.useEffect)(() => {
|
|
867
1096
|
onSelectRef.current = onSelect;
|
|
868
1097
|
});
|
|
869
|
-
(0,
|
|
1098
|
+
(0, import_react16.useEffect)(() => {
|
|
870
1099
|
const container2 = containerRef.current;
|
|
871
1100
|
if (!container2) return;
|
|
872
1101
|
let cleanup;
|
|
@@ -883,12 +1112,12 @@ function SearchArea({
|
|
|
883
1112
|
cleanup?.();
|
|
884
1113
|
};
|
|
885
1114
|
}, [provider]);
|
|
886
|
-
return /* @__PURE__ */ (0,
|
|
887
|
-
/* @__PURE__ */ (0,
|
|
888
|
-
status !== "ready" && /* @__PURE__ */ (0,
|
|
1115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: searchArea, children: [
|
|
1116
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
|
|
1117
|
+
status !== "ready" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: searchStatus, role: "status", children: status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Spinner, { label: loadingText }) : loadErrorText })
|
|
889
1118
|
] });
|
|
890
1119
|
}
|
|
891
|
-
var AddressInput = /* @__PURE__ */ (0,
|
|
1120
|
+
var AddressInput = /* @__PURE__ */ (0, import_react16.forwardRef)(
|
|
892
1121
|
function AddressInput2(props, ref) {
|
|
893
1122
|
const {
|
|
894
1123
|
value: value4,
|
|
@@ -911,13 +1140,13 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
911
1140
|
const searchLabel = searchLabelProp ?? m.addressSearch ?? "\uC8FC\uC18C \uAC80\uC0C9";
|
|
912
1141
|
const detailPlaceholder = detailPlaceholderProp ?? m.detailAddressPlaceholder ?? "\uC0C1\uC138 \uC8FC\uC18C (\uB3D9\xB7\uD638\uC218 \uB4F1)";
|
|
913
1142
|
const loadErrorText = loadErrorTextProp ?? m.addressLoadError ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC7A0\uC2DC \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.";
|
|
914
|
-
const baseId = (0,
|
|
1143
|
+
const baseId = (0, import_react16.useId)();
|
|
915
1144
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
916
|
-
const detailRef = (0,
|
|
917
|
-
const selectedRef = (0,
|
|
918
|
-
const [open, setOpen] = (0,
|
|
1145
|
+
const detailRef = (0, import_react16.useRef)(null);
|
|
1146
|
+
const selectedRef = (0, import_react16.useRef)(false);
|
|
1147
|
+
const [open, setOpen] = (0, import_react16.useState)(false);
|
|
919
1148
|
const isControlled = "value" in props;
|
|
920
|
-
const [innerValue, setInnerValue] = (0,
|
|
1149
|
+
const [innerValue, setInnerValue] = (0, import_react16.useState)(defaultValue ?? EMPTY);
|
|
921
1150
|
const current2 = isControlled ? value4 ?? EMPTY : innerValue;
|
|
922
1151
|
const update = (next) => {
|
|
923
1152
|
if (!isControlled) setInnerValue(next);
|
|
@@ -939,13 +1168,13 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
939
1168
|
setOpen(false);
|
|
940
1169
|
};
|
|
941
1170
|
const fullAddress = `${current2.address}${current2.extraAddress ?? ""}`;
|
|
942
|
-
return /* @__PURE__ */ (0,
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
1171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("fieldset", { ref, className: cx(fieldset, className), disabled, "aria-describedby": helperId, children: [
|
|
1172
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("legend", { className: legend, children: [
|
|
944
1173
|
label6,
|
|
945
|
-
required && /* @__PURE__ */ (0,
|
|
1174
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
946
1175
|
] }),
|
|
947
|
-
/* @__PURE__ */ (0,
|
|
948
|
-
/* @__PURE__ */ (0,
|
|
1176
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: row, children: [
|
|
1177
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
949
1178
|
TextField,
|
|
950
1179
|
{
|
|
951
1180
|
"aria-label": m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
|
|
@@ -958,9 +1187,9 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
958
1187
|
onClick: openSearch
|
|
959
1188
|
}
|
|
960
1189
|
),
|
|
961
|
-
/* @__PURE__ */ (0,
|
|
1190
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
|
|
962
1191
|
] }),
|
|
963
|
-
/* @__PURE__ */ (0,
|
|
1192
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
964
1193
|
TextField,
|
|
965
1194
|
{
|
|
966
1195
|
"aria-label": m.baseAddress ?? "\uAE30\uBCF8 \uC8FC\uC18C",
|
|
@@ -973,7 +1202,7 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
973
1202
|
onClick: openSearch
|
|
974
1203
|
}
|
|
975
1204
|
),
|
|
976
|
-
/* @__PURE__ */ (0,
|
|
1205
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
977
1206
|
TextField,
|
|
978
1207
|
{
|
|
979
1208
|
ref: detailRef,
|
|
@@ -985,13 +1214,13 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
985
1214
|
fullWidth: true
|
|
986
1215
|
}
|
|
987
1216
|
),
|
|
988
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
989
|
-
name && /* @__PURE__ */ (0,
|
|
990
|
-
/* @__PURE__ */ (0,
|
|
991
|
-
/* @__PURE__ */ (0,
|
|
992
|
-
/* @__PURE__ */ (0,
|
|
1217
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
|
|
1218
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
1219
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "hidden", name: `${name}[zonecode]`, value: current2.zonecode }),
|
|
1220
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "hidden", name: `${name}[address]`, value: fullAddress }),
|
|
1221
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "hidden", name: `${name}[detail]`, value: current2.detail })
|
|
993
1222
|
] }),
|
|
994
|
-
/* @__PURE__ */ (0,
|
|
1223
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
995
1224
|
Modal,
|
|
996
1225
|
{
|
|
997
1226
|
open,
|
|
@@ -1004,7 +1233,7 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
1004
1233
|
detailRef.current?.focus();
|
|
1005
1234
|
}
|
|
1006
1235
|
},
|
|
1007
|
-
children: /* @__PURE__ */ (0,
|
|
1236
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1008
1237
|
SearchArea,
|
|
1009
1238
|
{
|
|
1010
1239
|
provider,
|
|
@@ -1020,11 +1249,11 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
1020
1249
|
);
|
|
1021
1250
|
|
|
1022
1251
|
// src/components/AgreementGroup/AgreementGroup.tsx
|
|
1023
|
-
var
|
|
1252
|
+
var import_react18 = require("react");
|
|
1024
1253
|
var import_icons4 = require("@bestow-ui/icons");
|
|
1025
1254
|
|
|
1026
1255
|
// src/components/Checkbox/Checkbox.tsx
|
|
1027
|
-
var
|
|
1256
|
+
var import_react17 = require("react");
|
|
1028
1257
|
|
|
1029
1258
|
// src/utils/mergeRefs.ts
|
|
1030
1259
|
function mergeRefs(...refs) {
|
|
@@ -1037,23 +1266,23 @@ function mergeRefs(...refs) {
|
|
|
1037
1266
|
}
|
|
1038
1267
|
|
|
1039
1268
|
// src/components/Checkbox/Checkbox.css.ts
|
|
1040
|
-
var
|
|
1269
|
+
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1041
1270
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
1042
|
-
var control = /* @__PURE__ */ (0,
|
|
1271
|
+
var control = /* @__PURE__ */ (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1043
1272
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
1044
1273
|
var input2 = "_1y7mzsn6";
|
|
1045
|
-
var
|
|
1274
|
+
var root5 = /* @__PURE__ */ (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1046
1275
|
|
|
1047
1276
|
// src/components/Checkbox/Checkbox.tsx
|
|
1048
|
-
var
|
|
1049
|
-
var Checkbox = /* @__PURE__ */ (0,
|
|
1050
|
-
const innerRef = (0,
|
|
1051
|
-
(0,
|
|
1277
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1278
|
+
var Checkbox = /* @__PURE__ */ (0, import_react17.forwardRef)(function Checkbox2({ label: label6, size, indeterminate = false, invalid, disabled, onChange, onCheckedChange, className, ...rest }, ref) {
|
|
1279
|
+
const innerRef = (0, import_react17.useRef)(null);
|
|
1280
|
+
(0, import_react17.useEffect)(() => {
|
|
1052
1281
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
1053
1282
|
}, [indeterminate]);
|
|
1054
|
-
return /* @__PURE__ */ (0,
|
|
1055
|
-
/* @__PURE__ */ (0,
|
|
1056
|
-
/* @__PURE__ */ (0,
|
|
1283
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: cx(root5({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
1284
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: control({ size }), children: [
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1057
1286
|
"input",
|
|
1058
1287
|
{
|
|
1059
1288
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -1068,7 +1297,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react10.forwardRef)(function Checkbox2
|
|
|
1068
1297
|
...rest
|
|
1069
1298
|
}
|
|
1070
1299
|
),
|
|
1071
|
-
/* @__PURE__ */ (0,
|
|
1300
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1072
1301
|
"path",
|
|
1073
1302
|
{
|
|
1074
1303
|
d: "M5 10.5l3.2 3L15 7",
|
|
@@ -1078,7 +1307,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react10.forwardRef)(function Checkbox2
|
|
|
1078
1307
|
strokeLinejoin: "round"
|
|
1079
1308
|
}
|
|
1080
1309
|
) }),
|
|
1081
|
-
/* @__PURE__ */ (0,
|
|
1310
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
1082
1311
|
] }),
|
|
1083
1312
|
label6
|
|
1084
1313
|
] });
|
|
@@ -1098,8 +1327,8 @@ var tag = "j3uxdc7";
|
|
|
1098
1327
|
var toggle = "j3uxdc8";
|
|
1099
1328
|
|
|
1100
1329
|
// src/components/AgreementGroup/AgreementGroup.tsx
|
|
1101
|
-
var
|
|
1102
|
-
var AgreementGroup = /* @__PURE__ */ (0,
|
|
1330
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1331
|
+
var AgreementGroup = /* @__PURE__ */ (0, import_react18.forwardRef)(
|
|
1103
1332
|
function AgreementGroup2(props, ref) {
|
|
1104
1333
|
const {
|
|
1105
1334
|
items: items2,
|
|
@@ -1124,12 +1353,12 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1124
1353
|
const optionalText = optionalTextProp ?? m.optional ?? "\uC120\uD0DD";
|
|
1125
1354
|
const showText = showTextProp ?? m.show ?? "\uBCF4\uAE30";
|
|
1126
1355
|
const hideText = hideTextProp ?? m.hide ?? "\uC811\uAE30";
|
|
1127
|
-
const baseId = (0,
|
|
1356
|
+
const baseId = (0, import_react18.useId)();
|
|
1128
1357
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
1129
1358
|
const isControlled = "value" in props;
|
|
1130
|
-
const [innerValue, setInnerValue] = (0,
|
|
1359
|
+
const [innerValue, setInnerValue] = (0, import_react18.useState)(defaultValue ?? []);
|
|
1131
1360
|
const agreed = isControlled ? value4 ?? [] : innerValue;
|
|
1132
|
-
const [expanded, setExpanded] = (0,
|
|
1361
|
+
const [expanded, setExpanded] = (0, import_react18.useState)([]);
|
|
1133
1362
|
const update = (next) => {
|
|
1134
1363
|
if (!isControlled) setInnerValue(next);
|
|
1135
1364
|
onValueChange?.(next);
|
|
@@ -1138,7 +1367,7 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1138
1367
|
const agreedCount = allValues.filter((v) => agreed.includes(v)).length;
|
|
1139
1368
|
const allChecked = items2.length > 0 && agreedCount === items2.length;
|
|
1140
1369
|
const toggleItem = (itemValue, checked) => update(checked ? [...agreed.filter((v) => v !== itemValue), itemValue] : agreed.filter((v) => v !== itemValue));
|
|
1141
|
-
return /* @__PURE__ */ (0,
|
|
1370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1142
1371
|
"fieldset",
|
|
1143
1372
|
{
|
|
1144
1373
|
ref,
|
|
@@ -1147,9 +1376,9 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1147
1376
|
"aria-describedby": helperId,
|
|
1148
1377
|
"data-invalid": error || void 0,
|
|
1149
1378
|
children: [
|
|
1150
|
-
label6 && /* @__PURE__ */ (0,
|
|
1151
|
-
/* @__PURE__ */ (0,
|
|
1152
|
-
/* @__PURE__ */ (0,
|
|
1379
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("legend", { className: legend2, children: label6 }),
|
|
1380
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: box, children: [
|
|
1381
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: all, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1153
1382
|
Checkbox,
|
|
1154
1383
|
{
|
|
1155
1384
|
label: allLabel,
|
|
@@ -1158,28 +1387,28 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1158
1387
|
onChange: (event) => update(event.target.checked ? allValues : [])
|
|
1159
1388
|
}
|
|
1160
1389
|
) }),
|
|
1161
|
-
/* @__PURE__ */ (0,
|
|
1390
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: list, children: items2.map((item8) => {
|
|
1162
1391
|
const labelId = `${baseId}-${item8.value}-label`;
|
|
1163
1392
|
const toggleTextId = `${baseId}-${item8.value}-toggle`;
|
|
1164
1393
|
const contentId = `${baseId}-${item8.value}-content`;
|
|
1165
1394
|
const isOpen = expanded.includes(item8.value);
|
|
1166
|
-
return /* @__PURE__ */ (0,
|
|
1167
|
-
/* @__PURE__ */ (0,
|
|
1168
|
-
/* @__PURE__ */ (0,
|
|
1395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("li", { className: item2, children: [
|
|
1396
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: row2, children: [
|
|
1397
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1169
1398
|
Checkbox,
|
|
1170
1399
|
{
|
|
1171
1400
|
size: "sm",
|
|
1172
1401
|
checked: agreed.includes(item8.value),
|
|
1173
1402
|
invalid: error && item8.required && !agreed.includes(item8.value),
|
|
1174
1403
|
onChange: (event) => toggleItem(item8.value, event.target.checked),
|
|
1175
|
-
label: /* @__PURE__ */ (0,
|
|
1176
|
-
/* @__PURE__ */ (0,
|
|
1404
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { id: labelId, children: [
|
|
1405
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: tag, "data-required": item8.required || void 0, children: item8.required ? requiredText : optionalText }),
|
|
1177
1406
|
" ",
|
|
1178
1407
|
item8.label
|
|
1179
1408
|
] })
|
|
1180
1409
|
}
|
|
1181
1410
|
),
|
|
1182
|
-
item8.content && /* @__PURE__ */ (0,
|
|
1411
|
+
item8.content && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1183
1412
|
"button",
|
|
1184
1413
|
{
|
|
1185
1414
|
type: "button",
|
|
@@ -1189,20 +1418,20 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1189
1418
|
"aria-labelledby": `${labelId} ${toggleTextId}`,
|
|
1190
1419
|
onClick: () => setExpanded((prev) => isOpen ? prev.filter((v) => v !== item8.value) : [...prev, item8.value]),
|
|
1191
1420
|
children: [
|
|
1192
|
-
/* @__PURE__ */ (0,
|
|
1193
|
-
/* @__PURE__ */ (0,
|
|
1421
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { id: toggleTextId, children: isOpen ? hideText : showText }),
|
|
1422
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.ChevronDownIcon, { size: 14, className: chevron2 })
|
|
1194
1423
|
]
|
|
1195
1424
|
}
|
|
1196
1425
|
)
|
|
1197
1426
|
] }),
|
|
1198
1427
|
item8.content && isOpen && // 내용이 길면 스크롤된다 — 키보드로도 스크롤할 수 있게 포커스를 받는 이름 있는 영역으로 둔다
|
|
1199
1428
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
1200
|
-
/* @__PURE__ */ (0,
|
|
1429
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: contentId, role: "region", "aria-labelledby": labelId, tabIndex: 0, className: content3, children: item8.content })
|
|
1201
1430
|
] }, item8.value);
|
|
1202
1431
|
}) })
|
|
1203
1432
|
] }),
|
|
1204
|
-
name && agreed.map((v) => /* @__PURE__ */ (0,
|
|
1205
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
1433
|
+
name && agreed.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "hidden", name, value: v }, v)),
|
|
1434
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
1206
1435
|
]
|
|
1207
1436
|
}
|
|
1208
1437
|
);
|
|
@@ -1210,21 +1439,21 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1210
1439
|
);
|
|
1211
1440
|
|
|
1212
1441
|
// src/components/Alert/Alert.tsx
|
|
1213
|
-
var
|
|
1442
|
+
var import_react19 = require("react");
|
|
1214
1443
|
var import_icons5 = require("@bestow-ui/icons");
|
|
1215
1444
|
|
|
1216
1445
|
// src/components/Alert/Alert.css.ts
|
|
1217
|
-
var
|
|
1446
|
+
var import_createRuntimeFn13 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1218
1447
|
var action = "bsmpc0j";
|
|
1219
|
-
var alert = /* @__PURE__ */ (0,
|
|
1448
|
+
var alert = /* @__PURE__ */ (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "bsmpc06", variantClassNames: { variant: { soft: "bsmpc07", outline: "bsmpc08", solid: "bsmpc09" }, color: { primary: "bsmpc0a", neutral: "bsmpc0b", danger: "bsmpc0c", success: "bsmpc0d", warning: "bsmpc0e" } }, defaultVariants: { variant: "soft", color: "primary" }, compoundVariants: [] });
|
|
1220
1449
|
var closeButton2 = "bsmpc0k";
|
|
1221
1450
|
var content4 = "bsmpc0g";
|
|
1222
1451
|
var description2 = "bsmpc0i";
|
|
1223
|
-
var
|
|
1452
|
+
var icon3 = "bsmpc0f";
|
|
1224
1453
|
var title2 = "bsmpc0h";
|
|
1225
1454
|
|
|
1226
1455
|
// src/components/Alert/Alert.tsx
|
|
1227
|
-
var
|
|
1456
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1228
1457
|
var defaultIcons = {
|
|
1229
1458
|
primary: import_icons5.InfoIcon,
|
|
1230
1459
|
neutral: import_icons5.InfoIcon,
|
|
@@ -1232,7 +1461,7 @@ var defaultIcons = {
|
|
|
1232
1461
|
warning: import_icons5.TriangleAlertIcon,
|
|
1233
1462
|
danger: import_icons5.CircleAlertIcon
|
|
1234
1463
|
};
|
|
1235
|
-
var Alert = /* @__PURE__ */ (0,
|
|
1464
|
+
var Alert = /* @__PURE__ */ (0, import_react19.forwardRef)(function Alert2({
|
|
1236
1465
|
variant,
|
|
1237
1466
|
color = "primary",
|
|
1238
1467
|
title: title6,
|
|
@@ -1247,34 +1476,34 @@ var Alert = /* @__PURE__ */ (0, import_react12.forwardRef)(function Alert2({
|
|
|
1247
1476
|
const m = useMessages();
|
|
1248
1477
|
const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
|
|
1249
1478
|
const DefaultIcon = defaultIcons[color];
|
|
1250
|
-
const iconNode = icon7 === void 0 ? /* @__PURE__ */ (0,
|
|
1251
|
-
return /* @__PURE__ */ (0,
|
|
1252
|
-
iconNode !== false && iconNode !== null && /* @__PURE__ */ (0,
|
|
1253
|
-
/* @__PURE__ */ (0,
|
|
1254
|
-
title6 && /* @__PURE__ */ (0,
|
|
1255
|
-
children && /* @__PURE__ */ (0,
|
|
1479
|
+
const iconNode = icon7 === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DefaultIcon, { size: 18 }) : icon7;
|
|
1480
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
|
|
1481
|
+
iconNode !== false && iconNode !== null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: icon3, "aria-hidden": true, children: iconNode }),
|
|
1482
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: content4, children: [
|
|
1483
|
+
title6 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: title2, children: title6 }),
|
|
1484
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: description2, children })
|
|
1256
1485
|
] }),
|
|
1257
|
-
action3 && /* @__PURE__ */ (0,
|
|
1258
|
-
onClose && /* @__PURE__ */ (0,
|
|
1486
|
+
action3 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: action, children: action3 }),
|
|
1487
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: closeButton2, "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons5.XIcon, { size: 16 }) })
|
|
1259
1488
|
] });
|
|
1260
1489
|
});
|
|
1261
1490
|
|
|
1262
1491
|
// src/components/AmountInput/AmountInput.tsx
|
|
1263
|
-
var
|
|
1492
|
+
var import_react22 = require("react");
|
|
1264
1493
|
|
|
1265
1494
|
// src/utils/useFormattedInput.ts
|
|
1266
|
-
var
|
|
1495
|
+
var import_react21 = require("react");
|
|
1267
1496
|
|
|
1268
1497
|
// src/utils/useIsomorphicLayoutEffect.ts
|
|
1269
|
-
var
|
|
1270
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1498
|
+
var import_react20 = require("react");
|
|
1499
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react20.useLayoutEffect : import_react20.useEffect;
|
|
1271
1500
|
|
|
1272
1501
|
// src/utils/useFormattedInput.ts
|
|
1273
|
-
function caretAfter(display, count2,
|
|
1502
|
+
function caretAfter(display, count2, isMeaningful2) {
|
|
1274
1503
|
if (count2 <= 0) return 0;
|
|
1275
1504
|
let seen = 0;
|
|
1276
1505
|
for (let i = 0; i < display.length; i++) {
|
|
1277
|
-
if (
|
|
1506
|
+
if (isMeaningful2(display[i])) seen++;
|
|
1278
1507
|
if (seen === count2) return i + 1;
|
|
1279
1508
|
}
|
|
1280
1509
|
return display.length;
|
|
@@ -1286,18 +1515,18 @@ function useFormattedInput({
|
|
|
1286
1515
|
onValueChange,
|
|
1287
1516
|
sanitize: sanitize4,
|
|
1288
1517
|
format: format2,
|
|
1289
|
-
isMeaningful,
|
|
1518
|
+
isMeaningful: isMeaningful2,
|
|
1290
1519
|
inputRef
|
|
1291
1520
|
}) {
|
|
1292
|
-
const [innerValue, setInnerValue] = (0,
|
|
1521
|
+
const [innerValue, setInnerValue] = (0, import_react21.useState)(() => sanitize4(defaultValue ?? ""));
|
|
1293
1522
|
const raw = isControlled ? sanitize4(value4 ?? "") : innerValue;
|
|
1294
1523
|
const display = format2(raw);
|
|
1295
|
-
const pendingCaret = (0,
|
|
1524
|
+
const pendingCaret = (0, import_react21.useRef)(null);
|
|
1296
1525
|
useIsomorphicLayoutEffect(() => {
|
|
1297
|
-
const
|
|
1298
|
-
if (pendingCaret.current === null || !
|
|
1299
|
-
const position = caretAfter(
|
|
1300
|
-
|
|
1526
|
+
const input6 = inputRef.current;
|
|
1527
|
+
if (pendingCaret.current === null || !input6 || document.activeElement !== input6) return;
|
|
1528
|
+
const position = caretAfter(input6.value, pendingCaret.current, isMeaningful2);
|
|
1529
|
+
input6.setSelectionRange(position, position);
|
|
1301
1530
|
pendingCaret.current = null;
|
|
1302
1531
|
});
|
|
1303
1532
|
const commit = (next, caretCount) => {
|
|
@@ -1312,17 +1541,17 @@ function useFormattedInput({
|
|
|
1312
1541
|
commit(next, Math.min(before.length, next.length));
|
|
1313
1542
|
};
|
|
1314
1543
|
const onKeyDown = (event) => {
|
|
1315
|
-
const
|
|
1316
|
-
const { selectionStart: start, selectionEnd:
|
|
1317
|
-
if (start === null || start !==
|
|
1318
|
-
const countBefore = (text2) => [...text2].filter(
|
|
1319
|
-
if (event.key === "Backspace" && start > 0 && !
|
|
1320
|
-
const index = countBefore(
|
|
1544
|
+
const input6 = event.currentTarget;
|
|
1545
|
+
const { selectionStart: start, selectionEnd: end2 } = input6;
|
|
1546
|
+
if (start === null || start !== end2) return;
|
|
1547
|
+
const countBefore = (text2) => [...text2].filter(isMeaningful2).length;
|
|
1548
|
+
if (event.key === "Backspace" && start > 0 && !isMeaningful2(input6.value[start - 1])) {
|
|
1549
|
+
const index = countBefore(input6.value.slice(0, start)) - 1;
|
|
1321
1550
|
if (index < 0) return;
|
|
1322
1551
|
event.preventDefault();
|
|
1323
1552
|
commit(raw.slice(0, index) + raw.slice(index + 1), index);
|
|
1324
|
-
} else if (event.key === "Delete" && start <
|
|
1325
|
-
const index = countBefore(
|
|
1553
|
+
} else if (event.key === "Delete" && start < input6.value.length && !isMeaningful2(input6.value[start])) {
|
|
1554
|
+
const index = countBefore(input6.value.slice(0, start));
|
|
1326
1555
|
if (index >= raw.length) return;
|
|
1327
1556
|
event.preventDefault();
|
|
1328
1557
|
commit(raw.slice(0, index) + raw.slice(index + 1), index);
|
|
@@ -1336,10 +1565,10 @@ function useFormattedInput({
|
|
|
1336
1565
|
var input3 = "_70qkav0";
|
|
1337
1566
|
|
|
1338
1567
|
// src/components/AmountInput/AmountInput.tsx
|
|
1339
|
-
var
|
|
1568
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1340
1569
|
var MAX_DIGITS = 15;
|
|
1341
1570
|
var isDigit = (char) => /\d/.test(char);
|
|
1342
|
-
var AmountInput = /* @__PURE__ */ (0,
|
|
1571
|
+
var AmountInput = /* @__PURE__ */ (0, import_react22.forwardRef)(
|
|
1343
1572
|
function AmountInput2(props, ref) {
|
|
1344
1573
|
const {
|
|
1345
1574
|
value: value4,
|
|
@@ -1355,12 +1584,12 @@ var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
|
1355
1584
|
className,
|
|
1356
1585
|
...rest
|
|
1357
1586
|
} = props;
|
|
1358
|
-
const inputRef = (0,
|
|
1587
|
+
const inputRef = (0, import_react22.useRef)(null);
|
|
1359
1588
|
const m = useMessages();
|
|
1360
|
-
const
|
|
1589
|
+
const unit2 = unitProp ?? m.currencyUnit ?? "\uC6D0";
|
|
1361
1590
|
const label6 = labelProp ?? m.amount ?? "\uAE08\uC561";
|
|
1362
|
-
const sanitize4 = (
|
|
1363
|
-
let digits =
|
|
1591
|
+
const sanitize4 = (input6) => {
|
|
1592
|
+
let digits = input6.replace(/\D/g, "").replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS);
|
|
1364
1593
|
if (max !== void 0 && digits && Number(digits) > max) digits = String(Math.floor(max));
|
|
1365
1594
|
return digits;
|
|
1366
1595
|
};
|
|
@@ -1375,8 +1604,8 @@ var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
|
1375
1604
|
isMeaningful: isDigit,
|
|
1376
1605
|
inputRef
|
|
1377
1606
|
});
|
|
1378
|
-
const reading = showKoreanAmount && field3.raw !== "" ? formatKoreanAmount(Number(field3.raw),
|
|
1379
|
-
return /* @__PURE__ */ (0,
|
|
1607
|
+
const reading = showKoreanAmount && field3.raw !== "" ? formatKoreanAmount(Number(field3.raw), unit2) : null;
|
|
1608
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1380
1609
|
TextField,
|
|
1381
1610
|
{
|
|
1382
1611
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -1389,10 +1618,10 @@ var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
|
1389
1618
|
field3.onKeyDown(event);
|
|
1390
1619
|
onKeyDown?.(event);
|
|
1391
1620
|
},
|
|
1392
|
-
endAdornment:
|
|
1393
|
-
helperText: reading && helperText3 ? /* @__PURE__ */ (0,
|
|
1621
|
+
endAdornment: unit2,
|
|
1622
|
+
helperText: reading && helperText3 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
|
|
1394
1623
|
reading,
|
|
1395
|
-
/* @__PURE__ */ (0,
|
|
1624
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("br", {}),
|
|
1396
1625
|
helperText3
|
|
1397
1626
|
] }) : reading ?? helperText3,
|
|
1398
1627
|
className: cx(input3, className),
|
|
@@ -1405,68 +1634,51 @@ var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
|
1405
1634
|
// src/components/Avatar/Avatar.tsx
|
|
1406
1635
|
var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
|
|
1407
1636
|
var import_icons6 = require("@bestow-ui/icons");
|
|
1408
|
-
var
|
|
1637
|
+
var import_react23 = require("react");
|
|
1409
1638
|
|
|
1410
1639
|
// src/components/Avatar/Avatar.css.ts
|
|
1411
|
-
var
|
|
1640
|
+
var import_createRuntimeFn14 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1412
1641
|
var fallback = "_1fd2kp27";
|
|
1413
1642
|
var image = "_1fd2kp26";
|
|
1414
|
-
var
|
|
1643
|
+
var root6 = /* @__PURE__ */ (0, import_createRuntimeFn14.createRuntimeFn)({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
|
|
1415
1644
|
|
|
1416
1645
|
// src/components/Avatar/Avatar.tsx
|
|
1417
|
-
var
|
|
1646
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1418
1647
|
function getInitials(name) {
|
|
1419
1648
|
const [a = "", b = ""] = name.trim().split(/\s+/);
|
|
1420
1649
|
const first = (word) => Array.from(word)[0] ?? "";
|
|
1421
1650
|
return (first(a) + first(b)).toUpperCase();
|
|
1422
1651
|
}
|
|
1423
|
-
var Avatar = /* @__PURE__ */ (0,
|
|
1652
|
+
var Avatar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
|
|
1424
1653
|
const label6 = alt ?? name;
|
|
1425
1654
|
const a11y = label6 ? { role: "img", "aria-label": label6 } : { "aria-hidden": true };
|
|
1426
1655
|
const initials = name ? getInitials(name) : "";
|
|
1427
|
-
return /* @__PURE__ */ (0,
|
|
1428
|
-
src && /* @__PURE__ */ (0,
|
|
1429
|
-
/* @__PURE__ */ (0,
|
|
1430
|
-
] });
|
|
1431
|
-
});
|
|
1432
|
-
|
|
1433
|
-
// src/components/Badge/Badge.tsx
|
|
1434
|
-
var import_react17 = require("react");
|
|
1435
|
-
|
|
1436
|
-
// src/components/Badge/Badge.css.ts
|
|
1437
|
-
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1438
|
-
var badge = /* @__PURE__ */ (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb", warning: "_1295cfnc" }, size: { sm: "_1295cfnd", md: "_1295cfne", lg: "_1295cfnf" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
|
|
1439
|
-
var icon3 = "_1295cfng";
|
|
1440
|
-
|
|
1441
|
-
// src/components/Badge/Badge.tsx
|
|
1442
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1443
|
-
var Badge = /* @__PURE__ */ (0, import_react17.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
1444
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
1445
|
-
startIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: icon3, children: startIcon }),
|
|
1446
|
-
children
|
|
1656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(RadixAvatar.Root, { ref, className: cx(root6({ size, shape }), className), ...a11y, ...rest, children: [
|
|
1657
|
+
src && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixAvatar.Image, { src, alt: "", className: image }),
|
|
1658
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons6.UserIcon, { size: "60%" })) })
|
|
1447
1659
|
] });
|
|
1448
1660
|
});
|
|
1449
1661
|
|
|
1450
1662
|
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
1451
|
-
var
|
|
1663
|
+
var import_react25 = require("react");
|
|
1452
1664
|
var import_icons8 = require("@bestow-ui/icons");
|
|
1453
1665
|
|
|
1454
1666
|
// src/components/Link/Link.tsx
|
|
1455
1667
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
1456
|
-
var
|
|
1668
|
+
var import_react24 = require("react");
|
|
1457
1669
|
var import_icons7 = require("@bestow-ui/icons");
|
|
1458
1670
|
|
|
1459
1671
|
// src/components/Link/Link.css.ts
|
|
1460
|
-
var
|
|
1672
|
+
var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1461
1673
|
var externalIcon = "_1t4hlp6";
|
|
1462
|
-
var link = /* @__PURE__ */ (0,
|
|
1674
|
+
var link = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1t4hlp0", variantClassNames: { color: { primary: "_1t4hlp1", neutral: "_1t4hlp2", inherit: "_1t4hlp3" }, underline: { always: "_1t4hlp4", hover: "_1t4hlp5" } }, defaultVariants: { color: "primary", underline: "always" }, compoundVariants: [] });
|
|
1463
1675
|
|
|
1464
1676
|
// src/components/Link/Link.tsx
|
|
1465
|
-
var
|
|
1677
|
+
var import_jsx_runtime22 = (
|
|
1466
1678
|
// Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
|
|
1467
1679
|
require("react/jsx-runtime")
|
|
1468
1680
|
);
|
|
1469
|
-
var Link = /* @__PURE__ */ (0,
|
|
1681
|
+
var Link = /* @__PURE__ */ (0, import_react24.forwardRef)(function Link2({
|
|
1470
1682
|
as: Component = "a",
|
|
1471
1683
|
asChild,
|
|
1472
1684
|
color,
|
|
@@ -1483,9 +1695,9 @@ var Link = /* @__PURE__ */ (0, import_react18.forwardRef)(function Link2({
|
|
|
1483
1695
|
const externalLabel = externalLabelProp ?? m.newWindow ?? "(\uC0C8 \uCC3D)";
|
|
1484
1696
|
const linkClassName = cx(link({ color, underline }), className);
|
|
1485
1697
|
if (asChild) {
|
|
1486
|
-
return /* @__PURE__ */ (0,
|
|
1698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_slot.Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children });
|
|
1487
1699
|
}
|
|
1488
|
-
return /* @__PURE__ */ (0,
|
|
1700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1489
1701
|
Component,
|
|
1490
1702
|
{
|
|
1491
1703
|
ref,
|
|
@@ -1495,10 +1707,10 @@ var Link = /* @__PURE__ */ (0, import_react18.forwardRef)(function Link2({
|
|
|
1495
1707
|
...rest,
|
|
1496
1708
|
children: [
|
|
1497
1709
|
children,
|
|
1498
|
-
external && /* @__PURE__ */ (0,
|
|
1710
|
+
external && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
1499
1711
|
" ",
|
|
1500
|
-
/* @__PURE__ */ (0,
|
|
1501
|
-
/* @__PURE__ */ (0,
|
|
1712
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons7.ExternalLinkIcon, { className: externalIcon }),
|
|
1713
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: visuallyHidden, children: externalLabel })
|
|
1502
1714
|
] })
|
|
1503
1715
|
]
|
|
1504
1716
|
}
|
|
@@ -1513,26 +1725,26 @@ var list2 = "_18t8ztt0";
|
|
|
1513
1725
|
var separator = "_18t8ztt4";
|
|
1514
1726
|
|
|
1515
1727
|
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
1516
|
-
var
|
|
1517
|
-
var Breadcrumb = /* @__PURE__ */ (0,
|
|
1728
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1729
|
+
var Breadcrumb = /* @__PURE__ */ (0, import_react25.forwardRef)(function Breadcrumb2({ items: items2, linkAs, separator: separator3, "aria-label": ariaLabelProp, className, ...rest }, ref) {
|
|
1518
1730
|
const m = useMessages();
|
|
1519
1731
|
const ariaLabel = ariaLabelProp ?? m.breadcrumb ?? "\uC774\uB3D9 \uACBD\uB85C";
|
|
1520
|
-
const sep = separator3 ?? /* @__PURE__ */ (0,
|
|
1521
|
-
return /* @__PURE__ */ (0,
|
|
1732
|
+
const sep = separator3 ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons8.ChevronRightIcon, { size: 14 });
|
|
1733
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ol", { className: list2, children: items2.map((item8, index) => {
|
|
1522
1734
|
const isCurrent = index === items2.length - 1;
|
|
1523
|
-
return /* @__PURE__ */ (0,
|
|
1524
|
-
index > 0 && /* @__PURE__ */ (0,
|
|
1525
|
-
isCurrent || item8.href === void 0 ? /* @__PURE__ */ (0,
|
|
1735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: item3, children: [
|
|
1736
|
+
index > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: separator, "aria-hidden": true, children: sep }),
|
|
1737
|
+
isCurrent || item8.href === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: isCurrent ? current : void 0, "aria-current": isCurrent ? "page" : void 0, children: item8.label }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Link, { as: linkAs, href: item8.href, color: "neutral", underline: "hover", className: link2, children: item8.label })
|
|
1526
1738
|
] }, index);
|
|
1527
1739
|
}) }) });
|
|
1528
1740
|
});
|
|
1529
1741
|
|
|
1530
1742
|
// src/components/BusinessNumberInput/BusinessNumberInput.tsx
|
|
1531
|
-
var
|
|
1532
|
-
var
|
|
1533
|
-
var sanitize = (
|
|
1743
|
+
var import_react26 = require("react");
|
|
1744
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1745
|
+
var sanitize = (input6) => input6.replace(/\D/g, "").slice(0, 10);
|
|
1534
1746
|
var isDigit2 = (char) => /\d/.test(char);
|
|
1535
|
-
var BusinessNumberInput = /* @__PURE__ */ (0,
|
|
1747
|
+
var BusinessNumberInput = /* @__PURE__ */ (0, import_react26.forwardRef)(
|
|
1536
1748
|
function BusinessNumberInput2(props, ref) {
|
|
1537
1749
|
const {
|
|
1538
1750
|
value: value4,
|
|
@@ -1548,12 +1760,12 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react20.forwardRef)(
|
|
|
1548
1760
|
onKeyDown,
|
|
1549
1761
|
...rest
|
|
1550
1762
|
} = props;
|
|
1551
|
-
const inputRef = (0,
|
|
1763
|
+
const inputRef = (0, import_react26.useRef)(null);
|
|
1552
1764
|
const m = useMessages();
|
|
1553
1765
|
const invalidText = invalidTextProp ?? m.businessNumberInvalid ?? "\uC62C\uBC14\uB978 \uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638\uAC00 \uC544\uB2C8\uC5D0\uC694. \uBC88\uD638\uB97C \uB2E4\uC2DC \uD655\uC778\uD574 \uC8FC\uC138\uC694.";
|
|
1554
1766
|
const label6 = labelProp ?? m.businessNumber ?? "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638";
|
|
1555
1767
|
const incompleteText = m.businessNumberIncomplete ?? "10\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
|
|
1556
|
-
const [touched, setTouched] = (0,
|
|
1768
|
+
const [touched, setTouched] = (0, import_react26.useState)(false);
|
|
1557
1769
|
const field3 = useFormattedInput({
|
|
1558
1770
|
isControlled: "value" in props,
|
|
1559
1771
|
value: value4,
|
|
@@ -1567,7 +1779,7 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react20.forwardRef)(
|
|
|
1567
1779
|
const complete = field3.raw.length === 10;
|
|
1568
1780
|
const autoInvalid = validate && field3.raw.length > 0 && (complete ? !isValidBusinessNumber(field3.raw) : touched);
|
|
1569
1781
|
const showAuto = autoInvalid && error === void 0;
|
|
1570
|
-
return /* @__PURE__ */ (0,
|
|
1782
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1571
1783
|
TextField,
|
|
1572
1784
|
{
|
|
1573
1785
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -1593,15 +1805,15 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react20.forwardRef)(
|
|
|
1593
1805
|
);
|
|
1594
1806
|
|
|
1595
1807
|
// src/components/Calendar/Calendar.tsx
|
|
1596
|
-
var
|
|
1808
|
+
var import_react29 = require("react");
|
|
1597
1809
|
var import_icons9 = require("@bestow-ui/icons");
|
|
1598
1810
|
|
|
1599
1811
|
// src/utils/useIsClient.ts
|
|
1600
|
-
var
|
|
1812
|
+
var import_react27 = require("react");
|
|
1601
1813
|
var subscribeNothing = () => () => {
|
|
1602
1814
|
};
|
|
1603
1815
|
function useIsClient() {
|
|
1604
|
-
return (0,
|
|
1816
|
+
return (0, import_react27.useSyncExternalStore)(
|
|
1605
1817
|
subscribeNothing,
|
|
1606
1818
|
() => true,
|
|
1607
1819
|
() => false
|
|
@@ -1609,16 +1821,16 @@ function useIsClient() {
|
|
|
1609
1821
|
}
|
|
1610
1822
|
|
|
1611
1823
|
// src/components/IconButton/IconButton.tsx
|
|
1612
|
-
var
|
|
1824
|
+
var import_react28 = require("react");
|
|
1613
1825
|
|
|
1614
1826
|
// src/components/IconButton/IconButton.css.ts
|
|
1615
|
-
var
|
|
1616
|
-
var iconButton = /* @__PURE__ */ (0,
|
|
1827
|
+
var import_createRuntimeFn16 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1828
|
+
var iconButton = /* @__PURE__ */ (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1617
1829
|
|
|
1618
1830
|
// src/components/IconButton/IconButton.tsx
|
|
1619
|
-
var
|
|
1620
|
-
var IconButton = /* @__PURE__ */ (0,
|
|
1621
|
-
return /* @__PURE__ */ (0,
|
|
1831
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1832
|
+
var IconButton = /* @__PURE__ */ (0, import_react28.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, className, children, ...rest }, ref) {
|
|
1833
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1622
1834
|
Button,
|
|
1623
1835
|
{
|
|
1624
1836
|
ref,
|
|
@@ -1637,14 +1849,14 @@ var IconButton = /* @__PURE__ */ (0, import_react22.forwardRef)(function IconBut
|
|
|
1637
1849
|
var cell = "_1qyq67b5";
|
|
1638
1850
|
var day = "_1qyq67b6";
|
|
1639
1851
|
var grid = "_1qyq67b3";
|
|
1640
|
-
var
|
|
1852
|
+
var header5 = "_1qyq67b1";
|
|
1641
1853
|
var heading = "_1qyq67b2";
|
|
1642
|
-
var
|
|
1854
|
+
var root7 = "_1qyq67b0";
|
|
1643
1855
|
var weekday = "_1qyq67b4";
|
|
1644
1856
|
|
|
1645
1857
|
// src/components/Calendar/Calendar.tsx
|
|
1646
|
-
var
|
|
1647
|
-
var Calendar = /* @__PURE__ */ (0,
|
|
1858
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1859
|
+
var Calendar = /* @__PURE__ */ (0, import_react29.forwardRef)(function Calendar2(props, ref) {
|
|
1648
1860
|
const {
|
|
1649
1861
|
value: value4,
|
|
1650
1862
|
defaultValue,
|
|
@@ -1664,10 +1876,10 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1664
1876
|
const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
|
|
1665
1877
|
const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
|
|
1666
1878
|
const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
|
|
1667
|
-
const headingId = (0,
|
|
1668
|
-
const gridRef = (0,
|
|
1879
|
+
const headingId = (0, import_react29.useId)();
|
|
1880
|
+
const gridRef = (0, import_react29.useRef)(null);
|
|
1669
1881
|
const isControlled = "value" in props;
|
|
1670
|
-
const [innerValue, setInnerValue] = (0,
|
|
1882
|
+
const [innerValue, setInnerValue] = (0, import_react29.useState)(defaultValue ?? "");
|
|
1671
1883
|
const selected = parseISODate(isControlled ? value4 : innerValue);
|
|
1672
1884
|
const isClient = useIsClient();
|
|
1673
1885
|
const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
|
|
@@ -1679,16 +1891,16 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1679
1891
|
return date;
|
|
1680
1892
|
};
|
|
1681
1893
|
const isDisabled = (date) => minDate !== null && compareDays(date, minDate) < 0 || maxDate !== null && compareDays(date, maxDate) > 0 || !!isDateDisabled?.(date);
|
|
1682
|
-
const [focusedState, setFocused] = (0,
|
|
1894
|
+
const [focusedState, setFocused] = (0, import_react29.useState)(null);
|
|
1683
1895
|
const base = selected ?? today;
|
|
1684
1896
|
const focused = focusedState ?? (base ? clamp(base) : null);
|
|
1685
|
-
const moveFocus = (0,
|
|
1897
|
+
const moveFocus = (0, import_react29.useRef)(initialFocus ?? false);
|
|
1686
1898
|
const selectedIso = selected ? toISODate(selected) : "";
|
|
1687
|
-
(0,
|
|
1899
|
+
(0, import_react29.useEffect)(() => {
|
|
1688
1900
|
const date = parseISODate(selectedIso);
|
|
1689
1901
|
if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
|
|
1690
1902
|
}, [selectedIso]);
|
|
1691
|
-
(0,
|
|
1903
|
+
(0, import_react29.useEffect)(() => {
|
|
1692
1904
|
if (!moveFocus.current || !focused) return;
|
|
1693
1905
|
moveFocus.current = false;
|
|
1694
1906
|
gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
|
|
@@ -1728,36 +1940,36 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1728
1940
|
) : [];
|
|
1729
1941
|
const canPrev = !!visible && (!minDate || compareDays(new Date(visible.getFullYear(), visible.getMonth(), 0), minDate) >= 0);
|
|
1730
1942
|
const canNext = !!visible && (!maxDate || compareDays(new Date(visible.getFullYear(), visible.getMonth() + 1, 1), maxDate) <= 0);
|
|
1731
|
-
return /* @__PURE__ */ (0,
|
|
1732
|
-
/* @__PURE__ */ (0,
|
|
1733
|
-
/* @__PURE__ */ (0,
|
|
1943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, className: cx(root7, className), children: [
|
|
1944
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: header5, children: [
|
|
1945
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1734
1946
|
IconButton,
|
|
1735
1947
|
{
|
|
1736
1948
|
"aria-label": prevMonthLabel,
|
|
1737
1949
|
size: "sm",
|
|
1738
1950
|
disabled: !canPrev,
|
|
1739
1951
|
onClick: () => visible && setFocused(clamp(addMonths(visible, -1))),
|
|
1740
|
-
children: /* @__PURE__ */ (0,
|
|
1952
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons9.ChevronLeftIcon, {})
|
|
1741
1953
|
}
|
|
1742
1954
|
),
|
|
1743
|
-
/* @__PURE__ */ (0,
|
|
1744
|
-
/* @__PURE__ */ (0,
|
|
1955
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { id: headingId, className: heading, "aria-live": "polite", children: visible && (m.monthTitle?.(visible.getFullYear(), visible.getMonth() + 1) ?? `${visible.getFullYear()}\uB144 ${visible.getMonth() + 1}\uC6D4`) }),
|
|
1956
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1745
1957
|
IconButton,
|
|
1746
1958
|
{
|
|
1747
1959
|
"aria-label": nextMonthLabel,
|
|
1748
1960
|
size: "sm",
|
|
1749
1961
|
disabled: !canNext,
|
|
1750
1962
|
onClick: () => visible && setFocused(clamp(addMonths(visible, 1))),
|
|
1751
|
-
children: /* @__PURE__ */ (0,
|
|
1963
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons9.ChevronRightIcon, {})
|
|
1752
1964
|
}
|
|
1753
1965
|
)
|
|
1754
1966
|
] }),
|
|
1755
|
-
/* @__PURE__ */ (0,
|
|
1756
|
-
/* @__PURE__ */ (0,
|
|
1757
|
-
/* @__PURE__ */ (0,
|
|
1967
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
|
|
1968
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", { children: weekdaysShort.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("th", { scope: "col", abbr: weekdaysLong[index], className: weekday, "data-weekday": index, children: name }, index)) }) }),
|
|
1969
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tbody", { children: weeks.map((week) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", { children: week.map((date) => {
|
|
1758
1970
|
const iso = toISODate(date);
|
|
1759
1971
|
if (!visible || !isSameMonth(date, visible))
|
|
1760
|
-
return /* @__PURE__ */ (0,
|
|
1972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("td", { role: "gridcell", className: cell }, iso);
|
|
1761
1973
|
const isSelected = isSameDay(date, selected);
|
|
1762
1974
|
const isToday = isSameDay(date, today);
|
|
1763
1975
|
const holiday = !!isHoliday?.(date);
|
|
@@ -1767,7 +1979,7 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1767
1979
|
holiday && (m.holiday ?? "\uACF5\uD734\uC77C"),
|
|
1768
1980
|
isToday && (m.today ?? "\uC624\uB298")
|
|
1769
1981
|
].filter(Boolean).join(", ");
|
|
1770
|
-
return /* @__PURE__ */ (0,
|
|
1982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("td", { role: "gridcell", "aria-selected": isSelected, className: cell, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1771
1983
|
"button",
|
|
1772
1984
|
{
|
|
1773
1985
|
type: "button",
|
|
@@ -1790,34 +2002,9 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1790
2002
|
] });
|
|
1791
2003
|
});
|
|
1792
2004
|
|
|
1793
|
-
// src/components/Card/Card.tsx
|
|
1794
|
-
var import_react24 = require("react");
|
|
1795
|
-
|
|
1796
|
-
// src/components/Card/Card.css.ts
|
|
1797
|
-
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1798
|
-
var body2 = "dnuf1u9";
|
|
1799
|
-
var card = /* @__PURE__ */ (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "dnuf1u0", variantClassNames: { variant: { outline: "dnuf1u1", elevated: "dnuf1u2", soft: "dnuf1u3" }, padding: { none: "dnuf1u4", sm: "dnuf1u5", md: "dnuf1u6", lg: "dnuf1u7" } }, defaultVariants: { variant: "outline", padding: "md" }, compoundVariants: [] });
|
|
1800
|
-
var footer2 = "dnuf1ua";
|
|
1801
|
-
var header4 = "dnuf1u8";
|
|
1802
|
-
|
|
1803
|
-
// src/components/Card/Card.tsx
|
|
1804
|
-
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1805
|
-
var Card = /* @__PURE__ */ (0, import_react24.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
1806
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
1807
|
-
});
|
|
1808
|
-
var CardHeader = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
|
|
1809
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(header4, className), ...rest });
|
|
1810
|
-
});
|
|
1811
|
-
var CardBody = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardBody2({ className, ...rest }, ref) {
|
|
1812
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(body2, className), ...rest });
|
|
1813
|
-
});
|
|
1814
|
-
var CardFooter = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
|
|
1815
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(footer2, className), ...rest });
|
|
1816
|
-
});
|
|
1817
|
-
|
|
1818
2005
|
// src/components/Combobox/Combobox.tsx
|
|
1819
2006
|
var Popover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
1820
|
-
var
|
|
2007
|
+
var import_react30 = require("react");
|
|
1821
2008
|
var import_icons10 = require("@bestow-ui/icons");
|
|
1822
2009
|
|
|
1823
2010
|
// src/components/Select/Select.css.ts
|
|
@@ -1826,7 +2013,7 @@ var icon4 = "_1kx81e82";
|
|
|
1826
2013
|
var item4 = "_1kx81e85";
|
|
1827
2014
|
var itemIndicator = "_1kx81e86";
|
|
1828
2015
|
var trigger2 = "_1kx81e80";
|
|
1829
|
-
var
|
|
2016
|
+
var value2 = "_1kx81e81";
|
|
1830
2017
|
var viewport = "_1kx81e84";
|
|
1831
2018
|
|
|
1832
2019
|
// src/components/Combobox/Combobox.css.ts
|
|
@@ -1836,9 +2023,9 @@ var empty = "c2pbq74";
|
|
|
1836
2023
|
var toggle2 = "c2pbq71 c2pbq70";
|
|
1837
2024
|
|
|
1838
2025
|
// src/components/Combobox/Combobox.tsx
|
|
1839
|
-
var
|
|
2026
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1840
2027
|
var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
|
|
1841
|
-
var Combobox = /* @__PURE__ */ (0,
|
|
2028
|
+
var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2(props, ref) {
|
|
1842
2029
|
const {
|
|
1843
2030
|
options,
|
|
1844
2031
|
value: value4,
|
|
@@ -1866,23 +2053,23 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
1866
2053
|
const emptyMessage = emptyMessageProp ?? m.noResults ?? "\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694";
|
|
1867
2054
|
const toggleLabel = toggleLabelProp ?? m.openList ?? "\uBAA9\uB85D \uC5F4\uAE30";
|
|
1868
2055
|
const clearLabel = clearLabelProp ?? m.clearSelection ?? "\uC120\uD0DD \uC9C0\uC6B0\uAE30";
|
|
1869
|
-
const generatedId = (0,
|
|
2056
|
+
const generatedId = (0, import_react30.useId)();
|
|
1870
2057
|
const inputId = id ?? generatedId;
|
|
1871
2058
|
const labelId = `${inputId}-label`;
|
|
1872
2059
|
const listId = `${inputId}-listbox`;
|
|
1873
2060
|
const helperId = helperText3 ? `${inputId}-helper` : void 0;
|
|
1874
2061
|
const optionId = (index) => `${inputId}-option-${index}`;
|
|
1875
2062
|
const portal2 = usePortalProps();
|
|
1876
|
-
const inputRef = (0,
|
|
1877
|
-
const anchorRef = (0,
|
|
2063
|
+
const inputRef = (0, import_react30.useRef)(null);
|
|
2064
|
+
const anchorRef = (0, import_react30.useRef)(null);
|
|
1878
2065
|
const isControlled = "value" in props;
|
|
1879
|
-
const [innerValue, setInnerValue] = (0,
|
|
2066
|
+
const [innerValue, setInnerValue] = (0, import_react30.useState)(defaultValue);
|
|
1880
2067
|
const selectedValue = isControlled ? value4 : innerValue;
|
|
1881
2068
|
const selectedOption = options.find((o) => o.value === selectedValue);
|
|
1882
|
-
const [open, setOpen] = (0,
|
|
1883
|
-
const [query, setQuery] = (0,
|
|
1884
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
1885
|
-
const filtered = (0,
|
|
2069
|
+
const [open, setOpen] = (0, import_react30.useState)(false);
|
|
2070
|
+
const [query, setQuery] = (0, import_react30.useState)(null);
|
|
2071
|
+
const [activeIndex, setActiveIndex] = (0, import_react30.useState)(-1);
|
|
2072
|
+
const filtered = (0, import_react30.useMemo)(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
|
|
1886
2073
|
const inputText = query ?? selectedOption?.label ?? "";
|
|
1887
2074
|
const firstEnabled = (list5, from = 0, step = 1) => {
|
|
1888
2075
|
for (let i = from; i >= 0 && i < list5.length; i += step) if (!list5[i].disabled) return i;
|
|
@@ -1957,26 +2144,26 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
1957
2144
|
break;
|
|
1958
2145
|
}
|
|
1959
2146
|
};
|
|
1960
|
-
(0,
|
|
2147
|
+
(0, import_react30.useEffect)(() => {
|
|
1961
2148
|
if (!open || activeIndex < 0) return;
|
|
1962
2149
|
document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
|
|
1963
2150
|
}, [open, activeIndex]);
|
|
1964
2151
|
const hasOptions = filtered.length > 0;
|
|
1965
|
-
return /* @__PURE__ */ (0,
|
|
1966
|
-
label6 && /* @__PURE__ */ (0,
|
|
2152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
2153
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { id: labelId, htmlFor: inputId, className: label2, children: [
|
|
1967
2154
|
label6,
|
|
1968
|
-
required && /* @__PURE__ */ (0,
|
|
2155
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
1969
2156
|
] }),
|
|
1970
|
-
/* @__PURE__ */ (0,
|
|
1971
|
-
/* @__PURE__ */ (0,
|
|
2157
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
|
|
2158
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1972
2159
|
"div",
|
|
1973
2160
|
{
|
|
1974
2161
|
ref: anchorRef,
|
|
1975
|
-
className: cx(
|
|
2162
|
+
className: cx(root4({ size, fullWidth }), className),
|
|
1976
2163
|
"data-invalid": error || void 0,
|
|
1977
2164
|
"data-disabled": disabled || void 0,
|
|
1978
2165
|
children: [
|
|
1979
|
-
/* @__PURE__ */ (0,
|
|
2166
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1980
2167
|
"input",
|
|
1981
2168
|
{
|
|
1982
2169
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -2003,7 +2190,7 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2003
2190
|
className: input
|
|
2004
2191
|
}
|
|
2005
2192
|
),
|
|
2006
|
-
clearable && selectedOption && !disabled && /* @__PURE__ */ (0,
|
|
2193
|
+
clearable && selectedOption && !disabled && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2007
2194
|
"button",
|
|
2008
2195
|
{
|
|
2009
2196
|
type: "button",
|
|
@@ -2016,10 +2203,10 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2016
2203
|
reset();
|
|
2017
2204
|
inputRef.current?.focus();
|
|
2018
2205
|
},
|
|
2019
|
-
children: /* @__PURE__ */ (0,
|
|
2206
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons10.XIcon, { size: 16 })
|
|
2020
2207
|
}
|
|
2021
2208
|
),
|
|
2022
|
-
/* @__PURE__ */ (0,
|
|
2209
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2023
2210
|
"button",
|
|
2024
2211
|
{
|
|
2025
2212
|
type: "button",
|
|
@@ -2034,13 +2221,13 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2034
2221
|
else openList(options);
|
|
2035
2222
|
inputRef.current?.focus();
|
|
2036
2223
|
},
|
|
2037
|
-
children: /* @__PURE__ */ (0,
|
|
2224
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons10.ChevronDownIcon, { size: 16 })
|
|
2038
2225
|
}
|
|
2039
2226
|
)
|
|
2040
2227
|
]
|
|
2041
2228
|
}
|
|
2042
2229
|
) }),
|
|
2043
|
-
/* @__PURE__ */ (0,
|
|
2230
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2044
2231
|
Popover.Content,
|
|
2045
2232
|
{
|
|
2046
2233
|
role: "presentation",
|
|
@@ -2055,7 +2242,7 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2055
2242
|
onInteractOutside: (event) => {
|
|
2056
2243
|
if (anchorRef.current?.contains(event.target)) event.preventDefault();
|
|
2057
2244
|
},
|
|
2058
|
-
children: hasOptions ? /* @__PURE__ */ (0,
|
|
2245
|
+
children: hasOptions ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2059
2246
|
"div",
|
|
2060
2247
|
{
|
|
2061
2248
|
id: listId,
|
|
@@ -2067,7 +2254,7 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2067
2254
|
return (
|
|
2068
2255
|
// aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
|
|
2069
2256
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
|
|
2070
|
-
/* @__PURE__ */ (0,
|
|
2257
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2071
2258
|
"div",
|
|
2072
2259
|
{
|
|
2073
2260
|
id: optionId(index),
|
|
@@ -2083,7 +2270,7 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2083
2270
|
onClick: () => select(option2),
|
|
2084
2271
|
children: [
|
|
2085
2272
|
option2.label,
|
|
2086
|
-
isSelected && /* @__PURE__ */ (0,
|
|
2273
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons10.CheckIcon, { size: 16 }) })
|
|
2087
2274
|
]
|
|
2088
2275
|
},
|
|
2089
2276
|
option2.value
|
|
@@ -2091,33 +2278,33 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2091
2278
|
);
|
|
2092
2279
|
})
|
|
2093
2280
|
}
|
|
2094
|
-
) : /* @__PURE__ */ (0,
|
|
2281
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: empty, role: "status", children: emptyMessage })
|
|
2095
2282
|
}
|
|
2096
2283
|
) })
|
|
2097
2284
|
] }),
|
|
2098
|
-
name && /* @__PURE__ */ (0,
|
|
2099
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
2285
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { type: "hidden", name, value: selectedValue ?? "" }),
|
|
2286
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
2100
2287
|
] });
|
|
2101
2288
|
});
|
|
2102
2289
|
|
|
2103
2290
|
// src/components/DatePicker/DatePicker.tsx
|
|
2104
|
-
var
|
|
2291
|
+
var import_react32 = require("react");
|
|
2105
2292
|
var import_icons12 = require("@bestow-ui/icons");
|
|
2106
2293
|
|
|
2107
2294
|
// src/components/Popover/Popover.tsx
|
|
2108
2295
|
var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
2109
2296
|
var import_icons11 = require("@bestow-ui/icons");
|
|
2110
|
-
var
|
|
2297
|
+
var import_react31 = require("react");
|
|
2111
2298
|
|
|
2112
2299
|
// src/components/Popover/Popover.css.ts
|
|
2113
2300
|
var arrow = "_1j99p8x4";
|
|
2114
2301
|
var closeButton3 = "_1j99p8x3";
|
|
2115
2302
|
var content7 = "_1j99p8x0";
|
|
2116
|
-
var
|
|
2303
|
+
var header6 = "_1j99p8x1";
|
|
2117
2304
|
var title3 = "_1j99p8x2";
|
|
2118
2305
|
|
|
2119
2306
|
// src/components/Popover/Popover.tsx
|
|
2120
|
-
var
|
|
2307
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2121
2308
|
function Popover2({
|
|
2122
2309
|
content: content12,
|
|
2123
2310
|
children,
|
|
@@ -2137,10 +2324,10 @@ function Popover2({
|
|
|
2137
2324
|
}) {
|
|
2138
2325
|
const portal2 = usePortalProps();
|
|
2139
2326
|
const m = useMessages();
|
|
2140
|
-
const titleId = (0,
|
|
2141
|
-
return /* @__PURE__ */ (0,
|
|
2142
|
-
/* @__PURE__ */ (0,
|
|
2143
|
-
/* @__PURE__ */ (0,
|
|
2327
|
+
const titleId = (0, import_react31.useId)();
|
|
2328
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
|
|
2329
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixPopover.Trigger, { asChild: true, children }),
|
|
2330
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2144
2331
|
RadixPopover.Content,
|
|
2145
2332
|
{
|
|
2146
2333
|
side,
|
|
@@ -2153,12 +2340,12 @@ function Popover2({
|
|
|
2153
2340
|
className: cx(portal2.className, content7, className),
|
|
2154
2341
|
style: { ...portal2.style, ...style },
|
|
2155
2342
|
children: [
|
|
2156
|
-
(title6 || showClose) && /* @__PURE__ */ (0,
|
|
2157
|
-
title6 && /* @__PURE__ */ (0,
|
|
2158
|
-
showClose && /* @__PURE__ */ (0,
|
|
2343
|
+
(title6 || showClose) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: header6, children: [
|
|
2344
|
+
title6 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { id: titleId, className: title3, children: title6 }),
|
|
2345
|
+
showClose && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons11.XIcon, { size: 16 }) })
|
|
2159
2346
|
] }),
|
|
2160
2347
|
content12,
|
|
2161
|
-
showArrow && /* @__PURE__ */ (0,
|
|
2348
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
|
|
2162
2349
|
]
|
|
2163
2350
|
}
|
|
2164
2351
|
) })
|
|
@@ -2167,11 +2354,11 @@ function Popover2({
|
|
|
2167
2354
|
var PopoverClose = RadixPopover.Close;
|
|
2168
2355
|
|
|
2169
2356
|
// src/components/DatePicker/DatePicker.tsx
|
|
2170
|
-
var
|
|
2171
|
-
var sanitize2 = (
|
|
2357
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2358
|
+
var sanitize2 = (input6) => input6.replace(/\D/g, "").slice(0, 8);
|
|
2172
2359
|
var format = (digits) => digits.length <= 4 ? digits : digits.length <= 6 ? `${digits.slice(0, 4)}-${digits.slice(4)}` : `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}`;
|
|
2173
2360
|
var isDigit3 = (char) => /\d/.test(char);
|
|
2174
|
-
var DatePicker = /* @__PURE__ */ (0,
|
|
2361
|
+
var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(
|
|
2175
2362
|
function DatePicker2(props, ref) {
|
|
2176
2363
|
const {
|
|
2177
2364
|
value: value4,
|
|
@@ -2197,17 +2384,17 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2197
2384
|
id,
|
|
2198
2385
|
className
|
|
2199
2386
|
} = props;
|
|
2200
|
-
const inputRef = (0,
|
|
2387
|
+
const inputRef = (0, import_react32.useRef)(null);
|
|
2201
2388
|
const m = useMessages();
|
|
2202
2389
|
const label6 = labelProp ?? m.date ?? "\uB0A0\uC9DC";
|
|
2203
2390
|
const calendarLabel = calendarLabelProp ?? m.openCalendar ?? "\uB2EC\uB825 \uC5F4\uAE30";
|
|
2204
2391
|
const invalidText = invalidTextProp ?? m.dateInvalid ?? "\uC62C\uBC14\uB978 \uB0A0\uC9DC\uAC00 \uC544\uB2C8\uC5D0\uC694.";
|
|
2205
2392
|
const unavailableText = unavailableTextProp ?? m.dateUnavailable ?? "\uACE0\uB97C \uC218 \uC5C6\uB294 \uB0A0\uC9DC\uC608\uC694.";
|
|
2206
2393
|
const incompleteText = incompleteTextProp ?? m.dateIncomplete ?? "\uB0A0\uC9DC\uB97C YYYY-MM-DD \uD615\uC2DD\uC73C\uB85C \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
|
|
2207
|
-
const [open, setOpen] = (0,
|
|
2208
|
-
const [touched, setTouched] = (0,
|
|
2394
|
+
const [open, setOpen] = (0, import_react32.useState)(false);
|
|
2395
|
+
const [touched, setTouched] = (0, import_react32.useState)(false);
|
|
2209
2396
|
const isControlled = "value" in props;
|
|
2210
|
-
const lastEmitted = (0,
|
|
2397
|
+
const lastEmitted = (0, import_react32.useRef)(isControlled ? value4 ?? "" : defaultValue ?? "");
|
|
2211
2398
|
const minDate = parseISODate(min);
|
|
2212
2399
|
const maxDate = parseISODate(max);
|
|
2213
2400
|
const toIso = (digits) => digits.length === 8 ? `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}` : "";
|
|
@@ -2232,7 +2419,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2232
2419
|
});
|
|
2233
2420
|
const textIso = toIso(field3.raw);
|
|
2234
2421
|
const { setRaw } = field3;
|
|
2235
|
-
(0,
|
|
2422
|
+
(0, import_react32.useEffect)(() => {
|
|
2236
2423
|
if (!isControlled) return;
|
|
2237
2424
|
const next = value4 ?? "";
|
|
2238
2425
|
lastEmitted.current = next;
|
|
@@ -2247,8 +2434,8 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2247
2434
|
const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field3.raw.length > 0 ? incompleteText : null;
|
|
2248
2435
|
const showAuto = autoError !== null && error === void 0;
|
|
2249
2436
|
const selectedIso = date && !isUnavailable(date) ? textIso : "";
|
|
2250
|
-
return /* @__PURE__ */ (0,
|
|
2251
|
-
/* @__PURE__ */ (0,
|
|
2437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
2438
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2252
2439
|
TextField,
|
|
2253
2440
|
{
|
|
2254
2441
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -2267,7 +2454,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2267
2454
|
disabled,
|
|
2268
2455
|
fullWidth,
|
|
2269
2456
|
rootClassName: className,
|
|
2270
|
-
endAdornment: /* @__PURE__ */ (0,
|
|
2457
|
+
endAdornment: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2271
2458
|
Popover2,
|
|
2272
2459
|
{
|
|
2273
2460
|
open,
|
|
@@ -2276,7 +2463,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2276
2463
|
align: "end",
|
|
2277
2464
|
"aria-label": m.calendar ?? "\uB2EC\uB825",
|
|
2278
2465
|
onOpenAutoFocus: (event) => event.preventDefault(),
|
|
2279
|
-
content: /* @__PURE__ */ (0,
|
|
2466
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2280
2467
|
Calendar,
|
|
2281
2468
|
{
|
|
2282
2469
|
value: selectedIso,
|
|
@@ -2293,57 +2480,34 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2293
2480
|
initialFocus: true
|
|
2294
2481
|
}
|
|
2295
2482
|
),
|
|
2296
|
-
children: /* @__PURE__ */ (0,
|
|
2483
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { "aria-label": calendarLabel, size: "sm", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons12.CalendarIcon, {}) })
|
|
2297
2484
|
}
|
|
2298
2485
|
)
|
|
2299
2486
|
}
|
|
2300
2487
|
),
|
|
2301
|
-
name && /* @__PURE__ */ (0,
|
|
2488
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { type: "hidden", name, value: selectedIso })
|
|
2302
2489
|
] });
|
|
2303
2490
|
}
|
|
2304
2491
|
);
|
|
2305
2492
|
|
|
2306
|
-
// src/components/Divider/Divider.tsx
|
|
2307
|
-
var import_react28 = require("react");
|
|
2308
|
-
|
|
2309
|
-
// src/components/Divider/Divider.css.ts
|
|
2310
|
-
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2311
|
-
var divider = /* @__PURE__ */ (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
2312
|
-
var labeled = "_1t3gq8v3";
|
|
2313
|
-
var line = "_1t3gq8v4";
|
|
2314
|
-
|
|
2315
|
-
// src/components/Divider/Divider.tsx
|
|
2316
|
-
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2317
|
-
var Divider = /* @__PURE__ */ (0, import_react28.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
|
|
2318
|
-
if (children && orientation === "horizontal") {
|
|
2319
|
-
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className: cx(labeled, className), ...rest, children: [
|
|
2320
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: line, "aria-hidden": true }),
|
|
2321
|
-
children,
|
|
2322
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: line, "aria-hidden": true })
|
|
2323
|
-
] });
|
|
2324
|
-
}
|
|
2325
|
-
const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
|
|
2326
|
-
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
|
|
2327
|
-
});
|
|
2328
|
-
|
|
2329
2493
|
// src/components/Drawer/Drawer.tsx
|
|
2330
2494
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
2331
2495
|
var import_icons13 = require("@bestow-ui/icons");
|
|
2332
2496
|
|
|
2333
2497
|
// src/components/Drawer/Drawer.css.ts
|
|
2334
|
-
var
|
|
2498
|
+
var import_createRuntimeFn17 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2335
2499
|
var body3 = "nmobyvy";
|
|
2336
2500
|
var closeButton4 = "nmobyvx";
|
|
2337
|
-
var content8 = /* @__PURE__ */ (0,
|
|
2501
|
+
var content8 = /* @__PURE__ */ (0, import_createRuntimeFn17.createRuntimeFn)({ defaultClassName: "nmobyv9", variantClassNames: { side: { right: "nmobyva", left: "nmobyvb", top: "nmobyvc", bottom: "nmobyvd" }, size: { sm: "nmobyve", md: "nmobyvf", lg: "nmobyvg" } }, defaultVariants: { side: "right", size: "md" }, compoundVariants: [[{ side: "right", size: "sm" }, "nmobyvh"], [{ side: "right", size: "md" }, "nmobyvi"], [{ side: "right", size: "lg" }, "nmobyvj"], [{ side: "left", size: "sm" }, "nmobyvk"], [{ side: "left", size: "md" }, "nmobyvl"], [{ side: "left", size: "lg" }, "nmobyvm"], [{ side: "top", size: "sm" }, "nmobyvn"], [{ side: "top", size: "md" }, "nmobyvo"], [{ side: "top", size: "lg" }, "nmobyvp"], [{ side: "bottom", size: "sm" }, "nmobyvq"], [{ side: "bottom", size: "md" }, "nmobyvr"], [{ side: "bottom", size: "lg" }, "nmobyvs"]] });
|
|
2338
2502
|
var description3 = "nmobyvw";
|
|
2339
2503
|
var footer3 = "nmobyvz";
|
|
2340
|
-
var
|
|
2504
|
+
var header7 = "nmobyvt";
|
|
2341
2505
|
var headings2 = "nmobyvu";
|
|
2342
2506
|
var overlay2 = "nmobyv0";
|
|
2343
2507
|
var title4 = "nmobyvv";
|
|
2344
2508
|
|
|
2345
2509
|
// src/components/Drawer/Drawer.tsx
|
|
2346
|
-
var
|
|
2510
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2347
2511
|
function Drawer({
|
|
2348
2512
|
open,
|
|
2349
2513
|
defaultOpen,
|
|
@@ -2362,11 +2526,11 @@ function Drawer({
|
|
|
2362
2526
|
const portal2 = usePortalProps();
|
|
2363
2527
|
const m = useMessages();
|
|
2364
2528
|
const focus = useReturnFocus(Boolean(trigger4));
|
|
2365
|
-
return /* @__PURE__ */ (0,
|
|
2366
|
-
trigger4 && /* @__PURE__ */ (0,
|
|
2367
|
-
/* @__PURE__ */ (0,
|
|
2368
|
-
/* @__PURE__ */ (0,
|
|
2369
|
-
/* @__PURE__ */ (0,
|
|
2529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
|
|
2530
|
+
trigger4 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Trigger, { asChild: true, children: trigger4 }),
|
|
2531
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Dialog2.Portal, { children: [
|
|
2532
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
|
|
2533
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2370
2534
|
Dialog2.Content,
|
|
2371
2535
|
{
|
|
2372
2536
|
className: cx(portal2.className, content8({ side, size }), className),
|
|
@@ -2377,15 +2541,15 @@ function Drawer({
|
|
|
2377
2541
|
onCloseAutoFocus: focus.onCloseAutoFocus,
|
|
2378
2542
|
...description6 ? {} : { "aria-describedby": void 0 },
|
|
2379
2543
|
children: [
|
|
2380
|
-
/* @__PURE__ */ (0,
|
|
2381
|
-
/* @__PURE__ */ (0,
|
|
2382
|
-
/* @__PURE__ */ (0,
|
|
2383
|
-
description6 && /* @__PURE__ */ (0,
|
|
2544
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: header7, children: [
|
|
2545
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: headings2, children: [
|
|
2546
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Title, { className: title4, children: title6 }),
|
|
2547
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Description, { className: description3, children: description6 })
|
|
2384
2548
|
] }),
|
|
2385
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
2549
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons13.XIcon, {}) }) })
|
|
2386
2550
|
] }),
|
|
2387
|
-
children && /* @__PURE__ */ (0,
|
|
2388
|
-
footer6 && /* @__PURE__ */ (0,
|
|
2551
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: body3, children }),
|
|
2552
|
+
footer6 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: footer3, children: footer6 })
|
|
2389
2553
|
]
|
|
2390
2554
|
}
|
|
2391
2555
|
)
|
|
@@ -2396,66 +2560,288 @@ var DrawerClose = Dialog2.Close;
|
|
|
2396
2560
|
|
|
2397
2561
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
2398
2562
|
var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
2399
|
-
var
|
|
2563
|
+
var import_icons14 = require("@bestow-ui/icons");
|
|
2564
|
+
var import_react33 = require("react");
|
|
2400
2565
|
|
|
2401
2566
|
// src/components/DropdownMenu/DropdownMenu.css.ts
|
|
2402
2567
|
var content9 = "_1d7ahux0";
|
|
2403
2568
|
var danger = "_1d7ahux2";
|
|
2404
2569
|
var icon5 = "_1d7ahux3";
|
|
2570
|
+
var indicator2 = "_1d7ahux7";
|
|
2571
|
+
var indicatorInner = "_1d7ahux8";
|
|
2405
2572
|
var item5 = "_1d7ahux1";
|
|
2406
|
-
var
|
|
2573
|
+
var label3 = "_1d7ahux5";
|
|
2574
|
+
var radioDot = "_1d7ahux9";
|
|
2407
2575
|
var separator2 = "_1d7ahux6";
|
|
2408
2576
|
var shortcut = "_1d7ahux4";
|
|
2577
|
+
var subChevron = "_1d7ahuxb";
|
|
2578
|
+
var subTrigger = "_1d7ahuxa";
|
|
2409
2579
|
|
|
2410
2580
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
2411
|
-
var
|
|
2581
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2412
2582
|
var DropdownMenu = RadixMenu.Root;
|
|
2413
2583
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
2414
2584
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
2415
|
-
var DropdownMenuContent = /* @__PURE__ */ (0,
|
|
2585
|
+
var DropdownMenuContent = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
2416
2586
|
function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
|
|
2417
2587
|
const portal2 = usePortalProps();
|
|
2418
|
-
return /* @__PURE__ */ (0,
|
|
2588
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2419
2589
|
RadixMenu.Content,
|
|
2420
2590
|
{
|
|
2421
|
-
ref,
|
|
2422
|
-
side,
|
|
2423
|
-
align,
|
|
2424
|
-
sideOffset,
|
|
2425
|
-
collisionPadding,
|
|
2426
|
-
className: cx(portal2.className, content9, className),
|
|
2427
|
-
style: { ...portal2.style, ...style },
|
|
2428
|
-
...rest
|
|
2591
|
+
ref,
|
|
2592
|
+
side,
|
|
2593
|
+
align,
|
|
2594
|
+
sideOffset,
|
|
2595
|
+
collisionPadding,
|
|
2596
|
+
className: cx(portal2.className, content9, className),
|
|
2597
|
+
style: { ...portal2.style, ...style },
|
|
2598
|
+
...rest
|
|
2599
|
+
}
|
|
2600
|
+
) });
|
|
2601
|
+
}
|
|
2602
|
+
);
|
|
2603
|
+
var DropdownMenuItem = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
2604
|
+
function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
|
|
2605
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(RadixMenu.Item, { ref, className: cx(item5, color === "danger" && danger, className), ...rest, children: [
|
|
2606
|
+
icon7 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: icon5, "aria-hidden": true, children: icon7 }),
|
|
2607
|
+
children,
|
|
2608
|
+
shortcut2 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
|
|
2609
|
+
] });
|
|
2610
|
+
}
|
|
2611
|
+
);
|
|
2612
|
+
var DropdownMenuLabel = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
2613
|
+
function DropdownMenuLabel2({ className, ...rest }, ref) {
|
|
2614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixMenu.Label, { ref, className: cx(label3, className), ...rest });
|
|
2615
|
+
}
|
|
2616
|
+
);
|
|
2617
|
+
var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
2618
|
+
function DropdownMenuSeparator2({ className, ...rest }, ref) {
|
|
2619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
|
|
2620
|
+
}
|
|
2621
|
+
);
|
|
2622
|
+
var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
2623
|
+
function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
|
|
2624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(RadixMenu.CheckboxItem, { ref, className: cx(item5, className), ...rest, children: [
|
|
2625
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons14.MinusIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons14.CheckIcon, { size: 16 }) }) }),
|
|
2626
|
+
children
|
|
2627
|
+
] });
|
|
2628
|
+
}
|
|
2629
|
+
);
|
|
2630
|
+
var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
|
|
2631
|
+
var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
2632
|
+
function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
|
|
2633
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(RadixMenu.RadioItem, { ref, className: cx(item5, className), ...rest, children: [
|
|
2634
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: radioDot }) }) }),
|
|
2635
|
+
children
|
|
2636
|
+
] });
|
|
2637
|
+
}
|
|
2638
|
+
);
|
|
2639
|
+
var DropdownMenuSub = RadixMenu.Sub;
|
|
2640
|
+
var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
2641
|
+
function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
|
|
2642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(RadixMenu.SubTrigger, { ref, className: cx(item5, subTrigger, className), ...rest, children: [
|
|
2643
|
+
icon7 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: icon5, "aria-hidden": true, children: icon7 }),
|
|
2644
|
+
children,
|
|
2645
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons14.ChevronRightIcon, { size: 16 }) })
|
|
2646
|
+
] });
|
|
2647
|
+
}
|
|
2648
|
+
);
|
|
2649
|
+
var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
2650
|
+
function DropdownMenuSubContent2({ className, style, sideOffset = 4, alignOffset = -5, collisionPadding = 8, ...rest }, ref) {
|
|
2651
|
+
const portal2 = usePortalProps();
|
|
2652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2653
|
+
RadixMenu.SubContent,
|
|
2654
|
+
{
|
|
2655
|
+
ref,
|
|
2656
|
+
sideOffset,
|
|
2657
|
+
alignOffset,
|
|
2658
|
+
collisionPadding,
|
|
2659
|
+
className: cx(portal2.className, content9, className),
|
|
2660
|
+
style: { ...portal2.style, ...style },
|
|
2661
|
+
...rest
|
|
2662
|
+
}
|
|
2663
|
+
) });
|
|
2664
|
+
}
|
|
2665
|
+
);
|
|
2666
|
+
|
|
2667
|
+
// src/components/NumberInput/NumberInput.tsx
|
|
2668
|
+
var import_react34 = require("react");
|
|
2669
|
+
var import_icons15 = require("@bestow-ui/icons");
|
|
2670
|
+
|
|
2671
|
+
// src/components/NumberInput/NumberInput.css.ts
|
|
2672
|
+
var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2673
|
+
var end = "_1vq2qhv1";
|
|
2674
|
+
var input4 = "_1vq2qhv0";
|
|
2675
|
+
var stepper = /* @__PURE__ */ (0, import_createRuntimeFn18.createRuntimeFn)({ defaultClassName: "_1vq2qhv3", variantClassNames: { size: { sm: "_1vq2qhv4", md: "_1vq2qhv5", lg: "_1vq2qhv6" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
2676
|
+
var unit = "_1vq2qhv2";
|
|
2677
|
+
|
|
2678
|
+
// src/components/NumberInput/NumberInput.tsx
|
|
2679
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2680
|
+
var MAX_DIGITS2 = 15;
|
|
2681
|
+
var isMeaningful = (char) => /[\d.-]/.test(char);
|
|
2682
|
+
var decimalsOf = (n) => Number.isFinite(n) ? String(n).split(".")[1]?.length ?? 0 : 0;
|
|
2683
|
+
var parse = (raw) => /\d/.test(raw) ? Number(raw) : null;
|
|
2684
|
+
var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
2685
|
+
function NumberInput2(props, ref) {
|
|
2686
|
+
const {
|
|
2687
|
+
value: value4,
|
|
2688
|
+
defaultValue,
|
|
2689
|
+
onValueChange,
|
|
2690
|
+
min,
|
|
2691
|
+
max,
|
|
2692
|
+
step = 1,
|
|
2693
|
+
largeStep = step * 10,
|
|
2694
|
+
precision: precisionProp,
|
|
2695
|
+
unit: unit2,
|
|
2696
|
+
thousandSeparator = true,
|
|
2697
|
+
hideStepper,
|
|
2698
|
+
size,
|
|
2699
|
+
disabled,
|
|
2700
|
+
readOnly,
|
|
2701
|
+
id,
|
|
2702
|
+
name,
|
|
2703
|
+
onKeyDown,
|
|
2704
|
+
onBlur,
|
|
2705
|
+
className,
|
|
2706
|
+
...rest
|
|
2707
|
+
} = props;
|
|
2708
|
+
const isControlled = "value" in props;
|
|
2709
|
+
const m = useMessages();
|
|
2710
|
+
const inputRef = (0, import_react34.useRef)(null);
|
|
2711
|
+
const generatedId = (0, import_react34.useId)();
|
|
2712
|
+
const inputId = id ?? generatedId;
|
|
2713
|
+
const precision = Math.max(0, precisionProp ?? decimalsOf(step));
|
|
2714
|
+
const allowNegative = min === void 0 || min < 0;
|
|
2715
|
+
const round = (n) => Number(n.toFixed(precision));
|
|
2716
|
+
const clamp = (n) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, round(n)));
|
|
2717
|
+
const toRaw = (n) => n === null || n === void 0 || !Number.isFinite(n) ? "" : String(round(n));
|
|
2718
|
+
const sanitize4 = (input6) => {
|
|
2719
|
+
const negative = allowNegative && input6.trimStart().startsWith("-");
|
|
2720
|
+
const [intPart = "", ...fracParts] = input6.replace(/[^\d.]/g, "").split(".");
|
|
2721
|
+
const int = intPart.replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS2);
|
|
2722
|
+
const hasDot = precision > 0 && fracParts.length > 0;
|
|
2723
|
+
const frac = hasDot ? fracParts.join("").slice(0, precision) : "";
|
|
2724
|
+
return `${negative ? "-" : ""}${int}${hasDot ? `.${frac}` : ""}`;
|
|
2725
|
+
};
|
|
2726
|
+
const format2 = (raw) => {
|
|
2727
|
+
if (!thousandSeparator) return raw;
|
|
2728
|
+
const [, sign = "", int = "", rest2 = ""] = raw.match(/^(-?)(\d*)(.*)$/) ?? [];
|
|
2729
|
+
return `${sign}${int ? Number(int).toLocaleString("ko-KR") : ""}${rest2}`;
|
|
2730
|
+
};
|
|
2731
|
+
const lastEmitted = (0, import_react34.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
|
|
2732
|
+
const emit = (next) => {
|
|
2733
|
+
if (next === lastEmitted.current) return;
|
|
2734
|
+
lastEmitted.current = next;
|
|
2735
|
+
onValueChange?.(next);
|
|
2736
|
+
};
|
|
2737
|
+
const field3 = useFormattedInput({
|
|
2738
|
+
isControlled: false,
|
|
2739
|
+
value: void 0,
|
|
2740
|
+
defaultValue: toRaw(isControlled ? value4 : defaultValue),
|
|
2741
|
+
onValueChange: (raw) => emit(parse(raw)),
|
|
2742
|
+
sanitize: sanitize4,
|
|
2743
|
+
format: format2,
|
|
2744
|
+
isMeaningful,
|
|
2745
|
+
inputRef
|
|
2746
|
+
});
|
|
2747
|
+
const { setRaw } = field3;
|
|
2748
|
+
(0, import_react34.useEffect)(() => {
|
|
2749
|
+
if (!isControlled) return;
|
|
2750
|
+
const next = value4 ?? null;
|
|
2751
|
+
lastEmitted.current = next;
|
|
2752
|
+
if (parse(field3.raw) !== next) setRaw(toRaw(next));
|
|
2753
|
+
}, [value4]);
|
|
2754
|
+
const current2 = parse(field3.raw);
|
|
2755
|
+
const setValue = (next) => {
|
|
2756
|
+
setRaw(toRaw(next));
|
|
2757
|
+
emit(next);
|
|
2758
|
+
};
|
|
2759
|
+
const stepBy = (delta) => {
|
|
2760
|
+
if (disabled || readOnly) return;
|
|
2761
|
+
setValue(current2 === null ? clamp(0) : clamp(current2 + delta));
|
|
2762
|
+
};
|
|
2763
|
+
const canDecrement = !disabled && !readOnly && (current2 === null || min === void 0 || current2 > min);
|
|
2764
|
+
const canIncrement = !disabled && !readOnly && (current2 === null || max === void 0 || current2 < max);
|
|
2765
|
+
const handleKeyDown = (event) => {
|
|
2766
|
+
onKeyDown?.(event);
|
|
2767
|
+
if (event.defaultPrevented) return;
|
|
2768
|
+
const deltas = {
|
|
2769
|
+
ArrowUp: step,
|
|
2770
|
+
ArrowDown: -step,
|
|
2771
|
+
PageUp: largeStep,
|
|
2772
|
+
PageDown: -largeStep
|
|
2773
|
+
};
|
|
2774
|
+
if (event.key in deltas) {
|
|
2775
|
+
event.preventDefault();
|
|
2776
|
+
stepBy(deltas[event.key]);
|
|
2777
|
+
} else if (event.key === "Home" && min !== void 0 && !readOnly) {
|
|
2778
|
+
event.preventDefault();
|
|
2779
|
+
setValue(min);
|
|
2780
|
+
} else if (event.key === "End" && max !== void 0 && !readOnly) {
|
|
2781
|
+
event.preventDefault();
|
|
2782
|
+
setValue(max);
|
|
2783
|
+
} else {
|
|
2784
|
+
field3.onKeyDown(event);
|
|
2785
|
+
}
|
|
2786
|
+
};
|
|
2787
|
+
const stepper2 = (direction) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2788
|
+
IconButton,
|
|
2789
|
+
{
|
|
2790
|
+
size: "sm",
|
|
2791
|
+
"aria-label": direction < 0 ? m.decrement ?? "\uC904\uC774\uAE30" : m.increment ?? "\uB298\uB9AC\uAE30",
|
|
2792
|
+
"aria-controls": inputId,
|
|
2793
|
+
tabIndex: -1,
|
|
2794
|
+
disabled: direction < 0 ? !canDecrement : !canIncrement,
|
|
2795
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
2796
|
+
onClick: () => stepBy(direction * step),
|
|
2797
|
+
className: stepper({ size }),
|
|
2798
|
+
children: direction < 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons15.MinusIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons15.PlusIcon, {})
|
|
2429
2799
|
}
|
|
2430
|
-
)
|
|
2431
|
-
|
|
2432
|
-
)
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2800
|
+
);
|
|
2801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
|
|
2802
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2803
|
+
TextField,
|
|
2804
|
+
{
|
|
2805
|
+
ref: mergeRefs(ref, inputRef),
|
|
2806
|
+
id: inputId,
|
|
2807
|
+
role: "spinbutton",
|
|
2808
|
+
inputMode: allowNegative ? "text" : precision > 0 ? "decimal" : "numeric",
|
|
2809
|
+
autoComplete: "off",
|
|
2810
|
+
"aria-valuenow": current2 ?? void 0,
|
|
2811
|
+
"aria-valuemin": min,
|
|
2812
|
+
"aria-valuemax": max,
|
|
2813
|
+
"aria-valuetext": current2 === null ? void 0 : `${field3.display}${unit2 ?? ""}`,
|
|
2814
|
+
value: field3.display,
|
|
2815
|
+
onChange: field3.onChange,
|
|
2816
|
+
onKeyDown: handleKeyDown,
|
|
2817
|
+
onBlur: (event) => {
|
|
2818
|
+
if (current2 !== null && clamp(current2) !== current2) setValue(clamp(current2));
|
|
2819
|
+
else if (current2 === null && field3.raw !== "") setRaw("");
|
|
2820
|
+
onBlur?.(event);
|
|
2821
|
+
},
|
|
2822
|
+
size,
|
|
2823
|
+
disabled,
|
|
2824
|
+
readOnly,
|
|
2825
|
+
startAdornment: hideStepper ? void 0 : stepper2(-1),
|
|
2826
|
+
endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: end, children: [
|
|
2827
|
+
unit2 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: unit, children: unit2 }),
|
|
2828
|
+
!hideStepper && stepper2(1)
|
|
2829
|
+
] }) : void 0,
|
|
2830
|
+
className: cx(input4, className),
|
|
2831
|
+
...rest
|
|
2832
|
+
}
|
|
2833
|
+
),
|
|
2834
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) })
|
|
2439
2835
|
] });
|
|
2440
2836
|
}
|
|
2441
2837
|
);
|
|
2442
|
-
var DropdownMenuLabel = /* @__PURE__ */ (0, import_react29.forwardRef)(
|
|
2443
|
-
function DropdownMenuLabel2({ className, ...rest }, ref) {
|
|
2444
|
-
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
|
|
2445
|
-
}
|
|
2446
|
-
);
|
|
2447
|
-
var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react29.forwardRef)(
|
|
2448
|
-
function DropdownMenuSeparator2({ className, ...rest }, ref) {
|
|
2449
|
-
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
|
|
2450
|
-
}
|
|
2451
|
-
);
|
|
2452
2838
|
|
|
2453
2839
|
// src/components/Pagination/Pagination.tsx
|
|
2454
|
-
var
|
|
2455
|
-
var
|
|
2840
|
+
var import_icons16 = require("@bestow-ui/icons");
|
|
2841
|
+
var import_react35 = require("react");
|
|
2456
2842
|
|
|
2457
2843
|
// src/components/Pagination/getPaginationItems.ts
|
|
2458
|
-
var range = (start,
|
|
2844
|
+
var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
|
|
2459
2845
|
function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount = 1) {
|
|
2460
2846
|
if (totalPages < 1) return [];
|
|
2461
2847
|
const startPages = range(1, Math.min(boundaryCount, totalPages));
|
|
@@ -2479,14 +2865,14 @@ function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount =
|
|
|
2479
2865
|
}
|
|
2480
2866
|
|
|
2481
2867
|
// src/components/Pagination/Pagination.css.ts
|
|
2482
|
-
var
|
|
2868
|
+
var import_createRuntimeFn19 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2483
2869
|
var ellipsis = "_1iraoak4";
|
|
2484
|
-
var item6 = /* @__PURE__ */ (0,
|
|
2870
|
+
var item6 = /* @__PURE__ */ (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "_1iraoak1", variantClassNames: { size: { sm: "_1iraoak2", md: "_1iraoak3" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
2485
2871
|
var list3 = "_1iraoak0";
|
|
2486
2872
|
|
|
2487
2873
|
// src/components/Pagination/Pagination.tsx
|
|
2488
|
-
var
|
|
2489
|
-
var Pagination = /* @__PURE__ */ (0,
|
|
2874
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2875
|
+
var Pagination = /* @__PURE__ */ (0, import_react35.forwardRef)(function Pagination2({
|
|
2490
2876
|
totalPages,
|
|
2491
2877
|
page: pageProp,
|
|
2492
2878
|
defaultPage = 1,
|
|
@@ -2499,7 +2885,7 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2499
2885
|
"aria-label": ariaLabelProp,
|
|
2500
2886
|
...rest
|
|
2501
2887
|
}, ref) {
|
|
2502
|
-
const [uncontrolledPage, setUncontrolledPage] = (0,
|
|
2888
|
+
const [uncontrolledPage, setUncontrolledPage] = (0, import_react35.useState)(defaultPage);
|
|
2503
2889
|
const m = useMessages();
|
|
2504
2890
|
const ariaLabel = ariaLabelProp ?? m.pagination ?? "\uD398\uC774\uC9C0 \uD0D0\uC0C9";
|
|
2505
2891
|
const getItemLabel = getItemLabelProp ?? ((type, n) => type === "previous" ? m.paginationPrevious ?? "\uC774\uC804 \uD398\uC774\uC9C0" : type === "next" ? m.paginationNext ?? "\uB2E4\uC74C \uD398\uC774\uC9C0" : m.paginationPage?.(n) ?? `${n} \uD398\uC774\uC9C0`);
|
|
@@ -2511,8 +2897,8 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2511
2897
|
onPageChange?.(next);
|
|
2512
2898
|
};
|
|
2513
2899
|
const itemClass = item6({ size });
|
|
2514
|
-
return /* @__PURE__ */ (0,
|
|
2515
|
-
/* @__PURE__ */ (0,
|
|
2900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: list3, children: [
|
|
2901
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2516
2902
|
"button",
|
|
2517
2903
|
{
|
|
2518
2904
|
type: "button",
|
|
@@ -2520,11 +2906,11 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2520
2906
|
"aria-label": getItemLabel("previous", page - 1),
|
|
2521
2907
|
disabled: page <= 1,
|
|
2522
2908
|
onClick: () => goTo(page - 1),
|
|
2523
|
-
children: /* @__PURE__ */ (0,
|
|
2909
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons16.ChevronLeftIcon, { size: 16 })
|
|
2524
2910
|
}
|
|
2525
2911
|
) }),
|
|
2526
2912
|
getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
|
|
2527
|
-
(item8) => typeof item8 === "number" ? /* @__PURE__ */ (0,
|
|
2913
|
+
(item8) => typeof item8 === "number" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2528
2914
|
"button",
|
|
2529
2915
|
{
|
|
2530
2916
|
type: "button",
|
|
@@ -2534,9 +2920,9 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2534
2920
|
onClick: () => goTo(item8),
|
|
2535
2921
|
children: item8
|
|
2536
2922
|
}
|
|
2537
|
-
) }, item8) : /* @__PURE__ */ (0,
|
|
2923
|
+
) }, item8) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item8)
|
|
2538
2924
|
),
|
|
2539
|
-
/* @__PURE__ */ (0,
|
|
2925
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2540
2926
|
"button",
|
|
2541
2927
|
{
|
|
2542
2928
|
type: "button",
|
|
@@ -2544,21 +2930,21 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2544
2930
|
"aria-label": getItemLabel("next", page + 1),
|
|
2545
2931
|
disabled: page >= totalPages,
|
|
2546
2932
|
onClick: () => goTo(page + 1),
|
|
2547
|
-
children: /* @__PURE__ */ (0,
|
|
2933
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons16.ChevronRightIcon, { size: 16 })
|
|
2548
2934
|
}
|
|
2549
2935
|
) })
|
|
2550
2936
|
] }) });
|
|
2551
2937
|
});
|
|
2552
2938
|
|
|
2553
2939
|
// src/components/PhoneNumberInput/PhoneNumberInput.tsx
|
|
2554
|
-
var
|
|
2555
|
-
var
|
|
2556
|
-
var sanitize3 = (
|
|
2557
|
-
const digits =
|
|
2940
|
+
var import_react36 = require("react");
|
|
2941
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2942
|
+
var sanitize3 = (input6) => {
|
|
2943
|
+
const digits = input6.replace(/\D/g, "");
|
|
2558
2944
|
return digits.slice(0, phoneNumberMaxDigits(digits));
|
|
2559
2945
|
};
|
|
2560
2946
|
var isDigit4 = (char) => /\d/.test(char);
|
|
2561
|
-
var PhoneNumberInput = /* @__PURE__ */ (0,
|
|
2947
|
+
var PhoneNumberInput = /* @__PURE__ */ (0, import_react36.forwardRef)(
|
|
2562
2948
|
function PhoneNumberInput2(props, ref) {
|
|
2563
2949
|
const {
|
|
2564
2950
|
value: value4,
|
|
@@ -2569,7 +2955,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react31.forwardRef)(
|
|
|
2569
2955
|
onKeyDown,
|
|
2570
2956
|
...rest
|
|
2571
2957
|
} = props;
|
|
2572
|
-
const inputRef = (0,
|
|
2958
|
+
const inputRef = (0, import_react36.useRef)(null);
|
|
2573
2959
|
const m = useMessages();
|
|
2574
2960
|
const label6 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
|
|
2575
2961
|
const field3 = useFormattedInput({
|
|
@@ -2582,7 +2968,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react31.forwardRef)(
|
|
|
2582
2968
|
isMeaningful: isDigit4,
|
|
2583
2969
|
inputRef
|
|
2584
2970
|
});
|
|
2585
|
-
return /* @__PURE__ */ (0,
|
|
2971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2586
2972
|
TextField,
|
|
2587
2973
|
{
|
|
2588
2974
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -2603,85 +2989,22 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react31.forwardRef)(
|
|
|
2603
2989
|
}
|
|
2604
2990
|
);
|
|
2605
2991
|
|
|
2606
|
-
// src/components/Progress/Progress.tsx
|
|
2607
|
-
var import_react32 = require("react");
|
|
2608
|
-
|
|
2609
|
-
// src/components/Progress/Progress.css.ts
|
|
2610
|
-
var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2611
|
-
var header7 = "_1tvkq001";
|
|
2612
|
-
var indicator = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
|
|
2613
|
-
var label3 = "_1tvkq002";
|
|
2614
|
-
var root7 = "_1tvkq000";
|
|
2615
|
-
var track = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
2616
|
-
var value2 = "_1tvkq003";
|
|
2617
|
-
|
|
2618
|
-
// src/components/Progress/Progress.tsx
|
|
2619
|
-
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2620
|
-
var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
|
|
2621
|
-
var Progress = /* @__PURE__ */ (0, import_react32.forwardRef)(function Progress2({
|
|
2622
|
-
value: value4,
|
|
2623
|
-
max = 100,
|
|
2624
|
-
label: label6,
|
|
2625
|
-
"aria-label": ariaLabel,
|
|
2626
|
-
showValue,
|
|
2627
|
-
formatValue = defaultFormat,
|
|
2628
|
-
size,
|
|
2629
|
-
color,
|
|
2630
|
-
className,
|
|
2631
|
-
...rest
|
|
2632
|
-
}, ref) {
|
|
2633
|
-
const labelId = (0, import_react32.useId)();
|
|
2634
|
-
const isIndeterminate = value4 === void 0 || value4 === null;
|
|
2635
|
-
const safeMax = max > 0 ? max : 100;
|
|
2636
|
-
const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
|
|
2637
|
-
const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
|
|
2638
|
-
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref, className: cx(root7, className), ...rest, children: [
|
|
2639
|
-
(label6 || showValue && valueText) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: header7, children: [
|
|
2640
|
-
label6 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id: labelId, className: label3, children: label6 }),
|
|
2641
|
-
showValue && valueText && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: value2, "aria-hidden": true, children: valueText })
|
|
2642
|
-
] }),
|
|
2643
|
-
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2644
|
-
"div",
|
|
2645
|
-
{
|
|
2646
|
-
role: "progressbar",
|
|
2647
|
-
"aria-labelledby": label6 ? labelId : void 0,
|
|
2648
|
-
"aria-label": label6 ? void 0 : ariaLabel,
|
|
2649
|
-
"aria-valuemin": 0,
|
|
2650
|
-
"aria-valuemax": safeMax,
|
|
2651
|
-
"aria-valuenow": isIndeterminate ? void 0 : clamped,
|
|
2652
|
-
"aria-valuetext": valueText,
|
|
2653
|
-
className: track({ size }),
|
|
2654
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2655
|
-
"div",
|
|
2656
|
-
{
|
|
2657
|
-
className: indicator({ color }),
|
|
2658
|
-
"data-state": isIndeterminate ? "indeterminate" : clamped >= safeMax ? "complete" : "loading",
|
|
2659
|
-
style: isIndeterminate ? void 0 : { width: `${clamped / safeMax * 100}%` }
|
|
2660
|
-
}
|
|
2661
|
-
)
|
|
2662
|
-
}
|
|
2663
|
-
)
|
|
2664
|
-
] });
|
|
2665
|
-
});
|
|
2666
|
-
|
|
2667
2992
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
2668
|
-
var
|
|
2669
|
-
var import_react33 = require("react");
|
|
2993
|
+
var import_react37 = require("react");
|
|
2670
2994
|
|
|
2671
2995
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
2672
|
-
var
|
|
2673
|
-
var description4 = "
|
|
2674
|
-
var groupLabel = "
|
|
2675
|
-
var
|
|
2676
|
-
var
|
|
2677
|
-
var
|
|
2678
|
-
var
|
|
2679
|
-
var
|
|
2680
|
-
var text = "_1w9iwjmb";
|
|
2996
|
+
var import_createRuntimeFn20 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2997
|
+
var description4 = "_1w9iwjmc";
|
|
2998
|
+
var groupLabel = "_1w9iwjmd";
|
|
2999
|
+
var items = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
3000
|
+
var labelText = "_1w9iwjmb";
|
|
3001
|
+
var option = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3002
|
+
var radio = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3003
|
+
var text = "_1w9iwjma";
|
|
2681
3004
|
|
|
2682
3005
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
2683
|
-
var
|
|
2684
|
-
var
|
|
3006
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3007
|
+
var RadioGroup2 = /* @__PURE__ */ (0, import_react37.forwardRef)(function RadioGroup3(props, ref) {
|
|
2685
3008
|
const {
|
|
2686
3009
|
options,
|
|
2687
3010
|
value: value4,
|
|
@@ -2700,73 +3023,85 @@ var RadioGroup = /* @__PURE__ */ (0, import_react33.forwardRef)(function RadioGr
|
|
|
2700
3023
|
className
|
|
2701
3024
|
} = props;
|
|
2702
3025
|
const isControlled = "value" in props;
|
|
2703
|
-
const
|
|
3026
|
+
const [innerValue, setInnerValue] = (0, import_react37.useState)(defaultValue ?? "");
|
|
3027
|
+
const current2 = isControlled ? value4 ?? "" : innerValue;
|
|
3028
|
+
const generatedId = (0, import_react37.useId)();
|
|
2704
3029
|
const baseId = id ?? generatedId;
|
|
2705
3030
|
const labelId = label6 ? `${baseId}-label` : void 0;
|
|
2706
3031
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
2707
|
-
|
|
2708
|
-
|
|
3032
|
+
const groupName = name ?? `${baseId}-radio`;
|
|
3033
|
+
const detachedForm = name ? void 0 : `${baseId}-no-form`;
|
|
3034
|
+
const handleChange = (next) => {
|
|
3035
|
+
if (next === current2) return;
|
|
3036
|
+
if (!isControlled) setInnerValue(next);
|
|
3037
|
+
onValueChange?.(next);
|
|
3038
|
+
};
|
|
3039
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx(field, className), children: [
|
|
3040
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { id: labelId, className: cx(label2, groupLabel), children: [
|
|
2709
3041
|
label6,
|
|
2710
|
-
required && /* @__PURE__ */ (0,
|
|
3042
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
2711
3043
|
] }),
|
|
2712
|
-
/* @__PURE__ */ (0,
|
|
2713
|
-
|
|
3044
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3045
|
+
"div",
|
|
2714
3046
|
{
|
|
2715
3047
|
ref,
|
|
2716
3048
|
id: baseId,
|
|
2717
|
-
|
|
2718
|
-
defaultValue,
|
|
2719
|
-
onValueChange,
|
|
2720
|
-
orientation,
|
|
2721
|
-
disabled,
|
|
2722
|
-
required,
|
|
2723
|
-
name,
|
|
3049
|
+
role: "radiogroup",
|
|
2724
3050
|
"aria-label": ariaLabel,
|
|
2725
3051
|
"aria-labelledby": labelId,
|
|
2726
3052
|
"aria-describedby": helperId,
|
|
2727
3053
|
"aria-invalid": error || void 0,
|
|
3054
|
+
"aria-required": required || void 0,
|
|
3055
|
+
"data-disabled": disabled || void 0,
|
|
2728
3056
|
className: items({ orientation }),
|
|
2729
3057
|
children: options.map((option2) => {
|
|
2730
3058
|
const itemId = `${baseId}-${option2.value}`;
|
|
2731
3059
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
2732
3060
|
const itemDisabled = disabled || option2.disabled;
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
3061
|
+
const checked = option2.value === current2;
|
|
3062
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
|
|
3063
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3064
|
+
"input",
|
|
2736
3065
|
{
|
|
3066
|
+
type: "radio",
|
|
2737
3067
|
id: itemId,
|
|
3068
|
+
name: groupName,
|
|
3069
|
+
form: detachedForm,
|
|
2738
3070
|
value: option2.value,
|
|
2739
|
-
|
|
3071
|
+
checked,
|
|
3072
|
+
onChange: () => handleChange(option2.value),
|
|
3073
|
+
disabled: itemDisabled,
|
|
3074
|
+
required,
|
|
2740
3075
|
"aria-describedby": descriptionId,
|
|
2741
|
-
|
|
2742
|
-
|
|
3076
|
+
"data-state": checked ? "checked" : "unchecked",
|
|
3077
|
+
className: radio({ size })
|
|
2743
3078
|
}
|
|
2744
3079
|
),
|
|
2745
|
-
/* @__PURE__ */ (0,
|
|
2746
|
-
/* @__PURE__ */ (0,
|
|
2747
|
-
option2.description && /* @__PURE__ */ (0,
|
|
3080
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: text, children: [
|
|
3081
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
|
|
3082
|
+
option2.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { id: descriptionId, className: description4, children: option2.description })
|
|
2748
3083
|
] })
|
|
2749
3084
|
] }, option2.value);
|
|
2750
3085
|
})
|
|
2751
3086
|
}
|
|
2752
3087
|
),
|
|
2753
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3088
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
2754
3089
|
] });
|
|
2755
3090
|
});
|
|
2756
3091
|
|
|
2757
3092
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
2758
|
-
var
|
|
3093
|
+
var import_react38 = require("react");
|
|
2759
3094
|
|
|
2760
3095
|
// src/components/SegmentedControl/SegmentedControl.css.ts
|
|
2761
|
-
var
|
|
3096
|
+
var import_createRuntimeFn21 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2762
3097
|
var icon6 = "_1h65mmo7";
|
|
2763
|
-
var item7 = /* @__PURE__ */ (0,
|
|
2764
|
-
var root8 = /* @__PURE__ */ (0,
|
|
3098
|
+
var item7 = /* @__PURE__ */ (0, import_createRuntimeFn21.createRuntimeFn)({ defaultClassName: "_1h65mmo2", variantClassNames: { size: { sm: "_1h65mmo3", md: "_1h65mmo4", lg: "_1h65mmo5" }, fullWidth: { true: "_1h65mmo6" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3099
|
+
var root8 = /* @__PURE__ */ (0, import_createRuntimeFn21.createRuntimeFn)({ defaultClassName: "_1h65mmo0", variantClassNames: { fullWidth: { true: "_1h65mmo1" } }, defaultVariants: {}, compoundVariants: [] });
|
|
2765
3100
|
|
|
2766
3101
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
2767
|
-
var
|
|
3102
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2768
3103
|
var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
|
|
2769
|
-
var SegmentedControl = /* @__PURE__ */ (0,
|
|
3104
|
+
var SegmentedControl = /* @__PURE__ */ (0, import_react38.forwardRef)(
|
|
2770
3105
|
function SegmentedControl2(props, ref) {
|
|
2771
3106
|
const {
|
|
2772
3107
|
options,
|
|
@@ -2783,11 +3118,11 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2783
3118
|
className
|
|
2784
3119
|
} = props;
|
|
2785
3120
|
const isControlled = "value" in props;
|
|
2786
|
-
const [innerValue, setInnerValue] = (0,
|
|
3121
|
+
const [innerValue, setInnerValue] = (0, import_react38.useState)(defaultValue ?? "");
|
|
2787
3122
|
const current2 = isControlled ? value4 ?? "" : innerValue;
|
|
2788
|
-
const generatedId = (0,
|
|
3123
|
+
const generatedId = (0, import_react38.useId)();
|
|
2789
3124
|
const labelId = label6 ? `${id ?? generatedId}-label` : void 0;
|
|
2790
|
-
const itemRefs = (0,
|
|
3125
|
+
const itemRefs = (0, import_react38.useRef)([]);
|
|
2791
3126
|
const isEnabled = (index) => !disabled && !options[index]?.disabled;
|
|
2792
3127
|
const select = (index) => {
|
|
2793
3128
|
const next = options[index].value;
|
|
@@ -2818,7 +3153,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2818
3153
|
itemRefs.current[target]?.focus();
|
|
2819
3154
|
select(target);
|
|
2820
3155
|
};
|
|
2821
|
-
const group = /* @__PURE__ */ (0,
|
|
3156
|
+
const group = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
2822
3157
|
"div",
|
|
2823
3158
|
{
|
|
2824
3159
|
ref,
|
|
@@ -2831,7 +3166,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2831
3166
|
children: [
|
|
2832
3167
|
options.map((option2, index) => {
|
|
2833
3168
|
const checked = index === checkedIndex;
|
|
2834
|
-
return /* @__PURE__ */ (0,
|
|
3169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
2835
3170
|
"button",
|
|
2836
3171
|
{
|
|
2837
3172
|
ref: (node) => {
|
|
@@ -2848,20 +3183,20 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2848
3183
|
onClick: () => select(index),
|
|
2849
3184
|
onKeyDown: (event) => handleKeyDown(event, index),
|
|
2850
3185
|
children: [
|
|
2851
|
-
option2.icon && /* @__PURE__ */ (0,
|
|
3186
|
+
option2.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: icon6, children: option2.icon }),
|
|
2852
3187
|
option2.label
|
|
2853
3188
|
]
|
|
2854
3189
|
},
|
|
2855
3190
|
option2.value
|
|
2856
3191
|
);
|
|
2857
3192
|
}),
|
|
2858
|
-
name && /* @__PURE__ */ (0,
|
|
3193
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { type: "hidden", name, value: current2 })
|
|
2859
3194
|
]
|
|
2860
3195
|
}
|
|
2861
3196
|
);
|
|
2862
3197
|
if (!label6) return group;
|
|
2863
|
-
return /* @__PURE__ */ (0,
|
|
2864
|
-
/* @__PURE__ */ (0,
|
|
3198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx(field, className), children: [
|
|
3199
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { id: labelId, className: label2, children: label6 }),
|
|
2865
3200
|
group
|
|
2866
3201
|
] });
|
|
2867
3202
|
}
|
|
@@ -2869,10 +3204,10 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2869
3204
|
|
|
2870
3205
|
// src/components/Select/Select.tsx
|
|
2871
3206
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
2872
|
-
var
|
|
2873
|
-
var
|
|
2874
|
-
var
|
|
2875
|
-
var Select = /* @__PURE__ */ (0,
|
|
3207
|
+
var import_react39 = require("react");
|
|
3208
|
+
var import_icons17 = require("@bestow-ui/icons");
|
|
3209
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3210
|
+
var Select = /* @__PURE__ */ (0, import_react39.forwardRef)(function Select2(props, ref) {
|
|
2876
3211
|
const {
|
|
2877
3212
|
options,
|
|
2878
3213
|
value: value4,
|
|
@@ -2892,16 +3227,16 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2892
3227
|
className
|
|
2893
3228
|
} = props;
|
|
2894
3229
|
const isControlled = "value" in props;
|
|
2895
|
-
const generatedId = (0,
|
|
3230
|
+
const generatedId = (0, import_react39.useId)();
|
|
2896
3231
|
const triggerId = id ?? generatedId;
|
|
2897
3232
|
const helperId = helperText3 ? `${triggerId}-helper` : void 0;
|
|
2898
3233
|
const portal2 = usePortalProps();
|
|
2899
|
-
return /* @__PURE__ */ (0,
|
|
2900
|
-
label6 && /* @__PURE__ */ (0,
|
|
3234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
3235
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { htmlFor: triggerId, className: label2, children: [
|
|
2901
3236
|
label6,
|
|
2902
|
-
required && /* @__PURE__ */ (0,
|
|
3237
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
2903
3238
|
] }),
|
|
2904
|
-
/* @__PURE__ */ (0,
|
|
3239
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2905
3240
|
RadixSelect.Root,
|
|
2906
3241
|
{
|
|
2907
3242
|
value: isControlled ? value4 ?? "" : void 0,
|
|
@@ -2911,7 +3246,7 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2911
3246
|
required,
|
|
2912
3247
|
name,
|
|
2913
3248
|
children: [
|
|
2914
|
-
/* @__PURE__ */ (0,
|
|
3249
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2915
3250
|
RadixSelect.Trigger,
|
|
2916
3251
|
{
|
|
2917
3252
|
ref,
|
|
@@ -2920,14 +3255,14 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2920
3255
|
"aria-invalid": error || void 0,
|
|
2921
3256
|
"aria-describedby": helperId,
|
|
2922
3257
|
"data-invalid": error || void 0,
|
|
2923
|
-
className: cx(
|
|
3258
|
+
className: cx(root4({ size, fullWidth }), trigger2, className),
|
|
2924
3259
|
children: [
|
|
2925
|
-
/* @__PURE__ */ (0,
|
|
2926
|
-
/* @__PURE__ */ (0,
|
|
3260
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: value2, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RadixSelect.Value, { placeholder }) }),
|
|
3261
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons17.ChevronDownIcon, { size: 16 }) })
|
|
2927
3262
|
]
|
|
2928
3263
|
}
|
|
2929
3264
|
),
|
|
2930
|
-
/* @__PURE__ */ (0,
|
|
3265
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2931
3266
|
RadixSelect.Content,
|
|
2932
3267
|
{
|
|
2933
3268
|
position: "popper",
|
|
@@ -2935,15 +3270,15 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2935
3270
|
collisionPadding: 8,
|
|
2936
3271
|
className: cx(portal2.className, content5),
|
|
2937
3272
|
style: portal2.style,
|
|
2938
|
-
children: /* @__PURE__ */ (0,
|
|
3273
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2939
3274
|
RadixSelect.Item,
|
|
2940
3275
|
{
|
|
2941
3276
|
value: option2.value,
|
|
2942
3277
|
disabled: option2.disabled,
|
|
2943
3278
|
className: item4,
|
|
2944
3279
|
children: [
|
|
2945
|
-
/* @__PURE__ */ (0,
|
|
2946
|
-
/* @__PURE__ */ (0,
|
|
3280
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RadixSelect.ItemText, { children: option2.label }),
|
|
3281
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons17.CheckIcon, { size: 16 }) })
|
|
2947
3282
|
]
|
|
2948
3283
|
},
|
|
2949
3284
|
option2.value
|
|
@@ -2953,68 +3288,19 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2953
3288
|
]
|
|
2954
3289
|
}
|
|
2955
3290
|
),
|
|
2956
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3291
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
2957
3292
|
] });
|
|
2958
3293
|
});
|
|
2959
3294
|
|
|
2960
|
-
// src/components/Skeleton/Skeleton.tsx
|
|
2961
|
-
var import_dynamic2 = require("@vanilla-extract/dynamic");
|
|
2962
|
-
var import_react36 = require("react");
|
|
2963
|
-
|
|
2964
|
-
// src/components/Skeleton/Skeleton.css.ts
|
|
2965
|
-
var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2966
|
-
var height = "var(--_1s8datd1)";
|
|
2967
|
-
var lines = "_1s8datd6";
|
|
2968
|
-
var skeleton = /* @__PURE__ */ (0, import_createRuntimeFn18.createRuntimeFn)({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
|
|
2969
|
-
var width = "var(--_1s8datd0)";
|
|
2970
|
-
|
|
2971
|
-
// src/components/Skeleton/Skeleton.tsx
|
|
2972
|
-
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2973
|
-
var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
|
|
2974
|
-
var Skeleton = /* @__PURE__ */ (0, import_react36.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
|
|
2975
|
-
const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
|
|
2976
|
-
const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
|
|
2977
|
-
if (variant === "text" && lines2 > 1) {
|
|
2978
|
-
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2979
|
-
"span",
|
|
2980
|
-
{
|
|
2981
|
-
ref,
|
|
2982
|
-
"aria-hidden": true,
|
|
2983
|
-
className: cx(lines, className),
|
|
2984
|
-
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w }), ...style },
|
|
2985
|
-
...rest,
|
|
2986
|
-
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2987
|
-
"span",
|
|
2988
|
-
{
|
|
2989
|
-
className: skeleton({ variant }),
|
|
2990
|
-
style: (0, import_dynamic2.assignInlineVars)({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
|
|
2991
|
-
},
|
|
2992
|
-
i
|
|
2993
|
-
))
|
|
2994
|
-
}
|
|
2995
|
-
);
|
|
2996
|
-
}
|
|
2997
|
-
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2998
|
-
"span",
|
|
2999
|
-
{
|
|
3000
|
-
ref,
|
|
3001
|
-
"aria-hidden": true,
|
|
3002
|
-
className: cx(skeleton({ variant }), className),
|
|
3003
|
-
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w, [height]: h }), ...style },
|
|
3004
|
-
...rest
|
|
3005
|
-
}
|
|
3006
|
-
);
|
|
3007
|
-
});
|
|
3008
|
-
|
|
3009
3295
|
// src/components/SkipLink/SkipLink.tsx
|
|
3010
|
-
var
|
|
3296
|
+
var import_react40 = require("react");
|
|
3011
3297
|
|
|
3012
3298
|
// src/components/SkipLink/SkipLink.css.ts
|
|
3013
3299
|
var skipLink = "_1t9jaar0";
|
|
3014
3300
|
|
|
3015
3301
|
// src/components/SkipLink/SkipLink.tsx
|
|
3016
|
-
var
|
|
3017
|
-
var SkipLink = /* @__PURE__ */ (0,
|
|
3302
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3303
|
+
var SkipLink = /* @__PURE__ */ (0, import_react40.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
|
|
3018
3304
|
const m = useMessages();
|
|
3019
3305
|
const handleClick = (event) => {
|
|
3020
3306
|
onClick?.(event);
|
|
@@ -3026,28 +3312,28 @@ var SkipLink = /* @__PURE__ */ (0, import_react37.forwardRef)(function SkipLink2
|
|
|
3026
3312
|
target.focus();
|
|
3027
3313
|
target.scrollIntoView?.({ block: "start" });
|
|
3028
3314
|
};
|
|
3029
|
-
return /* @__PURE__ */ (0,
|
|
3315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
|
|
3030
3316
|
});
|
|
3031
3317
|
|
|
3032
3318
|
// src/components/Slider/Slider.tsx
|
|
3033
3319
|
var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
|
|
3034
|
-
var
|
|
3320
|
+
var import_react41 = require("react");
|
|
3035
3321
|
|
|
3036
3322
|
// src/components/Slider/Slider.css.ts
|
|
3037
|
-
var
|
|
3323
|
+
var import_createRuntimeFn22 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3038
3324
|
var field2 = "_126mzjm0";
|
|
3039
3325
|
var header8 = "_126mzjm1";
|
|
3040
3326
|
var helperText2 = "_126mzjm4";
|
|
3041
3327
|
var label4 = "_126mzjm2";
|
|
3042
3328
|
var range2 = "_126mzjmb";
|
|
3043
|
-
var root9 = /* @__PURE__ */ (0,
|
|
3044
|
-
var thumb = /* @__PURE__ */ (0,
|
|
3045
|
-
var track2 = /* @__PURE__ */ (0,
|
|
3329
|
+
var root9 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3330
|
+
var thumb = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3331
|
+
var track2 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3046
3332
|
var value3 = "_126mzjm3";
|
|
3047
3333
|
|
|
3048
3334
|
// src/components/Slider/Slider.tsx
|
|
3049
|
-
var
|
|
3050
|
-
var Slider = /* @__PURE__ */ (0,
|
|
3335
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3336
|
+
var Slider = /* @__PURE__ */ (0, import_react41.forwardRef)(function Slider2(props, ref) {
|
|
3051
3337
|
const {
|
|
3052
3338
|
value: value4,
|
|
3053
3339
|
defaultValue,
|
|
@@ -3068,12 +3354,12 @@ var Slider = /* @__PURE__ */ (0, import_react38.forwardRef)(function Slider2(pro
|
|
|
3068
3354
|
} = props;
|
|
3069
3355
|
const m = useMessages();
|
|
3070
3356
|
const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
|
|
3071
|
-
const generatedId = (0,
|
|
3357
|
+
const generatedId = (0, import_react41.useId)();
|
|
3072
3358
|
const baseId = id ?? generatedId;
|
|
3073
3359
|
const labelId = `${baseId}-label`;
|
|
3074
3360
|
const helperId = `${baseId}-helper`;
|
|
3075
3361
|
const isControlled = "value" in props;
|
|
3076
|
-
const [innerValue, setInnerValue] = (0,
|
|
3362
|
+
const [innerValue, setInnerValue] = (0, import_react41.useState)(defaultValue ?? [min]);
|
|
3077
3363
|
const current2 = isControlled ? value4 ?? [min] : innerValue;
|
|
3078
3364
|
const isRange = current2.length > 1;
|
|
3079
3365
|
const handleChange = (next) => {
|
|
@@ -3081,12 +3367,12 @@ var Slider = /* @__PURE__ */ (0, import_react38.forwardRef)(function Slider2(pro
|
|
|
3081
3367
|
onValueChange?.(next);
|
|
3082
3368
|
};
|
|
3083
3369
|
const valueText = current2.map(formatValue).join(" \u2013 ");
|
|
3084
|
-
return /* @__PURE__ */ (0,
|
|
3085
|
-
(label6 || showValue) && /* @__PURE__ */ (0,
|
|
3086
|
-
label6 && /* @__PURE__ */ (0,
|
|
3087
|
-
showValue && /* @__PURE__ */ (0,
|
|
3370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx(field2, className), children: [
|
|
3371
|
+
(label6 || showValue) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: header8, children: [
|
|
3372
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { id: labelId, className: label4, children: label6 }),
|
|
3373
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: value3, "aria-hidden": true, children: valueText })
|
|
3088
3374
|
] }),
|
|
3089
|
-
/* @__PURE__ */ (0,
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
3090
3376
|
RadixSlider.Root,
|
|
3091
3377
|
{
|
|
3092
3378
|
ref,
|
|
@@ -3099,10 +3385,10 @@ var Slider = /* @__PURE__ */ (0, import_react38.forwardRef)(function Slider2(pro
|
|
|
3099
3385
|
className: root9({ size }),
|
|
3100
3386
|
...rest,
|
|
3101
3387
|
children: [
|
|
3102
|
-
/* @__PURE__ */ (0,
|
|
3388
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RadixSlider.Range, { className: range2 }) }),
|
|
3103
3389
|
current2.map((thumbValue, index) => {
|
|
3104
3390
|
const thumbLabelId = `${baseId}-thumb-${index}`;
|
|
3105
|
-
return /* @__PURE__ */ (0,
|
|
3391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3106
3392
|
RadixSlider.Thumb,
|
|
3107
3393
|
{
|
|
3108
3394
|
className: thumb({ size }),
|
|
@@ -3117,45 +3403,32 @@ var Slider = /* @__PURE__ */ (0, import_react38.forwardRef)(function Slider2(pro
|
|
|
3117
3403
|
]
|
|
3118
3404
|
}
|
|
3119
3405
|
),
|
|
3120
|
-
isRange && current2.map((_, index) => /* @__PURE__ */ (0,
|
|
3406
|
+
isRange && current2.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
|
|
3121
3407
|
label6 ? "" : ariaLabel ? `${ariaLabel} ` : "",
|
|
3122
3408
|
thumbLabels[index] ?? `${index + 1}`
|
|
3123
3409
|
] }, index)),
|
|
3124
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3410
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { id: helperId, className: helperText2, children: helperText3 })
|
|
3125
3411
|
] });
|
|
3126
3412
|
});
|
|
3127
3413
|
|
|
3128
|
-
// src/components/Stack/Stack.tsx
|
|
3129
|
-
var import_react39 = require("react");
|
|
3130
|
-
|
|
3131
|
-
// src/components/Stack/Stack.css.ts
|
|
3132
|
-
var import_createRuntimeFn20 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3133
|
-
var stack = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
|
|
3134
|
-
|
|
3135
|
-
// src/components/Stack/Stack.tsx
|
|
3136
|
-
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3137
|
-
var Stack = /* @__PURE__ */ (0, import_react39.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
3138
|
-
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
|
|
3139
|
-
});
|
|
3140
|
-
|
|
3141
3414
|
// src/components/Switch/Switch.tsx
|
|
3142
3415
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
3143
|
-
var
|
|
3416
|
+
var import_react42 = require("react");
|
|
3144
3417
|
|
|
3145
3418
|
// src/components/Switch/Switch.css.ts
|
|
3146
|
-
var
|
|
3419
|
+
var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3147
3420
|
var label5 = "o33ul29";
|
|
3148
|
-
var root10 = /* @__PURE__ */ (0,
|
|
3149
|
-
var thumb2 = /* @__PURE__ */ (0,
|
|
3150
|
-
var track3 = /* @__PURE__ */ (0,
|
|
3421
|
+
var root10 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3422
|
+
var thumb2 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3423
|
+
var track3 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3151
3424
|
|
|
3152
3425
|
// src/components/Switch/Switch.tsx
|
|
3153
|
-
var
|
|
3154
|
-
var Switch = /* @__PURE__ */ (0,
|
|
3155
|
-
const generatedId = (0,
|
|
3426
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3427
|
+
var Switch = /* @__PURE__ */ (0, import_react42.forwardRef)(function Switch2({ label: label6, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
|
|
3428
|
+
const generatedId = (0, import_react42.useId)();
|
|
3156
3429
|
const switchId = id ?? generatedId;
|
|
3157
|
-
return /* @__PURE__ */ (0,
|
|
3158
|
-
/* @__PURE__ */ (0,
|
|
3430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: cx(root10({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
3431
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3159
3432
|
RadixSwitch.Root,
|
|
3160
3433
|
{
|
|
3161
3434
|
ref,
|
|
@@ -3164,22 +3437,22 @@ var Switch = /* @__PURE__ */ (0, import_react40.forwardRef)(function Switch2({ l
|
|
|
3164
3437
|
"aria-label": ariaLabel,
|
|
3165
3438
|
className: track3({ size }),
|
|
3166
3439
|
...rest,
|
|
3167
|
-
children: /* @__PURE__ */ (0,
|
|
3440
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixSwitch.Thumb, { className: thumb2({ size }) })
|
|
3168
3441
|
}
|
|
3169
3442
|
),
|
|
3170
|
-
label6 && /* @__PURE__ */ (0,
|
|
3443
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { htmlFor: switchId, className: label5, children: label6 })
|
|
3171
3444
|
] });
|
|
3172
3445
|
});
|
|
3173
3446
|
|
|
3174
3447
|
// src/components/Table/Table.tsx
|
|
3175
|
-
var
|
|
3176
|
-
var
|
|
3448
|
+
var import_react43 = require("react");
|
|
3449
|
+
var import_icons18 = require("@bestow-ui/icons");
|
|
3177
3450
|
|
|
3178
3451
|
// src/components/Table/Table.css.ts
|
|
3179
|
-
var
|
|
3452
|
+
var import_createRuntimeFn24 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3180
3453
|
var body4 = "l3ploy5";
|
|
3181
3454
|
var caption = "l3ploy2";
|
|
3182
|
-
var cell2 = /* @__PURE__ */ (0,
|
|
3455
|
+
var cell2 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
|
|
3183
3456
|
var container = "l3ploy0";
|
|
3184
3457
|
var footer4 = "l3ploy7";
|
|
3185
3458
|
var footerCell = "l3ployg";
|
|
@@ -3193,10 +3466,10 @@ var striped = "l3ploy6";
|
|
|
3193
3466
|
var table = "l3ploy1";
|
|
3194
3467
|
|
|
3195
3468
|
// src/components/Table/Table.tsx
|
|
3196
|
-
var
|
|
3197
|
-
var TableSizeContext = /* @__PURE__ */ (0,
|
|
3198
|
-
var TableSectionContext = /* @__PURE__ */ (0,
|
|
3199
|
-
var Table = /* @__PURE__ */ (0,
|
|
3469
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3470
|
+
var TableSizeContext = /* @__PURE__ */ (0, import_react43.createContext)("md");
|
|
3471
|
+
var TableSectionContext = /* @__PURE__ */ (0, import_react43.createContext)("body");
|
|
3472
|
+
var Table = /* @__PURE__ */ (0, import_react43.forwardRef)(function Table2({
|
|
3200
3473
|
size = "md",
|
|
3201
3474
|
striped: striped2,
|
|
3202
3475
|
stickyHeader: stickyHeader2,
|
|
@@ -3208,8 +3481,8 @@ var Table = /* @__PURE__ */ (0, import_react41.forwardRef)(function Table2({
|
|
|
3208
3481
|
children,
|
|
3209
3482
|
...rest
|
|
3210
3483
|
}, ref) {
|
|
3211
|
-
const captionId = (0,
|
|
3212
|
-
return /* @__PURE__ */ (0,
|
|
3484
|
+
const captionId = (0, import_react43.useId)();
|
|
3485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3213
3486
|
"div",
|
|
3214
3487
|
{
|
|
3215
3488
|
className: cx(container, containerClassName),
|
|
@@ -3218,7 +3491,7 @@ var Table = /* @__PURE__ */ (0, import_react41.forwardRef)(function Table2({
|
|
|
3218
3491
|
role: "region",
|
|
3219
3492
|
"aria-labelledby": caption2 ? captionId : void 0,
|
|
3220
3493
|
"aria-label": caption2 ? void 0 : ariaLabel,
|
|
3221
|
-
children: /* @__PURE__ */ (0,
|
|
3494
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
3222
3495
|
"table",
|
|
3223
3496
|
{
|
|
3224
3497
|
ref,
|
|
@@ -3226,7 +3499,7 @@ var Table = /* @__PURE__ */ (0, import_react41.forwardRef)(function Table2({
|
|
|
3226
3499
|
"aria-label": caption2 ? void 0 : ariaLabel,
|
|
3227
3500
|
...rest,
|
|
3228
3501
|
children: [
|
|
3229
|
-
caption2 && /* @__PURE__ */ (0,
|
|
3502
|
+
caption2 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("caption", { id: captionId, className: caption, children: caption2 }),
|
|
3230
3503
|
children
|
|
3231
3504
|
]
|
|
3232
3505
|
}
|
|
@@ -3234,31 +3507,31 @@ var Table = /* @__PURE__ */ (0, import_react41.forwardRef)(function Table2({
|
|
|
3234
3507
|
}
|
|
3235
3508
|
) });
|
|
3236
3509
|
});
|
|
3237
|
-
var TableHeader = /* @__PURE__ */ (0,
|
|
3510
|
+
var TableHeader = /* @__PURE__ */ (0, import_react43.forwardRef)(
|
|
3238
3511
|
function TableHeader2({ className, ...rest }, ref) {
|
|
3239
|
-
return /* @__PURE__ */ (0,
|
|
3512
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { ref, className: cx(header9, className), ...rest }) });
|
|
3240
3513
|
}
|
|
3241
3514
|
);
|
|
3242
|
-
var TableBody = /* @__PURE__ */ (0,
|
|
3515
|
+
var TableBody = /* @__PURE__ */ (0, import_react43.forwardRef)(
|
|
3243
3516
|
function TableBody2({ className, ...rest }, ref) {
|
|
3244
|
-
return /* @__PURE__ */ (0,
|
|
3517
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tbody", { ref, className: cx(body4, className), ...rest }) });
|
|
3245
3518
|
}
|
|
3246
3519
|
);
|
|
3247
|
-
var TableFooter = /* @__PURE__ */ (0,
|
|
3520
|
+
var TableFooter = /* @__PURE__ */ (0, import_react43.forwardRef)(
|
|
3248
3521
|
function TableFooter2({ className, ...rest }, ref) {
|
|
3249
|
-
return /* @__PURE__ */ (0,
|
|
3522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tfoot", { ref, className: cx(footer4, className), ...rest }) });
|
|
3250
3523
|
}
|
|
3251
3524
|
);
|
|
3252
|
-
var TableRow = /* @__PURE__ */ (0,
|
|
3253
|
-
return /* @__PURE__ */ (0,
|
|
3525
|
+
var TableRow = /* @__PURE__ */ (0, import_react43.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
|
|
3526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
|
|
3254
3527
|
});
|
|
3255
|
-
var TableHead = /* @__PURE__ */ (0,
|
|
3256
|
-
const size = (0,
|
|
3257
|
-
const section = (0,
|
|
3528
|
+
var TableHead = /* @__PURE__ */ (0, import_react43.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
|
|
3529
|
+
const size = (0, import_react43.useContext)(TableSizeContext);
|
|
3530
|
+
const section = (0, import_react43.useContext)(TableSectionContext);
|
|
3258
3531
|
const sortable = onSort !== void 0;
|
|
3259
3532
|
const direction = sortDirection ?? "none";
|
|
3260
|
-
const SortIcon = direction === "descending" ?
|
|
3261
|
-
return /* @__PURE__ */ (0,
|
|
3533
|
+
const SortIcon = direction === "descending" ? import_icons18.ArrowDownIcon : import_icons18.ArrowUpIcon;
|
|
3534
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3262
3535
|
"th",
|
|
3263
3536
|
{
|
|
3264
3537
|
ref,
|
|
@@ -3270,17 +3543,17 @@ var TableHead = /* @__PURE__ */ (0, import_react41.forwardRef)(function TableHea
|
|
|
3270
3543
|
className
|
|
3271
3544
|
),
|
|
3272
3545
|
...rest,
|
|
3273
|
-
children: sortable ? /* @__PURE__ */ (0,
|
|
3546
|
+
children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type: "button", className: sortButton, onClick: onSort, children: [
|
|
3274
3547
|
children,
|
|
3275
|
-
/* @__PURE__ */ (0,
|
|
3548
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
|
|
3276
3549
|
] }) : children
|
|
3277
3550
|
}
|
|
3278
3551
|
);
|
|
3279
3552
|
});
|
|
3280
|
-
var TableCell = /* @__PURE__ */ (0,
|
|
3281
|
-
const size = (0,
|
|
3282
|
-
const section = (0,
|
|
3283
|
-
return /* @__PURE__ */ (0,
|
|
3553
|
+
var TableCell = /* @__PURE__ */ (0, import_react43.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
|
|
3554
|
+
const size = (0, import_react43.useContext)(TableSizeContext);
|
|
3555
|
+
const section = (0, import_react43.useContext)(TableSectionContext);
|
|
3556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3284
3557
|
"td",
|
|
3285
3558
|
{
|
|
3286
3559
|
ref,
|
|
@@ -3292,47 +3565,48 @@ var TableCell = /* @__PURE__ */ (0, import_react41.forwardRef)(function TableCel
|
|
|
3292
3565
|
|
|
3293
3566
|
// src/components/Tabs/Tabs.tsx
|
|
3294
3567
|
var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
|
|
3295
|
-
var
|
|
3568
|
+
var import_react44 = require("react");
|
|
3296
3569
|
|
|
3297
3570
|
// src/components/Tabs/Tabs.css.ts
|
|
3298
|
-
var
|
|
3299
|
-
var content10 = "
|
|
3300
|
-
var list4 = /* @__PURE__ */ (0,
|
|
3301
|
-
var
|
|
3571
|
+
var import_createRuntimeFn25 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3572
|
+
var content10 = "fvhbtdb";
|
|
3573
|
+
var list4 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "fvhbtd1", variantClassNames: { variant: { line: "fvhbtd2", soft: "fvhbtd3" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
|
|
3574
|
+
var root11 = "fvhbtd0";
|
|
3575
|
+
var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "fvhbtd4", variantClassNames: { variant: { line: "fvhbtd5", soft: "fvhbtd6" }, size: { sm: "fvhbtd7", md: "fvhbtd8" } }, defaultVariants: { variant: "line", size: "md" }, compoundVariants: [[{ variant: "soft", size: "sm" }, "fvhbtd9"], [{ variant: "soft", size: "md" }, "fvhbtda"]] });
|
|
3302
3576
|
|
|
3303
3577
|
// src/components/Tabs/Tabs.tsx
|
|
3304
|
-
var
|
|
3305
|
-
var TabsStyleContext = /* @__PURE__ */ (0,
|
|
3306
|
-
var Tabs = /* @__PURE__ */ (0,
|
|
3578
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3579
|
+
var TabsStyleContext = /* @__PURE__ */ (0, import_react44.createContext)({ variant: "line", size: "md" });
|
|
3580
|
+
var Tabs = /* @__PURE__ */ (0, import_react44.forwardRef)(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
|
|
3307
3581
|
const controlled = "value" in props ? { value: props.value ?? "" } : {};
|
|
3308
|
-
return /* @__PURE__ */ (0,
|
|
3582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixTabs.Root, { ref, className: cx(root11, className), ...props, ...controlled }) });
|
|
3309
3583
|
});
|
|
3310
|
-
var TabsList = /* @__PURE__ */ (0,
|
|
3311
|
-
const { variant } = (0,
|
|
3312
|
-
return /* @__PURE__ */ (0,
|
|
3584
|
+
var TabsList = /* @__PURE__ */ (0, import_react44.forwardRef)(function TabsList2({ className, ...rest }, ref) {
|
|
3585
|
+
const { variant } = (0, import_react44.useContext)(TabsStyleContext);
|
|
3586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixTabs.List, { ref, className: cx(list4({ variant }), className), ...rest });
|
|
3313
3587
|
});
|
|
3314
|
-
var TabsTrigger = /* @__PURE__ */ (0,
|
|
3315
|
-
const { variant, size } = (0,
|
|
3316
|
-
return /* @__PURE__ */ (0,
|
|
3588
|
+
var TabsTrigger = /* @__PURE__ */ (0, import_react44.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
|
|
3589
|
+
const { variant, size } = (0, import_react44.useContext)(TabsStyleContext);
|
|
3590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
|
|
3317
3591
|
});
|
|
3318
|
-
var TabsContent = /* @__PURE__ */ (0,
|
|
3319
|
-
return /* @__PURE__ */ (0,
|
|
3592
|
+
var TabsContent = /* @__PURE__ */ (0, import_react44.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
|
|
3593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
|
|
3320
3594
|
});
|
|
3321
3595
|
|
|
3322
3596
|
// src/components/Textarea/Textarea.tsx
|
|
3323
|
-
var
|
|
3597
|
+
var import_react45 = require("react");
|
|
3324
3598
|
|
|
3325
3599
|
// src/components/Textarea/Textarea.css.ts
|
|
3326
|
-
var
|
|
3600
|
+
var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3327
3601
|
var count = "_1koawa9";
|
|
3328
3602
|
var countOver = "_1koawaa";
|
|
3329
3603
|
var defaultWidth = "_1koawa7";
|
|
3330
3604
|
var footer5 = "_1koawa8";
|
|
3331
|
-
var textarea = /* @__PURE__ */ (0,
|
|
3605
|
+
var textarea = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
|
|
3332
3606
|
|
|
3333
3607
|
// src/components/Textarea/Textarea.tsx
|
|
3334
|
-
var
|
|
3335
|
-
var Textarea = /* @__PURE__ */ (0,
|
|
3608
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3609
|
+
var Textarea = /* @__PURE__ */ (0, import_react45.forwardRef)(function Textarea2({
|
|
3336
3610
|
label: label6,
|
|
3337
3611
|
helperText: helperText3,
|
|
3338
3612
|
error,
|
|
@@ -3353,13 +3627,13 @@ var Textarea = /* @__PURE__ */ (0, import_react43.forwardRef)(function Textarea2
|
|
|
3353
3627
|
"aria-describedby": ariaDescribedBy,
|
|
3354
3628
|
...rest
|
|
3355
3629
|
}, ref) {
|
|
3356
|
-
const generatedId = (0,
|
|
3630
|
+
const generatedId = (0, import_react45.useId)();
|
|
3357
3631
|
const textareaId = id ?? generatedId;
|
|
3358
3632
|
const helperId = helperText3 ? `${textareaId}-helper` : void 0;
|
|
3359
|
-
const innerRef = (0,
|
|
3360
|
-
const [uncontrolledLength, setUncontrolledLength] = (0,
|
|
3633
|
+
const innerRef = (0, import_react45.useRef)(null);
|
|
3634
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react45.useState)(() => String(defaultValue ?? "").length);
|
|
3361
3635
|
const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
|
|
3362
|
-
const fitHeight = (0,
|
|
3636
|
+
const fitHeight = (0, import_react45.useCallback)(() => {
|
|
3363
3637
|
const el = innerRef.current;
|
|
3364
3638
|
if (!autoResize || !el) return;
|
|
3365
3639
|
el.style.height = "auto";
|
|
@@ -3372,12 +3646,12 @@ var Textarea = /* @__PURE__ */ (0, import_react43.forwardRef)(function Textarea2
|
|
|
3372
3646
|
fitHeight();
|
|
3373
3647
|
onChange?.(event);
|
|
3374
3648
|
};
|
|
3375
|
-
return /* @__PURE__ */ (0,
|
|
3376
|
-
label6 && /* @__PURE__ */ (0,
|
|
3649
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
3650
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("label", { htmlFor: textareaId, className: label2, children: [
|
|
3377
3651
|
label6,
|
|
3378
|
-
required && /* @__PURE__ */ (0,
|
|
3652
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
3379
3653
|
] }),
|
|
3380
|
-
/* @__PURE__ */ (0,
|
|
3654
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3381
3655
|
"textarea",
|
|
3382
3656
|
{
|
|
3383
3657
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -3399,51 +3673,51 @@ var Textarea = /* @__PURE__ */ (0, import_react43.forwardRef)(function Textarea2
|
|
|
3399
3673
|
...rest
|
|
3400
3674
|
}
|
|
3401
3675
|
),
|
|
3402
|
-
(helperText3 || showCount) && /* @__PURE__ */ (0,
|
|
3403
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3404
|
-
showCount && /* @__PURE__ */ (0,
|
|
3676
|
+
(helperText3 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: footer5, children: [
|
|
3677
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
|
|
3678
|
+
showCount && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
|
|
3405
3679
|
] })
|
|
3406
3680
|
] });
|
|
3407
3681
|
});
|
|
3408
3682
|
|
|
3409
3683
|
// src/components/Toast/Toast.tsx
|
|
3410
3684
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
3411
|
-
var
|
|
3412
|
-
var
|
|
3685
|
+
var import_react46 = require("react");
|
|
3686
|
+
var import_icons19 = require("@bestow-ui/icons");
|
|
3413
3687
|
|
|
3414
3688
|
// src/components/Toast/Toast.css.ts
|
|
3415
|
-
var
|
|
3689
|
+
var import_createRuntimeFn27 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3416
3690
|
var action2 = "_1g11zvx9";
|
|
3417
3691
|
var close = "_1g11zvxa";
|
|
3418
3692
|
var description5 = "_1g11zvx8";
|
|
3419
3693
|
var title5 = "_1g11zvx7";
|
|
3420
|
-
var toast = /* @__PURE__ */ (0,
|
|
3694
|
+
var toast = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
|
|
3421
3695
|
var viewport2 = "_1g11zvx0";
|
|
3422
3696
|
|
|
3423
3697
|
// src/components/Toast/Toast.tsx
|
|
3424
|
-
var
|
|
3698
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3425
3699
|
var REMOVE_DELAY = 500;
|
|
3426
|
-
var ToastContext = /* @__PURE__ */ (0,
|
|
3700
|
+
var ToastContext = /* @__PURE__ */ (0, import_react46.createContext)(null);
|
|
3427
3701
|
function ToastProvider({ children, duration = 5e3, label: labelProp }) {
|
|
3428
3702
|
const m = useMessages();
|
|
3429
3703
|
const label6 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
|
|
3430
|
-
const [toasts, setToasts] = (0,
|
|
3431
|
-
const nextId = (0,
|
|
3704
|
+
const [toasts, setToasts] = (0, import_react46.useState)([]);
|
|
3705
|
+
const nextId = (0, import_react46.useRef)(0);
|
|
3432
3706
|
const portal2 = usePortalProps();
|
|
3433
|
-
const toast2 = (0,
|
|
3707
|
+
const toast2 = (0, import_react46.useCallback)((options) => {
|
|
3434
3708
|
const id = nextId.current++;
|
|
3435
3709
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
3436
3710
|
return id;
|
|
3437
3711
|
}, []);
|
|
3438
|
-
const dismiss = (0,
|
|
3712
|
+
const dismiss = (0, import_react46.useCallback)((id) => {
|
|
3439
3713
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
3440
3714
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
3441
3715
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
3442
3716
|
}, []);
|
|
3443
|
-
const value4 = (0,
|
|
3444
|
-
return /* @__PURE__ */ (0,
|
|
3717
|
+
const value4 = (0, import_react46.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
3718
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
|
|
3445
3719
|
children,
|
|
3446
|
-
toasts.map(({ id, open, title: title6, description: description6, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0,
|
|
3720
|
+
toasts.map(({ id, open, title: title6, description: description6, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3447
3721
|
RadixToast.Root,
|
|
3448
3722
|
{
|
|
3449
3723
|
open,
|
|
@@ -3453,19 +3727,19 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
|
|
|
3453
3727
|
},
|
|
3454
3728
|
className: toast({ color }),
|
|
3455
3729
|
children: [
|
|
3456
|
-
/* @__PURE__ */ (0,
|
|
3457
|
-
description6 && /* @__PURE__ */ (0,
|
|
3458
|
-
action3 && /* @__PURE__ */ (0,
|
|
3459
|
-
/* @__PURE__ */ (0,
|
|
3730
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixToast.Title, { className: title5, children: title6 }),
|
|
3731
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixToast.Description, { className: description5, children: description6 }),
|
|
3732
|
+
action3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
|
|
3733
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons19.XIcon, { size: 16 }) })
|
|
3460
3734
|
]
|
|
3461
3735
|
},
|
|
3462
3736
|
id
|
|
3463
3737
|
)),
|
|
3464
|
-
/* @__PURE__ */ (0,
|
|
3738
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
3465
3739
|
] }) });
|
|
3466
3740
|
}
|
|
3467
3741
|
function useToast() {
|
|
3468
|
-
const context = (0,
|
|
3742
|
+
const context = (0, import_react46.useContext)(ToastContext);
|
|
3469
3743
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
3470
3744
|
return context;
|
|
3471
3745
|
}
|
|
@@ -3478,7 +3752,7 @@ var arrow2 = "z7rufs1";
|
|
|
3478
3752
|
var content11 = "z7rufs0";
|
|
3479
3753
|
|
|
3480
3754
|
// src/components/Tooltip/Tooltip.tsx
|
|
3481
|
-
var
|
|
3755
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
3482
3756
|
function Tooltip({
|
|
3483
3757
|
content: content12,
|
|
3484
3758
|
children,
|
|
@@ -3493,9 +3767,9 @@ function Tooltip({
|
|
|
3493
3767
|
}) {
|
|
3494
3768
|
const portal2 = usePortalProps();
|
|
3495
3769
|
if (disabled || content12 == null || content12 === "") return children;
|
|
3496
|
-
return /* @__PURE__ */ (0,
|
|
3497
|
-
/* @__PURE__ */ (0,
|
|
3498
|
-
/* @__PURE__ */ (0,
|
|
3770
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
3771
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
|
|
3772
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
3499
3773
|
RadixTooltip.Content,
|
|
3500
3774
|
{
|
|
3501
3775
|
side,
|
|
@@ -3506,59 +3780,27 @@ function Tooltip({
|
|
|
3506
3780
|
style: portal2.style,
|
|
3507
3781
|
children: [
|
|
3508
3782
|
content12,
|
|
3509
|
-
/* @__PURE__ */ (0,
|
|
3783
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
|
|
3510
3784
|
]
|
|
3511
3785
|
}
|
|
3512
3786
|
) })
|
|
3513
3787
|
] }) });
|
|
3514
3788
|
}
|
|
3515
3789
|
|
|
3516
|
-
// src/components/Typography/Typography.tsx
|
|
3517
|
-
var import_react45 = require("react");
|
|
3518
|
-
|
|
3519
|
-
// src/components/Typography/Typography.css.ts
|
|
3520
|
-
var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3521
|
-
var typography = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", warning: "kioliog", inherit: "kiolioh" }, weight: { regular: "kiolioi", medium: "kiolioj", semibold: "kioliok", bold: "kioliol" }, align: { start: "kioliom", center: "kiolion", end: "kiolioo" }, truncate: { true: "kioliop" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
|
|
3522
|
-
|
|
3523
|
-
// src/components/Typography/Typography.tsx
|
|
3524
|
-
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3525
|
-
var defaultElement = {
|
|
3526
|
-
display: "h1",
|
|
3527
|
-
h1: "h1",
|
|
3528
|
-
h2: "h2",
|
|
3529
|
-
h3: "h3",
|
|
3530
|
-
h4: "h4",
|
|
3531
|
-
"body-lg": "p",
|
|
3532
|
-
body: "p",
|
|
3533
|
-
"body-sm": "p",
|
|
3534
|
-
caption: "span"
|
|
3535
|
-
};
|
|
3536
|
-
var Typography = /* @__PURE__ */ (0, import_react45.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
3537
|
-
const Component = as ?? defaultElement[variant];
|
|
3538
|
-
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3539
|
-
Component,
|
|
3540
|
-
{
|
|
3541
|
-
ref,
|
|
3542
|
-
className: cx(typography({ variant, color, weight, align, truncate }), className),
|
|
3543
|
-
...rest
|
|
3544
|
-
}
|
|
3545
|
-
);
|
|
3546
|
-
});
|
|
3547
|
-
|
|
3548
3790
|
// src/components/VerificationCodeInput/VerificationCodeInput.tsx
|
|
3549
|
-
var
|
|
3791
|
+
var import_react47 = require("react");
|
|
3550
3792
|
|
|
3551
3793
|
// src/components/VerificationCodeInput/VerificationCodeInput.css.ts
|
|
3552
|
-
var
|
|
3794
|
+
var input5 = "ea01812";
|
|
3553
3795
|
var row4 = "ea01810";
|
|
3554
3796
|
var slot = "ea01813";
|
|
3555
3797
|
var slots = "ea01811";
|
|
3556
3798
|
var timer = "ea01814";
|
|
3557
3799
|
|
|
3558
3800
|
// src/components/VerificationCodeInput/VerificationCodeInput.tsx
|
|
3559
|
-
var
|
|
3801
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
3560
3802
|
var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
|
|
3561
|
-
var VerificationCodeInput = /* @__PURE__ */ (0,
|
|
3803
|
+
var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
3562
3804
|
function VerificationCodeInput2(props, ref) {
|
|
3563
3805
|
const {
|
|
3564
3806
|
length = 6,
|
|
@@ -3585,23 +3827,23 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3585
3827
|
const label6 = labelProp ?? m.verificationCode ?? "\uC778\uC99D\uBC88\uD638";
|
|
3586
3828
|
const resendText = resendTextProp ?? m.resend ?? "\uC7AC\uC804\uC1A1";
|
|
3587
3829
|
const expiredText = expiredTextProp ?? m.verificationExpired ?? "\uC778\uC99D \uC2DC\uAC04\uC774 \uC9C0\uB0AC\uC5B4\uC694. \uC7AC\uC804\uC1A1\uD574 \uC8FC\uC138\uC694.";
|
|
3588
|
-
const generatedId = (0,
|
|
3830
|
+
const generatedId = (0, import_react47.useId)();
|
|
3589
3831
|
const inputId = id ?? generatedId;
|
|
3590
3832
|
const helperId = `${inputId}-helper`;
|
|
3591
3833
|
const statusId = `${inputId}-status`;
|
|
3592
|
-
const inputRef = (0,
|
|
3834
|
+
const inputRef = (0, import_react47.useRef)(null);
|
|
3593
3835
|
const isControlled = "value" in props;
|
|
3594
|
-
const [innerValue, setInnerValue] = (0,
|
|
3836
|
+
const [innerValue, setInnerValue] = (0, import_react47.useState)(defaultValue ?? "");
|
|
3595
3837
|
const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
|
|
3596
|
-
const [focused, setFocused] = (0,
|
|
3597
|
-
const [endAt, setEndAt] = (0,
|
|
3598
|
-
const [remaining, setRemaining] = (0,
|
|
3838
|
+
const [focused, setFocused] = (0, import_react47.useState)(false);
|
|
3839
|
+
const [endAt, setEndAt] = (0, import_react47.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
|
|
3840
|
+
const [remaining, setRemaining] = (0, import_react47.useState)(expiresIn ?? 0);
|
|
3599
3841
|
const expired = expiresIn !== void 0 && remaining <= 0;
|
|
3600
|
-
const onExpireRef = (0,
|
|
3601
|
-
(0,
|
|
3842
|
+
const onExpireRef = (0, import_react47.useRef)(onExpire);
|
|
3843
|
+
(0, import_react47.useEffect)(() => {
|
|
3602
3844
|
onExpireRef.current = onExpire;
|
|
3603
3845
|
});
|
|
3604
|
-
(0,
|
|
3846
|
+
(0, import_react47.useEffect)(() => {
|
|
3605
3847
|
if (endAt === null) return;
|
|
3606
3848
|
const tick = () => {
|
|
3607
3849
|
const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
|
|
@@ -3636,17 +3878,17 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3636
3878
|
};
|
|
3637
3879
|
const description6 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
|
|
3638
3880
|
const activeIndex = Math.min(code.length, length - 1);
|
|
3639
|
-
return /* @__PURE__ */ (0,
|
|
3881
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
3640
3882
|
"div",
|
|
3641
3883
|
{
|
|
3642
3884
|
className: cx(field, className),
|
|
3643
3885
|
"data-invalid": error || void 0,
|
|
3644
3886
|
"data-disabled": disabled || void 0,
|
|
3645
3887
|
children: [
|
|
3646
|
-
/* @__PURE__ */ (0,
|
|
3647
|
-
/* @__PURE__ */ (0,
|
|
3648
|
-
/* @__PURE__ */ (0,
|
|
3649
|
-
/* @__PURE__ */ (0,
|
|
3888
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: inputId, className: label2, children: label6 }),
|
|
3889
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: row4, children: [
|
|
3890
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: slots, children: [
|
|
3891
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3650
3892
|
"input",
|
|
3651
3893
|
{
|
|
3652
3894
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -3663,10 +3905,10 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3663
3905
|
autoFocus,
|
|
3664
3906
|
"aria-invalid": error || void 0,
|
|
3665
3907
|
"aria-describedby": `${helperId} ${statusId}`,
|
|
3666
|
-
className:
|
|
3908
|
+
className: input5
|
|
3667
3909
|
}
|
|
3668
3910
|
),
|
|
3669
|
-
Array.from({ length }, (_, index) => /* @__PURE__ */ (0,
|
|
3911
|
+
Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3670
3912
|
"div",
|
|
3671
3913
|
{
|
|
3672
3914
|
className: slot,
|
|
@@ -3677,12 +3919,12 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3677
3919
|
index
|
|
3678
3920
|
))
|
|
3679
3921
|
] }),
|
|
3680
|
-
expiresIn !== void 0 && /* @__PURE__ */ (0,
|
|
3681
|
-
onResend && /* @__PURE__ */ (0,
|
|
3922
|
+
expiresIn !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { role: "timer", className: timer, children: formatTime(remaining) }),
|
|
3923
|
+
onResend && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
|
|
3682
3924
|
] }),
|
|
3683
|
-
/* @__PURE__ */ (0,
|
|
3684
|
-
/* @__PURE__ */ (0,
|
|
3685
|
-
name && /* @__PURE__ */ (0,
|
|
3925
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { id: helperId, className: helperText({ error }), children: description6 }),
|
|
3926
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
|
|
3927
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("input", { type: "hidden", name, value: code })
|
|
3686
3928
|
]
|
|
3687
3929
|
}
|
|
3688
3930
|
);
|
|
@@ -3713,11 +3955,17 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3713
3955
|
Drawer,
|
|
3714
3956
|
DrawerClose,
|
|
3715
3957
|
DropdownMenu,
|
|
3958
|
+
DropdownMenuCheckboxItem,
|
|
3716
3959
|
DropdownMenuContent,
|
|
3717
3960
|
DropdownMenuGroup,
|
|
3718
3961
|
DropdownMenuItem,
|
|
3719
3962
|
DropdownMenuLabel,
|
|
3963
|
+
DropdownMenuRadioGroup,
|
|
3964
|
+
DropdownMenuRadioItem,
|
|
3720
3965
|
DropdownMenuSeparator,
|
|
3966
|
+
DropdownMenuSub,
|
|
3967
|
+
DropdownMenuSubContent,
|
|
3968
|
+
DropdownMenuSubTrigger,
|
|
3721
3969
|
DropdownMenuTrigger,
|
|
3722
3970
|
IconButton,
|
|
3723
3971
|
Input,
|
|
@@ -3725,6 +3973,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3725
3973
|
LocaleProvider,
|
|
3726
3974
|
Modal,
|
|
3727
3975
|
ModalClose,
|
|
3976
|
+
NumberInput,
|
|
3728
3977
|
Pagination,
|
|
3729
3978
|
PhoneNumberInput,
|
|
3730
3979
|
Popover,
|