@bestow-ui/react 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -36,9 +36,12 @@ __export(index_exports, {
   Input: () => Input,
   Modal: () => Modal,
   ModalClose: () => ModalClose,
+  RadioGroup: () => RadioGroup,
   Select: () => Select,
   Stack: () => Stack,
+  Switch: () => Switch,
   TextField: () => TextField,
+  Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
   ToastProvider: () => ToastProvider,
   Tooltip: () => Tooltip,
@@ -167,7 +170,11 @@ function createIntentColors(intent, color) {
     subtleHover: rgba(darkSolid, 0.26),
     text: findReadable(darkBase, Math.max(darkBase.l, 0.75), 0.02, [darkBg, darkSubtleOnBg, darkSubtleHoverOnBg])
   };
-  return { light: { color: { [intent]: light } }, dark: { color: { [intent]: dark } } };
+  const focus = intent === "primary" ? { light: { border: { focus: light.solid } }, dark: { border: { focus: dark.solidHover } } } : void 0;
+  return {
+    light: { color: { [intent]: light, ...focus?.light } },
+    dark: { color: { [intent]: dark, ...focus?.dark } }
+  };
 }
 
 // src/theme/createTheme.ts
@@ -307,7 +314,7 @@ var root2 = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1
 
 // src/components/Checkbox/Checkbox.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Checkbox = (0, import_react3.forwardRef)(function Checkbox2({ label: label2, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
+var Checkbox = (0, import_react3.forwardRef)(function Checkbox2({ label: label3, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
   const innerRef = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
     if (innerRef.current) innerRef.current.indeterminate = indeterminate;
@@ -328,7 +335,7 @@ var Checkbox = (0, import_react3.forwardRef)(function Checkbox2({ label: label2,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
     ] }),
-    label2
+    label3
   ] });
 });
 
@@ -376,13 +383,13 @@ var Input = (0, import_react4.forwardRef)(function Input2({ size, invalid, fullW
 // src/components/Input/TextField.tsx
 var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label2, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label3, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
   const generatedId = (0, import_react5.useId)();
   const inputId = id ?? generatedId;
   const helperId = helperText2 ? `${inputId}-helper` : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: inputId, className: label, children: [
-      label2,
+    label3 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: inputId, className: label, children: [
+      label3,
       required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -425,9 +432,9 @@ function Modal({
   onOpenChange,
   trigger: trigger2,
   title: title3,
-  description: description3,
+  description: description4,
   children,
-  footer: footer2,
+  footer: footer3,
   size,
   hideCloseButton = false,
   closeOnOverlayClick = true,
@@ -444,17 +451,17 @@ function Modal({
           className: cx(portal2.className, content({ size }), className),
           style: portal2.style,
           onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
-          ...description3 ? {} : { "aria-describedby": void 0 },
+          ...description4 ? {} : { "aria-describedby": void 0 },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: header, children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: headings, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Title, { className: title, children: title3 }),
-                description3 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Description, { className: description, children: description3 })
+                description4 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Description, { className: description, children: description4 })
               ] }),
               !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons.XIcon, { size: 16 }) })
             ] }),
             children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: body, children }),
-            footer2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: footer, children: footer2 })
+            footer3 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: footer, children: footer3 })
           ]
         }
       )
