@bestow-ui/react 0.6.0 → 0.7.0

package/dist/index.js

@@ -206,55 +206,83 @@ function usePortalClassName() {
   return usePortalProps().className;
 }
 
-// src/components/Badge/Badge.tsx
+// src/components/Avatar/Avatar.tsx
+import * as RadixAvatar from "@radix-ui/react-avatar";
+import { UserIcon } from "@bestow-ui/icons";
 import { forwardRef as forwardRef2 } from "react";
 
-// src/components/Badge/Badge.css.ts
+// src/components/Avatar/Avatar.css.ts
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var badge = _7a468({ 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: [] });
+var fallback = "_1fd2kp27";
+var image = "_1fd2kp26";
+var root2 = _7a468({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
+
+// src/components/Avatar/Avatar.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function getInitials(name) {
+  const [a = "", b = ""] = name.trim().split(/\s+/);
+  const first = (word) => Array.from(word)[0] ?? "";
+  return (first(a) + first(b)).toUpperCase();
+}
+var Avatar = forwardRef2(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
+  const label3 = alt ?? name;
+  const a11y = label3 ? { role: "img", "aria-label": label3 } : { "aria-hidden": true };
+  const initials = name ? getInitials(name) : "";
+  return /* @__PURE__ */ jsxs(RadixAvatar.Root, { ref, className: cx(root2({ size, shape }), className), ...a11y, ...rest, children: [
+    src && /* @__PURE__ */ jsx2(RadixAvatar.Image, { src, alt: "", className: image }),
+    /* @__PURE__ */ jsx2(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ jsx2(UserIcon, { size: "60%" })) })
+  ] });
+});
+
+// src/components/Badge/Badge.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/components/Badge/Badge.css.ts
+import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
+var badge = _7a4682({ 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: [] });
 var icon = "_1295cfnf";
 
 // src/components/Badge/Badge.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Badge = forwardRef2(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
-    startIcon && /* @__PURE__ */ jsx2("span", { className: icon, children: startIcon }),
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Badge = forwardRef3(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs2("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
+    startIcon && /* @__PURE__ */ jsx3("span", { className: icon, children: startIcon }),
     children
   ] });
 });
 
 // src/components/Button/Button.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 
 // src/components/Spinner/Spinner.tsx
 import { LoaderIcon } from "@bestow-ui/icons";
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 
 // src/styles/visuallyHidden.css.ts
 var visuallyHidden = "_1kdtbw10";
 
 // src/components/Spinner/Spinner.css.ts
