@bestow-ui/react 1.2.0 → 1.3.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 +59 -69
- package/dist/{chunk-LHT64JDG.js → chunk-VH7JW6N7.js} +77 -3
- package/dist/chunk-VH7JW6N7.js.map +1 -0
- package/dist/client.js +711 -341
- package/dist/client.js.map +1 -1
- package/dist/index.cjs +1175 -721
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +479 -107
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +210 -12
- package/dist/index.d.ts +210 -12
- package/dist/shared.js +82 -74
- package/dist/shared.js.map +1 -1
- package/package.json +21 -11
- package/dist/chunk-LHT64JDG.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -50,6 +50,7 @@ __export(src_exports, {
|
|
|
50
50
|
Checkbox: () => Checkbox,
|
|
51
51
|
Combobox: () => Combobox,
|
|
52
52
|
DatePicker: () => DatePicker,
|
|
53
|
+
DescriptionList: () => DescriptionList,
|
|
53
54
|
Divider: () => Divider,
|
|
54
55
|
Drawer: () => Drawer,
|
|
55
56
|
DrawerClose: () => DrawerClose,
|
|
@@ -66,6 +67,8 @@ __export(src_exports, {
|
|
|
66
67
|
DropdownMenuSubContent: () => DropdownMenuSubContent,
|
|
67
68
|
DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
|
|
68
69
|
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
70
|
+
ErrorSummary: () => ErrorSummary,
|
|
71
|
+
FileUpload: () => FileUpload,
|
|
69
72
|
IconButton: () => IconButton,
|
|
70
73
|
Input: () => Input,
|
|
71
74
|
Link: () => Link,
|
|
@@ -86,14 +89,17 @@ __export(src_exports, {
|
|
|
86
89
|
Slider: () => Slider,
|
|
87
90
|
Spinner: () => Spinner,
|
|
88
91
|
Stack: () => Stack,
|
|
92
|
+
Stepper: () => Stepper,
|
|
89
93
|
Switch: () => Switch,
|
|
90
94
|
Table: () => Table,
|
|
91
95
|
TableBody: () => TableBody,
|
|
92
96
|
TableCell: () => TableCell,
|
|
97
|
+
TableEmpty: () => TableEmpty,
|
|
93
98
|
TableFooter: () => TableFooter,
|
|
94
99
|
TableHead: () => TableHead,
|
|
95
100
|
TableHeader: () => TableHeader,
|
|
96
101
|
TableRow: () => TableRow,
|
|
102
|
+
TableSkeleton: () => TableSkeleton,
|
|
97
103
|
Tabs: () => Tabs,
|
|
98
104
|
TabsContent: () => TabsContent,
|
|
99
105
|
TabsList: () => TabsList,
|
|
@@ -105,11 +111,13 @@ __export(src_exports, {
|
|
|
105
111
|
Tooltip: () => Tooltip,
|
|
106
112
|
Typography: () => Typography,
|
|
107
113
|
VerificationCodeInput: () => VerificationCodeInput,
|
|
114
|
+
VisuallyHidden: () => VisuallyHidden,
|
|
108
115
|
composeExtraAddress: () => composeExtraAddress,
|
|
109
116
|
contrastRatio: () => contrastRatio,
|
|
110
117
|
createIntentColors: () => createIntentColors,
|
|
111
118
|
createTheme: () => createTheme,
|
|
112
119
|
en: () => en,
|
|
120
|
+
focusField: () => focusField,
|
|
113
121
|
formatBusinessNumber: () => formatBusinessNumber,
|
|
114
122
|
formatKoreanAmount: () => formatKoreanAmount,
|
|
115
123
|
formatKoreanDate: () => formatKoreanDate,
|
|
@@ -122,6 +130,7 @@ __export(src_exports, {
|
|
|
122
130
|
toISODate: () => toISODate,
|
|
123
131
|
useMessages: () => useMessages,
|
|
124
132
|
usePortalProps: () => usePortalProps,
|
|
133
|
+
useTableSelection: () => useTableSelection,
|
|
125
134
|
useTheme: () => useTheme,
|
|
126
135
|
useToast: () => useToast,
|
|
127
136
|
vars: () => vars
|
|
@@ -130,7 +139,7 @@ module.exports = __toCommonJS(src_exports);
|
|
|
130
139
|
|
|
131
140
|
// src/theme/contract.css.ts
|
|
132
141
|
var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
|
|
133
|
-
var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: {
|
|
142
|
+
var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: { overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", dropdown: "var(--bestow-z-index-dropdown)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" }, warning: { solid: "var(--bestow-color-warning-solid)", solidHover: "var(--bestow-color-warning-solid-hover)", contrast: "var(--bestow-color-warning-contrast)", subtle: "var(--bestow-color-warning-subtle)", subtleHover: "var(--bestow-color-warning-subtle-hover)", text: "var(--bestow-color-warning-text)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" } };
|
|
134
143
|
|
|
135
144
|
// src/theme/color.ts
|
|
136
145
|
var import_tokens = require("@bestow-ui/tokens");
|
|
@@ -197,14 +206,14 @@ function blend(fg, alpha, bg) {
|
|
|
197
206
|
return toHex(f.map((v, i) => v * alpha + b[i] * (1 - alpha)));
|
|
198
207
|
}
|
|
199
208
|
var withL = (base, l, c = base.c) => toHex(oklchToRgb({ l, c, h: base.h }));
|
|
200
|
-
function findReadable(base, startL,
|
|
209
|
+
function findReadable(base, startL, step2, backgrounds) {
|
|
201
210
|
let l = startL;
|
|
202
211
|
for (let i = 0; i < 40; i++) {
|
|
203
212
|
const hex = withL(base, l);
|
|
204
213
|
if (backgrounds.every((bg) => contrastRatio(hex, bg) >= 4.5)) return hex;
|
|
205
|
-
l = Math.min(1, Math.max(0, l +
|
|
214
|
+
l = Math.min(1, Math.max(0, l + step2));
|
|
206
215
|
}
|
|
207
|
-
return
|
|
216
|
+
return step2 < 0 ? import_tokens.palette.black : import_tokens.palette.white;
|
|
208
217
|
}
|
|
209
218
|
function hoverFor(base, delta, contrast) {
|
|
210
219
|
const preferred = withL(base, Math.min(1, Math.max(0, base.l + delta)));
|
|
@@ -342,6 +351,18 @@ var en = {
|
|
|
342
351
|
skipToContent: "Skip to main content",
|
|
343
352
|
decrement: "Decrease",
|
|
344
353
|
increment: "Increase",
|
|
354
|
+
steps: "Progress",
|
|
355
|
+
stepCompleted: "completed",
|
|
356
|
+
fileSelect: "Choose files",
|
|
357
|
+
fileDropHint: "or drag and drop here",
|
|
358
|
+
fileList: "Selected files",
|
|
359
|
+
fileRemove: (name) => `Remove ${name}`,
|
|
360
|
+
filesSelected: (count2) => `${count2} ${count2 === 1 ? "file" : "files"} selected`,
|
|
361
|
+
fileRemoved: (name) => `${name} removed`,
|
|
362
|
+
fileTooLarge: (name, maxSize) => `${name}: files must be ${maxSize} or smaller.`,
|
|
363
|
+
fileTypeNotAllowed: (name) => `${name}: this file type is not allowed.`,
|
|
364
|
+
fileTooMany: (maxFiles) => `You can upload up to ${maxFiles} files.`,
|
|
365
|
+
errorSummaryTitle: (count2) => `There ${count2 === 1 ? "is 1 problem" : `are ${count2} problems`} with your answers`,
|
|
345
366
|
rangeStart: "minimum",
|
|
346
367
|
rangeEnd: "maximum",
|
|
347
368
|
agreeAll: "Agree to all",
|
|
@@ -529,7 +550,7 @@ var kakaoPostcodeProvider = async (container2, onSelect) => {
|
|
|
529
550
|
|
|
530
551
|
// src/components/AgreementGroup/agreements.ts
|
|
531
552
|
function hasAllRequiredAgreements(items2, value4) {
|
|
532
|
-
return items2.every((
|
|
553
|
+
return items2.every((item10) => !item10.required || value4.includes(item10.value));
|
|
533
554
|
}
|
|
534
555
|
|
|
535
556
|
// src/components/Badge/Badge.tsx
|
|
@@ -579,48 +600,80 @@ var CardFooter = /* @__PURE__ */ (0, import_react2.forwardRef)(function CardFoot
|
|
|
579
600
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx(footer, className), ...rest });
|
|
580
601
|
});
|
|
581
602
|
|
|
582
|
-
// src/components/
|
|
603
|
+
// src/components/DescriptionList/DescriptionList.tsx
|
|
604
|
+
var import_dynamic2 = require("@vanilla-extract/dynamic");
|
|
583
605
|
var import_react3 = require("react");
|
|
584
606
|
|
|
585
|
-
// src/components/
|
|
607
|
+
// src/components/DescriptionList/DescriptionList.css.ts
|
|
586
608
|
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
587
|
-
var
|
|
609
|
+
var description = "_14g0ot47";
|
|
610
|
+
var item = /* @__PURE__ */ (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_14g0ot42", variantClassNames: { layout: { horizontal: "_14g0ot43", vertical: "_14g0ot44" }, divided: { true: "_14g0ot45" } }, defaultVariants: { layout: "horizontal" }, compoundVariants: [] });
|
|
611
|
+
var root = "_14g0ot41";
|
|
612
|
+
var term = "_14g0ot46";
|
|
613
|
+
var termWidth = "var(--_14g0ot40)";
|
|
614
|
+
|
|
615
|
+
// src/components/DescriptionList/DescriptionList.tsx
|
|
616
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
617
|
+
var DescriptionList = /* @__PURE__ */ (0, import_react3.forwardRef)(
|
|
618
|
+
function DescriptionList2({ items: items2, layout = "horizontal", termWidth: termWidth2, divided, className, style, ...rest }, ref) {
|
|
619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
620
|
+
"dl",
|
|
621
|
+
{
|
|
622
|
+
ref,
|
|
623
|
+
className: cx(root, className),
|
|
624
|
+
style: termWidth2 ? { ...(0, import_dynamic2.assignInlineVars)({ [termWidth]: termWidth2 }), ...style } : style,
|
|
625
|
+
...rest,
|
|
626
|
+
children: items2.map((item10, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: item({ layout, divided }), children: [
|
|
627
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dt", { className: term, children: item10.term }),
|
|
628
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { className: description, children: item10.description })
|
|
629
|
+
] }, index))
|
|
630
|
+
}
|
|
631
|
+
);
|
|
632
|
+
}
|
|
633
|
+
);
|
|
634
|
+
|
|
635
|
+
// src/components/Divider/Divider.tsx
|
|
636
|
+
var import_react4 = require("react");
|
|
637
|
+
|
|
638
|
+
// src/components/Divider/Divider.css.ts
|
|
639
|
+
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
640
|
+
var divider = /* @__PURE__ */ (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
588
641
|
var labeled = "_1t3gq8v3";
|
|
589
642
|
var line = "_1t3gq8v4";
|
|
590
643
|
|
|
591
644
|
// src/components/Divider/Divider.tsx
|
|
592
|
-
var
|
|
593
|
-
var Divider = /* @__PURE__ */ (0,
|
|
645
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
646
|
+
var Divider = /* @__PURE__ */ (0, import_react4.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
|
|
594
647
|
if (children && orientation === "horizontal") {
|
|
595
|
-
return /* @__PURE__ */ (0,
|
|
596
|
-
/* @__PURE__ */ (0,
|
|
648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: cx(labeled, className), ...rest, children: [
|
|
649
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: line, "aria-hidden": true }),
|
|
597
650
|
children,
|
|
598
|
-
/* @__PURE__ */ (0,
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: line, "aria-hidden": true })
|
|
599
652
|
] });
|
|
600
653
|
}
|
|
601
654
|
const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
|
|
602
|
-
return /* @__PURE__ */ (0,
|
|
655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
|
|
603
656
|
});
|
|
604
657
|
|
|
605
658
|
// src/components/Progress/Progress.tsx
|
|
606
|
-
var
|
|
659
|
+
var import_react5 = require("react");
|
|
607
660
|
|
|
608
661
|
// src/components/Progress/Progress.css.ts
|
|
609
|
-
var
|
|
662
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
610
663
|
var header2 = "_1tvkq001";
|
|
611
|
-
var indicator = /* @__PURE__ */ (0,
|
|
664
|
+
var indicator = /* @__PURE__ */ (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
|
|
612
665
|
var label = "_1tvkq002";
|
|
613
|
-
var
|
|
614
|
-
var track = /* @__PURE__ */ (0,
|
|
666
|
+
var root2 = "_1tvkq000";
|
|
667
|
+
var track = /* @__PURE__ */ (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
615
668
|
var value = "_1tvkq003";
|
|
616
669
|
|
|
617
670
|
// src/components/Progress/Progress.tsx
|
|
618
|
-
var
|
|
671
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
619
672
|
var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
|
|
620
|
-
var Progress = /* @__PURE__ */ (0,
|
|
673
|
+
var Progress = /* @__PURE__ */ (0, import_react5.forwardRef)(function Progress2({
|
|
621
674
|
value: value4,
|
|
622
675
|
max = 100,
|
|
623
|
-
label:
|
|
676
|
+
label: label7,
|
|
624
677
|
"aria-label": ariaLabel,
|
|
625
678
|
showValue,
|
|
626
679
|
formatValue = defaultFormat,
|
|
@@ -629,28 +682,28 @@ var Progress = /* @__PURE__ */ (0, import_react4.forwardRef)(function Progress2(
|
|
|
629
682
|
className,
|
|
630
683
|
...rest
|
|
631
684
|
}, ref) {
|
|
632
|
-
const labelId = (0,
|
|
685
|
+
const labelId = (0, import_react5.useId)();
|
|
633
686
|
const isIndeterminate = value4 === void 0 || value4 === null;
|
|
634
687
|
const safeMax = max > 0 ? max : 100;
|
|
635
688
|
const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
|
|
636
689
|
const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
|
|
637
|
-
return /* @__PURE__ */ (0,
|
|
638
|
-
(
|
|
639
|
-
|
|
640
|
-
showValue && valueText && /* @__PURE__ */ (0,
|
|
690
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref, className: cx(root2, className), ...rest, children: [
|
|
691
|
+
(label7 || showValue && valueText) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: header2, children: [
|
|
692
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: labelId, className: label, children: label7 }),
|
|
693
|
+
showValue && valueText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: value, "aria-hidden": true, children: valueText })
|
|
641
694
|
] }),
|
|
642
|
-
/* @__PURE__ */ (0,
|
|
695
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
643
696
|
"div",
|
|
644
697
|
{
|
|
645
698
|
role: "progressbar",
|
|
646
|
-
"aria-labelledby":
|
|
647
|
-
"aria-label":
|
|
699
|
+
"aria-labelledby": label7 ? labelId : void 0,
|
|
700
|
+
"aria-label": label7 ? void 0 : ariaLabel,
|
|
648
701
|
"aria-valuemin": 0,
|
|
649
702
|
"aria-valuemax": safeMax,
|
|
650
703
|
"aria-valuenow": isIndeterminate ? void 0 : clamped,
|
|
651
704
|
"aria-valuetext": valueText,
|
|
652
705
|
className: track({ size }),
|
|
653
|
-
children: /* @__PURE__ */ (0,
|
|
706
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
654
707
|
"div",
|
|
655
708
|
{
|
|
656
709
|
className: indicator({ color }),
|
|
@@ -664,76 +717,76 @@ var Progress = /* @__PURE__ */ (0, import_react4.forwardRef)(function Progress2(
|
|
|
664
717
|
});
|
|
665
718
|
|
|
666
719
|
// src/components/Skeleton/Skeleton.tsx
|
|
667
|
-
var
|
|
668
|
-
var
|
|
720
|
+
var import_dynamic3 = require("@vanilla-extract/dynamic");
|
|
721
|
+
var import_react6 = require("react");
|
|
669
722
|
|
|
670
723
|
// src/components/Skeleton/Skeleton.css.ts
|
|
671
|
-
var
|
|
724
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
672
725
|
var height = "var(--_1s8datd1)";
|
|
673
726
|
var lines = "_1s8datd6";
|
|
674
|
-
var skeleton = /* @__PURE__ */ (0,
|
|
727
|
+
var skeleton = /* @__PURE__ */ (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
|
|
675
728
|
var width = "var(--_1s8datd0)";
|
|
676
729
|
|
|
677
730
|
// src/components/Skeleton/Skeleton.tsx
|
|
678
|
-
var
|
|
731
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
679
732
|
var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
|
|
680
|
-
var Skeleton = /* @__PURE__ */ (0,
|
|
733
|
+
var Skeleton = /* @__PURE__ */ (0, import_react6.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
|
|
681
734
|
const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
|
|
682
735
|
const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
|
|
683
736
|
if (variant === "text" && lines2 > 1) {
|
|
684
|
-
return /* @__PURE__ */ (0,
|
|
737
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
685
738
|
"span",
|
|
686
739
|
{
|
|
687
740
|
ref,
|
|
688
741
|
"aria-hidden": true,
|
|
689
742
|
className: cx(lines, className),
|
|
690
|
-
style: { ...(0,
|
|
743
|
+
style: { ...(0, import_dynamic3.assignInlineVars)({ [width]: w }), ...style },
|
|
691
744
|
...rest,
|
|
692
|
-
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0,
|
|
745
|
+
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
693
746
|
"span",
|
|
694
747
|
{
|
|
695
748
|
className: skeleton({ variant }),
|
|
696
|
-
style: (0,
|
|
749
|
+
style: (0, import_dynamic3.assignInlineVars)({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
|
|
697
750
|
},
|
|
698
751
|
i
|
|
699
752
|
))
|
|
700
753
|
}
|
|
701
754
|
);
|
|
702
755
|
}
|
|
703
|
-
return /* @__PURE__ */ (0,
|
|
756
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
704
757
|
"span",
|
|
705
758
|
{
|
|
706
759
|
ref,
|
|
707
760
|
"aria-hidden": true,
|
|
708
761
|
className: cx(skeleton({ variant }), className),
|
|
709
|
-
style: { ...(0,
|
|
762
|
+
style: { ...(0, import_dynamic3.assignInlineVars)({ [width]: w, [height]: h }), ...style },
|
|
710
763
|
...rest
|
|
711
764
|
}
|
|
712
765
|
);
|
|
713
766
|
});
|
|
714
767
|
|
|
715
768
|
// src/components/Stack/Stack.tsx
|
|
716
|
-
var
|
|
769
|
+
var import_react7 = require("react");
|
|
717
770
|
|
|
718
771
|
// src/components/Stack/Stack.css.ts
|
|
719
|
-
var
|
|
720
|
-
var stack = /* @__PURE__ */ (0,
|
|
772
|
+
var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
773
|
+
var stack = /* @__PURE__ */ (0, import_createRuntimeFn7.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
774
|
|
|
722
775
|
// src/components/Stack/Stack.tsx
|
|
723
|
-
var
|
|
724
|
-
var Stack = /* @__PURE__ */ (0,
|
|
725
|
-
return /* @__PURE__ */ (0,
|
|
776
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
777
|
+
var Stack = /* @__PURE__ */ (0, import_react7.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
|
|
726
779
|
});
|
|
727
780
|
|
|
728
781
|
// src/components/Typography/Typography.tsx
|
|
729
|
-
var
|
|
782
|
+
var import_react8 = require("react");
|
|
730
783
|
|
|
731
784
|
// src/components/Typography/Typography.css.ts
|
|
732
|
-
var
|
|
733
|
-
var typography = /* @__PURE__ */ (0,
|
|
785
|
+
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
786
|
+
var typography = /* @__PURE__ */ (0, import_createRuntimeFn8.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
787
|
|
|
735
788
|
// src/components/Typography/Typography.tsx
|
|
736
|
-
var
|
|
789
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
737
790
|
var defaultElement = {
|
|
738
791
|
display: "h1",
|
|
739
792
|
h1: "h1",
|
|
@@ -745,9 +798,9 @@ var defaultElement = {
|
|
|
745
798
|
"body-sm": "p",
|
|
746
799
|
caption: "span"
|
|
747
800
|
};
|
|
748
|
-
var Typography = /* @__PURE__ */ (0,
|
|
801
|
+
var Typography = /* @__PURE__ */ (0, import_react8.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
749
802
|
const Component = as ?? defaultElement[variant];
|
|
750
|
-
return /* @__PURE__ */ (0,
|
|
803
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
751
804
|
Component,
|
|
752
805
|
{
|
|
753
806
|
ref,
|
|
@@ -757,30 +810,61 @@ var Typography = /* @__PURE__ */ (0, import_react7.forwardRef)(function Typograp
|
|
|
757
810
|
);
|
|
758
811
|
});
|
|
759
812
|
|
|
813
|
+
// src/components/VisuallyHidden/VisuallyHidden.tsx
|
|
814
|
+
var import_react9 = require("react");
|
|
815
|
+
|
|
816
|
+
// src/styles/visuallyHidden.css.ts
|
|
817
|
+
var visuallyHidden = "_1kdtbw10";
|
|
818
|
+
|
|
819
|
+
// src/components/VisuallyHidden/VisuallyHidden.tsx
|
|
820
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
821
|
+
var VisuallyHidden = /* @__PURE__ */ (0, import_react9.forwardRef)(function VisuallyHidden2({ as: Component = "span", className, ...rest }, ref) {
|
|
822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, { ref, className: cx(visuallyHidden, className), ...rest });
|
|
823
|
+
});
|
|
824
|
+
|
|
825
|
+
// src/utils/focusField.ts
|
|
826
|
+
var FOCUSABLE = 'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
|
|
827
|
+
function isUsable(element) {
|
|
828
|
+
return element instanceof HTMLElement && element.matches(FOCUSABLE) && element.tabIndex >= 0 && !element.closest('[aria-hidden="true"], [inert], [hidden]');
|
|
829
|
+
}
|
|
830
|
+
function firstUsableIn(container2) {
|
|
831
|
+
if (!container2) return null;
|
|
832
|
+
const checked = Array.from(container2.querySelectorAll(':checked, [aria-checked="true"]')).find(isUsable);
|
|
833
|
+
return checked ?? Array.from(container2.querySelectorAll(FOCUSABLE)).find(isUsable) ?? null;
|
|
834
|
+
}
|
|
835
|
+
function focusField(target) {
|
|
836
|
+
const element = typeof target === "string" ? document.getElementById(target) : target ?? null;
|
|
837
|
+
if (!element) return false;
|
|
838
|
+
const destination = (isUsable(element) ? element : null) ?? firstUsableIn(element) ?? firstUsableIn(element.closest('[role="group"], [role="radiogroup"], fieldset'));
|
|
839
|
+
if (!destination) return false;
|
|
840
|
+
destination.focus();
|
|
841
|
+
return document.activeElement === destination;
|
|
842
|
+
}
|
|
843
|
+
|
|
760
844
|
// src/theme/ThemeProvider.tsx
|
|
761
|
-
var
|
|
845
|
+
var import_react10 = require("react");
|
|
762
846
|
|
|
763
847
|
// src/theme/ThemeProvider.css.ts
|
|
764
848
|
var portal = "sfyhlv0";
|
|
765
|
-
var
|
|
849
|
+
var root3 = "sfyhlv1 sfyhlv0";
|
|
766
850
|
|
|
767
851
|
// src/theme/ThemeProvider.tsx
|
|
768
|
-
var
|
|
769
|
-
var ThemeContext = /* @__PURE__ */ (0,
|
|
770
|
-
var ThemeProvider = /* @__PURE__ */ (0,
|
|
771
|
-
const parent = (0,
|
|
852
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
853
|
+
var ThemeContext = /* @__PURE__ */ (0, import_react10.createContext)({ theme: "light" });
|
|
854
|
+
var ThemeProvider = /* @__PURE__ */ (0, import_react10.forwardRef)(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
|
|
855
|
+
const parent = (0, import_react10.useContext)(ThemeContext);
|
|
772
856
|
const theme = themeProp ?? parent.theme;
|
|
773
|
-
const merged = (0,
|
|
774
|
-
const value4 = (0,
|
|
857
|
+
const merged = (0, import_react10.useMemo)(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
|
|
858
|
+
const value4 = (0, import_react10.useMemo)(
|
|
775
859
|
() => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
|
|
776
860
|
[theme, merged]
|
|
777
861
|
);
|
|
778
|
-
return /* @__PURE__ */ (0,
|
|
862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
779
863
|
"div",
|
|
780
864
|
{
|
|
781
865
|
ref,
|
|
782
866
|
"data-theme": theme,
|
|
783
|
-
className: cx(themeClass[theme],
|
|
867
|
+
className: cx(themeClass[theme], root3, className),
|
|
784
868
|
style: value4.style ? { ...value4.style, ...style } : style,
|
|
785
869
|
...rest,
|
|
786
870
|
children
|
|
@@ -788,96 +872,93 @@ var ThemeProvider = /* @__PURE__ */ (0, import_react8.forwardRef)(function Theme
|
|
|
788
872
|
) });
|
|
789
873
|
});
|
|
790
874
|
function useTheme() {
|
|
791
|
-
return (0,
|
|
875
|
+
return (0, import_react10.useContext)(ThemeContext).theme;
|
|
792
876
|
}
|
|
793
877
|
function usePortalProps() {
|
|
794
|
-
const { theme, style } = (0,
|
|
878
|
+
const { theme, style } = (0, import_react10.useContext)(ThemeContext);
|
|
795
879
|
return { className: cx(themeClass[theme], portal), style };
|
|
796
880
|
}
|
|
797
881
|
|
|
798
882
|
// src/i18n/LocaleProvider.tsx
|
|
799
|
-
var
|
|
800
|
-
var
|
|
801
|
-
var MessagesContext = /* @__PURE__ */ (0,
|
|
883
|
+
var import_react11 = require("react");
|
|
884
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
885
|
+
var MessagesContext = /* @__PURE__ */ (0, import_react11.createContext)({});
|
|
802
886
|
function LocaleProvider({ messages, children }) {
|
|
803
|
-
const parent = (0,
|
|
804
|
-
const value4 = (0,
|
|
805
|
-
return /* @__PURE__ */ (0,
|
|
887
|
+
const parent = (0, import_react11.useContext)(MessagesContext);
|
|
888
|
+
const value4 = (0, import_react11.useMemo)(() => ({ ...parent, ...messages }), [parent, messages]);
|
|
889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessagesContext.Provider, { value: value4, children });
|
|
806
890
|
}
|
|
807
891
|
function useMessages() {
|
|
808
|
-
return (0,
|
|
892
|
+
return (0, import_react11.useContext)(MessagesContext);
|
|
809
893
|
}
|
|
810
894
|
|
|
811
895
|
// src/components/Accordion/Accordion.tsx
|
|
812
896
|
var RadixAccordion = __toESM(require("@radix-ui/react-accordion"), 1);
|
|
813
897
|
var import_icons = require("@bestow-ui/icons");
|
|
814
|
-
var
|
|
898
|
+
var import_react12 = require("react");
|
|
815
899
|
|
|
816
900
|
// src/components/Accordion/Accordion.css.ts
|
|
817
901
|
var chevron = "v58j0l4";
|
|
818
902
|
var content = "v58j0l5";
|
|
819
903
|
var contentInner = "v58j0l6";
|
|
820
904
|
var header3 = "v58j0l2";
|
|
821
|
-
var
|
|
822
|
-
var
|
|
905
|
+
var item2 = "v58j0l1";
|
|
906
|
+
var root4 = "v58j0l0";
|
|
823
907
|
var trigger = "v58j0l3";
|
|
824
908
|
|
|
825
909
|
// src/components/Accordion/Accordion.tsx
|
|
826
|
-
var
|
|
827
|
-
var Accordion = /* @__PURE__ */ (0,
|
|
910
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
911
|
+
var Accordion = /* @__PURE__ */ (0, import_react12.forwardRef)(function Accordion2({ className, ...props }, ref) {
|
|
828
912
|
const { collapsible, ...multipleProps } = props;
|
|
829
913
|
const typedProps = props.type === "multiple" ? multipleProps : { ...multipleProps, collapsible };
|
|
830
914
|
const rootProps = "value" in props ? { ...typedProps, value: props.value ?? (props.type === "multiple" ? [] : "") } : typedProps;
|
|
831
|
-
return /* @__PURE__ */ (0,
|
|
915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixAccordion.Root, { ref, className: cx(root4, className), ...rootProps });
|
|
832
916
|
});
|
|
833
|
-
var AccordionItem = /* @__PURE__ */ (0,
|
|
917
|
+
var AccordionItem = /* @__PURE__ */ (0, import_react12.forwardRef)(function AccordionItem2({ title: title6, headingLevel = 3, className, children, ...rest }, ref) {
|
|
834
918
|
const Heading = `h${headingLevel}`;
|
|
835
|
-
return /* @__PURE__ */ (0,
|
|
836
|
-
/* @__PURE__ */ (0,
|
|
919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(RadixAccordion.Item, { ref, className: cx(item2, className), ...rest, children: [
|
|
920
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixAccordion.Header, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { className: header3, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(RadixAccordion.Trigger, { className: trigger, children: [
|
|
837
921
|
title6,
|
|
838
|
-
/* @__PURE__ */ (0,
|
|
922
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons.ChevronDownIcon, { size: 18, className: chevron })
|
|
839
923
|
] }) }) }),
|
|
840
|
-
/* @__PURE__ */ (0,
|
|
924
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixAccordion.Content, { className: content, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: contentInner, children }) })
|
|
841
925
|
] });
|
|
842
926
|
});
|
|
843
927
|
|
|
844
928
|
// src/components/AddressInput/AddressInput.tsx
|
|
845
|
-
var
|
|
929
|
+
var import_react18 = require("react");
|
|
846
930
|
|
|
847
931
|
// src/components/Button/Button.tsx
|
|
848
|
-
var
|
|
932
|
+
var import_react14 = require("react");
|
|
849
933
|
|
|
850
934
|
// src/components/Spinner/Spinner.tsx
|
|
851
935
|
var import_icons2 = require("@bestow-ui/icons");
|
|
852
|
-
var
|
|
853
|
-
|
|
854
|
-
// src/styles/visuallyHidden.css.ts
|
|
855
|
-
var visuallyHidden = "_1kdtbw10";
|
|
936
|
+
var import_react13 = require("react");
|
|
856
937
|
|
|
857
938
|
// src/components/Spinner/Spinner.css.ts
|
|
858
|
-
var
|
|
859
|
-
var spinner = /* @__PURE__ */ (0,
|
|
939
|
+
var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
940
|
+
var spinner = /* @__PURE__ */ (0, import_createRuntimeFn9.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: [] });
|
|
860
941
|
|
|
861
942
|
// src/components/Spinner/Spinner.tsx
|
|
862
|
-
var
|
|
863
|
-
var Spinner = /* @__PURE__ */ (0,
|
|
943
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
944
|
+
var Spinner = /* @__PURE__ */ (0, import_react13.forwardRef)(function Spinner2({ size, color, label: labelProp, className, ...rest }, ref) {
|
|
864
945
|
const m = useMessages();
|
|
865
|
-
const
|
|
866
|
-
const a11y =
|
|
867
|
-
return /* @__PURE__ */ (0,
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
869
|
-
|
|
946
|
+
const label7 = labelProp ?? m.loading ?? "\uB85C\uB529 \uC911";
|
|
947
|
+
const a11y = label7 ? { role: "status" } : { "aria-hidden": true };
|
|
948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
|
|
949
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons2.LoaderIcon, { size: "100%" }),
|
|
950
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: visuallyHidden, children: label7 })
|
|
870
951
|
] });
|
|
871
952
|
});
|
|
872
953
|
|
|
873
954
|
// src/components/Button/Button.css.ts
|
|
874
|
-
var
|
|
875
|
-
var button = /* @__PURE__ */ (0,
|
|
955
|
+
var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
956
|
+
var button = /* @__PURE__ */ (0, import_createRuntimeFn10.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
957
|
var icon2 = "xcekdai";
|
|
877
958
|
|
|
878
959
|
// src/components/Button/Button.tsx
|
|
879
|
-
var
|
|
880
|
-
var Button = /* @__PURE__ */ (0,
|
|
960
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
961
|
+
var Button = /* @__PURE__ */ (0, import_react14.forwardRef)(function Button2({
|
|
881
962
|
variant,
|
|
882
963
|
color,
|
|
883
964
|
size,
|
|
@@ -898,8 +979,8 @@ var Button = /* @__PURE__ */ (0, import_react12.forwardRef)(function Button2({
|
|
|
898
979
|
}
|
|
899
980
|
onClick?.(event);
|
|
900
981
|
};
|
|
901
|
-
const leading = loading2 ? /* @__PURE__ */ (0,
|
|
902
|
-
return /* @__PURE__ */ (0,
|
|
982
|
+
const leading = loading2 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Spinner, { size: "sm", label: "" }) : startIcon;
|
|
983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
903
984
|
"button",
|
|
904
985
|
{
|
|
905
986
|
ref,
|
|
@@ -910,38 +991,38 @@ var Button = /* @__PURE__ */ (0, import_react12.forwardRef)(function Button2({
|
|
|
910
991
|
onClick: handleClick,
|
|
911
992
|
...rest,
|
|
912
993
|
children: [
|
|
913
|
-
leading && /* @__PURE__ */ (0,
|
|
994
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: icon2, children: leading }),
|
|
914
995
|
children,
|
|
915
|
-
endIcon && /* @__PURE__ */ (0,
|
|
996
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: icon2, children: endIcon })
|
|
916
997
|
]
|
|
917
998
|
}
|
|
918
999
|
);
|
|
919
1000
|
});
|
|
920
1001
|
|
|
921
1002
|
// src/components/Input/Input.css.ts
|
|
922
|
-
var
|
|
1003
|
+
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
923
1004
|
var adornment = "_19p5zvh6";
|
|
924
1005
|
var field = "_19p5zvh7";
|
|
925
1006
|
var fieldFullWidth = "_19p5zvh8";
|
|
926
|
-
var helperText = /* @__PURE__ */ (0,
|
|
1007
|
+
var helperText = /* @__PURE__ */ (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
927
1008
|
var input = "_19p5zvh5";
|
|
928
1009
|
var label2 = "_19p5zvh9";
|
|
929
1010
|
var requiredMark = "_19p5zvha";
|
|
930
|
-
var
|
|
1011
|
+
var root5 = /* @__PURE__ */ (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
931
1012
|
|
|
932
1013
|
// src/components/Input/Input.tsx
|
|
933
|
-
var
|
|
934
|
-
var
|
|
935
|
-
var Input = /* @__PURE__ */ (0,
|
|
936
|
-
return /* @__PURE__ */ (0,
|
|
1014
|
+
var import_react15 = require("react");
|
|
1015
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1016
|
+
var Input = /* @__PURE__ */ (0, import_react15.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
1017
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
937
1018
|
"div",
|
|
938
1019
|
{
|
|
939
|
-
className: cx(
|
|
1020
|
+
className: cx(root5({ size, fullWidth }), rootClassName),
|
|
940
1021
|
"data-invalid": invalid || void 0,
|
|
941
1022
|
"data-disabled": disabled || void 0,
|
|
942
1023
|
children: [
|
|
943
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
944
|
-
/* @__PURE__ */ (0,
|
|
1024
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: adornment, children: startAdornment }),
|
|
1025
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
945
1026
|
"input",
|
|
946
1027
|
{
|
|
947
1028
|
ref,
|
|
@@ -951,25 +1032,25 @@ var Input = /* @__PURE__ */ (0, import_react13.forwardRef)(function Input2({ siz
|
|
|
951
1032
|
...rest
|
|
952
1033
|
}
|
|
953
1034
|
),
|
|
954
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
1035
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: adornment, children: endAdornment })
|
|
955
1036
|
]
|
|
956
1037
|
}
|
|
957
1038
|
);
|
|
958
1039
|
});
|
|
959
1040
|
|
|
960
1041
|
// src/components/Input/TextField.tsx
|
|
961
|
-
var
|
|
962
|
-
var
|
|
963
|
-
var TextField = /* @__PURE__ */ (0,
|
|
964
|
-
const generatedId = (0,
|
|
1042
|
+
var import_react16 = require("react");
|
|
1043
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1044
|
+
var TextField = /* @__PURE__ */ (0, import_react16.forwardRef)(function TextField2({ label: label7, helperText: helperText3, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
|
|
1045
|
+
const generatedId = (0, import_react16.useId)();
|
|
965
1046
|
const inputId = id ?? generatedId;
|
|
966
1047
|
const helperId = helperText3 ? `${inputId}-helper` : void 0;
|
|
967
|
-
return /* @__PURE__ */ (0,
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
required && /* @__PURE__ */ (0,
|
|
1048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
1049
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { htmlFor: inputId, className: label2, children: [
|
|
1050
|
+
label7,
|
|
1051
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
971
1052
|
] }),
|
|
972
|
-
/* @__PURE__ */ (0,
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
973
1054
|
Input,
|
|
974
1055
|
{
|
|
975
1056
|
ref,
|
|
@@ -981,7 +1062,7 @@ var TextField = /* @__PURE__ */ (0, import_react14.forwardRef)(function TextFiel
|
|
|
981
1062
|
...rest
|
|
982
1063
|
}
|
|
983
1064
|
),
|
|
984
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
1065
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
985
1066
|
] });
|
|
986
1067
|
});
|
|
987
1068
|
|
|
@@ -990,12 +1071,15 @@ var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
|
990
1071
|
var import_icons3 = require("@bestow-ui/icons");
|
|
991
1072
|
|
|
992
1073
|
// src/utils/useReturnFocus.ts
|
|
993
|
-
var
|
|
1074
|
+
var import_react17 = require("react");
|
|
994
1075
|
function useReturnFocus(hasTrigger, onCloseAutoFocus) {
|
|
995
|
-
const returnTo = (0,
|
|
1076
|
+
const returnTo = (0, import_react17.useRef)(null);
|
|
996
1077
|
return {
|
|
997
1078
|
onOpenAutoFocus: () => {
|
|
998
|
-
|
|
1079
|
+
const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
1080
|
+
const menu = active?.closest('[role="menu"]');
|
|
1081
|
+
const menuTrigger = menu?.getAttribute("aria-labelledby");
|
|
1082
|
+
returnTo.current = menuTrigger && document.getElementById(menuTrigger) || active;
|
|
999
1083
|
},
|
|
1000
1084
|
onCloseAutoFocus: (event) => {
|
|
1001
1085
|
onCloseAutoFocus?.(event);
|
|
@@ -1010,11 +1094,11 @@ function useReturnFocus(hasTrigger, onCloseAutoFocus) {
|
|
|
1010
1094
|
}
|
|
1011
1095
|
|
|
1012
1096
|
// src/components/Modal/Modal.css.ts
|
|
1013
|
-
var
|
|
1097
|
+
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1014
1098
|
var body2 = "_1pdsmv0a";
|
|
1015
1099
|
var closeButton = "_1pdsmv09";
|
|
1016
|
-
var content2 = /* @__PURE__ */ (0,
|
|
1017
|
-
var
|
|
1100
|
+
var content2 = /* @__PURE__ */ (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1101
|
+
var description2 = "_1pdsmv08";
|
|
1018
1102
|
var footer2 = "_1pdsmv0b";
|
|
1019
1103
|
var header4 = "_1pdsmv05";
|
|
1020
1104
|
var headings = "_1pdsmv06";
|
|
@@ -1022,14 +1106,14 @@ var overlay = "_1pdsmv00";
|
|
|
1022
1106
|
var title = "_1pdsmv07";
|
|
1023
1107
|
|
|
1024
1108
|
// src/components/Modal/Modal.tsx
|
|
1025
|
-
var
|
|
1109
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1026
1110
|
function Modal({
|
|
1027
1111
|
open,
|
|
1028
1112
|
defaultOpen,
|
|
1029
1113
|
onOpenChange,
|
|
1030
1114
|
trigger: trigger4,
|
|
1031
1115
|
title: title6,
|
|
1032
|
-
description:
|
|
1116
|
+
description: description8,
|
|
1033
1117
|
children,
|
|
1034
1118
|
footer: footer6,
|
|
1035
1119
|
size,
|
|
@@ -1041,11 +1125,11 @@ function Modal({
|
|
|
1041
1125
|
const portal2 = usePortalProps();
|
|
1042
1126
|
const m = useMessages();
|
|
1043
1127
|
const focus = useReturnFocus(Boolean(trigger4), onCloseAutoFocus);
|
|
1044
|
-
return /* @__PURE__ */ (0,
|
|
1045
|
-
trigger4 && /* @__PURE__ */ (0,
|
|
1046
|
-
/* @__PURE__ */ (0,
|
|
1047
|
-
/* @__PURE__ */ (0,
|
|
1048
|
-
/* @__PURE__ */ (0,
|
|
1128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1129
|
+
trigger4 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Trigger, { asChild: true, children: trigger4 }),
|
|
1130
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Dialog.Portal, { children: [
|
|
1131
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
1132
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1049
1133
|
Dialog.Content,
|
|
1050
1134
|
{
|
|
1051
1135
|
className: cx(portal2.className, content2({ size }), className),
|
|
@@ -1053,17 +1137,17 @@ function Modal({
|
|
|
1053
1137
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
1054
1138
|
onOpenAutoFocus: focus.onOpenAutoFocus,
|
|
1055
1139
|
onCloseAutoFocus: focus.onCloseAutoFocus,
|
|
1056
|
-
...
|
|
1140
|
+
...description8 ? {} : { "aria-describedby": void 0 },
|
|
1057
1141
|
children: [
|
|
1058
|
-
/* @__PURE__ */ (0,
|
|
1059
|
-
/* @__PURE__ */ (0,
|
|
1060
|
-
/* @__PURE__ */ (0,
|
|
1061
|
-
|
|
1142
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: header4, children: [
|
|
1143
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: headings, children: [
|
|
1144
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Title, { className: title, children: title6 }),
|
|
1145
|
+
description8 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Description, { className: description2, children: description8 })
|
|
1062
1146
|
] }),
|
|
1063
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
1147
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Close, { className: closeButton, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.XIcon, { size: 16 }) })
|
|
1064
1148
|
] }),
|
|
1065
|
-
children && /* @__PURE__ */ (0,
|
|
1066
|
-
footer6 && /* @__PURE__ */ (0,
|
|
1149
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: body2, children }),
|
|
1150
|
+
footer6 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: footer2, children: footer6 })
|
|
1067
1151
|
]
|
|
1068
1152
|
}
|
|
1069
1153
|
)
|
|
@@ -1081,7 +1165,7 @@ var searchStatus = "_16fi7uy5";
|
|
|
1081
1165
|
var zonecode = "_16fi7uy3";
|
|
1082
1166
|
|
|
1083
1167
|
// src/components/AddressInput/AddressInput.tsx
|
|
1084
|
-
var
|
|
1168
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1085
1169
|
var EMPTY = { zonecode: "", address: "", extraAddress: "", detail: "" };
|
|
1086
1170
|
function SearchArea({
|
|
1087
1171
|
provider,
|
|
@@ -1089,13 +1173,13 @@ function SearchArea({
|
|
|
1089
1173
|
loadErrorText,
|
|
1090
1174
|
loadingText
|
|
1091
1175
|
}) {
|
|
1092
|
-
const containerRef = (0,
|
|
1093
|
-
const [status, setStatus] = (0,
|
|
1094
|
-
const onSelectRef = (0,
|
|
1095
|
-
(0,
|
|
1176
|
+
const containerRef = (0, import_react18.useRef)(null);
|
|
1177
|
+
const [status, setStatus] = (0, import_react18.useState)("loading");
|
|
1178
|
+
const onSelectRef = (0, import_react18.useRef)(onSelect);
|
|
1179
|
+
(0, import_react18.useEffect)(() => {
|
|
1096
1180
|
onSelectRef.current = onSelect;
|
|
1097
1181
|
});
|
|
1098
|
-
(0,
|
|
1182
|
+
(0, import_react18.useEffect)(() => {
|
|
1099
1183
|
const container2 = containerRef.current;
|
|
1100
1184
|
if (!container2) return;
|
|
1101
1185
|
let cleanup;
|
|
@@ -1112,12 +1196,12 @@ function SearchArea({
|
|
|
1112
1196
|
cleanup?.();
|
|
1113
1197
|
};
|
|
1114
1198
|
}, [provider]);
|
|
1115
|
-
return /* @__PURE__ */ (0,
|
|
1116
|
-
/* @__PURE__ */ (0,
|
|
1117
|
-
status !== "ready" && /* @__PURE__ */ (0,
|
|
1199
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: searchArea, children: [
|
|
1200
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
|
|
1201
|
+
status !== "ready" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: searchStatus, role: "status", children: status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Spinner, { label: loadingText }) : loadErrorText })
|
|
1118
1202
|
] });
|
|
1119
1203
|
}
|
|
1120
|
-
var AddressInput = /* @__PURE__ */ (0,
|
|
1204
|
+
var AddressInput = /* @__PURE__ */ (0, import_react18.forwardRef)(
|
|
1121
1205
|
function AddressInput2(props, ref) {
|
|
1122
1206
|
const {
|
|
1123
1207
|
value: value4,
|
|
@@ -1136,17 +1220,17 @@ var AddressInput = /* @__PURE__ */ (0, import_react16.forwardRef)(
|
|
|
1136
1220
|
className
|
|
1137
1221
|
} = props;
|
|
1138
1222
|
const m = useMessages();
|
|
1139
|
-
const
|
|
1223
|
+
const label7 = labelProp ?? m.address ?? "\uC8FC\uC18C";
|
|
1140
1224
|
const searchLabel = searchLabelProp ?? m.addressSearch ?? "\uC8FC\uC18C \uAC80\uC0C9";
|
|
1141
1225
|
const detailPlaceholder = detailPlaceholderProp ?? m.detailAddressPlaceholder ?? "\uC0C1\uC138 \uC8FC\uC18C (\uB3D9\xB7\uD638\uC218 \uB4F1)";
|
|
1142
1226
|
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.";
|
|
1143
|
-
const baseId = (0,
|
|
1227
|
+
const baseId = (0, import_react18.useId)();
|
|
1144
1228
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
1145
|
-
const detailRef = (0,
|
|
1146
|
-
const selectedRef = (0,
|
|
1147
|
-
const [open, setOpen] = (0,
|
|
1229
|
+
const detailRef = (0, import_react18.useRef)(null);
|
|
1230
|
+
const selectedRef = (0, import_react18.useRef)(false);
|
|
1231
|
+
const [open, setOpen] = (0, import_react18.useState)(false);
|
|
1148
1232
|
const isControlled = "value" in props;
|
|
1149
|
-
const [innerValue, setInnerValue] = (0,
|
|
1233
|
+
const [innerValue, setInnerValue] = (0, import_react18.useState)(defaultValue ?? EMPTY);
|
|
1150
1234
|
const current2 = isControlled ? value4 ?? EMPTY : innerValue;
|
|
1151
1235
|
const update = (next) => {
|
|
1152
1236
|
if (!isControlled) setInnerValue(next);
|
|
@@ -1168,13 +1252,13 @@ var AddressInput = /* @__PURE__ */ (0, import_react16.forwardRef)(
|
|
|
1168
1252
|
setOpen(false);
|
|
1169
1253
|
};
|
|
1170
1254
|
const fullAddress = `${current2.address}${current2.extraAddress ?? ""}`;
|
|
1171
|
-
return /* @__PURE__ */ (0,
|
|
1172
|
-
/* @__PURE__ */ (0,
|
|
1173
|
-
|
|
1174
|
-
required && /* @__PURE__ */ (0,
|
|
1255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("fieldset", { ref, className: cx(fieldset, className), disabled, "aria-describedby": helperId, children: [
|
|
1256
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("legend", { className: legend, children: [
|
|
1257
|
+
label7,
|
|
1258
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
1175
1259
|
] }),
|
|
1176
|
-
/* @__PURE__ */ (0,
|
|
1177
|
-
/* @__PURE__ */ (0,
|
|
1260
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: row, children: [
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1178
1262
|
TextField,
|
|
1179
1263
|
{
|
|
1180
1264
|
"aria-label": m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
|
|
@@ -1187,9 +1271,9 @@ var AddressInput = /* @__PURE__ */ (0, import_react16.forwardRef)(
|
|
|
1187
1271
|
onClick: openSearch
|
|
1188
1272
|
}
|
|
1189
1273
|
),
|
|
1190
|
-
/* @__PURE__ */ (0,
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
|
|
1191
1275
|
] }),
|
|
1192
|
-
/* @__PURE__ */ (0,
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1193
1277
|
TextField,
|
|
1194
1278
|
{
|
|
1195
1279
|
"aria-label": m.baseAddress ?? "\uAE30\uBCF8 \uC8FC\uC18C",
|
|
@@ -1202,7 +1286,7 @@ var AddressInput = /* @__PURE__ */ (0, import_react16.forwardRef)(
|
|
|
1202
1286
|
onClick: openSearch
|
|
1203
1287
|
}
|
|
1204
1288
|
),
|
|
1205
|
-
/* @__PURE__ */ (0,
|
|
1289
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1206
1290
|
TextField,
|
|
1207
1291
|
{
|
|
1208
1292
|
ref: detailRef,
|
|
@@ -1214,13 +1298,13 @@ var AddressInput = /* @__PURE__ */ (0, import_react16.forwardRef)(
|
|
|
1214
1298
|
fullWidth: true
|
|
1215
1299
|
}
|
|
1216
1300
|
),
|
|
1217
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
1218
|
-
name && /* @__PURE__ */ (0,
|
|
1219
|
-
/* @__PURE__ */ (0,
|
|
1220
|
-
/* @__PURE__ */ (0,
|
|
1221
|
-
/* @__PURE__ */ (0,
|
|
1301
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
|
|
1302
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
1303
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "hidden", name: `${name}[zonecode]`, value: current2.zonecode }),
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "hidden", name: `${name}[address]`, value: fullAddress }),
|
|
1305
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "hidden", name: `${name}[detail]`, value: current2.detail })
|
|
1222
1306
|
] }),
|
|
1223
|
-
/* @__PURE__ */ (0,
|
|
1307
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1224
1308
|
Modal,
|
|
1225
1309
|
{
|
|
1226
1310
|
open,
|
|
@@ -1233,7 +1317,7 @@ var AddressInput = /* @__PURE__ */ (0, import_react16.forwardRef)(
|
|
|
1233
1317
|
detailRef.current?.focus();
|
|
1234
1318
|
}
|
|
1235
1319
|
},
|
|
1236
|
-
children: /* @__PURE__ */ (0,
|
|
1320
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1237
1321
|
SearchArea,
|
|
1238
1322
|
{
|
|
1239
1323
|
provider,
|
|
@@ -1249,11 +1333,11 @@ var AddressInput = /* @__PURE__ */ (0, import_react16.forwardRef)(
|
|
|
1249
1333
|
);
|
|
1250
1334
|
|
|
1251
1335
|
// src/components/AgreementGroup/AgreementGroup.tsx
|
|
1252
|
-
var
|
|
1336
|
+
var import_react20 = require("react");
|
|
1253
1337
|
var import_icons4 = require("@bestow-ui/icons");
|
|
1254
1338
|
|
|
1255
1339
|
// src/components/Checkbox/Checkbox.tsx
|
|
1256
|
-
var
|
|
1340
|
+
var import_react19 = require("react");
|
|
1257
1341
|
|
|
1258
1342
|
// src/utils/mergeRefs.ts
|
|
1259
1343
|
function mergeRefs(...refs) {
|
|
@@ -1266,23 +1350,23 @@ function mergeRefs(...refs) {
|
|
|
1266
1350
|
}
|
|
1267
1351
|
|
|
1268
1352
|
// src/components/Checkbox/Checkbox.css.ts
|
|
1269
|
-
var
|
|
1353
|
+
var import_createRuntimeFn13 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1270
1354
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
1271
|
-
var control = /* @__PURE__ */ (0,
|
|
1355
|
+
var control = /* @__PURE__ */ (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1272
1356
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
1273
1357
|
var input2 = "_1y7mzsn6";
|
|
1274
|
-
var
|
|
1358
|
+
var root6 = /* @__PURE__ */ (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1275
1359
|
|
|
1276
1360
|
// src/components/Checkbox/Checkbox.tsx
|
|
1277
|
-
var
|
|
1278
|
-
var Checkbox = /* @__PURE__ */ (0,
|
|
1279
|
-
const innerRef = (0,
|
|
1280
|
-
(0,
|
|
1361
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1362
|
+
var Checkbox = /* @__PURE__ */ (0, import_react19.forwardRef)(function Checkbox2({ label: label7, size, indeterminate = false, invalid, disabled, onChange, onCheckedChange, className, ...rest }, ref) {
|
|
1363
|
+
const innerRef = (0, import_react19.useRef)(null);
|
|
1364
|
+
(0, import_react19.useEffect)(() => {
|
|
1281
1365
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
1282
1366
|
}, [indeterminate]);
|
|
1283
|
-
return /* @__PURE__ */ (0,
|
|
1284
|
-
/* @__PURE__ */ (0,
|
|
1285
|
-
/* @__PURE__ */ (0,
|
|
1367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: cx(root6({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
1368
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: control({ size }), children: [
|
|
1369
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1286
1370
|
"input",
|
|
1287
1371
|
{
|
|
1288
1372
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -1297,7 +1381,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react17.forwardRef)(function Checkbox2
|
|
|
1297
1381
|
...rest
|
|
1298
1382
|
}
|
|
1299
1383
|
),
|
|
1300
|
-
/* @__PURE__ */ (0,
|
|
1384
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1301
1385
|
"path",
|
|
1302
1386
|
{
|
|
1303
1387
|
d: "M5 10.5l3.2 3L15 7",
|
|
@@ -1307,9 +1391,9 @@ var Checkbox = /* @__PURE__ */ (0, import_react17.forwardRef)(function Checkbox2
|
|
|
1307
1391
|
strokeLinejoin: "round"
|
|
1308
1392
|
}
|
|
1309
1393
|
) }),
|
|
1310
|
-
/* @__PURE__ */ (0,
|
|
1394
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
1311
1395
|
] }),
|
|
1312
|
-
|
|
1396
|
+
label7
|
|
1313
1397
|
] });
|
|
1314
1398
|
});
|
|
1315
1399
|
|
|
@@ -1319,7 +1403,7 @@ var box = "j3uxdc2";
|
|
|
1319
1403
|
var chevron2 = "j3uxdc9";
|
|
1320
1404
|
var content3 = "j3uxdca";
|
|
1321
1405
|
var fieldset2 = "j3uxdc0";
|
|
1322
|
-
var
|
|
1406
|
+
var item3 = "j3uxdc5";
|
|
1323
1407
|
var legend2 = "j3uxdc1";
|
|
1324
1408
|
var list = "j3uxdc4";
|
|
1325
1409
|
var row2 = "j3uxdc6";
|
|
@@ -1327,15 +1411,15 @@ var tag = "j3uxdc7";
|
|
|
1327
1411
|
var toggle = "j3uxdc8";
|
|
1328
1412
|
|
|
1329
1413
|
// src/components/AgreementGroup/AgreementGroup.tsx
|
|
1330
|
-
var
|
|
1331
|
-
var AgreementGroup = /* @__PURE__ */ (0,
|
|
1414
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1415
|
+
var AgreementGroup = /* @__PURE__ */ (0, import_react20.forwardRef)(
|
|
1332
1416
|
function AgreementGroup2(props, ref) {
|
|
1333
1417
|
const {
|
|
1334
1418
|
items: items2,
|
|
1335
1419
|
value: value4,
|
|
1336
1420
|
defaultValue,
|
|
1337
1421
|
onValueChange,
|
|
1338
|
-
label:
|
|
1422
|
+
label: label7,
|
|
1339
1423
|
allLabel: allLabelProp,
|
|
1340
1424
|
helperText: helperText3,
|
|
1341
1425
|
error,
|
|
@@ -1345,6 +1429,7 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react18.forwardRef)(
|
|
|
1345
1429
|
showText: showTextProp,
|
|
1346
1430
|
hideText: hideTextProp,
|
|
1347
1431
|
name,
|
|
1432
|
+
id,
|
|
1348
1433
|
className
|
|
1349
1434
|
} = props;
|
|
1350
1435
|
const m = useMessages();
|
|
@@ -1353,32 +1438,33 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react18.forwardRef)(
|
|
|
1353
1438
|
const optionalText = optionalTextProp ?? m.optional ?? "\uC120\uD0DD";
|
|
1354
1439
|
const showText = showTextProp ?? m.show ?? "\uBCF4\uAE30";
|
|
1355
1440
|
const hideText = hideTextProp ?? m.hide ?? "\uC811\uAE30";
|
|
1356
|
-
const baseId = (0,
|
|
1441
|
+
const baseId = (0, import_react20.useId)();
|
|
1357
1442
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
1358
1443
|
const isControlled = "value" in props;
|
|
1359
|
-
const [innerValue, setInnerValue] = (0,
|
|
1444
|
+
const [innerValue, setInnerValue] = (0, import_react20.useState)(defaultValue ?? []);
|
|
1360
1445
|
const agreed = isControlled ? value4 ?? [] : innerValue;
|
|
1361
|
-
const [expanded, setExpanded] = (0,
|
|
1446
|
+
const [expanded, setExpanded] = (0, import_react20.useState)([]);
|
|
1362
1447
|
const update = (next) => {
|
|
1363
1448
|
if (!isControlled) setInnerValue(next);
|
|
1364
1449
|
onValueChange?.(next);
|
|
1365
1450
|
};
|
|
1366
|
-
const allValues = items2.map((
|
|
1451
|
+
const allValues = items2.map((item10) => item10.value);
|
|
1367
1452
|
const agreedCount = allValues.filter((v) => agreed.includes(v)).length;
|
|
1368
1453
|
const allChecked = items2.length > 0 && agreedCount === items2.length;
|
|
1369
1454
|
const toggleItem = (itemValue, checked) => update(checked ? [...agreed.filter((v) => v !== itemValue), itemValue] : agreed.filter((v) => v !== itemValue));
|
|
1370
|
-
return /* @__PURE__ */ (0,
|
|
1455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1371
1456
|
"fieldset",
|
|
1372
1457
|
{
|
|
1373
1458
|
ref,
|
|
1459
|
+
id,
|
|
1374
1460
|
className: cx(fieldset2, className),
|
|
1375
1461
|
disabled,
|
|
1376
1462
|
"aria-describedby": helperId,
|
|
1377
1463
|
"data-invalid": error || void 0,
|
|
1378
1464
|
children: [
|
|
1379
|
-
|
|
1380
|
-
/* @__PURE__ */ (0,
|
|
1381
|
-
/* @__PURE__ */ (0,
|
|
1465
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("legend", { className: legend2, children: label7 }),
|
|
1466
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: box, children: [
|
|
1467
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: all, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1382
1468
|
Checkbox,
|
|
1383
1469
|
{
|
|
1384
1470
|
label: allLabel,
|
|
@@ -1387,28 +1473,28 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react18.forwardRef)(
|
|
|
1387
1473
|
onChange: (event) => update(event.target.checked ? allValues : [])
|
|
1388
1474
|
}
|
|
1389
1475
|
) }),
|
|
1390
|
-
/* @__PURE__ */ (0,
|
|
1391
|
-
const labelId = `${baseId}-${
|
|
1392
|
-
const toggleTextId = `${baseId}-${
|
|
1393
|
-
const contentId = `${baseId}-${
|
|
1394
|
-
const isOpen = expanded.includes(
|
|
1395
|
-
return /* @__PURE__ */ (0,
|
|
1396
|
-
/* @__PURE__ */ (0,
|
|
1397
|
-
/* @__PURE__ */ (0,
|
|
1476
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: list, children: items2.map((item10) => {
|
|
1477
|
+
const labelId = `${baseId}-${item10.value}-label`;
|
|
1478
|
+
const toggleTextId = `${baseId}-${item10.value}-toggle`;
|
|
1479
|
+
const contentId = `${baseId}-${item10.value}-content`;
|
|
1480
|
+
const isOpen = expanded.includes(item10.value);
|
|
1481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: item3, children: [
|
|
1482
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: row2, children: [
|
|
1483
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1398
1484
|
Checkbox,
|
|
1399
1485
|
{
|
|
1400
1486
|
size: "sm",
|
|
1401
|
-
checked: agreed.includes(
|
|
1402
|
-
invalid: error &&
|
|
1403
|
-
onChange: (event) => toggleItem(
|
|
1404
|
-
label: /* @__PURE__ */ (0,
|
|
1405
|
-
/* @__PURE__ */ (0,
|
|
1487
|
+
checked: agreed.includes(item10.value),
|
|
1488
|
+
invalid: error && item10.required && !agreed.includes(item10.value),
|
|
1489
|
+
onChange: (event) => toggleItem(item10.value, event.target.checked),
|
|
1490
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { id: labelId, children: [
|
|
1491
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: tag, "data-required": item10.required || void 0, children: item10.required ? requiredText : optionalText }),
|
|
1406
1492
|
" ",
|
|
1407
|
-
|
|
1493
|
+
item10.label
|
|
1408
1494
|
] })
|
|
1409
1495
|
}
|
|
1410
1496
|
),
|
|
1411
|
-
|
|
1497
|
+
item10.content && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1412
1498
|
"button",
|
|
1413
1499
|
{
|
|
1414
1500
|
type: "button",
|
|
@@ -1416,22 +1502,22 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react18.forwardRef)(
|
|
|
1416
1502
|
"aria-expanded": isOpen,
|
|
1417
1503
|
"aria-controls": contentId,
|
|
1418
1504
|
"aria-labelledby": `${labelId} ${toggleTextId}`,
|
|
1419
|
-
onClick: () => setExpanded((prev) => isOpen ? prev.filter((v) => v !==
|
|
1505
|
+
onClick: () => setExpanded((prev) => isOpen ? prev.filter((v) => v !== item10.value) : [...prev, item10.value]),
|
|
1420
1506
|
children: [
|
|
1421
|
-
/* @__PURE__ */ (0,
|
|
1422
|
-
/* @__PURE__ */ (0,
|
|
1507
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: toggleTextId, children: isOpen ? hideText : showText }),
|
|
1508
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons4.ChevronDownIcon, { size: 14, className: chevron2 })
|
|
1423
1509
|
]
|
|
1424
1510
|
}
|
|
1425
1511
|
)
|
|
1426
1512
|
] }),
|
|
1427
|
-
|
|
1513
|
+
item10.content && isOpen && // 내용이 길면 스크롤된다 — 키보드로도 스크롤할 수 있게 포커스를 받는 이름 있는 영역으로 둔다
|
|
1428
1514
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
1429
|
-
/* @__PURE__ */ (0,
|
|
1430
|
-
] },
|
|
1515
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: contentId, role: "region", "aria-labelledby": labelId, tabIndex: 0, className: content3, children: item10.content })
|
|
1516
|
+
] }, item10.value);
|
|
1431
1517
|
}) })
|
|
1432
1518
|
] }),
|
|
1433
|
-
name && agreed.map((v) => /* @__PURE__ */ (0,
|
|
1434
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
1519
|
+
name && agreed.map((v) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { type: "hidden", name, value: v }, v)),
|
|
1520
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
1435
1521
|
]
|
|
1436
1522
|
}
|
|
1437
1523
|
);
|
|
@@ -1439,21 +1525,21 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react18.forwardRef)(
|
|
|
1439
1525
|
);
|
|
1440
1526
|
|
|
1441
1527
|
// src/components/Alert/Alert.tsx
|
|
1442
|
-
var
|
|
1528
|
+
var import_react21 = require("react");
|
|
1443
1529
|
var import_icons5 = require("@bestow-ui/icons");
|
|
1444
1530
|
|
|
1445
1531
|
// src/components/Alert/Alert.css.ts
|
|
1446
|
-
var
|
|
1532
|
+
var import_createRuntimeFn14 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1447
1533
|
var action = "bsmpc0j";
|
|
1448
|
-
var alert = /* @__PURE__ */ (0,
|
|
1534
|
+
var alert = /* @__PURE__ */ (0, import_createRuntimeFn14.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: [] });
|
|
1449
1535
|
var closeButton2 = "bsmpc0k";
|
|
1450
1536
|
var content4 = "bsmpc0g";
|
|
1451
|
-
var
|
|
1537
|
+
var description3 = "bsmpc0i";
|
|
1452
1538
|
var icon3 = "bsmpc0f";
|
|
1453
1539
|
var title2 = "bsmpc0h";
|
|
1454
1540
|
|
|
1455
1541
|
// src/components/Alert/Alert.tsx
|
|
1456
|
-
var
|
|
1542
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1457
1543
|
var defaultIcons = {
|
|
1458
1544
|
primary: import_icons5.InfoIcon,
|
|
1459
1545
|
neutral: import_icons5.InfoIcon,
|
|
@@ -1461,7 +1547,7 @@ var defaultIcons = {
|
|
|
1461
1547
|
warning: import_icons5.TriangleAlertIcon,
|
|
1462
1548
|
danger: import_icons5.CircleAlertIcon
|
|
1463
1549
|
};
|
|
1464
|
-
var Alert = /* @__PURE__ */ (0,
|
|
1550
|
+
var Alert = /* @__PURE__ */ (0, import_react21.forwardRef)(function Alert2({
|
|
1465
1551
|
variant,
|
|
1466
1552
|
color = "primary",
|
|
1467
1553
|
title: title6,
|
|
@@ -1476,27 +1562,27 @@ var Alert = /* @__PURE__ */ (0, import_react19.forwardRef)(function Alert2({
|
|
|
1476
1562
|
const m = useMessages();
|
|
1477
1563
|
const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
|
|
1478
1564
|
const DefaultIcon = defaultIcons[color];
|
|
1479
|
-
const iconNode = icon7 === void 0 ? /* @__PURE__ */ (0,
|
|
1480
|
-
return /* @__PURE__ */ (0,
|
|
1481
|
-
iconNode !== false && iconNode !== null && /* @__PURE__ */ (0,
|
|
1482
|
-
/* @__PURE__ */ (0,
|
|
1483
|
-
title6 && /* @__PURE__ */ (0,
|
|
1484
|
-
children && /* @__PURE__ */ (0,
|
|
1565
|
+
const iconNode = icon7 === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DefaultIcon, { size: 18 }) : icon7;
|
|
1566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
|
|
1567
|
+
iconNode !== false && iconNode !== null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: icon3, "aria-hidden": true, children: iconNode }),
|
|
1568
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: content4, children: [
|
|
1569
|
+
title6 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: title2, children: title6 }),
|
|
1570
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: description3, children })
|
|
1485
1571
|
] }),
|
|
1486
|
-
action3 && /* @__PURE__ */ (0,
|
|
1487
|
-
onClose && /* @__PURE__ */ (0,
|
|
1572
|
+
action3 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: action, children: action3 }),
|
|
1573
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: closeButton2, "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons5.XIcon, { size: 16 }) })
|
|
1488
1574
|
] });
|
|
1489
1575
|
});
|
|
1490
1576
|
|
|
1491
1577
|
// src/components/AmountInput/AmountInput.tsx
|
|
1492
|
-
var
|
|
1578
|
+
var import_react24 = require("react");
|
|
1493
1579
|
|
|
1494
1580
|
// src/utils/useFormattedInput.ts
|
|
1495
|
-
var
|
|
1581
|
+
var import_react23 = require("react");
|
|
1496
1582
|
|
|
1497
1583
|
// src/utils/useIsomorphicLayoutEffect.ts
|
|
1498
|
-
var
|
|
1499
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1584
|
+
var import_react22 = require("react");
|
|
1585
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react22.useLayoutEffect : import_react22.useEffect;
|
|
1500
1586
|
|
|
1501
1587
|
// src/utils/useFormattedInput.ts
|
|
1502
1588
|
function caretAfter(display, count2, isMeaningful2) {
|
|
@@ -1518,10 +1604,10 @@ function useFormattedInput({
|
|
|
1518
1604
|
isMeaningful: isMeaningful2,
|
|
1519
1605
|
inputRef
|
|
1520
1606
|
}) {
|
|
1521
|
-
const [innerValue, setInnerValue] = (0,
|
|
1607
|
+
const [innerValue, setInnerValue] = (0, import_react23.useState)(() => sanitize4(defaultValue ?? ""));
|
|
1522
1608
|
const raw = isControlled ? sanitize4(value4 ?? "") : innerValue;
|
|
1523
1609
|
const display = format2(raw);
|
|
1524
|
-
const pendingCaret = (0,
|
|
1610
|
+
const pendingCaret = (0, import_react23.useRef)(null);
|
|
1525
1611
|
useIsomorphicLayoutEffect(() => {
|
|
1526
1612
|
const input6 = inputRef.current;
|
|
1527
1613
|
if (pendingCaret.current === null || !input6 || document.activeElement !== input6) return;
|
|
@@ -1544,7 +1630,7 @@ function useFormattedInput({
|
|
|
1544
1630
|
const input6 = event.currentTarget;
|
|
1545
1631
|
const { selectionStart: start, selectionEnd: end2 } = input6;
|
|
1546
1632
|
if (start === null || start !== end2) return;
|
|
1547
|
-
const countBefore = (
|
|
1633
|
+
const countBefore = (text3) => [...text3].filter(isMeaningful2).length;
|
|
1548
1634
|
if (event.key === "Backspace" && start > 0 && !isMeaningful2(input6.value[start - 1])) {
|
|
1549
1635
|
const index = countBefore(input6.value.slice(0, start)) - 1;
|
|
1550
1636
|
if (index < 0) return;
|
|
@@ -1565,10 +1651,10 @@ function useFormattedInput({
|
|
|
1565
1651
|
var input3 = "_70qkav0";
|
|
1566
1652
|
|
|
1567
1653
|
// src/components/AmountInput/AmountInput.tsx
|
|
1568
|
-
var
|
|
1654
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1569
1655
|
var MAX_DIGITS = 15;
|
|
1570
1656
|
var isDigit = (char) => /\d/.test(char);
|
|
1571
|
-
var AmountInput = /* @__PURE__ */ (0,
|
|
1657
|
+
var AmountInput = /* @__PURE__ */ (0, import_react24.forwardRef)(
|
|
1572
1658
|
function AmountInput2(props, ref) {
|
|
1573
1659
|
const {
|
|
1574
1660
|
value: value4,
|
|
@@ -1584,10 +1670,10 @@ var AmountInput = /* @__PURE__ */ (0, import_react22.forwardRef)(
|
|
|
1584
1670
|
className,
|
|
1585
1671
|
...rest
|
|
1586
1672
|
} = props;
|
|
1587
|
-
const inputRef = (0,
|
|
1673
|
+
const inputRef = (0, import_react24.useRef)(null);
|
|
1588
1674
|
const m = useMessages();
|
|
1589
1675
|
const unit2 = unitProp ?? m.currencyUnit ?? "\uC6D0";
|
|
1590
|
-
const
|
|
1676
|
+
const label7 = labelProp ?? m.amount ?? "\uAE08\uC561";
|
|
1591
1677
|
const sanitize4 = (input6) => {
|
|
1592
1678
|
let digits = input6.replace(/\D/g, "").replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS);
|
|
1593
1679
|
if (max !== void 0 && digits && Number(digits) > max) digits = String(Math.floor(max));
|
|
@@ -1605,11 +1691,11 @@ var AmountInput = /* @__PURE__ */ (0, import_react22.forwardRef)(
|
|
|
1605
1691
|
inputRef
|
|
1606
1692
|
});
|
|
1607
1693
|
const reading = showKoreanAmount && field3.raw !== "" ? formatKoreanAmount(Number(field3.raw), unit2) : null;
|
|
1608
|
-
return /* @__PURE__ */ (0,
|
|
1694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1609
1695
|
TextField,
|
|
1610
1696
|
{
|
|
1611
1697
|
ref: mergeRefs(ref, inputRef),
|
|
1612
|
-
label:
|
|
1698
|
+
label: label7,
|
|
1613
1699
|
placeholder,
|
|
1614
1700
|
inputMode: "numeric",
|
|
1615
1701
|
value: field3.display,
|
|
@@ -1619,9 +1705,9 @@ var AmountInput = /* @__PURE__ */ (0, import_react22.forwardRef)(
|
|
|
1619
1705
|
onKeyDown?.(event);
|
|
1620
1706
|
},
|
|
1621
1707
|
endAdornment: unit2,
|
|
1622
|
-
helperText: reading && helperText3 ? /* @__PURE__ */ (0,
|
|
1708
|
+
helperText: reading && helperText3 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
1623
1709
|
reading,
|
|
1624
|
-
/* @__PURE__ */ (0,
|
|
1710
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("br", {}),
|
|
1625
1711
|
helperText3
|
|
1626
1712
|
] }) : reading ?? helperText3,
|
|
1627
1713
|
className: cx(input3, className),
|
|
@@ -1634,51 +1720,51 @@ var AmountInput = /* @__PURE__ */ (0, import_react22.forwardRef)(
|
|
|
1634
1720
|
// src/components/Avatar/Avatar.tsx
|
|
1635
1721
|
var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
|
|
1636
1722
|
var import_icons6 = require("@bestow-ui/icons");
|
|
1637
|
-
var
|
|
1723
|
+
var import_react25 = require("react");
|
|
1638
1724
|
|
|
1639
1725
|
// src/components/Avatar/Avatar.css.ts
|
|
1640
|
-
var
|
|
1726
|
+
var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1641
1727
|
var fallback = "_1fd2kp27";
|
|
1642
1728
|
var image = "_1fd2kp26";
|
|
1643
|
-
var
|
|
1729
|
+
var root7 = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
|
|
1644
1730
|
|
|
1645
1731
|
// src/components/Avatar/Avatar.tsx
|
|
1646
|
-
var
|
|
1732
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1647
1733
|
function getInitials(name) {
|
|
1648
1734
|
const [a = "", b = ""] = name.trim().split(/\s+/);
|
|
1649
1735
|
const first = (word) => Array.from(word)[0] ?? "";
|
|
1650
1736
|
return (first(a) + first(b)).toUpperCase();
|
|
1651
1737
|
}
|
|
1652
|
-
var Avatar = /* @__PURE__ */ (0,
|
|
1653
|
-
const
|
|
1654
|
-
const a11y =
|
|
1738
|
+
var Avatar = /* @__PURE__ */ (0, import_react25.forwardRef)(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
|
|
1739
|
+
const label7 = alt ?? name;
|
|
1740
|
+
const a11y = label7 ? { role: "img", "aria-label": label7 } : { "aria-hidden": true };
|
|
1655
1741
|
const initials = name ? getInitials(name) : "";
|
|
1656
|
-
return /* @__PURE__ */ (0,
|
|
1657
|
-
src && /* @__PURE__ */ (0,
|
|
1658
|
-
/* @__PURE__ */ (0,
|
|
1742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(RadixAvatar.Root, { ref, className: cx(root7({ size, shape }), className), ...a11y, ...rest, children: [
|
|
1743
|
+
src && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixAvatar.Image, { src, alt: "", className: image }),
|
|
1744
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons6.UserIcon, { size: "60%" })) })
|
|
1659
1745
|
] });
|
|
1660
1746
|
});
|
|
1661
1747
|
|
|
1662
1748
|
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
1663
|
-
var
|
|
1749
|
+
var import_react27 = require("react");
|
|
1664
1750
|
var import_icons8 = require("@bestow-ui/icons");
|
|
1665
1751
|
|
|
1666
1752
|
// src/components/Link/Link.tsx
|
|
1667
1753
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
1668
|
-
var
|
|
1754
|
+
var import_react26 = require("react");
|
|
1669
1755
|
var import_icons7 = require("@bestow-ui/icons");
|
|
1670
1756
|
|
|
1671
1757
|
// src/components/Link/Link.css.ts
|
|
1672
|
-
var
|
|
1758
|
+
var import_createRuntimeFn16 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1673
1759
|
var externalIcon = "_1t4hlp6";
|
|
1674
|
-
var link = /* @__PURE__ */ (0,
|
|
1760
|
+
var link = /* @__PURE__ */ (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassName: "_1t4hlp0", variantClassNames: { color: { primary: "_1t4hlp1", neutral: "_1t4hlp2", inherit: "_1t4hlp3" }, underline: { always: "_1t4hlp4", hover: "_1t4hlp5" } }, defaultVariants: { color: "primary", underline: "always" }, compoundVariants: [] });
|
|
1675
1761
|
|
|
1676
1762
|
// src/components/Link/Link.tsx
|
|
1677
|
-
var
|
|
1763
|
+
var import_jsx_runtime24 = (
|
|
1678
1764
|
// Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
|
|
1679
1765
|
require("react/jsx-runtime")
|
|
1680
1766
|
);
|
|
1681
|
-
var Link = /* @__PURE__ */ (0,
|
|
1767
|
+
var Link = /* @__PURE__ */ (0, import_react26.forwardRef)(function Link2({
|
|
1682
1768
|
as: Component = "a",
|
|
1683
1769
|
asChild,
|
|
1684
1770
|
color,
|
|
@@ -1695,9 +1781,9 @@ var Link = /* @__PURE__ */ (0, import_react24.forwardRef)(function Link2({
|
|
|
1695
1781
|
const externalLabel = externalLabelProp ?? m.newWindow ?? "(\uC0C8 \uCC3D)";
|
|
1696
1782
|
const linkClassName = cx(link({ color, underline }), className);
|
|
1697
1783
|
if (asChild) {
|
|
1698
|
-
return /* @__PURE__ */ (0,
|
|
1784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_slot.Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children });
|
|
1699
1785
|
}
|
|
1700
|
-
return /* @__PURE__ */ (0,
|
|
1786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1701
1787
|
Component,
|
|
1702
1788
|
{
|
|
1703
1789
|
ref,
|
|
@@ -1707,10 +1793,10 @@ var Link = /* @__PURE__ */ (0, import_react24.forwardRef)(function Link2({
|
|
|
1707
1793
|
...rest,
|
|
1708
1794
|
children: [
|
|
1709
1795
|
children,
|
|
1710
|
-
external && /* @__PURE__ */ (0,
|
|
1796
|
+
external && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
1711
1797
|
" ",
|
|
1712
|
-
/* @__PURE__ */ (0,
|
|
1713
|
-
/* @__PURE__ */ (0,
|
|
1798
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons7.ExternalLinkIcon, { className: externalIcon }),
|
|
1799
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: visuallyHidden, children: externalLabel })
|
|
1714
1800
|
] })
|
|
1715
1801
|
]
|
|
1716
1802
|
}
|
|
@@ -1719,32 +1805,32 @@ var Link = /* @__PURE__ */ (0, import_react24.forwardRef)(function Link2({
|
|
|
1719
1805
|
|
|
1720
1806
|
// src/components/Breadcrumb/Breadcrumb.css.ts
|
|
1721
1807
|
var current = "_18t8ztt3";
|
|
1722
|
-
var
|
|
1808
|
+
var item4 = "_18t8ztt1";
|
|
1723
1809
|
var link2 = "_18t8ztt2";
|
|
1724
1810
|
var list2 = "_18t8ztt0";
|
|
1725
1811
|
var separator = "_18t8ztt4";
|
|
1726
1812
|
|
|
1727
1813
|
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
1728
|
-
var
|
|
1729
|
-
var Breadcrumb = /* @__PURE__ */ (0,
|
|
1814
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1815
|
+
var Breadcrumb = /* @__PURE__ */ (0, import_react27.forwardRef)(function Breadcrumb2({ items: items2, linkAs, separator: separator3, "aria-label": ariaLabelProp, className, ...rest }, ref) {
|
|
1730
1816
|
const m = useMessages();
|
|
1731
1817
|
const ariaLabel = ariaLabelProp ?? m.breadcrumb ?? "\uC774\uB3D9 \uACBD\uB85C";
|
|
1732
|
-
const sep = separator3 ?? /* @__PURE__ */ (0,
|
|
1733
|
-
return /* @__PURE__ */ (0,
|
|
1818
|
+
const sep = separator3 ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons8.ChevronRightIcon, { size: 14 });
|
|
1819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ol", { className: list2, children: items2.map((item10, index) => {
|
|
1734
1820
|
const isCurrent = index === items2.length - 1;
|
|
1735
|
-
return /* @__PURE__ */ (0,
|
|
1736
|
-
index > 0 && /* @__PURE__ */ (0,
|
|
1737
|
-
isCurrent ||
|
|
1821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: item4, children: [
|
|
1822
|
+
index > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: separator, "aria-hidden": true, children: sep }),
|
|
1823
|
+
isCurrent || item10.href === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: isCurrent ? current : void 0, "aria-current": isCurrent ? "page" : void 0, children: item10.label }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Link, { as: linkAs, href: item10.href, color: "neutral", underline: "hover", className: link2, children: item10.label })
|
|
1738
1824
|
] }, index);
|
|
1739
1825
|
}) }) });
|
|
1740
1826
|
});
|
|
1741
1827
|
|
|
1742
1828
|
// src/components/BusinessNumberInput/BusinessNumberInput.tsx
|
|
1743
|
-
var
|
|
1744
|
-
var
|
|
1829
|
+
var import_react28 = require("react");
|
|
1830
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1745
1831
|
var sanitize = (input6) => input6.replace(/\D/g, "").slice(0, 10);
|
|
1746
1832
|
var isDigit2 = (char) => /\d/.test(char);
|
|
1747
|
-
var BusinessNumberInput = /* @__PURE__ */ (0,
|
|
1833
|
+
var BusinessNumberInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
|
|
1748
1834
|
function BusinessNumberInput2(props, ref) {
|
|
1749
1835
|
const {
|
|
1750
1836
|
value: value4,
|
|
@@ -1760,12 +1846,12 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react26.forwardRef)(
|
|
|
1760
1846
|
onKeyDown,
|
|
1761
1847
|
...rest
|
|
1762
1848
|
} = props;
|
|
1763
|
-
const inputRef = (0,
|
|
1849
|
+
const inputRef = (0, import_react28.useRef)(null);
|
|
1764
1850
|
const m = useMessages();
|
|
1765
1851
|
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.";
|
|
1766
|
-
const
|
|
1852
|
+
const label7 = labelProp ?? m.businessNumber ?? "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638";
|
|
1767
1853
|
const incompleteText = m.businessNumberIncomplete ?? "10\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
|
|
1768
|
-
const [touched, setTouched] = (0,
|
|
1854
|
+
const [touched, setTouched] = (0, import_react28.useState)(false);
|
|
1769
1855
|
const field3 = useFormattedInput({
|
|
1770
1856
|
isControlled: "value" in props,
|
|
1771
1857
|
value: value4,
|
|
@@ -1779,11 +1865,11 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react26.forwardRef)(
|
|
|
1779
1865
|
const complete = field3.raw.length === 10;
|
|
1780
1866
|
const autoInvalid = validate && field3.raw.length > 0 && (complete ? !isValidBusinessNumber(field3.raw) : touched);
|
|
1781
1867
|
const showAuto = autoInvalid && error === void 0;
|
|
1782
|
-
return /* @__PURE__ */ (0,
|
|
1868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1783
1869
|
TextField,
|
|
1784
1870
|
{
|
|
1785
1871
|
ref: mergeRefs(ref, inputRef),
|
|
1786
|
-
label:
|
|
1872
|
+
label: label7,
|
|
1787
1873
|
placeholder,
|
|
1788
1874
|
inputMode: "numeric",
|
|
1789
1875
|
value: field3.display,
|
|
@@ -1805,15 +1891,15 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react26.forwardRef)(
|
|
|
1805
1891
|
);
|
|
1806
1892
|
|
|
1807
1893
|
// src/components/Calendar/Calendar.tsx
|
|
1808
|
-
var
|
|
1894
|
+
var import_react31 = require("react");
|
|
1809
1895
|
var import_icons9 = require("@bestow-ui/icons");
|
|
1810
1896
|
|
|
1811
1897
|
// src/utils/useIsClient.ts
|
|
1812
|
-
var
|
|
1898
|
+
var import_react29 = require("react");
|
|
1813
1899
|
var subscribeNothing = () => () => {
|
|
1814
1900
|
};
|
|
1815
1901
|
function useIsClient() {
|
|
1816
|
-
return (0,
|
|
1902
|
+
return (0, import_react29.useSyncExternalStore)(
|
|
1817
1903
|
subscribeNothing,
|
|
1818
1904
|
() => true,
|
|
1819
1905
|
() => false
|
|
@@ -1821,16 +1907,16 @@ function useIsClient() {
|
|
|
1821
1907
|
}
|
|
1822
1908
|
|
|
1823
1909
|
// src/components/IconButton/IconButton.tsx
|
|
1824
|
-
var
|
|
1910
|
+
var import_react30 = require("react");
|
|
1825
1911
|
|
|
1826
1912
|
// src/components/IconButton/IconButton.css.ts
|
|
1827
|
-
var
|
|
1828
|
-
var iconButton = /* @__PURE__ */ (0,
|
|
1913
|
+
var import_createRuntimeFn17 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1914
|
+
var iconButton = /* @__PURE__ */ (0, import_createRuntimeFn17.createRuntimeFn)({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1829
1915
|
|
|
1830
1916
|
// src/components/IconButton/IconButton.tsx
|
|
1831
|
-
var
|
|
1832
|
-
var IconButton = /* @__PURE__ */ (0,
|
|
1833
|
-
return /* @__PURE__ */ (0,
|
|
1917
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1918
|
+
var IconButton = /* @__PURE__ */ (0, import_react30.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, className, children, ...rest }, ref) {
|
|
1919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1834
1920
|
Button,
|
|
1835
1921
|
{
|
|
1836
1922
|
ref,
|
|
@@ -1851,12 +1937,12 @@ var day = "_1qyq67b6";
|
|
|
1851
1937
|
var grid = "_1qyq67b3";
|
|
1852
1938
|
var header5 = "_1qyq67b1";
|
|
1853
1939
|
var heading = "_1qyq67b2";
|
|
1854
|
-
var
|
|
1940
|
+
var root8 = "_1qyq67b0";
|
|
1855
1941
|
var weekday = "_1qyq67b4";
|
|
1856
1942
|
|
|
1857
1943
|
// src/components/Calendar/Calendar.tsx
|
|
1858
|
-
var
|
|
1859
|
-
var Calendar = /* @__PURE__ */ (0,
|
|
1944
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1945
|
+
var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2(props, ref) {
|
|
1860
1946
|
const {
|
|
1861
1947
|
value: value4,
|
|
1862
1948
|
defaultValue,
|
|
@@ -1876,10 +1962,10 @@ var Calendar = /* @__PURE__ */ (0, import_react29.forwardRef)(function Calendar2
|
|
|
1876
1962
|
const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
|
|
1877
1963
|
const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
|
|
1878
1964
|
const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
|
|
1879
|
-
const headingId = (0,
|
|
1880
|
-
const gridRef = (0,
|
|
1965
|
+
const headingId = (0, import_react31.useId)();
|
|
1966
|
+
const gridRef = (0, import_react31.useRef)(null);
|
|
1881
1967
|
const isControlled = "value" in props;
|
|
1882
|
-
const [innerValue, setInnerValue] = (0,
|
|
1968
|
+
const [innerValue, setInnerValue] = (0, import_react31.useState)(defaultValue ?? "");
|
|
1883
1969
|
const selected = parseISODate(isControlled ? value4 : innerValue);
|
|
1884
1970
|
const isClient = useIsClient();
|
|
1885
1971
|
const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
|
|
@@ -1891,16 +1977,16 @@ var Calendar = /* @__PURE__ */ (0, import_react29.forwardRef)(function Calendar2
|
|
|
1891
1977
|
return date;
|
|
1892
1978
|
};
|
|
1893
1979
|
const isDisabled = (date) => minDate !== null && compareDays(date, minDate) < 0 || maxDate !== null && compareDays(date, maxDate) > 0 || !!isDateDisabled?.(date);
|
|
1894
|
-
const [focusedState, setFocused] = (0,
|
|
1980
|
+
const [focusedState, setFocused] = (0, import_react31.useState)(null);
|
|
1895
1981
|
const base = selected ?? today;
|
|
1896
1982
|
const focused = focusedState ?? (base ? clamp(base) : null);
|
|
1897
|
-
const moveFocus = (0,
|
|
1983
|
+
const moveFocus = (0, import_react31.useRef)(initialFocus ?? false);
|
|
1898
1984
|
const selectedIso = selected ? toISODate(selected) : "";
|
|
1899
|
-
(0,
|
|
1985
|
+
(0, import_react31.useEffect)(() => {
|
|
1900
1986
|
const date = parseISODate(selectedIso);
|
|
1901
1987
|
if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
|
|
1902
1988
|
}, [selectedIso]);
|
|
1903
|
-
(0,
|
|
1989
|
+
(0, import_react31.useEffect)(() => {
|
|
1904
1990
|
if (!moveFocus.current || !focused) return;
|
|
1905
1991
|
moveFocus.current = false;
|
|
1906
1992
|
gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
|
|
@@ -1940,46 +2026,46 @@ var Calendar = /* @__PURE__ */ (0, import_react29.forwardRef)(function Calendar2
|
|
|
1940
2026
|
) : [];
|
|
1941
2027
|
const canPrev = !!visible && (!minDate || compareDays(new Date(visible.getFullYear(), visible.getMonth(), 0), minDate) >= 0);
|
|
1942
2028
|
const canNext = !!visible && (!maxDate || compareDays(new Date(visible.getFullYear(), visible.getMonth() + 1, 1), maxDate) <= 0);
|
|
1943
|
-
return /* @__PURE__ */ (0,
|
|
1944
|
-
/* @__PURE__ */ (0,
|
|
1945
|
-
/* @__PURE__ */ (0,
|
|
2029
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, className: cx(root8, className), children: [
|
|
2030
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: header5, children: [
|
|
2031
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1946
2032
|
IconButton,
|
|
1947
2033
|
{
|
|
1948
2034
|
"aria-label": prevMonthLabel,
|
|
1949
2035
|
size: "sm",
|
|
1950
2036
|
disabled: !canPrev,
|
|
1951
2037
|
onClick: () => visible && setFocused(clamp(addMonths(visible, -1))),
|
|
1952
|
-
children: /* @__PURE__ */ (0,
|
|
2038
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons9.ChevronLeftIcon, {})
|
|
1953
2039
|
}
|
|
1954
2040
|
),
|
|
1955
|
-
/* @__PURE__ */ (0,
|
|
1956
|
-
/* @__PURE__ */ (0,
|
|
2041
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.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`) }),
|
|
2042
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1957
2043
|
IconButton,
|
|
1958
2044
|
{
|
|
1959
2045
|
"aria-label": nextMonthLabel,
|
|
1960
2046
|
size: "sm",
|
|
1961
2047
|
disabled: !canNext,
|
|
1962
2048
|
onClick: () => visible && setFocused(clamp(addMonths(visible, 1))),
|
|
1963
|
-
children: /* @__PURE__ */ (0,
|
|
2049
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons9.ChevronRightIcon, {})
|
|
1964
2050
|
}
|
|
1965
2051
|
)
|
|
1966
2052
|
] }),
|
|
1967
|
-
/* @__PURE__ */ (0,
|
|
1968
|
-
/* @__PURE__ */ (0,
|
|
1969
|
-
/* @__PURE__ */ (0,
|
|
2053
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
|
|
2054
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { children: weekdaysShort.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { scope: "col", abbr: weekdaysLong[index], className: weekday, "data-weekday": index, children: name }, index)) }) }),
|
|
2055
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { children: weeks.map((week) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { children: week.map((date) => {
|
|
1970
2056
|
const iso = toISODate(date);
|
|
1971
2057
|
if (!visible || !isSameMonth(date, visible))
|
|
1972
|
-
return /* @__PURE__ */ (0,
|
|
2058
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { role: "gridcell", className: cell }, iso);
|
|
1973
2059
|
const isSelected = isSameDay(date, selected);
|
|
1974
2060
|
const isToday = isSameDay(date, today);
|
|
1975
2061
|
const holiday = !!isHoliday?.(date);
|
|
1976
2062
|
const disabled = isDisabled(date);
|
|
1977
|
-
const
|
|
2063
|
+
const label7 = [
|
|
1978
2064
|
m.dayLabel?.(date, weekdaysLong[date.getDay()]) ?? `${date.getDate()}, ${date.getFullYear()}\uB144 ${date.getMonth() + 1}\uC6D4 ${weekdaysLong[date.getDay()]}`,
|
|
1979
2065
|
holiday && (m.holiday ?? "\uACF5\uD734\uC77C"),
|
|
1980
2066
|
isToday && (m.today ?? "\uC624\uB298")
|
|
1981
2067
|
].filter(Boolean).join(", ");
|
|
1982
|
-
return /* @__PURE__ */ (0,
|
|
2068
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { role: "gridcell", "aria-selected": isSelected, className: cell, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1983
2069
|
"button",
|
|
1984
2070
|
{
|
|
1985
2071
|
type: "button",
|
|
@@ -1989,7 +2075,7 @@ var Calendar = /* @__PURE__ */ (0, import_react29.forwardRef)(function Calendar2
|
|
|
1989
2075
|
"data-holiday": holiday || void 0,
|
|
1990
2076
|
"data-selected": isSelected || void 0,
|
|
1991
2077
|
tabIndex: isSameDay(date, focused) ? 0 : -1,
|
|
1992
|
-
"aria-label":
|
|
2078
|
+
"aria-label": label7,
|
|
1993
2079
|
"aria-current": isToday ? "date" : void 0,
|
|
1994
2080
|
"aria-disabled": disabled || void 0,
|
|
1995
2081
|
onClick: () => select(date),
|
|
@@ -2004,13 +2090,13 @@ var Calendar = /* @__PURE__ */ (0, import_react29.forwardRef)(function Calendar2
|
|
|
2004
2090
|
|
|
2005
2091
|
// src/components/Combobox/Combobox.tsx
|
|
2006
2092
|
var Popover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
2007
|
-
var
|
|
2093
|
+
var import_react32 = require("react");
|
|
2008
2094
|
var import_icons10 = require("@bestow-ui/icons");
|
|
2009
2095
|
|
|
2010
2096
|
// src/components/Select/Select.css.ts
|
|
2011
2097
|
var content5 = "_1kx81e83";
|
|
2012
2098
|
var icon4 = "_1kx81e82";
|
|
2013
|
-
var
|
|
2099
|
+
var item5 = "_1kx81e85";
|
|
2014
2100
|
var itemIndicator = "_1kx81e86";
|
|
2015
2101
|
var trigger2 = "_1kx81e80";
|
|
2016
2102
|
var value2 = "_1kx81e81";
|
|
@@ -2023,9 +2109,9 @@ var empty = "c2pbq74";
|
|
|
2023
2109
|
var toggle2 = "c2pbq71 c2pbq70";
|
|
2024
2110
|
|
|
2025
2111
|
// src/components/Combobox/Combobox.tsx
|
|
2026
|
-
var
|
|
2112
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2027
2113
|
var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
|
|
2028
|
-
var Combobox = /* @__PURE__ */ (0,
|
|
2114
|
+
var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2(props, ref) {
|
|
2029
2115
|
const {
|
|
2030
2116
|
options,
|
|
2031
2117
|
value: value4,
|
|
@@ -2034,7 +2120,7 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2034
2120
|
filter = defaultFilter,
|
|
2035
2121
|
emptyMessage: emptyMessageProp,
|
|
2036
2122
|
placeholder,
|
|
2037
|
-
label:
|
|
2123
|
+
label: label7,
|
|
2038
2124
|
helperText: helperText3,
|
|
2039
2125
|
error,
|
|
2040
2126
|
size,
|
|
@@ -2053,33 +2139,33 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2053
2139
|
const emptyMessage = emptyMessageProp ?? m.noResults ?? "\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694";
|
|
2054
2140
|
const toggleLabel = toggleLabelProp ?? m.openList ?? "\uBAA9\uB85D \uC5F4\uAE30";
|
|
2055
2141
|
const clearLabel = clearLabelProp ?? m.clearSelection ?? "\uC120\uD0DD \uC9C0\uC6B0\uAE30";
|
|
2056
|
-
const generatedId = (0,
|
|
2142
|
+
const generatedId = (0, import_react32.useId)();
|
|
2057
2143
|
const inputId = id ?? generatedId;
|
|
2058
2144
|
const labelId = `${inputId}-label`;
|
|
2059
2145
|
const listId = `${inputId}-listbox`;
|
|
2060
2146
|
const helperId = helperText3 ? `${inputId}-helper` : void 0;
|
|
2061
2147
|
const optionId = (index) => `${inputId}-option-${index}`;
|
|
2062
2148
|
const portal2 = usePortalProps();
|
|
2063
|
-
const inputRef = (0,
|
|
2064
|
-
const anchorRef = (0,
|
|
2149
|
+
const inputRef = (0, import_react32.useRef)(null);
|
|
2150
|
+
const anchorRef = (0, import_react32.useRef)(null);
|
|
2065
2151
|
const isControlled = "value" in props;
|
|
2066
|
-
const [innerValue, setInnerValue] = (0,
|
|
2152
|
+
const [innerValue, setInnerValue] = (0, import_react32.useState)(defaultValue);
|
|
2067
2153
|
const selectedValue = isControlled ? value4 : innerValue;
|
|
2068
2154
|
const selectedOption = options.find((o) => o.value === selectedValue);
|
|
2069
|
-
const [open, setOpen] = (0,
|
|
2070
|
-
const [query, setQuery] = (0,
|
|
2071
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
2072
|
-
const filtered = (0,
|
|
2155
|
+
const [open, setOpen] = (0, import_react32.useState)(false);
|
|
2156
|
+
const [query, setQuery] = (0, import_react32.useState)(null);
|
|
2157
|
+
const [activeIndex, setActiveIndex] = (0, import_react32.useState)(-1);
|
|
2158
|
+
const filtered = (0, import_react32.useMemo)(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
|
|
2073
2159
|
const inputText = query ?? selectedOption?.label ?? "";
|
|
2074
|
-
const firstEnabled = (
|
|
2075
|
-
for (let i = from; i >= 0 && i <
|
|
2160
|
+
const firstEnabled = (list7, from = 0, step2 = 1) => {
|
|
2161
|
+
for (let i = from; i >= 0 && i < list7.length; i += step2) if (!list7[i].disabled) return i;
|
|
2076
2162
|
return -1;
|
|
2077
2163
|
};
|
|
2078
|
-
const openList = (
|
|
2164
|
+
const openList = (list7 = filtered, preferLast = false) => {
|
|
2079
2165
|
setOpen(true);
|
|
2080
|
-
const selectedIndex =
|
|
2166
|
+
const selectedIndex = list7.findIndex((o) => o.value === selectedValue);
|
|
2081
2167
|
setActiveIndex(
|
|
2082
|
-
selectedIndex >= 0 && !
|
|
2168
|
+
selectedIndex >= 0 && !list7[selectedIndex].disabled ? selectedIndex : preferLast ? firstEnabled(list7, list7.length - 1, -1) : firstEnabled(list7)
|
|
2083
2169
|
);
|
|
2084
2170
|
};
|
|
2085
2171
|
const reset = () => {
|
|
@@ -2101,9 +2187,9 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2101
2187
|
if (option2.value !== selectedValue) onValueChange?.(option2.value);
|
|
2102
2188
|
reset();
|
|
2103
2189
|
};
|
|
2104
|
-
const move = (
|
|
2105
|
-
const start = activeIndex < 0 ?
|
|
2106
|
-
const next = firstEnabled(filtered, start,
|
|
2190
|
+
const move = (step2) => {
|
|
2191
|
+
const start = activeIndex < 0 ? step2 === 1 ? 0 : filtered.length - 1 : activeIndex + step2;
|
|
2192
|
+
const next = firstEnabled(filtered, start, step2);
|
|
2107
2193
|
if (next >= 0) setActiveIndex(next);
|
|
2108
2194
|
};
|
|
2109
2195
|
const handleChange = (event) => {
|
|
@@ -2144,26 +2230,26 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2144
2230
|
break;
|
|
2145
2231
|
}
|
|
2146
2232
|
};
|
|
2147
|
-
(0,
|
|
2233
|
+
(0, import_react32.useEffect)(() => {
|
|
2148
2234
|
if (!open || activeIndex < 0) return;
|
|
2149
2235
|
document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
|
|
2150
2236
|
}, [open, activeIndex]);
|
|
2151
2237
|
const hasOptions = filtered.length > 0;
|
|
2152
|
-
return /* @__PURE__ */ (0,
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
required && /* @__PURE__ */ (0,
|
|
2238
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
2239
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { id: labelId, htmlFor: inputId, className: label2, children: [
|
|
2240
|
+
label7,
|
|
2241
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
2156
2242
|
] }),
|
|
2157
|
-
/* @__PURE__ */ (0,
|
|
2158
|
-
/* @__PURE__ */ (0,
|
|
2243
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
|
|
2244
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2159
2245
|
"div",
|
|
2160
2246
|
{
|
|
2161
2247
|
ref: anchorRef,
|
|
2162
|
-
className: cx(
|
|
2248
|
+
className: cx(root5({ size, fullWidth }), className),
|
|
2163
2249
|
"data-invalid": error || void 0,
|
|
2164
2250
|
"data-disabled": disabled || void 0,
|
|
2165
2251
|
children: [
|
|
2166
|
-
/* @__PURE__ */ (0,
|
|
2252
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2167
2253
|
"input",
|
|
2168
2254
|
{
|
|
2169
2255
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -2174,7 +2260,7 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2174
2260
|
"aria-controls": open && hasOptions ? listId : void 0,
|
|
2175
2261
|
"aria-autocomplete": "list",
|
|
2176
2262
|
"aria-activedescendant": open && activeIndex >= 0 ? optionId(activeIndex) : void 0,
|
|
2177
|
-
"aria-label":
|
|
2263
|
+
"aria-label": label7 ? void 0 : ariaLabel,
|
|
2178
2264
|
"aria-invalid": error || void 0,
|
|
2179
2265
|
"aria-required": required || void 0,
|
|
2180
2266
|
"aria-describedby": helperId,
|
|
@@ -2190,7 +2276,7 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2190
2276
|
className: input
|
|
2191
2277
|
}
|
|
2192
2278
|
),
|
|
2193
|
-
clearable && selectedOption && !disabled && /* @__PURE__ */ (0,
|
|
2279
|
+
clearable && selectedOption && !disabled && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2194
2280
|
"button",
|
|
2195
2281
|
{
|
|
2196
2282
|
type: "button",
|
|
@@ -2203,10 +2289,10 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2203
2289
|
reset();
|
|
2204
2290
|
inputRef.current?.focus();
|
|
2205
2291
|
},
|
|
2206
|
-
children: /* @__PURE__ */ (0,
|
|
2292
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons10.XIcon, { size: 16 })
|
|
2207
2293
|
}
|
|
2208
2294
|
),
|
|
2209
|
-
/* @__PURE__ */ (0,
|
|
2295
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2210
2296
|
"button",
|
|
2211
2297
|
{
|
|
2212
2298
|
type: "button",
|
|
@@ -2221,13 +2307,13 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2221
2307
|
else openList(options);
|
|
2222
2308
|
inputRef.current?.focus();
|
|
2223
2309
|
},
|
|
2224
|
-
children: /* @__PURE__ */ (0,
|
|
2310
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons10.ChevronDownIcon, { size: 16 })
|
|
2225
2311
|
}
|
|
2226
2312
|
)
|
|
2227
2313
|
]
|
|
2228
2314
|
}
|
|
2229
2315
|
) }),
|
|
2230
|
-
/* @__PURE__ */ (0,
|
|
2316
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2231
2317
|
Popover.Content,
|
|
2232
2318
|
{
|
|
2233
2319
|
role: "presentation",
|
|
@@ -2242,19 +2328,19 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2242
2328
|
onInteractOutside: (event) => {
|
|
2243
2329
|
if (anchorRef.current?.contains(event.target)) event.preventDefault();
|
|
2244
2330
|
},
|
|
2245
|
-
children: hasOptions ? /* @__PURE__ */ (0,
|
|
2331
|
+
children: hasOptions ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2246
2332
|
"div",
|
|
2247
2333
|
{
|
|
2248
2334
|
id: listId,
|
|
2249
2335
|
role: "listbox",
|
|
2250
|
-
"aria-labelledby":
|
|
2251
|
-
"aria-label":
|
|
2336
|
+
"aria-labelledby": label7 ? labelId : void 0,
|
|
2337
|
+
"aria-label": label7 ? void 0 : ariaLabel,
|
|
2252
2338
|
children: filtered.map((option2, index) => {
|
|
2253
2339
|
const isSelected = option2.value === selectedValue;
|
|
2254
2340
|
return (
|
|
2255
2341
|
// aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
|
|
2256
2342
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
|
|
2257
|
-
/* @__PURE__ */ (0,
|
|
2343
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2258
2344
|
"div",
|
|
2259
2345
|
{
|
|
2260
2346
|
id: optionId(index),
|
|
@@ -2264,13 +2350,13 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2264
2350
|
"data-highlighted": index === activeIndex ? "" : void 0,
|
|
2265
2351
|
"data-state": isSelected ? "checked" : "unchecked",
|
|
2266
2352
|
"data-disabled": option2.disabled ? "" : void 0,
|
|
2267
|
-
className:
|
|
2353
|
+
className: item5,
|
|
2268
2354
|
onMouseDown: (event) => event.preventDefault(),
|
|
2269
2355
|
onMouseMove: () => !option2.disabled && setActiveIndex(index),
|
|
2270
2356
|
onClick: () => select(option2),
|
|
2271
2357
|
children: [
|
|
2272
2358
|
option2.label,
|
|
2273
|
-
isSelected && /* @__PURE__ */ (0,
|
|
2359
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons10.CheckIcon, { size: 16 }) })
|
|
2274
2360
|
]
|
|
2275
2361
|
},
|
|
2276
2362
|
option2.value
|
|
@@ -2278,23 +2364,23 @@ var Combobox = /* @__PURE__ */ (0, import_react30.forwardRef)(function Combobox2
|
|
|
2278
2364
|
);
|
|
2279
2365
|
})
|
|
2280
2366
|
}
|
|
2281
|
-
) : /* @__PURE__ */ (0,
|
|
2367
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: empty, role: "status", children: emptyMessage })
|
|
2282
2368
|
}
|
|
2283
2369
|
) })
|
|
2284
2370
|
] }),
|
|
2285
|
-
name && /* @__PURE__ */ (0,
|
|
2286
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
2371
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { type: "hidden", name, value: selectedValue ?? "" }),
|
|
2372
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
2287
2373
|
] });
|
|
2288
2374
|
});
|
|
2289
2375
|
|
|
2290
2376
|
// src/components/DatePicker/DatePicker.tsx
|
|
2291
|
-
var
|
|
2377
|
+
var import_react34 = require("react");
|
|
2292
2378
|
var import_icons12 = require("@bestow-ui/icons");
|
|
2293
2379
|
|
|
2294
2380
|
// src/components/Popover/Popover.tsx
|
|
2295
2381
|
var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
2296
2382
|
var import_icons11 = require("@bestow-ui/icons");
|
|
2297
|
-
var
|
|
2383
|
+
var import_react33 = require("react");
|
|
2298
2384
|
|
|
2299
2385
|
// src/components/Popover/Popover.css.ts
|
|
2300
2386
|
var arrow = "_1j99p8x4";
|
|
@@ -2304,7 +2390,7 @@ var header6 = "_1j99p8x1";
|
|
|
2304
2390
|
var title3 = "_1j99p8x2";
|
|
2305
2391
|
|
|
2306
2392
|
// src/components/Popover/Popover.tsx
|
|
2307
|
-
var
|
|
2393
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2308
2394
|
function Popover2({
|
|
2309
2395
|
content: content12,
|
|
2310
2396
|
children,
|
|
@@ -2324,10 +2410,10 @@ function Popover2({
|
|
|
2324
2410
|
}) {
|
|
2325
2411
|
const portal2 = usePortalProps();
|
|
2326
2412
|
const m = useMessages();
|
|
2327
|
-
const titleId = (0,
|
|
2328
|
-
return /* @__PURE__ */ (0,
|
|
2329
|
-
/* @__PURE__ */ (0,
|
|
2330
|
-
/* @__PURE__ */ (0,
|
|
2413
|
+
const titleId = (0, import_react33.useId)();
|
|
2414
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
|
|
2415
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixPopover.Trigger, { asChild: true, children }),
|
|
2416
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2331
2417
|
RadixPopover.Content,
|
|
2332
2418
|
{
|
|
2333
2419
|
side,
|
|
@@ -2340,12 +2426,12 @@ function Popover2({
|
|
|
2340
2426
|
className: cx(portal2.className, content7, className),
|
|
2341
2427
|
style: { ...portal2.style, ...style },
|
|
2342
2428
|
children: [
|
|
2343
|
-
(title6 || showClose) && /* @__PURE__ */ (0,
|
|
2344
|
-
title6 && /* @__PURE__ */ (0,
|
|
2345
|
-
showClose && /* @__PURE__ */ (0,
|
|
2429
|
+
(title6 || showClose) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: header6, children: [
|
|
2430
|
+
title6 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { id: titleId, className: title3, children: title6 }),
|
|
2431
|
+
showClose && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons11.XIcon, { size: 16 }) })
|
|
2346
2432
|
] }),
|
|
2347
2433
|
content12,
|
|
2348
|
-
showArrow && /* @__PURE__ */ (0,
|
|
2434
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
|
|
2349
2435
|
]
|
|
2350
2436
|
}
|
|
2351
2437
|
) })
|
|
@@ -2354,11 +2440,11 @@ function Popover2({
|
|
|
2354
2440
|
var PopoverClose = RadixPopover.Close;
|
|
2355
2441
|
|
|
2356
2442
|
// src/components/DatePicker/DatePicker.tsx
|
|
2357
|
-
var
|
|
2443
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2358
2444
|
var sanitize2 = (input6) => input6.replace(/\D/g, "").slice(0, 8);
|
|
2359
2445
|
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)}`;
|
|
2360
2446
|
var isDigit3 = (char) => /\d/.test(char);
|
|
2361
|
-
var DatePicker = /* @__PURE__ */ (0,
|
|
2447
|
+
var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
2362
2448
|
function DatePicker2(props, ref) {
|
|
2363
2449
|
const {
|
|
2364
2450
|
value: value4,
|
|
@@ -2384,17 +2470,17 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(
|
|
|
2384
2470
|
id,
|
|
2385
2471
|
className
|
|
2386
2472
|
} = props;
|
|
2387
|
-
const inputRef = (0,
|
|
2473
|
+
const inputRef = (0, import_react34.useRef)(null);
|
|
2388
2474
|
const m = useMessages();
|
|
2389
|
-
const
|
|
2475
|
+
const label7 = labelProp ?? m.date ?? "\uB0A0\uC9DC";
|
|
2390
2476
|
const calendarLabel = calendarLabelProp ?? m.openCalendar ?? "\uB2EC\uB825 \uC5F4\uAE30";
|
|
2391
2477
|
const invalidText = invalidTextProp ?? m.dateInvalid ?? "\uC62C\uBC14\uB978 \uB0A0\uC9DC\uAC00 \uC544\uB2C8\uC5D0\uC694.";
|
|
2392
2478
|
const unavailableText = unavailableTextProp ?? m.dateUnavailable ?? "\uACE0\uB97C \uC218 \uC5C6\uB294 \uB0A0\uC9DC\uC608\uC694.";
|
|
2393
2479
|
const incompleteText = incompleteTextProp ?? m.dateIncomplete ?? "\uB0A0\uC9DC\uB97C YYYY-MM-DD \uD615\uC2DD\uC73C\uB85C \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
|
|
2394
|
-
const [open, setOpen] = (0,
|
|
2395
|
-
const [touched, setTouched] = (0,
|
|
2480
|
+
const [open, setOpen] = (0, import_react34.useState)(false);
|
|
2481
|
+
const [touched, setTouched] = (0, import_react34.useState)(false);
|
|
2396
2482
|
const isControlled = "value" in props;
|
|
2397
|
-
const lastEmitted = (0,
|
|
2483
|
+
const lastEmitted = (0, import_react34.useRef)(isControlled ? value4 ?? "" : defaultValue ?? "");
|
|
2398
2484
|
const minDate = parseISODate(min);
|
|
2399
2485
|
const maxDate = parseISODate(max);
|
|
2400
2486
|
const toIso = (digits) => digits.length === 8 ? `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}` : "";
|
|
@@ -2419,7 +2505,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(
|
|
|
2419
2505
|
});
|
|
2420
2506
|
const textIso = toIso(field3.raw);
|
|
2421
2507
|
const { setRaw } = field3;
|
|
2422
|
-
(0,
|
|
2508
|
+
(0, import_react34.useEffect)(() => {
|
|
2423
2509
|
if (!isControlled) return;
|
|
2424
2510
|
const next = value4 ?? "";
|
|
2425
2511
|
lastEmitted.current = next;
|
|
@@ -2434,13 +2520,13 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(
|
|
|
2434
2520
|
const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field3.raw.length > 0 ? incompleteText : null;
|
|
2435
2521
|
const showAuto = autoError !== null && error === void 0;
|
|
2436
2522
|
const selectedIso = date && !isUnavailable(date) ? textIso : "";
|
|
2437
|
-
return /* @__PURE__ */ (0,
|
|
2438
|
-
/* @__PURE__ */ (0,
|
|
2523
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
2524
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2439
2525
|
TextField,
|
|
2440
2526
|
{
|
|
2441
2527
|
ref: mergeRefs(ref, inputRef),
|
|
2442
2528
|
id,
|
|
2443
|
-
label:
|
|
2529
|
+
label: label7,
|
|
2444
2530
|
placeholder,
|
|
2445
2531
|
inputMode: "numeric",
|
|
2446
2532
|
autoComplete: "off",
|
|
@@ -2454,7 +2540,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(
|
|
|
2454
2540
|
disabled,
|
|
2455
2541
|
fullWidth,
|
|
2456
2542
|
rootClassName: className,
|
|
2457
|
-
endAdornment: /* @__PURE__ */ (0,
|
|
2543
|
+
endAdornment: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2458
2544
|
Popover2,
|
|
2459
2545
|
{
|
|
2460
2546
|
open,
|
|
@@ -2463,7 +2549,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(
|
|
|
2463
2549
|
align: "end",
|
|
2464
2550
|
"aria-label": m.calendar ?? "\uB2EC\uB825",
|
|
2465
2551
|
onOpenAutoFocus: (event) => event.preventDefault(),
|
|
2466
|
-
content: /* @__PURE__ */ (0,
|
|
2552
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2467
2553
|
Calendar,
|
|
2468
2554
|
{
|
|
2469
2555
|
value: selectedIso,
|
|
@@ -2480,12 +2566,12 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(
|
|
|
2480
2566
|
initialFocus: true
|
|
2481
2567
|
}
|
|
2482
2568
|
),
|
|
2483
|
-
children: /* @__PURE__ */ (0,
|
|
2569
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton, { "aria-label": calendarLabel, size: "sm", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons12.CalendarIcon, {}) })
|
|
2484
2570
|
}
|
|
2485
2571
|
)
|
|
2486
2572
|
}
|
|
2487
2573
|
),
|
|
2488
|
-
name && /* @__PURE__ */ (0,
|
|
2574
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", { type: "hidden", name, value: selectedIso })
|
|
2489
2575
|
] });
|
|
2490
2576
|
}
|
|
2491
2577
|
);
|
|
@@ -2495,11 +2581,11 @@ var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
|
2495
2581
|
var import_icons13 = require("@bestow-ui/icons");
|
|
2496
2582
|
|
|
2497
2583
|
// src/components/Drawer/Drawer.css.ts
|
|
2498
|
-
var
|
|
2584
|
+
var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2499
2585
|
var body3 = "nmobyvy";
|
|
2500
2586
|
var closeButton4 = "nmobyvx";
|
|
2501
|
-
var content8 = /* @__PURE__ */ (0,
|
|
2502
|
-
var
|
|
2587
|
+
var content8 = /* @__PURE__ */ (0, import_createRuntimeFn18.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"]] });
|
|
2588
|
+
var description4 = "nmobyvw";
|
|
2503
2589
|
var footer3 = "nmobyvz";
|
|
2504
2590
|
var header7 = "nmobyvt";
|
|
2505
2591
|
var headings2 = "nmobyvu";
|
|
@@ -2507,14 +2593,14 @@ var overlay2 = "nmobyv0";
|
|
|
2507
2593
|
var title4 = "nmobyvv";
|
|
2508
2594
|
|
|
2509
2595
|
// src/components/Drawer/Drawer.tsx
|
|
2510
|
-
var
|
|
2596
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2511
2597
|
function Drawer({
|
|
2512
2598
|
open,
|
|
2513
2599
|
defaultOpen,
|
|
2514
2600
|
onOpenChange,
|
|
2515
2601
|
trigger: trigger4,
|
|
2516
2602
|
title: title6,
|
|
2517
|
-
description:
|
|
2603
|
+
description: description8,
|
|
2518
2604
|
children,
|
|
2519
2605
|
footer: footer6,
|
|
2520
2606
|
side,
|
|
@@ -2526,11 +2612,11 @@ function Drawer({
|
|
|
2526
2612
|
const portal2 = usePortalProps();
|
|
2527
2613
|
const m = useMessages();
|
|
2528
2614
|
const focus = useReturnFocus(Boolean(trigger4));
|
|
2529
|
-
return /* @__PURE__ */ (0,
|
|
2530
|
-
trigger4 && /* @__PURE__ */ (0,
|
|
2531
|
-
/* @__PURE__ */ (0,
|
|
2532
|
-
/* @__PURE__ */ (0,
|
|
2533
|
-
/* @__PURE__ */ (0,
|
|
2615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
|
|
2616
|
+
trigger4 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Trigger, { asChild: true, children: trigger4 }),
|
|
2617
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Dialog2.Portal, { children: [
|
|
2618
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
|
|
2619
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2534
2620
|
Dialog2.Content,
|
|
2535
2621
|
{
|
|
2536
2622
|
className: cx(portal2.className, content8({ side, size }), className),
|
|
@@ -2539,17 +2625,17 @@ function Drawer({
|
|
|
2539
2625
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
2540
2626
|
onOpenAutoFocus: focus.onOpenAutoFocus,
|
|
2541
2627
|
onCloseAutoFocus: focus.onCloseAutoFocus,
|
|
2542
|
-
...
|
|
2628
|
+
...description8 ? {} : { "aria-describedby": void 0 },
|
|
2543
2629
|
children: [
|
|
2544
|
-
/* @__PURE__ */ (0,
|
|
2545
|
-
/* @__PURE__ */ (0,
|
|
2546
|
-
/* @__PURE__ */ (0,
|
|
2547
|
-
|
|
2630
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: header7, children: [
|
|
2631
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: headings2, children: [
|
|
2632
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Title, { className: title4, children: title6 }),
|
|
2633
|
+
description8 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Description, { className: description4, children: description8 })
|
|
2548
2634
|
] }),
|
|
2549
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
2635
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons13.XIcon, {}) }) })
|
|
2550
2636
|
] }),
|
|
2551
|
-
children && /* @__PURE__ */ (0,
|
|
2552
|
-
footer6 && /* @__PURE__ */ (0,
|
|
2637
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: body3, children }),
|
|
2638
|
+
footer6 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: footer3, children: footer6 })
|
|
2553
2639
|
]
|
|
2554
2640
|
}
|
|
2555
2641
|
)
|
|
@@ -2558,10 +2644,276 @@ function Drawer({
|
|
|
2558
2644
|
}
|
|
2559
2645
|
var DrawerClose = Dialog2.Close;
|
|
2560
2646
|
|
|
2647
|
+
// src/components/ErrorSummary/ErrorSummary.tsx
|
|
2648
|
+
var import_react35 = require("react");
|
|
2649
|
+
|
|
2650
|
+
// src/components/ErrorSummary/ErrorSummary.css.ts
|
|
2651
|
+
var link3 = "_1cdophv2";
|
|
2652
|
+
var list3 = "_1cdophv1";
|
|
2653
|
+
var root9 = "_1cdophv0";
|
|
2654
|
+
|
|
2655
|
+
// src/components/ErrorSummary/ErrorSummary.tsx
|
|
2656
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2657
|
+
var ErrorSummary = /* @__PURE__ */ (0, import_react35.forwardRef)(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
|
|
2658
|
+
const m = useMessages();
|
|
2659
|
+
const titleId = (0, import_react35.useId)();
|
|
2660
|
+
const rootRef = (0, import_react35.useRef)(null);
|
|
2661
|
+
const hasErrors = errors2.length > 0;
|
|
2662
|
+
(0, import_react35.useEffect)(() => {
|
|
2663
|
+
if (hasErrors) rootRef.current?.focus();
|
|
2664
|
+
}, [focusKey, hasErrors]);
|
|
2665
|
+
if (!hasErrors) return null;
|
|
2666
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2667
|
+
"div",
|
|
2668
|
+
{
|
|
2669
|
+
ref: mergeRefs(ref, rootRef),
|
|
2670
|
+
tabIndex: -1,
|
|
2671
|
+
"aria-labelledby": titleId,
|
|
2672
|
+
className: cx(root9, className),
|
|
2673
|
+
...rest,
|
|
2674
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2675
|
+
Alert,
|
|
2676
|
+
{
|
|
2677
|
+
color: "danger",
|
|
2678
|
+
title: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { id: titleId, children: title6 ?? m.errorSummaryTitle?.(errors2.length) ?? `\uC785\uB825\uD55C \uB0B4\uC6A9\uC5D0 \uACE0\uCE60 \uACF3\uC774 ${errors2.length}\uAC1C \uC788\uC5B4\uC694` }),
|
|
2679
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: list3, children: errors2.map((error) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2680
|
+
"a",
|
|
2681
|
+
{
|
|
2682
|
+
href: `#${error.id}`,
|
|
2683
|
+
className: link3,
|
|
2684
|
+
onClick: (event) => {
|
|
2685
|
+
if (focusField(error.id)) event.preventDefault();
|
|
2686
|
+
},
|
|
2687
|
+
children: error.message
|
|
2688
|
+
}
|
|
2689
|
+
) }, error.id)) })
|
|
2690
|
+
}
|
|
2691
|
+
)
|
|
2692
|
+
}
|
|
2693
|
+
);
|
|
2694
|
+
});
|
|
2695
|
+
|
|
2696
|
+
// src/components/FileUpload/FileUpload.tsx
|
|
2697
|
+
var import_react36 = require("react");
|
|
2698
|
+
var import_icons14 = require("@bestow-ui/icons");
|
|
2699
|
+
|
|
2700
|
+
// src/components/FileUpload/FileUpload.css.ts
|
|
2701
|
+
var dropHint = "r2jefr3";
|
|
2702
|
+
var dropIcon = "r2jefr2";
|
|
2703
|
+
var dropzone = "r2jefr1";
|
|
2704
|
+
var errors = "r2jefr9";
|
|
2705
|
+
var fileIcon = "r2jefr6";
|
|
2706
|
+
var fileName = "r2jefr7";
|
|
2707
|
+
var fileSize = "r2jefr8";
|
|
2708
|
+
var item6 = "r2jefr5";
|
|
2709
|
+
var list4 = "r2jefr4";
|
|
2710
|
+
var root10 = "r2jefr0";
|
|
2711
|
+
|
|
2712
|
+
// src/components/FileUpload/FileUpload.tsx
|
|
2713
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2714
|
+
function formatSize(bytes) {
|
|
2715
|
+
if (bytes < 1024) return `${bytes} B`;
|
|
2716
|
+
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10 * 1024 ? 1 : 0)} KB`;
|
|
2717
|
+
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
|
2718
|
+
}
|
|
2719
|
+
function matchesAccept(file, accept) {
|
|
2720
|
+
if (!accept) return true;
|
|
2721
|
+
const name = file.name.toLowerCase();
|
|
2722
|
+
const type = file.type.toLowerCase();
|
|
2723
|
+
return accept.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean).some(
|
|
2724
|
+
(token) => token.startsWith(".") ? name.endsWith(token) : token.endsWith("/*") ? type.startsWith(token.slice(0, -1)) : type === token
|
|
2725
|
+
);
|
|
2726
|
+
}
|
|
2727
|
+
var NO_FILES = [];
|
|
2728
|
+
var sameFile = (a, b) => a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
|
|
2729
|
+
var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpload2(props, ref) {
|
|
2730
|
+
const {
|
|
2731
|
+
value: value4,
|
|
2732
|
+
defaultValue,
|
|
2733
|
+
onValueChange,
|
|
2734
|
+
onReject,
|
|
2735
|
+
accept,
|
|
2736
|
+
multiple = false,
|
|
2737
|
+
maxSize,
|
|
2738
|
+
maxFiles,
|
|
2739
|
+
label: label7,
|
|
2740
|
+
helperText: helperText3,
|
|
2741
|
+
error,
|
|
2742
|
+
required,
|
|
2743
|
+
disabled,
|
|
2744
|
+
name,
|
|
2745
|
+
id,
|
|
2746
|
+
className
|
|
2747
|
+
} = props;
|
|
2748
|
+
const m = useMessages();
|
|
2749
|
+
const isControlled = "value" in props;
|
|
2750
|
+
const [innerFiles, setInnerFiles] = (0, import_react36.useState)(defaultValue ?? []);
|
|
2751
|
+
const files = isControlled ? value4 ?? NO_FILES : innerFiles;
|
|
2752
|
+
const [rejections, setRejections] = (0, import_react36.useState)([]);
|
|
2753
|
+
const [announcement, setAnnouncement] = (0, import_react36.useState)("");
|
|
2754
|
+
const [dragging, setDragging] = (0, import_react36.useState)(false);
|
|
2755
|
+
const generatedId = (0, import_react36.useId)();
|
|
2756
|
+
const baseId = id ?? generatedId;
|
|
2757
|
+
const labelId = label7 ? `${baseId}-label` : void 0;
|
|
2758
|
+
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
2759
|
+
const errorsId = rejections.length > 0 ? `${baseId}-errors` : void 0;
|
|
2760
|
+
const inputRef = (0, import_react36.useRef)(null);
|
|
2761
|
+
const selectButtonRef = (0, import_react36.useRef)(null);
|
|
2762
|
+
const removeButtonRefs = (0, import_react36.useRef)([]);
|
|
2763
|
+
const focusAfterRemove = (0, import_react36.useRef)(null);
|
|
2764
|
+
const selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
|
|
2765
|
+
const reasonText = (rejection) => {
|
|
2766
|
+
const fileName2 = rejection.file.name;
|
|
2767
|
+
if (rejection.reason === "size")
|
|
2768
|
+
return m.fileTooLarge?.(fileName2, formatSize(maxSize ?? 0)) ?? `${fileName2}: ${formatSize(maxSize ?? 0)} \uC774\uD558\uB9CC \uC62C\uB9B4 \uC218 \uC788\uC5B4\uC694.`;
|
|
2769
|
+
if (rejection.reason === "type") return m.fileTypeNotAllowed?.(fileName2) ?? `${fileName2}: \uC62C\uB9B4 \uC218 \uC5C6\uB294 \uD615\uC2DD\uC774\uC5D0\uC694.`;
|
|
2770
|
+
return m.fileTooMany?.(maxFiles ?? 0) ?? `\uD30C\uC77C\uC740 ${maxFiles}\uAC1C\uAE4C\uC9C0 \uC62C\uB9B4 \uC218 \uC788\uC5B4\uC694.`;
|
|
2771
|
+
};
|
|
2772
|
+
const commit = (next, message) => {
|
|
2773
|
+
if (!isControlled) setInnerFiles(next);
|
|
2774
|
+
onValueChange?.(next);
|
|
2775
|
+
setAnnouncement(message);
|
|
2776
|
+
};
|
|
2777
|
+
const addFiles = (incoming) => {
|
|
2778
|
+
if (disabled || incoming.length === 0) return;
|
|
2779
|
+
const accepted = [];
|
|
2780
|
+
const rejected = [];
|
|
2781
|
+
const base = multiple ? files : [];
|
|
2782
|
+
for (const file of incoming) {
|
|
2783
|
+
if (!matchesAccept(file, accept)) rejected.push({ file, reason: "type" });
|
|
2784
|
+
else if (maxSize !== void 0 && file.size > maxSize) rejected.push({ file, reason: "size" });
|
|
2785
|
+
else if (!multiple && accepted.length >= 1) rejected.push({ file, reason: "count" });
|
|
2786
|
+
else if (maxFiles !== void 0 && base.length + accepted.length >= maxFiles)
|
|
2787
|
+
rejected.push({ file, reason: "count" });
|
|
2788
|
+
else if (![...base, ...accepted].some((existing) => sameFile(existing, file))) accepted.push(file);
|
|
2789
|
+
}
|
|
2790
|
+
setRejections(rejected);
|
|
2791
|
+
if (rejected.length > 0) onReject?.(rejected);
|
|
2792
|
+
const next = [...base, ...accepted];
|
|
2793
|
+
const summary = m.filesSelected?.(next.length) ?? `\uD30C\uC77C ${next.length}\uAC1C \uC120\uD0DD\uB428`;
|
|
2794
|
+
const errors2 = [...new Set(rejected.map(reasonText))].join(" ");
|
|
2795
|
+
if (accepted.length > 0) commit(next, [summary, errors2].filter(Boolean).join(" "));
|
|
2796
|
+
else setAnnouncement(errors2);
|
|
2797
|
+
};
|
|
2798
|
+
const removeAt = (index) => {
|
|
2799
|
+
const removed = files[index];
|
|
2800
|
+
const next = files.filter((_, i) => i !== index);
|
|
2801
|
+
focusAfterRemove.current = Math.min(index, next.length - 1);
|
|
2802
|
+
setRejections([]);
|
|
2803
|
+
commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`);
|
|
2804
|
+
};
|
|
2805
|
+
(0, import_react36.useEffect)(() => {
|
|
2806
|
+
if (focusAfterRemove.current === null) return;
|
|
2807
|
+
const target = focusAfterRemove.current;
|
|
2808
|
+
focusAfterRemove.current = null;
|
|
2809
|
+
(target >= 0 ? removeButtonRefs.current[target] : selectButtonRef.current)?.focus();
|
|
2810
|
+
}, [files]);
|
|
2811
|
+
(0, import_react36.useEffect)(() => {
|
|
2812
|
+
const input6 = inputRef.current;
|
|
2813
|
+
if (!name || !input6 || typeof DataTransfer === "undefined") return;
|
|
2814
|
+
try {
|
|
2815
|
+
const transfer = new DataTransfer();
|
|
2816
|
+
files.forEach((file) => transfer.items.add(file));
|
|
2817
|
+
input6.files = transfer.files;
|
|
2818
|
+
} catch {
|
|
2819
|
+
}
|
|
2820
|
+
}, [files, name]);
|
|
2821
|
+
const onDrag = (event, over) => {
|
|
2822
|
+
if (disabled) return;
|
|
2823
|
+
event.preventDefault();
|
|
2824
|
+
setDragging(over);
|
|
2825
|
+
};
|
|
2826
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref, className: cx(field, root10, className), children: [
|
|
2827
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { id: labelId, className: label2, children: [
|
|
2828
|
+
label7,
|
|
2829
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
2830
|
+
] }),
|
|
2831
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
2832
|
+
"div",
|
|
2833
|
+
{
|
|
2834
|
+
role: "group",
|
|
2835
|
+
"aria-labelledby": labelId,
|
|
2836
|
+
"aria-describedby": cx(helperId, errorsId) || void 0,
|
|
2837
|
+
className: dropzone,
|
|
2838
|
+
"data-dragging": dragging || void 0,
|
|
2839
|
+
"data-disabled": disabled || void 0,
|
|
2840
|
+
"data-invalid": error || rejections.length > 0 || void 0,
|
|
2841
|
+
onDragEnter: (event) => onDrag(event, true),
|
|
2842
|
+
onDragOver: (event) => onDrag(event, true),
|
|
2843
|
+
onDragLeave: (event) => {
|
|
2844
|
+
if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
|
|
2845
|
+
},
|
|
2846
|
+
onDrop: (event) => {
|
|
2847
|
+
onDrag(event, false);
|
|
2848
|
+
if (!disabled) addFiles(Array.from(event.dataTransfer.files));
|
|
2849
|
+
},
|
|
2850
|
+
children: [
|
|
2851
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: dropIcon, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons14.UploadIcon, { size: 24 }) }),
|
|
2852
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2853
|
+
Button,
|
|
2854
|
+
{
|
|
2855
|
+
ref: selectButtonRef,
|
|
2856
|
+
type: "button",
|
|
2857
|
+
variant: "outline",
|
|
2858
|
+
color: "neutral",
|
|
2859
|
+
size: "sm",
|
|
2860
|
+
disabled,
|
|
2861
|
+
onClick: () => inputRef.current?.click(),
|
|
2862
|
+
children: selectLabel
|
|
2863
|
+
}
|
|
2864
|
+
),
|
|
2865
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: dropHint, children: m.fileDropHint ?? "\uB610\uB294 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
|
|
2866
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2867
|
+
"input",
|
|
2868
|
+
{
|
|
2869
|
+
ref: inputRef,
|
|
2870
|
+
type: "file",
|
|
2871
|
+
id: baseId,
|
|
2872
|
+
name,
|
|
2873
|
+
accept,
|
|
2874
|
+
multiple,
|
|
2875
|
+
required: required && files.length === 0,
|
|
2876
|
+
disabled,
|
|
2877
|
+
tabIndex: -1,
|
|
2878
|
+
"aria-hidden": true,
|
|
2879
|
+
className: visuallyHidden,
|
|
2880
|
+
onChange: (event) => {
|
|
2881
|
+
addFiles(Array.from(event.target.files ?? []));
|
|
2882
|
+
if (!name) event.target.value = "";
|
|
2883
|
+
}
|
|
2884
|
+
}
|
|
2885
|
+
)
|
|
2886
|
+
]
|
|
2887
|
+
}
|
|
2888
|
+
),
|
|
2889
|
+
files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: item6, children: [
|
|
2890
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons14.FileIcon, { size: 16 }) }),
|
|
2891
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: fileName, children: file.name }),
|
|
2892
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: fileSize, children: formatSize(file.size) }),
|
|
2893
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2894
|
+
IconButton,
|
|
2895
|
+
{
|
|
2896
|
+
ref: (node) => {
|
|
2897
|
+
removeButtonRefs.current[index] = node;
|
|
2898
|
+
},
|
|
2899
|
+
size: "sm",
|
|
2900
|
+
"aria-label": m.fileRemove?.(file.name) ?? `${file.name} \uC0AD\uC81C`,
|
|
2901
|
+
disabled,
|
|
2902
|
+
onClick: () => removeAt(index),
|
|
2903
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons14.XIcon, {})
|
|
2904
|
+
}
|
|
2905
|
+
)
|
|
2906
|
+
] }, `${file.name}-${file.size}-${file.lastModified}`)) }),
|
|
2907
|
+
rejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { id: errorsId, className: errors, children: [...new Set(rejections.map(reasonText))].map((text3) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { children: text3 }, text3)) }),
|
|
2908
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
|
|
2909
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { role: "status", className: visuallyHidden, children: announcement })
|
|
2910
|
+
] });
|
|
2911
|
+
});
|
|
2912
|
+
|
|
2561
2913
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
2562
2914
|
var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
2563
|
-
var
|
|
2564
|
-
var
|
|
2915
|
+
var import_icons15 = require("@bestow-ui/icons");
|
|
2916
|
+
var import_react37 = require("react");
|
|
2565
2917
|
|
|
2566
2918
|
// src/components/DropdownMenu/DropdownMenu.css.ts
|
|
2567
2919
|
var content9 = "_1d7ahux0";
|
|
@@ -2569,7 +2921,7 @@ var danger = "_1d7ahux2";
|
|
|
2569
2921
|
var icon5 = "_1d7ahux3";
|
|
2570
2922
|
var indicator2 = "_1d7ahux7";
|
|
2571
2923
|
var indicatorInner = "_1d7ahux8";
|
|
2572
|
-
var
|
|
2924
|
+
var item7 = "_1d7ahux1";
|
|
2573
2925
|
var label3 = "_1d7ahux5";
|
|
2574
2926
|
var radioDot = "_1d7ahux9";
|
|
2575
2927
|
var separator2 = "_1d7ahux6";
|
|
@@ -2578,14 +2930,14 @@ var subChevron = "_1d7ahuxb";
|
|
|
2578
2930
|
var subTrigger = "_1d7ahuxa";
|
|
2579
2931
|
|
|
2580
2932
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
2581
|
-
var
|
|
2933
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2582
2934
|
var DropdownMenu = RadixMenu.Root;
|
|
2583
2935
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
2584
2936
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
2585
|
-
var DropdownMenuContent = /* @__PURE__ */ (0,
|
|
2937
|
+
var DropdownMenuContent = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2586
2938
|
function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
|
|
2587
2939
|
const portal2 = usePortalProps();
|
|
2588
|
-
return /* @__PURE__ */ (0,
|
|
2940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2589
2941
|
RadixMenu.Content,
|
|
2590
2942
|
{
|
|
2591
2943
|
ref,
|
|
@@ -2600,56 +2952,56 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
|
2600
2952
|
) });
|
|
2601
2953
|
}
|
|
2602
2954
|
);
|
|
2603
|
-
var DropdownMenuItem = /* @__PURE__ */ (0,
|
|
2955
|
+
var DropdownMenuItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2604
2956
|
function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
|
|
2605
|
-
return /* @__PURE__ */ (0,
|
|
2606
|
-
icon7 && /* @__PURE__ */ (0,
|
|
2957
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(RadixMenu.Item, { ref, className: cx(item7, color === "danger" && danger, className), ...rest, children: [
|
|
2958
|
+
icon7 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: icon5, "aria-hidden": true, children: icon7 }),
|
|
2607
2959
|
children,
|
|
2608
|
-
shortcut2 && /* @__PURE__ */ (0,
|
|
2960
|
+
shortcut2 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
|
|
2609
2961
|
] });
|
|
2610
2962
|
}
|
|
2611
2963
|
);
|
|
2612
|
-
var DropdownMenuLabel = /* @__PURE__ */ (0,
|
|
2964
|
+
var DropdownMenuLabel = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2613
2965
|
function DropdownMenuLabel2({ className, ...rest }, ref) {
|
|
2614
|
-
return /* @__PURE__ */ (0,
|
|
2966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Label, { ref, className: cx(label3, className), ...rest });
|
|
2615
2967
|
}
|
|
2616
2968
|
);
|
|
2617
|
-
var DropdownMenuSeparator = /* @__PURE__ */ (0,
|
|
2969
|
+
var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2618
2970
|
function DropdownMenuSeparator2({ className, ...rest }, ref) {
|
|
2619
|
-
return /* @__PURE__ */ (0,
|
|
2971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
|
|
2620
2972
|
}
|
|
2621
2973
|
);
|
|
2622
|
-
var DropdownMenuCheckboxItem = /* @__PURE__ */ (0,
|
|
2974
|
+
var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2623
2975
|
function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
|
|
2624
|
-
return /* @__PURE__ */ (0,
|
|
2625
|
-
/* @__PURE__ */ (0,
|
|
2976
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(RadixMenu.CheckboxItem, { ref, className: cx(item7, className), ...rest, children: [
|
|
2977
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons15.MinusIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons15.CheckIcon, { size: 16 }) }) }),
|
|
2626
2978
|
children
|
|
2627
2979
|
] });
|
|
2628
2980
|
}
|
|
2629
2981
|
);
|
|
2630
2982
|
var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
|
|
2631
|
-
var DropdownMenuRadioItem = /* @__PURE__ */ (0,
|
|
2983
|
+
var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2632
2984
|
function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
|
|
2633
|
-
return /* @__PURE__ */ (0,
|
|
2634
|
-
/* @__PURE__ */ (0,
|
|
2985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(RadixMenu.RadioItem, { ref, className: cx(item7, className), ...rest, children: [
|
|
2986
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: radioDot }) }) }),
|
|
2635
2987
|
children
|
|
2636
2988
|
] });
|
|
2637
2989
|
}
|
|
2638
2990
|
);
|
|
2639
2991
|
var DropdownMenuSub = RadixMenu.Sub;
|
|
2640
|
-
var DropdownMenuSubTrigger = /* @__PURE__ */ (0,
|
|
2992
|
+
var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2641
2993
|
function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
|
|
2642
|
-
return /* @__PURE__ */ (0,
|
|
2643
|
-
icon7 && /* @__PURE__ */ (0,
|
|
2994
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(RadixMenu.SubTrigger, { ref, className: cx(item7, subTrigger, className), ...rest, children: [
|
|
2995
|
+
icon7 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: icon5, "aria-hidden": true, children: icon7 }),
|
|
2644
2996
|
children,
|
|
2645
|
-
/* @__PURE__ */ (0,
|
|
2997
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons15.ChevronRightIcon, { size: 16 }) })
|
|
2646
2998
|
] });
|
|
2647
2999
|
}
|
|
2648
3000
|
);
|
|
2649
|
-
var DropdownMenuSubContent = /* @__PURE__ */ (0,
|
|
3001
|
+
var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2650
3002
|
function DropdownMenuSubContent2({ className, style, sideOffset = 4, alignOffset = -5, collisionPadding = 8, ...rest }, ref) {
|
|
2651
3003
|
const portal2 = usePortalProps();
|
|
2652
|
-
return /* @__PURE__ */ (0,
|
|
3004
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2653
3005
|
RadixMenu.SubContent,
|
|
2654
3006
|
{
|
|
2655
3007
|
ref,
|
|
@@ -2665,23 +3017,23 @@ var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react33.forwardRef)(
|
|
|
2665
3017
|
);
|
|
2666
3018
|
|
|
2667
3019
|
// src/components/NumberInput/NumberInput.tsx
|
|
2668
|
-
var
|
|
2669
|
-
var
|
|
3020
|
+
var import_react38 = require("react");
|
|
3021
|
+
var import_icons16 = require("@bestow-ui/icons");
|
|
2670
3022
|
|
|
2671
3023
|
// src/components/NumberInput/NumberInput.css.ts
|
|
2672
|
-
var
|
|
3024
|
+
var import_createRuntimeFn19 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2673
3025
|
var end = "_1vq2qhv1";
|
|
2674
3026
|
var input4 = "_1vq2qhv0";
|
|
2675
|
-
var stepper = /* @__PURE__ */ (0,
|
|
3027
|
+
var stepper = /* @__PURE__ */ (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "_1vq2qhv3", variantClassNames: { size: { sm: "_1vq2qhv4", md: "_1vq2qhv5", lg: "_1vq2qhv6" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
2676
3028
|
var unit = "_1vq2qhv2";
|
|
2677
3029
|
|
|
2678
3030
|
// src/components/NumberInput/NumberInput.tsx
|
|
2679
|
-
var
|
|
3031
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2680
3032
|
var MAX_DIGITS2 = 15;
|
|
2681
3033
|
var isMeaningful = (char) => /[\d.-]/.test(char);
|
|
2682
3034
|
var decimalsOf = (n) => Number.isFinite(n) ? String(n).split(".")[1]?.length ?? 0 : 0;
|
|
2683
3035
|
var parse = (raw) => /\d/.test(raw) ? Number(raw) : null;
|
|
2684
|
-
var NumberInput = /* @__PURE__ */ (0,
|
|
3036
|
+
var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
|
|
2685
3037
|
function NumberInput2(props, ref) {
|
|
2686
3038
|
const {
|
|
2687
3039
|
value: value4,
|
|
@@ -2689,8 +3041,8 @@ var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2689
3041
|
onValueChange,
|
|
2690
3042
|
min,
|
|
2691
3043
|
max,
|
|
2692
|
-
step = 1,
|
|
2693
|
-
largeStep =
|
|
3044
|
+
step: step2 = 1,
|
|
3045
|
+
largeStep = step2 * 10,
|
|
2694
3046
|
precision: precisionProp,
|
|
2695
3047
|
unit: unit2,
|
|
2696
3048
|
thousandSeparator = true,
|
|
@@ -2707,10 +3059,10 @@ var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2707
3059
|
} = props;
|
|
2708
3060
|
const isControlled = "value" in props;
|
|
2709
3061
|
const m = useMessages();
|
|
2710
|
-
const inputRef = (0,
|
|
2711
|
-
const generatedId = (0,
|
|
3062
|
+
const inputRef = (0, import_react38.useRef)(null);
|
|
3063
|
+
const generatedId = (0, import_react38.useId)();
|
|
2712
3064
|
const inputId = id ?? generatedId;
|
|
2713
|
-
const precision = Math.max(0, precisionProp ?? decimalsOf(
|
|
3065
|
+
const precision = Math.max(0, precisionProp ?? decimalsOf(step2));
|
|
2714
3066
|
const allowNegative = min === void 0 || min < 0;
|
|
2715
3067
|
const round = (n) => Number(n.toFixed(precision));
|
|
2716
3068
|
const clamp = (n) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, round(n)));
|
|
@@ -2728,7 +3080,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2728
3080
|
const [, sign = "", int = "", rest2 = ""] = raw.match(/^(-?)(\d*)(.*)$/) ?? [];
|
|
2729
3081
|
return `${sign}${int ? Number(int).toLocaleString("ko-KR") : ""}${rest2}`;
|
|
2730
3082
|
};
|
|
2731
|
-
const lastEmitted = (0,
|
|
3083
|
+
const lastEmitted = (0, import_react38.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
|
|
2732
3084
|
const emit = (next) => {
|
|
2733
3085
|
if (next === lastEmitted.current) return;
|
|
2734
3086
|
lastEmitted.current = next;
|
|
@@ -2745,7 +3097,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2745
3097
|
inputRef
|
|
2746
3098
|
});
|
|
2747
3099
|
const { setRaw } = field3;
|
|
2748
|
-
(0,
|
|
3100
|
+
(0, import_react38.useEffect)(() => {
|
|
2749
3101
|
if (!isControlled) return;
|
|
2750
3102
|
const next = value4 ?? null;
|
|
2751
3103
|
lastEmitted.current = next;
|
|
@@ -2766,8 +3118,8 @@ var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2766
3118
|
onKeyDown?.(event);
|
|
2767
3119
|
if (event.defaultPrevented) return;
|
|
2768
3120
|
const deltas = {
|
|
2769
|
-
ArrowUp:
|
|
2770
|
-
ArrowDown: -
|
|
3121
|
+
ArrowUp: step2,
|
|
3122
|
+
ArrowDown: -step2,
|
|
2771
3123
|
PageUp: largeStep,
|
|
2772
3124
|
PageDown: -largeStep
|
|
2773
3125
|
};
|
|
@@ -2784,7 +3136,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2784
3136
|
field3.onKeyDown(event);
|
|
2785
3137
|
}
|
|
2786
3138
|
};
|
|
2787
|
-
const stepper2 = (direction) => /* @__PURE__ */ (0,
|
|
3139
|
+
const stepper2 = (direction) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2788
3140
|
IconButton,
|
|
2789
3141
|
{
|
|
2790
3142
|
size: "sm",
|
|
@@ -2793,13 +3145,13 @@ var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2793
3145
|
tabIndex: -1,
|
|
2794
3146
|
disabled: direction < 0 ? !canDecrement : !canIncrement,
|
|
2795
3147
|
onMouseDown: (event) => event.preventDefault(),
|
|
2796
|
-
onClick: () => stepBy(direction *
|
|
3148
|
+
onClick: () => stepBy(direction * step2),
|
|
2797
3149
|
className: stepper({ size }),
|
|
2798
|
-
children: direction < 0 ? /* @__PURE__ */ (0,
|
|
3150
|
+
children: direction < 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons16.MinusIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons16.PlusIcon, {})
|
|
2799
3151
|
}
|
|
2800
3152
|
);
|
|
2801
|
-
return /* @__PURE__ */ (0,
|
|
2802
|
-
/* @__PURE__ */ (0,
|
|
3153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
3154
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2803
3155
|
TextField,
|
|
2804
3156
|
{
|
|
2805
3157
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -2823,22 +3175,22 @@ var NumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2823
3175
|
disabled,
|
|
2824
3176
|
readOnly,
|
|
2825
3177
|
startAdornment: hideStepper ? void 0 : stepper2(-1),
|
|
2826
|
-
endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ (0,
|
|
2827
|
-
unit2 && /* @__PURE__ */ (0,
|
|
3178
|
+
endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: end, children: [
|
|
3179
|
+
unit2 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: unit, children: unit2 }),
|
|
2828
3180
|
!hideStepper && stepper2(1)
|
|
2829
3181
|
] }) : void 0,
|
|
2830
3182
|
className: cx(input4, className),
|
|
2831
3183
|
...rest
|
|
2832
3184
|
}
|
|
2833
3185
|
),
|
|
2834
|
-
name && /* @__PURE__ */ (0,
|
|
3186
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) })
|
|
2835
3187
|
] });
|
|
2836
3188
|
}
|
|
2837
3189
|
);
|
|
2838
3190
|
|
|
2839
3191
|
// src/components/Pagination/Pagination.tsx
|
|
2840
|
-
var
|
|
2841
|
-
var
|
|
3192
|
+
var import_icons17 = require("@bestow-ui/icons");
|
|
3193
|
+
var import_react39 = require("react");
|
|
2842
3194
|
|
|
2843
3195
|
// src/components/Pagination/getPaginationItems.ts
|
|
2844
3196
|
var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
|
|
@@ -2865,14 +3217,14 @@ function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount =
|
|
|
2865
3217
|
}
|
|
2866
3218
|
|
|
2867
3219
|
// src/components/Pagination/Pagination.css.ts
|
|
2868
|
-
var
|
|
3220
|
+
var import_createRuntimeFn20 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2869
3221
|
var ellipsis = "_1iraoak4";
|
|
2870
|
-
var
|
|
2871
|
-
var
|
|
3222
|
+
var item8 = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "_1iraoak1", variantClassNames: { size: { sm: "_1iraoak2", md: "_1iraoak3" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3223
|
+
var list5 = "_1iraoak0";
|
|
2872
3224
|
|
|
2873
3225
|
// src/components/Pagination/Pagination.tsx
|
|
2874
|
-
var
|
|
2875
|
-
var Pagination = /* @__PURE__ */ (0,
|
|
3226
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3227
|
+
var Pagination = /* @__PURE__ */ (0, import_react39.forwardRef)(function Pagination2({
|
|
2876
3228
|
totalPages,
|
|
2877
3229
|
page: pageProp,
|
|
2878
3230
|
defaultPage = 1,
|
|
@@ -2885,7 +3237,7 @@ var Pagination = /* @__PURE__ */ (0, import_react35.forwardRef)(function Paginat
|
|
|
2885
3237
|
"aria-label": ariaLabelProp,
|
|
2886
3238
|
...rest
|
|
2887
3239
|
}, ref) {
|
|
2888
|
-
const [uncontrolledPage, setUncontrolledPage] = (0,
|
|
3240
|
+
const [uncontrolledPage, setUncontrolledPage] = (0, import_react39.useState)(defaultPage);
|
|
2889
3241
|
const m = useMessages();
|
|
2890
3242
|
const ariaLabel = ariaLabelProp ?? m.pagination ?? "\uD398\uC774\uC9C0 \uD0D0\uC0C9";
|
|
2891
3243
|
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`);
|
|
@@ -2896,9 +3248,9 @@ var Pagination = /* @__PURE__ */ (0, import_react35.forwardRef)(function Paginat
|
|
|
2896
3248
|
if (pageProp === void 0) setUncontrolledPage(next);
|
|
2897
3249
|
onPageChange?.(next);
|
|
2898
3250
|
};
|
|
2899
|
-
const itemClass =
|
|
2900
|
-
return /* @__PURE__ */ (0,
|
|
2901
|
-
/* @__PURE__ */ (0,
|
|
3251
|
+
const itemClass = item8({ size });
|
|
3252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("ul", { className: list5, children: [
|
|
3253
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2902
3254
|
"button",
|
|
2903
3255
|
{
|
|
2904
3256
|
type: "button",
|
|
@@ -2906,23 +3258,23 @@ var Pagination = /* @__PURE__ */ (0, import_react35.forwardRef)(function Paginat
|
|
|
2906
3258
|
"aria-label": getItemLabel("previous", page - 1),
|
|
2907
3259
|
disabled: page <= 1,
|
|
2908
3260
|
onClick: () => goTo(page - 1),
|
|
2909
|
-
children: /* @__PURE__ */ (0,
|
|
3261
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons17.ChevronLeftIcon, { size: 16 })
|
|
2910
3262
|
}
|
|
2911
3263
|
) }),
|
|
2912
3264
|
getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
|
|
2913
|
-
(
|
|
3265
|
+
(item10) => typeof item10 === "number" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2914
3266
|
"button",
|
|
2915
3267
|
{
|
|
2916
3268
|
type: "button",
|
|
2917
3269
|
className: itemClass,
|
|
2918
|
-
"aria-label": getItemLabel("page",
|
|
2919
|
-
"aria-current":
|
|
2920
|
-
onClick: () => goTo(
|
|
2921
|
-
children:
|
|
3270
|
+
"aria-label": getItemLabel("page", item10),
|
|
3271
|
+
"aria-current": item10 === page ? "page" : void 0,
|
|
3272
|
+
onClick: () => goTo(item10),
|
|
3273
|
+
children: item10
|
|
2922
3274
|
}
|
|
2923
|
-
) },
|
|
3275
|
+
) }, item10) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item10)
|
|
2924
3276
|
),
|
|
2925
|
-
/* @__PURE__ */ (0,
|
|
3277
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2926
3278
|
"button",
|
|
2927
3279
|
{
|
|
2928
3280
|
type: "button",
|
|
@@ -2930,21 +3282,21 @@ var Pagination = /* @__PURE__ */ (0, import_react35.forwardRef)(function Paginat
|
|
|
2930
3282
|
"aria-label": getItemLabel("next", page + 1),
|
|
2931
3283
|
disabled: page >= totalPages,
|
|
2932
3284
|
onClick: () => goTo(page + 1),
|
|
2933
|
-
children: /* @__PURE__ */ (0,
|
|
3285
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons17.ChevronRightIcon, { size: 16 })
|
|
2934
3286
|
}
|
|
2935
3287
|
) })
|
|
2936
3288
|
] }) });
|
|
2937
3289
|
});
|
|
2938
3290
|
|
|
2939
3291
|
// src/components/PhoneNumberInput/PhoneNumberInput.tsx
|
|
2940
|
-
var
|
|
2941
|
-
var
|
|
3292
|
+
var import_react40 = require("react");
|
|
3293
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2942
3294
|
var sanitize3 = (input6) => {
|
|
2943
3295
|
const digits = input6.replace(/\D/g, "");
|
|
2944
3296
|
return digits.slice(0, phoneNumberMaxDigits(digits));
|
|
2945
3297
|
};
|
|
2946
3298
|
var isDigit4 = (char) => /\d/.test(char);
|
|
2947
|
-
var PhoneNumberInput = /* @__PURE__ */ (0,
|
|
3299
|
+
var PhoneNumberInput = /* @__PURE__ */ (0, import_react40.forwardRef)(
|
|
2948
3300
|
function PhoneNumberInput2(props, ref) {
|
|
2949
3301
|
const {
|
|
2950
3302
|
value: value4,
|
|
@@ -2955,9 +3307,9 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react36.forwardRef)(
|
|
|
2955
3307
|
onKeyDown,
|
|
2956
3308
|
...rest
|
|
2957
3309
|
} = props;
|
|
2958
|
-
const inputRef = (0,
|
|
3310
|
+
const inputRef = (0, import_react40.useRef)(null);
|
|
2959
3311
|
const m = useMessages();
|
|
2960
|
-
const
|
|
3312
|
+
const label7 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
|
|
2961
3313
|
const field3 = useFormattedInput({
|
|
2962
3314
|
isControlled: "value" in props,
|
|
2963
3315
|
value: value4,
|
|
@@ -2968,11 +3320,11 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react36.forwardRef)(
|
|
|
2968
3320
|
isMeaningful: isDigit4,
|
|
2969
3321
|
inputRef
|
|
2970
3322
|
});
|
|
2971
|
-
return /* @__PURE__ */ (0,
|
|
3323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2972
3324
|
TextField,
|
|
2973
3325
|
{
|
|
2974
3326
|
ref: mergeRefs(ref, inputRef),
|
|
2975
|
-
label:
|
|
3327
|
+
label: label7,
|
|
2976
3328
|
placeholder,
|
|
2977
3329
|
type: "tel",
|
|
2978
3330
|
inputMode: "tel",
|
|
@@ -2990,27 +3342,27 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react36.forwardRef)(
|
|
|
2990
3342
|
);
|
|
2991
3343
|
|
|
2992
3344
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
2993
|
-
var
|
|
3345
|
+
var import_react41 = require("react");
|
|
2994
3346
|
|
|
2995
3347
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
2996
|
-
var
|
|
2997
|
-
var
|
|
3348
|
+
var import_createRuntimeFn21 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3349
|
+
var description5 = "_1w9iwjmc";
|
|
2998
3350
|
var groupLabel = "_1w9iwjmd";
|
|
2999
|
-
var items = /* @__PURE__ */ (0,
|
|
3351
|
+
var items = /* @__PURE__ */ (0, import_createRuntimeFn21.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
3000
3352
|
var labelText = "_1w9iwjmb";
|
|
3001
|
-
var option = /* @__PURE__ */ (0,
|
|
3002
|
-
var radio = /* @__PURE__ */ (0,
|
|
3353
|
+
var option = /* @__PURE__ */ (0, import_createRuntimeFn21.createRuntimeFn)({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3354
|
+
var radio = /* @__PURE__ */ (0, import_createRuntimeFn21.createRuntimeFn)({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3003
3355
|
var text = "_1w9iwjma";
|
|
3004
3356
|
|
|
3005
3357
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
3006
|
-
var
|
|
3007
|
-
var RadioGroup2 = /* @__PURE__ */ (0,
|
|
3358
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3359
|
+
var RadioGroup2 = /* @__PURE__ */ (0, import_react41.forwardRef)(function RadioGroup3(props, ref) {
|
|
3008
3360
|
const {
|
|
3009
3361
|
options,
|
|
3010
3362
|
value: value4,
|
|
3011
3363
|
defaultValue,
|
|
3012
3364
|
onValueChange,
|
|
3013
|
-
label:
|
|
3365
|
+
label: label7,
|
|
3014
3366
|
helperText: helperText3,
|
|
3015
3367
|
error,
|
|
3016
3368
|
orientation = "vertical",
|
|
@@ -3023,11 +3375,11 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react37.forwardRef)(function RadioG
|
|
|
3023
3375
|
className
|
|
3024
3376
|
} = props;
|
|
3025
3377
|
const isControlled = "value" in props;
|
|
3026
|
-
const [innerValue, setInnerValue] = (0,
|
|
3378
|
+
const [innerValue, setInnerValue] = (0, import_react41.useState)(defaultValue ?? "");
|
|
3027
3379
|
const current2 = isControlled ? value4 ?? "" : innerValue;
|
|
3028
|
-
const generatedId = (0,
|
|
3380
|
+
const generatedId = (0, import_react41.useId)();
|
|
3029
3381
|
const baseId = id ?? generatedId;
|
|
3030
|
-
const labelId =
|
|
3382
|
+
const labelId = label7 ? `${baseId}-label` : void 0;
|
|
3031
3383
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
3032
3384
|
const groupName = name ?? `${baseId}-radio`;
|
|
3033
3385
|
const detachedForm = name ? void 0 : `${baseId}-no-form`;
|
|
@@ -3036,12 +3388,12 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react37.forwardRef)(function RadioG
|
|
|
3036
3388
|
if (!isControlled) setInnerValue(next);
|
|
3037
3389
|
onValueChange?.(next);
|
|
3038
3390
|
};
|
|
3039
|
-
return /* @__PURE__ */ (0,
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
required && /* @__PURE__ */ (0,
|
|
3391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx(field, className), children: [
|
|
3392
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { id: labelId, className: cx(label2, groupLabel), children: [
|
|
3393
|
+
label7,
|
|
3394
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
3043
3395
|
] }),
|
|
3044
|
-
/* @__PURE__ */ (0,
|
|
3396
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3045
3397
|
"div",
|
|
3046
3398
|
{
|
|
3047
3399
|
ref,
|
|
@@ -3059,8 +3411,8 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react37.forwardRef)(function RadioG
|
|
|
3059
3411
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
3060
3412
|
const itemDisabled = disabled || option2.disabled;
|
|
3061
3413
|
const checked = option2.value === current2;
|
|
3062
|
-
return /* @__PURE__ */ (0,
|
|
3063
|
-
/* @__PURE__ */ (0,
|
|
3414
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
|
|
3415
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3064
3416
|
"input",
|
|
3065
3417
|
{
|
|
3066
3418
|
type: "radio",
|
|
@@ -3077,38 +3429,38 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react37.forwardRef)(function RadioG
|
|
|
3077
3429
|
className: radio({ size })
|
|
3078
3430
|
}
|
|
3079
3431
|
),
|
|
3080
|
-
/* @__PURE__ */ (0,
|
|
3081
|
-
/* @__PURE__ */ (0,
|
|
3082
|
-
option2.description && /* @__PURE__ */ (0,
|
|
3432
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: text, children: [
|
|
3433
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
|
|
3434
|
+
option2.description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { id: descriptionId, className: description5, children: option2.description })
|
|
3083
3435
|
] })
|
|
3084
3436
|
] }, option2.value);
|
|
3085
3437
|
})
|
|
3086
3438
|
}
|
|
3087
3439
|
),
|
|
3088
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3440
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
3089
3441
|
] });
|
|
3090
3442
|
});
|
|
3091
3443
|
|
|
3092
3444
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
3093
|
-
var
|
|
3445
|
+
var import_react42 = require("react");
|
|
3094
3446
|
|
|
3095
3447
|
// src/components/SegmentedControl/SegmentedControl.css.ts
|
|
3096
|
-
var
|
|
3448
|
+
var import_createRuntimeFn22 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3097
3449
|
var icon6 = "_1h65mmo7";
|
|
3098
|
-
var
|
|
3099
|
-
var
|
|
3450
|
+
var item9 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "_1h65mmo2", variantClassNames: { size: { sm: "_1h65mmo3", md: "_1h65mmo4", lg: "_1h65mmo5" }, fullWidth: { true: "_1h65mmo6" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3451
|
+
var root11 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "_1h65mmo0", variantClassNames: { fullWidth: { true: "_1h65mmo1" } }, defaultVariants: {}, compoundVariants: [] });
|
|
3100
3452
|
|
|
3101
3453
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
3102
|
-
var
|
|
3454
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3103
3455
|
var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
|
|
3104
|
-
var SegmentedControl = /* @__PURE__ */ (0,
|
|
3456
|
+
var SegmentedControl = /* @__PURE__ */ (0, import_react42.forwardRef)(
|
|
3105
3457
|
function SegmentedControl2(props, ref) {
|
|
3106
3458
|
const {
|
|
3107
3459
|
options,
|
|
3108
3460
|
value: value4,
|
|
3109
3461
|
defaultValue,
|
|
3110
3462
|
onValueChange,
|
|
3111
|
-
label:
|
|
3463
|
+
label: label7,
|
|
3112
3464
|
"aria-label": ariaLabel,
|
|
3113
3465
|
size,
|
|
3114
3466
|
fullWidth,
|
|
@@ -3118,11 +3470,11 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react38.forwardRef)(
|
|
|
3118
3470
|
className
|
|
3119
3471
|
} = props;
|
|
3120
3472
|
const isControlled = "value" in props;
|
|
3121
|
-
const [innerValue, setInnerValue] = (0,
|
|
3473
|
+
const [innerValue, setInnerValue] = (0, import_react42.useState)(defaultValue ?? "");
|
|
3122
3474
|
const current2 = isControlled ? value4 ?? "" : innerValue;
|
|
3123
|
-
const generatedId = (0,
|
|
3124
|
-
const labelId =
|
|
3125
|
-
const itemRefs = (0,
|
|
3475
|
+
const generatedId = (0, import_react42.useId)();
|
|
3476
|
+
const labelId = label7 ? `${id ?? generatedId}-label` : void 0;
|
|
3477
|
+
const itemRefs = (0, import_react42.useRef)([]);
|
|
3126
3478
|
const isEnabled = (index) => !disabled && !options[index]?.disabled;
|
|
3127
3479
|
const select = (index) => {
|
|
3128
3480
|
const next = options[index].value;
|
|
@@ -3134,10 +3486,10 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react38.forwardRef)(
|
|
|
3134
3486
|
const tabStop = checkedIndex >= 0 && isEnabled(checkedIndex) ? checkedIndex : options.findIndex((_, i) => isEnabled(i));
|
|
3135
3487
|
const handleKeyDown = (event, index) => {
|
|
3136
3488
|
let target = -1;
|
|
3137
|
-
const
|
|
3138
|
-
if (
|
|
3489
|
+
const step2 = NEXT_KEYS[event.key];
|
|
3490
|
+
if (step2) {
|
|
3139
3491
|
for (let i = 1; i <= options.length; i++) {
|
|
3140
|
-
const candidate = (index +
|
|
3492
|
+
const candidate = (index + step2 * i + options.length) % options.length;
|
|
3141
3493
|
if (isEnabled(candidate)) {
|
|
3142
3494
|
target = candidate;
|
|
3143
3495
|
break;
|
|
@@ -3153,20 +3505,20 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react38.forwardRef)(
|
|
|
3153
3505
|
itemRefs.current[target]?.focus();
|
|
3154
3506
|
select(target);
|
|
3155
3507
|
};
|
|
3156
|
-
const group = /* @__PURE__ */ (0,
|
|
3508
|
+
const group = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
3157
3509
|
"div",
|
|
3158
3510
|
{
|
|
3159
3511
|
ref,
|
|
3160
3512
|
id,
|
|
3161
3513
|
role: "radiogroup",
|
|
3162
3514
|
"aria-labelledby": labelId,
|
|
3163
|
-
"aria-label":
|
|
3515
|
+
"aria-label": label7 ? void 0 : ariaLabel,
|
|
3164
3516
|
"aria-disabled": disabled || void 0,
|
|
3165
|
-
className: cx(
|
|
3517
|
+
className: cx(root11({ fullWidth }), !label7 && className),
|
|
3166
3518
|
children: [
|
|
3167
3519
|
options.map((option2, index) => {
|
|
3168
3520
|
const checked = index === checkedIndex;
|
|
3169
|
-
return /* @__PURE__ */ (0,
|
|
3521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
3170
3522
|
"button",
|
|
3171
3523
|
{
|
|
3172
3524
|
ref: (node) => {
|
|
@@ -3179,24 +3531,24 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react38.forwardRef)(
|
|
|
3179
3531
|
disabled: !isEnabled(index),
|
|
3180
3532
|
"data-state": checked ? "checked" : "unchecked",
|
|
3181
3533
|
"data-disabled": isEnabled(index) ? void 0 : "",
|
|
3182
|
-
className:
|
|
3534
|
+
className: item9({ size, fullWidth }),
|
|
3183
3535
|
onClick: () => select(index),
|
|
3184
3536
|
onKeyDown: (event) => handleKeyDown(event, index),
|
|
3185
3537
|
children: [
|
|
3186
|
-
option2.icon && /* @__PURE__ */ (0,
|
|
3538
|
+
option2.icon && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: icon6, children: option2.icon }),
|
|
3187
3539
|
option2.label
|
|
3188
3540
|
]
|
|
3189
3541
|
},
|
|
3190
3542
|
option2.value
|
|
3191
3543
|
);
|
|
3192
3544
|
}),
|
|
3193
|
-
name && /* @__PURE__ */ (0,
|
|
3545
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "hidden", name, value: current2 })
|
|
3194
3546
|
]
|
|
3195
3547
|
}
|
|
3196
3548
|
);
|
|
3197
|
-
if (!
|
|
3198
|
-
return /* @__PURE__ */ (0,
|
|
3199
|
-
/* @__PURE__ */ (0,
|
|
3549
|
+
if (!label7) return group;
|
|
3550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cx(field, className), children: [
|
|
3551
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { id: labelId, className: label2, children: label7 }),
|
|
3200
3552
|
group
|
|
3201
3553
|
] });
|
|
3202
3554
|
}
|
|
@@ -3204,17 +3556,17 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react38.forwardRef)(
|
|
|
3204
3556
|
|
|
3205
3557
|
// src/components/Select/Select.tsx
|
|
3206
3558
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
3207
|
-
var
|
|
3208
|
-
var
|
|
3209
|
-
var
|
|
3210
|
-
var Select = /* @__PURE__ */ (0,
|
|
3559
|
+
var import_react43 = require("react");
|
|
3560
|
+
var import_icons18 = require("@bestow-ui/icons");
|
|
3561
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3562
|
+
var Select = /* @__PURE__ */ (0, import_react43.forwardRef)(function Select2(props, ref) {
|
|
3211
3563
|
const {
|
|
3212
3564
|
options,
|
|
3213
3565
|
value: value4,
|
|
3214
3566
|
defaultValue,
|
|
3215
3567
|
onValueChange,
|
|
3216
3568
|
placeholder,
|
|
3217
|
-
label:
|
|
3569
|
+
label: label7,
|
|
3218
3570
|
helperText: helperText3,
|
|
3219
3571
|
error,
|
|
3220
3572
|
size,
|
|
@@ -3227,16 +3579,16 @@ var Select = /* @__PURE__ */ (0, import_react39.forwardRef)(function Select2(pro
|
|
|
3227
3579
|
className
|
|
3228
3580
|
} = props;
|
|
3229
3581
|
const isControlled = "value" in props;
|
|
3230
|
-
const generatedId = (0,
|
|
3582
|
+
const generatedId = (0, import_react43.useId)();
|
|
3231
3583
|
const triggerId = id ?? generatedId;
|
|
3232
3584
|
const helperId = helperText3 ? `${triggerId}-helper` : void 0;
|
|
3233
3585
|
const portal2 = usePortalProps();
|
|
3234
|
-
return /* @__PURE__ */ (0,
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
required && /* @__PURE__ */ (0,
|
|
3586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
3587
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { htmlFor: triggerId, className: label2, children: [
|
|
3588
|
+
label7,
|
|
3589
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
3238
3590
|
] }),
|
|
3239
|
-
/* @__PURE__ */ (0,
|
|
3591
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
3240
3592
|
RadixSelect.Root,
|
|
3241
3593
|
{
|
|
3242
3594
|
value: isControlled ? value4 ?? "" : void 0,
|
|
@@ -3246,7 +3598,7 @@ var Select = /* @__PURE__ */ (0, import_react39.forwardRef)(function Select2(pro
|
|
|
3246
3598
|
required,
|
|
3247
3599
|
name,
|
|
3248
3600
|
children: [
|
|
3249
|
-
/* @__PURE__ */ (0,
|
|
3601
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
3250
3602
|
RadixSelect.Trigger,
|
|
3251
3603
|
{
|
|
3252
3604
|
ref,
|
|
@@ -3255,14 +3607,14 @@ var Select = /* @__PURE__ */ (0, import_react39.forwardRef)(function Select2(pro
|
|
|
3255
3607
|
"aria-invalid": error || void 0,
|
|
3256
3608
|
"aria-describedby": helperId,
|
|
3257
3609
|
"data-invalid": error || void 0,
|
|
3258
|
-
className: cx(
|
|
3610
|
+
className: cx(root5({ size, fullWidth }), trigger2, className),
|
|
3259
3611
|
children: [
|
|
3260
|
-
/* @__PURE__ */ (0,
|
|
3261
|
-
/* @__PURE__ */ (0,
|
|
3612
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: value2, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.Value, { placeholder }) }),
|
|
3613
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons18.ChevronDownIcon, { size: 16 }) })
|
|
3262
3614
|
]
|
|
3263
3615
|
}
|
|
3264
3616
|
),
|
|
3265
|
-
/* @__PURE__ */ (0,
|
|
3617
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3266
3618
|
RadixSelect.Content,
|
|
3267
3619
|
{
|
|
3268
3620
|
position: "popper",
|
|
@@ -3270,15 +3622,15 @@ var Select = /* @__PURE__ */ (0, import_react39.forwardRef)(function Select2(pro
|
|
|
3270
3622
|
collisionPadding: 8,
|
|
3271
3623
|
className: cx(portal2.className, content5),
|
|
3272
3624
|
style: portal2.style,
|
|
3273
|
-
children: /* @__PURE__ */ (0,
|
|
3625
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
3274
3626
|
RadixSelect.Item,
|
|
3275
3627
|
{
|
|
3276
3628
|
value: option2.value,
|
|
3277
3629
|
disabled: option2.disabled,
|
|
3278
|
-
className:
|
|
3630
|
+
className: item5,
|
|
3279
3631
|
children: [
|
|
3280
|
-
/* @__PURE__ */ (0,
|
|
3281
|
-
/* @__PURE__ */ (0,
|
|
3632
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.ItemText, { children: option2.label }),
|
|
3633
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons18.CheckIcon, { size: 16 }) })
|
|
3282
3634
|
]
|
|
3283
3635
|
},
|
|
3284
3636
|
option2.value
|
|
@@ -3288,19 +3640,19 @@ var Select = /* @__PURE__ */ (0, import_react39.forwardRef)(function Select2(pro
|
|
|
3288
3640
|
]
|
|
3289
3641
|
}
|
|
3290
3642
|
),
|
|
3291
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3643
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
3292
3644
|
] });
|
|
3293
3645
|
});
|
|
3294
3646
|
|
|
3295
3647
|
// src/components/SkipLink/SkipLink.tsx
|
|
3296
|
-
var
|
|
3648
|
+
var import_react44 = require("react");
|
|
3297
3649
|
|
|
3298
3650
|
// src/components/SkipLink/SkipLink.css.ts
|
|
3299
3651
|
var skipLink = "_1t9jaar0";
|
|
3300
3652
|
|
|
3301
3653
|
// src/components/SkipLink/SkipLink.tsx
|
|
3302
|
-
var
|
|
3303
|
-
var SkipLink = /* @__PURE__ */ (0,
|
|
3654
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3655
|
+
var SkipLink = /* @__PURE__ */ (0, import_react44.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
|
|
3304
3656
|
const m = useMessages();
|
|
3305
3657
|
const handleClick = (event) => {
|
|
3306
3658
|
onClick?.(event);
|
|
@@ -3312,35 +3664,35 @@ var SkipLink = /* @__PURE__ */ (0, import_react40.forwardRef)(function SkipLink2
|
|
|
3312
3664
|
target.focus();
|
|
3313
3665
|
target.scrollIntoView?.({ block: "start" });
|
|
3314
3666
|
};
|
|
3315
|
-
return /* @__PURE__ */ (0,
|
|
3667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
|
|
3316
3668
|
});
|
|
3317
3669
|
|
|
3318
3670
|
// src/components/Slider/Slider.tsx
|
|
3319
3671
|
var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
|
|
3320
|
-
var
|
|
3672
|
+
var import_react45 = require("react");
|
|
3321
3673
|
|
|
3322
3674
|
// src/components/Slider/Slider.css.ts
|
|
3323
|
-
var
|
|
3675
|
+
var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3324
3676
|
var field2 = "_126mzjm0";
|
|
3325
3677
|
var header8 = "_126mzjm1";
|
|
3326
3678
|
var helperText2 = "_126mzjm4";
|
|
3327
3679
|
var label4 = "_126mzjm2";
|
|
3328
3680
|
var range2 = "_126mzjmb";
|
|
3329
|
-
var
|
|
3330
|
-
var thumb = /* @__PURE__ */ (0,
|
|
3331
|
-
var track2 = /* @__PURE__ */ (0,
|
|
3681
|
+
var root12 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3682
|
+
var thumb = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3683
|
+
var track2 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3332
3684
|
var value3 = "_126mzjm3";
|
|
3333
3685
|
|
|
3334
3686
|
// src/components/Slider/Slider.tsx
|
|
3335
|
-
var
|
|
3336
|
-
var Slider = /* @__PURE__ */ (0,
|
|
3687
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3688
|
+
var Slider = /* @__PURE__ */ (0, import_react45.forwardRef)(function Slider2(props, ref) {
|
|
3337
3689
|
const {
|
|
3338
3690
|
value: value4,
|
|
3339
3691
|
defaultValue,
|
|
3340
3692
|
onValueChange,
|
|
3341
3693
|
min = 0,
|
|
3342
3694
|
max = 100,
|
|
3343
|
-
label:
|
|
3695
|
+
label: label7,
|
|
3344
3696
|
"aria-label": ariaLabel,
|
|
3345
3697
|
helperText: helperText3,
|
|
3346
3698
|
showValue,
|
|
@@ -3354,12 +3706,12 @@ var Slider = /* @__PURE__ */ (0, import_react41.forwardRef)(function Slider2(pro
|
|
|
3354
3706
|
} = props;
|
|
3355
3707
|
const m = useMessages();
|
|
3356
3708
|
const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
|
|
3357
|
-
const generatedId = (0,
|
|
3709
|
+
const generatedId = (0, import_react45.useId)();
|
|
3358
3710
|
const baseId = id ?? generatedId;
|
|
3359
3711
|
const labelId = `${baseId}-label`;
|
|
3360
3712
|
const helperId = `${baseId}-helper`;
|
|
3361
3713
|
const isControlled = "value" in props;
|
|
3362
|
-
const [innerValue, setInnerValue] = (0,
|
|
3714
|
+
const [innerValue, setInnerValue] = (0, import_react45.useState)(defaultValue ?? [min]);
|
|
3363
3715
|
const current2 = isControlled ? value4 ?? [min] : innerValue;
|
|
3364
3716
|
const isRange = current2.length > 1;
|
|
3365
3717
|
const handleChange = (next) => {
|
|
@@ -3367,12 +3719,12 @@ var Slider = /* @__PURE__ */ (0, import_react41.forwardRef)(function Slider2(pro
|
|
|
3367
3719
|
onValueChange?.(next);
|
|
3368
3720
|
};
|
|
3369
3721
|
const valueText = current2.map(formatValue).join(" \u2013 ");
|
|
3370
|
-
return /* @__PURE__ */ (0,
|
|
3371
|
-
(
|
|
3372
|
-
|
|
3373
|
-
showValue && /* @__PURE__ */ (0,
|
|
3722
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx(field2, className), children: [
|
|
3723
|
+
(label7 || showValue) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: header8, children: [
|
|
3724
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { id: labelId, className: label4, children: label7 }),
|
|
3725
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: value3, "aria-hidden": true, children: valueText })
|
|
3374
3726
|
] }),
|
|
3375
|
-
/* @__PURE__ */ (0,
|
|
3727
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3376
3728
|
RadixSlider.Root,
|
|
3377
3729
|
{
|
|
3378
3730
|
ref,
|
|
@@ -3382,18 +3734,18 @@ var Slider = /* @__PURE__ */ (0, import_react41.forwardRef)(function Slider2(pro
|
|
|
3382
3734
|
disabled,
|
|
3383
3735
|
value: current2,
|
|
3384
3736
|
onValueChange: handleChange,
|
|
3385
|
-
className:
|
|
3737
|
+
className: root12({ size }),
|
|
3386
3738
|
...rest,
|
|
3387
3739
|
children: [
|
|
3388
|
-
/* @__PURE__ */ (0,
|
|
3740
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSlider.Range, { className: range2 }) }),
|
|
3389
3741
|
current2.map((thumbValue, index) => {
|
|
3390
3742
|
const thumbLabelId = `${baseId}-thumb-${index}`;
|
|
3391
|
-
return /* @__PURE__ */ (0,
|
|
3743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3392
3744
|
RadixSlider.Thumb,
|
|
3393
3745
|
{
|
|
3394
3746
|
className: thumb({ size }),
|
|
3395
|
-
"aria-labelledby":
|
|
3396
|
-
"aria-label":
|
|
3747
|
+
"aria-labelledby": label7 ? isRange ? `${labelId} ${thumbLabelId}` : labelId : isRange ? thumbLabelId : void 0,
|
|
3748
|
+
"aria-label": label7 ? void 0 : isRange ? void 0 : ariaLabel,
|
|
3397
3749
|
"aria-valuetext": formatValue(thumbValue),
|
|
3398
3750
|
"aria-describedby": helperText3 ? helperId : void 0
|
|
3399
3751
|
},
|
|
@@ -3403,32 +3755,86 @@ var Slider = /* @__PURE__ */ (0, import_react41.forwardRef)(function Slider2(pro
|
|
|
3403
3755
|
]
|
|
3404
3756
|
}
|
|
3405
3757
|
),
|
|
3406
|
-
isRange && current2.map((_, index) => /* @__PURE__ */ (0,
|
|
3407
|
-
|
|
3758
|
+
isRange && current2.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
|
|
3759
|
+
label7 ? "" : ariaLabel ? `${ariaLabel} ` : "",
|
|
3408
3760
|
thumbLabels[index] ?? `${index + 1}`
|
|
3409
3761
|
] }, index)),
|
|
3410
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3762
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { id: helperId, className: helperText2, children: helperText3 })
|
|
3411
3763
|
] });
|
|
3412
3764
|
});
|
|
3413
3765
|
|
|
3766
|
+
// src/components/Stepper/Stepper.tsx
|
|
3767
|
+
var import_react46 = require("react");
|
|
3768
|
+
var import_icons19 = require("@bestow-ui/icons");
|
|
3769
|
+
|
|
3770
|
+
// src/components/Stepper/Stepper.css.ts
|
|
3771
|
+
var import_createRuntimeFn24 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3772
|
+
var description6 = "kervhmh";
|
|
3773
|
+
var indicator3 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhm6", variantClassNames: { status: { complete: "kervhm7", current: "kervhm8", upcoming: "kervhm9" } }, defaultVariants: {}, compoundVariants: [] });
|
|
3774
|
+
var label5 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhmd", variantClassNames: { status: { complete: "kervhme", current: "kervhmf", upcoming: "kervhmg" } }, defaultVariants: {}, compoundVariants: [] });
|
|
3775
|
+
var root13 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhm0", variantClassNames: { orientation: { horizontal: "kervhm1", vertical: "kervhm2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
3776
|
+
var step = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhm3", variantClassNames: { orientation: { horizontal: "kervhm4", vertical: "kervhm5" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
3777
|
+
var text2 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
3778
|
+
|
|
3779
|
+
// src/components/Stepper/Stepper.tsx
|
|
3780
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3781
|
+
var Stepper = /* @__PURE__ */ (0, import_react46.forwardRef)(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
|
|
3782
|
+
const m = useMessages();
|
|
3783
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3784
|
+
"ol",
|
|
3785
|
+
{
|
|
3786
|
+
ref,
|
|
3787
|
+
"aria-label": ariaLabel ?? m.steps ?? "\uC9C4\uD589 \uB2E8\uACC4",
|
|
3788
|
+
className: cx(root13({ orientation }), className),
|
|
3789
|
+
...rest,
|
|
3790
|
+
children: steps.map((step2, index) => {
|
|
3791
|
+
const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
|
|
3792
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3793
|
+
"li",
|
|
3794
|
+
{
|
|
3795
|
+
className: step({ orientation }),
|
|
3796
|
+
"data-status": status,
|
|
3797
|
+
"aria-current": status === "current" ? "step" : void 0,
|
|
3798
|
+
children: [
|
|
3799
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: indicator3({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons19.CheckIcon, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
|
|
3800
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: text2({ orientation }), children: [
|
|
3801
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: label5({ status }), children: [
|
|
3802
|
+
step2.label,
|
|
3803
|
+
status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: visuallyHidden, children: [
|
|
3804
|
+
" (",
|
|
3805
|
+
m.stepCompleted ?? "\uC644\uB8CC",
|
|
3806
|
+
")"
|
|
3807
|
+
] })
|
|
3808
|
+
] }),
|
|
3809
|
+
step2.description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: description6, children: step2.description })
|
|
3810
|
+
] })
|
|
3811
|
+
]
|
|
3812
|
+
},
|
|
3813
|
+
index
|
|
3814
|
+
);
|
|
3815
|
+
})
|
|
3816
|
+
}
|
|
3817
|
+
);
|
|
3818
|
+
});
|
|
3819
|
+
|
|
3414
3820
|
// src/components/Switch/Switch.tsx
|
|
3415
3821
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
3416
|
-
var
|
|
3822
|
+
var import_react47 = require("react");
|
|
3417
3823
|
|
|
3418
3824
|
// src/components/Switch/Switch.css.ts
|
|
3419
|
-
var
|
|
3420
|
-
var
|
|
3421
|
-
var
|
|
3422
|
-
var thumb2 = /* @__PURE__ */ (0,
|
|
3423
|
-
var track3 = /* @__PURE__ */ (0,
|
|
3825
|
+
var import_createRuntimeFn25 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3826
|
+
var label6 = "o33ul29";
|
|
3827
|
+
var root14 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3828
|
+
var thumb2 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3829
|
+
var track3 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3424
3830
|
|
|
3425
3831
|
// src/components/Switch/Switch.tsx
|
|
3426
|
-
var
|
|
3427
|
-
var Switch = /* @__PURE__ */ (0,
|
|
3428
|
-
const generatedId = (0,
|
|
3832
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
3833
|
+
var Switch = /* @__PURE__ */ (0, import_react47.forwardRef)(function Switch2({ label: label7, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
|
|
3834
|
+
const generatedId = (0, import_react47.useId)();
|
|
3429
3835
|
const switchId = id ?? generatedId;
|
|
3430
|
-
return /* @__PURE__ */ (0,
|
|
3431
|
-
/* @__PURE__ */ (0,
|
|
3836
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: cx(root14({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
3837
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3432
3838
|
RadixSwitch.Root,
|
|
3433
3839
|
{
|
|
3434
3840
|
ref,
|
|
@@ -3437,23 +3843,25 @@ var Switch = /* @__PURE__ */ (0, import_react42.forwardRef)(function Switch2({ l
|
|
|
3437
3843
|
"aria-label": ariaLabel,
|
|
3438
3844
|
className: track3({ size }),
|
|
3439
3845
|
...rest,
|
|
3440
|
-
children: /* @__PURE__ */ (0,
|
|
3846
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixSwitch.Thumb, { className: thumb2({ size }) })
|
|
3441
3847
|
}
|
|
3442
3848
|
),
|
|
3443
|
-
|
|
3849
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { htmlFor: switchId, className: label6, children: label7 })
|
|
3444
3850
|
] });
|
|
3445
3851
|
});
|
|
3446
3852
|
|
|
3447
3853
|
// src/components/Table/Table.tsx
|
|
3448
|
-
var
|
|
3449
|
-
var
|
|
3854
|
+
var import_react48 = require("react");
|
|
3855
|
+
var import_icons20 = require("@bestow-ui/icons");
|
|
3450
3856
|
|
|
3451
3857
|
// src/components/Table/Table.css.ts
|
|
3452
|
-
var
|
|
3858
|
+
var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3453
3859
|
var body4 = "l3ploy5";
|
|
3454
3860
|
var caption = "l3ploy2";
|
|
3455
|
-
var cell2 = /* @__PURE__ */ (0,
|
|
3861
|
+
var cell2 = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
|
|
3456
3862
|
var container = "l3ploy0";
|
|
3863
|
+
var emptyCell = "l3ployj";
|
|
3864
|
+
var emptyContent = "l3ployk";
|
|
3457
3865
|
var footer4 = "l3ploy7";
|
|
3458
3866
|
var footerCell = "l3ployg";
|
|
3459
3867
|
var head = "l3ployf";
|
|
@@ -3466,10 +3874,10 @@ var striped = "l3ploy6";
|
|
|
3466
3874
|
var table = "l3ploy1";
|
|
3467
3875
|
|
|
3468
3876
|
// src/components/Table/Table.tsx
|
|
3469
|
-
var
|
|
3470
|
-
var TableSizeContext = /* @__PURE__ */ (0,
|
|
3471
|
-
var TableSectionContext = /* @__PURE__ */ (0,
|
|
3472
|
-
var Table = /* @__PURE__ */ (0,
|
|
3877
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
3878
|
+
var TableSizeContext = /* @__PURE__ */ (0, import_react48.createContext)("md");
|
|
3879
|
+
var TableSectionContext = /* @__PURE__ */ (0, import_react48.createContext)("body");
|
|
3880
|
+
var Table = /* @__PURE__ */ (0, import_react48.forwardRef)(function Table2({
|
|
3473
3881
|
size = "md",
|
|
3474
3882
|
striped: striped2,
|
|
3475
3883
|
stickyHeader: stickyHeader2,
|
|
@@ -3481,8 +3889,8 @@ var Table = /* @__PURE__ */ (0, import_react43.forwardRef)(function Table2({
|
|
|
3481
3889
|
children,
|
|
3482
3890
|
...rest
|
|
3483
3891
|
}, ref) {
|
|
3484
|
-
const captionId = (0,
|
|
3485
|
-
return /* @__PURE__ */ (0,
|
|
3892
|
+
const captionId = (0, import_react48.useId)();
|
|
3893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3486
3894
|
"div",
|
|
3487
3895
|
{
|
|
3488
3896
|
className: cx(container, containerClassName),
|
|
@@ -3491,7 +3899,7 @@ var Table = /* @__PURE__ */ (0, import_react43.forwardRef)(function Table2({
|
|
|
3491
3899
|
role: "region",
|
|
3492
3900
|
"aria-labelledby": caption2 ? captionId : void 0,
|
|
3493
3901
|
"aria-label": caption2 ? void 0 : ariaLabel,
|
|
3494
|
-
children: /* @__PURE__ */ (0,
|
|
3902
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
3495
3903
|
"table",
|
|
3496
3904
|
{
|
|
3497
3905
|
ref,
|
|
@@ -3499,7 +3907,7 @@ var Table = /* @__PURE__ */ (0, import_react43.forwardRef)(function Table2({
|
|
|
3499
3907
|
"aria-label": caption2 ? void 0 : ariaLabel,
|
|
3500
3908
|
...rest,
|
|
3501
3909
|
children: [
|
|
3502
|
-
caption2 && /* @__PURE__ */ (0,
|
|
3910
|
+
caption2 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("caption", { id: captionId, className: caption, children: caption2 }),
|
|
3503
3911
|
children
|
|
3504
3912
|
]
|
|
3505
3913
|
}
|
|
@@ -3507,31 +3915,31 @@ var Table = /* @__PURE__ */ (0, import_react43.forwardRef)(function Table2({
|
|
|
3507
3915
|
}
|
|
3508
3916
|
) });
|
|
3509
3917
|
});
|
|
3510
|
-
var TableHeader = /* @__PURE__ */ (0,
|
|
3918
|
+
var TableHeader = /* @__PURE__ */ (0, import_react48.forwardRef)(
|
|
3511
3919
|
function TableHeader2({ className, ...rest }, ref) {
|
|
3512
|
-
return /* @__PURE__ */ (0,
|
|
3920
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("thead", { ref, className: cx(header9, className), ...rest }) });
|
|
3513
3921
|
}
|
|
3514
3922
|
);
|
|
3515
|
-
var TableBody = /* @__PURE__ */ (0,
|
|
3923
|
+
var TableBody = /* @__PURE__ */ (0, import_react48.forwardRef)(
|
|
3516
3924
|
function TableBody2({ className, ...rest }, ref) {
|
|
3517
|
-
return /* @__PURE__ */ (0,
|
|
3925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tbody", { ref, className: cx(body4, className), ...rest }) });
|
|
3518
3926
|
}
|
|
3519
3927
|
);
|
|
3520
|
-
var TableFooter = /* @__PURE__ */ (0,
|
|
3928
|
+
var TableFooter = /* @__PURE__ */ (0, import_react48.forwardRef)(
|
|
3521
3929
|
function TableFooter2({ className, ...rest }, ref) {
|
|
3522
|
-
return /* @__PURE__ */ (0,
|
|
3930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tfoot", { ref, className: cx(footer4, className), ...rest }) });
|
|
3523
3931
|
}
|
|
3524
3932
|
);
|
|
3525
|
-
var TableRow = /* @__PURE__ */ (0,
|
|
3526
|
-
return /* @__PURE__ */ (0,
|
|
3933
|
+
var TableRow = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
|
|
3934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
|
|
3527
3935
|
});
|
|
3528
|
-
var TableHead = /* @__PURE__ */ (0,
|
|
3529
|
-
const size = (0,
|
|
3530
|
-
const section = (0,
|
|
3936
|
+
var TableHead = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
|
|
3937
|
+
const size = (0, import_react48.useContext)(TableSizeContext);
|
|
3938
|
+
const section = (0, import_react48.useContext)(TableSectionContext);
|
|
3531
3939
|
const sortable = onSort !== void 0;
|
|
3532
3940
|
const direction = sortDirection ?? "none";
|
|
3533
|
-
const SortIcon = direction === "descending" ?
|
|
3534
|
-
return /* @__PURE__ */ (0,
|
|
3941
|
+
const SortIcon = direction === "descending" ? import_icons20.ArrowDownIcon : import_icons20.ArrowUpIcon;
|
|
3942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3535
3943
|
"th",
|
|
3536
3944
|
{
|
|
3537
3945
|
ref,
|
|
@@ -3543,17 +3951,17 @@ var TableHead = /* @__PURE__ */ (0, import_react43.forwardRef)(function TableHea
|
|
|
3543
3951
|
className
|
|
3544
3952
|
),
|
|
3545
3953
|
...rest,
|
|
3546
|
-
children: sortable ? /* @__PURE__ */ (0,
|
|
3954
|
+
children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("button", { type: "button", className: sortButton, onClick: onSort, children: [
|
|
3547
3955
|
children,
|
|
3548
|
-
/* @__PURE__ */ (0,
|
|
3956
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
|
|
3549
3957
|
] }) : children
|
|
3550
3958
|
}
|
|
3551
3959
|
);
|
|
3552
3960
|
});
|
|
3553
|
-
var TableCell = /* @__PURE__ */ (0,
|
|
3554
|
-
const size = (0,
|
|
3555
|
-
const section = (0,
|
|
3556
|
-
return /* @__PURE__ */ (0,
|
|
3961
|
+
var TableCell = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
|
|
3962
|
+
const size = (0, import_react48.useContext)(TableSizeContext);
|
|
3963
|
+
const section = (0, import_react48.useContext)(TableSectionContext);
|
|
3964
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3557
3965
|
"td",
|
|
3558
3966
|
{
|
|
3559
3967
|
ref,
|
|
@@ -3562,52 +3970,89 @@ var TableCell = /* @__PURE__ */ (0, import_react43.forwardRef)(function TableCel
|
|
|
3562
3970
|
}
|
|
3563
3971
|
);
|
|
3564
3972
|
});
|
|
3973
|
+
var TableEmpty = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
|
|
3974
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: emptyContent, children }) }) });
|
|
3975
|
+
});
|
|
3976
|
+
function TableSkeleton({ rows = 5, columns }) {
|
|
3977
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
|
|
3978
|
+
}
|
|
3979
|
+
|
|
3980
|
+
// src/components/Table/useTableSelection.ts
|
|
3981
|
+
var import_react49 = require("react");
|
|
3982
|
+
function useTableSelection(initial = []) {
|
|
3983
|
+
const [selected, setSelected] = (0, import_react49.useState)(initial);
|
|
3984
|
+
const isSelected = (0, import_react49.useCallback)((id) => selected.includes(id), [selected]);
|
|
3985
|
+
const toggle3 = (0, import_react49.useCallback)((id, checked) => {
|
|
3986
|
+
setSelected((prev) => {
|
|
3987
|
+
const on = checked ?? !prev.includes(id);
|
|
3988
|
+
if (on) return prev.includes(id) ? prev : [...prev, id];
|
|
3989
|
+
return prev.filter((value4) => value4 !== id);
|
|
3990
|
+
});
|
|
3991
|
+
}, []);
|
|
3992
|
+
const clear2 = (0, import_react49.useCallback)(() => setSelected([]), []);
|
|
3993
|
+
const selectAllProps = (pageIds) => {
|
|
3994
|
+
const all2 = pageIds.length > 0 && pageIds.every((id) => selected.includes(id));
|
|
3995
|
+
const some = pageIds.some((id) => selected.includes(id));
|
|
3996
|
+
return {
|
|
3997
|
+
checked: all2,
|
|
3998
|
+
indeterminate: !all2 && some,
|
|
3999
|
+
onChange: () => setSelected(
|
|
4000
|
+
(prev) => all2 ? prev.filter((id) => !pageIds.includes(id)) : [...prev, ...pageIds.filter((id) => !prev.includes(id))]
|
|
4001
|
+
)
|
|
4002
|
+
};
|
|
4003
|
+
};
|
|
4004
|
+
const rowProps = (id) => ({
|
|
4005
|
+
checked: selected.includes(id),
|
|
4006
|
+
onChange: (event) => toggle3(id, event.target.checked)
|
|
4007
|
+
});
|
|
4008
|
+
return { selected, setSelected, isSelected, toggle: toggle3, clear: clear2, selectAllProps, rowProps };
|
|
4009
|
+
}
|
|
3565
4010
|
|
|
3566
4011
|
// src/components/Tabs/Tabs.tsx
|
|
3567
4012
|
var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
|
|
3568
|
-
var
|
|
4013
|
+
var import_react50 = require("react");
|
|
3569
4014
|
|
|
3570
4015
|
// src/components/Tabs/Tabs.css.ts
|
|
3571
|
-
var
|
|
4016
|
+
var import_createRuntimeFn27 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3572
4017
|
var content10 = "fvhbtdb";
|
|
3573
|
-
var
|
|
3574
|
-
var
|
|
3575
|
-
var trigger3 = /* @__PURE__ */ (0,
|
|
4018
|
+
var list6 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "fvhbtd1", variantClassNames: { variant: { line: "fvhbtd2", soft: "fvhbtd3" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
|
|
4019
|
+
var root15 = "fvhbtd0";
|
|
4020
|
+
var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn27.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"]] });
|
|
3576
4021
|
|
|
3577
4022
|
// src/components/Tabs/Tabs.tsx
|
|
3578
|
-
var
|
|
3579
|
-
var TabsStyleContext = /* @__PURE__ */ (0,
|
|
3580
|
-
var Tabs = /* @__PURE__ */ (0,
|
|
4023
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
4024
|
+
var TabsStyleContext = /* @__PURE__ */ (0, import_react50.createContext)({ variant: "line", size: "md" });
|
|
4025
|
+
var Tabs = /* @__PURE__ */ (0, import_react50.forwardRef)(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
|
|
3581
4026
|
const controlled = "value" in props ? { value: props.value ?? "" } : {};
|
|
3582
|
-
return /* @__PURE__ */ (0,
|
|
4027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixTabs.Root, { ref, className: cx(root15, className), ...props, ...controlled }) });
|
|
3583
4028
|
});
|
|
3584
|
-
var TabsList = /* @__PURE__ */ (0,
|
|
3585
|
-
const { variant } = (0,
|
|
3586
|
-
return /* @__PURE__ */ (0,
|
|
4029
|
+
var TabsList = /* @__PURE__ */ (0, import_react50.forwardRef)(function TabsList2({ className, ...rest }, ref) {
|
|
4030
|
+
const { variant } = (0, import_react50.useContext)(TabsStyleContext);
|
|
4031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
|
|
3587
4032
|
});
|
|
3588
|
-
var TabsTrigger = /* @__PURE__ */ (0,
|
|
3589
|
-
const { variant, size } = (0,
|
|
3590
|
-
return /* @__PURE__ */ (0,
|
|
4033
|
+
var TabsTrigger = /* @__PURE__ */ (0, import_react50.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
|
|
4034
|
+
const { variant, size } = (0, import_react50.useContext)(TabsStyleContext);
|
|
4035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
|
|
3591
4036
|
});
|
|
3592
|
-
var TabsContent = /* @__PURE__ */ (0,
|
|
3593
|
-
return /* @__PURE__ */ (0,
|
|
4037
|
+
var TabsContent = /* @__PURE__ */ (0, import_react50.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
|
|
4038
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
|
|
3594
4039
|
});
|
|
3595
4040
|
|
|
3596
4041
|
// src/components/Textarea/Textarea.tsx
|
|
3597
|
-
var
|
|
4042
|
+
var import_react51 = require("react");
|
|
3598
4043
|
|
|
3599
4044
|
// src/components/Textarea/Textarea.css.ts
|
|
3600
|
-
var
|
|
4045
|
+
var import_createRuntimeFn28 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3601
4046
|
var count = "_1koawa9";
|
|
3602
4047
|
var countOver = "_1koawaa";
|
|
3603
4048
|
var defaultWidth = "_1koawa7";
|
|
3604
4049
|
var footer5 = "_1koawa8";
|
|
3605
|
-
var textarea = /* @__PURE__ */ (0,
|
|
4050
|
+
var textarea = /* @__PURE__ */ (0, import_createRuntimeFn28.createRuntimeFn)({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
|
|
3606
4051
|
|
|
3607
4052
|
// src/components/Textarea/Textarea.tsx
|
|
3608
|
-
var
|
|
3609
|
-
var Textarea = /* @__PURE__ */ (0,
|
|
3610
|
-
label:
|
|
4053
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
4054
|
+
var Textarea = /* @__PURE__ */ (0, import_react51.forwardRef)(function Textarea2({
|
|
4055
|
+
label: label7,
|
|
3611
4056
|
helperText: helperText3,
|
|
3612
4057
|
error,
|
|
3613
4058
|
size,
|
|
@@ -3627,13 +4072,13 @@ var Textarea = /* @__PURE__ */ (0, import_react45.forwardRef)(function Textarea2
|
|
|
3627
4072
|
"aria-describedby": ariaDescribedBy,
|
|
3628
4073
|
...rest
|
|
3629
4074
|
}, ref) {
|
|
3630
|
-
const generatedId = (0,
|
|
4075
|
+
const generatedId = (0, import_react51.useId)();
|
|
3631
4076
|
const textareaId = id ?? generatedId;
|
|
3632
4077
|
const helperId = helperText3 ? `${textareaId}-helper` : void 0;
|
|
3633
|
-
const innerRef = (0,
|
|
3634
|
-
const [uncontrolledLength, setUncontrolledLength] = (0,
|
|
4078
|
+
const innerRef = (0, import_react51.useRef)(null);
|
|
4079
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react51.useState)(() => String(defaultValue ?? "").length);
|
|
3635
4080
|
const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
|
|
3636
|
-
const fitHeight = (0,
|
|
4081
|
+
const fitHeight = (0, import_react51.useCallback)(() => {
|
|
3637
4082
|
const el = innerRef.current;
|
|
3638
4083
|
if (!autoResize || !el) return;
|
|
3639
4084
|
el.style.height = "auto";
|
|
@@ -3646,12 +4091,12 @@ var Textarea = /* @__PURE__ */ (0, import_react45.forwardRef)(function Textarea2
|
|
|
3646
4091
|
fitHeight();
|
|
3647
4092
|
onChange?.(event);
|
|
3648
4093
|
};
|
|
3649
|
-
return /* @__PURE__ */ (0,
|
|
3650
|
-
|
|
3651
|
-
|
|
3652
|
-
required && /* @__PURE__ */ (0,
|
|
4094
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
4095
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { htmlFor: textareaId, className: label2, children: [
|
|
4096
|
+
label7,
|
|
4097
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
3653
4098
|
] }),
|
|
3654
|
-
/* @__PURE__ */ (0,
|
|
4099
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
3655
4100
|
"textarea",
|
|
3656
4101
|
{
|
|
3657
4102
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -3673,51 +4118,51 @@ var Textarea = /* @__PURE__ */ (0, import_react45.forwardRef)(function Textarea2
|
|
|
3673
4118
|
...rest
|
|
3674
4119
|
}
|
|
3675
4120
|
),
|
|
3676
|
-
(helperText3 || showCount) && /* @__PURE__ */ (0,
|
|
3677
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3678
|
-
showCount && /* @__PURE__ */ (0,
|
|
4121
|
+
(helperText3 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: footer5, children: [
|
|
4122
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
|
|
4123
|
+
showCount && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
|
|
3679
4124
|
] })
|
|
3680
4125
|
] });
|
|
3681
4126
|
});
|
|
3682
4127
|
|
|
3683
4128
|
// src/components/Toast/Toast.tsx
|
|
3684
4129
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
3685
|
-
var
|
|
3686
|
-
var
|
|
4130
|
+
var import_react52 = require("react");
|
|
4131
|
+
var import_icons21 = require("@bestow-ui/icons");
|
|
3687
4132
|
|
|
3688
4133
|
// src/components/Toast/Toast.css.ts
|
|
3689
|
-
var
|
|
4134
|
+
var import_createRuntimeFn29 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3690
4135
|
var action2 = "_1g11zvx9";
|
|
3691
4136
|
var close = "_1g11zvxa";
|
|
3692
|
-
var
|
|
4137
|
+
var description7 = "_1g11zvx8";
|
|
3693
4138
|
var title5 = "_1g11zvx7";
|
|
3694
|
-
var toast = /* @__PURE__ */ (0,
|
|
4139
|
+
var toast = /* @__PURE__ */ (0, import_createRuntimeFn29.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
|
|
3695
4140
|
var viewport2 = "_1g11zvx0";
|
|
3696
4141
|
|
|
3697
4142
|
// src/components/Toast/Toast.tsx
|
|
3698
|
-
var
|
|
4143
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
3699
4144
|
var REMOVE_DELAY = 500;
|
|
3700
|
-
var ToastContext = /* @__PURE__ */ (0,
|
|
4145
|
+
var ToastContext = /* @__PURE__ */ (0, import_react52.createContext)(null);
|
|
3701
4146
|
function ToastProvider({ children, duration = 5e3, label: labelProp }) {
|
|
3702
4147
|
const m = useMessages();
|
|
3703
|
-
const
|
|
3704
|
-
const [toasts, setToasts] = (0,
|
|
3705
|
-
const nextId = (0,
|
|
4148
|
+
const label7 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
|
|
4149
|
+
const [toasts, setToasts] = (0, import_react52.useState)([]);
|
|
4150
|
+
const nextId = (0, import_react52.useRef)(0);
|
|
3706
4151
|
const portal2 = usePortalProps();
|
|
3707
|
-
const toast2 = (0,
|
|
4152
|
+
const toast2 = (0, import_react52.useCallback)((options) => {
|
|
3708
4153
|
const id = nextId.current++;
|
|
3709
4154
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
3710
4155
|
return id;
|
|
3711
4156
|
}, []);
|
|
3712
|
-
const dismiss = (0,
|
|
4157
|
+
const dismiss = (0, import_react52.useCallback)((id) => {
|
|
3713
4158
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
3714
4159
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
3715
4160
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
3716
4161
|
}, []);
|
|
3717
|
-
const value4 = (0,
|
|
3718
|
-
return /* @__PURE__ */ (0,
|
|
4162
|
+
const value4 = (0, import_react52.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
4163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(RadixToast.Provider, { duration, label: label7, swipeDirection: "right", children: [
|
|
3719
4164
|
children,
|
|
3720
|
-
toasts.map(({ id, open, title: title6, description:
|
|
4165
|
+
toasts.map(({ id, open, title: title6, description: description8, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
|
|
3721
4166
|
RadixToast.Root,
|
|
3722
4167
|
{
|
|
3723
4168
|
open,
|
|
@@ -3727,19 +4172,19 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
|
|
|
3727
4172
|
},
|
|
3728
4173
|
className: toast({ color }),
|
|
3729
4174
|
children: [
|
|
3730
|
-
/* @__PURE__ */ (0,
|
|
3731
|
-
|
|
3732
|
-
action3 && /* @__PURE__ */ (0,
|
|
3733
|
-
/* @__PURE__ */ (0,
|
|
4175
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Title, { className: title5, children: title6 }),
|
|
4176
|
+
description8 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Description, { className: description7, children: description8 }),
|
|
4177
|
+
action3 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
|
|
4178
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.XIcon, { size: 16 }) })
|
|
3734
4179
|
]
|
|
3735
4180
|
},
|
|
3736
4181
|
id
|
|
3737
4182
|
)),
|
|
3738
|
-
/* @__PURE__ */ (0,
|
|
4183
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
3739
4184
|
] }) });
|
|
3740
4185
|
}
|
|
3741
4186
|
function useToast() {
|
|
3742
|
-
const context = (0,
|
|
4187
|
+
const context = (0, import_react52.useContext)(ToastContext);
|
|
3743
4188
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
3744
4189
|
return context;
|
|
3745
4190
|
}
|
|
@@ -3752,7 +4197,7 @@ var arrow2 = "z7rufs1";
|
|
|
3752
4197
|
var content11 = "z7rufs0";
|
|
3753
4198
|
|
|
3754
4199
|
// src/components/Tooltip/Tooltip.tsx
|
|
3755
|
-
var
|
|
4200
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
3756
4201
|
function Tooltip({
|
|
3757
4202
|
content: content12,
|
|
3758
4203
|
children,
|
|
@@ -3767,9 +4212,9 @@ function Tooltip({
|
|
|
3767
4212
|
}) {
|
|
3768
4213
|
const portal2 = usePortalProps();
|
|
3769
4214
|
if (disabled || content12 == null || content12 === "") return children;
|
|
3770
|
-
return /* @__PURE__ */ (0,
|
|
3771
|
-
/* @__PURE__ */ (0,
|
|
3772
|
-
/* @__PURE__ */ (0,
|
|
4215
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
4216
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
|
|
4217
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
3773
4218
|
RadixTooltip.Content,
|
|
3774
4219
|
{
|
|
3775
4220
|
side,
|
|
@@ -3780,7 +4225,7 @@ function Tooltip({
|
|
|
3780
4225
|
style: portal2.style,
|
|
3781
4226
|
children: [
|
|
3782
4227
|
content12,
|
|
3783
|
-
/* @__PURE__ */ (0,
|
|
4228
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
|
|
3784
4229
|
]
|
|
3785
4230
|
}
|
|
3786
4231
|
) })
|
|
@@ -3788,7 +4233,7 @@ function Tooltip({
|
|
|
3788
4233
|
}
|
|
3789
4234
|
|
|
3790
4235
|
// src/components/VerificationCodeInput/VerificationCodeInput.tsx
|
|
3791
|
-
var
|
|
4236
|
+
var import_react53 = require("react");
|
|
3792
4237
|
|
|
3793
4238
|
// src/components/VerificationCodeInput/VerificationCodeInput.css.ts
|
|
3794
4239
|
var input5 = "ea01812";
|
|
@@ -3798,9 +4243,9 @@ var slots = "ea01811";
|
|
|
3798
4243
|
var timer = "ea01814";
|
|
3799
4244
|
|
|
3800
4245
|
// src/components/VerificationCodeInput/VerificationCodeInput.tsx
|
|
3801
|
-
var
|
|
4246
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
3802
4247
|
var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
|
|
3803
|
-
var VerificationCodeInput = /* @__PURE__ */ (0,
|
|
4248
|
+
var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.forwardRef)(
|
|
3804
4249
|
function VerificationCodeInput2(props, ref) {
|
|
3805
4250
|
const {
|
|
3806
4251
|
length = 6,
|
|
@@ -3824,26 +4269,26 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
3824
4269
|
className
|
|
3825
4270
|
} = props;
|
|
3826
4271
|
const m = useMessages();
|
|
3827
|
-
const
|
|
4272
|
+
const label7 = labelProp ?? m.verificationCode ?? "\uC778\uC99D\uBC88\uD638";
|
|
3828
4273
|
const resendText = resendTextProp ?? m.resend ?? "\uC7AC\uC804\uC1A1";
|
|
3829
4274
|
const expiredText = expiredTextProp ?? m.verificationExpired ?? "\uC778\uC99D \uC2DC\uAC04\uC774 \uC9C0\uB0AC\uC5B4\uC694. \uC7AC\uC804\uC1A1\uD574 \uC8FC\uC138\uC694.";
|
|
3830
|
-
const generatedId = (0,
|
|
4275
|
+
const generatedId = (0, import_react53.useId)();
|
|
3831
4276
|
const inputId = id ?? generatedId;
|
|
3832
4277
|
const helperId = `${inputId}-helper`;
|
|
3833
4278
|
const statusId = `${inputId}-status`;
|
|
3834
|
-
const inputRef = (0,
|
|
4279
|
+
const inputRef = (0, import_react53.useRef)(null);
|
|
3835
4280
|
const isControlled = "value" in props;
|
|
3836
|
-
const [innerValue, setInnerValue] = (0,
|
|
4281
|
+
const [innerValue, setInnerValue] = (0, import_react53.useState)(defaultValue ?? "");
|
|
3837
4282
|
const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
|
|
3838
|
-
const [focused, setFocused] = (0,
|
|
3839
|
-
const [endAt, setEndAt] = (0,
|
|
3840
|
-
const [remaining, setRemaining] = (0,
|
|
4283
|
+
const [focused, setFocused] = (0, import_react53.useState)(false);
|
|
4284
|
+
const [endAt, setEndAt] = (0, import_react53.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
|
|
4285
|
+
const [remaining, setRemaining] = (0, import_react53.useState)(expiresIn ?? 0);
|
|
3841
4286
|
const expired = expiresIn !== void 0 && remaining <= 0;
|
|
3842
|
-
const onExpireRef = (0,
|
|
3843
|
-
(0,
|
|
4287
|
+
const onExpireRef = (0, import_react53.useRef)(onExpire);
|
|
4288
|
+
(0, import_react53.useEffect)(() => {
|
|
3844
4289
|
onExpireRef.current = onExpire;
|
|
3845
4290
|
});
|
|
3846
|
-
(0,
|
|
4291
|
+
(0, import_react53.useEffect)(() => {
|
|
3847
4292
|
if (endAt === null) return;
|
|
3848
4293
|
const tick = () => {
|
|
3849
4294
|
const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
|
|
@@ -3876,19 +4321,19 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
3876
4321
|
}
|
|
3877
4322
|
inputRef.current?.focus();
|
|
3878
4323
|
};
|
|
3879
|
-
const
|
|
4324
|
+
const description8 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
|
|
3880
4325
|
const activeIndex = Math.min(code.length, length - 1);
|
|
3881
|
-
return /* @__PURE__ */ (0,
|
|
4326
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
3882
4327
|
"div",
|
|
3883
4328
|
{
|
|
3884
4329
|
className: cx(field, className),
|
|
3885
4330
|
"data-invalid": error || void 0,
|
|
3886
4331
|
"data-disabled": disabled || void 0,
|
|
3887
4332
|
children: [
|
|
3888
|
-
/* @__PURE__ */ (0,
|
|
3889
|
-
/* @__PURE__ */ (0,
|
|
3890
|
-
/* @__PURE__ */ (0,
|
|
3891
|
-
/* @__PURE__ */ (0,
|
|
4333
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { htmlFor: inputId, className: label2, children: label7 }),
|
|
4334
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: row4, children: [
|
|
4335
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: slots, children: [
|
|
4336
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
3892
4337
|
"input",
|
|
3893
4338
|
{
|
|
3894
4339
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -3908,7 +4353,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
3908
4353
|
className: input5
|
|
3909
4354
|
}
|
|
3910
4355
|
),
|
|
3911
|
-
Array.from({ length }, (_, index) => /* @__PURE__ */ (0,
|
|
4356
|
+
Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
3912
4357
|
"div",
|
|
3913
4358
|
{
|
|
3914
4359
|
className: slot,
|
|
@@ -3919,12 +4364,12 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
3919
4364
|
index
|
|
3920
4365
|
))
|
|
3921
4366
|
] }),
|
|
3922
|
-
expiresIn !== void 0 && /* @__PURE__ */ (0,
|
|
3923
|
-
onResend && /* @__PURE__ */ (0,
|
|
4367
|
+
expiresIn !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { role: "timer", className: timer, children: formatTime(remaining) }),
|
|
4368
|
+
onResend && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
|
|
3924
4369
|
] }),
|
|
3925
|
-
/* @__PURE__ */ (0,
|
|
3926
|
-
/* @__PURE__ */ (0,
|
|
3927
|
-
name && /* @__PURE__ */ (0,
|
|
4370
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { id: helperId, className: helperText({ error }), children: description8 }),
|
|
4371
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
|
|
4372
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("input", { type: "hidden", name, value: code })
|
|
3928
4373
|
]
|
|
3929
4374
|
}
|
|
3930
4375
|
);
|
|
@@ -3951,6 +4396,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
3951
4396
|
Checkbox,
|
|
3952
4397
|
Combobox,
|
|
3953
4398
|
DatePicker,
|
|
4399
|
+
DescriptionList,
|
|
3954
4400
|
Divider,
|
|
3955
4401
|
Drawer,
|
|
3956
4402
|
DrawerClose,
|
|
@@ -3967,6 +4413,8 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
3967
4413
|
DropdownMenuSubContent,
|
|
3968
4414
|
DropdownMenuSubTrigger,
|
|
3969
4415
|
DropdownMenuTrigger,
|
|
4416
|
+
ErrorSummary,
|
|
4417
|
+
FileUpload,
|
|
3970
4418
|
IconButton,
|
|
3971
4419
|
Input,
|
|
3972
4420
|
Link,
|
|
@@ -3987,14 +4435,17 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
3987
4435
|
Slider,
|
|
3988
4436
|
Spinner,
|
|
3989
4437
|
Stack,
|
|
4438
|
+
Stepper,
|
|
3990
4439
|
Switch,
|
|
3991
4440
|
Table,
|
|
3992
4441
|
TableBody,
|
|
3993
4442
|
TableCell,
|
|
4443
|
+
TableEmpty,
|
|
3994
4444
|
TableFooter,
|
|
3995
4445
|
TableHead,
|
|
3996
4446
|
TableHeader,
|
|
3997
4447
|
TableRow,
|
|
4448
|
+
TableSkeleton,
|
|
3998
4449
|
Tabs,
|
|
3999
4450
|
TabsContent,
|
|
4000
4451
|
TabsList,
|
|
@@ -4006,11 +4457,13 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
4006
4457
|
Tooltip,
|
|
4007
4458
|
Typography,
|
|
4008
4459
|
VerificationCodeInput,
|
|
4460
|
+
VisuallyHidden,
|
|
4009
4461
|
composeExtraAddress,
|
|
4010
4462
|
contrastRatio,
|
|
4011
4463
|
createIntentColors,
|
|
4012
4464
|
createTheme,
|
|
4013
4465
|
en,
|
|
4466
|
+
focusField,
|
|
4014
4467
|
formatBusinessNumber,
|
|
4015
4468
|
formatKoreanAmount,
|
|
4016
4469
|
formatKoreanDate,
|
|
@@ -4023,6 +4476,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
|
|
|
4023
4476
|
toISODate,
|
|
4024
4477
|
useMessages,
|
|
4025
4478
|
usePortalProps,
|
|
4479
|
+
useTableSelection,
|
|
4026
4480
|
useTheme,
|
|
4027
4481
|
useToast,
|
|
4028
4482
|
vars
|