@@ -463,9 +470,99 @@ function Modal({
 }
 var ModalClose = Dialog.Close;
 
+// src/components/RadioGroup/RadioGroup.tsx
+var RadixRadioGroup = __toESM(require("@radix-ui/react-radio-group"), 1);
+var import_react6 = require("react");
+
+// src/components/RadioGroup/RadioGroup.css.ts
+var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
+var description2 = "_1w9iwjmd";
+var groupLabel = "_1w9iwjme";
+var indicator = "_1w9iwjma";
+var items = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
+var labelText = "_1w9iwjmc";
+var option = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var radio = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var text = "_1w9iwjmb";
+
+// src/components/RadioGroup/RadioGroup.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react6.forwardRef)(function RadioGroup2(props, ref) {
+  const {
+    options,
+    value: value2,
+    defaultValue,
+    onValueChange,
+    label: label3,
+    helperText: helperText2,
+    error,
+    orientation = "vertical",
+    size,
+    disabled,
+    required,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    className
+  } = props;
+  const isControlled = "value" in props;
+  const generatedId = (0, import_react6.useId)();
+  const baseId = id ?? generatedId;
+  const labelId = label3 ? `${baseId}-label` : void 0;
+  const helperId = helperText2 ? `${baseId}-helper` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx(field, className), children: [
+    label3 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { id: labelId, className: cx(label, groupLabel), children: [
+      label3,
+      required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      RadixRadioGroup.Root,
+      {
+        ref,
+        id: baseId,
+        value: isControlled ? value2 ?? "" : void 0,
+        defaultValue,
+        onValueChange,
+        orientation,
+        disabled,
+        required,
+        name,
+        "aria-label": ariaLabel,
+        "aria-labelledby": labelId,
+        "aria-describedby": helperId,
+        "aria-invalid": error || void 0,
+        className: items({ orientation }),
+        children: options.map((option2) => {
+          const itemId = `${baseId}-${option2.value}`;
+          const descriptionId = option2.description ? `${itemId}-description` : void 0;
+          const itemDisabled = disabled || option2.disabled;
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              RadixRadioGroup.Item,
+              {
+                id: itemId,
+                value: option2.value,
+                disabled: option2.disabled,
+                "aria-describedby": descriptionId,
+                className: radio({ size }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixRadioGroup.Indicator, { className: indicator })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: text, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
+              option2.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: descriptionId, className: description2, children: option2.description })
+            ] })
+          ] }, option2.value);
+        })
+      }
+    ),
+    helperText2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+  ] });
+});
+
 // src/components/Select/Select.tsx
 var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_icons2 = require("@bestow-ui/icons");
 
 // src/components/Select/Select.css.ts
@@ -478,45 +575,47 @@ var value = "_1kx81e81";
 var viewport = "_1kx81e84";
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Select = (0, import_react6.forwardRef)(function Select2({
-  options,
-  value: value2,
-  defaultValue,
-  onValueChange,
-  placeholder,
-  label: label2,
-  helperText: helperText2,
-  error,
-  size,
-  fullWidth,
-  disabled,
-  required,
-  name,
-  id,
-  "aria-label": ariaLabel,
-  className
-}, ref) {
-  const generatedId = (0, import_react6.useId)();
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
+  const {
+    options,
+    value: value2,
+    defaultValue,
+    onValueChange,
+    placeholder,
+    label: label3,
+    helperText: helperText2,
+    error,
+    size,
+    fullWidth,
+    disabled,
+    required,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    className
+  } = props;
+  const isControlled = "value" in props;
+  const generatedId = (0, import_react7.useId)();
   const triggerId = id ?? generatedId;
   const helperId = helperText2 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: triggerId, className: label, children: [
-      label2,
-      required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label3 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor: triggerId, className: label, children: [
+      label3,
+      required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       RadixSelect.Root,
       {
-        value: value2,
+        value: isControlled ? value2 ?? "" : void 0,
         defaultValue,
         onValueChange,
         disabled,
         required,
         name,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             RadixSelect.Trigger,
             {
               ref,
@@ -527,12 +626,12 @@ var Select = (0, import_react6.forwardRef)(function Select2({
               "data-invalid": error || void 0,
               className: cx(root3({ size, fullWidth }), trigger, className),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons2.ChevronDownIcon, { size: 16 }) })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.ChevronDownIcon, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             RadixSelect.Content,
             {
               position: "popper",
@@ -540,39 +639,39 @@ var Select = (0, import_react6.forwardRef)(function Select2({
               collisionPadding: 8,
               className: cx(portal2.className, content2),
               style: portal2.style,
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 RadixSelect.Item,
                 {
-                  value: option.value,
-                  disabled: option.disabled,
+                  value: option2.value,
+                  disabled: option2.disabled,
                   className: item,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.ItemText, { children: option.label }),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons2.CheckIcon, { size: 16 }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.ItemText, { children: option2.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.CheckIcon, { size: 16 }) })
                   ]
                 },
-                option.value
+                option2.value
               )) })
             }
           ) })
         ]
       }
     ),