-import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
-var spinner = _7a4682({ 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: [] });
+import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
+var spinner = _7a4683({ 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: [] });
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Spinner = forwardRef3(function Spinner2({ size, color, label: label3 = "\uB85C\uB529 \uC911", className, ...rest }, ref) {
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Spinner = forwardRef4(function Spinner2({ size, color, label: label3 = "\uB85C\uB529 \uC911", className, ...rest }, ref) {
   const a11y = label3 ? { role: "status" } : { "aria-hidden": true };
-  return /* @__PURE__ */ jsxs2("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
-    /* @__PURE__ */ jsx3(LoaderIcon, { size: "100%" }),
-    label3 && /* @__PURE__ */ jsx3("span", { className: visuallyHidden, children: label3 })
+  return /* @__PURE__ */ jsxs3("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
+    /* @__PURE__ */ jsx4(LoaderIcon, { size: "100%" }),
+    label3 && /* @__PURE__ */ jsx4("span", { className: visuallyHidden, children: label3 })
   ] });
 });
 
 // src/components/Button/Button.css.ts
-import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
-var button = _7a4683({ 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: [] });
+import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
+var button = _7a4684({ 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: [] });
 var icon2 = "xcekdai";
 
 // src/components/Button/Button.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var Button = forwardRef4(function Button2({ variant, color, size, fullWidth, startIcon, endIcon, loading, className, type = "button", onClick, children, ...rest }, ref) {
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Button = forwardRef5(function Button2({ variant, color, size, fullWidth, startIcon, endIcon, loading, className, type = "button", onClick, children, ...rest }, ref) {
   const handleClick = (event) => {
     if (loading) {
       event.preventDefault();
@@ -262,8 +290,8 @@ var Button = forwardRef4(function Button2({ variant, color, size, fullWidth, sta
     }
     onClick?.(event);
   };
-  const leading = loading ? /* @__PURE__ */ jsx4(Spinner, { size: "sm", label: "" }) : startIcon;
-  return /* @__PURE__ */ jsxs3(
+  const leading = loading ? /* @__PURE__ */ jsx5(Spinner, { size: "sm", label: "" }) : startIcon;
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       ref,
@@ -274,41 +302,41 @@ var Button = forwardRef4(function Button2({ variant, color, size, fullWidth, sta
       onClick: handleClick,
       ...rest,
       children: [
-        leading && /* @__PURE__ */ jsx4("span", { className: icon2, children: leading }),
+        leading && /* @__PURE__ */ jsx5("span", { className: icon2, children: leading }),
         children,
-        endIcon && /* @__PURE__ */ jsx4("span", { className: icon2, children: endIcon })
+        endIcon && /* @__PURE__ */ jsx5("span", { className: icon2, children: endIcon })
       ]
     }
   );
 });
 
 // src/components/Card/Card.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 
 // src/components/Card/Card.css.ts
-import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
 var body = "dnuf1u9";
-var card = _7a4684({ 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: [] });
+var card = _7a4685({ 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: [] });
 var footer = "dnuf1ua";
 var header = "dnuf1u8";
 
 // src/components/Card/Card.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Card = forwardRef5(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx5(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Card = forwardRef6(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx6(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
 });
-var CardHeader = forwardRef5(function CardHeader2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx5("div", { ref, className: cx(header, className), ...rest });
+var CardHeader = forwardRef6(function CardHeader2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx6("div", { ref, className: cx(header, className), ...rest });
 });
-var CardBody = forwardRef5(function CardBody2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx5("div", { ref, className: cx(body, className), ...rest });
+var CardBody = forwardRef6(function CardBody2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx6("div", { ref, className: cx(body, className), ...rest });
 });
-var CardFooter = forwardRef5(function CardFooter2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx5("div", { ref, className: cx(footer, className), ...rest });
+var CardFooter = forwardRef6(function CardFooter2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx6("div", { ref, className: cx(footer, className), ...rest });
 });
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef6, useEffect, useRef } from "react";
+import { forwardRef as forwardRef7, useEffect, useRef } from "react";
 
 // src/utils/mergeRefs.ts
 function mergeRefs(...refs) {
@@ -321,23 +349,23 @@ function mergeRefs(...refs) {
 }
 
 // src/components/Checkbox/Checkbox.css.ts
-import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
 var checkIcon = "_1y7mzsn8 _1y7mzsn7";
-var control = _7a4685({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var control = _7a4686({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
 var input = "_1y7mzsn6";
-var root2 = _7a4685({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root3 = _7a4686({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var Checkbox = forwardRef6(function Checkbox2({ label: label3, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var Checkbox = forwardRef7(function Checkbox2({ label: label3, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
   const innerRef = useRef(null);
   useEffect(() => {
     if (innerRef.current) innerRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsxs4("label", { className: cx(root2({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsxs4("span", { className: control({ size }), children: [
-      /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5("label", { className: cx(root3({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs5("span", { className: control({ size }), children: [
+      /* @__PURE__ */ jsx7(
         "input",
         {
           ref: mergeRefs(innerRef, ref),
@@ -348,39 +376,62 @@ var Checkbox = forwardRef6(function Checkbox2({ label: label3, size, indetermina
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx6("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx6("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-      /* @__PURE__ */ jsx6("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx6("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      /* @__PURE__ */ jsx7("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx7("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
     ] }),
     label3
   ] });
 });
 
+// src/components/Divider/Divider.tsx
+import { forwardRef as forwardRef8 } from "react";
+
+// src/components/Divider/Divider.css.ts
+import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
+var divider = _7a4687({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
+var labeled = "_1t3gq8v3";
+var line = "_1t3gq8v4";
+
+// src/components/Divider/Divider.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var Divider = forwardRef8(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
+  if (children && orientation === "horizontal") {
+    return /* @__PURE__ */ jsxs6("div", { ref, className: cx(labeled, className), ...rest, children: [
+      /* @__PURE__ */ jsx8("span", { className: line, "aria-hidden": true }),
+      children,
+      /* @__PURE__ */ jsx8("span", { className: line, "aria-hidden": true })
+    ] });
+  }
+  const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
+  return /* @__PURE__ */ jsx8("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
+});
+
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 
 // src/components/Input/Input.css.ts
-import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
 var adornment = "_19p5zvh6";
 var field = "_19p5zvh7";
 var fieldFullWidth = "_19p5zvh8";
-var helperText = _7a4686({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
+var helperText = _7a4688({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
 var input2 = "_19p5zvh5";
 var label = "_19p5zvh9";
 var requiredMark = "_19p5zvha";
-var root3 = _7a4686({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root4 = _7a4688({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Input/Input.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var Input = forwardRef7(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs5(
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var Input = forwardRef9(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: cx(root3({ size, fullWidth }), rootClassName),
+      className: cx(root4({ size, fullWidth }), rootClassName),
       "data-invalid": invalid || void 0,
       "data-disabled": disabled || void 0,
       children: [
-        startAdornment && /* @__PURE__ */ jsx7("span", { className: adornment, children: startAdornment }),
-        /* @__PURE__ */ jsx7(
+        startAdornment && /* @__PURE__ */ jsx9("span", { className: adornment, children: startAdornment }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             ref,
@@ -390,25 +441,25 @@ var Input = forwardRef7(function Input2({ size, invalid, fullWidth, startAdornme
             ...rest
           }
         ),
-        endAdornment && /* @__PURE__ */ jsx7("span", { className: adornment, children: endAdornment })
+        endAdornment && /* @__PURE__ */ jsx9("span", { className: adornment, children: endAdornment })
       ]
     }
   );
 });
 
 // src/components/Input/TextField.tsx
-import { forwardRef as forwardRef8, useId } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextField = forwardRef8(function TextField2({ label: label3, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+import { forwardRef as forwardRef10, useId } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var TextField = forwardRef10(function TextField2({ label: label3, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
   const helperId = helperText2 ? `${inputId}-helper` : void 0;
-  return /* @__PURE__ */ jsxs6("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label3 && /* @__PURE__ */ jsxs6("label", { htmlFor: inputId, className: label, children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label3 && /* @__PURE__ */ jsxs8("label", { htmlFor: inputId, className: label, children: [
       label3,
-      required && /* @__PURE__ */ jsx8("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx10("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       Input,
       {
         ref,
@@ -420,7 +471,7 @@ var TextField = forwardRef8(function TextField2({ label: label3, helperText: hel
         ...rest
       }
     ),
-    helperText2 && /* @__PURE__ */ jsx8("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+    helperText2 && /* @__PURE__ */ jsx10("p", { id: helperId, className: helperText({ error }), children: helperText2 })
   ] });
 });
 
@@ -429,10 +480,10 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { XIcon } from "@bestow-ui/icons";
 
 // src/components/Modal/Modal.css.ts
-import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
 var body2 = "_1pdsmv0a";
 var closeButton = "_1pdsmv09";
-var content = _7a4687({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var content = _7a4689({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var description = "_1pdsmv08";
 var footer2 = "_1pdsmv0b";
 var header2 = "_1pdsmv05";
@@ -441,7 +492,7 @@ var overlay = "_1pdsmv00";
 var title = "_1pdsmv07";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function Modal({
   open,
   defaultOpen,
@@ -457,11 +508,11 @@ function Modal({
   className
 }) {
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ jsxs7(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
-    trigger2 && /* @__PURE__ */ jsx9(Dialog.Trigger, { asChild: true, children: trigger2 }),
-    /* @__PURE__ */ jsxs7(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx9(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
-      /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger2 && /* @__PURE__ */ jsx11(Dialog.Trigger, { asChild: true, children: trigger2 }),
+    /* @__PURE__ */ jsxs9(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx11(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
+      /* @__PURE__ */ jsxs9(
         Dialog.Content,
         {
           className: cx(portal2.className, content({ size }), className),
@@ -469,15 +520,15 @@ function Modal({
           onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
           ...description4 ? {} : { "aria-describedby": void 0 },
           children: [
-            /* @__PURE__ */ jsxs7("div", { className: header2, children: [
-              /* @__PURE__ */ jsxs7("div", { className: headings, children: [
-                /* @__PURE__ */ jsx9(Dialog.Title, { className: title, children: title3 }),
-                description4 && /* @__PURE__ */ jsx9(Dialog.Description, { className: description, children: description4 })
+            /* @__PURE__ */ jsxs9("div", { className: header2, children: [
+              /* @__PURE__ */ jsxs9("div", { className: headings, children: [
+                /* @__PURE__ */ jsx11(Dialog.Title, { className: title, children: title3 }),
+                description4 && /* @__PURE__ */ jsx11(Dialog.Description, { className: description, children: description4 })
               ] }),
-              !hideCloseButton && /* @__PURE__ */ jsx9(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx9(XIcon, { size: 16 }) })
+              !hideCloseButton && /* @__PURE__ */ jsx11(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx11(XIcon, { size: 16 }) })
             ] }),
-            children && /* @__PURE__ */ jsx9("div", { className: body2, children }),
-            footer4 && /* @__PURE__ */ jsx9("div", { className: footer2, children: footer4 })
+            children && /* @__PURE__ */ jsx11("div", { className: body2, children }),
+            footer4 && /* @__PURE__ */ jsx11("div", { className: footer2, children: footer4 })
           ]
         }
       )
@@ -488,22 +539,22 @@ var ModalClose = Dialog.Close;
 
 // src/components/RadioGroup/RadioGroup.tsx
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
-import { forwardRef as forwardRef9, useId as useId2 } from "react";
+import { forwardRef as forwardRef11, useId as useId2 } from "react";
 
 // src/components/RadioGroup/RadioGroup.css.ts
-import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46810 } from "@vanilla-extract/recipes/createRuntimeFn";
 var description2 = "_1w9iwjmd";
 var groupLabel = "_1w9iwjme";
 var indicator = "_1w9iwjma";
-var items = _7a4688({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
+var items = _7a46810({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
 var labelText = "_1w9iwjmc";
-var option = _7a4688({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var radio = _7a4688({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var option = _7a46810({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var radio = _7a46810({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var text = "_1w9iwjmb";
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var RadioGroup = forwardRef9(function RadioGroup2(props, ref) {
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var RadioGroup = forwardRef11(function RadioGroup2(props, ref) {
   const {
     options,
     value: value2,
@@ -526,12 +577,12 @@ var RadioGroup = forwardRef9(function RadioGroup2(props, ref) {
   const baseId = id ?? generatedId;
   const labelId = label3 ? `${baseId}-label` : void 0;
   const helperId = helperText2 ? `${baseId}-helper` : void 0;
-  return /* @__PURE__ */ jsxs8("div", { className: cx(field, className), children: [
-    label3 && /* @__PURE__ */ jsxs8("span", { id: labelId, className: cx(label, groupLabel), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cx(field, className), children: [
+    label3 && /* @__PURE__ */ jsxs10("span", { id: labelId, className: cx(label, groupLabel), children: [
       label3,
-      required && /* @__PURE__ */ jsx10("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx12("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx12(
       RadixRadioGroup.Root,
       {
         ref,
@@ -552,8 +603,8 @@ var RadioGroup = forwardRef9(function RadioGroup2(props, ref) {
           const itemId = `${baseId}-${option2.value}`;
           const descriptionId = option2.description ? `${itemId}-description` : void 0;
           const itemDisabled = disabled || option2.disabled;
-          return /* @__PURE__ */ jsxs8("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
-            /* @__PURE__ */ jsx10(
+          return /* @__PURE__ */ jsxs10("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
+            /* @__PURE__ */ jsx12(
               RadixRadioGroup.Item,
               {
                 id: itemId,
@@ -561,24 +612,24 @@ var RadioGroup = forwardRef9(function RadioGroup2(props, ref) {
                 disabled: option2.disabled,
                 "aria-describedby": descriptionId,
                 className: radio({ size }),
-                children: /* @__PURE__ */ jsx10(RadixRadioGroup.Indicator, { className: indicator })
+                children: /* @__PURE__ */ jsx12(RadixRadioGroup.Indicator, { className: indicator })
               }
             ),
-            /* @__PURE__ */ jsxs8("span", { className: text, children: [
-              /* @__PURE__ */ jsx10("label", { htmlFor: itemId, className: labelText, children: option2.label }),
-              option2.description && /* @__PURE__ */ jsx10("span", { id: descriptionId, className: description2, children: option2.description })
+            /* @__PURE__ */ jsxs10("span", { className: text, children: [
+              /* @__PURE__ */ jsx12("label", { htmlFor: itemId, className: labelText, children: option2.label }),
+              option2.description && /* @__PURE__ */ jsx12("span", { id: descriptionId, className: description2, children: option2.description })
             ] })
           ] }, option2.value);
         })
       }
     ),
-    helperText2 && /* @__PURE__ */ jsx10("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+    helperText2 && /* @__PURE__ */ jsx12("p", { id: helperId, className: helperText({ error }), children: helperText2 })
   ] });
 });
 
 // src/components/Select/Select.tsx
 import * as RadixSelect from "@radix-ui/react-select";
-import { forwardRef as forwardRef10, useId as useId3 } from "react";
+import { forwardRef as forwardRef12, useId as useId3 } from "react";
 import { CheckIcon, ChevronDownIcon } from "@bestow-ui/icons";
 
 // src/components/Select/Select.css.ts
@@ -591,8 +642,8 @@ var value = "_1kx81e81";
 var viewport = "_1kx81e84";
 
 // src/components/Select/Select.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var Select = forwardRef10(function Select2(props, ref) {
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var Select = forwardRef12(function Select2(props, ref) {
   const {
     options,
     value: value2,
@@ -616,12 +667,12 @@ var Select = forwardRef10(function Select2(props, ref) {
   const triggerId = id ?? generatedId;
   const helperId = helperText2 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ jsxs9("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label3 && /* @__PURE__ */ jsxs9("label", { htmlFor: triggerId, className: label, children: [
+  return /* @__PURE__ */ jsxs11("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label3 && /* @__PURE__ */ jsxs11("label", { htmlFor: triggerId, className: label, children: [
       label3,
-      required && /* @__PURE__ */ jsx11("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx13("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs11(
       RadixSelect.Root,
       {
         value: isControlled ? value2 ?? "" : void 0,
@@ -631,7 +682,7 @@ var Select = forwardRef10(function Select2(props, ref) {
         required,
         name,
         children: [
-          /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs11(
             RadixSelect.Trigger,
             {
               ref,
@@ -640,14 +691,14 @@ var Select = forwardRef10(function Select2(props, ref) {
               "aria-invalid": error || void 0,
               "aria-describedby": helperId,
               "data-invalid": error || void 0,
-              className: cx(root3({ size, fullWidth }), trigger, className),
+              className: cx(root4({ size, fullWidth }), trigger, className),
               children: [
-                /* @__PURE__ */ jsx11("span", { className: value, children: /* @__PURE__ */ jsx11(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ jsx11(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx11(ChevronDownIcon, { size: 16 }) })
+                /* @__PURE__ */ jsx13("span", { className: value, children: /* @__PURE__ */ jsx13(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ jsx13(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx13(ChevronDownIcon, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx11(RadixSelect.Portal, { children: /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx13(RadixSelect.Portal, { children: /* @__PURE__ */ jsx13(
             RadixSelect.Content,
             {
               position: "popper",
@@ -655,15 +706,15 @@ var Select = forwardRef10(function Select2(props, ref) {
               collisionPadding: 8,
               className: cx(portal2.className, content2),
               style: portal2.style,
-              children: /* @__PURE__ */ jsx11(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs9(
+              children: /* @__PURE__ */ jsx13(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs11(
                 RadixSelect.Item,
                 {
                   value: option2.value,
                   disabled: option2.disabled,
                   className: item,
                   children: [
-                    /* @__PURE__ */ jsx11(RadixSelect.ItemText, { children: option2.label }),
-                    /* @__PURE__ */ jsx11(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx11(CheckIcon, { size: 16 }) })
+                    /* @__PURE__ */ jsx13(RadixSelect.ItemText, { children: option2.label }),
+                    /* @__PURE__ */ jsx13(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx13(CheckIcon, { size: 16 }) })
                   ]
                 },
                 option2.value
@@ -673,21 +724,70 @@ var Select = forwardRef10(function Select2(props, ref) {
         ]
       }
     ),
-    helperText2 && /* @__PURE__ */ jsx11("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+    helperText2 && /* @__PURE__ */ jsx13("p", { id: helperId, className: helperText({ error }), children: helperText2 })
   ] });
 });
 
+// src/components/Skeleton/Skeleton.tsx
+import { assignInlineVars as assignInlineVars2 } from "@vanilla-extract/dynamic";
+import { forwardRef as forwardRef13 } from "react";
+
+// src/components/Skeleton/Skeleton.css.ts
+import { createRuntimeFn as _7a46811 } from "@vanilla-extract/recipes/createRuntimeFn";
+var height = "var(--_1s8datd1)";
+var lines = "_1s8datd6";
+var skeleton = _7a46811({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
+var width = "var(--_1s8datd0)";
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var toCss = (value2) => typeof value2 === "number" ? `${value2}px` : value2;
+var Skeleton = forwardRef13(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
+  const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
+  const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
+  if (variant === "text" && lines2 > 1) {
+    return /* @__PURE__ */ jsx14(
+      "span",
+      {
+        ref,
+        "aria-hidden": true,
+        className: cx(lines, className),
+        style: { ...assignInlineVars2({ [width]: w }), ...style },
+        ...rest,
+        children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: skeleton({ variant }),
+            style: assignInlineVars2({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
+          },
+          i
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14(
+    "span",
+    {
+      ref,
+      "aria-hidden": true,
+      className: cx(skeleton({ variant }), className),
+      style: { ...assignInlineVars2({ [width]: w, [height]: h }), ...style },
+      ...rest
+    }
+  );
+});
+
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 
 // src/components/Stack/Stack.css.ts
-import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
-var stack = _7a4689({ 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: [] });
+import { createRuntimeFn as _7a46812 } from "@vanilla-extract/recipes/createRuntimeFn";
+var stack = _7a46812({ 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: [] });
 
 // src/components/Stack/Stack.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Stack = forwardRef11(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx12(
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Stack = forwardRef14(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx15(
     Component,
     {
       ref,
@@ -699,22 +799,22 @@ var Stack = forwardRef11(function Stack2({ as: Component = "div", direction, gap
 
 // src/components/Switch/Switch.tsx
 import * as RadixSwitch from "@radix-ui/react-switch";
-import { forwardRef as forwardRef12, useId as useId4 } from "react";
+import { forwardRef as forwardRef15, useId as useId4 } from "react";
 
 // src/components/Switch/Switch.css.ts
-import { createRuntimeFn as _7a46810 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
 var label2 = "o33ul29";
-var root4 = _7a46810({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var thumb = _7a46810({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var track = _7a46810({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root5 = _7a46813({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var thumb = _7a46813({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track = _7a46813({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-var Switch = forwardRef12(function Switch2({ label: label3, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var Switch = forwardRef15(function Switch2({ label: label3, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
   const generatedId = useId4();
   const switchId = id ?? generatedId;
-  return /* @__PURE__ */ jsxs10("span", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs12("span", { className: cx(root5({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx16(
       RadixSwitch.Root,
       {
         ref,
@@ -723,16 +823,16 @@ var Switch = forwardRef12(function Switch2({ label: label3, size, id, className,
         "aria-label": ariaLabel,
         className: track({ size }),
         ...rest,
-        children: /* @__PURE__ */ jsx13(RadixSwitch.Thumb, { className: thumb({ size }) })
+        children: /* @__PURE__ */ jsx16(RadixSwitch.Thumb, { className: thumb({ size }) })
       }
     ),
-    label3 && /* @__PURE__ */ jsx13("label", { htmlFor: switchId, className: label2, children: label3 })
+    label3 && /* @__PURE__ */ jsx16("label", { htmlFor: switchId, className: label2, children: label3 })
   ] });
 });
 
 // src/components/Textarea/Textarea.tsx
 import {
-  forwardRef as forwardRef13,
+  forwardRef as forwardRef16,
   useCallback,
   useEffect as useEffect2,
   useId as useId5,
@@ -742,17 +842,17 @@ import {
 } from "react";
 
 // src/components/Textarea/Textarea.css.ts
-import { createRuntimeFn as _7a46811 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46814 } from "@vanilla-extract/recipes/createRuntimeFn";
 var count = "_1koawa9";
 var countOver = "_1koawaa";
 var defaultWidth = "_1koawa7";
 var footer3 = "_1koawa8";
-var textarea = _7a46811({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
+var textarea = _7a46814({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
 
 // src/components/Textarea/Textarea.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect2;
-var Textarea = forwardRef13(function Textarea2({
+var Textarea = forwardRef16(function Textarea2({
   label: label3,
   helperText: helperText2,
   error,
@@ -792,12 +892,12 @@ var Textarea = forwardRef13(function Textarea2({
     fitHeight();
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs11("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label3 && /* @__PURE__ */ jsxs11("label", { htmlFor: textareaId, className: label, children: [
+  return /* @__PURE__ */ jsxs13("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label3 && /* @__PURE__ */ jsxs13("label", { htmlFor: textareaId, className: label, children: [
       label3,
-      required && /* @__PURE__ */ jsx14("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx17("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx17(
       "textarea",
       {
         ref: mergeRefs(innerRef, ref),
@@ -819,9 +919,9 @@ var Textarea = forwardRef13(function Textarea2({
         ...rest
       }
     ),
-    (helperText2 || showCount) && /* @__PURE__ */ jsxs11("div", { className: footer3, children: [
-      helperText2 && /* @__PURE__ */ jsx14("p", { id: helperId, className: helperText({ error }), children: helperText2 }),
-      showCount && /* @__PURE__ */ jsx14("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
+    (helperText2 || showCount) && /* @__PURE__ */ jsxs13("div", { className: footer3, children: [
+      helperText2 && /* @__PURE__ */ jsx17("p", { id: helperId, className: helperText({ error }), children: helperText2 }),
+      showCount && /* @__PURE__ */ jsx17("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
     ] })
   ] });
 });
@@ -832,16 +932,16 @@ import { createContext as createContext2, useCallback as useCallback2, useContex
 import { XIcon as XIcon2 } from "@bestow-ui/icons";
 
 // src/components/Toast/Toast.css.ts
-import { createRuntimeFn as _7a46812 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46815 } from "@vanilla-extract/recipes/createRuntimeFn";
 var action = "_1g11zvx7";
 var close = "_1g11zvx8";
 var description3 = "_1g11zvx6";
 var title2 = "_1g11zvx5";
-var toast = _7a46812({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
+var toast = _7a46815({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var REMOVE_DELAY = 500;
 var ToastContext = createContext2(null);
 function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC" }) {
@@ -859,9 +959,9 @@ function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
   const value2 = useMemo2(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ jsx15(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ jsxs12(RadixToast.Provider, { duration, label: label3, swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx18(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ jsxs14(RadixToast.Provider, { duration, label: label3, swipeDirection: "right", children: [
     children,
-    toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ jsxs12(
+    toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ jsxs14(
       RadixToast.Root,
       {
         open,
@@ -871,15 +971,15 @@ function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC
         },
         className: toast({ variant }),
         children: [
-          /* @__PURE__ */ jsx15(RadixToast.Title, { className: title2, children: title3 }),
-          description4 && /* @__PURE__ */ jsx15(RadixToast.Description, { className: description3, children: description4 }),
-          action2 && /* @__PURE__ */ jsx15(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ jsx15(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
-          /* @__PURE__ */ jsx15(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx15(XIcon2, { size: 16 }) })
+          /* @__PURE__ */ jsx18(RadixToast.Title, { className: title2, children: title3 }),
+          description4 && /* @__PURE__ */ jsx18(RadixToast.Description, { className: description3, children: description4 }),
+          action2 && /* @__PURE__ */ jsx18(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ jsx18(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
+          /* @__PURE__ */ jsx18(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx18(XIcon2, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ jsx15(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+    /* @__PURE__ */ jsx18(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
@@ -896,7 +996,7 @@ var arrow = "z7rufs1";
 var content3 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function Tooltip({
   content: content4,
   children,
@@ -911,9 +1011,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content4 == null || content4 === "") return children;
-  return /* @__PURE__ */ jsx16(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs13(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx16(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx16(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx19(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs15(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx19(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx19(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs15(
       RadixTooltip.Content,
       {
         side,
@@ -924,7 +1024,7 @@ function Tooltip({
         style: portal2.style,
         children: [
           content4,
-          /* @__PURE__ */ jsx16(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
+          /* @__PURE__ */ jsx19(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
         ]
       }
     ) })
@@ -932,14 +1032,14 @@ function Tooltip({
 }
 
 // src/components/Typography/Typography.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 
 // src/components/Typography/Typography.css.ts
-import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
-var typography = _7a46813({ 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: [] });
+import { createRuntimeFn as _7a46816 } from "@vanilla-extract/recipes/createRuntimeFn";
+var typography = _7a46816({ 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: [] });
 
 // src/components/Typography/Typography.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -951,9 +1051,9 @@ var defaultElement = {
   "body-sm": "p",
   caption: "span"
 };
-var Typography = forwardRef14(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+var Typography = forwardRef17(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
   const Component = as ?? defaultElement[variant];
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     Component,
     {
       ref,
@@ -963,6 +1063,7 @@ var Typography = forwardRef14(function Typography2({ variant = "body", as, color
   );
 });
 export {
+  Avatar,
   Badge,
   Button,
   Card,
@@ -970,11 +1071,13 @@ export {
   CardFooter,
   CardHeader,
   Checkbox,
+  Divider,
   Input,
   Modal,
   ModalClose,
   RadioGroup,
   Select,
+  Skeleton,
   Spinner,
   Stack,
   Switch,