@3w-witim/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3584 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React16 from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+// src/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-base font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-brand-solid text-text-on-brand hover:bg-brand-solid-hover active:bg-brand-solid-pressed",
+        neutral: "border border-border-default bg-surface-default text-text-default hover:bg-surface-hover active:bg-surface-pressed",
+        ghost: "text-text-default hover:bg-surface-hover active:bg-surface-pressed",
+        danger: "bg-danger-solid text-text-on-brand hover:bg-danger-solid-hover",
+        "danger-outline": "border border-danger-border bg-transparent text-danger-text hover:bg-danger-subtle active:bg-danger-subtle"
+      },
+      size: {
+        sm: "h-9 px-3",
+        // 36px · px 12
+        md: "h-10 px-4",
+        // 40px · px 16 (기본)
+        lg: "h-12 px-5"
+        // 48px · px 20
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = React16.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var inputVariants = cva(
+  "flex w-full items-center rounded border bg-surface-default text-text-default transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-text-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-text-disabled disabled:placeholder:text-text-disabled",
+  {
+    variants: {
+      state: {
+        default: "border-border-default hover:border-border-strong focus-visible:border-border-focus focus-visible:ring-brand-border",
+        error: "border-danger-border focus-visible:border-danger-border focus-visible:ring-danger-border"
+      },
+      inputSize: {
+        sm: "h-9 gap-1.5 px-2.5 text-sm",
+        md: "h-10 gap-2 px-3 text-base",
+        lg: "h-12 gap-2.5 px-3.5 text-base"
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      inputSize: "md"
+    }
+  }
+);
+var Input = React16.forwardRef(
+  ({
+    className,
+    type = "text",
+    state,
+    inputSize,
+    startIcon,
+    endIcon,
+    helperText,
+    id,
+    "aria-describedby": ariaDescribedby,
+    ...props
+  }, ref) => {
+    const isError = state === "error";
+    const reactId = React16.useId();
+    const helperId = helperText ? `${id ?? reactId}-helper` : void 0;
+    const describedBy = [ariaDescribedby, helperId].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            inputVariants({ state, inputSize }),
+            (startIcon || endIcon) && "cursor-text",
+            className
+          ),
+          children: [
+            startIcon ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "flex size-5 shrink-0 items-center justify-center [&_svg]:size-5",
+                  isError ? "text-danger-text" : "text-text-subtle"
+                ),
+                children: startIcon
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: id ?? reactId,
+                type,
+                ref,
+                "aria-invalid": isError || void 0,
+                "aria-describedby": describedBy,
+                className: "h-full w-full min-w-0 bg-transparent outline-none placeholder:text-text-subtle disabled:cursor-not-allowed disabled:text-text-disabled",
+                ...props
+              }
+            ),
+            endIcon ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "flex size-5 shrink-0 items-center justify-center [&_svg]:size-5",
+                  isError ? "text-danger-text" : "text-text-subtle"
+                ),
+                children: endIcon
+              }
+            ) : null
+          ]
+        }
+      ),
+      helperText ? /* @__PURE__ */ jsxs(
+        "p",
+        {
+          id: helperId,
+          className: cn(
+            "flex items-center gap-1 text-sm [&_svg]:size-4",
+            isError ? "text-danger-text" : "text-text-subtle"
+          ),
+          children: [
+            isError ? /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                className: "shrink-0",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-11.5a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-1.5 0v-4ZM10 14.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            ) : null,
+            helperText
+          ]
+        }
+      ) : null
+    ] });
+  }
+);
+Input.displayName = "Input";
+var textareaVariants = cva(
+  "flex w-full resize-none rounded border bg-surface-default text-base text-text-default transition-colors placeholder:text-text-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      state: {
+        default: "border-border-default focus-visible:border-border-focus focus-visible:ring-brand-border",
+        error: "border-danger-border focus-visible:border-danger-border focus-visible:ring-danger-border"
+      },
+      size: {
+        sm: "min-h-[64px] p-2 text-sm",
+        md: "min-h-[80px] p-3 text-base",
+        lg: "min-h-[120px] p-4 text-base"
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      size: "md"
+    }
+  }
+);
+var Textarea = React16.forwardRef(
+  ({ className, state, size, "aria-invalid": ariaInvalid, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        "aria-invalid": ariaInvalid ?? (state === "error" ? true : void 0),
+        className: cn(textareaVariants({ state, size, className })),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var cardVariants = cva("rounded-lg text-text-default transition-colors", {
+  variants: {
+    variant: {
+      default: "border border-border-subtle bg-surface-default shadow-card",
+      raised: "border border-border-subtle bg-surface-raised shadow-md",
+      outline: "border border-border-default bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var Card = React16.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ variant, className })),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-3 p-5", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "font-semibold leading-none tracking-tight text-text-strong",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-sm text-text-subtle", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-5 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-3 p-5 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var ScrollArea = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React16.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-slate-300 hover:bg-slate-400" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+var labelVariants = cva(
+  "inline-flex items-center justify-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        brand: "bg-brand-subtle text-brand-text",
+        danger: "bg-danger-subtle text-danger-text",
+        neutral: "bg-[var(--comp-label-neutral-bg)] text-[var(--comp-label-neutral-text)]"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+var Label = React16.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(labelVariants({ variant, className })),
+        ...props
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var skeletonVariants = cva("animate-pulse bg-border-subtle", {
+  variants: {
+    variant: {
+      text: "rounded-lg h-4 w-full",
+      circle: "rounded-full",
+      rect: "rounded-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "rect"
+  }
+});
+var Skeleton = React16.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-busy": "true",
+        "aria-live": "polite",
+        "aria-label": "\uB85C\uB529 \uC911",
+        className: cn(skeletonVariants({ variant, className })),
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "\uB85C\uB529 \uC911" })
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var progressTrackVariants = cva(
+  "relative w-full overflow-hidden rounded-full bg-border-subtle",
+  {
+    variants: {
+      size: {
+        md: "h-1.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var progressFillVariants = cva(
+  "h-full rounded-full bg-brand-solid transition-[width] duration-300 ease-out",
+  {
+    variants: {
+      indeterminate: {
+        true: "w-full animate-pulse rounded-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      indeterminate: false
+    }
+  }
+);
+function clamp(value) {
+  if (Number.isNaN(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+var Progress = React16.forwardRef(
+  ({
+    className,
+    size,
+    value = 0,
+    indeterminate = false,
+    label = "Loading",
+    ...props
+  }, ref) => {
+    const pct = clamp(value);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuemin": indeterminate ? void 0 : 0,
+        "aria-valuemax": indeterminate ? void 0 : 100,
+        "aria-valuenow": indeterminate ? void 0 : pct,
+        "aria-valuetext": indeterminate ? "Loading" : `${pct}%`,
+        className: cn(progressTrackVariants({ size, className })),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(progressFillVariants({ indeterminate })),
+            style: indeterminate ? void 0 : { width: `${pct}%` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var checkboxVariants = cva(
+  "relative flex size-5 shrink-0 items-center justify-center rounded border-2 transition-colors peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-base peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+  {
+    variants: {
+      state: {
+        default: "border-border-strong bg-surface-default peer-focus-visible:ring-border-focus peer-checked:border-brand-solid peer-checked:bg-brand-solid",
+        error: "border-danger-border bg-surface-default peer-focus-visible:ring-danger-solid peer-checked:border-danger-border peer-checked:bg-danger-solid"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 12 12",
+    fill: "none",
+    "aria-hidden": "true",
+    className: cn("size-3", className),
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M2.5 6.2 5 8.7l4.5-5",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var Checkbox = React16.forwardRef(
+  ({ className, state, error, label, id, disabled, "aria-invalid": ariaInvalid, ...props }, ref) => {
+    const reactId = React16.useId();
+    const inputId = id ?? reactId;
+    const resolvedState = error ? "error" : state ?? "default";
+    const isInvalid = resolvedState === "error";
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "group inline-flex items-start gap-2 text-sm text-text-default",
+          disabled ? "cursor-not-allowed text-text-disabled" : "cursor-pointer"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: inputId,
+              type: "checkbox",
+              disabled,
+              "aria-invalid": ariaInvalid ?? (isInvalid || void 0),
+              className: "peer sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                checkboxVariants({ state: resolvedState }),
+                // 여러 줄 라벨에서 첫 줄 글자와 광학적으로 맞추기 위한 미세 보정(2px)
+                "mt-0.5 peer-checked:[&>svg]:opacity-100",
+                className
+              ),
+              children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-text-on-brand opacity-0 transition-opacity" })
+            }
+          ),
+          label != null && /* @__PURE__ */ jsx("span", { className: "select-none", children: label })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var RadioGroupContext = React16.createContext(
+  null
+);
+var RadioGroup = React16.forwardRef(
+  ({
+    className,
+    name,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    error,
+    children,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React16.useState(defaultValue);
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const handleValueChange = React16.useCallback(
+      (next) => {
+        if (!isControlled) setInternalValue(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const ctx = React16.useMemo(
+      () => ({
+        name,
+        value: currentValue,
+        onValueChange: handleValueChange,
+        disabled,
+        error
+      }),
+      [name, currentValue, handleValueChange, disabled, error]
+    );
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-invalid": error || void 0,
+        className: cn("flex flex-col gap-3", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var radioVariants = cva(
+  "relative grid h-5 w-5 shrink-0 place-items-center rounded-full border-2 bg-surface-default transition-colors peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-base disabled:cursor-not-allowed",
+  {
+    variants: {
+      state: {
+        default: "border-border-strong peer-focus-visible:ring-border-focus peer-checked:border-brand-border",
+        error: "border-danger-border peer-focus-visible:ring-danger-solid peer-checked:border-danger-border"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var radioDotVariants = cva(
+  "h-2 w-2 rounded-full scale-0 transition-transform peer-checked:scale-100",
+  {
+    variants: {
+      state: {
+        default: "bg-brand-solid",
+        error: "bg-danger-solid"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var Radio = React16.forwardRef(
+  ({
+    className,
+    id,
+    value,
+    label,
+    description,
+    name: nameProp,
+    checked: checkedProp,
+    disabled: disabledProp,
+    error: errorProp,
+    onValueChange,
+    onChange,
+    onClick,
+    ...props
+  }, ref) => {
+    const group = React16.useContext(RadioGroupContext);
+    const reactId = React16.useId();
+    const inputId = id ?? reactId;
+    const isGroup = group != null;
+    const isControlled = checkedProp !== void 0;
+    const [internalChecked, setInternalChecked] = React16.useState(false);
+    const name = nameProp ?? group?.name;
+    const disabled = disabledProp ?? group?.disabled ?? false;
+    const error = errorProp ?? group?.error ?? false;
+    const checked = isControlled ? checkedProp : isGroup ? group.value === value : internalChecked;
+    const state = error ? "error" : "default";
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (event.target.checked) {
+        onValueChange?.(value);
+        group?.onValueChange?.(value);
+      }
+    };
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!isControlled && !isGroup) {
+        setInternalChecked((prev) => !prev);
+      }
+    };
+    const control = /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: inputId,
+          type: "radio",
+          name,
+          value,
+          checked,
+          disabled,
+          "aria-invalid": error || void 0,
+          onChange: handleChange,
+          onClick: handleClick,
+          className: "peer sr-only",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            radioVariants({ state }),
+            disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            radioDotVariants({ state }),
+            "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+            disabled && "opacity-50"
+          )
+        }
+      )
+    ] });
+    if (!label && !description) {
+      return control;
+    }
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "flex items-start gap-2",
+          disabled ? "cursor-not-allowed" : "cursor-pointer",
+          className
+        ),
+        children: [
+          control,
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+            label ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm leading-5",
+                  disabled ? "text-text-disabled" : "text-text-default"
+                ),
+                children: label
+              }
+            ) : null,
+            description ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-xs leading-4",
+                  error ? "text-danger-text" : "text-text-subtle"
+                ),
+                children: description
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var toggleTrackVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:cursor-not-allowed disabled:opacity-50 data-[state=off]:bg-surface-sunken data-[state=on]:bg-brand-solid",
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        md: "h-6 w-11"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var toggleThumbVariants = cva(
+  "pointer-events-none block rounded-full bg-surface-default shadow-sm transition-transform data-[state=off]:translate-x-0",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 data-[state=on]:translate-x-4",
+        md: "h-5 w-5 data-[state=on]:translate-x-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Toggle = React16.forwardRef(
+  ({
+    className,
+    size,
+    checked,
+    defaultChecked = false,
+    onCheckedChange,
+    disabled,
+    onClick,
+    ...props
+  }, ref) => {
+    const isControlled = checked !== void 0;
+    const [internalChecked, setInternalChecked] = React16.useState(defaultChecked);
+    const isOn = isControlled ? checked : internalChecked;
+    const state = isOn ? "on" : "off";
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || disabled) return;
+      const next = !isOn;
+      if (!isControlled) setInternalChecked(next);
+      onCheckedChange?.(next);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "switch",
+        "aria-checked": isOn,
+        "data-state": state,
+        disabled,
+        onClick: handleClick,
+        className: cn(toggleTrackVariants({ size, className })),
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { "data-state": state, className: cn(toggleThumbVariants({ size })) })
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var chipVariants = cva(
+  "inline-flex h-8 items-center gap-1 rounded border px-3 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "border-border-default bg-surface-default text-text-default hover:bg-surface-hover active:bg-surface-pressed",
+        selected: "border-brand-border bg-brand-subtle text-brand-text font-bold hover:bg-brand-subtle active:bg-brand-subtle"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var CheckIcon2 = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "M13 4.5 6.5 11.5 3 8" })
+  }
+);
+var CloseIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+  }
+);
+var Chip = React16.forwardRef(
+  ({
+    className,
+    variant,
+    showSelectedIcon = false,
+    removable = false,
+    onRemove,
+    removeLabel = "Remove",
+    children,
+    disabled,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        ref,
+        disabled,
+        "aria-pressed": variant === "selected",
+        className: cn(chipVariants({ variant }), removable && "pr-2", className),
+        ...props,
+        children: [
+          showSelectedIcon && variant === "selected" ? /* @__PURE__ */ jsx(CheckIcon2, {}) : null,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+          removable ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "button",
+              "aria-label": removeLabel,
+              tabIndex: disabled ? -1 : 0,
+              onClick: (e) => {
+                e.stopPropagation();
+                if (!disabled) onRemove?.();
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (!disabled) onRemove?.();
+                }
+              },
+              className: "-mr-1 ml-0.5 inline-flex size-4 items-center justify-center rounded-full text-text-subtle transition-colors hover:bg-surface-hover hover:text-text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var alertVariants = cva(
+  "relative flex gap-3 rounded-lg border p-3 [&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:mt-0.5",
+  {
+    variants: {
+      variant: {
+        info: "bg-surface-sunken border-border-default text-text-default [&>svg]:text-text-subtle",
+        danger: "bg-danger-subtle border-danger-border text-danger-text [&>svg]:text-danger-text"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+var Alert = React16.forwardRef(
+  ({ className, variant, role = "alert", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role,
+      className: cn(alertVariants({ variant, className })),
+      ...props
+    }
+  )
+);
+Alert.displayName = "Alert";
+var AlertTitle = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn(
+        "text-sm font-semibold leading-5 text-text-strong",
+        className
+      ),
+      ...props
+    }
+  )
+);
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("mt-1 text-sm leading-5 [&_p]:leading-5", className),
+    ...props
+  }
+));
+AlertDescription.displayName = "AlertDescription";
+var SIZE_PX = { sm: 12, md: 16, lg: 20 };
+var PRESENCE_LABEL = {
+  online: "\uC628\uB77C\uC778",
+  away: "\uC790\uB9AC\uBE44\uC6C0",
+  offline: "\uC624\uD504\uB77C\uC778",
+  remote: "\uC7AC\uD0DD"
+};
+function HouseMark({ px }) {
+  const s = Math.round(px * 0.64);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: s,
+      height: s,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M12 3 4 9v12h5v-7h6v7h5V9z" })
+    }
+  );
+}
+function Presence({
+  status = "online",
+  size = "md",
+  className,
+  ...props
+}) {
+  const px = SIZE_PX[size];
+  const label = PRESENCE_LABEL[status];
+  const base = "inline-flex shrink-0 items-center justify-center rounded-full font-extrabold leading-none";
+  const STATUS_STYLE = {
+    online: "bg-brand-solid text-text-on-brand",
+    away: "bg-presence-away-bg text-presence-away-fg",
+    offline: "bg-presence-offline",
+    remote: "bg-brand-solid text-text-on-brand"
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "img",
+      "aria-label": label,
+      title: label,
+      className: cn(base, STATUS_STYLE[status], className),
+      style: { width: px, height: px, fontSize: Math.round(px * 0.58) },
+      ...props,
+      children: [
+        status === "away" && "Z",
+        status === "remote" && /* @__PURE__ */ jsx(HouseMark, { px })
+      ]
+    }
+  );
+}
+var avatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-sunken align-middle ring-2 ring-border-subtle select-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-[10px]",
+        // 24px
+        sm: "h-8 w-8 text-sm",
+        // 32px · font14 기본
+        md: "h-10 w-10 text-base",
+        // 40px
+        lg: "h-12 w-12 text-lg",
+        // 48px
+        xl: "h-16 w-16 text-2xl"
+        // 64px
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+var presenceSizeForAvatar = {
+  xs: "sm",
+  sm: "sm",
+  md: "md",
+  lg: "md",
+  xl: "lg"
+};
+var MASCOTS = {};
+try {
+  MASCOTS = import.meta.glob(
+    "../../design-system/avatars/avatar-mascot-*.svg",
+    { query: "?url", import: "default", eager: true }
+  );
+} catch {
+  MASCOTS = {};
+}
+var MASCOT_BY_COLOR = {};
+for (const [path, url] of Object.entries(MASCOTS)) {
+  const m = path.match(/avatar-mascot-([a-z]+)\.svg$/);
+  if (m) MASCOT_BY_COLOR[m[1]] = url;
+}
+var AVATAR_COLORS = Object.keys(
+  MASCOT_BY_COLOR
+).sort();
+function defaultColor(seed) {
+  if (AVATAR_COLORS.length === 0) return "gray";
+  const s = seed ?? "";
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) >>> 0;
+  return AVATAR_COLORS[h % AVATAR_COLORS.length];
+}
+function mascotUrl(color, seed) {
+  const c = color ?? defaultColor(seed);
+  return MASCOT_BY_COLOR[c] ?? MASCOT_BY_COLOR[AVATAR_COLORS[0]] ?? "";
+}
+function MascotImage({
+  color,
+  seed,
+  alt
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: mascotUrl(color, seed),
+      alt: alt ?? "",
+      "aria-hidden": alt ? void 0 : true,
+      className: "h-full w-full object-cover"
+    }
+  );
+}
+var Avatar = React16.forwardRef(
+  ({ className, size = "sm", src, alt, color, presence, children, ...props }, ref) => {
+    const resolvedSize = size ?? "sm";
+    return (
+      // presence badge가 원 밖으로 걸치도록 wrapper(relative)에 이미지 원 + badge를 형제로 배치.
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ref,
+          className: cn("relative inline-flex shrink-0 align-middle", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  avatarVariants({ size }),
+                  // 가이드: 오프라인이면 아바타를 흐리게(opacity .55)
+                  presence === "offline" && "opacity-[.55]"
+                ),
+                children: children ?? (src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt, color, seed: alt }) : (
+                  // 기본: 무조건 마스코트 이미지. color 선택 시 그 색, 없으면 이름 기반 기본값.
+                  /* @__PURE__ */ jsx(MascotImage, { color, seed: alt, alt })
+                ))
+              }
+            ),
+            presence ? /* @__PURE__ */ jsx(
+              Presence,
+              {
+                status: presence,
+                size: presenceSizeForAvatar[resolvedSize],
+                className: "absolute -bottom-0.5 -right-0.5 ring-2 ring-bg-base"
+              }
+            ) : null
+          ]
+        }
+      )
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React16.forwardRef(
+  ({ className, alt = "", color, seed, ...props }, ref) => {
+    const [errored, setErrored] = React16.useState(false);
+    if (errored) {
+      return /* @__PURE__ */ jsx(MascotImage, { color, seed: seed ?? alt, alt });
+    }
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        alt,
+        className: cn("h-full w-full object-cover", className),
+        onError: () => setErrored(true),
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "flex h-full w-full items-center justify-center bg-surface-sunken font-medium text-text-subtle",
+        className
+      ),
+      ...props
+    }
+  )
+);
+AvatarFallback.displayName = "AvatarFallback";
+var AvatarGroup = React16.forwardRef(
+  ({ className, children, max, size = "sm", ...props }, ref) => {
+    const items = React16.Children.toArray(children).filter(React16.isValidElement);
+    const visible = typeof max === "number" ? items.slice(0, max) : items;
+    const overflow = items.length - visible.length;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center", className), ...props, children: [
+      visible.map((child, i) => /* @__PURE__ */ jsx("span", { className: i === 0 ? "" : "-ml-2", children: child }, i)),
+      overflow > 0 ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            avatarVariants({ size }),
+            "-ml-2 font-medium text-text-subtle"
+          ),
+          "aria-label": `\uC678 ${overflow}\uBA85`,
+          title: `\uC678 ${overflow}\uBA85`,
+          children: [
+            "+",
+            overflow
+          ]
+        }
+      ) : null
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+var tooltipContentVariants = cva(
+  "pointer-events-none absolute z-50 w-max max-w-xs whitespace-normal rounded bg-[var(--comp-tooltip-bg)] px-2 py-1 text-xs font-medium text-[var(--comp-tooltip-text)] shadow-popover",
+  {
+    variants: {
+      placement: {
+        top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
+        "top-left": "bottom-full left-0 mb-2",
+        "top-right": "bottom-full right-0 mb-2",
+        right: "left-full top-1/2 ml-2 -translate-y-1/2",
+        bottom: "top-full left-1/2 mt-2 -translate-x-1/2",
+        "bottom-left": "top-full left-0 mt-2",
+        "bottom-right": "top-full right-0 mt-2",
+        left: "right-full top-1/2 mr-2 -translate-y-1/2"
+      }
+    },
+    defaultVariants: {
+      placement: "top"
+    }
+  }
+);
+var tooltipArrowVariants = cva(
+  "pointer-events-none absolute z-50 h-2 w-2 rotate-45 bg-[var(--comp-tooltip-bg)]",
+  {
+    variants: {
+      placement: {
+        top: "bottom-full left-1/2 -translate-x-1/2 mb-[5px]",
+        "top-left": "bottom-full left-1/2 -translate-x-1/2 mb-[5px]",
+        "top-right": "bottom-full left-1/2 -translate-x-1/2 mb-[5px]",
+        right: "left-full top-1/2 -translate-y-1/2 ml-[5px]",
+        bottom: "top-full left-1/2 -translate-x-1/2 mt-[5px]",
+        "bottom-left": "top-full left-1/2 -translate-x-1/2 mt-[5px]",
+        "bottom-right": "top-full left-1/2 -translate-x-1/2 mt-[5px]",
+        left: "right-full top-1/2 -translate-y-1/2 mr-[5px]"
+      }
+    },
+    defaultVariants: {
+      placement: "top"
+    }
+  }
+);
+var Tooltip = React16.forwardRef(
+  ({
+    className,
+    content,
+    children,
+    placement = "top",
+    open,
+    arrow = true,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const [hovered, setHovered] = React16.useState(false);
+    const isControlled = open !== void 0;
+    const visible = !disabled && (isControlled ? open : hovered);
+    const tooltipId = React16.useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-flex", className),
+        onMouseEnter: isControlled ? void 0 : () => setHovered(true),
+        onMouseLeave: isControlled ? void 0 : () => setHovered(false),
+        onFocus: isControlled ? void 0 : () => setHovered(true),
+        onBlur: isControlled ? void 0 : () => setHovered(false),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-describedby": visible ? tooltipId : void 0, children }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: tooltipId,
+              role: "tooltip",
+              "aria-hidden": !visible,
+              className: cn(
+                tooltipContentVariants({ placement }),
+                "transition-opacity duration-150",
+                visible ? "opacity-100" : "opacity-0"
+              ),
+              children: content
+            }
+          ),
+          arrow ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                tooltipArrowVariants({ placement }),
+                "transition-opacity duration-150",
+                visible ? "opacity-100" : "opacity-0"
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+var DropdownMenuContext = React16.createContext(null);
+function useDropdownMenuContext(component) {
+  const ctx = React16.useContext(DropdownMenuContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <DropdownMenu>`);
+  }
+  return ctx;
+}
+var DropdownMenu = React16.forwardRef(
+  ({ className, open: openProp, defaultOpen = false, onOpenChange, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React16.useState(defaultOpen);
+    const isControlled = openProp !== void 0;
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const setOpen = React16.useCallback(
+      (value) => {
+        const next = typeof value === "function" ? value(open) : value;
+        if (!isControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange, open]
+    );
+    const ctx = React16.useMemo(() => ({ open, setOpen }), [open, setOpen]);
+    return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-block text-left", className),
+        ...props
+      }
+    ) });
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuTrigger = React16.forwardRef(({ className, onClick, disabled, ...props }, ref) => {
+  const { open, setOpen } = useDropdownMenuContext("DropdownMenuTrigger");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      disabled,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen((prev) => !prev);
+      },
+      className: cn(
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded border border-border-default bg-surface-default px-4 py-2 text-sm font-medium text-text-default transition-colors hover:bg-surface-hover active:bg-surface-pressed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var dropdownMenuContentVariants = cva(
+  // panel padding 4 · radius sm(8) · min-w 180 · shadow-dropdown
+  "z-50 min-w-[180px] rounded-lg border border-border-subtle bg-surface-raised p-1 shadow-dropdown outline-none",
+  {
+    variants: {
+      align: {
+        start: "left-0",
+        end: "right-0"
+      }
+    },
+    defaultVariants: {
+      align: "start"
+    }
+  }
+);
+var DropdownMenuContent = React16.forwardRef(({ className, align, forceMount = false, ...props }, ref) => {
+  const { open } = useDropdownMenuContext("DropdownMenuContent");
+  if (!open && !forceMount) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "menu",
+      "aria-orientation": "vertical",
+      className: cn(
+        "absolute top-[calc(100%+4px)]",
+        dropdownMenuContentVariants({ align, className })
+      ),
+      ...props
+    }
+  );
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var dropdownMenuItemVariants = cva(
+  // item px12 py8 · item radius xs(4) · hover bg-surface-hover
+  "relative flex w-full cursor-pointer select-none items-center gap-2 rounded px-3 py-2 text-sm text-text-default outline-none transition-colors hover:bg-surface-hover focus-visible:bg-surface-hover focus-visible:outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:text-text-disabled data-[disabled=true]:opacity-60 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "",
+        danger: "text-danger-text hover:bg-danger-subtle focus-visible:bg-danger-subtle"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var DropdownMenuItem = React16.forwardRef(
+  ({
+    className,
+    variant,
+    disabled = false,
+    icon,
+    trailing,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "menuitem",
+        "aria-disabled": disabled || void 0,
+        "data-disabled": disabled,
+        tabIndex: disabled ? -1 : 0,
+        className: cn(dropdownMenuItemVariants({ variant, className })),
+        ...props,
+        children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children }),
+          trailing ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-xs text-text-subtle", children: trailing }) : null
+        ]
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuLabel = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "px-3 py-2 text-xs font-semibold uppercase tracking-wide text-text-subtle",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var DropdownMenuSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "separator",
+    "aria-orientation": "horizontal",
+    className: cn("my-1 h-px bg-border-subtle", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuEmpty = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("px-3 py-6 text-center text-sm text-text-subtle", className),
+    ...props,
+    children: children ?? "No items"
+  }
+));
+DropdownMenuEmpty.displayName = "DropdownMenuEmpty";
+var selectTriggerVariants = cva(
+  "flex h-10 w-full items-center justify-between gap-2 rounded border bg-surface-default px-3 text-sm text-text-default transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-text-disabled",
+  {
+    variants: {
+      state: {
+        default: "border-border-default hover:border-border-strong focus-visible:ring-brand-border",
+        error: "border-danger-border focus-visible:ring-danger-border"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var ChevronIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M5 7.5 10 12.5 15 7.5" })
+  }
+);
+var CheckIcon3 = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "m4.5 10.5 3.5 3.5 7.5-8" })
+  }
+);
+var Select = React16.forwardRef(
+  ({
+    className,
+    state,
+    options,
+    value,
+    placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    onValueChange,
+    disabled = false,
+    defaultOpen = false,
+    errorMessageId,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = React16.useState(defaultOpen);
+    const selected = React16.useMemo(
+      () => options.find((o) => o.value === value),
+      [options, value]
+    );
+    const isError = state === "error";
+    const handleSelect = (option) => {
+      if (option.disabled) return;
+      onValueChange?.(option.value);
+      setOpen(false);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative w-full", className), ...props, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          "aria-invalid": isError || void 0,
+          "aria-describedby": isError ? errorMessageId : void 0,
+          "aria-label": ariaLabel,
+          onClick: () => setOpen((o) => !o),
+          className: cn(selectTriggerVariants({ state })),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate",
+                  !selected && "text-text-subtle"
+                ),
+                children: selected ? selected.label : placeholder
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChevronIcon,
+              {
+                className: cn(
+                  "shrink-0 text-text-subtle transition-transform",
+                  open && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      open && !disabled && /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          role: "listbox",
+          "aria-label": ariaLabel,
+          className: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded border border-border-subtle bg-surface-raised p-1 shadow-dropdown",
+          children: [
+            options.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-text-subtle", children: "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" }),
+            options.map((option) => {
+              const isSelected = option.value === value;
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": option.disabled || void 0,
+                  onClick: () => handleSelect(option),
+                  className: cn(
+                    "flex items-center justify-between gap-2 rounded px-3 py-2 text-sm text-text-default",
+                    option.disabled ? "cursor-not-allowed text-text-disabled" : "cursor-pointer hover:bg-surface-hover active:bg-surface-pressed",
+                    isSelected && "bg-brand-subtle text-brand-text"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                    isSelected && /* @__PURE__ */ jsx(CheckIcon3, { className: "shrink-0 text-brand-text" })
+                  ]
+                },
+                option.value
+              );
+            })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Select.displayName = "Select";
+var DialogOverlay = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "absolute inset-0 bg-bg-emphasis/60 backdrop-blur-sm",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DialogOverlay.displayName = "DialogOverlay";
+var dialogPanelVariants = cva(
+  "relative flex w-full flex-col gap-4 border border-border-subtle bg-surface-raised p-6 pb-4 text-text-default shadow-modal rounded-lg focus-visible:outline-none",
+  {
+    variants: {
+      size: {
+        sm: "min-w-[280px] max-w-[360px]",
+        md: "min-w-[280px] max-w-[480px]",
+        lg: "min-w-[280px] max-w-[640px]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Dialog = React16.forwardRef(
+  ({
+    open = true,
+    onOpenChange,
+    size,
+    className,
+    overlayClassName,
+    children,
+    ...props
+  }, ref) => {
+    if (!open) return null;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onOpenChange?.(false);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute inset-0 z-50 flex items-center justify-center p-4",
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            DialogOverlay,
+            {
+              className: overlayClassName,
+              onClick: () => onOpenChange?.(false)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref,
+              role: "dialog",
+              "aria-modal": "true",
+              className: cn(dialogPanelVariants({ size }), className),
+              ...props,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Dialog.displayName = "Dialog";
+var DialogHeader = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-1.5 text-left", className),
+      ...props
+    }
+  )
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h2",
+    {
+      ref,
+      className: cn(
+        "text-base font-semibold leading-tight text-text-strong",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm leading-relaxed text-text-subtle", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var DialogBody = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("text-sm text-text-default", className),
+      ...props
+    }
+  )
+);
+DialogBody.displayName = "DialogBody";
+var DialogFooter = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DialogFooter.displayName = "DialogFooter";
+var sheetOverlayVariants = cva(
+  "absolute inset-0 bg-[var(--color-overlay-scrim)] transition-opacity duration-200",
+  {
+    variants: {
+      open: {
+        true: "opacity-100",
+        false: "pointer-events-none opacity-0"
+      }
+    },
+    defaultVariants: { open: false }
+  }
+);
+var sheetPanelVariants = cva(
+  "absolute flex flex-col gap-4 bg-surface-raised px-5 pb-6 pt-4 text-text-default shadow-modal transition-transform duration-300 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+  {
+    variants: {
+      side: {
+        bottom: "inset-x-0 bottom-0 rounded-b-none rounded-t-[var(--radius-lg)] data-[state=closed]:translate-y-full",
+        top: "inset-x-0 top-0 rounded-b-[var(--radius-lg)] data-[state=closed]:-translate-y-full",
+        left: "inset-y-0 left-0 h-full w-80 max-w-[85%] rounded-r-[var(--radius-lg)] data-[state=closed]:-translate-x-full",
+        right: "inset-y-0 right-0 h-full w-80 max-w-[85%] rounded-l-[var(--radius-lg)] data-[state=closed]:translate-x-full"
+      }
+    },
+    defaultVariants: { side: "bottom" }
+  }
+);
+var Sheet = React16.forwardRef(
+  ({
+    className,
+    side = "bottom",
+    open = false,
+    onOpenChange,
+    showHandle = true,
+    children,
+    ...props
+  }, ref) => {
+    const state = open ? "open" : "closed";
+    const handleVisible = showHandle && (side === "bottom" || side === "top");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "pointer-events-none absolute inset-0 overflow-hidden",
+          open && "pointer-events-auto"
+        ),
+        "data-state": state,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: sheetOverlayVariants({ open }),
+              onClick: () => onOpenChange?.(false)
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-hidden": !open,
+              "data-state": state,
+              tabIndex: -1,
+              className: cn(sheetPanelVariants({ side }), className),
+              ...props,
+              children: [
+                handleVisible ? /* @__PURE__ */ jsx(SheetHandle, {}) : null,
+                children
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Sheet.displayName = "Sheet";
+var SheetHandle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "aria-hidden": "true",
+    className: cn(
+      "mx-auto mb-1 h-1 w-10 shrink-0 rounded-full bg-bg-emphasis",
+      className
+    ),
+    ...props
+  }
+));
+SheetHandle.displayName = "SheetHandle";
+var SheetHeader = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-0.5", className),
+    ...props
+  }
+));
+SheetHeader.displayName = "SheetHeader";
+var SheetTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h2",
+  {
+    ref,
+    className: cn("text-lg font-semibold text-text-strong", className),
+    ...props
+  }
+));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-text-subtle", className),
+    ...props
+  }
+));
+SheetDescription.displayName = "SheetDescription";
+var SheetBody = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-1 flex-col gap-4 overflow-y-auto", className),
+    ...props
+  }
+));
+SheetBody.displayName = "SheetBody";
+var SheetFooter = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+      className
+    ),
+    ...props
+  }
+));
+SheetFooter.displayName = "SheetFooter";
+var TabsContext = React16.createContext(null);
+function useTabsContext(component) {
+  const ctx = React16.useContext(TabsContext);
+  if (!ctx) {
+    throw new Error(`<${component}> must be used within <Tabs>`);
+  }
+  return ctx;
+}
+var Tabs = React16.forwardRef(
+  ({ className, value, defaultValue, onValueChange, children, ...props }, ref) => {
+    const baseId = React16.useId();
+    const [internalValue, setInternalValue] = React16.useState(
+      defaultValue ?? ""
+    );
+    const isControlled = value !== void 0;
+    const activeValue = isControlled ? value : internalValue;
+    const setValue = React16.useCallback(
+      (next) => {
+        if (!isControlled) setInternalValue(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const ctx = React16.useMemo(
+      () => ({ value: activeValue, setValue, baseId }),
+      [activeValue, setValue, baseId]
+    );
+    return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...props, children }) });
+  }
+);
+Tabs.displayName = "Tabs";
+var tabsListVariants = cva(
+  "relative flex items-center border-b border-border-subtle",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: "w-fit"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false
+    }
+  }
+);
+var TabsList = React16.forwardRef(
+  ({ className, fullWidth, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      className: cn(tabsListVariants({ fullWidth }), "gap-1", className),
+      ...props
+    }
+  )
+);
+TabsList.displayName = "TabsList";
+var tabsTriggerVariants = cva(
+  [
+    "relative inline-flex items-center justify-center gap-2 whitespace-nowrap px-3 py-2 text-sm font-medium",
+    "transition-colors focus-visible:outline-none",
+    "focus-visible:ring-2 focus-visible:ring-brand-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+    "disabled:pointer-events-none disabled:text-text-disabled",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    // bottom indicator element (2px)
+    "after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-full after:transition-colors"
+  ],
+  {
+    variants: {
+      active: {
+        true: "text-text-strong after:bg-brand-solid",
+        false: "text-text-subtle hover:text-text-default after:bg-transparent"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+var TabsTrigger = React16.forwardRef(
+  ({ className, value, disabled, ...props }, ref) => {
+    const { value: activeValue, setValue, baseId } = useTabsContext("TabsTrigger");
+    const isActive = activeValue === value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "tab",
+        id: `${baseId}-trigger-${value}`,
+        "aria-selected": isActive,
+        "aria-controls": `${baseId}-content-${value}`,
+        tabIndex: isActive ? 0 : -1,
+        disabled,
+        "data-state": isActive ? "active" : "inactive",
+        onClick: () => setValue(value),
+        className: cn(tabsTriggerVariants({ active: isActive }), className),
+        ...props
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React16.forwardRef(
+  ({ className, value, forceMount, children, ...props }, ref) => {
+    const { value: activeValue, baseId } = useTabsContext("TabsContent");
+    const isActive = activeValue === value;
+    if (!isActive && !forceMount) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        id: `${baseId}-content-${value}`,
+        "aria-labelledby": `${baseId}-trigger-${value}`,
+        hidden: !isActive,
+        tabIndex: 0,
+        "data-state": isActive ? "active" : "inactive",
+        className: cn(
+          "text-sm text-text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+var tableVariants = cva(
+  "w-full caption-bottom border-separate border-spacing-0 overflow-hidden rounded-lg border border-border-default text-sm text-text-default",
+  {
+    variants: {
+      density: {
+        comfortable: "[&_td]:py-2 [&_th]:py-2",
+        compact: "[&_td]:py-1 [&_th]:py-1"
+      }
+    },
+    defaultVariants: {
+      density: "comfortable"
+    }
+  }
+);
+var Table = React16.forwardRef(
+  ({ className, density, containerProps, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...containerProps,
+      className: cn("relative w-full overflow-x-auto", containerProps?.className),
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          className: cn(tableVariants({ density, className })),
+          ...props
+        }
+      )
+    }
+  )
+);
+Table.displayName = "Table";
+var TableHeader = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn("bg-surface-sunken text-text-subtle", className),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var tableRowVariants = cva(
+  "border-b border-border-default transition-colors [&>*]:border-b [&>*]:border-border-default last:[&>*]:border-b-0",
+  {
+    variants: {
+      interactive: {
+        true: "cursor-pointer hover:bg-surface-hover data-[selected=true]:bg-brand-subtle",
+        false: "hover:bg-surface-hover"
+      }
+    },
+    defaultVariants: {
+      interactive: false
+    }
+  }
+);
+var TableRow = React16.forwardRef(
+  ({ className, interactive, selected, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      "data-selected": selected ? "true" : void 0,
+      "aria-selected": selected,
+      className: cn(tableRowVariants({ interactive, className })),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = React16.forwardRef(
+  ({ className, sort, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      scope: "col",
+      "aria-sort": sort === "asc" ? "ascending" : sort === "desc" ? "descending" : sort === "none" ? "none" : void 0,
+      className: cn(
+        "h-9 px-3 py-2 text-left align-middle text-xs font-medium text-text-subtle",
+        "[&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props,
+      children: sort && sort !== "none" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        children,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-text-subtle", children: sort === "asc" ? "\u2191" : "\u2193" })
+      ] }) : children
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(
+        "px-3 py-2 align-middle text-sm text-text-default [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-3 text-xs text-text-subtle", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+var paginationItemVariants = cva(
+  "inline-flex h-8 min-w-8 items-center justify-center rounded-lg px-2 text-sm font-medium transition-colors select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:pointer-events-none disabled:text-text-disabled [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      active: {
+        true: "bg-brand-solid text-text-on-brand hover:bg-brand-solid-hover",
+        false: "text-text-default hover:bg-surface-hover active:bg-surface-pressed"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+var ChevronLeftIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+  }
+);
+var ChevronRightIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+  }
+);
+var EllipsisIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none",
+    "aria-hidden": "true",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1.5" })
+    ]
+  }
+);
+var PaginationItem = React16.forwardRef(
+  ({ className, active, page, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-current": active ? "page" : void 0,
+        "aria-label": `Go to page ${page}`,
+        className: cn(paginationItemVariants({ active, className })),
+        ...props,
+        children: page
+      }
+    );
+  }
+);
+PaginationItem.displayName = "PaginationItem";
+var PaginationEllipsis = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    ref,
+    "aria-hidden": "true",
+    className: cn(
+      "inline-flex h-8 min-w-8 items-center justify-center px-1 text-sm text-text-subtle",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(EllipsisIcon, {}),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+    ]
+  }
+));
+PaginationEllipsis.displayName = "PaginationEllipsis";
+var PaginationPrevious = React16.forwardRef(({ className, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    type: "button",
+    disabled,
+    "aria-label": "Go to previous page",
+    className: cn(paginationItemVariants({ active: false, className })),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+  }
+));
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = React16.forwardRef(
+  ({ className, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      disabled,
+      "aria-label": "Go to next page",
+      className: cn(paginationItemVariants({ active: false, className })),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+    }
+  )
+);
+PaginationNext.displayName = "PaginationNext";
+function buildPageRange(current, total, siblingCount = 1) {
+  const totalSlots = siblingCount * 2 + 5;
+  if (total <= totalSlots) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const leftSibling = Math.max(current - siblingCount, 1);
+  const rightSibling = Math.min(current + siblingCount, total);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < total - 1;
+  const range = [];
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftItemCount = siblingCount * 2 + 3;
+    for (let i = 1; i <= leftItemCount; i++) range.push(i);
+    range.push("ellipsis", total);
+  } else if (showLeftEllipsis && !showRightEllipsis) {
+    const rightItemCount = siblingCount * 2 + 3;
+    range.push(1, "ellipsis");
+    for (let i = total - rightItemCount + 1; i <= total; i++) range.push(i);
+  } else {
+    range.push(1, "ellipsis");
+    for (let i = leftSibling; i <= rightSibling; i++) range.push(i);
+    range.push("ellipsis", total);
+  }
+  return range;
+}
+var Pagination = React16.forwardRef(
+  ({
+    className,
+    totalPages,
+    page,
+    onPageChange,
+    siblingCount = 1,
+    label = "Pagination",
+    ...props
+  }, ref) => {
+    const safeTotal = Math.max(totalPages, 1);
+    const current = Math.min(Math.max(page, 1), safeTotal);
+    const items = buildPageRange(current, safeTotal, siblingCount);
+    const goTo = (target) => {
+      if (target < 1 || target > safeTotal || target === current) return;
+      onPageChange?.(target);
+    };
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": label,
+        className: cn("flex items-center gap-1", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            PaginationPrevious,
+            {
+              disabled: current <= 1,
+              onClick: () => goTo(current - 1)
+            }
+          ),
+          items.map(
+            (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx(PaginationEllipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ jsx(
+              PaginationItem,
+              {
+                page: item,
+                active: item === current,
+                onClick: () => goTo(item)
+              },
+              item
+            )
+          ),
+          /* @__PURE__ */ jsx(
+            PaginationNext,
+            {
+              disabled: current >= safeTotal,
+              onClick: () => goTo(current + 1)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+var segmentContainerVariants = cva(
+  "relative inline-grid h-8 auto-cols-fr grid-flow-col items-center rounded-lg bg-surface-sunken p-0.5 text-sm",
+  {
+    variants: {
+      fullWidth: {
+        true: "flex w-full",
+        false: "inline-grid w-auto"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false
+    }
+  }
+);
+var segmentItemVariants = cva(
+  "relative z-10 inline-flex h-full w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      // 활성=label1 굵기(semibold/600) · 비활성=body-sm 굵기(regular/400), 둘 다 14px.
+      // NOTE: text-label1/body-sm 클래스는 twMerge가 text-* 색상과 같은 충돌군으로
+      // 보고 제거하므로, 색상과 충돌 안 하는 font-weight 유틸로 굵기를 지정한다.
+      active: {
+        true: "font-semibold text-text-strong",
+        false: "font-normal text-text-subtle hover:text-text-default"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+var SegmentedControl = React16.forwardRef(
+  ({
+    className,
+    items,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled = false,
+    fullWidth,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = React16.useState(
+      defaultValue ?? items[0]?.value ?? ""
+    );
+    const currentValue = isControlled ? value : internalValue;
+    const activeIndex = Math.max(
+      0,
+      items.findIndex((item) => item.value === currentValue)
+    );
+    const count = items.length || 1;
+    const handleSelect = (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": ariaLabel,
+        "aria-disabled": disabled || void 0,
+        className: cn(segmentContainerVariants({ fullWidth }), className),
+        ...props,
+        children: [
+          items.length > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute bottom-0.5 left-0.5 top-0.5 z-0 rounded-lg bg-surface-default shadow-sm transition-transform duration-200 ease-out",
+              style: {
+                width: `calc((100% - 0.25rem) / ${count})`,
+                transform: `translateX(calc(${activeIndex} * 100%))`
+              }
+            }
+          ),
+          items.map((item) => {
+            const isActive = item.value === currentValue;
+            const isDisabled = disabled || item.disabled;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": isActive,
+                disabled: isDisabled,
+                tabIndex: isActive ? 0 : -1,
+                onClick: () => handleSelect(item.value),
+                className: cn(segmentItemVariants({ active: isActive })),
+                children: [
+                  item.icon,
+                  item.label
+                ]
+              },
+              item.value
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "SegmentedControl";
+var toastVariants = cva(
+  "pointer-events-auto flex w-full max-w-sm gap-3 rounded-lg border px-4 py-4 shadow-toast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+  {
+    variants: {
+      variant: {
+        default: "border-border-default bg-surface-raised text-text-default focus-visible:ring-border-focus",
+        danger: "border-danger-border bg-danger-subtle text-danger-text focus-visible:ring-danger-border"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function InfoIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.6,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 9v4.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 6.5h.01" })
+      ]
+    }
+  );
+}
+function AlertIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.6,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M10 2.5 18 16.5H2z" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 8v3.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 14h.01" })
+      ]
+    }
+  );
+}
+function CloseIcon2(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.6,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5L5 15" })
+    }
+  );
+}
+var Toast = React16.forwardRef(
+  ({
+    className,
+    variant,
+    message,
+    title,
+    icon = true,
+    dismissible = true,
+    onClose,
+    closeLabel = "Close",
+    ...props
+  }, ref) => {
+    const StatusIcon = variant === "danger" ? AlertIcon : InfoIcon;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: variant === "danger" ? "alert" : "status",
+        "aria-live": variant === "danger" ? "assertive" : "polite",
+        className: cn(
+          toastVariants({ variant, className }),
+          title ? "items-start" : "items-center"
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 gap-2",
+                title ? "items-start" : "items-center"
+              ),
+              children: [
+                icon ? /* @__PURE__ */ jsx(
+                  StatusIcon,
+                  {
+                    className: cn(
+                      "size-5 shrink-0",
+                      variant === "danger" ? "text-danger-text" : "text-text-subtle"
+                    )
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  title ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-label1",
+                        variant === "danger" ? "text-danger-text" : "text-text-strong"
+                      ),
+                      children: title
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx("p", { className: cn("text-body-sm break-words", title && "mt-0.5"), children: message })
+                ] })
+              ]
+            }
+          ),
+          dismissible ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": closeLabel,
+              className: cn(
+                "-mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded text-text-subtle transition-colors hover:bg-surface-hover hover:text-text-default active:bg-surface-pressed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+                title && "-mt-0.5"
+              ),
+              children: /* @__PURE__ */ jsx(CloseIcon2, { className: "size-4" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
+var SIZES = {
+  lg: {
+    plate: 180,
+    art: 120,
+    pad: "px-6 py-12",
+    plateMb: "mb-4",
+    title: "text-xl",
+    desc: "text-base max-w-[360px]",
+    gap: "mt-1",
+    act: "mt-5"
+  },
+  md: {
+    plate: 144,
+    art: 96,
+    pad: "px-5 py-10",
+    plateMb: "mb-3",
+    title: "text-lg",
+    desc: "text-base max-w-[300px]",
+    gap: "mt-0.5",
+    act: "mt-4"
+  },
+  sm: {
+    plate: 108,
+    art: 72,
+    pad: "px-4 py-8",
+    plateMb: "mb-3",
+    title: "text-lg",
+    desc: "text-sm max-w-[240px]",
+    gap: "mt-0.5",
+    act: "mt-4"
+  }
+};
+function EmptyState({
+  size = "lg",
+  illustration,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}) {
+  const s = SIZES[size];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col items-center text-center", s.pad, className),
+      ...props,
+      children: [
+        illustration && // 플레이트: border-subtle = 라이트 gray-20(sunken) · 다크 gray-60(카드 gray-80보다 밝아 떠 보임)
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center rounded-full bg-border-subtle",
+              s.plateMb
+            ),
+            style: { width: s.plate, height: s.plate },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex [&>img]:h-full [&>img]:w-full [&>img]:object-contain [&>svg]:h-full [&>svg]:w-full",
+                style: { width: s.art, height: s.art },
+                children: illustration
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("h3", { className: cn("font-bold leading-snug text-text-strong", s.title), children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed text-text-subtle", s.desc, s.gap), children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", s.act), children: action })
+      ]
+    }
+  );
+}
+function IconBase({
+  size = 20,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children
+    }
+  );
+}
+var CheckIcon4 = (props) => /* @__PURE__ */ jsx(IconBase, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var ChevronDownIcon = (props) => /* @__PURE__ */ jsx(IconBase, { ...props, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+var ChevronLeftIcon2 = (props) => /* @__PURE__ */ jsx(IconBase, { ...props, children: /* @__PURE__ */ jsx("path", { d: "m15 6-6 6 6 6" }) });
+var ChevronRightIcon2 = (props) => /* @__PURE__ */ jsx(IconBase, { ...props, children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" }) });
+var HashIcon = (props) => /* @__PURE__ */ jsx(IconBase, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3 14 21" }) });
+var LockIcon = (props) => /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "11", x: "3", y: "11", rx: "3", ry: "3" }),
+  /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+] });
+var PinIcon = (props) => /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })
+] });
+var PlusIcon = (props) => /* @__PURE__ */ jsx(IconBase, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+var SearchIcon = (props) => /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ jsx("path", { d: "m20 20-3.4-3.4" })
+] });
+var XIcon = (props) => /* @__PURE__ */ jsx(IconBase, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+var AccordionItem = React16.forwardRef(
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "details",
+    {
+      ref,
+      className: cn(
+        "group border-t border-border-subtle first:border-t-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer select-none list-none items-center justify-between gap-2.5 px-4 py-3.5 text-sm font-semibold text-text-default group-open:text-brand-text [&::-webkit-details-marker]:hidden", children: [
+          title,
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              size: 18,
+              className: "shrink-0 text-text-subtle transition-transform duration-200 group-open:rotate-180"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 pb-3.5 text-sm leading-relaxed text-text-subtle", children })
+      ]
+    }
+  )
+);
+AccordionItem.displayName = "AccordionItem";
+var Accordion = React16.forwardRef(
+  ({ className, items, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "overflow-hidden rounded-lg border border-border-subtle bg-surface-default",
+        className
+      ),
+      ...props,
+      children: items ? items.map((it) => /* @__PURE__ */ jsx(
+        AccordionItem,
+        {
+          title: it.title,
+          open: it.defaultOpen,
+          children: it.content
+        },
+        it.id ?? String(it.title)
+      )) : children
+    }
+  )
+);
+Accordion.displayName = "Accordion";
+var KpiRow = React16.forwardRef(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-[360px] gap-2", className), ...props, children: items.map((k) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex-1 rounded-lg border border-border-subtle bg-surface-default p-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          k.dot != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("h-2 w-2 shrink-0 rounded-full", k.dot),
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-text-subtle", children: k.label })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-2xl font-bold text-text-strong", children: k.value })
+      ]
+    },
+    k.label
+  )) })
+);
+KpiRow.displayName = "KpiRow";
+var ProgressList = React16.forwardRef(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex w-[320px] flex-col gap-3", className),
+      ...props,
+      children: items.map((r) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-text-default", children: r.label }),
+          /* @__PURE__ */ jsxs("span", { className: r.danger ? "text-danger-text" : "text-brand-text", children: [
+            r.pct,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-surface-sunken", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full rounded-full",
+              r.danger ? "bg-danger-solid" : "bg-brand-solid"
+            ),
+            style: { width: `${r.pct}%` }
+          }
+        ) })
+      ] }, r.label))
+    }
+  )
+);
+ProgressList.displayName = "ProgressList";
+var Ring = React16.forwardRef(
+  ({ pct, size = 84, label, className, style, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative grid place-items-center", className),
+      style: { height: size, width: size, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", className: "h-full w-full -rotate-90", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "18",
+              cy: "18",
+              r: "15.5",
+              fill: "none",
+              strokeWidth: "3",
+              className: "stroke-surface-sunken"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "18",
+              cy: "18",
+              r: "15.5",
+              fill: "none",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              pathLength: 100,
+              strokeDasharray: `${pct} 100`,
+              className: "stroke-brand-solid"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("b", { className: "absolute text-sm font-bold text-text-strong", children: label ?? `${pct}%` })
+      ]
+    }
+  )
+);
+Ring.displayName = "Ring";
+var StackBar = React16.forwardRef(
+  ({ segments, showLegend = true, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("w-[360px]", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-6 gap-0.5", children: segments.map((s, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          s.className ?? "bg-brand-solid",
+          i === 0 && "rounded-l-full",
+          i === segments.length - 1 && "rounded-r-full"
+        ),
+        style: { width: `${s.pct}%` }
+      },
+      s.label
+    )) }),
+    showLegend && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-x-4 gap-y-1", children: segments.map((s) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-1.5 text-xs text-text-subtle",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "h-2.5 w-2.5 rounded-full",
+                s.className ?? "bg-brand-solid"
+              )
+            }
+          ),
+          s.label,
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-text-default", children: [
+            s.pct,
+            "%"
+          ] })
+        ]
+      },
+      s.label
+    )) })
+  ] })
+);
+StackBar.displayName = "StackBar";
+var BAR_BY_STATE = {
+  reached: "bg-brand-solid",
+  unreached: "bg-brand-subtle",
+  pending: "bg-surface-sunken"
+};
+var WorkHoursBar = React16.forwardRef(
+  ({ data, max = 12, height = 120, caption, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className, ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-end gap-3", children: data.map((d) => {
+      const barH = d.state === "pending" ? 4 : d.hours / max * height;
+      const labelCls = d.today ? "text-brand-text font-semibold" : d.future ? "text-text-disabled" : "text-text-subtle";
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-8 items-end", style: { height }, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("w-full rounded-t", BAR_BY_STATE[d.state]),
+            style: { height: barH }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: cn("text-xs", labelCls), children: d.day })
+      ] }, d.day);
+    }) }),
+    caption != null && /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-text-subtle", children: caption })
+  ] })
+);
+WorkHoursBar.displayName = "WorkHoursBar";
+var Kbd = React16.forwardRef(
+  ({ active, className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ref,
+      className: cn(
+        "rounded border px-1.5 py-px font-mono text-xs",
+        active ? "border-current bg-transparent text-brand-text" : "border-border-subtle bg-bg-base text-text-subtle",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+Kbd.displayName = "Kbd";
+var CommandPalette = React16.forwardRef(
+  ({
+    groups,
+    onSelect,
+    activeId,
+    placeholder = "\uBA85\uB839 \uB610\uB294 \uAC80\uC0C9\u2026",
+    searchKbd = "\u2318K",
+    open = true,
+    className,
+    ...props
+  }, ref) => {
+    if (!open) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "dialog",
+        "aria-label": "\uCEE4\uB9E8\uB4DC \uD314\uB808\uD2B8",
+        className: cn(
+          "w-[420px] max-w-full overflow-hidden rounded-lg border border-border-subtle bg-surface-default shadow-lg",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 border-b border-border-subtle px-4 py-3.5", children: [
+            /* @__PURE__ */ jsx(SearchIcon, { size: 18, className: "text-text-subtle" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm text-text-subtle", children: placeholder }),
+            searchKbd ? /* @__PURE__ */ jsx(Kbd, { children: searchKbd }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-1.5", children: groups.map((group, gi) => /* @__PURE__ */ jsxs("div", { children: [
+            group.heading ? /* @__PURE__ */ jsx("div", { className: "px-2.5 pb-1 pt-2 text-xs font-bold uppercase tracking-wide text-text-subtle", children: group.heading }) : null,
+            group.items.map((item) => {
+              const active = item.id === activeId;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSelect?.(item),
+                  className: cn(
+                    "flex w-full items-center gap-2.5 rounded px-2.5 py-2 text-left text-sm [&>svg]:h-[17px] [&>svg]:w-[17px]",
+                    active ? "bg-brand-subtle text-brand-text" : "text-text-default hover:bg-surface-hover"
+                  ),
+                  children: [
+                    item.icon,
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                    item.kbd ? /* @__PURE__ */ jsx(Kbd, { active, children: item.kbd }) : null
+                  ]
+                },
+                item.id
+              );
+            })
+          ] }, group.heading ?? gi)) })
+        ]
+      }
+    );
+  }
+);
+CommandPalette.displayName = "CommandPalette";
+var AvatarWithPresence = React16.forwardRef(
+  ({
+    name,
+    status = "online",
+    color,
+    src,
+    size,
+    ringClassName = "ring-surface-default",
+    className
+  }, ref) => /* @__PURE__ */ jsxs("span", { ref, className: cn("relative inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        size,
+        color,
+        src,
+        alt: name,
+        className: cn("ring-0", status === "offline" && "opacity-[.55]")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Presence,
+      {
+        status,
+        size: "sm",
+        className: cn("absolute -bottom-0.5 -right-0.5 ring-2", ringClassName)
+      }
+    )
+  ] })
+);
+AvatarWithPresence.displayName = "AvatarWithPresence";
+var SidebarSection = React16.forwardRef(({ title, addable, onAdd, addLabel, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className, ...props, children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 pb-1.5 pt-2.5 text-xs font-semibold text-text-subtle", children: [
+    title,
+    addable && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        onClick: onAdd,
+        "aria-label": addLabel ?? `${title} \uCD94\uAC00`,
+        className: "ml-auto h-6 w-6 rounded p-0 text-brand-solid",
+        children: /* @__PURE__ */ jsx(PlusIcon, { size: 16 })
+      }
+    )
+  ] }),
+  children
+] }));
+SidebarSection.displayName = "SidebarSection";
+var SidebarChannel = React16.forwardRef(({ name, icon, locked, active, badge, className, ...props }, ref) => {
+  const resolvedIcon = icon ?? (locked ? /* @__PURE__ */ jsx(LockIcon, { size: 17 }) : /* @__PURE__ */ jsx(HashIcon, { size: 17 }));
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-current": active ? "page" : void 0,
+      className: cn(
+        "flex h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 text-left text-sm hover:bg-sidebar-accent",
+        active ? "bg-sidebar-accent font-semibold text-sidebar-accent-fg" : "text-sidebar-fg",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex shrink-0",
+              active ? "text-sidebar-accent-fg" : "text-sidebar-fg"
+            ),
+            children: resolvedIcon
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: name }),
+        badge != null && badge !== "" && /* @__PURE__ */ jsx("span", { className: "ml-auto inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full bg-brand-solid px-1.5 text-[11px] font-semibold leading-none text-text-on-brand", children: badge })
+      ]
+    }
+  );
+});
+SidebarChannel.displayName = "SidebarChannel";
+var SidebarDm = React16.forwardRef(
+  ({ name, status = "online", color, avatarSrc, pinned, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "flex h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 text-left text-sm text-sidebar-fg hover:bg-sidebar-accent",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          AvatarWithPresence,
+          {
+            name,
+            status,
+            color,
+            src: avatarSrc,
+            size: "xs",
+            ringClassName: "ring-sidebar-bg"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: name }),
+        pinned && /* @__PURE__ */ jsx(
+          PinIcon,
+          {
+            size: 14,
+            className: "ml-auto shrink-0 text-text-subtle",
+            "aria-label": "\uACE0\uC815\uB428"
+          }
+        )
+      ]
+    }
+  )
+);
+SidebarDm.displayName = "SidebarDm";
+var sidebarContainerVariants = cva(
+  "border-border-subtle bg-sidebar-bg p-2",
+  {
+    variants: {
+      variant: {
+        panel: "w-[260px] max-w-full rounded-lg border",
+        shell: "h-full border-r"
+      }
+    },
+    defaultVariants: { variant: "panel" }
+  }
+);
+var SidebarPanel = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(sidebarContainerVariants({ variant: "panel" }), className),
+    ...props
+  }
+));
+SidebarPanel.displayName = "SidebarPanel";
+var Sidebar = React16.forwardRef(
+  ({ sections, variant = "panel", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      className: cn(sidebarContainerVariants({ variant }), className),
+      ...props,
+      children: sections.map((section, si) => /* @__PURE__ */ jsx(
+        SidebarSection,
+        {
+          title: section.title,
+          addable: section.addable,
+          onAdd: section.onAdd,
+          children: section.items.map((item, ii) => {
+            const key = item.id ?? item.name + ii;
+            if (item.kind === "dm") {
+              const { kind: kind2, id: id2, ...rest2 } = item;
+              return /* @__PURE__ */ jsx(SidebarDm, { ...rest2 }, key);
+            }
+            const { kind, id, ...rest } = item;
+            return /* @__PURE__ */ jsx(SidebarChannel, { ...rest }, key);
+          })
+        },
+        section.title + si
+      ))
+    }
+  )
+);
+Sidebar.displayName = "Sidebar";
+var List = React16.forwardRef(
+  ({ className, bordered = true, divided = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        className: cn(
+          "bg-surface-default px-4",
+          bordered && "rounded-lg border border-border-subtle",
+          divided && "[&>li+li]:border-t [&>li+li]:border-border-subtle",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+List.displayName = "List";
+var ListItem = React16.forwardRef(
+  ({ className, leading, title, description, trailing, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        className: cn("flex items-center gap-3 py-2.5", className),
+        ...props,
+        children: [
+          leading != null ? /* @__PURE__ */ jsx("div", { className: "relative shrink-0", children: leading }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-text-default", children: title }),
+            description != null ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-text-subtle", children: description }) : null
+          ] }),
+          trailing != null ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: trailing }) : null
+        ]
+      }
+    );
+  }
+);
+ListItem.displayName = "ListItem";
+var SuccessCheck = React16.forwardRef(
+  ({ size = 22, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full bg-brand-solid text-text-on-brand",
+        className
+      ),
+      style: { width: size, height: size },
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckIcon4, { size: Math.round(size * 0.6), strokeWidth: 3 })
+    }
+  )
+);
+SuccessCheck.displayName = "SuccessCheck";
+var separatorVariants = cva("shrink-0 border-border-default", {
+  variants: {
+    orientation: {
+      horizontal: "w-full border-t",
+      vertical: "h-full self-stretch border-l"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var Separator = React16.forwardRef(
+  ({ className, orientation = "horizontal", label, decorative = false, ...props }, ref) => {
+    const resolvedOrientation = orientation === "vertical" ? "vertical" : "horizontal";
+    const ariaOrientation = label != null ? "horizontal" : resolvedOrientation;
+    const a11yProps = decorative ? { role: "none" } : { role: "separator", "aria-orientation": ariaOrientation };
+    if (label != null) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          ...a11yProps,
+          className: cn(
+            "flex w-full items-center gap-3 text-sm text-text-subtle",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex-1 border-t border-border-default"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0", children: label }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex-1 border-t border-border-default"
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...a11yProps,
+        className: cn(
+          separatorVariants({ orientation: resolvedOrientation }),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+var popoverContentVariants = cva(
+  // content shell: raised surface · border · radius lg(8) · shadow-popover · padding
+  "absolute z-50 w-max min-w-[220px] max-w-xs rounded-lg border border-border-default bg-surface-default p-4 text-sm text-text-default shadow-popover outline-none",
+  {
+    variants: {
+      placement: {
+        top: "bottom-full mb-2",
+        bottom: "top-full mt-2",
+        left: "right-full mr-2",
+        right: "left-full ml-2"
+      },
+      align: {
+        start: "",
+        center: "",
+        end: ""
+      }
+    },
+    compoundVariants: [
+      // vertical placements (top/bottom) → align along the X axis
+      { placement: ["top", "bottom"], align: "start", class: "left-0" },
+      {
+        placement: ["top", "bottom"],
+        align: "center",
+        class: "left-1/2 -translate-x-1/2"
+      },
+      { placement: ["top", "bottom"], align: "end", class: "right-0" },
+      // horizontal placements (left/right) → align along the Y axis
+      { placement: ["left", "right"], align: "start", class: "top-0" },
+      {
+        placement: ["left", "right"],
+        align: "center",
+        class: "top-1/2 -translate-y-1/2"
+      },
+      { placement: ["left", "right"], align: "end", class: "bottom-0" }
+    ],
+    defaultVariants: {
+      placement: "bottom",
+      align: "center"
+    }
+  }
+);
+var Popover = React16.forwardRef(
+  ({
+    className,
+    content,
+    children,
+    placement = "bottom",
+    align = "center",
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    ...props
+  }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React16.useState(defaultOpen);
+    const isControlled = openProp !== void 0;
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const innerRef = React16.useRef(null);
+    React16.useImperativeHandle(ref, () => innerRef.current, []);
+    const contentId = React16.useId();
+    const setOpen = React16.useCallback(
+      (next) => {
+        if (!isControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange]
+    );
+    React16.useEffect(() => {
+      if (!open) return;
+      const onPointerDown = (event) => {
+        const node = innerRef.current;
+        if (node && !node.contains(event.target)) setOpen(false);
+      };
+      const onKeyDown = (event) => {
+        if (event.key === "Escape") setOpen(false);
+      };
+      document.addEventListener("pointerdown", onPointerDown);
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("pointerdown", onPointerDown);
+        document.removeEventListener("keydown", onKeyDown);
+      };
+    }, [open, setOpen]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: innerRef,
+        className: cn("relative inline-flex", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-flex",
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              "aria-controls": open ? contentId : void 0,
+              onClick: (event) => {
+                if (!event.defaultPrevented) setOpen(!open);
+              },
+              children
+            }
+          ),
+          open ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: contentId,
+              role: "dialog",
+              "aria-modal": "false",
+              className: cn(popoverContentVariants({ placement, align })),
+              children: content
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Popover.displayName = "Popover";
+var fieldVariants = cva("flex gap-1.5", {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row items-start gap-4"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var Field = React16.forwardRef(
+  ({
+    className,
+    orientation = "vertical",
+    label,
+    htmlFor,
+    required = false,
+    optional = false,
+    hint,
+    error,
+    children,
+    ...props
+  }, ref) => {
+    const reactId = React16.useId();
+    const controlId = htmlFor ?? reactId;
+    const isHorizontal = orientation === "horizontal";
+    const messageId = error ? `${controlId}-error` : hint ? `${controlId}-hint` : void 0;
+    const control = React16.isValidElement(children) ? React16.cloneElement(children, {
+      id: children.props.id ?? controlId,
+      "aria-invalid": error ? true : children.props["aria-invalid"],
+      "aria-describedby": [children.props["aria-describedby"], messageId].filter(Boolean).join(" ") || void 0
+    }) : children;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(fieldVariants({ orientation }), className),
+        ...props,
+        children: [
+          label ? /* @__PURE__ */ jsx("div", { className: cn(isHorizontal && "w-40 shrink-0 pt-2"), children: /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: controlId,
+              className: "inline-flex items-center gap-1.5 text-sm font-medium text-text-default",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                  label,
+                  required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-danger-text", children: "*" }) : null
+                ] }),
+                optional && !required ? /* @__PURE__ */ jsx(Label, { variant: "neutral", children: "\uC120\uD0DD" }) : null
+              ]
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-col gap-1.5",
+                isHorizontal && "flex-1"
+              ),
+              children: [
+                control,
+                error ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: `${controlId}-error`,
+                    className: "flex items-center gap-1 text-sm text-danger-text",
+                    children: error
+                  }
+                ) : hint ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: `${controlId}-hint`,
+                    className: "flex items-center gap-1 text-sm text-text-subtle",
+                    children: hint
+                  }
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Field.displayName = "Field";
+var accessoryButtonClass = "inline-flex size-6 shrink-0 items-center justify-center rounded text-text-subtle transition-colors hover:bg-surface-hover hover:text-text-default active:bg-surface-pressed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border disabled:pointer-events-none disabled:text-text-disabled";
+var SearchField = React16.forwardRef(
+  ({
+    className,
+    value,
+    defaultValue,
+    onValueChange,
+    placeholder = "\uAC80\uC0C9",
+    resultCount,
+    onPrev,
+    onNext,
+    onClear,
+    size,
+    disabled,
+    ...props
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = React16.useState(
+      defaultValue ?? ""
+    );
+    const currentValue = isControlled ? value : internalValue;
+    const innerRef = React16.useRef(null);
+    React16.useImperativeHandle(ref, () => innerRef.current);
+    const commit = (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    };
+    const handleClear = () => {
+      commit("");
+      onClear?.();
+      innerRef.current?.focus();
+    };
+    const hasCount = typeof resultCount === "number";
+    const hasNav = Boolean(onPrev || onNext);
+    const showClear = Boolean(onClear) && currentValue.length > 0;
+    const showAccessories = hasCount || hasNav || showClear;
+    const showDivider = hasCount && (hasNav || showClear);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          inputVariants({ inputSize: size }),
+          "cursor-text focus-within:border-border-focus focus-within:ring-2 focus-within:ring-brand-border focus-within:ring-offset-2 focus-within:ring-offset-bg-base",
+          disabled && "cursor-not-allowed bg-surface-sunken text-text-disabled",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "flex size-5 shrink-0 items-center justify-center text-text-subtle [&_svg]:size-5",
+              children: /* @__PURE__ */ jsx(SearchIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: innerRef,
+              type: "search",
+              role: "searchbox",
+              value: currentValue,
+              placeholder,
+              disabled,
+              onChange: (event) => commit(event.target.value),
+              className: "h-full w-full min-w-0 bg-transparent text-text-default outline-none placeholder:text-text-subtle disabled:cursor-not-allowed disabled:text-text-disabled [&::-webkit-search-cancel-button]:hidden",
+              ...props
+            }
+          ),
+          showAccessories ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            hasCount ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 whitespace-nowrap text-sm tabular-nums text-text-subtle", children: [
+              resultCount,
+              "\uAC74"
+            ] }) : null,
+            showDivider ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-4 w-px bg-border-subtle" }) : null,
+            onPrev ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "\uC774\uC804 \uACB0\uACFC",
+                disabled,
+                onClick: onPrev,
+                className: accessoryButtonClass,
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon2, { size: 16 })
+              }
+            ) : null,
+            onNext ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "\uB2E4\uC74C \uACB0\uACFC",
+                disabled,
+                onClick: onNext,
+                className: accessoryButtonClass,
+                children: /* @__PURE__ */ jsx(ChevronRightIcon2, { size: 16 })
+              }
+            ) : null,
+            showClear ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
+                disabled,
+                onClick: handleClear,
+                className: accessoryButtonClass,
+                children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+SearchField.displayName = "SearchField";
+var bannerVariants = cva(
+  "flex w-full items-start gap-3 rounded-lg border p-4 text-sm",
+  {
+    variants: {
+      variant: {
+        neutral: "border-border-default bg-surface-sunken text-text-default",
+        brand: "border-brand-border bg-brand-subtle text-brand-text",
+        danger: "border-danger-border bg-danger-subtle text-danger-text"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+var Banner = React16.forwardRef(
+  ({
+    className,
+    variant,
+    icon,
+    title,
+    dismissible = false,
+    onDismiss,
+    children,
+    role = "status",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role,
+        className: cn(bannerVariants({ variant }), className),
+        ...props,
+        children: [
+          icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "mt-0.5 flex size-5 shrink-0 items-center justify-center [&_svg]:size-5",
+              children: icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            title ? /* @__PURE__ */ jsx("p", { className: "font-semibold leading-5", children: title }) : null,
+            children ? /* @__PURE__ */ jsx("div", { className: cn("leading-5", title && "mt-1"), children }) : null
+          ] }),
+          dismissible ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "\uB2EB\uAE30",
+              onClick: onDismiss,
+              className: "-m-1 inline-flex size-6 shrink-0 items-center justify-center rounded text-current opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+              children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Banner.displayName = "Banner";
+
+export { AVATAR_COLORS, Accordion, AccordionItem, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarWithPresence, Banner, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CommandPalette, Dialog, Button as DialogAction, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, Field, Input, Kbd, KpiRow, Label, List, ListItem, PRESENCE_LABEL, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, Popover, Presence, Progress, ProgressList, Radio, RadioGroup, Ring, ScrollArea, ScrollBar, SearchField, SegmentedControl, Select, Separator, Sheet, SheetBody, SheetDescription, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Sidebar, SidebarChannel, SidebarDm, SidebarPanel, SidebarSection, Skeleton, StackBar, SuccessCheck, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, Toggle, Tooltip, WorkHoursBar, alertVariants, avatarVariants, bannerVariants, buildPageRange, buttonVariants, cardVariants, checkboxVariants, chipVariants, cn, dialogPanelVariants, dropdownMenuContentVariants, dropdownMenuItemVariants, fieldVariants, inputVariants, labelVariants, paginationItemVariants, popoverContentVariants, progressFillVariants, progressTrackVariants, radioVariants, segmentContainerVariants, segmentItemVariants, selectTriggerVariants, separatorVariants, sheetOverlayVariants, sheetPanelVariants, sidebarContainerVariants, skeletonVariants, tableRowVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleThumbVariants, toggleTrackVariants, tooltipArrowVariants, tooltipContentVariants };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map