@bestow-ui/react 0.6.0 → 0.7.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/dist/index.cjs +294 -188
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +130 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +46 -1
- package/dist/index.d.ts +46 -1
- package/dist/index.js +268 -165
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/dist/index.cjs
CHANGED
|
@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
// src/index.ts
|
|
32
32
|
var index_exports = {};
|
|
33
33
|
__export(index_exports, {
|
|
34
|
+
Avatar: () => Avatar,
|
|
34
35
|
Badge: () => Badge,
|
|
35
36
|
Button: () => Button,
|
|
36
37
|
Card: () => Card,
|
|
@@ -38,11 +39,13 @@ __export(index_exports, {
|
|
|
38
39
|
CardFooter: () => CardFooter,
|
|
39
40
|
CardHeader: () => CardHeader,
|
|
40
41
|
Checkbox: () => Checkbox,
|
|
42
|
+
Divider: () => Divider,
|
|
41
43
|
Input: () => Input,
|
|
42
44
|
Modal: () => Modal,
|
|
43
45
|
ModalClose: () => ModalClose,
|
|
44
46
|
RadioGroup: () => RadioGroup,
|
|
45
47
|
Select: () => Select,
|
|
48
|
+
Skeleton: () => Skeleton,
|
|
46
49
|
Spinner: () => Spinner,
|
|
47
50
|
Stack: () => Stack,
|
|
48
51
|
Switch: () => Switch,
|
|
@@ -270,55 +273,83 @@ function usePortalClassName() {
|
|
|
270
273
|
return usePortalProps().className;
|
|
271
274
|
}
|
|
272
275
|
|
|
273
|
-
// src/components/
|
|
276
|
+
// src/components/Avatar/Avatar.tsx
|
|
277
|
+
var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
|
|
278
|
+
var import_icons = require("@bestow-ui/icons");
|
|
274
279
|
var import_react2 = require("react");
|
|
275
280
|
|
|
276
|
-
// src/components/
|
|
281
|
+
// src/components/Avatar/Avatar.css.ts
|
|
277
282
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
278
|
-
var
|
|
283
|
+
var fallback = "_1fd2kp27";
|
|
284
|
+
var image = "_1fd2kp26";
|
|
285
|
+
var root2 = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
|
|
286
|
+
|
|
287
|
+
// src/components/Avatar/Avatar.tsx
|
|
288
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
289
|
+
function getInitials(name) {
|
|
290
|
+
const [a = "", b = ""] = name.trim().split(/\s+/);
|
|
291
|
+
const first = (word) => Array.from(word)[0] ?? "";
|
|
292
|
+
return (first(a) + first(b)).toUpperCase();
|
|
293
|
+
}
|
|
294
|
+
var Avatar = (0, import_react2.forwardRef)(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
|
|
295
|
+
const label3 = alt ?? name;
|
|
296
|
+
const a11y = label3 ? { role: "img", "aria-label": label3 } : { "aria-hidden": true };
|
|
297
|
+
const initials = name ? getInitials(name) : "";
|
|
298
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(RadixAvatar.Root, { ref, className: cx(root2({ size, shape }), className), ...a11y, ...rest, children: [
|
|
299
|
+
src && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadixAvatar.Image, { src, alt: "", className: image }),
|
|
300
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.UserIcon, { size: "60%" })) })
|
|
301
|
+
] });
|
|
302
|
+
});
|
|
303
|
+
|
|
304
|
+
// src/components/Badge/Badge.tsx
|
|
305
|
+
var import_react3 = require("react");
|
|
306
|
+
|
|
307
|
+
// src/components/Badge/Badge.css.ts
|
|
308
|
+
var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
309
|
+
var badge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb" }, size: { sm: "_1295cfnc", md: "_1295cfnd", lg: "_1295cfne" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
|
|
279
310
|
var icon = "_1295cfnf";
|
|
280
311
|
|
|
281
312
|
// src/components/Badge/Badge.tsx
|
|
282
|
-
var
|
|
283
|
-
var Badge = (0,
|
|
284
|
-
return /* @__PURE__ */ (0,
|
|
285
|
-
startIcon && /* @__PURE__ */ (0,
|
|
313
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
314
|
+
var Badge = (0, import_react3.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
316
|
+
startIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: icon, children: startIcon }),
|
|
286
317
|
children
|
|
287
318
|
] });
|
|
288
319
|
});
|
|
289
320
|
|
|
290
321
|
// src/components/Button/Button.tsx
|
|
291
|
-
var
|
|
322
|
+
var import_react5 = require("react");
|
|
292
323
|
|
|
293
324
|
// src/components/Spinner/Spinner.tsx
|
|
294
|
-
var
|
|
295
|
-
var
|
|
325
|
+
var import_icons2 = require("@bestow-ui/icons");
|
|
326
|
+
var import_react4 = require("react");
|
|
296
327
|
|
|
297
328
|
// src/styles/visuallyHidden.css.ts
|
|
298
329
|
var visuallyHidden = "_1kdtbw10";
|
|
299
330
|
|
|
300
331
|
// src/components/Spinner/Spinner.css.ts
|
|
301
|
-
var
|
|
302
|
-
var spinner = (0,
|
|
332
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
333
|
+
var spinner = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_4b5tg40", variantClassNames: { color: { current: "_4b5tg41", primary: "_4b5tg42", neutral: "_4b5tg43", danger: "_4b5tg44" }, size: { sm: "_4b5tg45", md: "_4b5tg46", lg: "_4b5tg47" } }, defaultVariants: { color: "current", size: "md" }, compoundVariants: [] });
|
|
303
334
|
|
|
304
335
|
// src/components/Spinner/Spinner.tsx
|
|
305
|
-
var
|
|
306
|
-
var Spinner = (0,
|
|
336
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
337
|
+
var Spinner = (0, import_react4.forwardRef)(function Spinner2({ size, color, label: label3 = "\uB85C\uB529 \uC911", className, ...rest }, ref) {
|
|
307
338
|
const a11y = label3 ? { role: "status" } : { "aria-hidden": true };
|
|
308
|
-
return /* @__PURE__ */ (0,
|
|
309
|
-
/* @__PURE__ */ (0,
|
|
310
|
-
label3 && /* @__PURE__ */ (0,
|
|
339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
|
|
340
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.LoaderIcon, { size: "100%" }),
|
|
341
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: visuallyHidden, children: label3 })
|
|
311
342
|
] });
|
|
312
343
|
});
|
|
313
344
|
|
|
314
345
|
// src/components/Button/Button.css.ts
|
|
315
|
-
var
|
|
316
|
-
var button = (0,
|
|
346
|
+
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
347
|
+
var button = (0, import_createRuntimeFn4.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: [] });
|
|
317
348
|
var icon2 = "xcekdai";
|
|
318
349
|
|
|
319
350
|
// src/components/Button/Button.tsx
|
|
320
|
-
var
|
|
321
|
-
var Button = (0,
|
|
351
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
352
|
+
var Button = (0, import_react5.forwardRef)(function Button2({ variant, color, size, fullWidth, startIcon, endIcon, loading, className, type = "button", onClick, children, ...rest }, ref) {
|
|
322
353
|
const handleClick = (event) => {
|
|
323
354
|
if (loading) {
|
|
324
355
|
event.preventDefault();
|
|
@@ -326,8 +357,8 @@ var Button = (0, import_react4.forwardRef)(function Button2({ variant, color, si
|
|
|
326
357
|
}
|
|
327
358
|
onClick?.(event);
|
|
328
359
|
};
|
|
329
|
-
const leading = loading ? /* @__PURE__ */ (0,
|
|
330
|
-
return /* @__PURE__ */ (0,
|
|
360
|
+
const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { size: "sm", label: "" }) : startIcon;
|
|
361
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
331
362
|
"button",
|
|
332
363
|
{
|
|
333
364
|
ref,
|
|
@@ -338,41 +369,41 @@ var Button = (0, import_react4.forwardRef)(function Button2({ variant, color, si
|
|
|
338
369
|
onClick: handleClick,
|
|
339
370
|
...rest,
|
|
340
371
|
children: [
|
|
341
|
-
leading && /* @__PURE__ */ (0,
|
|
372
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: icon2, children: leading }),
|
|
342
373
|
children,
|
|
343
|
-
endIcon && /* @__PURE__ */ (0,
|
|
374
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: icon2, children: endIcon })
|
|
344
375
|
]
|
|
345
376
|
}
|
|
346
377
|
);
|
|
347
378
|
});
|
|
348
379
|
|
|
349
380
|
// src/components/Card/Card.tsx
|
|
350
|
-
var
|
|
381
|
+
var import_react6 = require("react");
|
|
351
382
|
|
|
352
383
|
// src/components/Card/Card.css.ts
|
|
353
|
-
var
|
|
384
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
354
385
|
var body = "dnuf1u9";
|
|
355
|
-
var card = (0,
|
|
386
|
+
var card = (0, import_createRuntimeFn5.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: [] });
|
|
356
387
|
var footer = "dnuf1ua";
|
|
357
388
|
var header = "dnuf1u8";
|
|
358
389
|
|
|
359
390
|
// src/components/Card/Card.tsx
|
|
360
|
-
var
|
|
361
|
-
var Card = (0,
|
|
362
|
-
return /* @__PURE__ */ (0,
|
|
391
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
392
|
+
var Card = (0, import_react6.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
363
394
|
});
|
|
364
|
-
var CardHeader = (0,
|
|
365
|
-
return /* @__PURE__ */ (0,
|
|
395
|
+
var CardHeader = (0, import_react6.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
|
|
396
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cx(header, className), ...rest });
|
|
366
397
|
});
|
|
367
|
-
var CardBody = (0,
|
|
368
|
-
return /* @__PURE__ */ (0,
|
|
398
|
+
var CardBody = (0, import_react6.forwardRef)(function CardBody2({ className, ...rest }, ref) {
|
|
399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cx(body, className), ...rest });
|
|
369
400
|
});
|
|
370
|
-
var CardFooter = (0,
|
|
371
|
-
return /* @__PURE__ */ (0,
|
|
401
|
+
var CardFooter = (0, import_react6.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
|
|
402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cx(footer, className), ...rest });
|
|
372
403
|
});
|
|
373
404
|
|
|
374
405
|
// src/components/Checkbox/Checkbox.tsx
|
|
375
|
-
var
|
|
406
|
+
var import_react7 = require("react");
|
|
376
407
|
|
|
377
408
|
// src/utils/mergeRefs.ts
|
|
378
409
|
function mergeRefs(...refs) {
|
|
@@ -385,23 +416,23 @@ function mergeRefs(...refs) {
|
|
|
385
416
|
}
|
|
386
417
|
|
|
387
418
|
// src/components/Checkbox/Checkbox.css.ts
|
|
388
|
-
var
|
|
419
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
389
420
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
390
|
-
var control = (0,
|
|
421
|
+
var control = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
391
422
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
392
423
|
var input = "_1y7mzsn6";
|
|
393
|
-
var
|
|
424
|
+
var root3 = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
394
425
|
|
|
395
426
|
// src/components/Checkbox/Checkbox.tsx
|
|
396
|
-
var
|
|
397
|
-
var Checkbox = (0,
|
|
398
|
-
const innerRef = (0,
|
|
399
|
-
(0,
|
|
427
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
428
|
+
var Checkbox = (0, import_react7.forwardRef)(function Checkbox2({ label: label3, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
|
|
429
|
+
const innerRef = (0, import_react7.useRef)(null);
|
|
430
|
+
(0, import_react7.useEffect)(() => {
|
|
400
431
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
401
432
|
}, [indeterminate]);
|
|
402
|
-
return /* @__PURE__ */ (0,
|
|
403
|
-
/* @__PURE__ */ (0,
|
|
404
|
-
/* @__PURE__ */ (0,
|
|
433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: cx(root3({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
434
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: control({ size }), children: [
|
|
435
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
405
436
|
"input",
|
|
406
437
|
{
|
|
407
438
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -412,39 +443,62 @@ var Checkbox = (0, import_react6.forwardRef)(function Checkbox2({ label: label3,
|
|
|
412
443
|
...rest
|
|
413
444
|
}
|
|
414
445
|
),
|
|
415
|
-
/* @__PURE__ */ (0,
|
|
416
|
-
/* @__PURE__ */ (0,
|
|
446
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
447
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
417
448
|
] }),
|
|
418
449
|
label3
|
|
419
450
|
] });
|
|
420
451
|
});
|
|
421
452
|
|
|
453
|
+
// src/components/Divider/Divider.tsx
|
|
454
|
+
var import_react8 = require("react");
|
|
455
|
+
|
|
456
|
+
// src/components/Divider/Divider.css.ts
|
|
457
|
+
var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
458
|
+
var divider = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
459
|
+
var labeled = "_1t3gq8v3";
|
|
460
|
+
var line = "_1t3gq8v4";
|
|
461
|
+
|
|
462
|
+
// src/components/Divider/Divider.tsx
|
|
463
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
464
|
+
var Divider = (0, import_react8.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
|
|
465
|
+
if (children && orientation === "horizontal") {
|
|
466
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: cx(labeled, className), ...rest, children: [
|
|
467
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: line, "aria-hidden": true }),
|
|
468
|
+
children,
|
|
469
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: line, "aria-hidden": true })
|
|
470
|
+
] });
|
|
471
|
+
}
|
|
472
|
+
const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
|
|
473
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
|
|
474
|
+
});
|
|
475
|
+
|
|
422
476
|
// src/components/Input/Input.tsx
|
|
423
|
-
var
|
|
477
|
+
var import_react9 = require("react");
|
|
424
478
|
|
|
425
479
|
// src/components/Input/Input.css.ts
|
|
426
|
-
var
|
|
480
|
+
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
427
481
|
var adornment = "_19p5zvh6";
|
|
428
482
|
var field = "_19p5zvh7";
|
|
429
483
|
var fieldFullWidth = "_19p5zvh8";
|
|
430
|
-
var helperText = (0,
|
|
484
|
+
var helperText = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
431
485
|
var input2 = "_19p5zvh5";
|
|
432
486
|
var label = "_19p5zvh9";
|
|
433
487
|
var requiredMark = "_19p5zvha";
|
|
434
|
-
var
|
|
488
|
+
var root4 = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
435
489
|
|
|
436
490
|
// src/components/Input/Input.tsx
|
|
437
|
-
var
|
|
438
|
-
var Input = (0,
|
|
439
|
-
return /* @__PURE__ */ (0,
|
|
491
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
492
|
+
var Input = (0, import_react9.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
440
494
|
"div",
|
|
441
495
|
{
|
|
442
|
-
className: cx(
|
|
496
|
+
className: cx(root4({ size, fullWidth }), rootClassName),
|
|
443
497
|
"data-invalid": invalid || void 0,
|
|
444
498
|
"data-disabled": disabled || void 0,
|
|
445
499
|
children: [
|
|
446
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
447
|
-
/* @__PURE__ */ (0,
|
|
500
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: adornment, children: startAdornment }),
|
|
501
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
448
502
|
"input",
|
|
449
503
|
{
|
|
450
504
|
ref,
|
|
@@ -454,25 +508,25 @@ var Input = (0, import_react7.forwardRef)(function Input2({ size, invalid, fullW
|
|
|
454
508
|
...rest
|
|
455
509
|
}
|
|
456
510
|
),
|
|
457
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
511
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: adornment, children: endAdornment })
|
|
458
512
|
]
|
|
459
513
|
}
|
|
460
514
|
);
|
|
461
515
|
});
|
|
462
516
|
|
|
463
517
|
// src/components/Input/TextField.tsx
|
|
464
|
-
var
|
|
465
|
-
var
|
|
466
|
-
var TextField = (0,
|
|
467
|
-
const generatedId = (0,
|
|
518
|
+
var import_react10 = require("react");
|
|
519
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
520
|
+
var TextField = (0, import_react10.forwardRef)(function TextField2({ label: label3, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
|
|
521
|
+
const generatedId = (0, import_react10.useId)();
|
|
468
522
|
const inputId = id ?? generatedId;
|
|
469
523
|
const helperId = helperText2 ? `${inputId}-helper` : void 0;
|
|
470
|
-
return /* @__PURE__ */ (0,
|
|
471
|
-
label3 && /* @__PURE__ */ (0,
|
|
524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
525
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { htmlFor: inputId, className: label, children: [
|
|
472
526
|
label3,
|
|
473
|
-
required && /* @__PURE__ */ (0,
|
|
527
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
474
528
|
] }),
|
|
475
|
-
/* @__PURE__ */ (0,
|
|
529
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
476
530
|
Input,
|
|
477
531
|
{
|
|
478
532
|
ref,
|
|
@@ -484,19 +538,19 @@ var TextField = (0, import_react8.forwardRef)(function TextField2({ label: label
|
|
|
484
538
|
...rest
|
|
485
539
|
}
|
|
486
540
|
),
|
|
487
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
541
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
488
542
|
] });
|
|
489
543
|
});
|
|
490
544
|
|
|
491
545
|
// src/components/Modal/Modal.tsx
|
|
492
546
|
var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
493
|
-
var
|
|
547
|
+
var import_icons3 = require("@bestow-ui/icons");
|
|
494
548
|
|
|
495
549
|
// src/components/Modal/Modal.css.ts
|
|
496
|
-
var
|
|
550
|
+
var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
497
551
|
var body2 = "_1pdsmv0a";
|
|
498
552
|
var closeButton = "_1pdsmv09";
|
|
499
|
-
var content = (0,
|
|
553
|
+
var content = (0, import_createRuntimeFn9.createRuntimeFn)({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
500
554
|
var description = "_1pdsmv08";
|
|
501
555
|
var footer2 = "_1pdsmv0b";
|
|
502
556
|
var header2 = "_1pdsmv05";
|
|
@@ -505,7 +559,7 @@ var overlay = "_1pdsmv00";
|
|
|
505
559
|
var title = "_1pdsmv07";
|
|
506
560
|
|
|
507
561
|
// src/components/Modal/Modal.tsx
|
|
508
|
-
var
|
|
562
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
509
563
|
function Modal({
|
|
510
564
|
open,
|
|
511
565
|
defaultOpen,
|
|
@@ -521,11 +575,11 @@ function Modal({
|
|
|
521
575
|
className
|
|
522
576
|
}) {
|
|
523
577
|
const portal2 = usePortalProps();
|
|
524
|
-
return /* @__PURE__ */ (0,
|
|
525
|
-
trigger2 && /* @__PURE__ */ (0,
|
|
526
|
-
/* @__PURE__ */ (0,
|
|
527
|
-
/* @__PURE__ */ (0,
|
|
528
|
-
/* @__PURE__ */ (0,
|
|
578
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
579
|
+
trigger2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog.Trigger, { asChild: true, children: trigger2 }),
|
|
580
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Dialog.Portal, { children: [
|
|
581
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
582
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
529
583
|
Dialog.Content,
|
|
530
584
|
{
|
|
531
585
|
className: cx(portal2.className, content({ size }), className),
|
|
@@ -533,15 +587,15 @@ function Modal({
|
|
|
533
587
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
534
588
|
...description4 ? {} : { "aria-describedby": void 0 },
|
|
535
589
|
children: [
|
|
536
|
-
/* @__PURE__ */ (0,
|
|
537
|
-
/* @__PURE__ */ (0,
|
|
538
|
-
/* @__PURE__ */ (0,
|
|
539
|
-
description4 && /* @__PURE__ */ (0,
|
|
590
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: header2, children: [
|
|
591
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: headings, children: [
|
|
592
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog.Title, { className: title, children: title3 }),
|
|
593
|
+
description4 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog.Description, { className: description, children: description4 })
|
|
540
594
|
] }),
|
|
541
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
595
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons3.XIcon, { size: 16 }) })
|
|
542
596
|
] }),
|
|
543
|
-
children && /* @__PURE__ */ (0,
|
|
544
|
-
footer4 && /* @__PURE__ */ (0,
|
|
597
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: body2, children }),
|
|
598
|
+
footer4 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: footer2, children: footer4 })
|
|
545
599
|
]
|
|
546
600
|
}
|
|
547
601
|
)
|
|
@@ -552,22 +606,22 @@ var ModalClose = Dialog.Close;
|
|
|
552
606
|
|
|
553
607
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
554
608
|
var RadixRadioGroup = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
555
|
-
var
|
|
609
|
+
var import_react11 = require("react");
|
|
556
610
|
|
|
557
611
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
558
|
-
var
|
|
612
|
+
var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
559
613
|
var description2 = "_1w9iwjmd";
|
|
560
614
|
var groupLabel = "_1w9iwjme";
|
|
561
615
|
var indicator = "_1w9iwjma";
|
|
562
|
-
var items = (0,
|
|
616
|
+
var items = (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
563
617
|
var labelText = "_1w9iwjmc";
|
|
564
|
-
var option = (0,
|
|
565
|
-
var radio = (0,
|
|
618
|
+
var option = (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
619
|
+
var radio = (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
566
620
|
var text = "_1w9iwjmb";
|
|
567
621
|
|
|
568
622
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
569
|
-
var
|
|
570
|
-
var RadioGroup = (0,
|
|
623
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
624
|
+
var RadioGroup = (0, import_react11.forwardRef)(function RadioGroup2(props, ref) {
|
|
571
625
|
const {
|
|
572
626
|
options,
|
|
573
627
|
value: value2,
|
|
@@ -586,16 +640,16 @@ var RadioGroup = (0, import_react9.forwardRef)(function RadioGroup2(props, ref)
|
|
|
586
640
|
className
|
|
587
641
|
} = props;
|
|
588
642
|
const isControlled = "value" in props;
|
|
589
|
-
const generatedId = (0,
|
|
643
|
+
const generatedId = (0, import_react11.useId)();
|
|
590
644
|
const baseId = id ?? generatedId;
|
|
591
645
|
const labelId = label3 ? `${baseId}-label` : void 0;
|
|
592
646
|
const helperId = helperText2 ? `${baseId}-helper` : void 0;
|
|
593
|
-
return /* @__PURE__ */ (0,
|
|
594
|
-
label3 && /* @__PURE__ */ (0,
|
|
647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cx(field, className), children: [
|
|
648
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { id: labelId, className: cx(label, groupLabel), children: [
|
|
595
649
|
label3,
|
|
596
|
-
required && /* @__PURE__ */ (0,
|
|
650
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
597
651
|
] }),
|
|
598
|
-
/* @__PURE__ */ (0,
|
|
652
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
599
653
|
RadixRadioGroup.Root,
|
|
600
654
|
{
|
|
601
655
|
ref,
|
|
@@ -616,8 +670,8 @@ var RadioGroup = (0, import_react9.forwardRef)(function RadioGroup2(props, ref)
|
|
|
616
670
|
const itemId = `${baseId}-${option2.value}`;
|
|
617
671
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
618
672
|
const itemDisabled = disabled || option2.disabled;
|
|
619
|
-
return /* @__PURE__ */ (0,
|
|
620
|
-
/* @__PURE__ */ (0,
|
|
673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
|
|
674
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
621
675
|
RadixRadioGroup.Item,
|
|
622
676
|
{
|
|
623
677
|
id: itemId,
|
|
@@ -625,25 +679,25 @@ var RadioGroup = (0, import_react9.forwardRef)(function RadioGroup2(props, ref)
|
|
|
625
679
|
disabled: option2.disabled,
|
|
626
680
|
"aria-describedby": descriptionId,
|
|
627
681
|
className: radio({ size }),
|
|
628
|
-
children: /* @__PURE__ */ (0,
|
|
682
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixRadioGroup.Indicator, { className: indicator })
|
|
629
683
|
}
|
|
630
684
|
),
|
|
631
|
-
/* @__PURE__ */ (0,
|
|
632
|
-
/* @__PURE__ */ (0,
|
|
633
|
-
option2.description && /* @__PURE__ */ (0,
|
|
685
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: text, children: [
|
|
686
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
|
|
687
|
+
option2.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: descriptionId, className: description2, children: option2.description })
|
|
634
688
|
] })
|
|
635
689
|
] }, option2.value);
|
|
636
690
|
})
|
|
637
691
|
}
|
|
638
692
|
),
|
|
639
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
693
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
640
694
|
] });
|
|
641
695
|
});
|
|
642
696
|
|
|
643
697
|
// src/components/Select/Select.tsx
|
|
644
698
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
645
|
-
var
|
|
646
|
-
var
|
|
699
|
+
var import_react12 = require("react");
|
|
700
|
+
var import_icons4 = require("@bestow-ui/icons");
|
|
647
701
|
|
|
648
702
|
// src/components/Select/Select.css.ts
|
|
649
703
|
var content2 = "_1kx81e83";
|
|
@@ -655,8 +709,8 @@ var value = "_1kx81e81";
|
|
|
655
709
|
var viewport = "_1kx81e84";
|
|
656
710
|
|
|
657
711
|
// src/components/Select/Select.tsx
|
|
658
|
-
var
|
|
659
|
-
var Select = (0,
|
|
712
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
713
|
+
var Select = (0, import_react12.forwardRef)(function Select2(props, ref) {
|
|
660
714
|
const {
|
|
661
715
|
options,
|
|
662
716
|
value: value2,
|
|
@@ -676,16 +730,16 @@ var Select = (0, import_react10.forwardRef)(function Select2(props, ref) {
|
|
|
676
730
|
className
|
|
677
731
|
} = props;
|
|
678
732
|
const isControlled = "value" in props;
|
|
679
|
-
const generatedId = (0,
|
|
733
|
+
const generatedId = (0, import_react12.useId)();
|
|
680
734
|
const triggerId = id ?? generatedId;
|
|
681
735
|
const helperId = helperText2 ? `${triggerId}-helper` : void 0;
|
|
682
736
|
const portal2 = usePortalProps();
|
|
683
|
-
return /* @__PURE__ */ (0,
|
|
684
|
-
label3 && /* @__PURE__ */ (0,
|
|
737
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
738
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { htmlFor: triggerId, className: label, children: [
|
|
685
739
|
label3,
|
|
686
|
-
required && /* @__PURE__ */ (0,
|
|
740
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
687
741
|
] }),
|
|
688
|
-
/* @__PURE__ */ (0,
|
|
742
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
689
743
|
RadixSelect.Root,
|
|
690
744
|
{
|
|
691
745
|
value: isControlled ? value2 ?? "" : void 0,
|
|
@@ -695,7 +749,7 @@ var Select = (0, import_react10.forwardRef)(function Select2(props, ref) {
|
|
|
695
749
|
required,
|
|
696
750
|
name,
|
|
697
751
|
children: [
|
|
698
|
-
/* @__PURE__ */ (0,
|
|
752
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
699
753
|
RadixSelect.Trigger,
|
|
700
754
|
{
|
|
701
755
|
ref,
|
|
@@ -704,14 +758,14 @@ var Select = (0, import_react10.forwardRef)(function Select2(props, ref) {
|
|
|
704
758
|
"aria-invalid": error || void 0,
|
|
705
759
|
"aria-describedby": helperId,
|
|
706
760
|
"data-invalid": error || void 0,
|
|
707
|
-
className: cx(
|
|
761
|
+
className: cx(root4({ size, fullWidth }), trigger, className),
|
|
708
762
|
children: [
|
|
709
|
-
/* @__PURE__ */ (0,
|
|
710
|
-
/* @__PURE__ */ (0,
|
|
763
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.Value, { placeholder }) }),
|
|
764
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons4.ChevronDownIcon, { size: 16 }) })
|
|
711
765
|
]
|
|
712
766
|
}
|
|
713
767
|
),
|
|
714
|
-
/* @__PURE__ */ (0,
|
|
768
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
715
769
|
RadixSelect.Content,
|
|
716
770
|
{
|
|
717
771
|
position: "popper",
|
|
@@ -719,15 +773,15 @@ var Select = (0, import_react10.forwardRef)(function Select2(props, ref) {
|
|
|
719
773
|
collisionPadding: 8,
|
|
720
774
|
className: cx(portal2.className, content2),
|
|
721
775
|
style: portal2.style,
|
|
722
|
-
children: /* @__PURE__ */ (0,
|
|
776
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
723
777
|
RadixSelect.Item,
|
|
724
778
|
{
|
|
725
779
|
value: option2.value,
|
|
726
780
|
disabled: option2.disabled,
|
|
727
781
|
className: item,
|
|
728
782
|
children: [
|
|
729
|
-
/* @__PURE__ */ (0,
|
|
730
|
-
/* @__PURE__ */ (0,
|
|
783
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.ItemText, { children: option2.label }),
|
|
784
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons4.CheckIcon, { size: 16 }) })
|
|
731
785
|
]
|
|
732
786
|
},
|
|
733
787
|
option2.value
|
|
@@ -737,21 +791,70 @@ var Select = (0, import_react10.forwardRef)(function Select2(props, ref) {
|
|
|
737
791
|
]
|
|
738
792
|
}
|
|
739
793
|
),
|
|
740
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
794
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
741
795
|
] });
|
|
742
796
|
});
|
|
743
797
|
|
|
798
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
799
|
+
var import_dynamic2 = require("@vanilla-extract/dynamic");
|
|
800
|
+
var import_react13 = require("react");
|
|
801
|
+
|
|
802
|
+
// src/components/Skeleton/Skeleton.css.ts
|
|
803
|
+
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
804
|
+
var height = "var(--_1s8datd1)";
|
|
805
|
+
var lines = "_1s8datd6";
|
|
806
|
+
var skeleton = (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
|
|
807
|
+
var width = "var(--_1s8datd0)";
|
|
808
|
+
|
|
809
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
810
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
811
|
+
var toCss = (value2) => typeof value2 === "number" ? `${value2}px` : value2;
|
|
812
|
+
var Skeleton = (0, import_react13.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
|
|
813
|
+
const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
|
|
814
|
+
const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
|
|
815
|
+
if (variant === "text" && lines2 > 1) {
|
|
816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
817
|
+
"span",
|
|
818
|
+
{
|
|
819
|
+
ref,
|
|
820
|
+
"aria-hidden": true,
|
|
821
|
+
className: cx(lines, className),
|
|
822
|
+
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w }), ...style },
|
|
823
|
+
...rest,
|
|
824
|
+
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
825
|
+
"span",
|
|
826
|
+
{
|
|
827
|
+
className: skeleton({ variant }),
|
|
828
|
+
style: (0, import_dynamic2.assignInlineVars)({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
|
|
829
|
+
},
|
|
830
|
+
i
|
|
831
|
+
))
|
|
832
|
+
}
|
|
833
|
+
);
|
|
834
|
+
}
|
|
835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
836
|
+
"span",
|
|
837
|
+
{
|
|
838
|
+
ref,
|
|
839
|
+
"aria-hidden": true,
|
|
840
|
+
className: cx(skeleton({ variant }), className),
|
|
841
|
+
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w, [height]: h }), ...style },
|
|
842
|
+
...rest
|
|
843
|
+
}
|
|
844
|
+
);
|
|
845
|
+
});
|
|
846
|
+
|
|
744
847
|
// src/components/Stack/Stack.tsx
|
|
745
|
-
var
|
|
848
|
+
var import_react14 = require("react");
|
|
746
849
|
|
|
747
850
|
// src/components/Stack/Stack.css.ts
|
|
748
|
-
var
|
|
749
|
-
var stack = (0,
|
|
851
|
+
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
852
|
+
var stack = (0, import_createRuntimeFn12.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: [] });
|
|
750
853
|
|
|
751
854
|
// src/components/Stack/Stack.tsx
|
|
752
|
-
var
|
|
753
|
-
var Stack = (0,
|
|
754
|
-
return /* @__PURE__ */ (0,
|
|
855
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
856
|
+
var Stack = (0, import_react14.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
857
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
755
858
|
Component,
|
|
756
859
|
{
|
|
757
860
|
ref,
|
|
@@ -763,22 +866,22 @@ var Stack = (0, import_react11.forwardRef)(function Stack2({ as: Component = "di
|
|
|
763
866
|
|
|
764
867
|
// src/components/Switch/Switch.tsx
|
|
765
868
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
766
|
-
var
|
|
869
|
+
var import_react15 = require("react");
|
|
767
870
|
|
|
768
871
|
// src/components/Switch/Switch.css.ts
|
|
769
|
-
var
|
|
872
|
+
var import_createRuntimeFn13 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
770
873
|
var label2 = "o33ul29";
|
|
771
|
-
var
|
|
772
|
-
var thumb = (0,
|
|
773
|
-
var track = (0,
|
|
874
|
+
var root5 = (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
875
|
+
var thumb = (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
876
|
+
var track = (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
774
877
|
|
|
775
878
|
// src/components/Switch/Switch.tsx
|
|
776
|
-
var
|
|
777
|
-
var Switch = (0,
|
|
778
|
-
const generatedId = (0,
|
|
879
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
880
|
+
var Switch = (0, import_react15.forwardRef)(function Switch2({ label: label3, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
|
|
881
|
+
const generatedId = (0, import_react15.useId)();
|
|
779
882
|
const switchId = id ?? generatedId;
|
|
780
|
-
return /* @__PURE__ */ (0,
|
|
781
|
-
/* @__PURE__ */ (0,
|
|
883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: cx(root5({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
884
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
782
885
|
RadixSwitch.Root,
|
|
783
886
|
{
|
|
784
887
|
ref,
|
|
@@ -787,28 +890,28 @@ var Switch = (0, import_react12.forwardRef)(function Switch2({ label: label3, si
|
|
|
787
890
|
"aria-label": ariaLabel,
|
|
788
891
|
className: track({ size }),
|
|
789
892
|
...rest,
|
|
790
|
-
children: /* @__PURE__ */ (0,
|
|
893
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixSwitch.Thumb, { className: thumb({ size }) })
|
|
791
894
|
}
|
|
792
895
|
),
|
|
793
|
-
label3 && /* @__PURE__ */ (0,
|
|
896
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: switchId, className: label2, children: label3 })
|
|
794
897
|
] });
|
|
795
898
|
});
|
|
796
899
|
|
|
797
900
|
// src/components/Textarea/Textarea.tsx
|
|
798
|
-
var
|
|
901
|
+
var import_react16 = require("react");
|
|
799
902
|
|
|
800
903
|
// src/components/Textarea/Textarea.css.ts
|
|
801
|
-
var
|
|
904
|
+
var import_createRuntimeFn14 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
802
905
|
var count = "_1koawa9";
|
|
803
906
|
var countOver = "_1koawaa";
|
|
804
907
|
var defaultWidth = "_1koawa7";
|
|
805
908
|
var footer3 = "_1koawa8";
|
|
806
|
-
var textarea = (0,
|
|
909
|
+
var textarea = (0, import_createRuntimeFn14.createRuntimeFn)({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
|
|
807
910
|
|
|
808
911
|
// src/components/Textarea/Textarea.tsx
|
|
809
|
-
var
|
|
810
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
811
|
-
var Textarea = (0,
|
|
912
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
913
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react16.useLayoutEffect : import_react16.useEffect;
|
|
914
|
+
var Textarea = (0, import_react16.forwardRef)(function Textarea2({
|
|
812
915
|
label: label3,
|
|
813
916
|
helperText: helperText2,
|
|
814
917
|
error,
|
|
@@ -829,13 +932,13 @@ var Textarea = (0, import_react13.forwardRef)(function Textarea2({
|
|
|
829
932
|
"aria-describedby": ariaDescribedBy,
|
|
830
933
|
...rest
|
|
831
934
|
}, ref) {
|
|
832
|
-
const generatedId = (0,
|
|
935
|
+
const generatedId = (0, import_react16.useId)();
|
|
833
936
|
const textareaId = id ?? generatedId;
|
|
834
937
|
const helperId = helperText2 ? `${textareaId}-helper` : void 0;
|
|
835
|
-
const innerRef = (0,
|
|
836
|
-
const [uncontrolledLength, setUncontrolledLength] = (0,
|
|
938
|
+
const innerRef = (0, import_react16.useRef)(null);
|
|
939
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react16.useState)(() => String(defaultValue ?? "").length);
|
|
837
940
|
const length = value2 !== void 0 ? String(value2).length : uncontrolledLength;
|
|
838
|
-
const fitHeight = (0,
|
|
941
|
+
const fitHeight = (0, import_react16.useCallback)(() => {
|
|
839
942
|
const el = innerRef.current;
|
|
840
943
|
if (!autoResize || !el) return;
|
|
841
944
|
el.style.height = "auto";
|
|
@@ -848,12 +951,12 @@ var Textarea = (0, import_react13.forwardRef)(function Textarea2({
|
|
|
848
951
|
fitHeight();
|
|
849
952
|
onChange?.(event);
|
|
850
953
|
};
|
|
851
|
-
return /* @__PURE__ */ (0,
|
|
852
|
-
label3 && /* @__PURE__ */ (0,
|
|
954
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
955
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { htmlFor: textareaId, className: label, children: [
|
|
853
956
|
label3,
|
|
854
|
-
required && /* @__PURE__ */ (0,
|
|
957
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
855
958
|
] }),
|
|
856
|
-
/* @__PURE__ */ (0,
|
|
959
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
857
960
|
"textarea",
|
|
858
961
|
{
|
|
859
962
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -875,49 +978,49 @@ var Textarea = (0, import_react13.forwardRef)(function Textarea2({
|
|
|
875
978
|
...rest
|
|
876
979
|
}
|
|
877
980
|
),
|
|
878
|
-
(helperText2 || showCount) && /* @__PURE__ */ (0,
|
|
879
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
880
|
-
showCount && /* @__PURE__ */ (0,
|
|
981
|
+
(helperText2 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: footer3, children: [
|
|
982
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 }),
|
|
983
|
+
showCount && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
|
|
881
984
|
] })
|
|
882
985
|
] });
|
|
883
986
|
});
|
|
884
987
|
|
|
885
988
|
// src/components/Toast/Toast.tsx
|
|
886
989
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
887
|
-
var
|
|
888
|
-
var
|
|
990
|
+
var import_react17 = require("react");
|
|
991
|
+
var import_icons5 = require("@bestow-ui/icons");
|
|
889
992
|
|
|
890
993
|
// src/components/Toast/Toast.css.ts
|
|
891
|
-
var
|
|
994
|
+
var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
892
995
|
var action = "_1g11zvx7";
|
|
893
996
|
var close = "_1g11zvx8";
|
|
894
997
|
var description3 = "_1g11zvx6";
|
|
895
998
|
var title2 = "_1g11zvx5";
|
|
896
|
-
var toast = (0,
|
|
999
|
+
var toast = (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
|
|
897
1000
|
var viewport2 = "_1g11zvx0";
|
|
898
1001
|
|
|
899
1002
|
// src/components/Toast/Toast.tsx
|
|
900
|
-
var
|
|
1003
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
901
1004
|
var REMOVE_DELAY = 500;
|
|
902
|
-
var ToastContext = (0,
|
|
1005
|
+
var ToastContext = (0, import_react17.createContext)(null);
|
|
903
1006
|
function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC" }) {
|
|
904
|
-
const [toasts, setToasts] = (0,
|
|
905
|
-
const nextId = (0,
|
|
1007
|
+
const [toasts, setToasts] = (0, import_react17.useState)([]);
|
|
1008
|
+
const nextId = (0, import_react17.useRef)(0);
|
|
906
1009
|
const portal2 = usePortalProps();
|
|
907
|
-
const toast2 = (0,
|
|
1010
|
+
const toast2 = (0, import_react17.useCallback)((options) => {
|
|
908
1011
|
const id = nextId.current++;
|
|
909
1012
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
910
1013
|
return id;
|
|
911
1014
|
}, []);
|
|
912
|
-
const dismiss = (0,
|
|
1015
|
+
const dismiss = (0, import_react17.useCallback)((id) => {
|
|
913
1016
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
914
1017
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
915
1018
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
916
1019
|
}, []);
|
|
917
|
-
const value2 = (0,
|
|
918
|
-
return /* @__PURE__ */ (0,
|
|
1020
|
+
const value2 = (0, import_react17.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
1021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(RadixToast.Provider, { duration, label: label3, swipeDirection: "right", children: [
|
|
919
1022
|
children,
|
|
920
|
-
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0,
|
|
1023
|
+
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
921
1024
|
RadixToast.Root,
|
|
922
1025
|
{
|
|
923
1026
|
open,
|
|
@@ -927,19 +1030,19 @@ function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC
|
|
|
927
1030
|
},
|
|
928
1031
|
className: toast({ variant }),
|
|
929
1032
|
children: [
|
|
930
|
-
/* @__PURE__ */ (0,
|
|
931
|
-
description4 && /* @__PURE__ */ (0,
|
|
932
|
-
action2 && /* @__PURE__ */ (0,
|
|
933
|
-
/* @__PURE__ */ (0,
|
|
1033
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadixToast.Title, { className: title2, children: title3 }),
|
|
1034
|
+
description4 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadixToast.Description, { className: description3, children: description4 }),
|
|
1035
|
+
action2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
|
|
1036
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons5.XIcon, { size: 16 }) })
|
|
934
1037
|
]
|
|
935
1038
|
},
|
|
936
1039
|
id
|
|
937
1040
|
)),
|
|
938
|
-
/* @__PURE__ */ (0,
|
|
1041
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
939
1042
|
] }) });
|
|
940
1043
|
}
|
|
941
1044
|
function useToast() {
|
|
942
|
-
const context = (0,
|
|
1045
|
+
const context = (0, import_react17.useContext)(ToastContext);
|
|
943
1046
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
944
1047
|
return context;
|
|
945
1048
|
}
|
|
@@ -952,7 +1055,7 @@ var arrow = "z7rufs1";
|
|
|
952
1055
|
var content3 = "z7rufs0";
|
|
953
1056
|
|
|
954
1057
|
// src/components/Tooltip/Tooltip.tsx
|
|
955
|
-
var
|
|
1058
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
956
1059
|
function Tooltip({
|
|
957
1060
|
content: content4,
|
|
958
1061
|
children,
|
|
@@ -967,9 +1070,9 @@ function Tooltip({
|
|
|
967
1070
|
}) {
|
|
968
1071
|
const portal2 = usePortalProps();
|
|
969
1072
|
if (disabled || content4 == null || content4 === "") return children;
|
|
970
|
-
return /* @__PURE__ */ (0,
|
|
971
|
-
/* @__PURE__ */ (0,
|
|
972
|
-
/* @__PURE__ */ (0,
|
|
1073
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1074
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
|
|
1075
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
973
1076
|
RadixTooltip.Content,
|
|
974
1077
|
{
|
|
975
1078
|
side,
|
|
@@ -980,7 +1083,7 @@ function Tooltip({
|
|
|
980
1083
|
style: portal2.style,
|
|
981
1084
|
children: [
|
|
982
1085
|
content4,
|
|
983
|
-
/* @__PURE__ */ (0,
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
|
|
984
1087
|
]
|
|
985
1088
|
}
|
|
986
1089
|
) })
|
|
@@ -988,14 +1091,14 @@ function Tooltip({
|
|
|
988
1091
|
}
|
|
989
1092
|
|
|
990
1093
|
// src/components/Typography/Typography.tsx
|
|
991
|
-
var
|
|
1094
|
+
var import_react18 = require("react");
|
|
992
1095
|
|
|
993
1096
|
// src/components/Typography/Typography.css.ts
|
|
994
|
-
var
|
|
995
|
-
var typography = (0,
|
|
1097
|
+
var import_createRuntimeFn16 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1098
|
+
var typography = (0, import_createRuntimeFn16.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", inherit: "kioliog" }, weight: { regular: "kiolioh", medium: "kiolioi", semibold: "kiolioj", bold: "kioliok" }, align: { start: "kioliol", center: "kioliom", end: "kiolion" }, truncate: { true: "kiolioo" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
|
|
996
1099
|
|
|
997
1100
|
// src/components/Typography/Typography.tsx
|
|
998
|
-
var
|
|
1101
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
999
1102
|
var defaultElement = {
|
|
1000
1103
|
display: "h1",
|
|
1001
1104
|
h1: "h1",
|
|
@@ -1007,9 +1110,9 @@ var defaultElement = {
|
|
|
1007
1110
|
"body-sm": "p",
|
|
1008
1111
|
caption: "span"
|
|
1009
1112
|
};
|
|
1010
|
-
var Typography = (0,
|
|
1113
|
+
var Typography = (0, import_react18.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
1011
1114
|
const Component = as ?? defaultElement[variant];
|
|
1012
|
-
return /* @__PURE__ */ (0,
|
|
1115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1013
1116
|
Component,
|
|
1014
1117
|
{
|
|
1015
1118
|
ref,
|
|
@@ -1020,6 +1123,7 @@ var Typography = (0, import_react15.forwardRef)(function Typography2({ variant =
|
|
|
1020
1123
|
});
|
|
1021
1124
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1022
1125
|
0 && (module.exports = {
|
|
1126
|
+
Avatar,
|
|
1023
1127
|
Badge,
|
|
1024
1128
|
Button,
|
|
1025
1129
|
Card,
|
|
@@ -1027,11 +1131,13 @@ var Typography = (0, import_react15.forwardRef)(function Typography2({ variant =
|
|
|
1027
1131
|
CardFooter,
|
|
1028
1132
|
CardHeader,
|
|
1029
1133
|
Checkbox,
|
|
1134
|
+
Divider,
|
|
1030
1135
|
Input,
|
|
1031
1136
|
Modal,
|
|
1032
1137
|
ModalClose,
|
|
1033
1138
|
RadioGroup,
|
|
1034
1139
|
Select,
|
|
1140
|
+
Skeleton,
|
|
1035
1141
|
Spinner,
|
|
1036
1142
|
Stack,
|
|
1037
1143
|
Switch,
|