@bestow-ui/react 1.1.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 +60 -68
- package/dist/{chunk-PFEZ3D2H.js → chunk-VH7JW6N7.js} +83 -3
- package/dist/chunk-VH7JW6N7.js.map +1 -0
- package/dist/client.js +1066 -690
- package/dist/client.js.map +1 -1
- package/dist/index.cjs +1638 -935
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1063 -593
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +419 -125
- package/dist/index.d.ts +419 -125
- package/dist/shared.js +245 -4
- package/dist/shared.js.map +1 -1
- package/package.json +21 -12
- package/dist/chunk-PFEZ3D2H.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -50,28 +50,38 @@ __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,
|
|
56
57
|
DropdownMenu: () => DropdownMenu,
|
|
58
|
+
DropdownMenuCheckboxItem: () => DropdownMenuCheckboxItem,
|
|
57
59
|
DropdownMenuContent: () => DropdownMenuContent,
|
|
58
60
|
DropdownMenuGroup: () => DropdownMenuGroup,
|
|
59
61
|
DropdownMenuItem: () => DropdownMenuItem,
|
|
60
62
|
DropdownMenuLabel: () => DropdownMenuLabel,
|
|
63
|
+
DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
|
|
64
|
+
DropdownMenuRadioItem: () => DropdownMenuRadioItem,
|
|
61
65
|
DropdownMenuSeparator: () => DropdownMenuSeparator,
|
|
66
|
+
DropdownMenuSub: () => DropdownMenuSub,
|
|
67
|
+
DropdownMenuSubContent: () => DropdownMenuSubContent,
|
|
68
|
+
DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
|
|
62
69
|
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
70
|
+
ErrorSummary: () => ErrorSummary,
|
|
71
|
+
FileUpload: () => FileUpload,
|
|
63
72
|
IconButton: () => IconButton,
|
|
64
73
|
Input: () => Input,
|
|
65
74
|
Link: () => Link,
|
|
66
75
|
LocaleProvider: () => LocaleProvider,
|
|
67
76
|
Modal: () => Modal,
|
|
68
77
|
ModalClose: () => ModalClose,
|
|
78
|
+
NumberInput: () => NumberInput,
|
|
69
79
|
Pagination: () => Pagination,
|
|
70
80
|
PhoneNumberInput: () => PhoneNumberInput,
|
|
71
81
|
Popover: () => Popover2,
|
|
72
82
|
PopoverClose: () => PopoverClose,
|
|
73
83
|
Progress: () => Progress,
|
|
74
|
-
RadioGroup: () =>
|
|
84
|
+
RadioGroup: () => RadioGroup2,
|
|
75
85
|
SegmentedControl: () => SegmentedControl,
|
|
76
86
|
Select: () => Select,
|
|
77
87
|
Skeleton: () => Skeleton,
|
|
@@ -79,14 +89,17 @@ __export(src_exports, {
|
|
|
79
89
|
Slider: () => Slider,
|
|
80
90
|
Spinner: () => Spinner,
|
|
81
91
|
Stack: () => Stack,
|
|
92
|
+
Stepper: () => Stepper,
|
|
82
93
|
Switch: () => Switch,
|
|
83
94
|
Table: () => Table,
|
|
84
95
|
TableBody: () => TableBody,
|
|
85
96
|
TableCell: () => TableCell,
|
|
97
|
+
TableEmpty: () => TableEmpty,
|
|
86
98
|
TableFooter: () => TableFooter,
|
|
87
99
|
TableHead: () => TableHead,
|
|
88
100
|
TableHeader: () => TableHeader,
|
|
89
101
|
TableRow: () => TableRow,
|
|
102
|
+
TableSkeleton: () => TableSkeleton,
|
|
90
103
|
Tabs: () => Tabs,
|
|
91
104
|
TabsContent: () => TabsContent,
|
|
92
105
|
TabsList: () => TabsList,
|
|
@@ -98,11 +111,13 @@ __export(src_exports, {
|
|
|
98
111
|
Tooltip: () => Tooltip,
|
|
99
112
|
Typography: () => Typography,
|
|
100
113
|
VerificationCodeInput: () => VerificationCodeInput,
|
|
114
|
+
VisuallyHidden: () => VisuallyHidden,
|
|
101
115
|
composeExtraAddress: () => composeExtraAddress,
|
|
102
116
|
contrastRatio: () => contrastRatio,
|
|
103
117
|
createIntentColors: () => createIntentColors,
|
|
104
118
|
createTheme: () => createTheme,
|
|
105
119
|
en: () => en,
|
|
120
|
+
focusField: () => focusField,
|
|
106
121
|
formatBusinessNumber: () => formatBusinessNumber,
|
|
107
122
|
formatKoreanAmount: () => formatKoreanAmount,
|
|
108
123
|
formatKoreanDate: () => formatKoreanDate,
|
|
@@ -115,6 +130,7 @@ __export(src_exports, {
|
|
|
115
130
|
toISODate: () => toISODate,
|
|
116
131
|
useMessages: () => useMessages,
|
|
117
132
|
usePortalProps: () => usePortalProps,
|
|
133
|
+
useTableSelection: () => useTableSelection,
|
|
118
134
|
useTheme: () => useTheme,
|
|
119
135
|
useToast: () => useToast,
|
|
120
136
|
vars: () => vars
|
|
@@ -123,7 +139,7 @@ module.exports = __toCommonJS(src_exports);
|
|
|
123
139
|
|
|
124
140
|
// src/theme/contract.css.ts
|
|
125
141
|
var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
|
|
126
|
-
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)" } };
|
|
127
143
|
|
|
128
144
|
// src/theme/color.ts
|
|
129
145
|
var import_tokens = require("@bestow-ui/tokens");
|
|
@@ -190,14 +206,14 @@ function blend(fg, alpha, bg) {
|
|
|
190
206
|
return toHex(f.map((v, i) => v * alpha + b[i] * (1 - alpha)));
|
|
191
207
|
}
|
|
192
208
|
var withL = (base, l, c = base.c) => toHex(oklchToRgb({ l, c, h: base.h }));
|
|
193
|
-
function findReadable(base, startL,
|
|
209
|
+
function findReadable(base, startL, step2, backgrounds) {
|
|
194
210
|
let l = startL;
|
|
195
211
|
for (let i = 0; i < 40; i++) {
|
|
196
212
|
const hex = withL(base, l);
|
|
197
213
|
if (backgrounds.every((bg) => contrastRatio(hex, bg) >= 4.5)) return hex;
|
|
198
|
-
l = Math.min(1, Math.max(0, l +
|
|
214
|
+
l = Math.min(1, Math.max(0, l + step2));
|
|
199
215
|
}
|
|
200
|
-
return
|
|
216
|
+
return step2 < 0 ? import_tokens.palette.black : import_tokens.palette.white;
|
|
201
217
|
}
|
|
202
218
|
function hoverFor(base, delta, contrast) {
|
|
203
219
|
const preferred = withL(base, Math.min(1, Math.max(0, base.l + delta)));
|
|
@@ -223,11 +239,11 @@ var rgba = (hex, alpha) => {
|
|
|
223
239
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
224
240
|
};
|
|
225
241
|
function createIntentColors(intent, color) {
|
|
226
|
-
const
|
|
227
|
-
const base = rgbToOklch(parseHex(
|
|
242
|
+
const input6 = toHex(parseHex(color));
|
|
243
|
+
const base = rgbToOklch(parseHex(input6));
|
|
228
244
|
const lightSubtle = withL(base, 0.97, Math.min(base.c, 0.12) * 0.3);
|
|
229
245
|
const lightSubtleHover = withL(base, 0.93, Math.min(base.c, 0.12) * 0.45);
|
|
230
|
-
const { solid, contrast: lightContrast } = solidWithContrast(
|
|
246
|
+
const { solid, contrast: lightContrast } = solidWithContrast(input6);
|
|
231
247
|
const light = {
|
|
232
248
|
solid,
|
|
233
249
|
solidHover: hoverFor(rgbToOklch(parseHex(solid)), -0.06, lightContrast),
|
|
@@ -237,7 +253,7 @@ function createIntentColors(intent, color) {
|
|
|
237
253
|
text: findReadable(base, Math.min(base.l, 0.55), -0.02, [import_tokens.lightColors.bg.default, lightSubtle, lightSubtleHover])
|
|
238
254
|
};
|
|
239
255
|
const darkBg = import_tokens.darkColors.bg.default;
|
|
240
|
-
const { solid: darkSolid, contrast: darkContrast } = solidWithContrast(base.l < 0.5 ? withL(base, 0.55) :
|
|
256
|
+
const { solid: darkSolid, contrast: darkContrast } = solidWithContrast(base.l < 0.5 ? withL(base, 0.55) : input6);
|
|
241
257
|
const darkBase = rgbToOklch(parseHex(darkSolid));
|
|
242
258
|
const darkSubtleOnBg = blend(darkSolid, 0.16, darkBg);
|
|
243
259
|
const darkSubtleHoverOnBg = blend(darkSolid, 0.26, darkBg);
|
|
@@ -277,9 +293,9 @@ function deepMerge(target, source) {
|
|
|
277
293
|
function createTheme(...inputs) {
|
|
278
294
|
let light = {};
|
|
279
295
|
let dark = {};
|
|
280
|
-
for (const
|
|
281
|
-
light = deepMerge(deepMerge(light,
|
|
282
|
-
dark = deepMerge(deepMerge(dark,
|
|
296
|
+
for (const input6 of inputs) {
|
|
297
|
+
light = deepMerge(deepMerge(light, input6.common), input6.light);
|
|
298
|
+
dark = deepMerge(deepMerge(dark, input6.common), input6.dark);
|
|
283
299
|
}
|
|
284
300
|
return Object.freeze({ light, dark });
|
|
285
301
|
}
|
|
@@ -333,6 +349,20 @@ var en = {
|
|
|
333
349
|
openList: "Show options",
|
|
334
350
|
clearSelection: "Clear selection",
|
|
335
351
|
skipToContent: "Skip to main content",
|
|
352
|
+
decrement: "Decrease",
|
|
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`,
|
|
336
366
|
rangeStart: "minimum",
|
|
337
367
|
rangeEnd: "maximum",
|
|
338
368
|
agreeAll: "Agree to all",
|
|
@@ -377,14 +407,14 @@ var en = {
|
|
|
377
407
|
};
|
|
378
408
|
|
|
379
409
|
// src/utils/koreanFormat.ts
|
|
380
|
-
var onlyDigits = (
|
|
410
|
+
var onlyDigits = (input6) => input6.replace(/\D/g, "");
|
|
381
411
|
function phoneNumberMaxDigits(digits) {
|
|
382
412
|
if (digits.startsWith("02")) return 10;
|
|
383
413
|
if (/^1[568]/.test(digits)) return 8;
|
|
384
414
|
return 11;
|
|
385
415
|
}
|
|
386
|
-
function formatPhoneNumber(
|
|
387
|
-
const d = onlyDigits(
|
|
416
|
+
function formatPhoneNumber(input6) {
|
|
417
|
+
const d = onlyDigits(input6).slice(0, phoneNumberMaxDigits(onlyDigits(input6)));
|
|
388
418
|
if (d.startsWith("02")) {
|
|
389
419
|
if (d.length <= 2) return d;
|
|
390
420
|
if (d.length <= 5) return `${d.slice(0, 2)}-${d.slice(2)}`;
|
|
@@ -399,14 +429,14 @@ function formatPhoneNumber(input5) {
|
|
|
399
429
|
if (d.length <= 10) return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
|
|
400
430
|
return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7)}`;
|
|
401
431
|
}
|
|
402
|
-
function formatBusinessNumber(
|
|
403
|
-
const d = onlyDigits(
|
|
432
|
+
function formatBusinessNumber(input6) {
|
|
433
|
+
const d = onlyDigits(input6).slice(0, 10);
|
|
404
434
|
if (d.length <= 3) return d;
|
|
405
435
|
if (d.length <= 5) return `${d.slice(0, 3)}-${d.slice(3)}`;
|
|
406
436
|
return `${d.slice(0, 3)}-${d.slice(3, 5)}-${d.slice(5)}`;
|
|
407
437
|
}
|
|
408
|
-
function isValidBusinessNumber(
|
|
409
|
-
const d = onlyDigits(
|
|
438
|
+
function isValidBusinessNumber(input6) {
|
|
439
|
+
const d = onlyDigits(input6);
|
|
410
440
|
if (d.length !== 10) return false;
|
|
411
441
|
const weights = [1, 3, 7, 1, 3, 7, 1, 3, 5];
|
|
412
442
|
const digits = [...d].map(Number);
|
|
@@ -414,9 +444,9 @@ function isValidBusinessNumber(input5) {
|
|
|
414
444
|
sum += Math.floor(digits[8] * 5 / 10);
|
|
415
445
|
return (10 - sum % 10) % 10 === digits[9];
|
|
416
446
|
}
|
|
417
|
-
function formatKoreanAmount(amount,
|
|
447
|
+
function formatKoreanAmount(amount, unit2 = "\uC6D0") {
|
|
418
448
|
const n = Math.floor(Math.abs(amount));
|
|
419
|
-
if (n === 0) return `0${
|
|
449
|
+
if (n === 0) return `0${unit2}`;
|
|
420
450
|
const units = [
|
|
421
451
|
{ value: 1e12, label: "\uC870" },
|
|
422
452
|
{ value: 1e8, label: "\uC5B5" },
|
|
@@ -430,7 +460,7 @@ function formatKoreanAmount(amount, unit = "\uC6D0") {
|
|
|
430
460
|
rest %= u.value;
|
|
431
461
|
if (q > 0) parts.push(`${q.toLocaleString("ko-KR")}${u.label}`);
|
|
432
462
|
}
|
|
433
|
-
return `${amount < 0 ? "-" : ""}${parts.join(" ")}${
|
|
463
|
+
return `${amount < 0 ? "-" : ""}${parts.join(" ")}${unit2}`;
|
|
434
464
|
}
|
|
435
465
|
|
|
436
466
|
// src/utils/date.ts
|
|
@@ -520,10 +550,10 @@ var kakaoPostcodeProvider = async (container2, onSelect) => {
|
|
|
520
550
|
|
|
521
551
|
// src/components/AgreementGroup/agreements.ts
|
|
522
552
|
function hasAllRequiredAgreements(items2, value4) {
|
|
523
|
-
return items2.every((
|
|
553
|
+
return items2.every((item10) => !item10.required || value4.includes(item10.value));
|
|
524
554
|
}
|
|
525
555
|
|
|
526
|
-
// src/
|
|
556
|
+
// src/components/Badge/Badge.tsx
|
|
527
557
|
var import_react = require("react");
|
|
528
558
|
|
|
529
559
|
// src/utils/cx.ts
|
|
@@ -531,27 +561,310 @@ function cx(...classNames) {
|
|
|
531
561
|
return classNames.filter(Boolean).join(" ");
|
|
532
562
|
}
|
|
533
563
|
|
|
564
|
+
// src/components/Badge/Badge.css.ts
|
|
565
|
+
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
566
|
+
var badge = /* @__PURE__ */ (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb", warning: "_1295cfnc" }, size: { sm: "_1295cfnd", md: "_1295cfne", lg: "_1295cfnf" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
|
|
567
|
+
var icon = "_1295cfng";
|
|
568
|
+
|
|
569
|
+
// src/components/Badge/Badge.tsx
|
|
570
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
571
|
+
var Badge = /* @__PURE__ */ (0, import_react.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
573
|
+
startIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: icon, children: startIcon }),
|
|
574
|
+
children
|
|
575
|
+
] });
|
|
576
|
+
});
|
|
577
|
+
|
|
578
|
+
// src/components/Card/Card.tsx
|
|
579
|
+
var import_react2 = require("react");
|
|
580
|
+
|
|
581
|
+
// src/components/Card/Card.css.ts
|
|
582
|
+
var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
583
|
+
var body = "dnuf1u9";
|
|
584
|
+
var card = /* @__PURE__ */ (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "dnuf1u0", variantClassNames: { variant: { outline: "dnuf1u1", elevated: "dnuf1u2", soft: "dnuf1u3" }, padding: { none: "dnuf1u4", sm: "dnuf1u5", md: "dnuf1u6", lg: "dnuf1u7" } }, defaultVariants: { variant: "outline", padding: "md" }, compoundVariants: [] });
|
|
585
|
+
var footer = "dnuf1ua";
|
|
586
|
+
var header = "dnuf1u8";
|
|
587
|
+
|
|
588
|
+
// src/components/Card/Card.tsx
|
|
589
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
590
|
+
var Card = /* @__PURE__ */ (0, import_react2.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
592
|
+
});
|
|
593
|
+
var CardHeader = /* @__PURE__ */ (0, import_react2.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
|
|
594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx(header, className), ...rest });
|
|
595
|
+
});
|
|
596
|
+
var CardBody = /* @__PURE__ */ (0, import_react2.forwardRef)(function CardBody2({ className, ...rest }, ref) {
|
|
597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx(body, className), ...rest });
|
|
598
|
+
});
|
|
599
|
+
var CardFooter = /* @__PURE__ */ (0, import_react2.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
|
|
600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx(footer, className), ...rest });
|
|
601
|
+
});
|
|
602
|
+
|
|
603
|
+
// src/components/DescriptionList/DescriptionList.tsx
|
|
604
|
+
var import_dynamic2 = require("@vanilla-extract/dynamic");
|
|
605
|
+
var import_react3 = require("react");
|
|
606
|
+
|
|
607
|
+
// src/components/DescriptionList/DescriptionList.css.ts
|
|
608
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
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: [] });
|
|
641
|
+
var labeled = "_1t3gq8v3";
|
|
642
|
+
var line = "_1t3gq8v4";
|
|
643
|
+
|
|
644
|
+
// src/components/Divider/Divider.tsx
|
|
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) {
|
|
647
|
+
if (children && orientation === "horizontal") {
|
|
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 }),
|
|
650
|
+
children,
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: line, "aria-hidden": true })
|
|
652
|
+
] });
|
|
653
|
+
}
|
|
654
|
+
const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
|
|
655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
|
|
656
|
+
});
|
|
657
|
+
|
|
658
|
+
// src/components/Progress/Progress.tsx
|
|
659
|
+
var import_react5 = require("react");
|
|
660
|
+
|
|
661
|
+
// src/components/Progress/Progress.css.ts
|
|
662
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
663
|
+
var header2 = "_1tvkq001";
|
|
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: [] });
|
|
665
|
+
var label = "_1tvkq002";
|
|
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: [] });
|
|
668
|
+
var value = "_1tvkq003";
|
|
669
|
+
|
|
670
|
+
// src/components/Progress/Progress.tsx
|
|
671
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
672
|
+
var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
|
|
673
|
+
var Progress = /* @__PURE__ */ (0, import_react5.forwardRef)(function Progress2({
|
|
674
|
+
value: value4,
|
|
675
|
+
max = 100,
|
|
676
|
+
label: label7,
|
|
677
|
+
"aria-label": ariaLabel,
|
|
678
|
+
showValue,
|
|
679
|
+
formatValue = defaultFormat,
|
|
680
|
+
size,
|
|
681
|
+
color,
|
|
682
|
+
className,
|
|
683
|
+
...rest
|
|
684
|
+
}, ref) {
|
|
685
|
+
const labelId = (0, import_react5.useId)();
|
|
686
|
+
const isIndeterminate = value4 === void 0 || value4 === null;
|
|
687
|
+
const safeMax = max > 0 ? max : 100;
|
|
688
|
+
const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
|
|
689
|
+
const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
|
|
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 })
|
|
694
|
+
] }),
|
|
695
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
696
|
+
"div",
|
|
697
|
+
{
|
|
698
|
+
role: "progressbar",
|
|
699
|
+
"aria-labelledby": label7 ? labelId : void 0,
|
|
700
|
+
"aria-label": label7 ? void 0 : ariaLabel,
|
|
701
|
+
"aria-valuemin": 0,
|
|
702
|
+
"aria-valuemax": safeMax,
|
|
703
|
+
"aria-valuenow": isIndeterminate ? void 0 : clamped,
|
|
704
|
+
"aria-valuetext": valueText,
|
|
705
|
+
className: track({ size }),
|
|
706
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
707
|
+
"div",
|
|
708
|
+
{
|
|
709
|
+
className: indicator({ color }),
|
|
710
|
+
"data-state": isIndeterminate ? "indeterminate" : clamped >= safeMax ? "complete" : "loading",
|
|
711
|
+
style: isIndeterminate ? void 0 : { width: `${clamped / safeMax * 100}%` }
|
|
712
|
+
}
|
|
713
|
+
)
|
|
714
|
+
}
|
|
715
|
+
)
|
|
716
|
+
] });
|
|
717
|
+
});
|
|
718
|
+
|
|
719
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
720
|
+
var import_dynamic3 = require("@vanilla-extract/dynamic");
|
|
721
|
+
var import_react6 = require("react");
|
|
722
|
+
|
|
723
|
+
// src/components/Skeleton/Skeleton.css.ts
|
|
724
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
725
|
+
var height = "var(--_1s8datd1)";
|
|
726
|
+
var lines = "_1s8datd6";
|
|
727
|
+
var skeleton = /* @__PURE__ */ (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
|
|
728
|
+
var width = "var(--_1s8datd0)";
|
|
729
|
+
|
|
730
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
731
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
732
|
+
var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
|
|
733
|
+
var Skeleton = /* @__PURE__ */ (0, import_react6.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
|
|
734
|
+
const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
|
|
735
|
+
const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
|
|
736
|
+
if (variant === "text" && lines2 > 1) {
|
|
737
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
738
|
+
"span",
|
|
739
|
+
{
|
|
740
|
+
ref,
|
|
741
|
+
"aria-hidden": true,
|
|
742
|
+
className: cx(lines, className),
|
|
743
|
+
style: { ...(0, import_dynamic3.assignInlineVars)({ [width]: w }), ...style },
|
|
744
|
+
...rest,
|
|
745
|
+
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
746
|
+
"span",
|
|
747
|
+
{
|
|
748
|
+
className: skeleton({ variant }),
|
|
749
|
+
style: (0, import_dynamic3.assignInlineVars)({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
|
|
750
|
+
},
|
|
751
|
+
i
|
|
752
|
+
))
|
|
753
|
+
}
|
|
754
|
+
);
|
|
755
|
+
}
|
|
756
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
757
|
+
"span",
|
|
758
|
+
{
|
|
759
|
+
ref,
|
|
760
|
+
"aria-hidden": true,
|
|
761
|
+
className: cx(skeleton({ variant }), className),
|
|
762
|
+
style: { ...(0, import_dynamic3.assignInlineVars)({ [width]: w, [height]: h }), ...style },
|
|
763
|
+
...rest
|
|
764
|
+
}
|
|
765
|
+
);
|
|
766
|
+
});
|
|
767
|
+
|
|
768
|
+
// src/components/Stack/Stack.tsx
|
|
769
|
+
var import_react7 = require("react");
|
|
770
|
+
|
|
771
|
+
// src/components/Stack/Stack.css.ts
|
|
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: [] });
|
|
774
|
+
|
|
775
|
+
// src/components/Stack/Stack.tsx
|
|
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 });
|
|
779
|
+
});
|
|
780
|
+
|
|
781
|
+
// src/components/Typography/Typography.tsx
|
|
782
|
+
var import_react8 = require("react");
|
|
783
|
+
|
|
784
|
+
// src/components/Typography/Typography.css.ts
|
|
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: [] });
|
|
787
|
+
|
|
788
|
+
// src/components/Typography/Typography.tsx
|
|
789
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
790
|
+
var defaultElement = {
|
|
791
|
+
display: "h1",
|
|
792
|
+
h1: "h1",
|
|
793
|
+
h2: "h2",
|
|
794
|
+
h3: "h3",
|
|
795
|
+
h4: "h4",
|
|
796
|
+
"body-lg": "p",
|
|
797
|
+
body: "p",
|
|
798
|
+
"body-sm": "p",
|
|
799
|
+
caption: "span"
|
|
800
|
+
};
|
|
801
|
+
var Typography = /* @__PURE__ */ (0, import_react8.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
802
|
+
const Component = as ?? defaultElement[variant];
|
|
803
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
804
|
+
Component,
|
|
805
|
+
{
|
|
806
|
+
ref,
|
|
807
|
+
className: cx(typography({ variant, color, weight, align, truncate }), className),
|
|
808
|
+
...rest
|
|
809
|
+
}
|
|
810
|
+
);
|
|
811
|
+
});
|
|
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
|
+
|
|
844
|
+
// src/theme/ThemeProvider.tsx
|
|
845
|
+
var import_react10 = require("react");
|
|
846
|
+
|
|
534
847
|
// src/theme/ThemeProvider.css.ts
|
|
535
848
|
var portal = "sfyhlv0";
|
|
536
|
-
var
|
|
849
|
+
var root3 = "sfyhlv1 sfyhlv0";
|
|
537
850
|
|
|
538
851
|
// src/theme/ThemeProvider.tsx
|
|
539
|
-
var
|
|
540
|
-
var ThemeContext = /* @__PURE__ */ (0,
|
|
541
|
-
var ThemeProvider = /* @__PURE__ */ (0,
|
|
542
|
-
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);
|
|
543
856
|
const theme = themeProp ?? parent.theme;
|
|
544
|
-
const merged = (0,
|
|
545
|
-
const value4 = (0,
|
|
857
|
+
const merged = (0, import_react10.useMemo)(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
|
|
858
|
+
const value4 = (0, import_react10.useMemo)(
|
|
546
859
|
() => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
|
|
547
860
|
[theme, merged]
|
|
548
861
|
);
|
|
549
|
-
return /* @__PURE__ */ (0,
|
|
862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
550
863
|
"div",
|
|
551
864
|
{
|
|
552
865
|
ref,
|
|
553
866
|
"data-theme": theme,
|
|
554
|
-
className: cx(themeClass[theme],
|
|
867
|
+
className: cx(themeClass[theme], root3, className),
|
|
555
868
|
style: value4.style ? { ...value4.style, ...style } : style,
|
|
556
869
|
...rest,
|
|
557
870
|
children
|
|
@@ -559,96 +872,93 @@ var ThemeProvider = /* @__PURE__ */ (0, import_react.forwardRef)(function ThemeP
|
|
|
559
872
|
) });
|
|
560
873
|
});
|
|
561
874
|
function useTheme() {
|
|
562
|
-
return (0,
|
|
875
|
+
return (0, import_react10.useContext)(ThemeContext).theme;
|
|
563
876
|
}
|
|
564
877
|
function usePortalProps() {
|
|
565
|
-
const { theme, style } = (0,
|
|
878
|
+
const { theme, style } = (0, import_react10.useContext)(ThemeContext);
|
|
566
879
|
return { className: cx(themeClass[theme], portal), style };
|
|
567
880
|
}
|
|
568
881
|
|
|
569
882
|
// src/i18n/LocaleProvider.tsx
|
|
570
|
-
var
|
|
571
|
-
var
|
|
572
|
-
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)({});
|
|
573
886
|
function LocaleProvider({ messages, children }) {
|
|
574
|
-
const parent = (0,
|
|
575
|
-
const value4 = (0,
|
|
576
|
-
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 });
|
|
577
890
|
}
|
|
578
891
|
function useMessages() {
|
|
579
|
-
return (0,
|
|
892
|
+
return (0, import_react11.useContext)(MessagesContext);
|
|
580
893
|
}
|
|
581
894
|
|
|
582
895
|
// src/components/Accordion/Accordion.tsx
|
|
583
896
|
var RadixAccordion = __toESM(require("@radix-ui/react-accordion"), 1);
|
|
584
897
|
var import_icons = require("@bestow-ui/icons");
|
|
585
|
-
var
|
|
898
|
+
var import_react12 = require("react");
|
|
586
899
|
|
|
587
900
|
// src/components/Accordion/Accordion.css.ts
|
|
588
901
|
var chevron = "v58j0l4";
|
|
589
902
|
var content = "v58j0l5";
|
|
590
903
|
var contentInner = "v58j0l6";
|
|
591
|
-
var
|
|
592
|
-
var
|
|
593
|
-
var
|
|
904
|
+
var header3 = "v58j0l2";
|
|
905
|
+
var item2 = "v58j0l1";
|
|
906
|
+
var root4 = "v58j0l0";
|
|
594
907
|
var trigger = "v58j0l3";
|
|
595
908
|
|
|
596
909
|
// src/components/Accordion/Accordion.tsx
|
|
597
|
-
var
|
|
598
|
-
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) {
|
|
599
912
|
const { collapsible, ...multipleProps } = props;
|
|
600
913
|
const typedProps = props.type === "multiple" ? multipleProps : { ...multipleProps, collapsible };
|
|
601
914
|
const rootProps = "value" in props ? { ...typedProps, value: props.value ?? (props.type === "multiple" ? [] : "") } : typedProps;
|
|
602
|
-
return /* @__PURE__ */ (0,
|
|
915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixAccordion.Root, { ref, className: cx(root4, className), ...rootProps });
|
|
603
916
|
});
|
|
604
|
-
var AccordionItem = /* @__PURE__ */ (0,
|
|
917
|
+
var AccordionItem = /* @__PURE__ */ (0, import_react12.forwardRef)(function AccordionItem2({ title: title6, headingLevel = 3, className, children, ...rest }, ref) {
|
|
605
918
|
const Heading = `h${headingLevel}`;
|
|
606
|
-
return /* @__PURE__ */ (0,
|
|
607
|
-
/* @__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: [
|
|
608
921
|
title6,
|
|
609
|
-
/* @__PURE__ */ (0,
|
|
922
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons.ChevronDownIcon, { size: 18, className: chevron })
|
|
610
923
|
] }) }) }),
|
|
611
|
-
/* @__PURE__ */ (0,
|
|
924
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixAccordion.Content, { className: content, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: contentInner, children }) })
|
|
612
925
|
] });
|
|
613
926
|
});
|
|
614
927
|
|
|
615
928
|
// src/components/AddressInput/AddressInput.tsx
|
|
616
|
-
var
|
|
929
|
+
var import_react18 = require("react");
|
|
617
930
|
|
|
618
931
|
// src/components/Button/Button.tsx
|
|
619
|
-
var
|
|
932
|
+
var import_react14 = require("react");
|
|
620
933
|
|
|
621
934
|
// src/components/Spinner/Spinner.tsx
|
|
622
935
|
var import_icons2 = require("@bestow-ui/icons");
|
|
623
|
-
var
|
|
624
|
-
|
|
625
|
-
// src/styles/visuallyHidden.css.ts
|
|
626
|
-
var visuallyHidden = "_1kdtbw10";
|
|
936
|
+
var import_react13 = require("react");
|
|
627
937
|
|
|
628
938
|
// src/components/Spinner/Spinner.css.ts
|
|
629
|
-
var
|
|
630
|
-
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: [] });
|
|
631
941
|
|
|
632
942
|
// src/components/Spinner/Spinner.tsx
|
|
633
|
-
var
|
|
634
|
-
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) {
|
|
635
945
|
const m = useMessages();
|
|
636
|
-
const
|
|
637
|
-
const a11y =
|
|
638
|
-
return /* @__PURE__ */ (0,
|
|
639
|
-
/* @__PURE__ */ (0,
|
|
640
|
-
|
|
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 })
|
|
641
951
|
] });
|
|
642
952
|
});
|
|
643
953
|
|
|
644
954
|
// src/components/Button/Button.css.ts
|
|
645
|
-
var
|
|
646
|
-
var button = /* @__PURE__ */ (0,
|
|
647
|
-
var
|
|
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: [] });
|
|
957
|
+
var icon2 = "xcekdai";
|
|
648
958
|
|
|
649
959
|
// src/components/Button/Button.tsx
|
|
650
|
-
var
|
|
651
|
-
var Button = /* @__PURE__ */ (0,
|
|
960
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
961
|
+
var Button = /* @__PURE__ */ (0, import_react14.forwardRef)(function Button2({
|
|
652
962
|
variant,
|
|
653
963
|
color,
|
|
654
964
|
size,
|
|
@@ -669,8 +979,8 @@ var Button = /* @__PURE__ */ (0, import_react5.forwardRef)(function Button2({
|
|
|
669
979
|
}
|
|
670
980
|
onClick?.(event);
|
|
671
981
|
};
|
|
672
|
-
const leading = loading2 ? /* @__PURE__ */ (0,
|
|
673
|
-
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)(
|
|
674
984
|
"button",
|
|
675
985
|
{
|
|
676
986
|
ref,
|
|
@@ -681,38 +991,38 @@ var Button = /* @__PURE__ */ (0, import_react5.forwardRef)(function Button2({
|
|
|
681
991
|
onClick: handleClick,
|
|
682
992
|
...rest,
|
|
683
993
|
children: [
|
|
684
|
-
leading && /* @__PURE__ */ (0,
|
|
994
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: icon2, children: leading }),
|
|
685
995
|
children,
|
|
686
|
-
endIcon && /* @__PURE__ */ (0,
|
|
996
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: icon2, children: endIcon })
|
|
687
997
|
]
|
|
688
998
|
}
|
|
689
999
|
);
|
|
690
1000
|
});
|
|
691
1001
|
|
|
692
1002
|
// src/components/Input/Input.css.ts
|
|
693
|
-
var
|
|
1003
|
+
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
694
1004
|
var adornment = "_19p5zvh6";
|
|
695
1005
|
var field = "_19p5zvh7";
|
|
696
1006
|
var fieldFullWidth = "_19p5zvh8";
|
|
697
|
-
var helperText = /* @__PURE__ */ (0,
|
|
1007
|
+
var helperText = /* @__PURE__ */ (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
698
1008
|
var input = "_19p5zvh5";
|
|
699
|
-
var
|
|
1009
|
+
var label2 = "_19p5zvh9";
|
|
700
1010
|
var requiredMark = "_19p5zvha";
|
|
701
|
-
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: [] });
|
|
702
1012
|
|
|
703
1013
|
// src/components/Input/Input.tsx
|
|
704
|
-
var
|
|
705
|
-
var
|
|
706
|
-
var Input = /* @__PURE__ */ (0,
|
|
707
|
-
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)(
|
|
708
1018
|
"div",
|
|
709
1019
|
{
|
|
710
|
-
className: cx(
|
|
1020
|
+
className: cx(root5({ size, fullWidth }), rootClassName),
|
|
711
1021
|
"data-invalid": invalid || void 0,
|
|
712
1022
|
"data-disabled": disabled || void 0,
|
|
713
1023
|
children: [
|
|
714
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
715
|
-
/* @__PURE__ */ (0,
|
|
1024
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: adornment, children: startAdornment }),
|
|
1025
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
716
1026
|
"input",
|
|
717
1027
|
{
|
|
718
1028
|
ref,
|
|
@@ -722,25 +1032,25 @@ var Input = /* @__PURE__ */ (0, import_react6.forwardRef)(function Input2({ size
|
|
|
722
1032
|
...rest
|
|
723
1033
|
}
|
|
724
1034
|
),
|
|
725
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
1035
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: adornment, children: endAdornment })
|
|
726
1036
|
]
|
|
727
1037
|
}
|
|
728
1038
|
);
|
|
729
1039
|
});
|
|
730
1040
|
|
|
731
1041
|
// src/components/Input/TextField.tsx
|
|
732
|
-
var
|
|
733
|
-
var
|
|
734
|
-
var TextField = /* @__PURE__ */ (0,
|
|
735
|
-
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)();
|
|
736
1046
|
const inputId = id ?? generatedId;
|
|
737
1047
|
const helperId = helperText3 ? `${inputId}-helper` : void 0;
|
|
738
|
-
return /* @__PURE__ */ (0,
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
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: "*" })
|
|
742
1052
|
] }),
|
|
743
|
-
/* @__PURE__ */ (0,
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
744
1054
|
Input,
|
|
745
1055
|
{
|
|
746
1056
|
ref,
|
|
@@ -752,7 +1062,7 @@ var TextField = /* @__PURE__ */ (0, import_react7.forwardRef)(function TextField
|
|
|
752
1062
|
...rest
|
|
753
1063
|
}
|
|
754
1064
|
),
|
|
755
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
1065
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
756
1066
|
] });
|
|
757
1067
|
});
|
|
758
1068
|
|
|
@@ -761,12 +1071,15 @@ var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
|
761
1071
|
var import_icons3 = require("@bestow-ui/icons");
|
|
762
1072
|
|
|
763
1073
|
// src/utils/useReturnFocus.ts
|
|
764
|
-
var
|
|
1074
|
+
var import_react17 = require("react");
|
|
765
1075
|
function useReturnFocus(hasTrigger, onCloseAutoFocus) {
|
|
766
|
-
const returnTo = (0,
|
|
1076
|
+
const returnTo = (0, import_react17.useRef)(null);
|
|
767
1077
|
return {
|
|
768
1078
|
onOpenAutoFocus: () => {
|
|
769
|
-
|
|
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;
|
|
770
1083
|
},
|
|
771
1084
|
onCloseAutoFocus: (event) => {
|
|
772
1085
|
onCloseAutoFocus?.(event);
|
|
@@ -781,26 +1094,26 @@ function useReturnFocus(hasTrigger, onCloseAutoFocus) {
|
|
|
781
1094
|
}
|
|
782
1095
|
|
|
783
1096
|
// src/components/Modal/Modal.css.ts
|
|
784
|
-
var
|
|
785
|
-
var
|
|
1097
|
+
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1098
|
+
var body2 = "_1pdsmv0a";
|
|
786
1099
|
var closeButton = "_1pdsmv09";
|
|
787
|
-
var content2 = /* @__PURE__ */ (0,
|
|
788
|
-
var
|
|
789
|
-
var
|
|
790
|
-
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";
|
|
1102
|
+
var footer2 = "_1pdsmv0b";
|
|
1103
|
+
var header4 = "_1pdsmv05";
|
|
791
1104
|
var headings = "_1pdsmv06";
|
|
792
1105
|
var overlay = "_1pdsmv00";
|
|
793
1106
|
var title = "_1pdsmv07";
|
|
794
1107
|
|
|
795
1108
|
// src/components/Modal/Modal.tsx
|
|
796
|
-
var
|
|
1109
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
797
1110
|
function Modal({
|
|
798
1111
|
open,
|
|
799
1112
|
defaultOpen,
|
|
800
1113
|
onOpenChange,
|
|
801
1114
|
trigger: trigger4,
|
|
802
1115
|
title: title6,
|
|
803
|
-
description:
|
|
1116
|
+
description: description8,
|
|
804
1117
|
children,
|
|
805
1118
|
footer: footer6,
|
|
806
1119
|
size,
|
|
@@ -812,11 +1125,11 @@ function Modal({
|
|
|
812
1125
|
const portal2 = usePortalProps();
|
|
813
1126
|
const m = useMessages();
|
|
814
1127
|
const focus = useReturnFocus(Boolean(trigger4), onCloseAutoFocus);
|
|
815
|
-
return /* @__PURE__ */ (0,
|
|
816
|
-
trigger4 && /* @__PURE__ */ (0,
|
|
817
|
-
/* @__PURE__ */ (0,
|
|
818
|
-
/* @__PURE__ */ (0,
|
|
819
|
-
/* @__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)(
|
|
820
1133
|
Dialog.Content,
|
|
821
1134
|
{
|
|
822
1135
|
className: cx(portal2.className, content2({ size }), className),
|
|
@@ -824,17 +1137,17 @@ function Modal({
|
|
|
824
1137
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
825
1138
|
onOpenAutoFocus: focus.onOpenAutoFocus,
|
|
826
1139
|
onCloseAutoFocus: focus.onCloseAutoFocus,
|
|
827
|
-
...
|
|
1140
|
+
...description8 ? {} : { "aria-describedby": void 0 },
|
|
828
1141
|
children: [
|
|
829
|
-
/* @__PURE__ */ (0,
|
|
830
|
-
/* @__PURE__ */ (0,
|
|
831
|
-
/* @__PURE__ */ (0,
|
|
832
|
-
|
|
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 })
|
|
833
1146
|
] }),
|
|
834
|
-
!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 }) })
|
|
835
1148
|
] }),
|
|
836
|
-
children && /* @__PURE__ */ (0,
|
|
837
|
-
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 })
|
|
838
1151
|
]
|
|
839
1152
|
}
|
|
840
1153
|
)
|
|
@@ -852,7 +1165,7 @@ var searchStatus = "_16fi7uy5";
|
|
|
852
1165
|
var zonecode = "_16fi7uy3";
|
|
853
1166
|
|
|
854
1167
|
// src/components/AddressInput/AddressInput.tsx
|
|
855
|
-
var
|
|
1168
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
856
1169
|
var EMPTY = { zonecode: "", address: "", extraAddress: "", detail: "" };
|
|
857
1170
|
function SearchArea({
|
|
858
1171
|
provider,
|
|
@@ -860,13 +1173,13 @@ function SearchArea({
|
|
|
860
1173
|
loadErrorText,
|
|
861
1174
|
loadingText
|
|
862
1175
|
}) {
|
|
863
|
-
const containerRef = (0,
|
|
864
|
-
const [status, setStatus] = (0,
|
|
865
|
-
const onSelectRef = (0,
|
|
866
|
-
(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)(() => {
|
|
867
1180
|
onSelectRef.current = onSelect;
|
|
868
1181
|
});
|
|
869
|
-
(0,
|
|
1182
|
+
(0, import_react18.useEffect)(() => {
|
|
870
1183
|
const container2 = containerRef.current;
|
|
871
1184
|
if (!container2) return;
|
|
872
1185
|
let cleanup;
|
|
@@ -883,12 +1196,12 @@ function SearchArea({
|
|
|
883
1196
|
cleanup?.();
|
|
884
1197
|
};
|
|
885
1198
|
}, [provider]);
|
|
886
|
-
return /* @__PURE__ */ (0,
|
|
887
|
-
/* @__PURE__ */ (0,
|
|
888
|
-
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 })
|
|
889
1202
|
] });
|
|
890
1203
|
}
|
|
891
|
-
var AddressInput = /* @__PURE__ */ (0,
|
|
1204
|
+
var AddressInput = /* @__PURE__ */ (0, import_react18.forwardRef)(
|
|
892
1205
|
function AddressInput2(props, ref) {
|
|
893
1206
|
const {
|
|
894
1207
|
value: value4,
|
|
@@ -907,17 +1220,17 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
907
1220
|
className
|
|
908
1221
|
} = props;
|
|
909
1222
|
const m = useMessages();
|
|
910
|
-
const
|
|
1223
|
+
const label7 = labelProp ?? m.address ?? "\uC8FC\uC18C";
|
|
911
1224
|
const searchLabel = searchLabelProp ?? m.addressSearch ?? "\uC8FC\uC18C \uAC80\uC0C9";
|
|
912
1225
|
const detailPlaceholder = detailPlaceholderProp ?? m.detailAddressPlaceholder ?? "\uC0C1\uC138 \uC8FC\uC18C (\uB3D9\xB7\uD638\uC218 \uB4F1)";
|
|
913
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.";
|
|
914
|
-
const baseId = (0,
|
|
1227
|
+
const baseId = (0, import_react18.useId)();
|
|
915
1228
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
916
|
-
const detailRef = (0,
|
|
917
|
-
const selectedRef = (0,
|
|
918
|
-
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);
|
|
919
1232
|
const isControlled = "value" in props;
|
|
920
|
-
const [innerValue, setInnerValue] = (0,
|
|
1233
|
+
const [innerValue, setInnerValue] = (0, import_react18.useState)(defaultValue ?? EMPTY);
|
|
921
1234
|
const current2 = isControlled ? value4 ?? EMPTY : innerValue;
|
|
922
1235
|
const update = (next) => {
|
|
923
1236
|
if (!isControlled) setInnerValue(next);
|
|
@@ -939,13 +1252,13 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
939
1252
|
setOpen(false);
|
|
940
1253
|
};
|
|
941
1254
|
const fullAddress = `${current2.address}${current2.extraAddress ?? ""}`;
|
|
942
|
-
return /* @__PURE__ */ (0,
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
944
|
-
|
|
945
|
-
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: "*" })
|
|
946
1259
|
] }),
|
|
947
|
-
/* @__PURE__ */ (0,
|
|
948
|
-
/* @__PURE__ */ (0,
|
|
1260
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: row, children: [
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
949
1262
|
TextField,
|
|
950
1263
|
{
|
|
951
1264
|
"aria-label": m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
|
|
@@ -958,9 +1271,9 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
958
1271
|
onClick: openSearch
|
|
959
1272
|
}
|
|
960
1273
|
),
|
|
961
|
-
/* @__PURE__ */ (0,
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
|
|
962
1275
|
] }),
|
|
963
|
-
/* @__PURE__ */ (0,
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
964
1277
|
TextField,
|
|
965
1278
|
{
|
|
966
1279
|
"aria-label": m.baseAddress ?? "\uAE30\uBCF8 \uC8FC\uC18C",
|
|
@@ -973,7 +1286,7 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
973
1286
|
onClick: openSearch
|
|
974
1287
|
}
|
|
975
1288
|
),
|
|
976
|
-
/* @__PURE__ */ (0,
|
|
1289
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
977
1290
|
TextField,
|
|
978
1291
|
{
|
|
979
1292
|
ref: detailRef,
|
|
@@ -985,13 +1298,13 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
985
1298
|
fullWidth: true
|
|
986
1299
|
}
|
|
987
1300
|
),
|
|
988
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
989
|
-
name && /* @__PURE__ */ (0,
|
|
990
|
-
/* @__PURE__ */ (0,
|
|
991
|
-
/* @__PURE__ */ (0,
|
|
992
|
-
/* @__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 })
|
|
993
1306
|
] }),
|
|
994
|
-
/* @__PURE__ */ (0,
|
|
1307
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
995
1308
|
Modal,
|
|
996
1309
|
{
|
|
997
1310
|
open,
|
|
@@ -1004,7 +1317,7 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
1004
1317
|
detailRef.current?.focus();
|
|
1005
1318
|
}
|
|
1006
1319
|
},
|
|
1007
|
-
children: /* @__PURE__ */ (0,
|
|
1320
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1008
1321
|
SearchArea,
|
|
1009
1322
|
{
|
|
1010
1323
|
provider,
|
|
@@ -1020,11 +1333,11 @@ var AddressInput = /* @__PURE__ */ (0, import_react9.forwardRef)(
|
|
|
1020
1333
|
);
|
|
1021
1334
|
|
|
1022
1335
|
// src/components/AgreementGroup/AgreementGroup.tsx
|
|
1023
|
-
var
|
|
1336
|
+
var import_react20 = require("react");
|
|
1024
1337
|
var import_icons4 = require("@bestow-ui/icons");
|
|
1025
1338
|
|
|
1026
1339
|
// src/components/Checkbox/Checkbox.tsx
|
|
1027
|
-
var
|
|
1340
|
+
var import_react19 = require("react");
|
|
1028
1341
|
|
|
1029
1342
|
// src/utils/mergeRefs.ts
|
|
1030
1343
|
function mergeRefs(...refs) {
|
|
@@ -1037,23 +1350,23 @@ function mergeRefs(...refs) {
|
|
|
1037
1350
|
}
|
|
1038
1351
|
|
|
1039
1352
|
// src/components/Checkbox/Checkbox.css.ts
|
|
1040
|
-
var
|
|
1353
|
+
var import_createRuntimeFn13 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1041
1354
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
1042
|
-
var control = /* @__PURE__ */ (0,
|
|
1355
|
+
var control = /* @__PURE__ */ (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1043
1356
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
1044
1357
|
var input2 = "_1y7mzsn6";
|
|
1045
|
-
var
|
|
1358
|
+
var root6 = /* @__PURE__ */ (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1046
1359
|
|
|
1047
1360
|
// src/components/Checkbox/Checkbox.tsx
|
|
1048
|
-
var
|
|
1049
|
-
var Checkbox = /* @__PURE__ */ (0,
|
|
1050
|
-
const innerRef = (0,
|
|
1051
|
-
(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)(() => {
|
|
1052
1365
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
1053
1366
|
}, [indeterminate]);
|
|
1054
|
-
return /* @__PURE__ */ (0,
|
|
1055
|
-
/* @__PURE__ */ (0,
|
|
1056
|
-
/* @__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)(
|
|
1057
1370
|
"input",
|
|
1058
1371
|
{
|
|
1059
1372
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -1068,7 +1381,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react10.forwardRef)(function Checkbox2
|
|
|
1068
1381
|
...rest
|
|
1069
1382
|
}
|
|
1070
1383
|
),
|
|
1071
|
-
/* @__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)(
|
|
1072
1385
|
"path",
|
|
1073
1386
|
{
|
|
1074
1387
|
d: "M5 10.5l3.2 3L15 7",
|
|
@@ -1078,9 +1391,9 @@ var Checkbox = /* @__PURE__ */ (0, import_react10.forwardRef)(function Checkbox2
|
|
|
1078
1391
|
strokeLinejoin: "round"
|
|
1079
1392
|
}
|
|
1080
1393
|
) }),
|
|
1081
|
-
/* @__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" }) })
|
|
1082
1395
|
] }),
|
|
1083
|
-
|
|
1396
|
+
label7
|
|
1084
1397
|
] });
|
|
1085
1398
|
});
|
|
1086
1399
|
|
|
@@ -1090,7 +1403,7 @@ var box = "j3uxdc2";
|
|
|
1090
1403
|
var chevron2 = "j3uxdc9";
|
|
1091
1404
|
var content3 = "j3uxdca";
|
|
1092
1405
|
var fieldset2 = "j3uxdc0";
|
|
1093
|
-
var
|
|
1406
|
+
var item3 = "j3uxdc5";
|
|
1094
1407
|
var legend2 = "j3uxdc1";
|
|
1095
1408
|
var list = "j3uxdc4";
|
|
1096
1409
|
var row2 = "j3uxdc6";
|
|
@@ -1098,15 +1411,15 @@ var tag = "j3uxdc7";
|
|
|
1098
1411
|
var toggle = "j3uxdc8";
|
|
1099
1412
|
|
|
1100
1413
|
// src/components/AgreementGroup/AgreementGroup.tsx
|
|
1101
|
-
var
|
|
1102
|
-
var AgreementGroup = /* @__PURE__ */ (0,
|
|
1414
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1415
|
+
var AgreementGroup = /* @__PURE__ */ (0, import_react20.forwardRef)(
|
|
1103
1416
|
function AgreementGroup2(props, ref) {
|
|
1104
1417
|
const {
|
|
1105
1418
|
items: items2,
|
|
1106
1419
|
value: value4,
|
|
1107
1420
|
defaultValue,
|
|
1108
1421
|
onValueChange,
|
|
1109
|
-
label:
|
|
1422
|
+
label: label7,
|
|
1110
1423
|
allLabel: allLabelProp,
|
|
1111
1424
|
helperText: helperText3,
|
|
1112
1425
|
error,
|
|
@@ -1116,6 +1429,7 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1116
1429
|
showText: showTextProp,
|
|
1117
1430
|
hideText: hideTextProp,
|
|
1118
1431
|
name,
|
|
1432
|
+
id,
|
|
1119
1433
|
className
|
|
1120
1434
|
} = props;
|
|
1121
1435
|
const m = useMessages();
|
|
@@ -1124,32 +1438,33 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1124
1438
|
const optionalText = optionalTextProp ?? m.optional ?? "\uC120\uD0DD";
|
|
1125
1439
|
const showText = showTextProp ?? m.show ?? "\uBCF4\uAE30";
|
|
1126
1440
|
const hideText = hideTextProp ?? m.hide ?? "\uC811\uAE30";
|
|
1127
|
-
const baseId = (0,
|
|
1441
|
+
const baseId = (0, import_react20.useId)();
|
|
1128
1442
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
1129
1443
|
const isControlled = "value" in props;
|
|
1130
|
-
const [innerValue, setInnerValue] = (0,
|
|
1444
|
+
const [innerValue, setInnerValue] = (0, import_react20.useState)(defaultValue ?? []);
|
|
1131
1445
|
const agreed = isControlled ? value4 ?? [] : innerValue;
|
|
1132
|
-
const [expanded, setExpanded] = (0,
|
|
1446
|
+
const [expanded, setExpanded] = (0, import_react20.useState)([]);
|
|
1133
1447
|
const update = (next) => {
|
|
1134
1448
|
if (!isControlled) setInnerValue(next);
|
|
1135
1449
|
onValueChange?.(next);
|
|
1136
1450
|
};
|
|
1137
|
-
const allValues = items2.map((
|
|
1451
|
+
const allValues = items2.map((item10) => item10.value);
|
|
1138
1452
|
const agreedCount = allValues.filter((v) => agreed.includes(v)).length;
|
|
1139
1453
|
const allChecked = items2.length > 0 && agreedCount === items2.length;
|
|
1140
1454
|
const toggleItem = (itemValue, checked) => update(checked ? [...agreed.filter((v) => v !== itemValue), itemValue] : agreed.filter((v) => v !== itemValue));
|
|
1141
|
-
return /* @__PURE__ */ (0,
|
|
1455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1142
1456
|
"fieldset",
|
|
1143
1457
|
{
|
|
1144
1458
|
ref,
|
|
1459
|
+
id,
|
|
1145
1460
|
className: cx(fieldset2, className),
|
|
1146
1461
|
disabled,
|
|
1147
1462
|
"aria-describedby": helperId,
|
|
1148
1463
|
"data-invalid": error || void 0,
|
|
1149
1464
|
children: [
|
|
1150
|
-
|
|
1151
|
-
/* @__PURE__ */ (0,
|
|
1152
|
-
/* @__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)(
|
|
1153
1468
|
Checkbox,
|
|
1154
1469
|
{
|
|
1155
1470
|
label: allLabel,
|
|
@@ -1158,28 +1473,28 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1158
1473
|
onChange: (event) => update(event.target.checked ? allValues : [])
|
|
1159
1474
|
}
|
|
1160
1475
|
) }),
|
|
1161
|
-
/* @__PURE__ */ (0,
|
|
1162
|
-
const labelId = `${baseId}-${
|
|
1163
|
-
const toggleTextId = `${baseId}-${
|
|
1164
|
-
const contentId = `${baseId}-${
|
|
1165
|
-
const isOpen = expanded.includes(
|
|
1166
|
-
return /* @__PURE__ */ (0,
|
|
1167
|
-
/* @__PURE__ */ (0,
|
|
1168
|
-
/* @__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)(
|
|
1169
1484
|
Checkbox,
|
|
1170
1485
|
{
|
|
1171
1486
|
size: "sm",
|
|
1172
|
-
checked: agreed.includes(
|
|
1173
|
-
invalid: error &&
|
|
1174
|
-
onChange: (event) => toggleItem(
|
|
1175
|
-
label: /* @__PURE__ */ (0,
|
|
1176
|
-
/* @__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 }),
|
|
1177
1492
|
" ",
|
|
1178
|
-
|
|
1493
|
+
item10.label
|
|
1179
1494
|
] })
|
|
1180
1495
|
}
|
|
1181
1496
|
),
|
|
1182
|
-
|
|
1497
|
+
item10.content && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1183
1498
|
"button",
|
|
1184
1499
|
{
|
|
1185
1500
|
type: "button",
|
|
@@ -1187,22 +1502,22 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1187
1502
|
"aria-expanded": isOpen,
|
|
1188
1503
|
"aria-controls": contentId,
|
|
1189
1504
|
"aria-labelledby": `${labelId} ${toggleTextId}`,
|
|
1190
|
-
onClick: () => setExpanded((prev) => isOpen ? prev.filter((v) => v !==
|
|
1505
|
+
onClick: () => setExpanded((prev) => isOpen ? prev.filter((v) => v !== item10.value) : [...prev, item10.value]),
|
|
1191
1506
|
children: [
|
|
1192
|
-
/* @__PURE__ */ (0,
|
|
1193
|
-
/* @__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 })
|
|
1194
1509
|
]
|
|
1195
1510
|
}
|
|
1196
1511
|
)
|
|
1197
1512
|
] }),
|
|
1198
|
-
|
|
1513
|
+
item10.content && isOpen && // 내용이 길면 스크롤된다 — 키보드로도 스크롤할 수 있게 포커스를 받는 이름 있는 영역으로 둔다
|
|
1199
1514
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
1200
|
-
/* @__PURE__ */ (0,
|
|
1201
|
-
] },
|
|
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);
|
|
1202
1517
|
}) })
|
|
1203
1518
|
] }),
|
|
1204
|
-
name && agreed.map((v) => /* @__PURE__ */ (0,
|
|
1205
|
-
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 })
|
|
1206
1521
|
]
|
|
1207
1522
|
}
|
|
1208
1523
|
);
|
|
@@ -1210,21 +1525,21 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
|
|
|
1210
1525
|
);
|
|
1211
1526
|
|
|
1212
1527
|
// src/components/Alert/Alert.tsx
|
|
1213
|
-
var
|
|
1528
|
+
var import_react21 = require("react");
|
|
1214
1529
|
var import_icons5 = require("@bestow-ui/icons");
|
|
1215
1530
|
|
|
1216
1531
|
// src/components/Alert/Alert.css.ts
|
|
1217
|
-
var
|
|
1532
|
+
var import_createRuntimeFn14 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1218
1533
|
var action = "bsmpc0j";
|
|
1219
|
-
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: [] });
|
|
1220
1535
|
var closeButton2 = "bsmpc0k";
|
|
1221
1536
|
var content4 = "bsmpc0g";
|
|
1222
|
-
var
|
|
1223
|
-
var
|
|
1537
|
+
var description3 = "bsmpc0i";
|
|
1538
|
+
var icon3 = "bsmpc0f";
|
|
1224
1539
|
var title2 = "bsmpc0h";
|
|
1225
1540
|
|
|
1226
1541
|
// src/components/Alert/Alert.tsx
|
|
1227
|
-
var
|
|
1542
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1228
1543
|
var defaultIcons = {
|
|
1229
1544
|
primary: import_icons5.InfoIcon,
|
|
1230
1545
|
neutral: import_icons5.InfoIcon,
|
|
@@ -1232,7 +1547,7 @@ var defaultIcons = {
|
|
|
1232
1547
|
warning: import_icons5.TriangleAlertIcon,
|
|
1233
1548
|
danger: import_icons5.CircleAlertIcon
|
|
1234
1549
|
};
|
|
1235
|
-
var Alert = /* @__PURE__ */ (0,
|
|
1550
|
+
var Alert = /* @__PURE__ */ (0, import_react21.forwardRef)(function Alert2({
|
|
1236
1551
|
variant,
|
|
1237
1552
|
color = "primary",
|
|
1238
1553
|
title: title6,
|
|
@@ -1247,34 +1562,34 @@ var Alert = /* @__PURE__ */ (0, import_react12.forwardRef)(function Alert2({
|
|
|
1247
1562
|
const m = useMessages();
|
|
1248
1563
|
const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
|
|
1249
1564
|
const DefaultIcon = defaultIcons[color];
|
|
1250
|
-
const iconNode = icon7 === void 0 ? /* @__PURE__ */ (0,
|
|
1251
|
-
return /* @__PURE__ */ (0,
|
|
1252
|
-
iconNode !== false && iconNode !== null && /* @__PURE__ */ (0,
|
|
1253
|
-
/* @__PURE__ */ (0,
|
|
1254
|
-
title6 && /* @__PURE__ */ (0,
|
|
1255
|
-
children && /* @__PURE__ */ (0,
|
|
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 })
|
|
1256
1571
|
] }),
|
|
1257
|
-
action3 && /* @__PURE__ */ (0,
|
|
1258
|
-
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 }) })
|
|
1259
1574
|
] });
|
|
1260
1575
|
});
|
|
1261
1576
|
|
|
1262
1577
|
// src/components/AmountInput/AmountInput.tsx
|
|
1263
|
-
var
|
|
1578
|
+
var import_react24 = require("react");
|
|
1264
1579
|
|
|
1265
1580
|
// src/utils/useFormattedInput.ts
|
|
1266
|
-
var
|
|
1581
|
+
var import_react23 = require("react");
|
|
1267
1582
|
|
|
1268
1583
|
// src/utils/useIsomorphicLayoutEffect.ts
|
|
1269
|
-
var
|
|
1270
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1584
|
+
var import_react22 = require("react");
|
|
1585
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react22.useLayoutEffect : import_react22.useEffect;
|
|
1271
1586
|
|
|
1272
1587
|
// src/utils/useFormattedInput.ts
|
|
1273
|
-
function caretAfter(display, count2,
|
|
1588
|
+
function caretAfter(display, count2, isMeaningful2) {
|
|
1274
1589
|
if (count2 <= 0) return 0;
|
|
1275
1590
|
let seen = 0;
|
|
1276
1591
|
for (let i = 0; i < display.length; i++) {
|
|
1277
|
-
if (
|
|
1592
|
+
if (isMeaningful2(display[i])) seen++;
|
|
1278
1593
|
if (seen === count2) return i + 1;
|
|
1279
1594
|
}
|
|
1280
1595
|
return display.length;
|
|
@@ -1286,18 +1601,18 @@ function useFormattedInput({
|
|
|
1286
1601
|
onValueChange,
|
|
1287
1602
|
sanitize: sanitize4,
|
|
1288
1603
|
format: format2,
|
|
1289
|
-
isMeaningful,
|
|
1604
|
+
isMeaningful: isMeaningful2,
|
|
1290
1605
|
inputRef
|
|
1291
1606
|
}) {
|
|
1292
|
-
const [innerValue, setInnerValue] = (0,
|
|
1607
|
+
const [innerValue, setInnerValue] = (0, import_react23.useState)(() => sanitize4(defaultValue ?? ""));
|
|
1293
1608
|
const raw = isControlled ? sanitize4(value4 ?? "") : innerValue;
|
|
1294
1609
|
const display = format2(raw);
|
|
1295
|
-
const pendingCaret = (0,
|
|
1610
|
+
const pendingCaret = (0, import_react23.useRef)(null);
|
|
1296
1611
|
useIsomorphicLayoutEffect(() => {
|
|
1297
|
-
const
|
|
1298
|
-
if (pendingCaret.current === null || !
|
|
1299
|
-
const position = caretAfter(
|
|
1300
|
-
|
|
1612
|
+
const input6 = inputRef.current;
|
|
1613
|
+
if (pendingCaret.current === null || !input6 || document.activeElement !== input6) return;
|
|
1614
|
+
const position = caretAfter(input6.value, pendingCaret.current, isMeaningful2);
|
|
1615
|
+
input6.setSelectionRange(position, position);
|
|
1301
1616
|
pendingCaret.current = null;
|
|
1302
1617
|
});
|
|
1303
1618
|
const commit = (next, caretCount) => {
|
|
@@ -1312,17 +1627,17 @@ function useFormattedInput({
|
|
|
1312
1627
|
commit(next, Math.min(before.length, next.length));
|
|
1313
1628
|
};
|
|
1314
1629
|
const onKeyDown = (event) => {
|
|
1315
|
-
const
|
|
1316
|
-
const { selectionStart: start, selectionEnd:
|
|
1317
|
-
if (start === null || start !==
|
|
1318
|
-
const countBefore = (
|
|
1319
|
-
if (event.key === "Backspace" && start > 0 && !
|
|
1320
|
-
const index = countBefore(
|
|
1630
|
+
const input6 = event.currentTarget;
|
|
1631
|
+
const { selectionStart: start, selectionEnd: end2 } = input6;
|
|
1632
|
+
if (start === null || start !== end2) return;
|
|
1633
|
+
const countBefore = (text3) => [...text3].filter(isMeaningful2).length;
|
|
1634
|
+
if (event.key === "Backspace" && start > 0 && !isMeaningful2(input6.value[start - 1])) {
|
|
1635
|
+
const index = countBefore(input6.value.slice(0, start)) - 1;
|
|
1321
1636
|
if (index < 0) return;
|
|
1322
1637
|
event.preventDefault();
|
|
1323
1638
|
commit(raw.slice(0, index) + raw.slice(index + 1), index);
|
|
1324
|
-
} else if (event.key === "Delete" && start <
|
|
1325
|
-
const index = countBefore(
|
|
1639
|
+
} else if (event.key === "Delete" && start < input6.value.length && !isMeaningful2(input6.value[start])) {
|
|
1640
|
+
const index = countBefore(input6.value.slice(0, start));
|
|
1326
1641
|
if (index >= raw.length) return;
|
|
1327
1642
|
event.preventDefault();
|
|
1328
1643
|
commit(raw.slice(0, index) + raw.slice(index + 1), index);
|
|
@@ -1336,10 +1651,10 @@ function useFormattedInput({
|
|
|
1336
1651
|
var input3 = "_70qkav0";
|
|
1337
1652
|
|
|
1338
1653
|
// src/components/AmountInput/AmountInput.tsx
|
|
1339
|
-
var
|
|
1654
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1340
1655
|
var MAX_DIGITS = 15;
|
|
1341
1656
|
var isDigit = (char) => /\d/.test(char);
|
|
1342
|
-
var AmountInput = /* @__PURE__ */ (0,
|
|
1657
|
+
var AmountInput = /* @__PURE__ */ (0, import_react24.forwardRef)(
|
|
1343
1658
|
function AmountInput2(props, ref) {
|
|
1344
1659
|
const {
|
|
1345
1660
|
value: value4,
|
|
@@ -1355,12 +1670,12 @@ var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
|
1355
1670
|
className,
|
|
1356
1671
|
...rest
|
|
1357
1672
|
} = props;
|
|
1358
|
-
const inputRef = (0,
|
|
1673
|
+
const inputRef = (0, import_react24.useRef)(null);
|
|
1359
1674
|
const m = useMessages();
|
|
1360
|
-
const
|
|
1361
|
-
const
|
|
1362
|
-
const sanitize4 = (
|
|
1363
|
-
let digits =
|
|
1675
|
+
const unit2 = unitProp ?? m.currencyUnit ?? "\uC6D0";
|
|
1676
|
+
const label7 = labelProp ?? m.amount ?? "\uAE08\uC561";
|
|
1677
|
+
const sanitize4 = (input6) => {
|
|
1678
|
+
let digits = input6.replace(/\D/g, "").replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS);
|
|
1364
1679
|
if (max !== void 0 && digits && Number(digits) > max) digits = String(Math.floor(max));
|
|
1365
1680
|
return digits;
|
|
1366
1681
|
};
|
|
@@ -1375,12 +1690,12 @@ var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
|
1375
1690
|
isMeaningful: isDigit,
|
|
1376
1691
|
inputRef
|
|
1377
1692
|
});
|
|
1378
|
-
const reading = showKoreanAmount && field3.raw !== "" ? formatKoreanAmount(Number(field3.raw),
|
|
1379
|
-
return /* @__PURE__ */ (0,
|
|
1693
|
+
const reading = showKoreanAmount && field3.raw !== "" ? formatKoreanAmount(Number(field3.raw), unit2) : null;
|
|
1694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1380
1695
|
TextField,
|
|
1381
1696
|
{
|
|
1382
1697
|
ref: mergeRefs(ref, inputRef),
|
|
1383
|
-
label:
|
|
1698
|
+
label: label7,
|
|
1384
1699
|
placeholder,
|
|
1385
1700
|
inputMode: "numeric",
|
|
1386
1701
|
value: field3.display,
|
|
@@ -1389,10 +1704,10 @@ var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
|
1389
1704
|
field3.onKeyDown(event);
|
|
1390
1705
|
onKeyDown?.(event);
|
|
1391
1706
|
},
|
|
1392
|
-
endAdornment:
|
|
1393
|
-
helperText: reading && helperText3 ? /* @__PURE__ */ (0,
|
|
1707
|
+
endAdornment: unit2,
|
|
1708
|
+
helperText: reading && helperText3 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
1394
1709
|
reading,
|
|
1395
|
-
/* @__PURE__ */ (0,
|
|
1710
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("br", {}),
|
|
1396
1711
|
helperText3
|
|
1397
1712
|
] }) : reading ?? helperText3,
|
|
1398
1713
|
className: cx(input3, className),
|
|
@@ -1405,68 +1720,51 @@ var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
|
1405
1720
|
// src/components/Avatar/Avatar.tsx
|
|
1406
1721
|
var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
|
|
1407
1722
|
var import_icons6 = require("@bestow-ui/icons");
|
|
1408
|
-
var
|
|
1723
|
+
var import_react25 = require("react");
|
|
1409
1724
|
|
|
1410
1725
|
// src/components/Avatar/Avatar.css.ts
|
|
1411
|
-
var
|
|
1726
|
+
var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1412
1727
|
var fallback = "_1fd2kp27";
|
|
1413
1728
|
var image = "_1fd2kp26";
|
|
1414
|
-
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: [] });
|
|
1415
1730
|
|
|
1416
1731
|
// src/components/Avatar/Avatar.tsx
|
|
1417
|
-
var
|
|
1732
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1418
1733
|
function getInitials(name) {
|
|
1419
1734
|
const [a = "", b = ""] = name.trim().split(/\s+/);
|
|
1420
1735
|
const first = (word) => Array.from(word)[0] ?? "";
|
|
1421
1736
|
return (first(a) + first(b)).toUpperCase();
|
|
1422
1737
|
}
|
|
1423
|
-
var Avatar = /* @__PURE__ */ (0,
|
|
1424
|
-
const
|
|
1425
|
-
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 };
|
|
1426
1741
|
const initials = name ? getInitials(name) : "";
|
|
1427
|
-
return /* @__PURE__ */ (0,
|
|
1428
|
-
src && /* @__PURE__ */ (0,
|
|
1429
|
-
/* @__PURE__ */ (0,
|
|
1430
|
-
] });
|
|
1431
|
-
});
|
|
1432
|
-
|
|
1433
|
-
// src/components/Badge/Badge.tsx
|
|
1434
|
-
var import_react17 = require("react");
|
|
1435
|
-
|
|
1436
|
-
// src/components/Badge/Badge.css.ts
|
|
1437
|
-
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1438
|
-
var badge = /* @__PURE__ */ (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb", warning: "_1295cfnc" }, size: { sm: "_1295cfnd", md: "_1295cfne", lg: "_1295cfnf" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
|
|
1439
|
-
var icon3 = "_1295cfng";
|
|
1440
|
-
|
|
1441
|
-
// src/components/Badge/Badge.tsx
|
|
1442
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1443
|
-
var Badge = /* @__PURE__ */ (0, import_react17.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
1444
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
1445
|
-
startIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: icon3, children: startIcon }),
|
|
1446
|
-
children
|
|
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%" })) })
|
|
1447
1745
|
] });
|
|
1448
1746
|
});
|
|
1449
1747
|
|
|
1450
1748
|
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
1451
|
-
var
|
|
1749
|
+
var import_react27 = require("react");
|
|
1452
1750
|
var import_icons8 = require("@bestow-ui/icons");
|
|
1453
1751
|
|
|
1454
1752
|
// src/components/Link/Link.tsx
|
|
1455
1753
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
1456
|
-
var
|
|
1754
|
+
var import_react26 = require("react");
|
|
1457
1755
|
var import_icons7 = require("@bestow-ui/icons");
|
|
1458
1756
|
|
|
1459
1757
|
// src/components/Link/Link.css.ts
|
|
1460
|
-
var
|
|
1758
|
+
var import_createRuntimeFn16 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1461
1759
|
var externalIcon = "_1t4hlp6";
|
|
1462
|
-
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: [] });
|
|
1463
1761
|
|
|
1464
1762
|
// src/components/Link/Link.tsx
|
|
1465
|
-
var
|
|
1763
|
+
var import_jsx_runtime24 = (
|
|
1466
1764
|
// Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
|
|
1467
1765
|
require("react/jsx-runtime")
|
|
1468
1766
|
);
|
|
1469
|
-
var Link = /* @__PURE__ */ (0,
|
|
1767
|
+
var Link = /* @__PURE__ */ (0, import_react26.forwardRef)(function Link2({
|
|
1470
1768
|
as: Component = "a",
|
|
1471
1769
|
asChild,
|
|
1472
1770
|
color,
|
|
@@ -1483,9 +1781,9 @@ var Link = /* @__PURE__ */ (0, import_react18.forwardRef)(function Link2({
|
|
|
1483
1781
|
const externalLabel = externalLabelProp ?? m.newWindow ?? "(\uC0C8 \uCC3D)";
|
|
1484
1782
|
const linkClassName = cx(link({ color, underline }), className);
|
|
1485
1783
|
if (asChild) {
|
|
1486
|
-
return /* @__PURE__ */ (0,
|
|
1784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_slot.Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children });
|
|
1487
1785
|
}
|
|
1488
|
-
return /* @__PURE__ */ (0,
|
|
1786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1489
1787
|
Component,
|
|
1490
1788
|
{
|
|
1491
1789
|
ref,
|
|
@@ -1495,10 +1793,10 @@ var Link = /* @__PURE__ */ (0, import_react18.forwardRef)(function Link2({
|
|
|
1495
1793
|
...rest,
|
|
1496
1794
|
children: [
|
|
1497
1795
|
children,
|
|
1498
|
-
external && /* @__PURE__ */ (0,
|
|
1796
|
+
external && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
1499
1797
|
" ",
|
|
1500
|
-
/* @__PURE__ */ (0,
|
|
1501
|
-
/* @__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 })
|
|
1502
1800
|
] })
|
|
1503
1801
|
]
|
|
1504
1802
|
}
|
|
@@ -1507,32 +1805,32 @@ var Link = /* @__PURE__ */ (0, import_react18.forwardRef)(function Link2({
|
|
|
1507
1805
|
|
|
1508
1806
|
// src/components/Breadcrumb/Breadcrumb.css.ts
|
|
1509
1807
|
var current = "_18t8ztt3";
|
|
1510
|
-
var
|
|
1808
|
+
var item4 = "_18t8ztt1";
|
|
1511
1809
|
var link2 = "_18t8ztt2";
|
|
1512
1810
|
var list2 = "_18t8ztt0";
|
|
1513
1811
|
var separator = "_18t8ztt4";
|
|
1514
1812
|
|
|
1515
1813
|
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
1516
|
-
var
|
|
1517
|
-
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) {
|
|
1518
1816
|
const m = useMessages();
|
|
1519
1817
|
const ariaLabel = ariaLabelProp ?? m.breadcrumb ?? "\uC774\uB3D9 \uACBD\uB85C";
|
|
1520
|
-
const sep = separator3 ?? /* @__PURE__ */ (0,
|
|
1521
|
-
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) => {
|
|
1522
1820
|
const isCurrent = index === items2.length - 1;
|
|
1523
|
-
return /* @__PURE__ */ (0,
|
|
1524
|
-
index > 0 && /* @__PURE__ */ (0,
|
|
1525
|
-
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 })
|
|
1526
1824
|
] }, index);
|
|
1527
1825
|
}) }) });
|
|
1528
1826
|
});
|
|
1529
1827
|
|
|
1530
1828
|
// src/components/BusinessNumberInput/BusinessNumberInput.tsx
|
|
1531
|
-
var
|
|
1532
|
-
var
|
|
1533
|
-
var sanitize = (
|
|
1829
|
+
var import_react28 = require("react");
|
|
1830
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1831
|
+
var sanitize = (input6) => input6.replace(/\D/g, "").slice(0, 10);
|
|
1534
1832
|
var isDigit2 = (char) => /\d/.test(char);
|
|
1535
|
-
var BusinessNumberInput = /* @__PURE__ */ (0,
|
|
1833
|
+
var BusinessNumberInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
|
|
1536
1834
|
function BusinessNumberInput2(props, ref) {
|
|
1537
1835
|
const {
|
|
1538
1836
|
value: value4,
|
|
@@ -1548,12 +1846,12 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react20.forwardRef)(
|
|
|
1548
1846
|
onKeyDown,
|
|
1549
1847
|
...rest
|
|
1550
1848
|
} = props;
|
|
1551
|
-
const inputRef = (0,
|
|
1849
|
+
const inputRef = (0, import_react28.useRef)(null);
|
|
1552
1850
|
const m = useMessages();
|
|
1553
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.";
|
|
1554
|
-
const
|
|
1852
|
+
const label7 = labelProp ?? m.businessNumber ?? "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638";
|
|
1555
1853
|
const incompleteText = m.businessNumberIncomplete ?? "10\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
|
|
1556
|
-
const [touched, setTouched] = (0,
|
|
1854
|
+
const [touched, setTouched] = (0, import_react28.useState)(false);
|
|
1557
1855
|
const field3 = useFormattedInput({
|
|
1558
1856
|
isControlled: "value" in props,
|
|
1559
1857
|
value: value4,
|
|
@@ -1567,11 +1865,11 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react20.forwardRef)(
|
|
|
1567
1865
|
const complete = field3.raw.length === 10;
|
|
1568
1866
|
const autoInvalid = validate && field3.raw.length > 0 && (complete ? !isValidBusinessNumber(field3.raw) : touched);
|
|
1569
1867
|
const showAuto = autoInvalid && error === void 0;
|
|
1570
|
-
return /* @__PURE__ */ (0,
|
|
1868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1571
1869
|
TextField,
|
|
1572
1870
|
{
|
|
1573
1871
|
ref: mergeRefs(ref, inputRef),
|
|
1574
|
-
label:
|
|
1872
|
+
label: label7,
|
|
1575
1873
|
placeholder,
|
|
1576
1874
|
inputMode: "numeric",
|
|
1577
1875
|
value: field3.display,
|
|
@@ -1593,15 +1891,15 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react20.forwardRef)(
|
|
|
1593
1891
|
);
|
|
1594
1892
|
|
|
1595
1893
|
// src/components/Calendar/Calendar.tsx
|
|
1596
|
-
var
|
|
1894
|
+
var import_react31 = require("react");
|
|
1597
1895
|
var import_icons9 = require("@bestow-ui/icons");
|
|
1598
1896
|
|
|
1599
1897
|
// src/utils/useIsClient.ts
|
|
1600
|
-
var
|
|
1898
|
+
var import_react29 = require("react");
|
|
1601
1899
|
var subscribeNothing = () => () => {
|
|
1602
1900
|
};
|
|
1603
1901
|
function useIsClient() {
|
|
1604
|
-
return (0,
|
|
1902
|
+
return (0, import_react29.useSyncExternalStore)(
|
|
1605
1903
|
subscribeNothing,
|
|
1606
1904
|
() => true,
|
|
1607
1905
|
() => false
|
|
@@ -1609,16 +1907,16 @@ function useIsClient() {
|
|
|
1609
1907
|
}
|
|
1610
1908
|
|
|
1611
1909
|
// src/components/IconButton/IconButton.tsx
|
|
1612
|
-
var
|
|
1910
|
+
var import_react30 = require("react");
|
|
1613
1911
|
|
|
1614
1912
|
// src/components/IconButton/IconButton.css.ts
|
|
1615
|
-
var
|
|
1616
|
-
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: [] });
|
|
1617
1915
|
|
|
1618
1916
|
// src/components/IconButton/IconButton.tsx
|
|
1619
|
-
var
|
|
1620
|
-
var IconButton = /* @__PURE__ */ (0,
|
|
1621
|
-
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)(
|
|
1622
1920
|
Button,
|
|
1623
1921
|
{
|
|
1624
1922
|
ref,
|
|
@@ -1637,14 +1935,14 @@ var IconButton = /* @__PURE__ */ (0, import_react22.forwardRef)(function IconBut
|
|
|
1637
1935
|
var cell = "_1qyq67b5";
|
|
1638
1936
|
var day = "_1qyq67b6";
|
|
1639
1937
|
var grid = "_1qyq67b3";
|
|
1640
|
-
var
|
|
1938
|
+
var header5 = "_1qyq67b1";
|
|
1641
1939
|
var heading = "_1qyq67b2";
|
|
1642
|
-
var
|
|
1940
|
+
var root8 = "_1qyq67b0";
|
|
1643
1941
|
var weekday = "_1qyq67b4";
|
|
1644
1942
|
|
|
1645
1943
|
// src/components/Calendar/Calendar.tsx
|
|
1646
|
-
var
|
|
1647
|
-
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) {
|
|
1648
1946
|
const {
|
|
1649
1947
|
value: value4,
|
|
1650
1948
|
defaultValue,
|
|
@@ -1664,10 +1962,10 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1664
1962
|
const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
|
|
1665
1963
|
const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
|
|
1666
1964
|
const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
|
|
1667
|
-
const headingId = (0,
|
|
1668
|
-
const gridRef = (0,
|
|
1965
|
+
const headingId = (0, import_react31.useId)();
|
|
1966
|
+
const gridRef = (0, import_react31.useRef)(null);
|
|
1669
1967
|
const isControlled = "value" in props;
|
|
1670
|
-
const [innerValue, setInnerValue] = (0,
|
|
1968
|
+
const [innerValue, setInnerValue] = (0, import_react31.useState)(defaultValue ?? "");
|
|
1671
1969
|
const selected = parseISODate(isControlled ? value4 : innerValue);
|
|
1672
1970
|
const isClient = useIsClient();
|
|
1673
1971
|
const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
|
|
@@ -1679,16 +1977,16 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1679
1977
|
return date;
|
|
1680
1978
|
};
|
|
1681
1979
|
const isDisabled = (date) => minDate !== null && compareDays(date, minDate) < 0 || maxDate !== null && compareDays(date, maxDate) > 0 || !!isDateDisabled?.(date);
|
|
1682
|
-
const [focusedState, setFocused] = (0,
|
|
1980
|
+
const [focusedState, setFocused] = (0, import_react31.useState)(null);
|
|
1683
1981
|
const base = selected ?? today;
|
|
1684
1982
|
const focused = focusedState ?? (base ? clamp(base) : null);
|
|
1685
|
-
const moveFocus = (0,
|
|
1983
|
+
const moveFocus = (0, import_react31.useRef)(initialFocus ?? false);
|
|
1686
1984
|
const selectedIso = selected ? toISODate(selected) : "";
|
|
1687
|
-
(0,
|
|
1985
|
+
(0, import_react31.useEffect)(() => {
|
|
1688
1986
|
const date = parseISODate(selectedIso);
|
|
1689
1987
|
if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
|
|
1690
1988
|
}, [selectedIso]);
|
|
1691
|
-
(0,
|
|
1989
|
+
(0, import_react31.useEffect)(() => {
|
|
1692
1990
|
if (!moveFocus.current || !focused) return;
|
|
1693
1991
|
moveFocus.current = false;
|
|
1694
1992
|
gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
|
|
@@ -1728,46 +2026,46 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1728
2026
|
) : [];
|
|
1729
2027
|
const canPrev = !!visible && (!minDate || compareDays(new Date(visible.getFullYear(), visible.getMonth(), 0), minDate) >= 0);
|
|
1730
2028
|
const canNext = !!visible && (!maxDate || compareDays(new Date(visible.getFullYear(), visible.getMonth() + 1, 1), maxDate) <= 0);
|
|
1731
|
-
return /* @__PURE__ */ (0,
|
|
1732
|
-
/* @__PURE__ */ (0,
|
|
1733
|
-
/* @__PURE__ */ (0,
|
|
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)(
|
|
1734
2032
|
IconButton,
|
|
1735
2033
|
{
|
|
1736
2034
|
"aria-label": prevMonthLabel,
|
|
1737
2035
|
size: "sm",
|
|
1738
2036
|
disabled: !canPrev,
|
|
1739
2037
|
onClick: () => visible && setFocused(clamp(addMonths(visible, -1))),
|
|
1740
|
-
children: /* @__PURE__ */ (0,
|
|
2038
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons9.ChevronLeftIcon, {})
|
|
1741
2039
|
}
|
|
1742
2040
|
),
|
|
1743
|
-
/* @__PURE__ */ (0,
|
|
1744
|
-
/* @__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)(
|
|
1745
2043
|
IconButton,
|
|
1746
2044
|
{
|
|
1747
2045
|
"aria-label": nextMonthLabel,
|
|
1748
2046
|
size: "sm",
|
|
1749
2047
|
disabled: !canNext,
|
|
1750
2048
|
onClick: () => visible && setFocused(clamp(addMonths(visible, 1))),
|
|
1751
|
-
children: /* @__PURE__ */ (0,
|
|
2049
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons9.ChevronRightIcon, {})
|
|
1752
2050
|
}
|
|
1753
2051
|
)
|
|
1754
2052
|
] }),
|
|
1755
|
-
/* @__PURE__ */ (0,
|
|
1756
|
-
/* @__PURE__ */ (0,
|
|
1757
|
-
/* @__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) => {
|
|
1758
2056
|
const iso = toISODate(date);
|
|
1759
2057
|
if (!visible || !isSameMonth(date, visible))
|
|
1760
|
-
return /* @__PURE__ */ (0,
|
|
2058
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { role: "gridcell", className: cell }, iso);
|
|
1761
2059
|
const isSelected = isSameDay(date, selected);
|
|
1762
2060
|
const isToday = isSameDay(date, today);
|
|
1763
2061
|
const holiday = !!isHoliday?.(date);
|
|
1764
2062
|
const disabled = isDisabled(date);
|
|
1765
|
-
const
|
|
2063
|
+
const label7 = [
|
|
1766
2064
|
m.dayLabel?.(date, weekdaysLong[date.getDay()]) ?? `${date.getDate()}, ${date.getFullYear()}\uB144 ${date.getMonth() + 1}\uC6D4 ${weekdaysLong[date.getDay()]}`,
|
|
1767
2065
|
holiday && (m.holiday ?? "\uACF5\uD734\uC77C"),
|
|
1768
2066
|
isToday && (m.today ?? "\uC624\uB298")
|
|
1769
2067
|
].filter(Boolean).join(", ");
|
|
1770
|
-
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)(
|
|
1771
2069
|
"button",
|
|
1772
2070
|
{
|
|
1773
2071
|
type: "button",
|
|
@@ -1777,7 +2075,7 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1777
2075
|
"data-holiday": holiday || void 0,
|
|
1778
2076
|
"data-selected": isSelected || void 0,
|
|
1779
2077
|
tabIndex: isSameDay(date, focused) ? 0 : -1,
|
|
1780
|
-
"aria-label":
|
|
2078
|
+
"aria-label": label7,
|
|
1781
2079
|
"aria-current": isToday ? "date" : void 0,
|
|
1782
2080
|
"aria-disabled": disabled || void 0,
|
|
1783
2081
|
onClick: () => select(date),
|
|
@@ -1790,43 +2088,18 @@ var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2
|
|
|
1790
2088
|
] });
|
|
1791
2089
|
});
|
|
1792
2090
|
|
|
1793
|
-
// src/components/Card/Card.tsx
|
|
1794
|
-
var import_react24 = require("react");
|
|
1795
|
-
|
|
1796
|
-
// src/components/Card/Card.css.ts
|
|
1797
|
-
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1798
|
-
var body2 = "dnuf1u9";
|
|
1799
|
-
var card = /* @__PURE__ */ (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "dnuf1u0", variantClassNames: { variant: { outline: "dnuf1u1", elevated: "dnuf1u2", soft: "dnuf1u3" }, padding: { none: "dnuf1u4", sm: "dnuf1u5", md: "dnuf1u6", lg: "dnuf1u7" } }, defaultVariants: { variant: "outline", padding: "md" }, compoundVariants: [] });
|
|
1800
|
-
var footer2 = "dnuf1ua";
|
|
1801
|
-
var header4 = "dnuf1u8";
|
|
1802
|
-
|
|
1803
|
-
// src/components/Card/Card.tsx
|
|
1804
|
-
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1805
|
-
var Card = /* @__PURE__ */ (0, import_react24.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
1806
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
1807
|
-
});
|
|
1808
|
-
var CardHeader = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
|
|
1809
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(header4, className), ...rest });
|
|
1810
|
-
});
|
|
1811
|
-
var CardBody = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardBody2({ className, ...rest }, ref) {
|
|
1812
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(body2, className), ...rest });
|
|
1813
|
-
});
|
|
1814
|
-
var CardFooter = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
|
|
1815
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(footer2, className), ...rest });
|
|
1816
|
-
});
|
|
1817
|
-
|
|
1818
2091
|
// src/components/Combobox/Combobox.tsx
|
|
1819
2092
|
var Popover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
1820
|
-
var
|
|
2093
|
+
var import_react32 = require("react");
|
|
1821
2094
|
var import_icons10 = require("@bestow-ui/icons");
|
|
1822
2095
|
|
|
1823
2096
|
// src/components/Select/Select.css.ts
|
|
1824
2097
|
var content5 = "_1kx81e83";
|
|
1825
2098
|
var icon4 = "_1kx81e82";
|
|
1826
|
-
var
|
|
2099
|
+
var item5 = "_1kx81e85";
|
|
1827
2100
|
var itemIndicator = "_1kx81e86";
|
|
1828
2101
|
var trigger2 = "_1kx81e80";
|
|
1829
|
-
var
|
|
2102
|
+
var value2 = "_1kx81e81";
|
|
1830
2103
|
var viewport = "_1kx81e84";
|
|
1831
2104
|
|
|
1832
2105
|
// src/components/Combobox/Combobox.css.ts
|
|
@@ -1836,9 +2109,9 @@ var empty = "c2pbq74";
|
|
|
1836
2109
|
var toggle2 = "c2pbq71 c2pbq70";
|
|
1837
2110
|
|
|
1838
2111
|
// src/components/Combobox/Combobox.tsx
|
|
1839
|
-
var
|
|
2112
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1840
2113
|
var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
|
|
1841
|
-
var Combobox = /* @__PURE__ */ (0,
|
|
2114
|
+
var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2(props, ref) {
|
|
1842
2115
|
const {
|
|
1843
2116
|
options,
|
|
1844
2117
|
value: value4,
|
|
@@ -1847,7 +2120,7 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
1847
2120
|
filter = defaultFilter,
|
|
1848
2121
|
emptyMessage: emptyMessageProp,
|
|
1849
2122
|
placeholder,
|
|
1850
|
-
label:
|
|
2123
|
+
label: label7,
|
|
1851
2124
|
helperText: helperText3,
|
|
1852
2125
|
error,
|
|
1853
2126
|
size,
|
|
@@ -1866,33 +2139,33 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
1866
2139
|
const emptyMessage = emptyMessageProp ?? m.noResults ?? "\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694";
|
|
1867
2140
|
const toggleLabel = toggleLabelProp ?? m.openList ?? "\uBAA9\uB85D \uC5F4\uAE30";
|
|
1868
2141
|
const clearLabel = clearLabelProp ?? m.clearSelection ?? "\uC120\uD0DD \uC9C0\uC6B0\uAE30";
|
|
1869
|
-
const generatedId = (0,
|
|
2142
|
+
const generatedId = (0, import_react32.useId)();
|
|
1870
2143
|
const inputId = id ?? generatedId;
|
|
1871
2144
|
const labelId = `${inputId}-label`;
|
|
1872
2145
|
const listId = `${inputId}-listbox`;
|
|
1873
2146
|
const helperId = helperText3 ? `${inputId}-helper` : void 0;
|
|
1874
2147
|
const optionId = (index) => `${inputId}-option-${index}`;
|
|
1875
2148
|
const portal2 = usePortalProps();
|
|
1876
|
-
const inputRef = (0,
|
|
1877
|
-
const anchorRef = (0,
|
|
2149
|
+
const inputRef = (0, import_react32.useRef)(null);
|
|
2150
|
+
const anchorRef = (0, import_react32.useRef)(null);
|
|
1878
2151
|
const isControlled = "value" in props;
|
|
1879
|
-
const [innerValue, setInnerValue] = (0,
|
|
2152
|
+
const [innerValue, setInnerValue] = (0, import_react32.useState)(defaultValue);
|
|
1880
2153
|
const selectedValue = isControlled ? value4 : innerValue;
|
|
1881
2154
|
const selectedOption = options.find((o) => o.value === selectedValue);
|
|
1882
|
-
const [open, setOpen] = (0,
|
|
1883
|
-
const [query, setQuery] = (0,
|
|
1884
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
1885
|
-
const filtered = (0,
|
|
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]);
|
|
1886
2159
|
const inputText = query ?? selectedOption?.label ?? "";
|
|
1887
|
-
const firstEnabled = (
|
|
1888
|
-
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;
|
|
1889
2162
|
return -1;
|
|
1890
2163
|
};
|
|
1891
|
-
const openList = (
|
|
2164
|
+
const openList = (list7 = filtered, preferLast = false) => {
|
|
1892
2165
|
setOpen(true);
|
|
1893
|
-
const selectedIndex =
|
|
2166
|
+
const selectedIndex = list7.findIndex((o) => o.value === selectedValue);
|
|
1894
2167
|
setActiveIndex(
|
|
1895
|
-
selectedIndex >= 0 && !
|
|
2168
|
+
selectedIndex >= 0 && !list7[selectedIndex].disabled ? selectedIndex : preferLast ? firstEnabled(list7, list7.length - 1, -1) : firstEnabled(list7)
|
|
1896
2169
|
);
|
|
1897
2170
|
};
|
|
1898
2171
|
const reset = () => {
|
|
@@ -1914,9 +2187,9 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
1914
2187
|
if (option2.value !== selectedValue) onValueChange?.(option2.value);
|
|
1915
2188
|
reset();
|
|
1916
2189
|
};
|
|
1917
|
-
const move = (
|
|
1918
|
-
const start = activeIndex < 0 ?
|
|
1919
|
-
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);
|
|
1920
2193
|
if (next >= 0) setActiveIndex(next);
|
|
1921
2194
|
};
|
|
1922
2195
|
const handleChange = (event) => {
|
|
@@ -1957,26 +2230,26 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
1957
2230
|
break;
|
|
1958
2231
|
}
|
|
1959
2232
|
};
|
|
1960
|
-
(0,
|
|
2233
|
+
(0, import_react32.useEffect)(() => {
|
|
1961
2234
|
if (!open || activeIndex < 0) return;
|
|
1962
2235
|
document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
|
|
1963
2236
|
}, [open, activeIndex]);
|
|
1964
2237
|
const hasOptions = filtered.length > 0;
|
|
1965
|
-
return /* @__PURE__ */ (0,
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
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: "*" })
|
|
1969
2242
|
] }),
|
|
1970
|
-
/* @__PURE__ */ (0,
|
|
1971
|
-
/* @__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)(
|
|
1972
2245
|
"div",
|
|
1973
2246
|
{
|
|
1974
2247
|
ref: anchorRef,
|
|
1975
|
-
className: cx(
|
|
2248
|
+
className: cx(root5({ size, fullWidth }), className),
|
|
1976
2249
|
"data-invalid": error || void 0,
|
|
1977
2250
|
"data-disabled": disabled || void 0,
|
|
1978
2251
|
children: [
|
|
1979
|
-
/* @__PURE__ */ (0,
|
|
2252
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1980
2253
|
"input",
|
|
1981
2254
|
{
|
|
1982
2255
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -1987,7 +2260,7 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
1987
2260
|
"aria-controls": open && hasOptions ? listId : void 0,
|
|
1988
2261
|
"aria-autocomplete": "list",
|
|
1989
2262
|
"aria-activedescendant": open && activeIndex >= 0 ? optionId(activeIndex) : void 0,
|
|
1990
|
-
"aria-label":
|
|
2263
|
+
"aria-label": label7 ? void 0 : ariaLabel,
|
|
1991
2264
|
"aria-invalid": error || void 0,
|
|
1992
2265
|
"aria-required": required || void 0,
|
|
1993
2266
|
"aria-describedby": helperId,
|
|
@@ -2003,7 +2276,7 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2003
2276
|
className: input
|
|
2004
2277
|
}
|
|
2005
2278
|
),
|
|
2006
|
-
clearable && selectedOption && !disabled && /* @__PURE__ */ (0,
|
|
2279
|
+
clearable && selectedOption && !disabled && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2007
2280
|
"button",
|
|
2008
2281
|
{
|
|
2009
2282
|
type: "button",
|
|
@@ -2016,10 +2289,10 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2016
2289
|
reset();
|
|
2017
2290
|
inputRef.current?.focus();
|
|
2018
2291
|
},
|
|
2019
|
-
children: /* @__PURE__ */ (0,
|
|
2292
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons10.XIcon, { size: 16 })
|
|
2020
2293
|
}
|
|
2021
2294
|
),
|
|
2022
|
-
/* @__PURE__ */ (0,
|
|
2295
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2023
2296
|
"button",
|
|
2024
2297
|
{
|
|
2025
2298
|
type: "button",
|
|
@@ -2034,13 +2307,13 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2034
2307
|
else openList(options);
|
|
2035
2308
|
inputRef.current?.focus();
|
|
2036
2309
|
},
|
|
2037
|
-
children: /* @__PURE__ */ (0,
|
|
2310
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons10.ChevronDownIcon, { size: 16 })
|
|
2038
2311
|
}
|
|
2039
2312
|
)
|
|
2040
2313
|
]
|
|
2041
2314
|
}
|
|
2042
2315
|
) }),
|
|
2043
|
-
/* @__PURE__ */ (0,
|
|
2316
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2044
2317
|
Popover.Content,
|
|
2045
2318
|
{
|
|
2046
2319
|
role: "presentation",
|
|
@@ -2055,19 +2328,19 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2055
2328
|
onInteractOutside: (event) => {
|
|
2056
2329
|
if (anchorRef.current?.contains(event.target)) event.preventDefault();
|
|
2057
2330
|
},
|
|
2058
|
-
children: hasOptions ? /* @__PURE__ */ (0,
|
|
2331
|
+
children: hasOptions ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2059
2332
|
"div",
|
|
2060
2333
|
{
|
|
2061
2334
|
id: listId,
|
|
2062
2335
|
role: "listbox",
|
|
2063
|
-
"aria-labelledby":
|
|
2064
|
-
"aria-label":
|
|
2336
|
+
"aria-labelledby": label7 ? labelId : void 0,
|
|
2337
|
+
"aria-label": label7 ? void 0 : ariaLabel,
|
|
2065
2338
|
children: filtered.map((option2, index) => {
|
|
2066
2339
|
const isSelected = option2.value === selectedValue;
|
|
2067
2340
|
return (
|
|
2068
2341
|
// aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
|
|
2069
2342
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
|
|
2070
|
-
/* @__PURE__ */ (0,
|
|
2343
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2071
2344
|
"div",
|
|
2072
2345
|
{
|
|
2073
2346
|
id: optionId(index),
|
|
@@ -2077,13 +2350,13 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2077
2350
|
"data-highlighted": index === activeIndex ? "" : void 0,
|
|
2078
2351
|
"data-state": isSelected ? "checked" : "unchecked",
|
|
2079
2352
|
"data-disabled": option2.disabled ? "" : void 0,
|
|
2080
|
-
className:
|
|
2353
|
+
className: item5,
|
|
2081
2354
|
onMouseDown: (event) => event.preventDefault(),
|
|
2082
2355
|
onMouseMove: () => !option2.disabled && setActiveIndex(index),
|
|
2083
2356
|
onClick: () => select(option2),
|
|
2084
2357
|
children: [
|
|
2085
2358
|
option2.label,
|
|
2086
|
-
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 }) })
|
|
2087
2360
|
]
|
|
2088
2361
|
},
|
|
2089
2362
|
option2.value
|
|
@@ -2091,33 +2364,33 @@ var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2
|
|
|
2091
2364
|
);
|
|
2092
2365
|
})
|
|
2093
2366
|
}
|
|
2094
|
-
) : /* @__PURE__ */ (0,
|
|
2367
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: empty, role: "status", children: emptyMessage })
|
|
2095
2368
|
}
|
|
2096
2369
|
) })
|
|
2097
2370
|
] }),
|
|
2098
|
-
name && /* @__PURE__ */ (0,
|
|
2099
|
-
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 })
|
|
2100
2373
|
] });
|
|
2101
2374
|
});
|
|
2102
2375
|
|
|
2103
2376
|
// src/components/DatePicker/DatePicker.tsx
|
|
2104
|
-
var
|
|
2377
|
+
var import_react34 = require("react");
|
|
2105
2378
|
var import_icons12 = require("@bestow-ui/icons");
|
|
2106
2379
|
|
|
2107
2380
|
// src/components/Popover/Popover.tsx
|
|
2108
2381
|
var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
2109
2382
|
var import_icons11 = require("@bestow-ui/icons");
|
|
2110
|
-
var
|
|
2383
|
+
var import_react33 = require("react");
|
|
2111
2384
|
|
|
2112
2385
|
// src/components/Popover/Popover.css.ts
|
|
2113
2386
|
var arrow = "_1j99p8x4";
|
|
2114
2387
|
var closeButton3 = "_1j99p8x3";
|
|
2115
2388
|
var content7 = "_1j99p8x0";
|
|
2116
|
-
var
|
|
2389
|
+
var header6 = "_1j99p8x1";
|
|
2117
2390
|
var title3 = "_1j99p8x2";
|
|
2118
2391
|
|
|
2119
2392
|
// src/components/Popover/Popover.tsx
|
|
2120
|
-
var
|
|
2393
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2121
2394
|
function Popover2({
|
|
2122
2395
|
content: content12,
|
|
2123
2396
|
children,
|
|
@@ -2137,10 +2410,10 @@ function Popover2({
|
|
|
2137
2410
|
}) {
|
|
2138
2411
|
const portal2 = usePortalProps();
|
|
2139
2412
|
const m = useMessages();
|
|
2140
|
-
const titleId = (0,
|
|
2141
|
-
return /* @__PURE__ */ (0,
|
|
2142
|
-
/* @__PURE__ */ (0,
|
|
2143
|
-
/* @__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)(
|
|
2144
2417
|
RadixPopover.Content,
|
|
2145
2418
|
{
|
|
2146
2419
|
side,
|
|
@@ -2153,12 +2426,12 @@ function Popover2({
|
|
|
2153
2426
|
className: cx(portal2.className, content7, className),
|
|
2154
2427
|
style: { ...portal2.style, ...style },
|
|
2155
2428
|
children: [
|
|
2156
|
-
(title6 || showClose) && /* @__PURE__ */ (0,
|
|
2157
|
-
title6 && /* @__PURE__ */ (0,
|
|
2158
|
-
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 }) })
|
|
2159
2432
|
] }),
|
|
2160
2433
|
content12,
|
|
2161
|
-
showArrow && /* @__PURE__ */ (0,
|
|
2434
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
|
|
2162
2435
|
]
|
|
2163
2436
|
}
|
|
2164
2437
|
) })
|
|
@@ -2167,11 +2440,11 @@ function Popover2({
|
|
|
2167
2440
|
var PopoverClose = RadixPopover.Close;
|
|
2168
2441
|
|
|
2169
2442
|
// src/components/DatePicker/DatePicker.tsx
|
|
2170
|
-
var
|
|
2171
|
-
var sanitize2 = (
|
|
2443
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2444
|
+
var sanitize2 = (input6) => input6.replace(/\D/g, "").slice(0, 8);
|
|
2172
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)}`;
|
|
2173
2446
|
var isDigit3 = (char) => /\d/.test(char);
|
|
2174
|
-
var DatePicker = /* @__PURE__ */ (0,
|
|
2447
|
+
var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
2175
2448
|
function DatePicker2(props, ref) {
|
|
2176
2449
|
const {
|
|
2177
2450
|
value: value4,
|
|
@@ -2197,17 +2470,17 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2197
2470
|
id,
|
|
2198
2471
|
className
|
|
2199
2472
|
} = props;
|
|
2200
|
-
const inputRef = (0,
|
|
2473
|
+
const inputRef = (0, import_react34.useRef)(null);
|
|
2201
2474
|
const m = useMessages();
|
|
2202
|
-
const
|
|
2475
|
+
const label7 = labelProp ?? m.date ?? "\uB0A0\uC9DC";
|
|
2203
2476
|
const calendarLabel = calendarLabelProp ?? m.openCalendar ?? "\uB2EC\uB825 \uC5F4\uAE30";
|
|
2204
2477
|
const invalidText = invalidTextProp ?? m.dateInvalid ?? "\uC62C\uBC14\uB978 \uB0A0\uC9DC\uAC00 \uC544\uB2C8\uC5D0\uC694.";
|
|
2205
2478
|
const unavailableText = unavailableTextProp ?? m.dateUnavailable ?? "\uACE0\uB97C \uC218 \uC5C6\uB294 \uB0A0\uC9DC\uC608\uC694.";
|
|
2206
2479
|
const incompleteText = incompleteTextProp ?? m.dateIncomplete ?? "\uB0A0\uC9DC\uB97C YYYY-MM-DD \uD615\uC2DD\uC73C\uB85C \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
|
|
2207
|
-
const [open, setOpen] = (0,
|
|
2208
|
-
const [touched, setTouched] = (0,
|
|
2480
|
+
const [open, setOpen] = (0, import_react34.useState)(false);
|
|
2481
|
+
const [touched, setTouched] = (0, import_react34.useState)(false);
|
|
2209
2482
|
const isControlled = "value" in props;
|
|
2210
|
-
const lastEmitted = (0,
|
|
2483
|
+
const lastEmitted = (0, import_react34.useRef)(isControlled ? value4 ?? "" : defaultValue ?? "");
|
|
2211
2484
|
const minDate = parseISODate(min);
|
|
2212
2485
|
const maxDate = parseISODate(max);
|
|
2213
2486
|
const toIso = (digits) => digits.length === 8 ? `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}` : "";
|
|
@@ -2232,7 +2505,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2232
2505
|
});
|
|
2233
2506
|
const textIso = toIso(field3.raw);
|
|
2234
2507
|
const { setRaw } = field3;
|
|
2235
|
-
(0,
|
|
2508
|
+
(0, import_react34.useEffect)(() => {
|
|
2236
2509
|
if (!isControlled) return;
|
|
2237
2510
|
const next = value4 ?? "";
|
|
2238
2511
|
lastEmitted.current = next;
|
|
@@ -2247,13 +2520,13 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2247
2520
|
const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field3.raw.length > 0 ? incompleteText : null;
|
|
2248
2521
|
const showAuto = autoError !== null && error === void 0;
|
|
2249
2522
|
const selectedIso = date && !isUnavailable(date) ? textIso : "";
|
|
2250
|
-
return /* @__PURE__ */ (0,
|
|
2251
|
-
/* @__PURE__ */ (0,
|
|
2523
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
2524
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2252
2525
|
TextField,
|
|
2253
2526
|
{
|
|
2254
2527
|
ref: mergeRefs(ref, inputRef),
|
|
2255
2528
|
id,
|
|
2256
|
-
label:
|
|
2529
|
+
label: label7,
|
|
2257
2530
|
placeholder,
|
|
2258
2531
|
inputMode: "numeric",
|
|
2259
2532
|
autoComplete: "off",
|
|
@@ -2267,7 +2540,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2267
2540
|
disabled,
|
|
2268
2541
|
fullWidth,
|
|
2269
2542
|
rootClassName: className,
|
|
2270
|
-
endAdornment: /* @__PURE__ */ (0,
|
|
2543
|
+
endAdornment: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2271
2544
|
Popover2,
|
|
2272
2545
|
{
|
|
2273
2546
|
open,
|
|
@@ -2276,7 +2549,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2276
2549
|
align: "end",
|
|
2277
2550
|
"aria-label": m.calendar ?? "\uB2EC\uB825",
|
|
2278
2551
|
onOpenAutoFocus: (event) => event.preventDefault(),
|
|
2279
|
-
content: /* @__PURE__ */ (0,
|
|
2552
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2280
2553
|
Calendar,
|
|
2281
2554
|
{
|
|
2282
2555
|
value: selectedIso,
|
|
@@ -2293,64 +2566,41 @@ var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
|
2293
2566
|
initialFocus: true
|
|
2294
2567
|
}
|
|
2295
2568
|
),
|
|
2296
|
-
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, {}) })
|
|
2297
2570
|
}
|
|
2298
2571
|
)
|
|
2299
2572
|
}
|
|
2300
2573
|
),
|
|
2301
|
-
name && /* @__PURE__ */ (0,
|
|
2574
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", { type: "hidden", name, value: selectedIso })
|
|
2302
2575
|
] });
|
|
2303
2576
|
}
|
|
2304
2577
|
);
|
|
2305
2578
|
|
|
2306
|
-
// src/components/Divider/Divider.tsx
|
|
2307
|
-
var import_react28 = require("react");
|
|
2308
|
-
|
|
2309
|
-
// src/components/Divider/Divider.css.ts
|
|
2310
|
-
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2311
|
-
var divider = /* @__PURE__ */ (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
2312
|
-
var labeled = "_1t3gq8v3";
|
|
2313
|
-
var line = "_1t3gq8v4";
|
|
2314
|
-
|
|
2315
|
-
// src/components/Divider/Divider.tsx
|
|
2316
|
-
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2317
|
-
var Divider = /* @__PURE__ */ (0, import_react28.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
|
|
2318
|
-
if (children && orientation === "horizontal") {
|
|
2319
|
-
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className: cx(labeled, className), ...rest, children: [
|
|
2320
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: line, "aria-hidden": true }),
|
|
2321
|
-
children,
|
|
2322
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: line, "aria-hidden": true })
|
|
2323
|
-
] });
|
|
2324
|
-
}
|
|
2325
|
-
const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
|
|
2326
|
-
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
|
|
2327
|
-
});
|
|
2328
|
-
|
|
2329
2579
|
// src/components/Drawer/Drawer.tsx
|
|
2330
2580
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
2331
2581
|
var import_icons13 = require("@bestow-ui/icons");
|
|
2332
2582
|
|
|
2333
2583
|
// src/components/Drawer/Drawer.css.ts
|
|
2334
|
-
var
|
|
2584
|
+
var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2335
2585
|
var body3 = "nmobyvy";
|
|
2336
2586
|
var closeButton4 = "nmobyvx";
|
|
2337
|
-
var content8 = /* @__PURE__ */ (0,
|
|
2338
|
-
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";
|
|
2339
2589
|
var footer3 = "nmobyvz";
|
|
2340
|
-
var
|
|
2590
|
+
var header7 = "nmobyvt";
|
|
2341
2591
|
var headings2 = "nmobyvu";
|
|
2342
2592
|
var overlay2 = "nmobyv0";
|
|
2343
2593
|
var title4 = "nmobyvv";
|
|
2344
2594
|
|
|
2345
2595
|
// src/components/Drawer/Drawer.tsx
|
|
2346
|
-
var
|
|
2596
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2347
2597
|
function Drawer({
|
|
2348
2598
|
open,
|
|
2349
2599
|
defaultOpen,
|
|
2350
2600
|
onOpenChange,
|
|
2351
2601
|
trigger: trigger4,
|
|
2352
2602
|
title: title6,
|
|
2353
|
-
description:
|
|
2603
|
+
description: description8,
|
|
2354
2604
|
children,
|
|
2355
2605
|
footer: footer6,
|
|
2356
2606
|
side,
|
|
@@ -2362,11 +2612,11 @@ function Drawer({
|
|
|
2362
2612
|
const portal2 = usePortalProps();
|
|
2363
2613
|
const m = useMessages();
|
|
2364
2614
|
const focus = useReturnFocus(Boolean(trigger4));
|
|
2365
|
-
return /* @__PURE__ */ (0,
|
|
2366
|
-
trigger4 && /* @__PURE__ */ (0,
|
|
2367
|
-
/* @__PURE__ */ (0,
|
|
2368
|
-
/* @__PURE__ */ (0,
|
|
2369
|
-
/* @__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)(
|
|
2370
2620
|
Dialog2.Content,
|
|
2371
2621
|
{
|
|
2372
2622
|
className: cx(portal2.className, content8({ side, size }), className),
|
|
@@ -2375,17 +2625,17 @@ function Drawer({
|
|
|
2375
2625
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
2376
2626
|
onOpenAutoFocus: focus.onOpenAutoFocus,
|
|
2377
2627
|
onCloseAutoFocus: focus.onCloseAutoFocus,
|
|
2378
|
-
...
|
|
2628
|
+
...description8 ? {} : { "aria-describedby": void 0 },
|
|
2379
2629
|
children: [
|
|
2380
|
-
/* @__PURE__ */ (0,
|
|
2381
|
-
/* @__PURE__ */ (0,
|
|
2382
|
-
/* @__PURE__ */ (0,
|
|
2383
|
-
|
|
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 })
|
|
2384
2634
|
] }),
|
|
2385
|
-
!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, {}) }) })
|
|
2386
2636
|
] }),
|
|
2387
|
-
children && /* @__PURE__ */ (0,
|
|
2388
|
-
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 })
|
|
2389
2639
|
]
|
|
2390
2640
|
}
|
|
2391
2641
|
)
|
|
@@ -2394,28 +2644,300 @@ function Drawer({
|
|
|
2394
2644
|
}
|
|
2395
2645
|
var DrawerClose = Dialog2.Close;
|
|
2396
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
|
+
|
|
2397
2913
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
2398
2914
|
var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
2399
|
-
var
|
|
2915
|
+
var import_icons15 = require("@bestow-ui/icons");
|
|
2916
|
+
var import_react37 = require("react");
|
|
2400
2917
|
|
|
2401
2918
|
// src/components/DropdownMenu/DropdownMenu.css.ts
|
|
2402
2919
|
var content9 = "_1d7ahux0";
|
|
2403
2920
|
var danger = "_1d7ahux2";
|
|
2404
2921
|
var icon5 = "_1d7ahux3";
|
|
2405
|
-
var
|
|
2406
|
-
var
|
|
2922
|
+
var indicator2 = "_1d7ahux7";
|
|
2923
|
+
var indicatorInner = "_1d7ahux8";
|
|
2924
|
+
var item7 = "_1d7ahux1";
|
|
2925
|
+
var label3 = "_1d7ahux5";
|
|
2926
|
+
var radioDot = "_1d7ahux9";
|
|
2407
2927
|
var separator2 = "_1d7ahux6";
|
|
2408
2928
|
var shortcut = "_1d7ahux4";
|
|
2929
|
+
var subChevron = "_1d7ahuxb";
|
|
2930
|
+
var subTrigger = "_1d7ahuxa";
|
|
2409
2931
|
|
|
2410
2932
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
2411
|
-
var
|
|
2933
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2412
2934
|
var DropdownMenu = RadixMenu.Root;
|
|
2413
2935
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
2414
2936
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
2415
|
-
var DropdownMenuContent = /* @__PURE__ */ (0,
|
|
2937
|
+
var DropdownMenuContent = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2416
2938
|
function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
|
|
2417
2939
|
const portal2 = usePortalProps();
|
|
2418
|
-
return /* @__PURE__ */ (0,
|
|
2940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2419
2941
|
RadixMenu.Content,
|
|
2420
2942
|
{
|
|
2421
2943
|
ref,
|
|
@@ -2427,35 +2949,251 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react29.forwardRef)(
|
|
|
2427
2949
|
style: { ...portal2.style, ...style },
|
|
2428
2950
|
...rest
|
|
2429
2951
|
}
|
|
2430
|
-
) });
|
|
2431
|
-
}
|
|
2432
|
-
);
|
|
2433
|
-
var DropdownMenuItem = /* @__PURE__ */ (0,
|
|
2434
|
-
function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
|
|
2435
|
-
return /* @__PURE__ */ (0,
|
|
2436
|
-
icon7 && /* @__PURE__ */ (0,
|
|
2437
|
-
children,
|
|
2438
|
-
shortcut2 && /* @__PURE__ */ (0,
|
|
2952
|
+
) });
|
|
2953
|
+
}
|
|
2954
|
+
);
|
|
2955
|
+
var DropdownMenuItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2956
|
+
function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
|
|
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 }),
|
|
2959
|
+
children,
|
|
2960
|
+
shortcut2 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
|
|
2961
|
+
] });
|
|
2962
|
+
}
|
|
2963
|
+
);
|
|
2964
|
+
var DropdownMenuLabel = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2965
|
+
function DropdownMenuLabel2({ className, ...rest }, ref) {
|
|
2966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Label, { ref, className: cx(label3, className), ...rest });
|
|
2967
|
+
}
|
|
2968
|
+
);
|
|
2969
|
+
var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2970
|
+
function DropdownMenuSeparator2({ className, ...rest }, ref) {
|
|
2971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
|
|
2972
|
+
}
|
|
2973
|
+
);
|
|
2974
|
+
var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2975
|
+
function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
|
|
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 }) }) }),
|
|
2978
|
+
children
|
|
2979
|
+
] });
|
|
2980
|
+
}
|
|
2981
|
+
);
|
|
2982
|
+
var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
|
|
2983
|
+
var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2984
|
+
function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
|
|
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 }) }) }),
|
|
2987
|
+
children
|
|
2988
|
+
] });
|
|
2989
|
+
}
|
|
2990
|
+
);
|
|
2991
|
+
var DropdownMenuSub = RadixMenu.Sub;
|
|
2992
|
+
var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
2993
|
+
function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
|
|
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 }),
|
|
2996
|
+
children,
|
|
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 }) })
|
|
2998
|
+
] });
|
|
2999
|
+
}
|
|
3000
|
+
);
|
|
3001
|
+
var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react37.forwardRef)(
|
|
3002
|
+
function DropdownMenuSubContent2({ className, style, sideOffset = 4, alignOffset = -5, collisionPadding = 8, ...rest }, ref) {
|
|
3003
|
+
const portal2 = usePortalProps();
|
|
3004
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3005
|
+
RadixMenu.SubContent,
|
|
3006
|
+
{
|
|
3007
|
+
ref,
|
|
3008
|
+
sideOffset,
|
|
3009
|
+
alignOffset,
|
|
3010
|
+
collisionPadding,
|
|
3011
|
+
className: cx(portal2.className, content9, className),
|
|
3012
|
+
style: { ...portal2.style, ...style },
|
|
3013
|
+
...rest
|
|
3014
|
+
}
|
|
3015
|
+
) });
|
|
3016
|
+
}
|
|
3017
|
+
);
|
|
3018
|
+
|
|
3019
|
+
// src/components/NumberInput/NumberInput.tsx
|
|
3020
|
+
var import_react38 = require("react");
|
|
3021
|
+
var import_icons16 = require("@bestow-ui/icons");
|
|
3022
|
+
|
|
3023
|
+
// src/components/NumberInput/NumberInput.css.ts
|
|
3024
|
+
var import_createRuntimeFn19 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3025
|
+
var end = "_1vq2qhv1";
|
|
3026
|
+
var input4 = "_1vq2qhv0";
|
|
3027
|
+
var stepper = /* @__PURE__ */ (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "_1vq2qhv3", variantClassNames: { size: { sm: "_1vq2qhv4", md: "_1vq2qhv5", lg: "_1vq2qhv6" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
3028
|
+
var unit = "_1vq2qhv2";
|
|
3029
|
+
|
|
3030
|
+
// src/components/NumberInput/NumberInput.tsx
|
|
3031
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3032
|
+
var MAX_DIGITS2 = 15;
|
|
3033
|
+
var isMeaningful = (char) => /[\d.-]/.test(char);
|
|
3034
|
+
var decimalsOf = (n) => Number.isFinite(n) ? String(n).split(".")[1]?.length ?? 0 : 0;
|
|
3035
|
+
var parse = (raw) => /\d/.test(raw) ? Number(raw) : null;
|
|
3036
|
+
var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
|
|
3037
|
+
function NumberInput2(props, ref) {
|
|
3038
|
+
const {
|
|
3039
|
+
value: value4,
|
|
3040
|
+
defaultValue,
|
|
3041
|
+
onValueChange,
|
|
3042
|
+
min,
|
|
3043
|
+
max,
|
|
3044
|
+
step: step2 = 1,
|
|
3045
|
+
largeStep = step2 * 10,
|
|
3046
|
+
precision: precisionProp,
|
|
3047
|
+
unit: unit2,
|
|
3048
|
+
thousandSeparator = true,
|
|
3049
|
+
hideStepper,
|
|
3050
|
+
size,
|
|
3051
|
+
disabled,
|
|
3052
|
+
readOnly,
|
|
3053
|
+
id,
|
|
3054
|
+
name,
|
|
3055
|
+
onKeyDown,
|
|
3056
|
+
onBlur,
|
|
3057
|
+
className,
|
|
3058
|
+
...rest
|
|
3059
|
+
} = props;
|
|
3060
|
+
const isControlled = "value" in props;
|
|
3061
|
+
const m = useMessages();
|
|
3062
|
+
const inputRef = (0, import_react38.useRef)(null);
|
|
3063
|
+
const generatedId = (0, import_react38.useId)();
|
|
3064
|
+
const inputId = id ?? generatedId;
|
|
3065
|
+
const precision = Math.max(0, precisionProp ?? decimalsOf(step2));
|
|
3066
|
+
const allowNegative = min === void 0 || min < 0;
|
|
3067
|
+
const round = (n) => Number(n.toFixed(precision));
|
|
3068
|
+
const clamp = (n) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, round(n)));
|
|
3069
|
+
const toRaw = (n) => n === null || n === void 0 || !Number.isFinite(n) ? "" : String(round(n));
|
|
3070
|
+
const sanitize4 = (input6) => {
|
|
3071
|
+
const negative = allowNegative && input6.trimStart().startsWith("-");
|
|
3072
|
+
const [intPart = "", ...fracParts] = input6.replace(/[^\d.]/g, "").split(".");
|
|
3073
|
+
const int = intPart.replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS2);
|
|
3074
|
+
const hasDot = precision > 0 && fracParts.length > 0;
|
|
3075
|
+
const frac = hasDot ? fracParts.join("").slice(0, precision) : "";
|
|
3076
|
+
return `${negative ? "-" : ""}${int}${hasDot ? `.${frac}` : ""}`;
|
|
3077
|
+
};
|
|
3078
|
+
const format2 = (raw) => {
|
|
3079
|
+
if (!thousandSeparator) return raw;
|
|
3080
|
+
const [, sign = "", int = "", rest2 = ""] = raw.match(/^(-?)(\d*)(.*)$/) ?? [];
|
|
3081
|
+
return `${sign}${int ? Number(int).toLocaleString("ko-KR") : ""}${rest2}`;
|
|
3082
|
+
};
|
|
3083
|
+
const lastEmitted = (0, import_react38.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
|
|
3084
|
+
const emit = (next) => {
|
|
3085
|
+
if (next === lastEmitted.current) return;
|
|
3086
|
+
lastEmitted.current = next;
|
|
3087
|
+
onValueChange?.(next);
|
|
3088
|
+
};
|
|
3089
|
+
const field3 = useFormattedInput({
|
|
3090
|
+
isControlled: false,
|
|
3091
|
+
value: void 0,
|
|
3092
|
+
defaultValue: toRaw(isControlled ? value4 : defaultValue),
|
|
3093
|
+
onValueChange: (raw) => emit(parse(raw)),
|
|
3094
|
+
sanitize: sanitize4,
|
|
3095
|
+
format: format2,
|
|
3096
|
+
isMeaningful,
|
|
3097
|
+
inputRef
|
|
3098
|
+
});
|
|
3099
|
+
const { setRaw } = field3;
|
|
3100
|
+
(0, import_react38.useEffect)(() => {
|
|
3101
|
+
if (!isControlled) return;
|
|
3102
|
+
const next = value4 ?? null;
|
|
3103
|
+
lastEmitted.current = next;
|
|
3104
|
+
if (parse(field3.raw) !== next) setRaw(toRaw(next));
|
|
3105
|
+
}, [value4]);
|
|
3106
|
+
const current2 = parse(field3.raw);
|
|
3107
|
+
const setValue = (next) => {
|
|
3108
|
+
setRaw(toRaw(next));
|
|
3109
|
+
emit(next);
|
|
3110
|
+
};
|
|
3111
|
+
const stepBy = (delta) => {
|
|
3112
|
+
if (disabled || readOnly) return;
|
|
3113
|
+
setValue(current2 === null ? clamp(0) : clamp(current2 + delta));
|
|
3114
|
+
};
|
|
3115
|
+
const canDecrement = !disabled && !readOnly && (current2 === null || min === void 0 || current2 > min);
|
|
3116
|
+
const canIncrement = !disabled && !readOnly && (current2 === null || max === void 0 || current2 < max);
|
|
3117
|
+
const handleKeyDown = (event) => {
|
|
3118
|
+
onKeyDown?.(event);
|
|
3119
|
+
if (event.defaultPrevented) return;
|
|
3120
|
+
const deltas = {
|
|
3121
|
+
ArrowUp: step2,
|
|
3122
|
+
ArrowDown: -step2,
|
|
3123
|
+
PageUp: largeStep,
|
|
3124
|
+
PageDown: -largeStep
|
|
3125
|
+
};
|
|
3126
|
+
if (event.key in deltas) {
|
|
3127
|
+
event.preventDefault();
|
|
3128
|
+
stepBy(deltas[event.key]);
|
|
3129
|
+
} else if (event.key === "Home" && min !== void 0 && !readOnly) {
|
|
3130
|
+
event.preventDefault();
|
|
3131
|
+
setValue(min);
|
|
3132
|
+
} else if (event.key === "End" && max !== void 0 && !readOnly) {
|
|
3133
|
+
event.preventDefault();
|
|
3134
|
+
setValue(max);
|
|
3135
|
+
} else {
|
|
3136
|
+
field3.onKeyDown(event);
|
|
3137
|
+
}
|
|
3138
|
+
};
|
|
3139
|
+
const stepper2 = (direction) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3140
|
+
IconButton,
|
|
3141
|
+
{
|
|
3142
|
+
size: "sm",
|
|
3143
|
+
"aria-label": direction < 0 ? m.decrement ?? "\uC904\uC774\uAE30" : m.increment ?? "\uB298\uB9AC\uAE30",
|
|
3144
|
+
"aria-controls": inputId,
|
|
3145
|
+
tabIndex: -1,
|
|
3146
|
+
disabled: direction < 0 ? !canDecrement : !canIncrement,
|
|
3147
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
3148
|
+
onClick: () => stepBy(direction * step2),
|
|
3149
|
+
className: stepper({ size }),
|
|
3150
|
+
children: direction < 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons16.MinusIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons16.PlusIcon, {})
|
|
3151
|
+
}
|
|
3152
|
+
);
|
|
3153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
3154
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3155
|
+
TextField,
|
|
3156
|
+
{
|
|
3157
|
+
ref: mergeRefs(ref, inputRef),
|
|
3158
|
+
id: inputId,
|
|
3159
|
+
role: "spinbutton",
|
|
3160
|
+
inputMode: allowNegative ? "text" : precision > 0 ? "decimal" : "numeric",
|
|
3161
|
+
autoComplete: "off",
|
|
3162
|
+
"aria-valuenow": current2 ?? void 0,
|
|
3163
|
+
"aria-valuemin": min,
|
|
3164
|
+
"aria-valuemax": max,
|
|
3165
|
+
"aria-valuetext": current2 === null ? void 0 : `${field3.display}${unit2 ?? ""}`,
|
|
3166
|
+
value: field3.display,
|
|
3167
|
+
onChange: field3.onChange,
|
|
3168
|
+
onKeyDown: handleKeyDown,
|
|
3169
|
+
onBlur: (event) => {
|
|
3170
|
+
if (current2 !== null && clamp(current2) !== current2) setValue(clamp(current2));
|
|
3171
|
+
else if (current2 === null && field3.raw !== "") setRaw("");
|
|
3172
|
+
onBlur?.(event);
|
|
3173
|
+
},
|
|
3174
|
+
size,
|
|
3175
|
+
disabled,
|
|
3176
|
+
readOnly,
|
|
3177
|
+
startAdornment: hideStepper ? void 0 : stepper2(-1),
|
|
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 }),
|
|
3180
|
+
!hideStepper && stepper2(1)
|
|
3181
|
+
] }) : void 0,
|
|
3182
|
+
className: cx(input4, className),
|
|
3183
|
+
...rest
|
|
3184
|
+
}
|
|
3185
|
+
),
|
|
3186
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) })
|
|
2439
3187
|
] });
|
|
2440
3188
|
}
|
|
2441
3189
|
);
|
|
2442
|
-
var DropdownMenuLabel = /* @__PURE__ */ (0, import_react29.forwardRef)(
|
|
2443
|
-
function DropdownMenuLabel2({ className, ...rest }, ref) {
|
|
2444
|
-
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
|
|
2445
|
-
}
|
|
2446
|
-
);
|
|
2447
|
-
var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react29.forwardRef)(
|
|
2448
|
-
function DropdownMenuSeparator2({ className, ...rest }, ref) {
|
|
2449
|
-
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
|
|
2450
|
-
}
|
|
2451
|
-
);
|
|
2452
3190
|
|
|
2453
3191
|
// src/components/Pagination/Pagination.tsx
|
|
2454
|
-
var
|
|
2455
|
-
var
|
|
3192
|
+
var import_icons17 = require("@bestow-ui/icons");
|
|
3193
|
+
var import_react39 = require("react");
|
|
2456
3194
|
|
|
2457
3195
|
// src/components/Pagination/getPaginationItems.ts
|
|
2458
|
-
var range = (start,
|
|
3196
|
+
var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
|
|
2459
3197
|
function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount = 1) {
|
|
2460
3198
|
if (totalPages < 1) return [];
|
|
2461
3199
|
const startPages = range(1, Math.min(boundaryCount, totalPages));
|
|
@@ -2479,14 +3217,14 @@ function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount =
|
|
|
2479
3217
|
}
|
|
2480
3218
|
|
|
2481
3219
|
// src/components/Pagination/Pagination.css.ts
|
|
2482
|
-
var
|
|
3220
|
+
var import_createRuntimeFn20 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2483
3221
|
var ellipsis = "_1iraoak4";
|
|
2484
|
-
var
|
|
2485
|
-
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";
|
|
2486
3224
|
|
|
2487
3225
|
// src/components/Pagination/Pagination.tsx
|
|
2488
|
-
var
|
|
2489
|
-
var Pagination = /* @__PURE__ */ (0,
|
|
3226
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3227
|
+
var Pagination = /* @__PURE__ */ (0, import_react39.forwardRef)(function Pagination2({
|
|
2490
3228
|
totalPages,
|
|
2491
3229
|
page: pageProp,
|
|
2492
3230
|
defaultPage = 1,
|
|
@@ -2499,7 +3237,7 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2499
3237
|
"aria-label": ariaLabelProp,
|
|
2500
3238
|
...rest
|
|
2501
3239
|
}, ref) {
|
|
2502
|
-
const [uncontrolledPage, setUncontrolledPage] = (0,
|
|
3240
|
+
const [uncontrolledPage, setUncontrolledPage] = (0, import_react39.useState)(defaultPage);
|
|
2503
3241
|
const m = useMessages();
|
|
2504
3242
|
const ariaLabel = ariaLabelProp ?? m.pagination ?? "\uD398\uC774\uC9C0 \uD0D0\uC0C9";
|
|
2505
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`);
|
|
@@ -2510,9 +3248,9 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2510
3248
|
if (pageProp === void 0) setUncontrolledPage(next);
|
|
2511
3249
|
onPageChange?.(next);
|
|
2512
3250
|
};
|
|
2513
|
-
const itemClass =
|
|
2514
|
-
return /* @__PURE__ */ (0,
|
|
2515
|
-
/* @__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)(
|
|
2516
3254
|
"button",
|
|
2517
3255
|
{
|
|
2518
3256
|
type: "button",
|
|
@@ -2520,23 +3258,23 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2520
3258
|
"aria-label": getItemLabel("previous", page - 1),
|
|
2521
3259
|
disabled: page <= 1,
|
|
2522
3260
|
onClick: () => goTo(page - 1),
|
|
2523
|
-
children: /* @__PURE__ */ (0,
|
|
3261
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons17.ChevronLeftIcon, { size: 16 })
|
|
2524
3262
|
}
|
|
2525
3263
|
) }),
|
|
2526
3264
|
getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
|
|
2527
|
-
(
|
|
3265
|
+
(item10) => typeof item10 === "number" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2528
3266
|
"button",
|
|
2529
3267
|
{
|
|
2530
3268
|
type: "button",
|
|
2531
3269
|
className: itemClass,
|
|
2532
|
-
"aria-label": getItemLabel("page",
|
|
2533
|
-
"aria-current":
|
|
2534
|
-
onClick: () => goTo(
|
|
2535
|
-
children:
|
|
3270
|
+
"aria-label": getItemLabel("page", item10),
|
|
3271
|
+
"aria-current": item10 === page ? "page" : void 0,
|
|
3272
|
+
onClick: () => goTo(item10),
|
|
3273
|
+
children: item10
|
|
2536
3274
|
}
|
|
2537
|
-
) },
|
|
3275
|
+
) }, item10) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item10)
|
|
2538
3276
|
),
|
|
2539
|
-
/* @__PURE__ */ (0,
|
|
3277
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2540
3278
|
"button",
|
|
2541
3279
|
{
|
|
2542
3280
|
type: "button",
|
|
@@ -2544,21 +3282,21 @@ var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Paginat
|
|
|
2544
3282
|
"aria-label": getItemLabel("next", page + 1),
|
|
2545
3283
|
disabled: page >= totalPages,
|
|
2546
3284
|
onClick: () => goTo(page + 1),
|
|
2547
|
-
children: /* @__PURE__ */ (0,
|
|
3285
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons17.ChevronRightIcon, { size: 16 })
|
|
2548
3286
|
}
|
|
2549
3287
|
) })
|
|
2550
3288
|
] }) });
|
|
2551
3289
|
});
|
|
2552
3290
|
|
|
2553
3291
|
// src/components/PhoneNumberInput/PhoneNumberInput.tsx
|
|
2554
|
-
var
|
|
2555
|
-
var
|
|
2556
|
-
var sanitize3 = (
|
|
2557
|
-
const digits =
|
|
3292
|
+
var import_react40 = require("react");
|
|
3293
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3294
|
+
var sanitize3 = (input6) => {
|
|
3295
|
+
const digits = input6.replace(/\D/g, "");
|
|
2558
3296
|
return digits.slice(0, phoneNumberMaxDigits(digits));
|
|
2559
3297
|
};
|
|
2560
3298
|
var isDigit4 = (char) => /\d/.test(char);
|
|
2561
|
-
var PhoneNumberInput = /* @__PURE__ */ (0,
|
|
3299
|
+
var PhoneNumberInput = /* @__PURE__ */ (0, import_react40.forwardRef)(
|
|
2562
3300
|
function PhoneNumberInput2(props, ref) {
|
|
2563
3301
|
const {
|
|
2564
3302
|
value: value4,
|
|
@@ -2569,9 +3307,9 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react31.forwardRef)(
|
|
|
2569
3307
|
onKeyDown,
|
|
2570
3308
|
...rest
|
|
2571
3309
|
} = props;
|
|
2572
|
-
const inputRef = (0,
|
|
3310
|
+
const inputRef = (0, import_react40.useRef)(null);
|
|
2573
3311
|
const m = useMessages();
|
|
2574
|
-
const
|
|
3312
|
+
const label7 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
|
|
2575
3313
|
const field3 = useFormattedInput({
|
|
2576
3314
|
isControlled: "value" in props,
|
|
2577
3315
|
value: value4,
|
|
@@ -2582,11 +3320,11 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react31.forwardRef)(
|
|
|
2582
3320
|
isMeaningful: isDigit4,
|
|
2583
3321
|
inputRef
|
|
2584
3322
|
});
|
|
2585
|
-
return /* @__PURE__ */ (0,
|
|
3323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2586
3324
|
TextField,
|
|
2587
3325
|
{
|
|
2588
3326
|
ref: mergeRefs(ref, inputRef),
|
|
2589
|
-
label:
|
|
3327
|
+
label: label7,
|
|
2590
3328
|
placeholder,
|
|
2591
3329
|
type: "tel",
|
|
2592
3330
|
inputMode: "tel",
|
|
@@ -2603,91 +3341,28 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react31.forwardRef)(
|
|
|
2603
3341
|
}
|
|
2604
3342
|
);
|
|
2605
3343
|
|
|
2606
|
-
// src/components/Progress/Progress.tsx
|
|
2607
|
-
var import_react32 = require("react");
|
|
2608
|
-
|
|
2609
|
-
// src/components/Progress/Progress.css.ts
|
|
2610
|
-
var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2611
|
-
var header7 = "_1tvkq001";
|
|
2612
|
-
var indicator = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
|
|
2613
|
-
var label3 = "_1tvkq002";
|
|
2614
|
-
var root7 = "_1tvkq000";
|
|
2615
|
-
var track = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
2616
|
-
var value2 = "_1tvkq003";
|
|
2617
|
-
|
|
2618
|
-
// src/components/Progress/Progress.tsx
|
|
2619
|
-
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2620
|
-
var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
|
|
2621
|
-
var Progress = /* @__PURE__ */ (0, import_react32.forwardRef)(function Progress2({
|
|
2622
|
-
value: value4,
|
|
2623
|
-
max = 100,
|
|
2624
|
-
label: label6,
|
|
2625
|
-
"aria-label": ariaLabel,
|
|
2626
|
-
showValue,
|
|
2627
|
-
formatValue = defaultFormat,
|
|
2628
|
-
size,
|
|
2629
|
-
color,
|
|
2630
|
-
className,
|
|
2631
|
-
...rest
|
|
2632
|
-
}, ref) {
|
|
2633
|
-
const labelId = (0, import_react32.useId)();
|
|
2634
|
-
const isIndeterminate = value4 === void 0 || value4 === null;
|
|
2635
|
-
const safeMax = max > 0 ? max : 100;
|
|
2636
|
-
const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
|
|
2637
|
-
const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
|
|
2638
|
-
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref, className: cx(root7, className), ...rest, children: [
|
|
2639
|
-
(label6 || showValue && valueText) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: header7, children: [
|
|
2640
|
-
label6 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id: labelId, className: label3, children: label6 }),
|
|
2641
|
-
showValue && valueText && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: value2, "aria-hidden": true, children: valueText })
|
|
2642
|
-
] }),
|
|
2643
|
-
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2644
|
-
"div",
|
|
2645
|
-
{
|
|
2646
|
-
role: "progressbar",
|
|
2647
|
-
"aria-labelledby": label6 ? labelId : void 0,
|
|
2648
|
-
"aria-label": label6 ? void 0 : ariaLabel,
|
|
2649
|
-
"aria-valuemin": 0,
|
|
2650
|
-
"aria-valuemax": safeMax,
|
|
2651
|
-
"aria-valuenow": isIndeterminate ? void 0 : clamped,
|
|
2652
|
-
"aria-valuetext": valueText,
|
|
2653
|
-
className: track({ size }),
|
|
2654
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2655
|
-
"div",
|
|
2656
|
-
{
|
|
2657
|
-
className: indicator({ color }),
|
|
2658
|
-
"data-state": isIndeterminate ? "indeterminate" : clamped >= safeMax ? "complete" : "loading",
|
|
2659
|
-
style: isIndeterminate ? void 0 : { width: `${clamped / safeMax * 100}%` }
|
|
2660
|
-
}
|
|
2661
|
-
)
|
|
2662
|
-
}
|
|
2663
|
-
)
|
|
2664
|
-
] });
|
|
2665
|
-
});
|
|
2666
|
-
|
|
2667
3344
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
2668
|
-
var
|
|
2669
|
-
var import_react33 = require("react");
|
|
3345
|
+
var import_react41 = require("react");
|
|
2670
3346
|
|
|
2671
3347
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
2672
|
-
var
|
|
2673
|
-
var
|
|
2674
|
-
var groupLabel = "
|
|
2675
|
-
var
|
|
2676
|
-
var
|
|
2677
|
-
var
|
|
2678
|
-
var
|
|
2679
|
-
var
|
|
2680
|
-
var text = "_1w9iwjmb";
|
|
3348
|
+
var import_createRuntimeFn21 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3349
|
+
var description5 = "_1w9iwjmc";
|
|
3350
|
+
var groupLabel = "_1w9iwjmd";
|
|
3351
|
+
var items = /* @__PURE__ */ (0, import_createRuntimeFn21.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
3352
|
+
var labelText = "_1w9iwjmb";
|
|
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: [] });
|
|
3355
|
+
var text = "_1w9iwjma";
|
|
2681
3356
|
|
|
2682
3357
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
2683
|
-
var
|
|
2684
|
-
var
|
|
3358
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3359
|
+
var RadioGroup2 = /* @__PURE__ */ (0, import_react41.forwardRef)(function RadioGroup3(props, ref) {
|
|
2685
3360
|
const {
|
|
2686
3361
|
options,
|
|
2687
3362
|
value: value4,
|
|
2688
3363
|
defaultValue,
|
|
2689
3364
|
onValueChange,
|
|
2690
|
-
label:
|
|
3365
|
+
label: label7,
|
|
2691
3366
|
helperText: helperText3,
|
|
2692
3367
|
error,
|
|
2693
3368
|
orientation = "vertical",
|
|
@@ -2700,80 +3375,92 @@ var RadioGroup = /* @__PURE__ */ (0, import_react33.forwardRef)(function RadioGr
|
|
|
2700
3375
|
className
|
|
2701
3376
|
} = props;
|
|
2702
3377
|
const isControlled = "value" in props;
|
|
2703
|
-
const
|
|
3378
|
+
const [innerValue, setInnerValue] = (0, import_react41.useState)(defaultValue ?? "");
|
|
3379
|
+
const current2 = isControlled ? value4 ?? "" : innerValue;
|
|
3380
|
+
const generatedId = (0, import_react41.useId)();
|
|
2704
3381
|
const baseId = id ?? generatedId;
|
|
2705
|
-
const labelId =
|
|
3382
|
+
const labelId = label7 ? `${baseId}-label` : void 0;
|
|
2706
3383
|
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
3384
|
+
const groupName = name ?? `${baseId}-radio`;
|
|
3385
|
+
const detachedForm = name ? void 0 : `${baseId}-no-form`;
|
|
3386
|
+
const handleChange = (next) => {
|
|
3387
|
+
if (next === current2) return;
|
|
3388
|
+
if (!isControlled) setInnerValue(next);
|
|
3389
|
+
onValueChange?.(next);
|
|
3390
|
+
};
|
|
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: "*" })
|
|
2711
3395
|
] }),
|
|
2712
|
-
/* @__PURE__ */ (0,
|
|
2713
|
-
|
|
3396
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3397
|
+
"div",
|
|
2714
3398
|
{
|
|
2715
3399
|
ref,
|
|
2716
3400
|
id: baseId,
|
|
2717
|
-
|
|
2718
|
-
defaultValue,
|
|
2719
|
-
onValueChange,
|
|
2720
|
-
orientation,
|
|
2721
|
-
disabled,
|
|
2722
|
-
required,
|
|
2723
|
-
name,
|
|
3401
|
+
role: "radiogroup",
|
|
2724
3402
|
"aria-label": ariaLabel,
|
|
2725
3403
|
"aria-labelledby": labelId,
|
|
2726
3404
|
"aria-describedby": helperId,
|
|
2727
3405
|
"aria-invalid": error || void 0,
|
|
3406
|
+
"aria-required": required || void 0,
|
|
3407
|
+
"data-disabled": disabled || void 0,
|
|
2728
3408
|
className: items({ orientation }),
|
|
2729
3409
|
children: options.map((option2) => {
|
|
2730
3410
|
const itemId = `${baseId}-${option2.value}`;
|
|
2731
3411
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
2732
3412
|
const itemDisabled = disabled || option2.disabled;
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
3413
|
+
const checked = option2.value === current2;
|
|
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)(
|
|
3416
|
+
"input",
|
|
2736
3417
|
{
|
|
3418
|
+
type: "radio",
|
|
2737
3419
|
id: itemId,
|
|
3420
|
+
name: groupName,
|
|
3421
|
+
form: detachedForm,
|
|
2738
3422
|
value: option2.value,
|
|
2739
|
-
|
|
3423
|
+
checked,
|
|
3424
|
+
onChange: () => handleChange(option2.value),
|
|
3425
|
+
disabled: itemDisabled,
|
|
3426
|
+
required,
|
|
2740
3427
|
"aria-describedby": descriptionId,
|
|
2741
|
-
|
|
2742
|
-
|
|
3428
|
+
"data-state": checked ? "checked" : "unchecked",
|
|
3429
|
+
className: radio({ size })
|
|
2743
3430
|
}
|
|
2744
3431
|
),
|
|
2745
|
-
/* @__PURE__ */ (0,
|
|
2746
|
-
/* @__PURE__ */ (0,
|
|
2747
|
-
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 })
|
|
2748
3435
|
] })
|
|
2749
3436
|
] }, option2.value);
|
|
2750
3437
|
})
|
|
2751
3438
|
}
|
|
2752
3439
|
),
|
|
2753
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3440
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
2754
3441
|
] });
|
|
2755
3442
|
});
|
|
2756
3443
|
|
|
2757
3444
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
2758
|
-
var
|
|
3445
|
+
var import_react42 = require("react");
|
|
2759
3446
|
|
|
2760
3447
|
// src/components/SegmentedControl/SegmentedControl.css.ts
|
|
2761
|
-
var
|
|
3448
|
+
var import_createRuntimeFn22 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2762
3449
|
var icon6 = "_1h65mmo7";
|
|
2763
|
-
var
|
|
2764
|
-
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: [] });
|
|
2765
3452
|
|
|
2766
3453
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
2767
|
-
var
|
|
3454
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2768
3455
|
var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
|
|
2769
|
-
var SegmentedControl = /* @__PURE__ */ (0,
|
|
3456
|
+
var SegmentedControl = /* @__PURE__ */ (0, import_react42.forwardRef)(
|
|
2770
3457
|
function SegmentedControl2(props, ref) {
|
|
2771
3458
|
const {
|
|
2772
3459
|
options,
|
|
2773
3460
|
value: value4,
|
|
2774
3461
|
defaultValue,
|
|
2775
3462
|
onValueChange,
|
|
2776
|
-
label:
|
|
3463
|
+
label: label7,
|
|
2777
3464
|
"aria-label": ariaLabel,
|
|
2778
3465
|
size,
|
|
2779
3466
|
fullWidth,
|
|
@@ -2783,11 +3470,11 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2783
3470
|
className
|
|
2784
3471
|
} = props;
|
|
2785
3472
|
const isControlled = "value" in props;
|
|
2786
|
-
const [innerValue, setInnerValue] = (0,
|
|
3473
|
+
const [innerValue, setInnerValue] = (0, import_react42.useState)(defaultValue ?? "");
|
|
2787
3474
|
const current2 = isControlled ? value4 ?? "" : innerValue;
|
|
2788
|
-
const generatedId = (0,
|
|
2789
|
-
const labelId =
|
|
2790
|
-
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)([]);
|
|
2791
3478
|
const isEnabled = (index) => !disabled && !options[index]?.disabled;
|
|
2792
3479
|
const select = (index) => {
|
|
2793
3480
|
const next = options[index].value;
|
|
@@ -2799,10 +3486,10 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2799
3486
|
const tabStop = checkedIndex >= 0 && isEnabled(checkedIndex) ? checkedIndex : options.findIndex((_, i) => isEnabled(i));
|
|
2800
3487
|
const handleKeyDown = (event, index) => {
|
|
2801
3488
|
let target = -1;
|
|
2802
|
-
const
|
|
2803
|
-
if (
|
|
3489
|
+
const step2 = NEXT_KEYS[event.key];
|
|
3490
|
+
if (step2) {
|
|
2804
3491
|
for (let i = 1; i <= options.length; i++) {
|
|
2805
|
-
const candidate = (index +
|
|
3492
|
+
const candidate = (index + step2 * i + options.length) % options.length;
|
|
2806
3493
|
if (isEnabled(candidate)) {
|
|
2807
3494
|
target = candidate;
|
|
2808
3495
|
break;
|
|
@@ -2818,20 +3505,20 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2818
3505
|
itemRefs.current[target]?.focus();
|
|
2819
3506
|
select(target);
|
|
2820
3507
|
};
|
|
2821
|
-
const group = /* @__PURE__ */ (0,
|
|
3508
|
+
const group = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
2822
3509
|
"div",
|
|
2823
3510
|
{
|
|
2824
3511
|
ref,
|
|
2825
3512
|
id,
|
|
2826
3513
|
role: "radiogroup",
|
|
2827
3514
|
"aria-labelledby": labelId,
|
|
2828
|
-
"aria-label":
|
|
3515
|
+
"aria-label": label7 ? void 0 : ariaLabel,
|
|
2829
3516
|
"aria-disabled": disabled || void 0,
|
|
2830
|
-
className: cx(
|
|
3517
|
+
className: cx(root11({ fullWidth }), !label7 && className),
|
|
2831
3518
|
children: [
|
|
2832
3519
|
options.map((option2, index) => {
|
|
2833
3520
|
const checked = index === checkedIndex;
|
|
2834
|
-
return /* @__PURE__ */ (0,
|
|
3521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
2835
3522
|
"button",
|
|
2836
3523
|
{
|
|
2837
3524
|
ref: (node) => {
|
|
@@ -2844,24 +3531,24 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2844
3531
|
disabled: !isEnabled(index),
|
|
2845
3532
|
"data-state": checked ? "checked" : "unchecked",
|
|
2846
3533
|
"data-disabled": isEnabled(index) ? void 0 : "",
|
|
2847
|
-
className:
|
|
3534
|
+
className: item9({ size, fullWidth }),
|
|
2848
3535
|
onClick: () => select(index),
|
|
2849
3536
|
onKeyDown: (event) => handleKeyDown(event, index),
|
|
2850
3537
|
children: [
|
|
2851
|
-
option2.icon && /* @__PURE__ */ (0,
|
|
3538
|
+
option2.icon && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: icon6, children: option2.icon }),
|
|
2852
3539
|
option2.label
|
|
2853
3540
|
]
|
|
2854
3541
|
},
|
|
2855
3542
|
option2.value
|
|
2856
3543
|
);
|
|
2857
3544
|
}),
|
|
2858
|
-
name && /* @__PURE__ */ (0,
|
|
3545
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "hidden", name, value: current2 })
|
|
2859
3546
|
]
|
|
2860
3547
|
}
|
|
2861
3548
|
);
|
|
2862
|
-
if (!
|
|
2863
|
-
return /* @__PURE__ */ (0,
|
|
2864
|
-
/* @__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 }),
|
|
2865
3552
|
group
|
|
2866
3553
|
] });
|
|
2867
3554
|
}
|
|
@@ -2869,17 +3556,17 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react34.forwardRef)(
|
|
|
2869
3556
|
|
|
2870
3557
|
// src/components/Select/Select.tsx
|
|
2871
3558
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
2872
|
-
var
|
|
2873
|
-
var
|
|
2874
|
-
var
|
|
2875
|
-
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) {
|
|
2876
3563
|
const {
|
|
2877
3564
|
options,
|
|
2878
3565
|
value: value4,
|
|
2879
3566
|
defaultValue,
|
|
2880
3567
|
onValueChange,
|
|
2881
3568
|
placeholder,
|
|
2882
|
-
label:
|
|
3569
|
+
label: label7,
|
|
2883
3570
|
helperText: helperText3,
|
|
2884
3571
|
error,
|
|
2885
3572
|
size,
|
|
@@ -2892,16 +3579,16 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2892
3579
|
className
|
|
2893
3580
|
} = props;
|
|
2894
3581
|
const isControlled = "value" in props;
|
|
2895
|
-
const generatedId = (0,
|
|
3582
|
+
const generatedId = (0, import_react43.useId)();
|
|
2896
3583
|
const triggerId = id ?? generatedId;
|
|
2897
3584
|
const helperId = helperText3 ? `${triggerId}-helper` : void 0;
|
|
2898
3585
|
const portal2 = usePortalProps();
|
|
2899
|
-
return /* @__PURE__ */ (0,
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
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: "*" })
|
|
2903
3590
|
] }),
|
|
2904
|
-
/* @__PURE__ */ (0,
|
|
3591
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2905
3592
|
RadixSelect.Root,
|
|
2906
3593
|
{
|
|
2907
3594
|
value: isControlled ? value4 ?? "" : void 0,
|
|
@@ -2911,7 +3598,7 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2911
3598
|
required,
|
|
2912
3599
|
name,
|
|
2913
3600
|
children: [
|
|
2914
|
-
/* @__PURE__ */ (0,
|
|
3601
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2915
3602
|
RadixSelect.Trigger,
|
|
2916
3603
|
{
|
|
2917
3604
|
ref,
|
|
@@ -2920,14 +3607,14 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2920
3607
|
"aria-invalid": error || void 0,
|
|
2921
3608
|
"aria-describedby": helperId,
|
|
2922
3609
|
"data-invalid": error || void 0,
|
|
2923
|
-
className: cx(
|
|
3610
|
+
className: cx(root5({ size, fullWidth }), trigger2, className),
|
|
2924
3611
|
children: [
|
|
2925
|
-
/* @__PURE__ */ (0,
|
|
2926
|
-
/* @__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 }) })
|
|
2927
3614
|
]
|
|
2928
3615
|
}
|
|
2929
3616
|
),
|
|
2930
|
-
/* @__PURE__ */ (0,
|
|
3617
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2931
3618
|
RadixSelect.Content,
|
|
2932
3619
|
{
|
|
2933
3620
|
position: "popper",
|
|
@@ -2935,15 +3622,15 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2935
3622
|
collisionPadding: 8,
|
|
2936
3623
|
className: cx(portal2.className, content5),
|
|
2937
3624
|
style: portal2.style,
|
|
2938
|
-
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)(
|
|
2939
3626
|
RadixSelect.Item,
|
|
2940
3627
|
{
|
|
2941
3628
|
value: option2.value,
|
|
2942
3629
|
disabled: option2.disabled,
|
|
2943
|
-
className:
|
|
3630
|
+
className: item5,
|
|
2944
3631
|
children: [
|
|
2945
|
-
/* @__PURE__ */ (0,
|
|
2946
|
-
/* @__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 }) })
|
|
2947
3634
|
]
|
|
2948
3635
|
},
|
|
2949
3636
|
option2.value
|
|
@@ -2953,68 +3640,19 @@ var Select = /* @__PURE__ */ (0, import_react35.forwardRef)(function Select2(pro
|
|
|
2953
3640
|
]
|
|
2954
3641
|
}
|
|
2955
3642
|
),
|
|
2956
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3643
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
2957
3644
|
] });
|
|
2958
3645
|
});
|
|
2959
3646
|
|
|
2960
|
-
// src/components/Skeleton/Skeleton.tsx
|
|
2961
|
-
var import_dynamic2 = require("@vanilla-extract/dynamic");
|
|
2962
|
-
var import_react36 = require("react");
|
|
2963
|
-
|
|
2964
|
-
// src/components/Skeleton/Skeleton.css.ts
|
|
2965
|
-
var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2966
|
-
var height = "var(--_1s8datd1)";
|
|
2967
|
-
var lines = "_1s8datd6";
|
|
2968
|
-
var skeleton = /* @__PURE__ */ (0, import_createRuntimeFn18.createRuntimeFn)({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
|
|
2969
|
-
var width = "var(--_1s8datd0)";
|
|
2970
|
-
|
|
2971
|
-
// src/components/Skeleton/Skeleton.tsx
|
|
2972
|
-
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2973
|
-
var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
|
|
2974
|
-
var Skeleton = /* @__PURE__ */ (0, import_react36.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
|
|
2975
|
-
const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
|
|
2976
|
-
const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
|
|
2977
|
-
if (variant === "text" && lines2 > 1) {
|
|
2978
|
-
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2979
|
-
"span",
|
|
2980
|
-
{
|
|
2981
|
-
ref,
|
|
2982
|
-
"aria-hidden": true,
|
|
2983
|
-
className: cx(lines, className),
|
|
2984
|
-
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w }), ...style },
|
|
2985
|
-
...rest,
|
|
2986
|
-
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2987
|
-
"span",
|
|
2988
|
-
{
|
|
2989
|
-
className: skeleton({ variant }),
|
|
2990
|
-
style: (0, import_dynamic2.assignInlineVars)({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
|
|
2991
|
-
},
|
|
2992
|
-
i
|
|
2993
|
-
))
|
|
2994
|
-
}
|
|
2995
|
-
);
|
|
2996
|
-
}
|
|
2997
|
-
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2998
|
-
"span",
|
|
2999
|
-
{
|
|
3000
|
-
ref,
|
|
3001
|
-
"aria-hidden": true,
|
|
3002
|
-
className: cx(skeleton({ variant }), className),
|
|
3003
|
-
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w, [height]: h }), ...style },
|
|
3004
|
-
...rest
|
|
3005
|
-
}
|
|
3006
|
-
);
|
|
3007
|
-
});
|
|
3008
|
-
|
|
3009
3647
|
// src/components/SkipLink/SkipLink.tsx
|
|
3010
|
-
var
|
|
3648
|
+
var import_react44 = require("react");
|
|
3011
3649
|
|
|
3012
3650
|
// src/components/SkipLink/SkipLink.css.ts
|
|
3013
3651
|
var skipLink = "_1t9jaar0";
|
|
3014
3652
|
|
|
3015
3653
|
// src/components/SkipLink/SkipLink.tsx
|
|
3016
|
-
var
|
|
3017
|
-
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) {
|
|
3018
3656
|
const m = useMessages();
|
|
3019
3657
|
const handleClick = (event) => {
|
|
3020
3658
|
onClick?.(event);
|
|
@@ -3026,35 +3664,35 @@ var SkipLink = /* @__PURE__ */ (0, import_react37.forwardRef)(function SkipLink2
|
|
|
3026
3664
|
target.focus();
|
|
3027
3665
|
target.scrollIntoView?.({ block: "start" });
|
|
3028
3666
|
};
|
|
3029
|
-
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" });
|
|
3030
3668
|
});
|
|
3031
3669
|
|
|
3032
3670
|
// src/components/Slider/Slider.tsx
|
|
3033
3671
|
var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
|
|
3034
|
-
var
|
|
3672
|
+
var import_react45 = require("react");
|
|
3035
3673
|
|
|
3036
3674
|
// src/components/Slider/Slider.css.ts
|
|
3037
|
-
var
|
|
3675
|
+
var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3038
3676
|
var field2 = "_126mzjm0";
|
|
3039
3677
|
var header8 = "_126mzjm1";
|
|
3040
3678
|
var helperText2 = "_126mzjm4";
|
|
3041
3679
|
var label4 = "_126mzjm2";
|
|
3042
3680
|
var range2 = "_126mzjmb";
|
|
3043
|
-
var
|
|
3044
|
-
var thumb = /* @__PURE__ */ (0,
|
|
3045
|
-
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: [] });
|
|
3046
3684
|
var value3 = "_126mzjm3";
|
|
3047
3685
|
|
|
3048
3686
|
// src/components/Slider/Slider.tsx
|
|
3049
|
-
var
|
|
3050
|
-
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) {
|
|
3051
3689
|
const {
|
|
3052
3690
|
value: value4,
|
|
3053
3691
|
defaultValue,
|
|
3054
3692
|
onValueChange,
|
|
3055
3693
|
min = 0,
|
|
3056
3694
|
max = 100,
|
|
3057
|
-
label:
|
|
3695
|
+
label: label7,
|
|
3058
3696
|
"aria-label": ariaLabel,
|
|
3059
3697
|
helperText: helperText3,
|
|
3060
3698
|
showValue,
|
|
@@ -3068,12 +3706,12 @@ var Slider = /* @__PURE__ */ (0, import_react38.forwardRef)(function Slider2(pro
|
|
|
3068
3706
|
} = props;
|
|
3069
3707
|
const m = useMessages();
|
|
3070
3708
|
const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
|
|
3071
|
-
const generatedId = (0,
|
|
3709
|
+
const generatedId = (0, import_react45.useId)();
|
|
3072
3710
|
const baseId = id ?? generatedId;
|
|
3073
3711
|
const labelId = `${baseId}-label`;
|
|
3074
3712
|
const helperId = `${baseId}-helper`;
|
|
3075
3713
|
const isControlled = "value" in props;
|
|
3076
|
-
const [innerValue, setInnerValue] = (0,
|
|
3714
|
+
const [innerValue, setInnerValue] = (0, import_react45.useState)(defaultValue ?? [min]);
|
|
3077
3715
|
const current2 = isControlled ? value4 ?? [min] : innerValue;
|
|
3078
3716
|
const isRange = current2.length > 1;
|
|
3079
3717
|
const handleChange = (next) => {
|
|
@@ -3081,12 +3719,12 @@ var Slider = /* @__PURE__ */ (0, import_react38.forwardRef)(function Slider2(pro
|
|
|
3081
3719
|
onValueChange?.(next);
|
|
3082
3720
|
};
|
|
3083
3721
|
const valueText = current2.map(formatValue).join(" \u2013 ");
|
|
3084
|
-
return /* @__PURE__ */ (0,
|
|
3085
|
-
(
|
|
3086
|
-
|
|
3087
|
-
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 })
|
|
3088
3726
|
] }),
|
|
3089
|
-
/* @__PURE__ */ (0,
|
|
3727
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3090
3728
|
RadixSlider.Root,
|
|
3091
3729
|
{
|
|
3092
3730
|
ref,
|
|
@@ -3096,18 +3734,18 @@ var Slider = /* @__PURE__ */ (0, import_react38.forwardRef)(function Slider2(pro
|
|
|
3096
3734
|
disabled,
|
|
3097
3735
|
value: current2,
|
|
3098
3736
|
onValueChange: handleChange,
|
|
3099
|
-
className:
|
|
3737
|
+
className: root12({ size }),
|
|
3100
3738
|
...rest,
|
|
3101
3739
|
children: [
|
|
3102
|
-
/* @__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 }) }),
|
|
3103
3741
|
current2.map((thumbValue, index) => {
|
|
3104
3742
|
const thumbLabelId = `${baseId}-thumb-${index}`;
|
|
3105
|
-
return /* @__PURE__ */ (0,
|
|
3743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3106
3744
|
RadixSlider.Thumb,
|
|
3107
3745
|
{
|
|
3108
3746
|
className: thumb({ size }),
|
|
3109
|
-
"aria-labelledby":
|
|
3110
|
-
"aria-label":
|
|
3747
|
+
"aria-labelledby": label7 ? isRange ? `${labelId} ${thumbLabelId}` : labelId : isRange ? thumbLabelId : void 0,
|
|
3748
|
+
"aria-label": label7 ? void 0 : isRange ? void 0 : ariaLabel,
|
|
3111
3749
|
"aria-valuetext": formatValue(thumbValue),
|
|
3112
3750
|
"aria-describedby": helperText3 ? helperId : void 0
|
|
3113
3751
|
},
|
|
@@ -3117,45 +3755,86 @@ var Slider = /* @__PURE__ */ (0, import_react38.forwardRef)(function Slider2(pro
|
|
|
3117
3755
|
]
|
|
3118
3756
|
}
|
|
3119
3757
|
),
|
|
3120
|
-
isRange && current2.map((_, index) => /* @__PURE__ */ (0,
|
|
3121
|
-
|
|
3758
|
+
isRange && current2.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
|
|
3759
|
+
label7 ? "" : ariaLabel ? `${ariaLabel} ` : "",
|
|
3122
3760
|
thumbLabels[index] ?? `${index + 1}`
|
|
3123
3761
|
] }, index)),
|
|
3124
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3762
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { id: helperId, className: helperText2, children: helperText3 })
|
|
3125
3763
|
] });
|
|
3126
3764
|
});
|
|
3127
3765
|
|
|
3128
|
-
// src/components/
|
|
3129
|
-
var
|
|
3130
|
-
|
|
3131
|
-
// src/components/Stack/Stack.css.ts
|
|
3132
|
-
var import_createRuntimeFn20 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3133
|
-
var stack = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
|
|
3766
|
+
// src/components/Stepper/Stepper.tsx
|
|
3767
|
+
var import_react46 = require("react");
|
|
3768
|
+
var import_icons19 = require("@bestow-ui/icons");
|
|
3134
3769
|
|
|
3135
|
-
// src/components/
|
|
3136
|
-
var
|
|
3137
|
-
var
|
|
3138
|
-
|
|
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
|
+
);
|
|
3139
3818
|
});
|
|
3140
3819
|
|
|
3141
3820
|
// src/components/Switch/Switch.tsx
|
|
3142
3821
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
3143
|
-
var
|
|
3822
|
+
var import_react47 = require("react");
|
|
3144
3823
|
|
|
3145
3824
|
// src/components/Switch/Switch.css.ts
|
|
3146
|
-
var
|
|
3147
|
-
var
|
|
3148
|
-
var
|
|
3149
|
-
var thumb2 = /* @__PURE__ */ (0,
|
|
3150
|
-
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: [] });
|
|
3151
3830
|
|
|
3152
3831
|
// src/components/Switch/Switch.tsx
|
|
3153
|
-
var
|
|
3154
|
-
var Switch = /* @__PURE__ */ (0,
|
|
3155
|
-
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)();
|
|
3156
3835
|
const switchId = id ?? generatedId;
|
|
3157
|
-
return /* @__PURE__ */ (0,
|
|
3158
|
-
/* @__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)(
|
|
3159
3838
|
RadixSwitch.Root,
|
|
3160
3839
|
{
|
|
3161
3840
|
ref,
|
|
@@ -3164,23 +3843,25 @@ var Switch = /* @__PURE__ */ (0, import_react40.forwardRef)(function Switch2({ l
|
|
|
3164
3843
|
"aria-label": ariaLabel,
|
|
3165
3844
|
className: track3({ size }),
|
|
3166
3845
|
...rest,
|
|
3167
|
-
children: /* @__PURE__ */ (0,
|
|
3846
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixSwitch.Thumb, { className: thumb2({ size }) })
|
|
3168
3847
|
}
|
|
3169
3848
|
),
|
|
3170
|
-
|
|
3849
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { htmlFor: switchId, className: label6, children: label7 })
|
|
3171
3850
|
] });
|
|
3172
3851
|
});
|
|
3173
3852
|
|
|
3174
3853
|
// src/components/Table/Table.tsx
|
|
3175
|
-
var
|
|
3176
|
-
var
|
|
3854
|
+
var import_react48 = require("react");
|
|
3855
|
+
var import_icons20 = require("@bestow-ui/icons");
|
|
3177
3856
|
|
|
3178
3857
|
// src/components/Table/Table.css.ts
|
|
3179
|
-
var
|
|
3858
|
+
var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3180
3859
|
var body4 = "l3ploy5";
|
|
3181
3860
|
var caption = "l3ploy2";
|
|
3182
|
-
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: [] });
|
|
3183
3862
|
var container = "l3ploy0";
|
|
3863
|
+
var emptyCell = "l3ployj";
|
|
3864
|
+
var emptyContent = "l3ployk";
|
|
3184
3865
|
var footer4 = "l3ploy7";
|
|
3185
3866
|
var footerCell = "l3ployg";
|
|
3186
3867
|
var head = "l3ployf";
|
|
@@ -3193,10 +3874,10 @@ var striped = "l3ploy6";
|
|
|
3193
3874
|
var table = "l3ploy1";
|
|
3194
3875
|
|
|
3195
3876
|
// src/components/Table/Table.tsx
|
|
3196
|
-
var
|
|
3197
|
-
var TableSizeContext = /* @__PURE__ */ (0,
|
|
3198
|
-
var TableSectionContext = /* @__PURE__ */ (0,
|
|
3199
|
-
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({
|
|
3200
3881
|
size = "md",
|
|
3201
3882
|
striped: striped2,
|
|
3202
3883
|
stickyHeader: stickyHeader2,
|
|
@@ -3208,8 +3889,8 @@ var Table = /* @__PURE__ */ (0, import_react41.forwardRef)(function Table2({
|
|
|
3208
3889
|
children,
|
|
3209
3890
|
...rest
|
|
3210
3891
|
}, ref) {
|
|
3211
|
-
const captionId = (0,
|
|
3212
|
-
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)(
|
|
3213
3894
|
"div",
|
|
3214
3895
|
{
|
|
3215
3896
|
className: cx(container, containerClassName),
|
|
@@ -3218,7 +3899,7 @@ var Table = /* @__PURE__ */ (0, import_react41.forwardRef)(function Table2({
|
|
|
3218
3899
|
role: "region",
|
|
3219
3900
|
"aria-labelledby": caption2 ? captionId : void 0,
|
|
3220
3901
|
"aria-label": caption2 ? void 0 : ariaLabel,
|
|
3221
|
-
children: /* @__PURE__ */ (0,
|
|
3902
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
3222
3903
|
"table",
|
|
3223
3904
|
{
|
|
3224
3905
|
ref,
|
|
@@ -3226,7 +3907,7 @@ var Table = /* @__PURE__ */ (0, import_react41.forwardRef)(function Table2({
|
|
|
3226
3907
|
"aria-label": caption2 ? void 0 : ariaLabel,
|
|
3227
3908
|
...rest,
|
|
3228
3909
|
children: [
|
|
3229
|
-
caption2 && /* @__PURE__ */ (0,
|
|
3910
|
+
caption2 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("caption", { id: captionId, className: caption, children: caption2 }),
|
|
3230
3911
|
children
|
|
3231
3912
|
]
|
|
3232
3913
|
}
|
|
@@ -3234,31 +3915,31 @@ var Table = /* @__PURE__ */ (0, import_react41.forwardRef)(function Table2({
|
|
|
3234
3915
|
}
|
|
3235
3916
|
) });
|
|
3236
3917
|
});
|
|
3237
|
-
var TableHeader = /* @__PURE__ */ (0,
|
|
3918
|
+
var TableHeader = /* @__PURE__ */ (0, import_react48.forwardRef)(
|
|
3238
3919
|
function TableHeader2({ className, ...rest }, ref) {
|
|
3239
|
-
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 }) });
|
|
3240
3921
|
}
|
|
3241
3922
|
);
|
|
3242
|
-
var TableBody = /* @__PURE__ */ (0,
|
|
3923
|
+
var TableBody = /* @__PURE__ */ (0, import_react48.forwardRef)(
|
|
3243
3924
|
function TableBody2({ className, ...rest }, ref) {
|
|
3244
|
-
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 }) });
|
|
3245
3926
|
}
|
|
3246
3927
|
);
|
|
3247
|
-
var TableFooter = /* @__PURE__ */ (0,
|
|
3928
|
+
var TableFooter = /* @__PURE__ */ (0, import_react48.forwardRef)(
|
|
3248
3929
|
function TableFooter2({ className, ...rest }, ref) {
|
|
3249
|
-
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 }) });
|
|
3250
3931
|
}
|
|
3251
3932
|
);
|
|
3252
|
-
var TableRow = /* @__PURE__ */ (0,
|
|
3253
|
-
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 });
|
|
3254
3935
|
});
|
|
3255
|
-
var TableHead = /* @__PURE__ */ (0,
|
|
3256
|
-
const size = (0,
|
|
3257
|
-
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);
|
|
3258
3939
|
const sortable = onSort !== void 0;
|
|
3259
3940
|
const direction = sortDirection ?? "none";
|
|
3260
|
-
const SortIcon = direction === "descending" ?
|
|
3261
|
-
return /* @__PURE__ */ (0,
|
|
3941
|
+
const SortIcon = direction === "descending" ? import_icons20.ArrowDownIcon : import_icons20.ArrowUpIcon;
|
|
3942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3262
3943
|
"th",
|
|
3263
3944
|
{
|
|
3264
3945
|
ref,
|
|
@@ -3270,17 +3951,17 @@ var TableHead = /* @__PURE__ */ (0, import_react41.forwardRef)(function TableHea
|
|
|
3270
3951
|
className
|
|
3271
3952
|
),
|
|
3272
3953
|
...rest,
|
|
3273
|
-
children: sortable ? /* @__PURE__ */ (0,
|
|
3954
|
+
children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("button", { type: "button", className: sortButton, onClick: onSort, children: [
|
|
3274
3955
|
children,
|
|
3275
|
-
/* @__PURE__ */ (0,
|
|
3956
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
|
|
3276
3957
|
] }) : children
|
|
3277
3958
|
}
|
|
3278
3959
|
);
|
|
3279
3960
|
});
|
|
3280
|
-
var TableCell = /* @__PURE__ */ (0,
|
|
3281
|
-
const size = (0,
|
|
3282
|
-
const section = (0,
|
|
3283
|
-
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)(
|
|
3284
3965
|
"td",
|
|
3285
3966
|
{
|
|
3286
3967
|
ref,
|
|
@@ -3289,51 +3970,89 @@ var TableCell = /* @__PURE__ */ (0, import_react41.forwardRef)(function TableCel
|
|
|
3289
3970
|
}
|
|
3290
3971
|
);
|
|
3291
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
|
+
}
|
|
3292
4010
|
|
|
3293
4011
|
// src/components/Tabs/Tabs.tsx
|
|
3294
4012
|
var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
|
|
3295
|
-
var
|
|
4013
|
+
var import_react50 = require("react");
|
|
3296
4014
|
|
|
3297
4015
|
// src/components/Tabs/Tabs.css.ts
|
|
3298
|
-
var
|
|
3299
|
-
var content10 = "
|
|
3300
|
-
var
|
|
3301
|
-
var
|
|
4016
|
+
var import_createRuntimeFn27 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
4017
|
+
var content10 = "fvhbtdb";
|
|
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"]] });
|
|
3302
4021
|
|
|
3303
4022
|
// src/components/Tabs/Tabs.tsx
|
|
3304
|
-
var
|
|
3305
|
-
var TabsStyleContext = /* @__PURE__ */ (0,
|
|
3306
|
-
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) {
|
|
3307
4026
|
const controlled = "value" in props ? { value: props.value ?? "" } : {};
|
|
3308
|
-
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 }) });
|
|
3309
4028
|
});
|
|
3310
|
-
var TabsList = /* @__PURE__ */ (0,
|
|
3311
|
-
const { variant } = (0,
|
|
3312
|
-
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 });
|
|
3313
4032
|
});
|
|
3314
|
-
var TabsTrigger = /* @__PURE__ */ (0,
|
|
3315
|
-
const { variant, size } = (0,
|
|
3316
|
-
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 });
|
|
3317
4036
|
});
|
|
3318
|
-
var TabsContent = /* @__PURE__ */ (0,
|
|
3319
|
-
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 });
|
|
3320
4039
|
});
|
|
3321
4040
|
|
|
3322
4041
|
// src/components/Textarea/Textarea.tsx
|
|
3323
|
-
var
|
|
4042
|
+
var import_react51 = require("react");
|
|
3324
4043
|
|
|
3325
4044
|
// src/components/Textarea/Textarea.css.ts
|
|
3326
|
-
var
|
|
4045
|
+
var import_createRuntimeFn28 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3327
4046
|
var count = "_1koawa9";
|
|
3328
4047
|
var countOver = "_1koawaa";
|
|
3329
4048
|
var defaultWidth = "_1koawa7";
|
|
3330
4049
|
var footer5 = "_1koawa8";
|
|
3331
|
-
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: [] });
|
|
3332
4051
|
|
|
3333
4052
|
// src/components/Textarea/Textarea.tsx
|
|
3334
|
-
var
|
|
3335
|
-
var Textarea = /* @__PURE__ */ (0,
|
|
3336
|
-
label:
|
|
4053
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
4054
|
+
var Textarea = /* @__PURE__ */ (0, import_react51.forwardRef)(function Textarea2({
|
|
4055
|
+
label: label7,
|
|
3337
4056
|
helperText: helperText3,
|
|
3338
4057
|
error,
|
|
3339
4058
|
size,
|
|
@@ -3353,13 +4072,13 @@ var Textarea = /* @__PURE__ */ (0, import_react43.forwardRef)(function Textarea2
|
|
|
3353
4072
|
"aria-describedby": ariaDescribedBy,
|
|
3354
4073
|
...rest
|
|
3355
4074
|
}, ref) {
|
|
3356
|
-
const generatedId = (0,
|
|
4075
|
+
const generatedId = (0, import_react51.useId)();
|
|
3357
4076
|
const textareaId = id ?? generatedId;
|
|
3358
4077
|
const helperId = helperText3 ? `${textareaId}-helper` : void 0;
|
|
3359
|
-
const innerRef = (0,
|
|
3360
|
-
const [uncontrolledLength, setUncontrolledLength] = (0,
|
|
4078
|
+
const innerRef = (0, import_react51.useRef)(null);
|
|
4079
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react51.useState)(() => String(defaultValue ?? "").length);
|
|
3361
4080
|
const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
|
|
3362
|
-
const fitHeight = (0,
|
|
4081
|
+
const fitHeight = (0, import_react51.useCallback)(() => {
|
|
3363
4082
|
const el = innerRef.current;
|
|
3364
4083
|
if (!autoResize || !el) return;
|
|
3365
4084
|
el.style.height = "auto";
|
|
@@ -3372,12 +4091,12 @@ var Textarea = /* @__PURE__ */ (0, import_react43.forwardRef)(function Textarea2
|
|
|
3372
4091
|
fitHeight();
|
|
3373
4092
|
onChange?.(event);
|
|
3374
4093
|
};
|
|
3375
|
-
return /* @__PURE__ */ (0,
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
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: "*" })
|
|
3379
4098
|
] }),
|
|
3380
|
-
/* @__PURE__ */ (0,
|
|
4099
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
3381
4100
|
"textarea",
|
|
3382
4101
|
{
|
|
3383
4102
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -3399,51 +4118,51 @@ var Textarea = /* @__PURE__ */ (0, import_react43.forwardRef)(function Textarea2
|
|
|
3399
4118
|
...rest
|
|
3400
4119
|
}
|
|
3401
4120
|
),
|
|
3402
|
-
(helperText3 || showCount) && /* @__PURE__ */ (0,
|
|
3403
|
-
helperText3 && /* @__PURE__ */ (0,
|
|
3404
|
-
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 })
|
|
3405
4124
|
] })
|
|
3406
4125
|
] });
|
|
3407
4126
|
});
|
|
3408
4127
|
|
|
3409
4128
|
// src/components/Toast/Toast.tsx
|
|
3410
4129
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
3411
|
-
var
|
|
3412
|
-
var
|
|
4130
|
+
var import_react52 = require("react");
|
|
4131
|
+
var import_icons21 = require("@bestow-ui/icons");
|
|
3413
4132
|
|
|
3414
4133
|
// src/components/Toast/Toast.css.ts
|
|
3415
|
-
var
|
|
4134
|
+
var import_createRuntimeFn29 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3416
4135
|
var action2 = "_1g11zvx9";
|
|
3417
4136
|
var close = "_1g11zvxa";
|
|
3418
|
-
var
|
|
4137
|
+
var description7 = "_1g11zvx8";
|
|
3419
4138
|
var title5 = "_1g11zvx7";
|
|
3420
|
-
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: [] });
|
|
3421
4140
|
var viewport2 = "_1g11zvx0";
|
|
3422
4141
|
|
|
3423
4142
|
// src/components/Toast/Toast.tsx
|
|
3424
|
-
var
|
|
4143
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
3425
4144
|
var REMOVE_DELAY = 500;
|
|
3426
|
-
var ToastContext = /* @__PURE__ */ (0,
|
|
4145
|
+
var ToastContext = /* @__PURE__ */ (0, import_react52.createContext)(null);
|
|
3427
4146
|
function ToastProvider({ children, duration = 5e3, label: labelProp }) {
|
|
3428
4147
|
const m = useMessages();
|
|
3429
|
-
const
|
|
3430
|
-
const [toasts, setToasts] = (0,
|
|
3431
|
-
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);
|
|
3432
4151
|
const portal2 = usePortalProps();
|
|
3433
|
-
const toast2 = (0,
|
|
4152
|
+
const toast2 = (0, import_react52.useCallback)((options) => {
|
|
3434
4153
|
const id = nextId.current++;
|
|
3435
4154
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
3436
4155
|
return id;
|
|
3437
4156
|
}, []);
|
|
3438
|
-
const dismiss = (0,
|
|
4157
|
+
const dismiss = (0, import_react52.useCallback)((id) => {
|
|
3439
4158
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
3440
4159
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
3441
4160
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
3442
4161
|
}, []);
|
|
3443
|
-
const value4 = (0,
|
|
3444
|
-
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: [
|
|
3445
4164
|
children,
|
|
3446
|
-
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)(
|
|
3447
4166
|
RadixToast.Root,
|
|
3448
4167
|
{
|
|
3449
4168
|
open,
|
|
@@ -3453,19 +4172,19 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
|
|
|
3453
4172
|
},
|
|
3454
4173
|
className: toast({ color }),
|
|
3455
4174
|
children: [
|
|
3456
|
-
/* @__PURE__ */ (0,
|
|
3457
|
-
|
|
3458
|
-
action3 && /* @__PURE__ */ (0,
|
|
3459
|
-
/* @__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 }) })
|
|
3460
4179
|
]
|
|
3461
4180
|
},
|
|
3462
4181
|
id
|
|
3463
4182
|
)),
|
|
3464
|
-
/* @__PURE__ */ (0,
|
|
4183
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
3465
4184
|
] }) });
|
|
3466
4185
|
}
|
|
3467
4186
|
function useToast() {
|
|
3468
|
-
const context = (0,
|
|
4187
|
+
const context = (0, import_react52.useContext)(ToastContext);
|
|
3469
4188
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
3470
4189
|
return context;
|
|
3471
4190
|
}
|
|
@@ -3478,7 +4197,7 @@ var arrow2 = "z7rufs1";
|
|
|
3478
4197
|
var content11 = "z7rufs0";
|
|
3479
4198
|
|
|
3480
4199
|
// src/components/Tooltip/Tooltip.tsx
|
|
3481
|
-
var
|
|
4200
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
3482
4201
|
function Tooltip({
|
|
3483
4202
|
content: content12,
|
|
3484
4203
|
children,
|
|
@@ -3493,9 +4212,9 @@ function Tooltip({
|
|
|
3493
4212
|
}) {
|
|
3494
4213
|
const portal2 = usePortalProps();
|
|
3495
4214
|
if (disabled || content12 == null || content12 === "") return children;
|
|
3496
|
-
return /* @__PURE__ */ (0,
|
|
3497
|
-
/* @__PURE__ */ (0,
|
|
3498
|
-
/* @__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)(
|
|
3499
4218
|
RadixTooltip.Content,
|
|
3500
4219
|
{
|
|
3501
4220
|
side,
|
|
@@ -3506,59 +4225,27 @@ function Tooltip({
|
|
|
3506
4225
|
style: portal2.style,
|
|
3507
4226
|
children: [
|
|
3508
4227
|
content12,
|
|
3509
|
-
/* @__PURE__ */ (0,
|
|
4228
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
|
|
3510
4229
|
]
|
|
3511
4230
|
}
|
|
3512
4231
|
) })
|
|
3513
4232
|
] }) });
|
|
3514
4233
|
}
|
|
3515
4234
|
|
|
3516
|
-
// src/components/Typography/Typography.tsx
|
|
3517
|
-
var import_react45 = require("react");
|
|
3518
|
-
|
|
3519
|
-
// src/components/Typography/Typography.css.ts
|
|
3520
|
-
var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
3521
|
-
var typography = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", warning: "kioliog", inherit: "kiolioh" }, weight: { regular: "kiolioi", medium: "kiolioj", semibold: "kioliok", bold: "kioliol" }, align: { start: "kioliom", center: "kiolion", end: "kiolioo" }, truncate: { true: "kioliop" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
|
|
3522
|
-
|
|
3523
|
-
// src/components/Typography/Typography.tsx
|
|
3524
|
-
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3525
|
-
var defaultElement = {
|
|
3526
|
-
display: "h1",
|
|
3527
|
-
h1: "h1",
|
|
3528
|
-
h2: "h2",
|
|
3529
|
-
h3: "h3",
|
|
3530
|
-
h4: "h4",
|
|
3531
|
-
"body-lg": "p",
|
|
3532
|
-
body: "p",
|
|
3533
|
-
"body-sm": "p",
|
|
3534
|
-
caption: "span"
|
|
3535
|
-
};
|
|
3536
|
-
var Typography = /* @__PURE__ */ (0, import_react45.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
3537
|
-
const Component = as ?? defaultElement[variant];
|
|
3538
|
-
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3539
|
-
Component,
|
|
3540
|
-
{
|
|
3541
|
-
ref,
|
|
3542
|
-
className: cx(typography({ variant, color, weight, align, truncate }), className),
|
|
3543
|
-
...rest
|
|
3544
|
-
}
|
|
3545
|
-
);
|
|
3546
|
-
});
|
|
3547
|
-
|
|
3548
4235
|
// src/components/VerificationCodeInput/VerificationCodeInput.tsx
|
|
3549
|
-
var
|
|
4236
|
+
var import_react53 = require("react");
|
|
3550
4237
|
|
|
3551
4238
|
// src/components/VerificationCodeInput/VerificationCodeInput.css.ts
|
|
3552
|
-
var
|
|
4239
|
+
var input5 = "ea01812";
|
|
3553
4240
|
var row4 = "ea01810";
|
|
3554
4241
|
var slot = "ea01813";
|
|
3555
4242
|
var slots = "ea01811";
|
|
3556
4243
|
var timer = "ea01814";
|
|
3557
4244
|
|
|
3558
4245
|
// src/components/VerificationCodeInput/VerificationCodeInput.tsx
|
|
3559
|
-
var
|
|
4246
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
3560
4247
|
var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
|
|
3561
|
-
var VerificationCodeInput = /* @__PURE__ */ (0,
|
|
4248
|
+
var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.forwardRef)(
|
|
3562
4249
|
function VerificationCodeInput2(props, ref) {
|
|
3563
4250
|
const {
|
|
3564
4251
|
length = 6,
|
|
@@ -3582,26 +4269,26 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3582
4269
|
className
|
|
3583
4270
|
} = props;
|
|
3584
4271
|
const m = useMessages();
|
|
3585
|
-
const
|
|
4272
|
+
const label7 = labelProp ?? m.verificationCode ?? "\uC778\uC99D\uBC88\uD638";
|
|
3586
4273
|
const resendText = resendTextProp ?? m.resend ?? "\uC7AC\uC804\uC1A1";
|
|
3587
4274
|
const expiredText = expiredTextProp ?? m.verificationExpired ?? "\uC778\uC99D \uC2DC\uAC04\uC774 \uC9C0\uB0AC\uC5B4\uC694. \uC7AC\uC804\uC1A1\uD574 \uC8FC\uC138\uC694.";
|
|
3588
|
-
const generatedId = (0,
|
|
4275
|
+
const generatedId = (0, import_react53.useId)();
|
|
3589
4276
|
const inputId = id ?? generatedId;
|
|
3590
4277
|
const helperId = `${inputId}-helper`;
|
|
3591
4278
|
const statusId = `${inputId}-status`;
|
|
3592
|
-
const inputRef = (0,
|
|
4279
|
+
const inputRef = (0, import_react53.useRef)(null);
|
|
3593
4280
|
const isControlled = "value" in props;
|
|
3594
|
-
const [innerValue, setInnerValue] = (0,
|
|
4281
|
+
const [innerValue, setInnerValue] = (0, import_react53.useState)(defaultValue ?? "");
|
|
3595
4282
|
const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
|
|
3596
|
-
const [focused, setFocused] = (0,
|
|
3597
|
-
const [endAt, setEndAt] = (0,
|
|
3598
|
-
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);
|
|
3599
4286
|
const expired = expiresIn !== void 0 && remaining <= 0;
|
|
3600
|
-
const onExpireRef = (0,
|
|
3601
|
-
(0,
|
|
4287
|
+
const onExpireRef = (0, import_react53.useRef)(onExpire);
|
|
4288
|
+
(0, import_react53.useEffect)(() => {
|
|
3602
4289
|
onExpireRef.current = onExpire;
|
|
3603
4290
|
});
|
|
3604
|
-
(0,
|
|
4291
|
+
(0, import_react53.useEffect)(() => {
|
|
3605
4292
|
if (endAt === null) return;
|
|
3606
4293
|
const tick = () => {
|
|
3607
4294
|
const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
|
|
@@ -3634,19 +4321,19 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3634
4321
|
}
|
|
3635
4322
|
inputRef.current?.focus();
|
|
3636
4323
|
};
|
|
3637
|
-
const
|
|
4324
|
+
const description8 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
|
|
3638
4325
|
const activeIndex = Math.min(code.length, length - 1);
|
|
3639
|
-
return /* @__PURE__ */ (0,
|
|
4326
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
3640
4327
|
"div",
|
|
3641
4328
|
{
|
|
3642
4329
|
className: cx(field, className),
|
|
3643
4330
|
"data-invalid": error || void 0,
|
|
3644
4331
|
"data-disabled": disabled || void 0,
|
|
3645
4332
|
children: [
|
|
3646
|
-
/* @__PURE__ */ (0,
|
|
3647
|
-
/* @__PURE__ */ (0,
|
|
3648
|
-
/* @__PURE__ */ (0,
|
|
3649
|
-
/* @__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)(
|
|
3650
4337
|
"input",
|
|
3651
4338
|
{
|
|
3652
4339
|
ref: mergeRefs(ref, inputRef),
|
|
@@ -3663,10 +4350,10 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3663
4350
|
autoFocus,
|
|
3664
4351
|
"aria-invalid": error || void 0,
|
|
3665
4352
|
"aria-describedby": `${helperId} ${statusId}`,
|
|
3666
|
-
className:
|
|
4353
|
+
className: input5
|
|
3667
4354
|
}
|
|
3668
4355
|
),
|
|
3669
|
-
Array.from({ length }, (_, index) => /* @__PURE__ */ (0,
|
|
4356
|
+
Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
3670
4357
|
"div",
|
|
3671
4358
|
{
|
|
3672
4359
|
className: slot,
|
|
@@ -3677,12 +4364,12 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3677
4364
|
index
|
|
3678
4365
|
))
|
|
3679
4366
|
] }),
|
|
3680
|
-
expiresIn !== void 0 && /* @__PURE__ */ (0,
|
|
3681
|
-
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 })
|
|
3682
4369
|
] }),
|
|
3683
|
-
/* @__PURE__ */ (0,
|
|
3684
|
-
/* @__PURE__ */ (0,
|
|
3685
|
-
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 })
|
|
3686
4373
|
]
|
|
3687
4374
|
}
|
|
3688
4375
|
);
|
|
@@ -3709,22 +4396,32 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3709
4396
|
Checkbox,
|
|
3710
4397
|
Combobox,
|
|
3711
4398
|
DatePicker,
|
|
4399
|
+
DescriptionList,
|
|
3712
4400
|
Divider,
|
|
3713
4401
|
Drawer,
|
|
3714
4402
|
DrawerClose,
|
|
3715
4403
|
DropdownMenu,
|
|
4404
|
+
DropdownMenuCheckboxItem,
|
|
3716
4405
|
DropdownMenuContent,
|
|
3717
4406
|
DropdownMenuGroup,
|
|
3718
4407
|
DropdownMenuItem,
|
|
3719
4408
|
DropdownMenuLabel,
|
|
4409
|
+
DropdownMenuRadioGroup,
|
|
4410
|
+
DropdownMenuRadioItem,
|
|
3720
4411
|
DropdownMenuSeparator,
|
|
4412
|
+
DropdownMenuSub,
|
|
4413
|
+
DropdownMenuSubContent,
|
|
4414
|
+
DropdownMenuSubTrigger,
|
|
3721
4415
|
DropdownMenuTrigger,
|
|
4416
|
+
ErrorSummary,
|
|
4417
|
+
FileUpload,
|
|
3722
4418
|
IconButton,
|
|
3723
4419
|
Input,
|
|
3724
4420
|
Link,
|
|
3725
4421
|
LocaleProvider,
|
|
3726
4422
|
Modal,
|
|
3727
4423
|
ModalClose,
|
|
4424
|
+
NumberInput,
|
|
3728
4425
|
Pagination,
|
|
3729
4426
|
PhoneNumberInput,
|
|
3730
4427
|
Popover,
|
|
@@ -3738,14 +4435,17 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3738
4435
|
Slider,
|
|
3739
4436
|
Spinner,
|
|
3740
4437
|
Stack,
|
|
4438
|
+
Stepper,
|
|
3741
4439
|
Switch,
|
|
3742
4440
|
Table,
|
|
3743
4441
|
TableBody,
|
|
3744
4442
|
TableCell,
|
|
4443
|
+
TableEmpty,
|
|
3745
4444
|
TableFooter,
|
|
3746
4445
|
TableHead,
|
|
3747
4446
|
TableHeader,
|
|
3748
4447
|
TableRow,
|
|
4448
|
+
TableSkeleton,
|
|
3749
4449
|
Tabs,
|
|
3750
4450
|
TabsContent,
|
|
3751
4451
|
TabsList,
|
|
@@ -3757,11 +4457,13 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3757
4457
|
Tooltip,
|
|
3758
4458
|
Typography,
|
|
3759
4459
|
VerificationCodeInput,
|
|
4460
|
+
VisuallyHidden,
|
|
3760
4461
|
composeExtraAddress,
|
|
3761
4462
|
contrastRatio,
|
|
3762
4463
|
createIntentColors,
|
|
3763
4464
|
createTheme,
|
|
3764
4465
|
en,
|
|
4466
|
+
focusField,
|
|
3765
4467
|
formatBusinessNumber,
|
|
3766
4468
|
formatKoreanAmount,
|
|
3767
4469
|
formatKoreanDate,
|
|
@@ -3774,6 +4476,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react46.forwardRef)(
|
|
|
3774
4476
|
toISODate,
|
|
3775
4477
|
useMessages,
|
|
3776
4478
|
usePortalProps,
|
|
4479
|
+
useTableSelection,
|
|
3777
4480
|
useTheme,
|
|
3778
4481
|
useToast,
|
|
3779
4482
|
vars
|