-    helperText2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+    helperText2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
   ] });
 });
 
 // src/components/Stack/Stack.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/Stack/Stack.css.ts
-var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
-var stack = (0, import_createRuntimeFn5.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: [] });
+var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
+var stack = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
 
 // src/components/Stack/Stack.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Stack = (0, import_react7.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Stack = (0, import_react8.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Component,
     {
       ref,
@@ -582,42 +681,163 @@ var Stack = (0, import_react7.forwardRef)(function Stack2({ as: Component = "div
   );
 });
 
+// src/components/Switch/Switch.tsx
+var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
+var import_react9 = require("react");
+
+// src/components/Switch/Switch.css.ts
+var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
+var label2 = "o33ul29";
+var root4 = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var thumb = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+
+// src/components/Switch/Switch.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Switch = (0, import_react9.forwardRef)(function Switch2({ label: label3, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
+  const generatedId = (0, import_react9.useId)();
+  const switchId = id ?? generatedId;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      RadixSwitch.Root,
+      {
+        ref,
+        id: switchId,
+        disabled,
+        "aria-label": ariaLabel,
+        className: track({ size }),
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixSwitch.Thumb, { className: thumb({ size }) })
+      }
+    ),
+    label3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: switchId, className: label2, children: label3 })
+  ] });
+});
+
+// src/components/Textarea/Textarea.tsx
+var import_react10 = require("react");
+
+// src/components/Textarea/Textarea.css.ts
+var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
+var count = "_1koawa9";
+var countOver = "_1koawaa";
+var defaultWidth = "_1koawa7";
+var footer2 = "_1koawa8";
+var textarea = (0, import_createRuntimeFn8.createRuntimeFn)({ 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
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react10.useLayoutEffect : import_react10.useEffect;
+var Textarea = (0, import_react10.forwardRef)(function Textarea2({
+  label: label3,
+  helperText: helperText2,
+  error,
+  size,
+  fullWidth,
+  resize,
+  autoResize,
+  showCount,
+  required,
+  id,
+  rows = 3,
+  value: value2,
+  defaultValue,
+  onChange,
+  maxLength,
+  className,
+  style,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}, ref) {
+  const generatedId = (0, import_react10.useId)();
+  const textareaId = id ?? generatedId;
+  const helperId = helperText2 ? `${textareaId}-helper` : void 0;
+  const innerRef = (0, import_react10.useRef)(null);
+  const [uncontrolledLength, setUncontrolledLength] = (0, import_react10.useState)(() => String(defaultValue ?? "").length);
+  const length = value2 !== void 0 ? String(value2).length : uncontrolledLength;
+  const fitHeight = (0, import_react10.useCallback)(() => {
+    const el = innerRef.current;
+    if (!autoResize || !el) return;
+    el.style.height = "auto";
+    const borders = el.offsetHeight - el.clientHeight;
+    el.style.height = `${el.scrollHeight + borders}px`;
+  }, [autoResize]);
+  useIsomorphicLayoutEffect(fitHeight, [fitHeight, value2]);
+  const handleChange = (event) => {
+    if (value2 === void 0) setUncontrolledLength(event.target.value.length);
+    fitHeight();
+    onChange?.(event);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label3 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { htmlFor: textareaId, className: label, children: [
+      label3,
+      required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "textarea",
+      {
+        ref: mergeRefs(innerRef, ref),
+        id: textareaId,
+        rows,
+        value: value2,
+        defaultValue,
+        onChange: handleChange,
+        maxLength,
+        required,
+        "aria-invalid": error || void 0,
+        "aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
+        className: cx(
+          textarea({ size, resize: autoResize ? "none" : resize }),
+          !fullWidth && defaultWidth,
+          className
+        ),
+        style: autoResize ? { overflowY: "auto", ...style } : style,
+        ...rest
+      }
+    ),
+    (helperText2 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: footer2, children: [
+      helperText2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 }),
+      showCount && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
+    ] })
+  ] });
+});
+
 // src/components/Toast/Toast.tsx
 var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_react8 = require("react");
