@exem-ui/react 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,29 +1,3018 @@
-export { DatePicker } from './chunk-QH23RO3C.mjs';
-export { Progress } from './chunk-FB4ESGOX.mjs';
-export { Star } from './chunk-YGBEKZWU.mjs';
-export { Switch } from './chunk-VWTE74UT.mjs';
-export { Tabs } from './chunk-4WAO7CUT.mjs';
-export { DoubleTag, Tag } from './chunk-L7P2NDST.mjs';
-export { ToastProvider, Toaster, toast, useToast } from './chunk-E53FHDVN.mjs';
-export { TextArea, TextField } from './chunk-IANSI7F7.mjs';
-export { Loading } from './chunk-XBDXTRK3.mjs';
-export { MessageBox } from './chunk-GW53LH3I.mjs';
-export { Modal } from './chunk-ZMVBIQ2Z.mjs';
-export { ScrollArea, ScrollBar } from './chunk-TEHHJ3CS.mjs';
-export { Radio } from './chunk-WWT73GGM.mjs';
-export { Avatar } from './chunk-VCMZQOQM.mjs';
-export { Badge } from './chunk-KPAUBWZA.mjs';
-export { Breadcrumb } from './chunk-PPD4BU4W.mjs';
-export { ButtonGroup, IconButton } from './chunk-GXMRIT5E.mjs';
-export { Button } from './chunk-DJHGCJR4.mjs';
-export { Checkbox } from './chunk-N6U54JI4.mjs';
-import './chunk-VKN4H4WI.mjs';
-import './chunk-34QIGWCT.mjs';
-export { Segment } from './chunk-Q442ZDTI.mjs';
-import './chunk-5WGNZX7Z.mjs';
-export { Tooltip } from './chunk-YVFLRPFV.mjs';
-import './chunk-DPUTW5KD.mjs';
-export { Select } from './chunk-ZWCMSHDP.mjs';
-import './chunk-LZWKMQJL.mjs';
+import { X, MoreHorizontal, ChevronDown, Minus, Check, Person, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-LZWKMQJL.mjs';
+import { cva, cn } from '@exem-ui/core/utils';
+import * as React2 from 'react';
+import { forwardRef, Fragment, createContext, cloneElement, useId, useContext, useState } from 'react';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
+
+var SIZE_CONFIG = {
+  xsmall: {
+    container: "size-[16px] text-body-3",
+    initialPadding: "px-[2.5px] leading-none tracking-tight",
+    imagePadding: "p-[2px]",
+    iconSize: "size-[12px]"
+  },
+  small: {
+    container: "size-[20px] text-body-2",
+    initialPadding: "px-[3.5px]",
+    imagePadding: "p-[3px]",
+    iconSize: "size-[14px]"
+  },
+  medium: {
+    container: "size-[24px] text-body-2",
+    initialPadding: "px-[5.5px] py-[2px]",
+    imagePadding: "p-[4px]",
+    iconSize: "size-[16px]"
+  },
+  large: {
+    container: "size-[32px] text-title-2",
+    initialPadding: "px-[8px] py-[3.5px]",
+    imagePadding: "p-[6px]",
+    iconSize: "size-[20px]"
+  }
+};
+var avatarVariants = cva(
+  "flex items-center justify-center rounded-[28px] text-center font-semibold",
+  {
+    variants: {
+      size: {
+        xsmall: SIZE_CONFIG.xsmall.container,
+        small: SIZE_CONFIG.small.container,
+        medium: SIZE_CONFIG.medium.container,
+        large: SIZE_CONFIG.large.container
+      },
+      type: {
+        initial: "bg-elevation-elevation-5 text-elevation-elevation-0",
+        image: "bg-elevation-elevation-4 text-elevation-elevation-0"
+      }
+    },
+    compoundVariants: [
+      // Initial type variants
+      { type: "initial", size: "xsmall", class: SIZE_CONFIG.xsmall.initialPadding },
+      { type: "initial", size: "small", class: SIZE_CONFIG.small.initialPadding },
+      { type: "initial", size: "medium", class: SIZE_CONFIG.medium.initialPadding },
+      { type: "initial", size: "large", class: SIZE_CONFIG.large.initialPadding }
+    ],
+    defaultVariants: {
+      size: "medium",
+      type: "initial"
+    }
+  }
+);
+var getInitial = (name) => {
+  return name ? name.charAt(0).toUpperCase() : "";
+};
+var renderInitialContent = (name) => {
+  return /* @__PURE__ */ jsx("span", { children: getInitial(name) });
+};
+var renderImageContent = (src, alt, name) => {
+  return /* @__PURE__ */ jsx("img", { src, alt: alt || name || "Avatar", className: "size-full rounded-full object-cover" });
+};
+var renderIconContent = (size = "medium") => {
+  const iconSize = SIZE_CONFIG[size].iconSize;
+  return /* @__PURE__ */ jsx(Person, { className: cn("shrink-0", iconSize) });
+};
+var Avatar = forwardRef(
+  ({ className, size = "medium", type = "initial", name, src, alt, ...props }, ref) => {
+    const resolvedSize = size || "medium";
+    const isFallback = type === "image" && !src;
+    const fallbackPadding = isFallback ? SIZE_CONFIG[resolvedSize].imagePadding : void 0;
+    const renderContent = () => {
+      if (type === "initial") {
+        return renderInitialContent(name);
+      }
+      if (type === "image") {
+        return src ? renderImageContent(src, alt, name) : renderIconContent(resolvedSize);
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(avatarVariants({ size, type }), fallbackPadding, className),
+        ...props,
+        children: renderContent()
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-strong border px-[4px] text-body-3 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        accent: "border-transparent bg-solid-accent-default text-text-static-light",
+        "accent-disabled": "border-transparent bg-solid-accent-disabled text-text-inverse-disabled",
+        default: "border-transparent bg-elevation-elevation-3 text-text-secondary",
+        "default-disabled": "border-transparent bg-elevation-elevation-2 text-text-disabled"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Badge = forwardRef(
+  ({ className, variant = "default", disabled = false, ...props }, ref) => {
+    const finalVariant = disabled ? `${variant}-disabled` : variant;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(badgeVariants({ variant: finalVariant }), className),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var StarRoundedEmpty = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20",
+    width: "1em",
+    height: "1em",
+    "aria-hidden": "true",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        stroke: "#cfcfcf",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "m10 14.773 4.275 2.628a.656.656 0 0 0 .978-.716l-1.162-4.905 3.804-3.282a.66.66 0 0 0-.374-1.154l-4.993-.407-1.923-4.656a.653.653 0 0 0-1.21 0L7.473 6.937l-4.993.407a.661.661 0 0 0-.374 1.158l3.805 3.281-1.163 4.902a.656.656 0 0 0 .978.716z"
+      }
+    )
+  }
+);
+var StarRoundedFilled = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20",
+    width: "1em",
+    height: "1em",
+    "aria-hidden": "true",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#FE9A00",
+        d: "m18.304 8.973-3.516 3.033 1.071 4.537a1.281 1.281 0 0 1-1.914 1.392L10 15.507l-3.948 2.428a1.28 1.28 0 0 1-1.911-1.392l1.075-4.537L1.7 8.973a1.286 1.286 0 0 1 .728-2.254l4.61-.372 1.778-4.303a1.278 1.278 0 0 1 2.364 0l1.778 4.303 4.61.372a1.286 1.286 0 0 1 .731 2.255z"
+      }
+    )
+  }
+);
+var Star = forwardRef(
+  ({ size = "medium", selected = false, className, onClick, ...props }, ref) => {
+    const sizeConfig = {
+      small: { width: 16, height: 16 },
+      medium: { width: 20, height: 20 },
+      large: { width: 24, height: 24 }
+    };
+    const config = sizeConfig[size];
+    return selected ? /* @__PURE__ */ jsx(
+      StarRoundedFilled,
+      {
+        ref,
+        width: config.width,
+        height: config.height,
+        className: cn("cursor-pointer transition-colors", className),
+        onClick,
+        ...props
+      }
+    ) : /* @__PURE__ */ jsx(
+      StarRoundedEmpty,
+      {
+        ref,
+        width: config.width,
+        height: config.height,
+        className: cn("cursor-pointer transition-colors", className),
+        onClick,
+        ...props
+      }
+    );
+  }
+);
+Star.displayName = "Star";
+var tagVariants = cva(
+  "inline-flex h-5 items-center gap-0.5 rounded-medium px-1 text-body-3 font-medium",
+  {
+    variants: {
+      color: {
+        mono: "text-tint-foreground-mono",
+        sky: "text-tint-foreground-sky",
+        red: "text-tint-foreground-red",
+        amber: "text-tint-foreground-amber",
+        green: "text-tint-foreground-green",
+        orange: "text-tint-foreground-orange",
+        cyan: "text-tint-foreground-cyan",
+        violet: "text-tint-foreground-violet",
+        pink: "text-tint-foreground-pink",
+        yellow: "text-tint-foreground-yellow",
+        lime: "text-tint-foreground-lime",
+        emerald: "text-tint-foreground-emerald",
+        teal: "text-tint-foreground-teal",
+        blue: "text-tint-foreground-blue",
+        indigo: "text-tint-foreground-indigo",
+        purple: "text-tint-foreground-purple",
+        fuchsia: "text-tint-foreground-fuchsia",
+        rose: "text-tint-foreground-rose"
+      },
+      type: {
+        fill: "",
+        line: "bg-component-tag border border-border-secondary"
+      }
+    },
+    compoundVariants: [
+      { color: "mono", type: "fill", className: "bg-tint-background-mono" },
+      { color: "sky", type: "fill", className: "bg-tint-background-sky" },
+      { color: "red", type: "fill", className: "bg-tint-background-red" },
+      { color: "amber", type: "fill", className: "bg-tint-background-amber" },
+      { color: "green", type: "fill", className: "bg-tint-background-green" },
+      { color: "orange", type: "fill", className: "bg-tint-background-orange" },
+      { color: "cyan", type: "fill", className: "bg-tint-background-cyan" },
+      { color: "violet", type: "fill", className: "bg-tint-background-violet" },
+      { color: "pink", type: "fill", className: "bg-tint-background-pink" },
+      { color: "yellow", type: "fill", className: "bg-tint-background-yellow" },
+      { color: "lime", type: "fill", className: "bg-tint-background-lime" },
+      { color: "emerald", type: "fill", className: "bg-tint-background-emerald" },
+      { color: "teal", type: "fill", className: "bg-tint-background-teal" },
+      { color: "blue", type: "fill", className: "bg-tint-background-blue" },
+      { color: "indigo", type: "fill", className: "bg-tint-background-indigo" },
+      { color: "purple", type: "fill", className: "bg-tint-background-purple" },
+      { color: "fuchsia", type: "fill", className: "bg-tint-background-fuchsia" },
+      { color: "rose", type: "fill", className: "bg-tint-background-rose" }
+    ],
+    defaultVariants: {
+      color: "mono",
+      type: "fill"
+    }
+  }
+);
+var Tag = forwardRef(
+  ({
+    className,
+    color,
+    type = "fill",
+    leftIcon,
+    canDelete,
+    onDelete,
+    rightSlot,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "tag",
+        className: cn(tagVariants({ color, type, className })),
+        ref,
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 size-3 items-center justify-center [&>svg]:size-3", children: leftIcon }),
+          /* @__PURE__ */ jsx("span", { className: "px-0.5 text-body-3 font-medium", children }),
+          canDelete && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete?.();
+              },
+              children: /* @__PURE__ */ jsx(X, { type: "regular", className: "size-3 [&>*]:stroke-current [&>path]:fill-current" })
+            }
+          ),
+          rightSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: rightSlot })
+        ]
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+var DoubleTag = forwardRef(
+  ({ className, items, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex w-fit overflow-hidden rounded-medium border border-border-secondary",
+          className
+        ),
+        ref,
+        ...props,
+        children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Tag, { color: item.color, type: "line", className: "rounded-none border-none", children: item.content }),
+          index < items.length - 1 && /* @__PURE__ */ jsx("div", { className: "min-h-[20px] w-px border-none bg-border-secondary" })
+        ] }, index))
+      }
+    );
+  }
+);
+DoubleTag.displayName = "DoubleTag";
+var Breadcrumb = forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+Breadcrumb.List = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "flex flex-wrap items-center gap-[4px] break-words text-body-2 text-text-tertiary",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Breadcrumb.Item = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("inline-flex items-center", className), ...props }));
+Breadcrumb.Link = forwardRef(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn("text-text-link", className), ...props });
+  }
+);
+Breadcrumb.Page = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("text-text-primary", className),
+      ...props
+    }
+  )
+);
+Breadcrumb.Separator = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? "/"
+    }
+  )
+);
+Breadcrumb.Ellipsis = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex h-9 w-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontal, { type: "regular", className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  )
+);
+Breadcrumb.displayName = "Breadcrumb";
+Breadcrumb.List.displayName = "Breadcrumb.List";
+Breadcrumb.Item.displayName = "Breadcrumb.Item";
+Breadcrumb.Link.displayName = "Breadcrumb.Link";
+Breadcrumb.Page.displayName = "Breadcrumb.Page";
+Breadcrumb.Separator.displayName = "Breadcrumb.Separator";
+Breadcrumb.Ellipsis.displayName = "Breadcrumb.Ellipsis";
+var TabsContext = createContext({ type: "primary" });
+var useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a TabsProvider");
+  }
+  return context;
+};
+var tabsListVariants = cva("inline-flex items-center", {
+  variants: {
+    type: {
+      primary: "h-9 gap-5 border-b border-border-primary",
+      secondary: "h-8 gap-1"
+    }
+  },
+  defaultVariants: {
+    type: "primary"
+  }
+});
+var tabsTriggerVariants = cva(
+  "group inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-pretendard font-semibold text-body-2 leading-[140%] transition-all disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      type: {
+        primary: [
+          "h-9 border-b-2 border-transparent p-0 text-text-tertiary",
+          "hover:text-text-primary",
+          "data-[state=active]:border-border-focused data-[state=active]:text-text-primary"
+        ],
+        secondary: [
+          "h-8 rounded-strong px-2 text-text-tertiary",
+          "hover:text-text-primary",
+          "data-[state=active]:rounded-medium data-[state=active]:bg-elevation-elevation-2 data-[state=active]:text-text-primary"
+        ]
+      }
+    },
+    defaultVariants: {
+      type: "primary"
+    }
+  }
+);
+var Tabs = forwardRef(
+  ({ type = "primary", children, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { type }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children }) })
+);
+Tabs.List = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { type } = useTabsContext();
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(tabsListVariants({ type }), className),
+        ...props
+      }
+    );
+  }
+);
+Tabs.Trigger = forwardRef(
+  ({ className, leftIcon, rightIcon, badge, children, ...props }, ref) => {
+    const { type } = useTabsContext();
+    return /* @__PURE__ */ jsxs(
+      TabsPrimitive.Trigger,
+      {
+        ref,
+        className: cn(tabsTriggerVariants({ type }), className),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "size-4", children: leftIcon }),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            children,
+            badge && /* @__PURE__ */ jsx("span", { className: "text-text-tertiary group-data-[state=active]:text-text-accent", children: badge })
+          ] }),
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "size-4", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Tabs.Content = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { ref, className: cn(className), ...props })
+);
+Tabs.displayName = "Tabs";
+Tabs.List.displayName = "Tabs.List";
+Tabs.Trigger.displayName = "Tabs.Trigger";
+Tabs.Content.displayName = "Tabs.Content";
+var colorStyles = {
+  accent: {
+    contained: {
+      button: "bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled",
+      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
+      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+    },
+    outlined: {
+      button: "border border-border-accent hover:bg-elevation-accent disabled:border-border-accent-disabled",
+      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
+      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+    },
+    invisible: {
+      button: "hover:bg-elevation-accent",
+      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
+      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+    }
+  },
+  assistive: {
+    contained: {
+      button: "bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    }
+  },
+  critical: {
+    contained: {
+      button: "bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled",
+      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
+      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+    },
+    outlined: {
+      button: "border border-border-critical hover:bg-elevation-critical disabled:border-border-critical-disabled",
+      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
+      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+    },
+    invisible: {
+      button: "hover:bg-elevation-critical",
+      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
+      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+    }
+  },
+  inverse: {
+    contained: {
+      button: "bg-elevation-elevation-0 hover:bg-elevation-elevation-2 disabled:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    }
+  },
+  primary: {
+    contained: {
+      button: "bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled",
+      icon: "text-icon-inverse group-disabled/button:text-icon-inverse",
+      text: "text-text-inverse group-disabled/button:text-text-inverse"
+    },
+    outlined: {
+      button: "border border-border-secondary hover:bg-elevation-elevation-2 disabled:border-border-secondary",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    },
+    invisible: {
+      button: "hover:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    }
+  }
+};
+var buttonVariants = cva(
+  "inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+  {
+    compoundVariants: [
+      // Primary 색상 조합
+      {
+        className: colorStyles.primary.contained.button,
+        color: "primary",
+        variant: "contained"
+      },
+      {
+        className: colorStyles.primary.outlined.button,
+        color: "primary",
+        variant: "outlined"
+      },
+      {
+        className: colorStyles.primary.invisible.button,
+        color: "primary",
+        variant: "invisible"
+      },
+      // Accent 색상 조합
+      {
+        className: colorStyles.accent.contained.button,
+        color: "accent",
+        variant: "contained"
+      },
+      {
+        className: colorStyles.accent.outlined.button,
+        color: "accent",
+        variant: "outlined"
+      },
+      {
+        className: colorStyles.accent.invisible.button,
+        color: "accent",
+        variant: "invisible"
+      },
+      // Critical 색상 조합
+      {
+        className: colorStyles.critical.contained.button,
+        color: "critical",
+        variant: "contained"
+      },
+      {
+        className: colorStyles.critical.outlined.button,
+        color: "critical",
+        variant: "outlined"
+      },
+      {
+        className: colorStyles.critical.invisible.button,
+        color: "critical",
+        variant: "invisible"
+      },
+      // Assistive 색상 조합 (contained만 지원)
+      {
+        className: colorStyles.assistive.contained.button,
+        color: "assistive",
+        variant: "contained"
+      },
+      // Inverse 색상 조합 (contained만 지원)
+      {
+        className: colorStyles.inverse.contained.button,
+        color: "inverse",
+        variant: "contained"
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      size: "medium",
+      variant: "contained"
+    },
+    variants: {
+      color: {
+        accent: "",
+        assistive: "",
+        critical: "",
+        inverse: "",
+        primary: ""
+      },
+      size: {
+        xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
+        small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
+        medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
+        large: "h-10 gap-1 px-2.5 text-body-1 font-medium",
+        xlarge: "h-12 gap-1 px-3 text-title-2 font-medium"
+      },
+      variant: {
+        contained: "",
+        outlined: "bg-transparent",
+        invisible: "bg-transparent"
+      }
+    }
+  }
+);
+var IconSize = {
+  xsmall: "h-4 w-4",
+  small: "h-4 w-4",
+  medium: "h-4 w-4",
+  large: "h-5 w-5",
+  xlarge: "h-6 w-6"
+};
+var Button = forwardRef(
+  ({
+    className,
+    variant = "contained",
+    color = "primary",
+    size = "medium",
+    icon,
+    children,
+    ...props
+  }, ref) => {
+    const validColorStyle = color === "assistive" || color === "inverse" ? colorStyles[color].contained : colorStyles[color][variant];
+    const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      icon && cloneElement(icon, {
+        className: cn(
+          "shrink-0 [&>path]:fill-current",
+          validColorStyle.icon,
+          icon.props.className,
+          IconSize[size ?? "medium"]
+        )
+      }),
+      typeof children === "string" ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("truncate", size === "xlarge" ? "px-1" : "px-0.5", validColorStyle.text),
+          children
+        }
+      ) : children
+    ] });
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          buttonVariants({
+            className,
+            color,
+            size,
+            variant
+          }),
+          "group/button"
+        ),
+        ref,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var segmentListVariants = cva(
+  "inline-flex items-center overflow-hidden rounded-medium bg-elevation-elevation-2",
+  {
+    variants: {
+      size: {
+        small: "h-7 gap-0 p-0.5",
+        medium: "h-8 gap-0 p-0.5",
+        large: "h-10 gap-0 p-0.5"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var segmentItemVariants = cva(
+  [
+    "flex flex-1 items-center justify-center rounded-weak",
+    "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring",
+    "disabled:cursor-not-allowed",
+    "data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak",
+    "data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled",
+    "transition-colors duration-200 ease-in-out"
+  ],
+  {
+    variants: {
+      size: {
+        small: "h-6 gap-0.5 text-body-3 font-medium",
+        medium: "h-7 gap-1 text-body-2 font-medium",
+        large: "h-9 gap-1.5 text-body-2 font-medium"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var segmentIconVariants = cva("flex items-center justify-center", {
+  variants: {
+    size: {
+      small: "size-4",
+      medium: "size-4",
+      large: "size-5"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+var SegmentContext = createContext(void 0);
+var useSegmentContext = () => {
+  const context = useContext(SegmentContext);
+  if (!context) {
+    throw new Error("Segment components must be used within a Segment");
+  }
+  return context;
+};
+var Segment = forwardRef(
+  ({ size = "medium", children, ...props }, ref) => /* @__PURE__ */ jsx(SegmentContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children }) })
+);
+Segment.List = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = useSegmentContext();
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(segmentListVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+Segment.Item = forwardRef(
+  ({ className, leftIcon, children, ...props }, ref) => {
+    const { size } = useSegmentContext();
+    return /* @__PURE__ */ jsxs(
+      TabsPrimitive.Trigger,
+      {
+        ref,
+        className: cn(segmentItemVariants({ size }), className),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: cn(segmentIconVariants({ size })), children: leftIcon }),
+          /* @__PURE__ */ jsx("span", { className: "flex items-center", children })
+        ]
+      }
+    );
+  }
+);
+Segment.Content = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Segment.displayName = "Segment";
+Segment.List.displayName = "Segment.List";
+Segment.Content.displayName = "Segment.Content";
+Segment.Item.displayName = "Segment.Item";
+var commonInputVariants = {
+  // Container variants - 전체 컴포넌트 래퍼
+  container: cva("flex flex-col"),
+  // Label variants - 라벨 텍스트
+  label: cva("inline-block font-regular text-text-primary", {
+    variants: {
+      size: {
+        xsmall: "mb-[2px] text-body-3",
+        small: "mb-[4px] text-body-2",
+        medium: "mb-[4px] text-body-2",
+        large: "mb-[6px] text-body-1"
+      },
+      disabled: {
+        true: "text-text-disabled"
+      },
+      required: {
+        true: 'after:ml-0.5 after:text-text-critical after:content-["*"]'
+      }
+    },
+    compoundVariants: [
+      {
+        required: true,
+        disabled: true,
+        className: "after:text-text-disabled"
+      }
+    ],
+    defaultVariants: { size: "medium" }
+  }),
+  // Description variants - 설명 텍스트
+  description: cva("mt-0.5 inline-block text-text-tertiary", {
+    variants: {
+      size: {
+        xsmall: "text-caption",
+        small: "text-body-3",
+        medium: "text-body-3",
+        large: "text-body-2"
+      },
+      error: {
+        true: "text-text-critical"
+      },
+      disabled: {
+        true: "text-text-disabled"
+      }
+    },
+    compoundVariants: [
+      {
+        error: true,
+        disabled: true,
+        className: "text-text-disabled"
+        // disabled 우선 적용
+      }
+    ],
+    defaultVariants: { size: "medium" }
+  }),
+  // Icon variants - 아이콘 크기
+  icon: cva("shrink-0", {
+    variants: {
+      size: {
+        xsmall: "size-4",
+        small: "size-4",
+        medium: "size-4",
+        large: "size-5"
+      }
+    },
+    defaultVariants: { size: "medium" }
+  })
+};
+
+// src/input/selectVariants.ts
+var selectVariants = {
+  container: commonInputVariants.container,
+  content: cn(
+    "relative border border-border-primary z-50 min-w-[8rem] overflow-hidden rounded-medium bg-background-overlay shadow-weak",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+  ),
+  description: commonInputVariants.description,
+  iconSize: commonInputVariants.icon,
+  item: cva(
+    "relative flex w-full cursor-pointer select-none items-center rounded-weak px-2 text-body-2 text-text-primary outline-none hover:bg-elevation-elevation-2 data-[disabled]:pointer-events-none data-[state=checked]:bg-elevation-accent data-[disabled]:text-text-disabled",
+    {
+      defaultVariants: { size: "medium" },
+      variants: {
+        size: {
+          xsmall: "h-6",
+          small: "h-7",
+          medium: "h-8",
+          large: "h-10"
+        }
+      }
+    }
+  ),
+  itemText: cva("truncate flex items-center flex-1 min-w-0", {
+    defaultVariants: { size: "medium" },
+    variants: {
+      size: {
+        xsmall: "h-6",
+        small: "h-7",
+        medium: "h-8",
+        large: "h-10"
+      }
+    }
+  }),
+  label: commonInputVariants.label,
+  trigger: cva(
+    "group flex w-full items-center justify-between rounded-medium outline-none disabled:cursor-not-allowed disabled:bg-elevation-elevation-2 disabled:text-text-disabled data-[state=open]:border data-[state=open]:border-border-focused [&>span]:line-clamp-1 [&[data-placeholder]]:text-text-tertiary [&_svg]:text-icon-primary",
+    {
+      compoundVariants: [
+        {
+          className: "border-border-accent text-tint-foreground-sky bg-elevation-accent [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          focus: true,
+          variant: "line"
+        },
+        // active + fill: 배경만 accent로 변경
+        {
+          className: "bg-elevation-accent text-tint-foreground-sky [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          active: true,
+          variant: "fill"
+        },
+        // active + line: 배경 accent + 테두리 accent
+        {
+          className: "bg-elevation-accent border-border-accent text-tint-foreground-sky [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          active: true,
+          variant: "line"
+        }
+      ],
+      defaultVariants: {
+        active: false,
+        error: false,
+        focus: false,
+        size: "medium",
+        variant: "fill"
+      },
+      variants: {
+        active: {
+          false: "",
+          true: ""
+        },
+        error: {
+          false: "",
+          true: "border !border-border-critical"
+        },
+        focus: {
+          false: "",
+          // 현재는 line 타입만 focus 가능
+          true: ""
+        },
+        size: {
+          xsmall: "h-6 px-[4px] text-body-3",
+          small: "h-7 px-[6px] text-body-2",
+          medium: "h-8 px-[8px] text-body-2",
+          large: "h-10 px-[10px] text-body-1"
+        },
+        variant: {
+          fill: "bg-elevation-elevation-2",
+          line: "border-border-primary border"
+        }
+      }
+    }
+  ),
+  triggerInner: cva("flex w-full items-center", {
+    defaultVariants: { size: "medium" },
+    variants: {
+      size: {
+        xsmall: "gap-0",
+        small: "gap-[2px]",
+        medium: "gap-[2px]",
+        large: "gap-[4px]"
+      }
+    }
+  }),
+  viewport: cn("flex flex-col gap-0.5 p-1")
+};
+var SelectContext = createContext(null);
+var useSelectContext = () => {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("Select components must be used within a Select");
+  }
+  return context;
+};
+var SelectGroupContext = createContext(null);
+var useSelectGroupContext = () => {
+  return useContext(SelectGroupContext);
+};
+var Select = forwardRef(
+  ({
+    children,
+    size = "medium",
+    variant = "fill",
+    error = false,
+    disabled = false,
+    focus = false,
+    active = false,
+    className,
+    ...selectProps
+  }, ref) => {
+    const uniqueId = useId();
+    const id = `select-${uniqueId}`;
+    return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { active, disabled, error, focus, id, size, variant }, children: /* @__PURE__ */ jsx("div", { ref, className: cn(selectVariants.container(), className), children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { disabled, ...selectProps, children }) }) });
+  }
+);
+Select.Value = forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, className, ...props, children });
+});
+Select.Trigger = forwardRef(
+  ({ className, children, leftIcon, ...props }, ref) => {
+    const { size, error, id, variant, focus, active } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const groupClasses = groupContext ? cn("rounded-none border-0", {
+      "rounded-l-medium": groupContext.isFirstChild,
+      "rounded-r-medium": groupContext.isLastChild,
+      // line variant: group이 외곽 border를 제공하므로, open 시 border 대신 inset ring 사용
+      "data-[state=open]:border-0 data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-border-focused": variant === "line"
+    }) : void 0;
+    return /* @__PURE__ */ jsx(
+      SelectPrimitive.Trigger,
+      {
+        ref,
+        id,
+        "data-slot": "select-trigger",
+        className: cn(
+          selectVariants.trigger({ active, error, focus, size, variant }),
+          groupClasses,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: cn(selectVariants.triggerInner({ size })), children: [
+          leftIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                selectVariants.iconSize({ size }),
+                "flex items-center justify-center group-disabled:text-icon-disabled"
+              ),
+              children: leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate text-left", children }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              type: "regular",
+              className: cn(
+                selectVariants.iconSize({ size }),
+                "transition-transform duration-200 group-data-[state=open]:rotate-180",
+                "group-disabled:text-icon-disabled"
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Select.Box = forwardRef(
+  ({ placeholder, leftIcon, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select.Trigger, { ref, leftIcon, className, ...props, children: /* @__PURE__ */ jsx(Select.Value, { placeholder }) });
+  }
+);
+Select.List = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    SelectPrimitive.Content,
+    {
+      ref,
+      "data-slot": "select-content",
+      className: cn(selectVariants.content, "max-h-60 ", className),
+      position: "popper",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          "data-slot": "select-viewport",
+          className: cn(
+            selectVariants.viewport,
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      )
+    }
+  ) })
+);
+Select.Label = forwardRef(
+  ({ children, required = false, size: sizeProp, className }, ref) => {
+    const { size: contextSize, disabled, id } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        htmlFor: id,
+        className: cn(selectVariants.label({ disabled, required, size }), className),
+        children
+      }
+    );
+  }
+);
+Select.Item = forwardRef(
+  ({
+    className,
+    children,
+    leftIcon,
+    rightIcon,
+    leftIconSize,
+    rightIconSize,
+    size: sizeProp,
+    ...props
+  }, ref) => {
+    const { size: contextSize } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    return /* @__PURE__ */ jsx(
+      SelectPrimitive.Item,
+      {
+        "data-slot": "select-item",
+        ref,
+        className: cn(selectVariants.item({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-0.5", children: [
+            leftIcon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  selectVariants.iconSize({ size: leftIconSize ?? size }),
+                  "flex items-center justify-center text-icon-primary"
+                ),
+                children: leftIcon
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn(selectVariants.itemText({ size })), children }) })
+          ] }),
+          rightIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                selectVariants.iconSize({ size: rightIconSize ?? size }),
+                "flex items-center justify-center text-icon-primary"
+              ),
+              children: rightIcon
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Select.Empty = forwardRef(
+  ({ children = "No data", className }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex min-h-8 items-center justify-center p-2", className), children: /* @__PURE__ */ jsx("p", { className: "text-body-2 text-text-disabled", children }) });
+  }
+);
+Select.Description = forwardRef(
+  ({ children, size: sizeProp, className }, ref) => {
+    const { size: contextSize, error, disabled } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    if (!children) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "select-description",
+        className: cn(selectVariants.description({ disabled, error, size }), className),
+        children: /* @__PURE__ */ jsx("p", { children })
+      }
+    );
+  }
+);
+Select.Group = forwardRef(
+  ({ children, size = "medium", variant = "fill", hasBackground = false, className }, ref) => {
+    const childArray = React2.Children.toArray(children);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-fit flex-row items-stretch overflow-clip rounded-medium",
+          variant === "line" && "border border-border-primary",
+          hasBackground && "bg-elevation-elevation-0",
+          className
+        ),
+        children: childArray.map((child, index) => {
+          const isFirst = index === 0;
+          const isLast = index === childArray.length - 1;
+          return /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SelectGroupContext.Provider,
+              {
+                value: { isFirstChild: isFirst, isLastChild: isLast, size, variant },
+                children: child
+              }
+            ),
+            !isLast && /* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-border-primary" })
+          ] }, index);
+        })
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+Select.Label.displayName = "Select.Label";
+Select.Trigger.displayName = "Select.Trigger";
+Select.Box.displayName = "Select.Box";
+Select.Value.displayName = "Select.Value";
+Select.List.displayName = "Select.List";
+Select.Item.displayName = "Select.Item";
+Select.Empty.displayName = "Select.Empty";
+Select.Description.displayName = "Select.Description";
+Select.Group.displayName = "Select.Group";
+var tooltipContentVariants = cva(
+  [
+    // Base layout
+    "z-50 flex flex-col items-start overflow-hidden",
+    "rounded-medium",
+    "text-text-static-light",
+    "bg-component-tooltip border border-border-primary",
+    "shadow-medium",
+    "animate-in fade-in-0 zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    "data-[side=bottom]:slide-in-from-top-2",
+    "data-[side=left]:slide-in-from-right-2",
+    "data-[side=right]:slide-in-from-left-2",
+    "data-[side=top]:slide-in-from-bottom-2"
+  ],
+  {
+    variants: {
+      size: {
+        tiny: "px-2 py-1 text-body-3",
+        small: "w-[160px] gap-[8px] px-[12px] py-[10px]",
+        medium: "w-[240px] gap-[8px] px-[12px] py-[10px]",
+        large: "w-[320px] gap-[8px] px-[12px] py-[10px]",
+        xlarge: "w-[400px] gap-[8px] px-[12px] py-[10px]"
+      }
+    },
+    defaultVariants: { size: "small" }
+  }
+);
+var tooltipTitleVariants = cva([
+  "text-body-1 font-semibold text-text-static-light",
+  "group-data-[size=tiny]/tooltip-content:text-body-3"
+]);
+var tooltipTextVariants = cva([
+  "text-body-2 font-regular text-text-static-light",
+  "group-data-[size=tiny]/tooltip-content:text-body-3"
+]);
+var Tooltip = TooltipPrimitive.Root;
+Tooltip.Provider = TooltipPrimitive.Provider;
+Tooltip.Trigger = TooltipPrimitive.Trigger;
+Tooltip.Content = forwardRef(({ className, sideOffset = 4, size, children, portalContainer, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    "data-size": size,
+    className: cn("group/tooltip-content", tooltipContentVariants({ size }), className),
+    ...props,
+    children
+  }
+) }));
+Tooltip.Title = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(tooltipTitleVariants(), className), ...props, children })
+);
+Tooltip.Description = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(tooltipTextVariants(), className), ...props, children })
+);
+Tooltip.displayName = "Tooltip";
+Tooltip.Content.displayName = "Tooltip.Content";
+Tooltip.Title.displayName = "Tooltip.Title";
+Tooltip.Description.displayName = "Tooltip.Description";
+Tooltip.Trigger.displayName = "Tooltip.Trigger";
+Tooltip.Provider.displayName = "Tooltip.Provider";
+var FlatTooltip = ({ children, title, size, description, ...props }) => {
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs(Tooltip.Content, { size, ...props, children: [
+      title && /* @__PURE__ */ jsx(Tooltip.Title, { children: title }),
+      description && /* @__PURE__ */ jsx(Tooltip.Description, { children: description })
+    ] })
+  ] }) });
+};
+function ConditionalTooltip({ children, tooltip }) {
+  if (typeof tooltip === "string") {
+    return /* @__PURE__ */ jsx(FlatTooltip, { size: "tiny", description: tooltip, children });
+  }
+  if (tooltip && typeof tooltip === "object" && "description" in tooltip && tooltip.use !== false) {
+    return /* @__PURE__ */ jsx(FlatTooltip, { size: tooltip.size || "tiny", ...tooltip, children });
+  }
+  return children;
+}
+FlatTooltip.displayName = "FlatTooltip";
+ConditionalTooltip.displayName = "ConditionalTooltip";
+var iconButtonSizeClasses = {
+  xsmall: "size-6",
+  small: "size-7",
+  medium: "size-8",
+  large: "size-10",
+  xlarge: "size-12"
+};
+var IconButton = forwardRef(
+  ({
+    className,
+    tooltip,
+    variant = "contained",
+    icon,
+    size = "medium",
+    color = "primary",
+    ...props
+  }, ref) => {
+    const buttonProps = {
+      className: cn(iconButtonSizeClasses[size], "px-0", className),
+      color,
+      icon,
+      size,
+      variant,
+      ...props
+    };
+    return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsx(Button, { ref, ...buttonProps }) });
+  }
+);
+IconButton.displayName = "IconButton";
+var ButtonGroup = forwardRef(
+  ({
+    variant = "contained",
+    iconOnly = false,
+    hasBackground = false,
+    size = "medium",
+    items,
+    className
+  }, ref) => {
+    if (items.length === 0) {
+      return null;
+    }
+    const isOutlined = variant === "outlined";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center overflow-hidden rounded-medium",
+          hasBackground && "bg-elevation-elevation-0",
+          className
+        ),
+        role: "group",
+        children: items.map((item, index) => {
+          const isFirst = index === 0;
+          const isLast = index === items.length - 1;
+          const roundedClasses = cn("rounded-none", {
+            "rounded-l-medium": isFirst,
+            "rounded-r-medium": isLast
+          });
+          const dividerClasses = !isOutlined && !isLast ? "border-r border-border-primary" : "";
+          const mergeClasses = isOutlined && !isFirst ? "-ml-px" : "";
+          const hoverClasses = isOutlined ? "relative hover:z-10" : "";
+          if (iconOnly) {
+            const iconBaseProps = {
+              className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
+              icon: item.icon,
+              onClick: item.onClick,
+              size
+            };
+            return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "assistive", variant: "contained" }) : /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
+          }
+          const buttonBaseProps = {
+            className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
+            icon: item.icon,
+            onClick: item.onClick,
+            size
+          };
+          return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "assistive", variant: "contained", children: item.label }) : /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
+        })
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var containerVariants = cva("inline-flex items-center", {
+  variants: {
+    size: {
+      small: "gap-1",
+      medium: "gap-1.5",
+      large: "gap-2"
+    },
+    labelPosition: {
+      right: "flex-row",
+      left: "flex-row-reverse"
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    labelPosition: "right"
+  }
+});
+var boxVariants = cva(
+  "peer shrink-0 cursor-pointer rounded-weak border border-border-secondary ring-offset-background transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed enabled:data-[state=unchecked]:hover:bg-elevation-elevation-2 disabled:data-[state=unchecked]:bg-elevation-elevation-3 bg-background-primary",
+  {
+    variants: {
+      size: {
+        small: "size-4",
+        medium: "size-5",
+        large: "size-6"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var labelVariants = cva(
+  "cursor-pointer select-none text-text-primary peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled",
+  {
+    variants: {
+      size: {
+        small: "text-body-3",
+        medium: "text-body-2",
+        large: "text-body-1"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var iconVariants = cva("text-icon-static-light", {
+  variants: {
+    size: {
+      small: "size-4",
+      medium: "size-5",
+      large: "size-6"
+    },
+    disabled: {
+      true: "text-icon-inverse-disabled"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+var stateClasses = [
+  "data-[state=checked]:bg-solid-accent-default data-[state=checked]:border-transparent",
+  "data-[state=indeterminate]:bg-solid-accent-default data-[state=indeterminate]:border-transparent",
+  "enabled:data-[state=checked]:hover:bg-solid-accent-hovered enabled:data-[state=indeterminate]:hover:bg-solid-accent-hovered",
+  "enabled:data-[state=checked]:hover:border-transparent enabled:data-[state=indeterminate]:hover:border-transparent",
+  "disabled:data-[state=checked]:bg-solid-accent-disabled disabled:data-[state=indeterminate]:bg-solid-accent-disabled",
+  "disabled:data-[state=checked]:border-transparent disabled:data-[state=indeterminate]:border-transparent"
+];
+var Checkbox = forwardRef(
+  ({
+    className,
+    label,
+    id,
+    size = "medium",
+    labelPosition = "right",
+    checked,
+    onCheckedChange,
+    disabled = false,
+    defaultChecked,
+    ...props
+  }, ref) => {
+    const uniqueId = useId();
+    const checkboxId = id || uniqueId;
+    const checkboxState = checked === "indeterminate" ? "indeterminate" : checked ? "checked" : "unchecked";
+    const checkboxProps = {
+      ...props,
+      ref,
+      id: checkboxId,
+      className: cn(boxVariants({ size }), stateClasses, className),
+      onCheckedChange: (state) => {
+        onCheckedChange?.(state === "indeterminate" ? true : !!state);
+      },
+      "data-state": checkboxState,
+      disabled
+    };
+    if (checked !== void 0) {
+      checkboxProps.checked = checked;
+    }
+    if (defaultChecked !== void 0) {
+      checkboxProps.defaultChecked = defaultChecked;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn(containerVariants({ size, labelPosition })), children: [
+      /* @__PURE__ */ jsx(
+        CheckboxPrimitive.Root,
+        {
+          ...checkboxProps,
+          children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center", children: checkboxState === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { type: "regular", className: cn(iconVariants({ size, disabled })) }) : checkboxState === "checked" ? /* @__PURE__ */ jsx(Check, { type: "regular", className: cn(iconVariants({ size, disabled })) }) : null })
+        }
+      ),
+      label && /* @__PURE__ */ jsx("label", { htmlFor: checkboxId, className: cn(labelVariants({ size })), children: label })
+    ] });
+  }
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var containerVariants2 = cva("inline-flex items-center", {
+  variants: {
+    size: { small: "gap-1", medium: "gap-1.5", large: "gap-2" },
+    labelPosition: { right: "flex-row", left: "flex-row-reverse" }
+  },
+  defaultVariants: { size: "medium", labelPosition: "right" }
+});
+var radioVariants = cva(
+  "peer relative shrink-0 rounded-full border border-border-secondary ring-offset-background transition-colors hover:bg-elevation-elevation-2 bg-background-primary",
+  {
+    variants: { size: { small: "size-4", medium: "size-5", large: "size-6" } },
+    defaultVariants: { size: "medium" }
+  }
+);
+var stateClasses2 = [
+  "disabled:cursor-not-allowed",
+  "disabled:data-[state=unchecked]:bg-elevation-elevation-3"
+];
+var checkedStateClasses = [
+  "data-[state=checked]:border-border-accent",
+  "disabled:data-[state=checked]:border-border-accent-disabled"
+];
+var indicatorVariants = cva(
+  "pointer-events-none block rounded-full bg-icon-accent data-[disabled]:bg-icon-accent-disabled",
+  {
+    variants: {
+      size: { small: "size-2.5", medium: "size-3", large: "size-3.5" }
+    },
+    defaultVariants: { size: "medium" }
+  }
+);
+var labelVariants2 = cva(
+  "cursor-pointer select-none text-text-primary peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled",
+  {
+    variants: { size: { small: "text-body-3", medium: "text-body-2", large: "text-body-1" } },
+    defaultVariants: { size: "medium" }
+  }
+);
+var Radio = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-2", className), ...props })
+);
+Radio.Item = forwardRef(
+  ({ className, size = "medium", label, labelPosition = "right", id, disabled, ...props }, ref) => {
+    const uniqueId = useId();
+    const radioId = id || uniqueId;
+    const control = /* @__PURE__ */ jsx(
+      RadioGroupPrimitive.Item,
+      {
+        ref,
+        id: radioId,
+        disabled,
+        className: cn(radioVariants({ size }), stateClasses2, checkedStateClasses, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("block", indicatorVariants({ size })),
+            "data-disabled": disabled ? "" : void 0
+          }
+        ) })
+      }
+    );
+    if (!label) {
+      return control;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn(containerVariants2({ size, labelPosition })), children: [
+      control,
+      /* @__PURE__ */ jsx("label", { htmlFor: radioId, className: cn(labelVariants2({ size })), children: label })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+Radio.Item.displayName = "Radio.Item";
+var switchVariants = cva(
+  "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full disabled:cursor-not-allowed data-[state=checked]:bg-solid-accent-default data-[state=unchecked]:bg-elevation-elevation-4 hover:data-[state=checked]:bg-solid-accent-hovered hover:data-[state=unchecked]:bg-elevation-elevation-5 disabled:data-[state=checked]:bg-solid-accent-disabled disabled:data-[state=unchecked]:bg-elevation-elevation-3 disabled:hover:data-[state=checked]:bg-solid-accent-disabled disabled:hover:data-[state=unchecked]:bg-elevation-elevation-3",
+  {
+    variants: {
+      size: {
+        small: "h-[16px] w-[28px]",
+        medium: "h-[20px] w-[36px]",
+        large: "h-[24px] w-[44px]"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var switchThumbVariants = cva(
+  "pointer-events-none absolute bg-icon-static-light left-[2px] top-[2px] rounded-full ring-0 data-[state=unchecked]:translate-x-0 data-[disabled]:bg-icon-inverse-disabled",
+  {
+    variants: {
+      size: {
+        small: "size-[12px] data-[state=checked]:translate-x-[12px]",
+        medium: "size-[16px] data-[state=checked]:translate-x-[16px]",
+        large: "size-[20px] data-[state=checked]:translate-x-[20px]"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var containerVariants3 = cva("inline-flex items-center", {
+  variants: {
+    size: {
+      small: "gap-1",
+      medium: "gap-1.5",
+      large: "gap-2"
+    },
+    labelPosition: {
+      right: "flex-row",
+      left: "flex-row-reverse"
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    labelPosition: "right"
+  }
+});
+var switchLabelVariants = cva(
+  "cursor-pointer select-none font-regular text-text-primary peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled",
+  {
+    variants: {
+      size: {
+        small: "text-body-3",
+        medium: "text-body-2",
+        large: "text-body-1"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var Switch = forwardRef(
+  ({ className, size = "medium", label, labelPosition = "right", id, ...props }, ref) => {
+    const switchId = useId();
+    const finalId = id || switchId;
+    const switchElement = /* @__PURE__ */ jsx(
+      SwitchPrimitives.Root,
+      {
+        id: finalId,
+        className: cn(switchVariants({ size }), className),
+        ...props,
+        ref,
+        children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn(switchThumbVariants({ size })) })
+      }
+    );
+    if (!label) {
+      return switchElement;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn(containerVariants3({ size, labelPosition })), children: [
+      switchElement,
+      /* @__PURE__ */ jsx("label", { htmlFor: finalId, className: cn(switchLabelVariants({ size })), children: label })
+    ] });
+  }
+);
+Switch.displayName = SwitchPrimitives.Root.displayName;
+function DatePickerChevron({ orientation }) {
+  if (orientation === "left") {
+    return /* @__PURE__ */ jsx(ChevronLeft, { type: "regular", className: "size-5" });
+  }
+  return /* @__PURE__ */ jsx(ChevronRight, { type: "regular", className: "size-5" });
+}
+function DatePickerDayButton({
+  day,
+  modifiers,
+  children,
+  className,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ jsxs("button", { className: cn(className, "relative"), ...buttonProps, children: [
+    children,
+    modifiers.today && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-[3px] left-1/2 size-1 -translate-x-1/2 rounded-full",
+          modifiers.selected ? "bg-text-inverse" : "bg-icon-critical"
+        )
+      }
+    )
+  ] });
+}
+function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
+  const dayPickerProps = { ...rest, mode: type };
+  const defaultClassNames = getDefaultClassNames();
+  const [month, setMonth] = useState(
+    dayPickerProps.month ?? dayPickerProps.defaultMonth ?? /* @__PURE__ */ new Date()
+  );
+  const rangeSelected = type === "range" ? rest.selected : void 0;
+  const isRangeComplete = rangeSelected?.from != null && rangeSelected?.to != null;
+  const handleMonthChange = (newMonth) => {
+    setMonth(newMonth);
+    dayPickerProps.onMonthChange?.(newMonth);
+  };
+  const handleDayClick = (day, modifiers, e) => {
+    if (modifiers.outside) {
+      setMonth(new Date(day.getFullYear(), day.getMonth()));
+    }
+    dayPickerProps.onDayClick?.(day, modifiers, e);
+  };
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      ...dayPickerProps,
+      month,
+      onMonthChange: handleMonthChange,
+      onDayClick: handleDayClick,
+      showOutsideDays,
+      formatters: {
+        formatCaption: (date) => {
+          const year = date.getFullYear();
+          const month2 = String(date.getMonth() + 1).padStart(2, "0");
+          return `${year}\uB144 ${month2}\uC6D4`;
+        },
+        formatWeekdayName: (date) => date.toLocaleDateString("en-US", { weekday: "short" }),
+        ...dayPickerProps.formatters
+      },
+      components: {
+        Chevron: DatePickerChevron,
+        DayButton: DatePickerDayButton,
+        ...dayPickerProps.components
+      },
+      classNames: {
+        root: cn(
+          defaultClassNames.root,
+          "rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium"
+        ),
+        months: cn(defaultClassNames.months, "relative"),
+        month: cn(defaultClassNames.month, "flex flex-col gap-2"),
+        month_caption: cn(defaultClassNames.month_caption, "flex h-7 items-center px-0.5"),
+        caption_label: "text-body-2 font-semibold text-text-primary",
+        nav: cn(defaultClassNames.nav, "absolute right-0 top-0 flex h-7 items-center gap-2"),
+        button_previous: cn(
+          defaultClassNames.button_previous,
+          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
+        ),
+        button_next: cn(
+          defaultClassNames.button_next,
+          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
+        ),
+        weekday: cn(
+          defaultClassNames.weekday,
+          "size-8 text-body-3 font-regular text-text-tertiary"
+        ),
+        month_grid: cn(
+          defaultClassNames.month_grid,
+          "border-separate border-spacing-x-0 border-spacing-y-1"
+        ),
+        week: cn(defaultClassNames.week, "overflow-hidden rounded-medium"),
+        day: cn(defaultClassNames.day, "size-8 text-body-2 font-medium text-text-secondary"),
+        day_button: cn(
+          defaultClassNames.day_button,
+          "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused"
+        ),
+        outside: "!text-text-disabled",
+        selected: cn(
+          "[&>button]:bg-solid-primary-default",
+          "[&>button]:text-text-inverse",
+          "[&>button]:border-0",
+          "[&>button]:hover:border-0"
+        ),
+        range_start: cn(
+          "rounded-none",
+          isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+        ),
+        range_end: cn(
+          "rounded-none",
+          isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+        ),
+        range_middle: cn(
+          "bg-elevation-elevation-2 rounded-none",
+          "[&>button]:!bg-transparent",
+          "[&>button]:!text-text-secondary"
+        ),
+        ...dayPickerProps.classNames
+      },
+      modifiersClassNames: {
+        today: "rdp-calendar-today",
+        ...dayPickerProps.modifiersClassNames
+      }
+    }
+  );
+}
+var TextAreaContext = createContext(null);
+var useTextAreaContext = () => {
+  const context = useContext(TextAreaContext);
+  if (!context) {
+    throw new Error("TextArea components must be used within a TextArea");
+  }
+  return context;
+};
+var textAreaVariants = {
+  container: commonInputVariants.container,
+  label: commonInputVariants.label,
+  field: cva(
+    "scrollbar-overlay block w-full resize-none rounded-medium border transition-colors focus:outline-none",
+    {
+      variants: {
+        variant: {
+          fill: "border-transparent bg-elevation-elevation-2",
+          line: "border-border-primary"
+        },
+        size: {
+          xsmall: "min-h-[60px] px-1.5 py-[3.5px] text-body-3",
+          small: "min-h-[80px] px-2 py-1 text-body-2",
+          medium: "min-h-[100px] px-2.5 py-1.5 text-body-2",
+          large: "min-h-[120px] px-3 py-[9px] text-body-1"
+        },
+        state: {
+          default: "text-text-primary placeholder:text-text-tertiary",
+          focused: "text-text-primary placeholder:text-text-tertiary",
+          error: "text-text-primary placeholder:text-text-tertiary",
+          disabled: "cursor-not-allowed text-text-disabled placeholder:text-text-disabled"
+        }
+      },
+      compoundVariants: [
+        { variant: "fill", state: "focused", class: "border-border-focused" },
+        { variant: "fill", state: "error", class: "border-border-critical" },
+        {
+          variant: "fill",
+          state: "disabled",
+          class: "bg-elevation-elevation-2 border-transparent"
+        },
+        { variant: "line", state: "focused", class: "border-border-focused" },
+        { variant: "line", state: "error", class: "border-border-critical" },
+        { variant: "line", state: "disabled", class: "border-border-primary" }
+      ],
+      defaultVariants: { variant: "fill", size: "medium", state: "default" }
+    }
+  ),
+  descriptionContainer: cva("flex flex-row items-center justify-between", {
+    variants: {
+      size: {
+        xsmall: "gap-0.5 text-caption",
+        small: "gap-1 text-body-3",
+        medium: "gap-1 text-body-3",
+        large: "gap-1 text-body-2"
+      }
+    },
+    defaultVariants: { size: "medium" }
+  }),
+  description: commonInputVariants.description,
+  counter: cva("text-nowrap font-regular", {
+    variants: {
+      disabled: {
+        true: "text-gray-04",
+        false: "text-text-tertiary"
+      }
+    },
+    defaultVariants: { disabled: false }
+  })
+};
+var TextArea = React2.forwardRef(
+  ({
+    children,
+    variant = "fill",
+    size = "medium",
+    error = false,
+    disabled = false,
+    value = "",
+    maxLength,
+    className,
+    ...textAreaProps
+  }, ref) => {
+    const uniqueId = useId();
+    const id = `text-area-${uniqueId}`;
+    const { onChange, ...restTextAreaProps } = textAreaProps;
+    return /* @__PURE__ */ jsx(
+      TextAreaContext.Provider,
+      {
+        value: { variant, size, error, disabled, id, value, maxLength, onChange },
+        children: /* @__PURE__ */ jsx("div", { ref, className: cn(textAreaVariants.container, className), children: children || /* @__PURE__ */ jsx(TextArea.Field, { ...restTextAreaProps }) })
+      }
+    );
+  }
+);
+TextArea.Label = React2.forwardRef(
+  ({ children, required = false, className }, ref) => {
+    const { size, disabled, id } = useTextAreaContext();
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        htmlFor: id,
+        className: cn(textAreaVariants.label({ size, disabled, required }), className),
+        children
+      }
+    );
+  }
+);
+TextArea.Field = React2.forwardRef(
+  ({ className, onFocus, onBlur, ...props }, ref) => {
+    const {
+      variant,
+      size,
+      error,
+      disabled,
+      id,
+      maxLength,
+      value: contextValue,
+      onChange: contextOnChange
+    } = useTextAreaContext();
+    const [focused, setFocused] = React2.useState(false);
+    const handleFocus = (e) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+    const state = disabled ? "disabled" : error ? "error" : focused ? "focused" : "default";
+    const isControlled = contextValue !== void 0;
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id,
+        disabled,
+        maxLength,
+        className: cn(textAreaVariants.field({ variant, size, state }), className),
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChange: (e) => {
+          contextOnChange?.(e);
+        },
+        ...isControlled ? { value: contextValue } : {},
+        ...props
+      }
+    );
+  }
+);
+TextArea.Description = React2.forwardRef(
+  ({ children, showCounter = true, className }, ref) => {
+    const { size, error, disabled, value = "", maxLength } = useTextAreaContext();
+    if (!children && (!showCounter || !maxLength)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(textAreaVariants.descriptionContainer({ size }), className), children: [
+      children && /* @__PURE__ */ jsx("p", { className: cn(textAreaVariants.description({ size, error, disabled }), "flex-1"), children }),
+      showCounter && maxLength && /* @__PURE__ */ jsxs("span", { className: cn(textAreaVariants.counter({ disabled })), children: [
+        value.length,
+        "/",
+        maxLength
+      ] })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+TextArea.Label.displayName = "TextArea.Label";
+TextArea.Field.displayName = "TextArea.Field";
+TextArea.Description.displayName = "TextArea.Description";
+var TextFieldContext = createContext(null);
+var useTextFieldContext = () => {
+  const context = useContext(TextFieldContext);
+  if (!context) {
+    throw new Error("TextField components must be used within a TextField");
+  }
+  return context;
+};
+var textFieldVariants = {
+  container: commonInputVariants.container,
+  label: commonInputVariants.label,
+  wrapper: cva(
+    "flex w-full flex-row items-center rounded-medium border transition-colors focus-within:border-border-focused focus-within:outline-none",
+    {
+      variants: {
+        variant: {
+          fill: "border-transparent bg-elevation-elevation-2",
+          line: "border-border-primary"
+        },
+        size: {
+          xsmall: "h-6 gap-0 px-1",
+          small: "h-7 gap-0.5 px-1.5",
+          medium: "h-8 gap-0.5 px-2",
+          large: "h-10 gap-1 px-2.5"
+        },
+        state: {
+          default: "text-text-primary",
+          error: "text-text-primary",
+          disabled: "cursor-not-allowed text-text-disabled"
+        }
+      },
+      compoundVariants: [
+        { variant: "fill", state: "error", class: "border-border-critical" },
+        {
+          variant: "fill",
+          state: "disabled",
+          class: "bg-elevation-elevation-2 border-transparent"
+        },
+        { variant: "line", state: "error", class: "border-border-critical" },
+        { variant: "line", state: "disabled", class: "border-border-primary" }
+      ],
+      defaultVariants: { variant: "fill", size: "medium", state: "default" }
+    }
+  ),
+  input: cva(
+    "w-full border-none bg-transparent p-0 focus:outline-none focus:ring-0 disabled:cursor-not-allowed",
+    {
+      variants: {
+        size: {
+          xsmall: "text-body-3 placeholder:text-body-3",
+          small: "text-body-2 placeholder:text-body-2",
+          medium: "text-body-2 placeholder:text-body-2",
+          large: "text-body-1 placeholder:text-body-1"
+        },
+        state: {
+          default: "text-text-primary placeholder:text-text-tertiary",
+          error: "text-text-primary placeholder:text-text-tertiary",
+          disabled: "text-text-disabled placeholder:text-text-disabled"
+        }
+      },
+      defaultVariants: { size: "medium", state: "default" }
+    }
+  ),
+  description: cva("mt-0.5 font-regular text-text-tertiary", {
+    variants: {
+      size: {
+        xsmall: "text-caption",
+        small: "text-body-3",
+        medium: "text-body-3",
+        large: "text-body-2"
+      },
+      error: {
+        true: "text-text-critical",
+        false: ""
+      },
+      disabled: {
+        true: "text-text-disabled",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: true,
+        error: true,
+        class: "text-text-disabled"
+        // disabled가 error보다 우선
+      }
+    ],
+    defaultVariants: { size: "medium", error: false, disabled: false }
+  }),
+  subText: cva("ml-1 shrink-0 font-regular", {
+    variants: {
+      size: {
+        xsmall: "text-body-3",
+        small: "text-body-2",
+        medium: "text-body-2",
+        large: "text-body-1"
+      },
+      disabled: {
+        true: "text-text-disabled",
+        false: "text-text-tertiary"
+      }
+    },
+    defaultVariants: { size: "medium", disabled: false }
+  }),
+  icon: cva("shrink-0 text-icon-tertiary", {
+    variants: {
+      size: {
+        xsmall: "size-4",
+        small: "size-4",
+        medium: "size-4",
+        large: "size-5"
+      }
+    },
+    defaultVariants: { size: "medium" }
+  })
+};
+var TextField = forwardRef(
+  ({
+    children,
+    variant = "fill",
+    size = "medium",
+    error = false,
+    disabled = false,
+    className,
+    id: providedId,
+    value,
+    onChange,
+    ...inputProps
+  }, ref) => {
+    const uniqueId = useId();
+    const id = providedId || `text-field-${uniqueId}`;
+    return /* @__PURE__ */ jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsx("div", { ref, className: cn(textFieldVariants.container, className), children: children || /* @__PURE__ */ jsx(TextField.Input, { ...inputProps }) }) });
+  }
+);
+TextField.Label = forwardRef(
+  ({ children, required = false, className }, ref) => {
+    const { size, disabled, id } = useTextFieldContext();
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        htmlFor: id,
+        className: cn(textFieldVariants.label({ size, disabled, required }), className),
+        children
+      }
+    );
+  }
+);
+TextField.Input = forwardRef(
+  ({ className, leftIcon, rightIcon, subText, ...props }, ref) => {
+    const {
+      variant,
+      size,
+      error,
+      disabled,
+      id,
+      value: contextValue,
+      onChange: contextOnChange
+    } = useTextFieldContext();
+    const state = disabled ? "disabled" : error ? "error" : "default";
+    const isControlled = contextValue !== void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn(textFieldVariants.wrapper({ variant, size, state }), className), children: [
+      leftIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("flex items-center justify-center", textFieldVariants.icon({ size })),
+          children: leftIcon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-row items-center justify-center", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id,
+            disabled,
+            className: cn(textFieldVariants.input({ size, state })),
+            onChange: (e) => {
+              contextOnChange?.(e);
+            },
+            ...props,
+            ...isControlled ? { value: contextValue } : {}
+          }
+        ),
+        subText && /* @__PURE__ */ jsx("span", { className: cn(textFieldVariants.subText({ size, disabled })), children: subText })
+      ] }),
+      rightIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("flex items-center justify-center", textFieldVariants.icon({ size })),
+          children: rightIcon
+        }
+      )
+    ] });
+  }
+);
+TextField.Description = forwardRef(
+  ({ children, className }, ref) => {
+    const { size, error, disabled } = useTextFieldContext();
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn(textFieldVariants.description({ size, error, disabled }), className),
+        children
+      }
+    );
+  }
+);
+TextField.displayName = "TextField";
+TextField.Label.displayName = "TextField.Label";
+TextField.Input.displayName = "TextField.Input";
+TextField.Description.displayName = "TextField.Description";
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-opacity",
+        orientation === "vertical" && "w-[10px] p-[2px] opacity-0 duration-300 ease-out group-hover:opacity-100",
+        orientation === "horizontal" && "h-[10px] flex-col px-[3px] py-[2px]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-component-scroll"
+        }
+      )
+    }
+  );
+}
+function ScrollArea({
+  className,
+  children,
+  onScroll,
+  scrollRef,
+  hideVerticalScrollbar = false,
+  hideHorizontalScrollbar = false,
+  disableHorizontalScroll = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("group relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            ref: scrollRef,
+            onScroll,
+            className: cn(
+              "size-full rounded-[inherit]",
+              disableHorizontalScroll && "!overflow-x-hidden"
+            ),
+            children
+          }
+        ),
+        !hideVerticalScrollbar && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical", forceMount: true }),
+        !(hideHorizontalScrollbar || disableHorizontalScroll) && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal", forceMount: true }),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+var MODAL_PADDING = {
+  body: "px-4 pb-4",
+  footer: "px-4 py-3"
+};
+var ModalContext = createContext({ size: "medium" });
+var Modal = DialogPrimitive.Root;
+Modal.Trigger = DialogPrimitive.Trigger;
+Modal.Portal = DialogPrimitive.Portal;
+Modal.Close = forwardRef(({ size, ...props }, ref) => {
+  const { size: modalSize } = useContext(ModalContext);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      ref,
+      color: "assistive",
+      variant: "contained",
+      size: size ?? (modalSize === "fullsize" ? "large" : "medium")
+    }
+  ) });
+});
+Modal.Overlay = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      ref,
+      className: cn(
+        "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Modal.Content = forwardRef(
+  ({ className, children, size = "medium", onInteractOutside, onFocusOutside, ...props }, ref) => {
+    const isFullSize = size === "fullsize";
+    const sizeWidthMap = {
+      small: "max-w-[640px]",
+      medium: "max-w-[800px]",
+      large: "max-w-[960px]",
+      xlarge: "max-w-[1120px]"
+    };
+    const shouldPreventDismissForSelect = (target) => {
+      const isSelectOpen = Boolean(
+        document.querySelector('[data-radix-select-content][data-state="open"]')
+      );
+      if (isSelectOpen) {
+        return true;
+      }
+      if (!(target instanceof Element)) {
+        return false;
+      }
+      return Boolean(
+        target.closest("[data-radix-select-content]") || target.closest("[data-radix-select-viewport]")
+      );
+    };
+    const handleInteractOutside = (event) => {
+      if (shouldPreventDismissForSelect(event.target)) {
+        event.preventDefault();
+      }
+      onInteractOutside?.(event);
+    };
+    return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxs(Modal.Portal, { children: [
+      /* @__PURE__ */ jsx(Modal.Overlay, {}),
+      /* @__PURE__ */ jsx(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: cn(
+            // 공통 스타일
+            "fixed z-50 flex flex-col rounded-strong border border-border-primary bg-elevation-elevation-0 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            // fullsize일 때
+            isFullSize ? "inset-0 m-10" : (
+              // 일반 모달일 때
+              cn(
+                "left-[50%] top-[50%] w-full max-h-[90vh] translate-x-[-50%] translate-y-[-50%] shadow-strong data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+                sizeWidthMap[size]
+              )
+            ),
+            className
+          ),
+          ...props,
+          onInteractOutside: handleInteractOutside,
+          children
+        }
+      )
+    ] }) });
+  }
+);
+Modal.Header = forwardRef(
+  ({ className, line = false, showCloseIcon = true, children, ...props }, ref) => {
+    const { size } = useContext(ModalContext);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex shrink-0 flex-row items-center gap-2 pl-4 pr-3",
+          line && "border-b border-border-primary",
+          size === "fullsize" ? "h-16" : "h-14",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children }),
+          showCloseIcon && /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              className: cn(
+                "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
+              ),
+              children: /* @__PURE__ */ jsx(X, { type: "regular", size: 20 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Modal.Body = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex-1 flex flex-col min-h-0 h-full",
+        "[&_[data-slot=scroll-area-viewport]>div]:h-full"
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full flex flex-col", children: /* @__PURE__ */ jsx("div", { className: cn(MODAL_PADDING.body, className), children }) })
+    }
+  )
+);
+Modal.Footer = forwardRef(
+  ({ className, line = true, ...props }, ref) => {
+    const { size } = useContext(ModalContext);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-row items-center justify-between",
+          line && "border-t border-border-primary",
+          size === "fullsize" ? "gap-3" : "h-14 gap-3",
+          MODAL_PADDING.footer,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Modal.FooterDescription = forwardRef(
+  ({ className, error = false, icon, children, ...props }, ref) => {
+    const { size } = useContext(ModalContext);
+    const isLargeFooter = size === "fullsize";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-row items-center gap-1",
+          isLargeFooter ? "text-body-2" : "text-body-3",
+          error ? "text-text-critical" : "text-text-tertiary",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 size-4 items-center justify-center [&>svg]:size-4", children: icon }),
+          children
+        ]
+      }
+    );
+  }
+);
+Modal.Actions = forwardRef(({ className, ...props }, ref) => {
+  const { size } = useContext(ModalContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ml-auto flex flex-row items-center",
+        size === "fullsize" ? "gap-3" : "gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Modal.Action = forwardRef(
+  ({ color = "primary", size, ...props }, ref) => {
+    const { size: modalSize } = useContext(ModalContext);
+    return /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...props,
+        ref,
+        color,
+        variant: "contained",
+        size: size ?? (modalSize === "fullsize" ? "large" : "medium")
+      }
+    ) });
+  }
+);
+Modal.Title = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      ref,
+      className: cn(
+        "text-title-2 font-semibold leading-none tracking-tight text-text-primary",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Modal.Description = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-body-2 text-text-tertiary", className),
+    ...props
+  }
+));
+Modal.displayName = "Modal";
+Modal.Trigger.displayName = "Modal.Trigger";
+Modal.Portal.displayName = "Modal.Portal";
+Modal.Close.displayName = "Modal.Close";
+Modal.Overlay.displayName = "Modal.Overlay";
+Modal.Content.displayName = "Modal.Content";
+Modal.Header.displayName = "Modal.Header";
+Modal.Body.displayName = "Modal.Body";
+Modal.Footer.displayName = "Modal.Footer";
+Modal.FooterDescription.displayName = "Modal.FooterDescription";
+Modal.Actions.displayName = "Modal.Actions";
+Modal.Action.displayName = "Modal.Action";
+Modal.Title.displayName = "Modal.Title";
+Modal.Description.displayName = "Modal.Description";
+var MessageBoxContext = createContext({ variant: "default" });
+var MessageBoxRoot = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
+var MessageBox = MessageBoxRoot;
+MessageBox.Trigger = DialogPrimitive.Trigger;
+MessageBox.Content = forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      className: cn(
+        "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      )
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 flex w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col items-end gap-4 rounded-medium border border-border-primary bg-elevation-elevation-0 p-4 shadow-strong duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+] }) }));
+MessageBox.Title = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("w-full text-title-2 font-semibold text-text-primary", className),
+    ...props
+  }
+));
+MessageBox.Description = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("w-full text-body-2 text-text-secondary", className),
+    ...props
+  }
+));
+MessageBox.Actions = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-row gap-2", className), ...props })
+);
+MessageBox.Cancel = forwardRef(
+  ({ size = "medium", ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, color: "assistive", variant: "contained", size, ...props }) })
+);
+MessageBox.Action = forwardRef(
+  ({ size = "medium", ...props }, ref) => {
+    const { variant } = useContext(MessageBoxContext);
+    return /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        color: variant === "critical" ? "critical" : "primary",
+        variant: "contained",
+        size,
+        ...props
+      }
+    ) });
+  }
+);
+MessageBox.displayName = "MessageBox";
+MessageBox.Trigger.displayName = "MessageBox.Trigger";
+MessageBox.Content.displayName = "MessageBox.Content";
+MessageBox.Title.displayName = "MessageBox.Title";
+MessageBox.Description.displayName = "MessageBox.Description";
+MessageBox.Actions.displayName = "MessageBox.Actions";
+MessageBox.Cancel.displayName = "MessageBox.Cancel";
+MessageBox.Action.displayName = "MessageBox.Action";
+var containerVariants4 = cva("inset-0 z-[49] flex items-center justify-center", {
+  variants: {
+    position: {
+      fixed: "fixed",
+      absolute: "absolute"
+    },
+    blockInteraction: {
+      true: "pointer-events-auto",
+      false: "pointer-events-none"
+    }
+  },
+  defaultVariants: {
+    position: "fixed",
+    blockInteraction: false
+  }
+});
+var overlayVariants = cva("absolute inset-0 transition-opacity duration-150", {
+  variants: {
+    visible: {
+      true: "opacity-100",
+      false: "opacity-0"
+    },
+    tone: {
+      // 대비감 높은 톤 설정 추후 디자인 시스템에서 추가 되어야함
+      auto: "bg-black/30 dark:bg-white/10",
+      dark: "bg-black/50",
+      light: "bg-white/70",
+      brand: "bg-primary/20"
+    }
+  },
+  defaultVariants: {
+    visible: true,
+    tone: "auto"
+  }
+});
+var spinnerVariants = cva(
+  "z-50 shrink-0 animate-spin rounded-full border-elevation-elevation-4 border-t-transparent",
+  {
+    variants: {
+      size: {
+        small: "size-6 border-2",
+        medium: "size-9 border-[3px]",
+        large: "size-12 border-4"
+      }
+    },
+    defaultVariants: {
+      size: "large"
+    }
+  }
+);
+var Loading = forwardRef(
+  ({
+    isLoading = true,
+    dim = true,
+    blockInteraction = false,
+    position = "fixed",
+    size = "medium",
+    containerClassName,
+    overlayClassName,
+    spinnerClassName,
+    className,
+    ...props
+  }, ref) => {
+    if (!isLoading) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-busy": "true",
+        className: cn(
+          containerVariants4({ position, blockInteraction }),
+          containerClassName,
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: cn(overlayVariants({ visible: dim }), overlayClassName)
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative z-50 flex size-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: cn(spinnerVariants({ size }), spinnerClassName) }) })
+        ]
+      }
+    );
+  }
+);
+Loading.displayName = "Loading";
+var trackVariants = cva("w-full overflow-hidden rounded-full bg-elevation-elevation-3", {
+  variants: {
+    size: {
+      small: "h-1",
+      medium: "h-1.5",
+      large: "h-2"
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+var gaugeVariants = cva("h-full rounded-full bg-icon-accent transition-[width] duration-300", {
+  variants: {
+    size: {
+      small: "",
+      medium: "",
+      large: ""
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+var Progress = forwardRef(
+  ({ value = 0, max = 100, size = "medium", trackClassName, gaugeClassName, className, ...props }, ref) => {
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    const percent = max > 0 ? clampedValue / max * 100 : 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: cn(trackVariants({ size }), trackClassName, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(gaugeVariants({ size }), gaugeClassName),
+            style: { width: `${percent}%` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var positionFix = `
+[data-sonner-toaster][data-x-position='center'] [data-sonner-toast] {
+  left: calc(var(--width) / 2) !important;
+  transform: translateX(-50%) var(--y) !important;
+  width: fit-content !important;
+  max-width: calc(100% - var(--mobile-offset-left) * 2) !important;
+}
+@media (max-width: 600px) {
+  [data-sonner-toaster] {
+    left: 0 !important;
+    right: 0 !important;
+  }
+  [data-sonner-toaster] [data-sonner-toast] {
+    width: fit-content !important;
+    max-width: calc(100% - var(--mobile-offset-left) - var(--mobile-offset-right)) !important;
+  }
+  [data-sonner-toaster][data-x-position='center'] [data-sonner-toast] {
+    left: 50% !important;
+  }
+  [data-sonner-toaster][data-x-position='right'] [data-sonner-toast] {
+    left: auto !important;
+    right: var(--mobile-offset-right) !important;
+  }
+  [data-sonner-toaster][data-x-position='left'] [data-sonner-toast] {
+    left: var(--mobile-offset-left) !important;
+    right: auto !important;
+  }
+}
+`;
+var Toaster = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("style", { children: positionFix }),
+    /* @__PURE__ */ jsx(
+      Toaster$1,
+      {
+        className: "toaster group [--toast-width:auto] [&_li]:!flex [&_li]:!items-center [&_li]:!justify-between [&_li]:!gap-2",
+        closeButton: false,
+        toastOptions: {
+          closeButton: false
+        },
+        ...props
+      }
+    )
+  ] });
+};
+Toaster.Container = React2.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-3 rounded-medium border border-border-primary bg-component-toast py-[10px] pl-3 pr-4 text-mono-light shadow-strong",
+          "h-10 w-auto min-w-0 max-w-none",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Toaster.Icon = React2.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex shrink-0 items-center justify-center", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Toaster.Title = React2.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-body-2 font-medium",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Toaster.Description = React2.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full text-body-3 font-regular text-text-static-light/80",
+          "overflow-hidden text-ellipsis",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Toaster.Action = React2.forwardRef(
+  ({ className, children, altText, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "flex h-7 min-h-[28px] w-auto min-w-[28px] shrink-0 items-center justify-center",
+          "rounded-small bg-transparent px-0 py-0",
+          "border-0 transition-colors",
+          "hover:bg-solid-primary-hovered",
+          "whitespace-nowrap",
+          "cursor-pointer",
+          "text-body-2",
+          className
+        ),
+        "aria-label": altText,
+        ...props,
+        children: children || /* @__PURE__ */ jsx(X, { type: "regular", className: "size-4" })
+      }
+    );
+  }
+);
+Toaster.displayName = "Toaster";
+Toaster.Container.displayName = "Toaster.Container";
+Toaster.Icon.displayName = "Toaster.Icon";
+Toaster.Title.displayName = "Toaster.Title";
+Toaster.Description.displayName = "Toaster.Description";
+Toaster.Action.displayName = "Toaster.Action";
+var ToastProvider = ({
+  children,
+  expand = true,
+  richColors = false,
+  closeButton = false,
+  position = "top-center",
+  duration = 4e3,
+  visibleToasts = 10,
+  toasterProps
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Toaster,
+      {
+        position,
+        closeButton,
+        richColors,
+        expand,
+        duration,
+        visibleToasts,
+        ...toasterProps
+      }
+    )
+  ] });
+};
+function isToastOptions(input) {
+  return typeof input === "object" && input !== null && "title" in input;
+}
+function extractToastParams(input, options) {
+  if (isToastOptions(input)) {
+    return {
+      title: input.title,
+      description: input.description,
+      action: input.action,
+      close: input.close
+    };
+  }
+  return {
+    title: input,
+    description: options?.description,
+    action: options?.action,
+    close: options?.close
+  };
+}
+function getSonnerOptions(options) {
+  if (!options) {
+    return void 0;
+  }
+  const { description: _description, action: _action, close: _close, ...sonnerOptions } = options;
+  return sonnerOptions;
+}
+function ToastContent({
+  id,
+  icon,
+  title,
+  description,
+  action,
+  close
+}) {
+  const hasExtra = description || action;
+  if (hasExtra) {
+    return /* @__PURE__ */ jsxs(Toaster.Container, { className: "h-auto min-h-12 flex-col items-start gap-1 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+        icon && /* @__PURE__ */ jsx(Toaster.Icon, { children: icon }),
+        /* @__PURE__ */ jsx(Toaster.Title, { children: title }),
+        close && /* @__PURE__ */ jsx(Toaster.Action, { className: "rounded-medium", onClick: () => toast$1.dismiss(id) })
+      ] }),
+      description && /* @__PURE__ */ jsx(Toaster.Description, { children: description }),
+      action && /* @__PURE__ */ jsx(
+        Toaster.Action,
+        {
+          className: "mt-1 text-text-info hover:text-text-info-hovered",
+          onClick: () => {
+            action.onClick();
+            toast$1.dismiss(id);
+          },
+          children: action.label
+        }
+      )
+    ] });
+  }
+  if (close) {
+    return /* @__PURE__ */ jsxs(Toaster.Container, { className: "py-1.5 pr-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 overflow-hidden", children: [
+        icon && /* @__PURE__ */ jsx(Toaster.Icon, { children: icon }),
+        /* @__PURE__ */ jsx(Toaster.Title, { children: title })
+      ] }),
+      /* @__PURE__ */ jsx(Toaster.Action, { className: "rounded-medium", onClick: () => toast$1.dismiss(id) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Toaster.Container, { children: [
+    icon && /* @__PURE__ */ jsx(Toaster.Icon, { children: icon }),
+    /* @__PURE__ */ jsx(Toaster.Title, { children: title })
+  ] });
+}
+function createToast(input, options, icon) {
+  const { title, description, action, close } = extractToastParams(input, options);
+  return toast$1.custom(
+    (id) => /* @__PURE__ */ jsx(
+      ToastContent,
+      {
+        id,
+        icon,
+        title,
+        description,
+        action,
+        close
+      }
+    ),
+    { unstyled: true, ...getSonnerOptions(options) }
+  );
+}
+var toast = Object.assign(
+  (input, options) => createToast(input, options),
+  {
+    success: (input, options) => createToast(
+      input,
+      options,
+      /* @__PURE__ */ jsx(Check, { type: "regular", className: "size-5 text-icon-success" })
+    ),
+    error: (input, options) => createToast(
+      input,
+      options,
+      /* @__PURE__ */ jsx(Error$1, { type: "regular", className: "size-5 text-icon-critical" })
+    ),
+    info: (input, options) => createToast(
+      input,
+      options,
+      /* @__PURE__ */ jsx(Info, { type: "regular", className: "size-5 text-icon-static-light" })
+    ),
+    warning: (input, options) => createToast(
+      input,
+      options,
+      /* @__PURE__ */ jsx(Warning, { type: "regular", className: "size-5 text-icon-warning" })
+    ),
+    loading: (input, options) => createToast(input, options),
+    dismiss: toast$1.dismiss,
+    promise: toast$1.promise,
+    custom: toast$1.custom
+  }
+);
+function toExtended(options) {
+  if (!options) {
+    return void 0;
+  }
+  const { description: _desc, action: _act, ...rest } = options;
+  const converted = { ...rest };
+  if (typeof _desc === "string") {
+    converted.description = _desc;
+  }
+  return converted;
+}
+var DEFAULT_MESSAGES = {
+  success: "\uC131\uACF5",
+  error: "\uC624\uB958",
+  info: "\uC815\uBCF4",
+  warning: "\uACBD\uACE0",
+  loading: "\uB85C\uB529"
+};
+function useToast() {
+  const show = (message, options) => toast(message, toExtended(options));
+  const dismiss = (toastId) => toast.dismiss(toastId);
+  const showTypedToast = (type, message, options) => {
+    const toastMessage = message ?? DEFAULT_MESSAGES[type];
+    return toast[type](toastMessage, toExtended(options));
+  };
+  const promiseToast = (promiseTask, options, toastOptions) => toast$1.promise(promiseTask, {
+    loading: options.loading ?? DEFAULT_MESSAGES.loading,
+    success: options.success ?? DEFAULT_MESSAGES.success,
+    error: options.error ?? DEFAULT_MESSAGES.error,
+    finally: options.finally,
+    description: options.description,
+    ...toastOptions
+  });
+  const custom = (render, options) => toast.custom(render, options);
+  return {
+    show,
+    dismiss,
+    promise: promiseToast,
+    custom,
+    success: (message, options) => showTypedToast("success", message, options),
+    error: (message, options) => showTypedToast("error", message, options),
+    info: (message, options) => showTypedToast("info", message, options),
+    warning: (message, options) => showTypedToast("warning", message, options),
+    loading: (message, options) => showTypedToast("loading", message, options)
+  };
+}
+
+export { Avatar, Badge, Breadcrumb, Button, ButtonGroup, Checkbox, DatePicker, DoubleTag, IconButton, Loading, MessageBox, Modal, Progress, Radio, ScrollArea, ScrollBar, Segment, Select, Star, Switch, Tabs, Tag, TextArea, TextField, ToastProvider, Toaster, Tooltip, toast, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map