+var import_react11 = require("react");
 var import_icons3 = require("@bestow-ui/icons");
 
 // src/components/Toast/Toast.css.ts
-var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
+var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
 var action = "_1g11zvx7";
 var close = "_1g11zvx8";
-var description2 = "_1g11zvx6";
+var description3 = "_1g11zvx6";
 var title2 = "_1g11zvx5";
-var toast = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
+var toast = (0, import_createRuntimeFn9.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var REMOVE_DELAY = 500;
-var ToastContext = (0, import_react8.createContext)(null);
-function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC" }) {
-  const [toasts, setToasts] = (0, import_react8.useState)([]);
-  const nextId = (0, import_react8.useRef)(0);
+var ToastContext = (0, import_react11.createContext)(null);
+function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC" }) {
+  const [toasts, setToasts] = (0, import_react11.useState)([]);
+  const nextId = (0, import_react11.useRef)(0);
   const portal2 = usePortalProps();
-  const toast2 = (0, import_react8.useCallback)((options) => {
+  const toast2 = (0, import_react11.useCallback)((options) => {
     const id = nextId.current++;
     setToasts((prev) => [...prev, { ...options, id, open: true }]);
     return id;
   }, []);
-  const dismiss = (0, import_react8.useCallback)((id) => {
+  const dismiss = (0, import_react11.useCallback)((id) => {
     const isTarget = (t) => id === void 0 || t.id === id;
     setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
-  const value2 = (0, import_react8.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(RadixToast.Provider, { duration, label: label2, swipeDirection: "right", children: [
+  const value2 = (0, import_react11.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(RadixToast.Provider, { duration, label: label3, swipeDirection: "right", children: [
     children,
-    toasts.map(({ id, open, title: title3, description: description3, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       RadixToast.Root,
       {
         open,
@@ -627,19 +847,19 @@ function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC
         },
         className: toast({ variant }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Title, { className: title2, children: title3 }),
-          description3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Description, { className: description2, children: description3 }),
-          action2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons3.XIcon, { size: 16 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixToast.Title, { className: title2, children: title3 }),
+          description4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixToast.Description, { className: description3, children: description4 }),
+          action2 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons3.XIcon, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
-  const context = (0, import_react8.useContext)(ToastContext);
+  const context = (0, import_react11.useContext)(ToastContext);
   if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
   return context;
 }
@@ -652,7 +872,7 @@ var arrow = "z7rufs1";
 var content3 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Tooltip({
   content: content4,
   children,
@@ -667,9 +887,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content4 == null || content4 === "") return children;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       RadixTooltip.Content,
       {
         side,
@@ -680,7 +900,7 @@ function Tooltip({
         style: portal2.style,
         children: [
           content4,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
         ]
       }
     ) })
@@ -688,14 +908,14 @@ function Tooltip({
 }
 
 // src/components/Typography/Typography.tsx
-var import_react9 = require("react");
+var import_react12 = require("react");
 
 // src/components/Typography/Typography.css.ts
-var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
-var typography = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", 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: [] });
+var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
+var typography = (0, import_createRuntimeFn10.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: [] });
 
 // src/components/Typography/Typography.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -707,9 +927,9 @@ var defaultElement = {
   "body-sm": "p",
   caption: "span"
 };
-var Typography = (0, import_react9.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+var Typography = (0, import_react12.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
   const Component = as ?? defaultElement[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Component,
     {
       ref,
@@ -725,9 +945,12 @@ var Typography = (0, import_react9.forwardRef)(function Typography2({ variant =
   Input,
   Modal,
   ModalClose,
+  RadioGroup,
   Select,
   Stack,
+  Switch,
   TextField,
+  Textarea,
   ThemeProvider,
   ToastProvider,
   Tooltip,