@bigtablet/design-system 3.16.0 → 3.17.1

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import './index.css';
 import * as React11 from 'react';
-import { createContext, useRef, useState, useId, useEffect, useContext, useCallback, useMemo, Fragment, useImperativeHandle, useLayoutEffect } from 'react';
+import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext, useId, Fragment, useImperativeHandle, useLayoutEffect } from 'react';
 import { useSpring, animated } from '@react-spring/web';
-import { ChevronDown, ChevronRight, Globe, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, XCircle, AlertTriangle, CheckCircle2, Info, Bell, Search, Check, Image, X, EyeOff, Eye, TriangleAlert } from 'lucide-react';
+import { ChevronDown, ChevronRight, Globe, ChevronLeft, EyeOff, Eye, ArrowUp, ArrowDown, ArrowUpDown, Search, XCircle, AlertTriangle, CheckCircle2, Info, Bell, Check, Image, X, TriangleAlert } from 'lucide-react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -91,15 +91,23 @@ function lockBodyScroll() {
   const open = Number.parseInt(body.dataset[COUNTER] || "0", 10);
   if (open === 0) {
     const scrollbarWidth = measureViewportInset();
+    const scroller = document.scrollingElement ?? html;
+    const documentScrolls = scroller.scrollHeight > scroller.clientHeight;
+    const canReserveGutter = typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("scrollbar-gutter: stable");
     body.dataset[PREV_OVERFLOW] = body.style.overflow;
     body.dataset[PREV_GUTTER] = html.style.scrollbarGutter;
     body.dataset[PREV_PADDING_RIGHT] = body.style.paddingRight;
     body.dataset[PREV_SCROLLBAR_WIDTH_VAR] = html.style.getPropertyValue(SCROLLBAR_WIDTH_VAR);
     if (scrollbarWidth > 0) {
       html.style.setProperty(SCROLLBAR_WIDTH_VAR, `${scrollbarWidth}px`);
-      html.style.scrollbarGutter = "auto";
-      const current = Number.parseFloat(window.getComputedStyle(body).paddingRight) || 0;
-      body.style.paddingRight = `${current + scrollbarWidth}px`;
+    }
+    if (documentScrolls && scrollbarWidth > 0) {
+      if (canReserveGutter) {
+        html.style.scrollbarGutter = "stable";
+      } else {
+        const current = Number.parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+        body.style.paddingRight = `${current + scrollbarWidth}px`;
+      }
     }
     body.style.overflow = "hidden";
   }
@@ -409,6 +417,168 @@ function useSpringPresence({
     }
   });
 }
+var MIN_SPACE_BELOW = 120;
+function useListboxPopup({
+  items,
+  onCommit,
+  disabled = false,
+  returnFocusOnClose = false,
+  initialActiveIndex
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [dropUp, setDropUp] = useState(false);
+  const wrapperRef = useRef(null);
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    if (returnFocusOnClose) triggerRef.current?.focus();
+  }, [returnFocusOnClose]);
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (!wrapperRef.current?.contains(event.target)) setIsOpen(false);
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, []);
+  const moveActive = useCallback(
+    (dir) => {
+      if (items.length === 0) return;
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
+      let i = activeIndex;
+      if (i === -1) {
+        i = dir === 1 ? -1 : 0;
+      }
+      const len = items.length;
+      for (let step = 0; step < len; step++) {
+        i = (i + dir + len) % len;
+        if (!items[i].disabled) {
+          setActiveIndex(i);
+          break;
+        }
+      }
+    },
+    [items, isOpen, activeIndex]
+  );
+  const commitActive = useCallback(() => {
+    if (activeIndex < 0 || activeIndex >= items.length) return;
+    const item = items[activeIndex];
+    if (item.disabled) return;
+    onCommit(item);
+  }, [activeIndex, items, onCommit]);
+  const firstEnabled = useCallback(() => items.findIndex((o) => !o.disabled), [items]);
+  const lastEnabled = useCallback(() => {
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (!items[i].disabled) return i;
+    }
+    return -1;
+  }, [items]);
+  const onTriggerKeyDown = useCallback(
+    (event) => {
+      if (disabled) return;
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          event.preventDefault();
+          if (!isOpen) setIsOpen(true);
+          else commitActive();
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          moveActive(1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          moveActive(-1);
+          break;
+        case "Home":
+          event.preventDefault();
+          setIsOpen(true);
+          setActiveIndex(firstEnabled());
+          break;
+        case "End":
+          event.preventDefault();
+          setIsOpen(true);
+          setActiveIndex(lastEnabled());
+          break;
+        case "Escape":
+          event.preventDefault();
+          setIsOpen(false);
+          break;
+        case "Tab":
+          setIsOpen(false);
+          break;
+      }
+    },
+    [disabled, isOpen, commitActive, moveActive, firstEnabled, lastEnabled]
+  );
+  const onInputKeyDown = useCallback(
+    (event) => {
+      if (disabled) return;
+      if (event.nativeEvent.isComposing) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          moveActive(1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          moveActive(-1);
+          break;
+        case "Enter":
+          event.preventDefault();
+          commitActive();
+          break;
+        case "Escape":
+          event.preventDefault();
+          close();
+          break;
+        case "Tab":
+          close();
+          break;
+      }
+    },
+    [disabled, moveActive, commitActive, close]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const preferred = initialActiveIndex?.(items) ?? -1;
+    setActiveIndex(preferred >= 0 ? preferred : items.findIndex((o) => !o.disabled));
+  }, [isOpen, items]);
+  useEffect(() => {
+    if (!isOpen || activeIndex < 0) return;
+    const list = listRef.current;
+    if (!list) return;
+    const option = list.querySelectorAll('[role="option"]')[activeIndex];
+    option?.scrollIntoView?.({ block: "nearest" });
+  }, [isOpen, activeIndex, items]);
+  useEffect(() => {
+    if (!isOpen || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    setDropUp(spaceBelow < MIN_SPACE_BELOW && spaceAbove > spaceBelow);
+  }, [isOpen]);
+  return {
+    isOpen,
+    setIsOpen,
+    dropUp,
+    activeIndex,
+    setActiveIndex,
+    wrapperRef,
+    triggerRef,
+    listRef,
+    close,
+    moveActive,
+    commitActive,
+    onTriggerKeyDown,
+    onInputKeyDown
+  };
+}
 
 // src/styles/icon/index.ts
 var iconSize = {
@@ -550,6 +720,90 @@ var Badge = ({
     }
   );
 };
+var DescriptionList = ({
+  items,
+  layout = "row",
+  divided = false,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "dl",
+  {
+    ref,
+    className: cn(
+      "description_list",
+      `description_list_layout_${layout}`,
+      { description_list_divided: divided },
+      className
+    ),
+    ...props,
+    children: items.map((item, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("description_list_item", { description_list_item_full: item.full }),
+        children: [
+          /* @__PURE__ */ jsx("dt", { className: "description_list_label", children: item.label }),
+          /* @__PURE__ */ jsx("dd", { className: "description_list_value", children: item.value })
+        ]
+      },
+      index
+    ))
+  }
+);
+var isPresent = (value) => value !== void 0 && value !== null && value !== "";
+var Stat = ({
+  label,
+  value,
+  delta,
+  deltaTone = "neutral",
+  icon,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { ref, className: cn("stat", className), ...props, children: [
+  /* @__PURE__ */ jsxs("div", { className: "stat_label", children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "stat_icon", "aria-hidden": "true", children: icon }),
+    label
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "stat_value", children: value }),
+  isPresent(delta) && /* @__PURE__ */ jsx("div", { className: cn("stat_delta", `stat_delta_${deltaTone}`), children: delta })
+] });
+var CheckGlyph = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    className: "timeline_glyph",
+    children: /* @__PURE__ */ jsx("polyline", { points: "4 10 8 14 16 6" })
+  }
+);
+var isPresent2 = (value) => value !== void 0 && value !== null && value !== "";
+var Timeline = ({ items, className, ref, ...props }) => /* @__PURE__ */ jsx("ol", { ref, className: cn("timeline", className), ...props, children: items.map((item) => {
+  const status = item.status ?? "pending";
+  return /* @__PURE__ */ jsxs("li", { className: cn("timeline_item", `timeline_item_${status}`), children: [
+    /* @__PURE__ */ jsx("span", { className: "timeline_indicator", "aria-hidden": "true", children: item.icon ?? (status === "done" ? /* @__PURE__ */ jsx(CheckGlyph, {}) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("timeline_dot", { timeline_dot_hollow: status === "pending" })
+      }
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "timeline_body", children: [
+      /* @__PURE__ */ jsxs("div", { className: "timeline_head", children: [
+        /* @__PURE__ */ jsx("div", { className: "timeline_title", children: item.title }),
+        isPresent2(item.time) && /* @__PURE__ */ jsx("div", { className: "timeline_time", children: item.time })
+      ] }),
+      isPresent2(item.description) && /* @__PURE__ */ jsx("div", { className: "timeline_description", children: item.description }),
+      item.children
+    ] })
+  ] }, item.id);
+}) });
 var EmptyState = ({
   illustration,
   title,
@@ -579,12 +833,181 @@ var EmptyState = ({
     }
   );
 };
+
+// src/ui/system/locale-provider/messages.ts
+var ko = {
+  "chip.remove": "{label} \uC81C\uAC70",
+  "dataView.clearSelection": "\uC120\uD0DD \uD574\uC81C",
+  "dataView.empty": "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
+  "dataView.errorTitle": "\uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4",
+  "dataView.retry": "\uB2E4\uC2DC \uC2DC\uB3C4",
+  "dataView.search": "\uAC80\uC0C9",
+  "dataView.selectionSummary": "{count}\uAC1C \uC120\uD0DD\uB428",
+  "table.empty": "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
+  "table.rowClickHint": "\uD074\uB9AD \uAC00\uB2A5\uD55C \uD589",
+  "table.selectAll": "\uC804\uCCB4 \uC120\uD0DD",
+  "table.selectRow": "{index}\uBC88\uC9F8 \uD589 \uC120\uD0DD",
+  "alert.cancel": "\uCDE8\uC18C",
+  "alert.confirm": "\uD655\uC778",
+  "errorState.title": "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4",
+  "spinner.label": "\uB85C\uB529 \uC911",
+  "toast.close": "\uB2EB\uAE30",
+  "toast.region": "\uC54C\uB9BC",
+  "topLoading.label": "\uD398\uC774\uC9C0 \uB85C\uB529 \uC911",
+  "combobox.empty": "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
+  "combobox.idle": "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694",
+  "combobox.loading": "\uAC80\uC0C9 \uC911",
+  "combobox.placeholder": "\uAC80\uC0C9\uD574\uC11C \uC120\uD0DD",
+  "datePicker.day": "\uC77C",
+  "datePicker.minDateSr": "\uCD5C\uC18C \uB0A0\uC9DC: {date}",
+  "datePicker.month": "\uC6D4",
+  "datePicker.rangeUntilTodaySr": "\uC624\uB298\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5",
+  "datePicker.year": "\uB144",
+  "dateRange.end": "\uC885\uB8CC\uC77C",
+  "dateRange.start": "\uC2DC\uC791\uC77C",
+  "dropdown.empty": "\uACB0\uACFC \uC5C6\uC74C",
+  "dropdown.placeholder": "\uC120\uD0DD\u2026",
+  "dropdown.searchPlaceholder": "\uAC80\uC0C9\u2026",
+  "dropdown.selectedSummary": "{count}\uAC1C \uC120\uD0DD",
+  "fileInput.label": "\uD30C\uC77C \uC120\uD0DD",
+  "fileInput.removeImage": "\uC774\uBBF8\uC9C0 \uC81C\uAC70",
+  "imageCropper.hint": "\uB4DC\uB798\uADF8(\uB610\uB294 \uBC29\uD5A5\uD0A4)\uB85C \uC704\uCE58, \uD720\xB7\uC2AC\uB77C\uC774\uB354\uB85C \uBC30\uC728\uC744 \uB9DE\uCD94\uC138\uC694.",
+  "imageCropper.label": "\uC774\uBBF8\uC9C0 \uC704\uCE58\uC640 \uBC30\uC728 \uC870\uC815",
+  "imageCropper.noPanHint": "\uC774\uBBF8\uC9C0\uAC00 \uBDF0\uD3EC\uD2B8\uB97C \uB531 \uCC44\uC6CC \uC774\uB3D9 \uC5EC\uC720\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  "imageCropper.zoom": "\uBC30\uC728",
+  "imageCropper.zoomIn": "\uD655\uB300",
+  "imageCropper.zoomOut": "\uCD95\uC18C",
+  "otpInput.digit": "{index}\uBC88\uC9F8 \uC790\uB9AC",
+  "otpInput.label": "OTP \uC785\uB825",
+  "tagInput.added": "{names} \uCD94\uAC00\uB428",
+  "tagInput.addedWithNotes": "{names} \uCD94\uAC00\uB428 ({notes})",
+  "tagInput.atCap": "\uCD5C\uB300 {max}\uAC1C\uAE4C\uC9C0 \uCD94\uAC00\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4",
+  "tagInput.duplicate": "{names} \uC774\uBBF8 \uC788\uC74C",
+  "tagInput.placeholder": "\uC785\uB825 \uD6C4 Enter",
+  "tagInput.removed": "{name} \uC81C\uAC70\uB428",
+  "textField.clear": "\uC9C0\uC6B0\uAE30",
+  "textField.passwordHide": "\uBE44\uBC00\uBC88\uD638 \uC228\uAE30\uAE30",
+  "textField.passwordShow": "\uBE44\uBC00\uBC88\uD638 \uD45C\uC2DC",
+  "timePicker.hour": "\uC2DC",
+  "timePicker.minute": "\uBD84",
+  "timePicker.rangeSr": "{min} \uBD80\uD130 {max} \uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5",
+  "bottomNav.label": "\uC8FC\uC694 \uBA54\uB274",
+  "breadcrumb.label": "\uD604\uC7AC \uC704\uCE58",
+  "pagination.label": "\uD398\uC774\uC9C0 \uC774\uB3D9",
+  "pagination.next": "\uB2E4\uC74C \uD398\uC774\uC9C0",
+  "pagination.prev": "\uC774\uC804 \uD398\uC774\uC9C0",
+  "sidebar.toggle": "\uC0AC\uC774\uB4DC\uBC14 \uD1A0\uAE00",
+  "drawer.close": "\uB2EB\uAE30",
+  "modal.close": "\uB2EB\uAE30"
+};
+var en = {
+  "chip.remove": "Remove {label}",
+  "dataView.clearSelection": "Clear selection",
+  "dataView.empty": "No data",
+  "dataView.errorTitle": "Could not load",
+  "dataView.retry": "Try again",
+  "dataView.search": "Search",
+  "dataView.selectionSummary": "{count} selected",
+  "table.empty": "No data",
+  "table.rowClickHint": "Clickable row",
+  "table.selectAll": "Select all",
+  "table.selectRow": "Select row {index}",
+  "alert.cancel": "Cancel",
+  "alert.confirm": "OK",
+  "errorState.title": "Something went wrong",
+  "spinner.label": "Loading",
+  "toast.close": "Close",
+  "toast.region": "Notifications",
+  "topLoading.label": "Loading page",
+  "combobox.empty": "No matches",
+  "combobox.idle": "Type to search",
+  "combobox.loading": "Searching",
+  "combobox.placeholder": "Search to select",
+  "datePicker.day": "Day",
+  "datePicker.minDateSr": "Earliest date: {date}",
+  "datePicker.month": "Month",
+  "datePicker.rangeUntilTodaySr": "Selectable up to today",
+  "datePicker.year": "Year",
+  "dateRange.end": "End date",
+  "dateRange.start": "Start date",
+  "dropdown.empty": "No results",
+  "dropdown.placeholder": "Select\u2026",
+  "dropdown.searchPlaceholder": "Search\u2026",
+  "dropdown.selectedSummary": "{count} selected",
+  "fileInput.label": "Choose file",
+  "fileInput.removeImage": "Remove image",
+  "imageCropper.hint": "Drag (or use arrow keys) to move, wheel or slider to zoom.",
+  "imageCropper.label": "Adjust image position and zoom",
+  "imageCropper.noPanHint": "The image fills the viewport exactly, so there is no room to move it.",
+  "imageCropper.zoom": "Zoom",
+  "imageCropper.zoomIn": "Zoom in",
+  "imageCropper.zoomOut": "Zoom out",
+  "otpInput.digit": "Digit {index}",
+  "otpInput.label": "One-time code",
+  "tagInput.added": "{names} added",
+  "tagInput.addedWithNotes": "{names} added ({notes})",
+  "tagInput.atCap": "You can add up to {max}",
+  "tagInput.duplicate": "{names} already added",
+  "tagInput.placeholder": "Type and press Enter",
+  "tagInput.removed": "{name} removed",
+  "textField.clear": "Clear",
+  "textField.passwordHide": "Hide password",
+  "textField.passwordShow": "Show password",
+  "timePicker.hour": "Hour",
+  "timePicker.minute": "Minute",
+  "timePicker.rangeSr": "Selectable from {min} to {max}",
+  "bottomNav.label": "Main menu",
+  "breadcrumb.label": "Breadcrumb",
+  "pagination.label": "Pagination",
+  "pagination.next": "Next page",
+  "pagination.prev": "Previous page",
+  "sidebar.toggle": "Toggle sidebar",
+  "drawer.close": "Close",
+  "modal.close": "Close"
+};
+var catalogs = { ko, en };
+function format(template, vars) {
+  if (!vars) return template;
+  return template.replace(
+    /\{(\w+)\}/g,
+    (whole, name) => name in vars ? String(vars[name]) : whole
+  );
+}
+function makeText(messages) {
+  return (key, vars) => format(messages[key], vars);
+}
+var FALLBACK = { locale: "ko", t: makeText(ko) };
+var LocaleContext = createContext(void 0);
+var LocaleProvider = ({ locale = "ko", messages, children }) => {
+  const stableMessages = useStableMessages(messages);
+  const value = useMemo(() => {
+    const base = catalogs[locale];
+    const merged = stableMessages ? { ...base, ...stableMessages } : base;
+    return { locale, t: makeText(merged) };
+  }, [locale, stableMessages]);
+  return /* @__PURE__ */ jsx(LocaleContext.Provider, { value, children });
+};
+function useStableMessages(messages) {
+  const ref = useRef(messages);
+  const previous = ref.current;
+  const same = previous === messages || !!previous && !!messages && Object.keys(previous).length === Object.keys(messages).length && Object.keys(messages).every((key) => previous[key] === messages[key]);
+  useEffect(() => {
+    if (!same) ref.current = messages;
+  }, [same, messages]);
+  return same ? previous : messages;
+}
+function useLocaleText() {
+  return (useContext(LocaleContext) ?? FALLBACK).t;
+}
+function useLocaleName() {
+  return (useContext(LocaleContext) ?? FALLBACK).locale;
+}
 var DEFAULT_ICON_SIZE = {
   page: 48,
   widget: 28
 };
 var ErrorState = ({
-  title = "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4",
+  title: titleProp,
   description,
   icon,
   action,
@@ -592,6 +1015,8 @@ var ErrorState = ({
   className,
   ...props
 }) => {
+  const t = useLocaleText();
+  const title = titleProp === void 0 ? t("errorState.title") : titleProp;
   const resolvedIcon = icon === null ? null : icon ?? /* @__PURE__ */ jsx(TriangleAlert, { size: DEFAULT_ICON_SIZE[variant], strokeWidth: 1.5 });
   return /* @__PURE__ */ jsxs(
     "div",
@@ -609,15 +1034,17 @@ var ErrorState = ({
   );
 };
 var BottomNav = ({
-  ariaLabel = "\uC8FC\uC694 \uBA54\uB274",
+  ariaLabel: ariaLabelProp,
   className,
   children,
   ...props
 }) => {
+  const t = useLocaleText();
+  const ariaLabel = ariaLabelProp ?? t("bottomNav.label");
   return /* @__PURE__ */ jsx("nav", { className: cn("bottom_nav", className), "aria-label": ariaLabel, ...props, children });
 };
 var BottomNavItem = (props) => {
-  const { icon, label, active, badge, as = "button", className, disabled, ...rest } = props;
+  const { icon, label, active, badge, as, className, disabled, ref, ...rest } = props;
   const classes = cn(
     "bottom_nav_item",
     active && "bottom_nav_item_active",
@@ -625,6 +1052,8 @@ var BottomNavItem = (props) => {
     className
   );
   const ariaCurrent = active ? "page" : void 0;
+  const anchorRest = rest;
+  const Tag = as ?? (anchorRest.href != null ? "a" : "button");
   const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs("span", { className: "bottom_nav_item_icon", "aria-hidden": "true", children: [
       icon,
@@ -632,38 +1061,45 @@ var BottomNavItem = (props) => {
     ] }),
     /* @__PURE__ */ jsx("span", { className: "bottom_nav_item_label", children: label })
   ] });
-  if (as === "a") {
-    const { href, onClick: onClick2, ...anchorRest } = rest;
+  if (Tag === "button") {
+    const {
+      type,
+      onClick: onClick2,
+      href: _href,
+      ...buttonRest
+    } = rest;
     return /* @__PURE__ */ jsx(
-      "a",
+      "button",
       {
+        ref,
+        type: type ?? "button",
         className: classes,
-        href,
+        disabled,
         "aria-current": ariaCurrent,
-        "aria-disabled": disabled ? "true" : void 0,
-        tabIndex: disabled ? -1 : void 0,
-        onClick: (e) => {
-          if (disabled) {
-            e.preventDefault();
-            return;
-          }
-          onClick2?.(e);
-        },
-        ...anchorRest,
+        onClick: onClick2,
+        ...buttonRest,
         children: content
       }
     );
   }
-  const { type, onClick, ...buttonRest } = rest;
+  const { onClick, tabIndex, ...tagProps } = anchorRest;
   return /* @__PURE__ */ jsx(
-    "button",
+    Tag,
     {
-      type: type ?? "button",
+      ...tagProps,
+      ref,
       className: classes,
-      disabled,
       "aria-current": ariaCurrent,
-      onClick,
-      ...buttonRest,
+      "aria-disabled": disabled ? "true" : void 0,
+      tabIndex: disabled ? -1 : tabIndex,
+      onClick: (event) => {
+        if (disabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        onClick?.(event);
+      },
       children: content
     }
   );
@@ -674,10 +1110,12 @@ var BottomNavSpacer = ({ className, ...props }) => {
 var Breadcrumb = ({
   items,
   separator,
-  navLabel = "\uD604\uC7AC \uC704\uCE58",
+  navLabel: navLabelProp,
   className,
   ...props
 }) => {
+  const t = useLocaleText();
+  const navLabel = navLabelProp ?? t("breadcrumb.label");
   const sep = separator ?? /* @__PURE__ */ jsx(ChevronRight, { size: iconSize.xs, "aria-hidden": "true" });
   return /* @__PURE__ */ jsx("nav", { "aria-label": navLabel, className: cn("breadcrumb", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "breadcrumb_list", children: items.map((item, idx) => {
     const isLast = idx === items.length - 1;
@@ -1018,7 +1456,7 @@ var Sidebar = ({
   defaultCollapsed = false,
   onCollapsedChange,
   collapsible = true,
-  toggleLabel = "\uC0AC\uC774\uB4DC\uBC14 \uD1A0\uAE00",
+  toggleLabel: toggleLabelProp,
   width = 240,
   collapsedWidth = 64,
   mode = "auto",
@@ -1027,6 +1465,8 @@ var Sidebar = ({
   style,
   ...props
 }) => {
+  const t = useLocaleText();
+  const toggleLabel = toggleLabelProp ?? t("sidebar.toggle");
   const isControlled = collapsedProp !== void 0;
   const [internalCollapsed, setInternalCollapsed] = React11.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
@@ -1070,20 +1510,61 @@ var Sidebar = ({
   );
 };
 var SidebarItem = (props) => {
-  const { icon, active, trailing, as = "button", className, children, ...rest } = props;
-  const classes = cn("sidebar_item", active && "sidebar_item_active", className);
+  const { icon, active, trailing, as, className, children, disabled, ref, ...rest } = props;
+  const classes = cn(
+    "sidebar_item",
+    active && "sidebar_item_active",
+    disabled && "sidebar_item_disabled",
+    className
+  );
   const ariaCurrent = active ? "page" : void 0;
+  const anchorRest = rest;
+  const Tag = as ?? (anchorRest.href != null ? "a" : "button");
   const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     icon && /* @__PURE__ */ jsx("span", { className: "sidebar_item_icon", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsx("span", { className: "sidebar_item_label", children }),
     trailing && /* @__PURE__ */ jsx("span", { className: "sidebar_item_trailing", children: trailing })
   ] });
-  if (as === "a") {
-    const { href, ...anchorRest } = rest;
-    return /* @__PURE__ */ jsx("a", { className: classes, href, "aria-current": ariaCurrent, ...anchorRest, children: inner });
+  if (Tag === "button") {
+    const {
+      type,
+      href: _href,
+      ...buttonRest
+    } = rest;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        className: classes,
+        disabled,
+        "aria-current": ariaCurrent,
+        ...buttonRest,
+        children: inner
+      }
+    );
   }
-  const { type, ...buttonRest } = rest;
-  return /* @__PURE__ */ jsx("button", { type: type ?? "button", className: classes, "aria-current": ariaCurrent, ...buttonRest, children: inner });
+  const { onClick, tabIndex, ...tagProps } = anchorRest;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...tagProps,
+      ref,
+      className: classes,
+      "aria-current": ariaCurrent,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : tabIndex,
+      onClick: (event) => {
+        if (disabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        onClick?.(event);
+      },
+      children: inner
+    }
+  );
 };
 var SidebarSection = ({ label, className, children, ...props }) => {
   return /* @__PURE__ */ jsxs("div", { className: cn("sidebar_section", className), ...props, children: [
@@ -2103,7 +2584,8 @@ var Chip = ({
   className,
   ...props
 }) => {
-  const removeAriaLabel = removeLabel ?? `${label} \uC81C\uAC70`;
+  const t = useLocaleText();
+  const removeAriaLabel = removeLabel ?? t("chip.remove", { label: String(label) });
   const [iconHovered, setIconHovered] = useState(false);
   const isStatic = type === "static";
   const hasLeading = !isStatic && selected;
@@ -2200,252 +2682,382 @@ var Chip = ({
     )
   ] });
 };
-var Divider = ({ weight = "standard", className, ...props }) => {
-  const dividerClassName = cn("divider", `divider_weight_${weight}`, className);
-  return /* @__PURE__ */ jsx("hr", { className: dividerClassName, ...props });
-};
-var Button = (props) => {
-  const {
-    variant = "filled",
-    size = "md",
-    leadingIcon,
-    trailingIcon,
-    fullWidth = false,
-    radius: radius2,
-    danger = false,
-    disabled = false,
-    as,
-    className,
-    children,
-    ref,
-    ...rest
-  } = props;
-  const buttonClassName = cn(
-    "button",
-    `button_variant_${variant}`,
-    `button_size_${size}`,
-    fullWidth && "button_full_width",
-    radius2 && `button_radius_${radius2}`,
-    danger && "button_danger",
-    // anchor 엔 native :disabled 가 안 먹으므로 클래스로 비활성 스타일 적용 (button 도 무해)
-    disabled && "button_disabled",
-    className
-  );
-  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    leadingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: leadingIcon }),
-    children && /* @__PURE__ */ jsx("span", { className: "button_label", children }),
-    trailingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: trailingIcon })
-  ] });
-  const anchorRest = rest;
-  const renderAnchor = as === "a" || as === void 0 && anchorRest.href != null;
-  if (renderAnchor) {
-    const { onClick, tabIndex, ...anchorProps } = anchorRest;
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ...anchorProps,
-        ref,
-        className: buttonClassName,
-        "aria-disabled": disabled || void 0,
-        tabIndex: disabled ? -1 : tabIndex,
-        onClick: disabled ? (e) => e.preventDefault() : onClick,
-        children: content
-      }
-    );
+var FormContext = createContext(void 0);
+function useFormError(name) {
+  return useContext(FormContext)?.errors?.[name];
+}
+var Form = ({ errors, onSubmit, children, className, ...props }) => /* @__PURE__ */ jsx(FormContext.Provider, { value: { errors }, children: /* @__PURE__ */ jsx(
+  "form",
+  {
+    className: cn("form", className),
+    onSubmit: (event) => {
+      event.preventDefault();
+      onSubmit?.(event);
+    },
+    ...props,
+    children
   }
-  const { type = "button", ...buttonRest } = rest;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type,
-      disabled,
-      className: buttonClassName,
-      ...buttonRest,
-      children: content
-    }
-  );
-};
-var HeroActionButton = ({
-  action,
-  variant
-}) => action.href ? /* @__PURE__ */ jsx(Button, { as: "a", href: action.href, size: "lg", variant, onClick: action.onClick, children: action.label }) : /* @__PURE__ */ jsx(Button, { size: "lg", variant, onClick: action.onClick, children: action.label });
-var Hero = ({
-  height = "md",
-  align = "left",
-  backgroundImage,
-  backgroundColor,
-  overlay,
-  title,
-  subtitle,
-  eyebrow,
-  textColor = "auto",
-  primaryAction,
-  secondaryAction,
+) });
+var FormActions = ({ align = "end", children, className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("form_actions", `form_actions_${align}`, className), ...props, children });
+FormActions.displayName = "Form.Actions";
+Form.Actions = FormActions;
+var FieldContext = createContext(void 0);
+function useFieldControl() {
+  return useContext(FieldContext);
+}
+var Field = ({
+  name,
+  label,
+  required = false,
+  help,
+  error: errorProp,
   children,
   className,
-  style,
   ...props
 }) => {
-  const resolvedOverlay = overlay === true ? "dark" : overlay;
-  const isDarkOverlay = resolvedOverlay === "dark";
-  const resolvedTextColor = textColor === "auto" ? isDarkOverlay || backgroundImage && !resolvedOverlay ? "inverse" : "default" : textColor;
-  const heroClassName = cn(
-    "hero",
-    `hero_height_${height}`,
-    `hero_align_${align}`,
-    resolvedOverlay && `hero_overlay_${resolvedOverlay}`,
-    `hero_text_${resolvedTextColor}`,
-    className
-  );
-  const inlineStyle = { ...style };
-  if (backgroundImage) inlineStyle.backgroundImage = `url("${backgroundImage}")`;
-  if (backgroundColor) inlineStyle.backgroundColor = backgroundColor;
-  return /* @__PURE__ */ jsxs("section", { className: heroClassName, style: inlineStyle, ...props, children: [
-    resolvedOverlay && /* @__PURE__ */ jsx("div", { className: "hero_overlay", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs("div", { className: "hero_content", children: [
-      eyebrow && /* @__PURE__ */ jsx("div", { className: "hero_eyebrow", children: eyebrow }),
-      title && /* @__PURE__ */ jsx("h1", { className: "hero_title", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "hero_subtitle", children: subtitle }),
-      (primaryAction || secondaryAction || children) && /* @__PURE__ */ jsxs("div", { className: "hero_actions", children: [
-        primaryAction && /* @__PURE__ */ jsx(HeroActionButton, { action: primaryAction, variant: "filled" }),
-        secondaryAction && /* @__PURE__ */ jsx(HeroActionButton, { action: secondaryAction, variant: "outline" }),
-        children
-      ] })
-    ] })
+  const generatedId = useId();
+  const inputId = `${name}-${generatedId}`;
+  const formError = useFormError(name);
+  const error = errorProp ?? formError;
+  const labelId = label ? `${inputId}-label` : void 0;
+  const helpId = help ? `${inputId}-help` : void 0;
+  const errorId = error ? `${inputId}-error` : void 0;
+  const showHelp = !error && !!help;
+  const control = {
+    inputId,
+    labelId,
+    describedBy: [errorId, showHelp ? helpId : void 0].filter(Boolean).join(" ") || void 0,
+    invalid: !!error,
+    required
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("field", !!error && "field_error", className), ...props, children: [
+    label && /* @__PURE__ */ jsxs("label", { id: labelId, htmlFor: inputId, className: "field_label", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "field_required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(FieldContext.Provider, { value: control, children }),
+    showHelp && /* @__PURE__ */ jsx("div", { id: helpId, className: "field_help", children: help }),
+    error && /* @__PURE__ */ jsx("div", { id: errorId, className: "field_message", children: error })
   ] });
 };
-var Icon = ({ icon: IconComponent, ...props }) => {
-  const hasLabel = !!props["aria-label"];
-  return /* @__PURE__ */ jsx(
-    IconComponent,
-    {
-      "aria-hidden": hasLabel ? void 0 : true,
-      focusable: hasLabel ? void 0 : false,
-      ...props
-    }
-  );
-};
-Icon.displayName = "Icon";
-var ListItem = ({
-  overline,
+var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: iconSize.lg, "aria-hidden": "true" });
+var TextField = ({
+  id,
   label,
+  showLabel = true,
   supportingText,
-  metadata,
-  leadingElement,
-  trailingElement,
-  alignment,
-  disabled,
-  selected,
-  onClick,
+  error,
+  success,
+  identifier,
+  leadingIcon,
+  trailingIcon,
+  leadingAction,
+  trailingAction,
+  showPasswordToggle,
+  passwordToggleLabels,
+  clearable,
+  clearLabel: clearLabelProp,
+  type,
+  fullWidth,
+  size = "md",
+  variant = "outline",
   className,
+  onValueChange,
+  onChangeAction,
+  imeStrategy = "delayed",
+  value,
+  defaultValue,
+  transformValue,
+  ref,
   ...props
 }) => {
-  const isOneLine = !overline && !supportingText && !metadata;
-  const effectiveAlignment = alignment ?? (isOneLine ? "middle" : "top");
+  const t = useLocaleText();
+  const clearLabel = clearLabelProp ?? t("textField.clear");
+  const generatedId = useId();
+  const field = useFieldControl();
+  const inputId = id ?? field?.inputId ?? generatedId;
+  const helperId = supportingText ? `${inputId}-help` : void 0;
+  const describedBy = field?.describedBy ?? helperId;
+  const isControlled = value !== void 0;
+  const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
+  const [innerValue, setInnerValue] = useState(() => applyTransform(value ?? defaultValue ?? ""));
+  const isComposingRef = useRef(false);
+  const lastEmittedValueRef = useRef(innerValue);
+  const [prevValue, setPrevValue] = useState(value);
+  if (isControlled && value !== prevValue && !isComposingRef.current) {
+    setPrevValue(value);
+    const nextValue = applyTransform(value ?? "");
+    setInnerValue(nextValue);
+    lastEmittedValueRef.current = nextValue;
+  }
+  const emit = useCallback(
+    (nextValue) => {
+      setInnerValue(nextValue);
+      if (nextValue !== lastEmittedValueRef.current) {
+        lastEmittedValueRef.current = nextValue;
+        (onValueChange ?? onChangeAction)?.(nextValue);
+      }
+    },
+    [onValueChange, onChangeAction]
+  );
+  const handleClear = useCallback(() => {
+    emit("");
+  }, [emit]);
+  const [passwordRevealed, setPasswordRevealed] = useState(false);
+  const togglePassword = useCallback(() => {
+    setPasswordRevealed((revealed) => !revealed);
+  }, []);
+  let resolvedType = type;
+  if (showPasswordToggle) {
+    resolvedType = passwordRevealed ? "text" : type ?? "password";
+  }
+  const isError = !!error || !!field?.invalid;
+  const isSuccess = !!success && !isError;
   const rootClassName = cn(
-    "list_item",
-    `list_item_align_${effectiveAlignment}`,
-    disabled && "list_item_disabled",
-    selected && "list_item_selected",
-    onClick && "list_item_interactive",
+    "text_field",
+    `text_field_variant_${variant}`,
+    size === "sm" && "text_field_size_sm",
+    size === "lg" && "text_field_size_lg",
+    fullWidth && "text_field_full_width",
+    isError && "text_field_error",
+    isSuccess && "text_field_success",
+    props.disabled && "text_field_disabled",
     className
   );
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: optional interactive list item - role=button + tabIndex set conditionally based on onClick
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: rootClassName,
-        onClick: disabled ? void 0 : onClick,
-        onKeyDown: (e) => {
-          if (disabled || !onClick) return;
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            e.currentTarget.click();
-          }
-        },
-        role: onClick ? "button" : void 0,
-        tabIndex: onClick && !disabled ? 0 : void 0,
-        "aria-disabled": disabled || void 0,
-        "aria-pressed": onClick && selected !== void 0 ? selected : void 0,
-        ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "list_item_state_layer", children: [
-          leadingElement && /* @__PURE__ */ jsx("div", { className: "list_item_leading", children: leadingElement }),
-          /* @__PURE__ */ jsxs("div", { className: "list_item_content", children: [
-            overline && /* @__PURE__ */ jsx("div", { className: "list_item_overline", children: overline }),
-            /* @__PURE__ */ jsx("div", { className: "list_item_label", children: label }),
-            supportingText && /* @__PURE__ */ jsx("div", { className: "list_item_supporting", children: supportingText }),
-            metadata && /* @__PURE__ */ jsx("div", { className: "list_item_metadata", children: metadata })
-          ] }),
-          trailingElement && /* @__PURE__ */ jsx("div", { className: "list_item_trailing", children: trailingElement })
-        ] })
-      }
-    )
-  );
+  const passwordToggleLabel = passwordRevealed ? passwordToggleLabels?.hide ?? t("textField.passwordHide") : passwordToggleLabels?.show ?? t("textField.passwordShow");
+  const resolvedTrailing = showPasswordToggle ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: togglePassword,
+      "aria-label": passwordToggleLabel,
+      disabled: props.disabled,
+      children: passwordRevealed ? /* @__PURE__ */ jsx(EyeOff, { size: iconSize.lg, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { size: iconSize.lg, "aria-hidden": "true" })
+    }
+  ) }) : clearable && innerValue ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "text_field_clear",
+      onClick: handleClear,
+      "aria-label": clearLabel,
+      disabled: props.disabled,
+      children: /* @__PURE__ */ jsx(ClearIcon, {})
+    }
+  ) : trailingAction ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: trailingAction }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
+  const resolvedLeading = leadingAction ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: leadingAction }) : leadingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+    label && showLabel && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text_field_label", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "text_field_container", children: /* @__PURE__ */ jsxs("div", { className: "text_field_inner", children: [
+      resolvedLeading,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "text_field_input_wrap",
+            resolvedTrailing && "text_field_input_wrap_no_pad_right"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              ref,
+              className: cn("text_field_input", identifier && "text_field_input_identifier"),
+              "aria-invalid": isError,
+              "aria-describedby": describedBy,
+              "aria-required": field?.required || void 0,
+              "aria-label": !showLabel ? label : void 0,
+              ...props,
+              type: resolvedType,
+              value: innerValue,
+              onCompositionStart: () => {
+                isComposingRef.current = true;
+              },
+              onCompositionEnd: (event) => {
+                isComposingRef.current = false;
+                emit(applyTransform(event.currentTarget.value));
+              },
+              onChange: (event) => {
+                const rawValue = event.target.value;
+                if (isComposingRef.current) {
+                  setInnerValue(rawValue);
+                  if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
+                    lastEmittedValueRef.current = rawValue;
+                    (onValueChange ?? onChangeAction)?.(rawValue);
+                  }
+                  return;
+                }
+                emit(applyTransform(rawValue));
+              }
+            }
+          )
+        }
+      ),
+      resolvedTrailing
+    ] }) }),
+    supportingText && /* @__PURE__ */ jsx("div", { id: helperId, className: "text_field_helper", children: supportingText })
+  ] });
 };
-var MediaCard = ({
-  image,
-  imagePosition = "top",
-  aspectRatio,
-  heading,
-  headingAs: HeadingTag = "h3",
-  eyebrow,
-  shadow = "sm",
-  bordered = false,
-  clickable = false,
-  meta,
-  children,
-  className,
-  ...props
-}) => {
-  const cardClassName = cn(
-    "media_card",
-    `media_card_image_${imagePosition}`,
-    `media_card_shadow_${shadow}`,
-    bordered && "media_card_bordered",
-    clickable && "media_card_clickable",
+TextField.displayName = "TextField";
+var Button = (props) => {
+  const {
+    variant = "filled",
+    size = "md",
+    leadingIcon,
+    trailingIcon,
+    fullWidth = false,
+    radius: radius2,
+    danger = false,
+    disabled = false,
+    as,
+    className,
+    children,
+    ref,
+    ...rest
+  } = props;
+  const buttonClassName = cn(
+    "button",
+    `button_variant_${variant}`,
+    `button_size_${size}`,
+    fullWidth && "button_full_width",
+    radius2 && `button_radius_${radius2}`,
+    danger && "button_danger",
+    // anchor 엔 native :disabled 가 안 먹으므로 클래스로 비활성 스타일 적용 (button 도 무해)
+    disabled && "button_disabled",
     className
   );
-  const isOverlay = imagePosition === "overlay";
-  const cardStyle = isOverlay && aspectRatio ? { aspectRatio } : void 0;
-  const wrapStyle = !isOverlay && aspectRatio ? { aspectRatio } : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: cardClassName, style: cardStyle, ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "media_card_image_wrap", style: wrapStyle, children: [
-      /* @__PURE__ */ jsx("img", { className: "media_card_image", src: image.src, alt: image.alt, loading: "lazy" }),
-      isOverlay && /* @__PURE__ */ jsx("div", { className: "media_card_overlay", "aria-hidden": "true" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "media_card_body", children: [
-      eyebrow && /* @__PURE__ */ jsx("div", { className: "media_card_eyebrow", children: eyebrow }),
-      heading && /* @__PURE__ */ jsx(HeadingTag, { className: "media_card_heading", children: heading }),
-      children && /* @__PURE__ */ jsx("div", { className: "media_card_content", children }),
-      meta && /* @__PURE__ */ jsx("div", { className: "media_card_meta", children: meta })
-    ] })
+  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    leadingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: leadingIcon }),
+    children && /* @__PURE__ */ jsx("span", { className: "button_label", children }),
+    trailingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: trailingIcon })
   ] });
+  const anchorRest = rest;
+  const Tag = as ?? (anchorRest.href != null ? "a" : "button");
+  if (Tag === "button") {
+    const {
+      type = "button",
+      href: _href,
+      ...buttonRest
+    } = rest;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        disabled,
+        className: buttonClassName,
+        ...buttonRest,
+        children: content
+      }
+    );
+  }
+  const { onClick, tabIndex, ...tagProps } = anchorRest;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...tagProps,
+      ref,
+      className: buttonClassName,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : tabIndex,
+      onClick: disabled ? (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      } : onClick,
+      children: content
+    }
+  );
 };
-var Prose = ({ size = "md", className, children, ref, ...props }) => {
-  const rootRef = React11.useRef(null);
-  React11.useImperativeHandle(ref, () => rootRef.current, []);
-  useSafeLayoutEffect(() => {
-    const root = rootRef.current;
-    if (!root) return;
-    const targets = Array.from(root.querySelectorAll("pre, table"));
-    const sync = () => {
-      for (const el of targets) {
-        if (el.scrollWidth > el.clientWidth) el.setAttribute("tabindex", "0");
-        else el.removeAttribute("tabindex");
+var range = (start, end) => {
+  const out = [];
+  for (let i = start; i <= end; i += 1) out.push(i);
+  return out;
+};
+var getPaginationItems = (page, totalPages) => {
+  if (totalPages <= 7) return range(1, totalPages);
+  const items = [];
+  const last = totalPages;
+  const sibling = 2;
+  if (page <= sibling + 2) {
+    for (const p of range(1, sibling + 3)) items.push(p);
+    items.push("ellipsis");
+    items.push(last);
+    return items;
+  }
+  if (page >= last - sibling - 1) {
+    items.push(1);
+    items.push("ellipsis");
+    for (const p of range(last - sibling - 2, last)) items.push(p);
+    return items;
+  }
+  items.push(1);
+  items.push("ellipsis");
+  for (const p of range(page - sibling, page + sibling)) items.push(p);
+  items.push("ellipsis");
+  items.push(last);
+  return items;
+};
+var Pagination = ({
+  page,
+  totalPages,
+  onPageChange,
+  onChange,
+  prevLabel: prevLabelProp,
+  nextLabel: nextLabelProp,
+  navLabel: navLabelProp
+}) => {
+  const t = useLocaleText();
+  const prevLabel = prevLabelProp ?? t("pagination.prev");
+  const nextLabel = nextLabelProp ?? t("pagination.next");
+  const navLabel = navLabelProp ?? t("pagination.label");
+  const emit = onPageChange ?? onChange;
+  const prevDisabled = page <= 1;
+  const nextDisabled = page >= totalPages;
+  const items = React11.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": navLabel, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "pagination_item",
+        onClick: () => emit?.(page - 1),
+        disabled: prevDisabled,
+        "aria-label": prevLabel,
+        children: "\u2039"
       }
-    };
-    sync();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(sync);
-    observer.observe(root);
-    for (const el of targets) observer.observe(el);
-    return () => observer.disconnect();
-  }, [children]);
-  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: cn("prose", `prose_size_${size}`, className), ...props, children });
+    ),
+    /* @__PURE__ */ jsx("ul", { className: "pagination_pages", children: items.map((it, idx) => {
+      if (it === "ellipsis") {
+        const prev = items[idx - 1];
+        const next = items[idx + 1];
+        return /* @__PURE__ */ jsx("li", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${prev}-${next}`);
+      }
+      const isActive = it === page;
+      const buttonClassName = cn("pagination_page_button", { pagination_active: isActive });
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: buttonClassName,
+          onClick: () => emit?.(it),
+          "aria-current": isActive ? "page" : void 0,
+          children: it
+        }
+      ) }, it);
+    }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "pagination_item",
+        onClick: () => emit?.(page + 1),
+        disabled: nextDisabled,
+        "aria-label": nextLabel,
+        children: "\u203A"
+      }
+    )
+  ] });
 };
-Prose.displayName = "Prose";
 var Skeleton = ({
   variant = "text",
   width,
@@ -2496,6 +3108,7 @@ var Checkbox = ({
     props.disabled && "checkbox_disabled",
     className
   );
+  const field = useFieldControl();
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -2504,6 +3117,9 @@ var Checkbox = ({
         ref: inputRef,
         type: "checkbox",
         className: "checkbox_input",
+        id: field?.inputId ?? props.id,
+        "aria-describedby": field?.describedBy ?? props["aria-describedby"],
+        "aria-required": field?.required || void 0,
         "aria-invalid": error || void 0
       }
     ),
@@ -2516,7 +3132,7 @@ var Table = ({
   columns,
   data,
   keyExtractor,
-  emptyMessage = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
+  emptyMessage: emptyMessageProp,
   isLoading = false,
   skeletonRows = 5,
   size = "md",
@@ -2525,16 +3141,21 @@ var Table = ({
   ariaLabel,
   className,
   onRowClick,
-  rowClickHint = "\uD074\uB9AD \uAC00\uB2A5\uD55C \uD589",
+  rowClickHint: rowClickHintProp,
   sort,
   onSortChange,
-  selectAllAriaLabel = "\uC804\uCCB4 \uC120\uD0DD",
-  selectRowAriaLabel = (index) => `${index + 1}\uBC88\uC9F8 \uD589 \uC120\uD0DD`,
+  selectAllAriaLabel: selectAllAriaLabelProp,
+  selectRowAriaLabel: selectRowAriaLabelProp,
   selectable = false,
   rowKey,
   selectedKeys,
   onSelectionChange
 }) => {
+  const t = useLocaleText();
+  const rowClickHint = rowClickHintProp ?? t("table.rowClickHint");
+  const emptyMessage = emptyMessageProp === void 0 ? t("table.empty") : emptyMessageProp;
+  const selectAllAriaLabel = selectAllAriaLabelProp ?? t("table.selectAll");
+  const selectRowAriaLabel = selectRowAriaLabelProp ?? ((index) => t("table.selectRow", { index: index + 1 }));
   const wrapperClassName = cn(
     "table_wrapper",
     `table_size_${size}`,
@@ -2702,10 +3323,312 @@ var Table = ({
         );
       }) })
     ] }),
-    onRowClick && rowClickHint && /* @__PURE__ */ jsx("span", { id: rowClickHintId, className: "table_sr_only", children: rowClickHint }),
-    isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
+    onRowClick && rowClickHint && /* @__PURE__ */ jsx("span", { id: rowClickHintId, className: "table_sr_only", children: rowClickHint }),
+    isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
+  ] });
+};
+var DataView = ({
+  query,
+  columns,
+  rowKey,
+  toolbar,
+  selectionActions,
+  pagination,
+  empty,
+  sort,
+  onSortChange,
+  onRowClick,
+  ariaLabel,
+  selectionSummary: selectionSummaryProp,
+  clearSelectionLabel: clearSelectionLabelProp,
+  errorTitle: errorTitleProp,
+  retryLabel: retryLabelProp,
+  className,
+  ...props
+}) => {
+  const t = useLocaleText();
+  const selectionSummary = selectionSummaryProp ?? ((count) => t("dataView.selectionSummary", { count }));
+  const clearSelectionLabel = clearSelectionLabelProp ?? t("dataView.clearSelection");
+  const errorTitle = errorTitleProp ?? t("dataView.errorTitle");
+  const retryLabel = retryLabelProp ?? t("dataView.retry");
+  const searchLabel = toolbar?.searchPlaceholder ?? t("dataView.search");
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const selectionBarId = useId();
+  const selectable = !!selectionActions?.length;
+  const rows = query.data ?? [];
+  const showEmpty = !query.isLoading && !query.error && rows.length === 0;
+  if (query.error) {
+    return /* @__PURE__ */ jsx("div", { className: cn("data_view", className), ...props, children: /* @__PURE__ */ jsx(
+      ErrorState,
+      {
+        variant: "widget",
+        title: errorTitle,
+        action: query.refetch ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: query.refetch, children: retryLabel }) : void 0
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("data_view", className), ...props, children: [
+    toolbar && /* @__PURE__ */ jsxs("div", { className: "data_view_toolbar", children: [
+      toolbar.search && /* @__PURE__ */ jsx("div", { className: "data_view_search", children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          size: "sm",
+          type: "search",
+          value: toolbar.searchValue,
+          onValueChange: toolbar.onSearchChange,
+          placeholder: searchLabel,
+          "aria-label": searchLabel,
+          leadingIcon: /* @__PURE__ */ jsx(Search, { size: iconSize.sm })
+        }
+      ) }),
+      toolbar.filters && /* @__PURE__ */ jsx("div", { className: "data_view_filters", children: toolbar.filters })
+    ] }),
+    selectable && selectedKeys.length > 0 && // `role="status"` - 선택이 바뀔 때마다 스크린리더가 개수를 읽는다. 액션 줄이
+    // 시각적으로만 나타나면 키보드 사용자는 무엇이 가능해졌는지 알 수 없다.
+    /* @__PURE__ */ jsxs("div", { id: selectionBarId, className: "data_view_selection", role: "status", children: [
+      /* @__PURE__ */ jsx("span", { className: "data_view_selection_count", children: selectionSummary(selectedKeys.length) }),
+      /* @__PURE__ */ jsxs("div", { className: "data_view_selection_actions", children: [
+        selectionActions?.map((action) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            danger: action.danger,
+            onClick: () => action.onRun(selectedKeys),
+            children: action.label
+          },
+          action.label
+        )),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "text", onClick: () => setSelectedKeys([]), children: clearSelectionLabel })
+      ] })
+    ] }),
+    showEmpty ? empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataView.empty") }) : selectable ? (
+      // 판별 union 이라 조건부 스프레드로는 좁혀지지 않는다 - 분기를 명시한다.
+      /* @__PURE__ */ jsx(
+        Table,
+        {
+          columns,
+          data: rows,
+          keyExtractor: rowKey,
+          isLoading: query.isLoading,
+          sort,
+          onSortChange,
+          onRowClick,
+          ariaLabel,
+          selectable: true,
+          rowKey,
+          selectedKeys,
+          onSelectionChange: setSelectedKeys
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
+      Table,
+      {
+        columns,
+        data: rows,
+        keyExtractor: rowKey,
+        isLoading: query.isLoading,
+        sort,
+        onSortChange,
+        onRowClick,
+        ariaLabel
+      }
+    ),
+    pagination && pagination.totalPages > 1 && /* @__PURE__ */ jsx("div", { className: "data_view_pagination", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        page: pagination.page,
+        totalPages: pagination.totalPages,
+        onPageChange: pagination.onPageChange
+      }
+    ) })
+  ] });
+};
+var Divider = ({ weight = "standard", className, ...props }) => {
+  const dividerClassName = cn("divider", `divider_weight_${weight}`, className);
+  return /* @__PURE__ */ jsx("hr", { className: dividerClassName, ...props });
+};
+var HeroActionButton = ({
+  action,
+  variant
+}) => action.href ? /* @__PURE__ */ jsx(Button, { as: "a", href: action.href, size: "lg", variant, onClick: action.onClick, children: action.label }) : /* @__PURE__ */ jsx(Button, { size: "lg", variant, onClick: action.onClick, children: action.label });
+var Hero = ({
+  height = "md",
+  align = "left",
+  backgroundImage,
+  backgroundColor,
+  overlay,
+  title,
+  subtitle,
+  eyebrow,
+  textColor = "auto",
+  primaryAction,
+  secondaryAction,
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const resolvedOverlay = overlay === true ? "dark" : overlay;
+  const isDarkOverlay = resolvedOverlay === "dark";
+  const resolvedTextColor = textColor === "auto" ? isDarkOverlay || backgroundImage && !resolvedOverlay ? "inverse" : "default" : textColor;
+  const heroClassName = cn(
+    "hero",
+    `hero_height_${height}`,
+    `hero_align_${align}`,
+    resolvedOverlay && `hero_overlay_${resolvedOverlay}`,
+    `hero_text_${resolvedTextColor}`,
+    className
+  );
+  const inlineStyle = { ...style };
+  if (backgroundImage) inlineStyle.backgroundImage = `url("${backgroundImage}")`;
+  if (backgroundColor) inlineStyle.backgroundColor = backgroundColor;
+  return /* @__PURE__ */ jsxs("section", { className: heroClassName, style: inlineStyle, ...props, children: [
+    resolvedOverlay && /* @__PURE__ */ jsx("div", { className: "hero_overlay", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: "hero_content", children: [
+      eyebrow && /* @__PURE__ */ jsx("div", { className: "hero_eyebrow", children: eyebrow }),
+      title && /* @__PURE__ */ jsx("h1", { className: "hero_title", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "hero_subtitle", children: subtitle }),
+      (primaryAction || secondaryAction || children) && /* @__PURE__ */ jsxs("div", { className: "hero_actions", children: [
+        primaryAction && /* @__PURE__ */ jsx(HeroActionButton, { action: primaryAction, variant: "filled" }),
+        secondaryAction && /* @__PURE__ */ jsx(HeroActionButton, { action: secondaryAction, variant: "outline" }),
+        children
+      ] })
+    ] })
+  ] });
+};
+var Icon = ({ icon: IconComponent, ...props }) => {
+  const hasLabel = !!props["aria-label"];
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      "aria-hidden": hasLabel ? void 0 : true,
+      focusable: hasLabel ? void 0 : false,
+      ...props
+    }
+  );
+};
+Icon.displayName = "Icon";
+var ListItem = ({
+  overline,
+  label,
+  supportingText,
+  metadata,
+  leadingElement,
+  trailingElement,
+  alignment,
+  disabled,
+  selected,
+  onClick,
+  className,
+  ...props
+}) => {
+  const isOneLine = !overline && !supportingText && !metadata;
+  const effectiveAlignment = alignment ?? (isOneLine ? "middle" : "top");
+  const rootClassName = cn(
+    "list_item",
+    `list_item_align_${effectiveAlignment}`,
+    disabled && "list_item_disabled",
+    selected && "list_item_selected",
+    onClick && "list_item_interactive",
+    className
+  );
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: optional interactive list item - role=button + tabIndex set conditionally based on onClick
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: rootClassName,
+        onClick: disabled ? void 0 : onClick,
+        onKeyDown: (e) => {
+          if (disabled || !onClick) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        },
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick && !disabled ? 0 : void 0,
+        "aria-disabled": disabled || void 0,
+        "aria-pressed": onClick && selected !== void 0 ? selected : void 0,
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "list_item_state_layer", children: [
+          leadingElement && /* @__PURE__ */ jsx("div", { className: "list_item_leading", children: leadingElement }),
+          /* @__PURE__ */ jsxs("div", { className: "list_item_content", children: [
+            overline && /* @__PURE__ */ jsx("div", { className: "list_item_overline", children: overline }),
+            /* @__PURE__ */ jsx("div", { className: "list_item_label", children: label }),
+            supportingText && /* @__PURE__ */ jsx("div", { className: "list_item_supporting", children: supportingText }),
+            metadata && /* @__PURE__ */ jsx("div", { className: "list_item_metadata", children: metadata })
+          ] }),
+          trailingElement && /* @__PURE__ */ jsx("div", { className: "list_item_trailing", children: trailingElement })
+        ] })
+      }
+    )
+  );
+};
+var MediaCard = ({
+  image,
+  imagePosition = "top",
+  aspectRatio,
+  heading,
+  headingAs: HeadingTag = "h3",
+  eyebrow,
+  shadow = "sm",
+  bordered = false,
+  clickable = false,
+  meta,
+  children,
+  className,
+  ...props
+}) => {
+  const cardClassName = cn(
+    "media_card",
+    `media_card_image_${imagePosition}`,
+    `media_card_shadow_${shadow}`,
+    bordered && "media_card_bordered",
+    clickable && "media_card_clickable",
+    className
+  );
+  const isOverlay = imagePosition === "overlay";
+  const cardStyle = isOverlay && aspectRatio ? { aspectRatio } : void 0;
+  const wrapStyle = !isOverlay && aspectRatio ? { aspectRatio } : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cardClassName, style: cardStyle, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "media_card_image_wrap", style: wrapStyle, children: [
+      /* @__PURE__ */ jsx("img", { className: "media_card_image", src: image.src, alt: image.alt, loading: "lazy" }),
+      isOverlay && /* @__PURE__ */ jsx("div", { className: "media_card_overlay", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "media_card_body", children: [
+      eyebrow && /* @__PURE__ */ jsx("div", { className: "media_card_eyebrow", children: eyebrow }),
+      heading && /* @__PURE__ */ jsx(HeadingTag, { className: "media_card_heading", children: heading }),
+      children && /* @__PURE__ */ jsx("div", { className: "media_card_content", children }),
+      meta && /* @__PURE__ */ jsx("div", { className: "media_card_meta", children: meta })
+    ] })
   ] });
 };
+var Prose = ({ size = "md", className, children, ref, ...props }) => {
+  const rootRef = React11.useRef(null);
+  React11.useImperativeHandle(ref, () => rootRef.current, []);
+  useSafeLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const targets = Array.from(root.querySelectorAll("pre, table"));
+    const sync = () => {
+      for (const el of targets) {
+        if (el.scrollWidth > el.clientWidth) el.setAttribute("tabindex", "0");
+        else el.removeAttribute("tabindex");
+      }
+    };
+    sync();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(sync);
+    observer.observe(root);
+    for (const el of targets) observer.observe(el);
+    return () => observer.disconnect();
+  }, [children]);
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: cn("prose", `prose_size_${size}`, className), ...props, children });
+};
+Prose.displayName = "Prose";
 var ICONS = {
   info: /* @__PURE__ */ jsx(Info, { size: iconSize.lg, "aria-hidden": "true" }),
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: iconSize.lg, "aria-hidden": "true" }),
@@ -2756,8 +3679,8 @@ var AlertModal = ({
   variant = "info",
   title,
   message,
-  confirmText = "\uD655\uC778",
-  cancelText = "\uCDE8\uC18C",
+  confirmText: confirmTextProp,
+  cancelText: cancelTextProp,
   showCancel = false,
   destructive = false,
   actionsAlign = "right",
@@ -2767,6 +3690,9 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
+  const t = useLocaleText();
+  const confirmText = confirmTextProp ?? t("alert.confirm");
+  const cancelText = cancelTextProp ?? t("alert.cancel");
   const dismiss = onCancel ?? onClose;
   const panelRef = React11.useRef(null);
   const titleId = React11.useId();
@@ -2886,7 +3812,9 @@ var LinearProgress = ({
     }
   );
 };
-var Spinner = ({ size = 24, ariaLabel = "\uB85C\uB529 \uC911" }) => {
+var Spinner = ({ size = 24, ariaLabel: ariaLabelProp }) => {
+  const t = useLocaleText();
+  const ariaLabel = ariaLabelProp ?? t("spinner.label");
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -2964,9 +3892,12 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
 var ToastProvider = ({
   children,
   maxCount = 5,
-  closeAriaLabel = "\uB2EB\uAE30",
-  regionLabel = "\uC54C\uB9BC"
+  closeAriaLabel: closeAriaLabelProp,
+  regionLabel: regionLabelProp
 }) => {
+  const t = useLocaleText();
+  const closeAriaLabel = closeAriaLabelProp ?? t("toast.close");
+  const regionLabel = regionLabelProp ?? t("toast.region");
   const [toasts, setToasts] = React11.useState([]);
   const isMounted = useIsMounted();
   const addToast = React11.useCallback(
@@ -2977,7 +3908,7 @@ var ToastProvider = ({
     [maxCount]
   );
   const removeToast = React11.useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
+    setToasts((prev) => prev.filter((t2) => t2.id !== id));
   }, []);
   const contextValue = React11.useMemo(() => ({ addToast }), [addToast]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
@@ -3032,8 +3963,10 @@ var TopLoading = ({
   color,
   height = 3,
   isLoading = true,
-  ariaLabel = "\uD398\uC774\uC9C0 \uB85C\uB529 \uC911"
+  ariaLabel: ariaLabelProp
 }) => {
+  const t = useLocaleText();
+  const ariaLabel = ariaLabelProp ?? t("topLoading.label");
   if (!isLoading) return null;
   const isIndeterminate = progress === void 0;
   return /* @__PURE__ */ jsx(
@@ -3059,26 +3992,212 @@ var TopLoading = ({
     }
   );
 };
+var Combobox = ({
+  value = null,
+  onValueChange,
+  onSearch,
+  defaultOptions = [],
+  debounceMs = 250,
+  placeholder: placeholderProp,
+  emptyMessage: emptyMessageProp,
+  idleMessage: idleMessageProp,
+  size = "md",
+  disabled = false,
+  fullWidth = false,
+  renderOption,
+  ariaLabel,
+  loadingLabel: loadingLabelProp,
+  className,
+  ...props
+}) => {
+  const t = useLocaleText();
+  const placeholder = placeholderProp ?? t("combobox.placeholder");
+  const emptyMessage = emptyMessageProp ?? t("combobox.empty");
+  const idleMessage = idleMessageProp ?? t("combobox.idle");
+  const loadingLabel = loadingLabelProp ?? t("combobox.loading");
+  const generatedId = useId();
+  const field = useFieldControl();
+  const inputId = field?.inputId ?? generatedId;
+  const listId = `${inputId}-listbox`;
+  const [query, setQuery] = useState("");
+  const [options, setOptions] = useState(defaultOptions);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const requestSeq = useRef(0);
+  const defaultOptionsRef = useRef(defaultOptions);
+  useEffect(() => {
+    defaultOptionsRef.current = defaultOptions;
+  }, [defaultOptions]);
+  const closeRef = useRef(() => {
+  });
+  const commit = useCallback(
+    (option) => {
+      onValueChange?.(option);
+      setQuery("");
+      closeRef.current();
+    },
+    [onValueChange]
+  );
+  const popup = useListboxPopup({
+    items: options,
+    onCommit: commit,
+    disabled,
+    // 상시 컨트롤이 입력창이라 포커스를 되돌릴 필요가 없다. triggerRef 는 장식용
+    // chevron 버튼(tabIndex=-1)에 붙어 있어, 켜면 Escape 가 포커스를 그 숨은 버튼으로 던진다.
+    returnFocusOnClose: false
+  });
+  const { isOpen, setIsOpen, close, activeIndex, setActiveIndex } = popup;
+  closeRef.current = close;
+  useEffect(() => {
+    if (!isOpen) return;
+    if (query === "") {
+      requestSeq.current++;
+      setOptions(defaultOptionsRef.current);
+      setHasSearched(false);
+      setIsLoading(false);
+      return;
+    }
+    const seq = ++requestSeq.current;
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      onSearch(query).then((result) => {
+        if (seq !== requestSeq.current) return;
+        setOptions(result);
+        setHasSearched(true);
+      }).catch(() => {
+        if (seq !== requestSeq.current) return;
+        setOptions([]);
+        setHasSearched(true);
+      }).finally(() => {
+        if (seq !== requestSeq.current) return;
+        setIsLoading(false);
+      });
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [query, isOpen, debounceMs, onSearch]);
+  const rootClassName = cn(
+    "combobox",
+    `combobox_size_${size}`,
+    { combobox_full_width: fullWidth, combobox_disabled: disabled },
+    className
+  );
+  const showIdle = !isLoading && !hasSearched && options.length === 0;
+  const showEmpty = !isLoading && hasSearched && options.length === 0;
+  const hasList = !showIdle && !showEmpty;
+  const panelStyle = useSpringPresence({
+    visible: isOpen,
+    from: popup.dropUp ? "translateY(4px)" : "translateY(-4px)"
+  });
+  return /* @__PURE__ */ jsxs("div", { ref: popup.wrapperRef, className: rootClassName, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "combobox_control", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: inputId,
+          className: "combobox_input",
+          role: "combobox",
+          type: "text",
+          autoComplete: "off",
+          disabled,
+          value: isOpen ? query : value?.label ?? "",
+          placeholder: value ? value.label : placeholder,
+          "aria-expanded": isOpen,
+          "aria-controls": isOpen && hasList ? listId : void 0,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": isOpen && activeIndex >= 0 && options[activeIndex] ? `${listId}-${options[activeIndex].value}` : void 0,
+          "aria-labelledby": field?.labelId,
+          "aria-label": field?.labelId ? void 0 : ariaLabel,
+          "aria-describedby": field?.describedBy,
+          "aria-invalid": field?.invalid || void 0,
+          "aria-required": field?.required || void 0,
+          onChange: (event) => {
+            setQuery(event.target.value);
+            if (!isOpen) setIsOpen(true);
+          },
+          onFocus: () => !disabled && setIsOpen(true),
+          onKeyDown: popup.onInputKeyDown
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx("span", { className: "combobox_spinner", children: /* @__PURE__ */ jsx(Spinner, { size: iconSize.sm, ariaLabel: loadingLabel }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          ref: popup.triggerRef,
+          className: "combobox_toggle",
+          tabIndex: -1,
+          disabled,
+          "aria-hidden": "true",
+          onClick: () => isOpen ? close() : setIsOpen(true),
+          children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize.lg })
+        }
+      )
+    ] }),
+    isOpen && /* @__PURE__ */ jsx(
+      animated.div,
+      {
+        className: cn("combobox_panel", { combobox_panel_up: popup.dropUp }),
+        style: panelStyle,
+        children: !hasList ? /* @__PURE__ */ jsx("p", { className: "combobox_message", role: "status", children: showIdle ? idleMessage : emptyMessage }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: popup.listRef,
+            id: listId,
+            className: "combobox_list",
+            role: "listbox",
+            children: options.map((option, index) => (
+              /* biome-ignore lint/a11y/useKeyWithClickEvents: 키보드는 입력의 onKeyDown 이 담당한다 - option 은 aria-activedescendant 로 가리키는 비포커스 요소다 (APG Combobox) */
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: `${listId}-${option.value}`,
+                  role: "option",
+                  tabIndex: -1,
+                  "aria-selected": value?.value === option.value,
+                  "aria-disabled": option.disabled || void 0,
+                  className: cn("combobox_option", {
+                    is_active: index === activeIndex,
+                    is_disabled: option.disabled
+                  }),
+                  onMouseEnter: () => !option.disabled && setActiveIndex(index),
+                  onClick: () => !option.disabled && commit(option),
+                  children: renderOption ? renderOption(option) : option.label
+                },
+                option.value
+              )
+            ))
+          }
+        )
+      }
+    )
+  ] });
+};
 var normalizeForSearch = (s) => s.toLowerCase().replace(/\s+/g, "");
 var Dropdown = (props) => {
+  const t = useLocaleText();
   const {
     id,
     label,
-    placeholder = "\uC120\uD0DD\u2026",
+    placeholder: placeholderProp,
     options,
     disabled,
     size = "md",
     variant = "outline",
     className,
     searchable = false,
-    searchPlaceholder = "\uAC80\uC0C9\u2026",
-    emptyText = "\uACB0\uACFC \uC5C6\uC74C",
-    selectedSummary = (count) => `${count}\uAC1C \uC120\uD0DD`,
+    searchPlaceholder: searchPlaceholderProp,
+    emptyText: emptyTextProp,
+    selectedSummary: selectedSummaryProp,
     name
   } = props;
+  const placeholder = placeholderProp ?? t("dropdown.placeholder");
+  const searchPlaceholder = searchPlaceholderProp ?? t("dropdown.searchPlaceholder");
+  const emptyText = emptyTextProp ?? t("dropdown.empty");
+  const selectedSummary = selectedSummaryProp ?? ((count) => t("dropdown.selectedSummary", { count }));
   const multiple = props.multiple === true;
   const internalId = useId();
-  const dropdownId = id ?? internalId;
+  const field = useFieldControl();
+  const dropdownId = id ?? field?.inputId ?? internalId;
   const isControlled = props.value !== void 0;
   const [internalSingle, setInternalSingle] = useState(
     () => props.multiple === true ? null : props.defaultValue ?? null
@@ -3086,14 +4205,9 @@ var Dropdown = (props) => {
   const [internalMulti, setInternalMulti] = useState(
     () => props.multiple === true ? props.defaultValue ?? [] : []
   );
-  const [isOpen, setIsOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const [dropUp, setDropUp] = useState(false);
   const [searchText, setSearchText] = useState("");
   const [committedQuery, setCommittedQuery] = useState("");
   const isComposingRef = useRef(false);
-  const wrapperRef = useRef(null);
-  const controlRef = useRef(null);
   const searchRef = useRef(null);
   const selectedValues = useMemo(() => {
     if (multiple) {
@@ -3131,129 +4245,41 @@ var Dropdown = (props) => {
     },
     [selectedValues, options, isControlled, props.multiple, props.onValueChange, props.onChange]
   );
-  const closePanel = useCallback(() => {
-    setIsOpen(false);
-    if (searchable) controlRef.current?.focus();
-  }, [searchable]);
   const selectOption = useCallback(
-    (opt) => {
-      if (opt.disabled) return;
-      if (multiple) {
-        toggleMultiple(opt);
-      } else {
-        selectSingle(opt.value);
-        closePanel();
-      }
-    },
-    [multiple, toggleMultiple, selectSingle, closePanel]
-  );
-  useEffect(() => {
-    const handleOutsideClick = (e) => {
-      if (!wrapperRef.current?.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, []);
-  const moveActive = useCallback(
-    (dir) => {
-      if (visibleOptions.length === 0) return;
-      if (!isOpen) {
-        setIsOpen(true);
-        return;
-      }
-      let i = activeIndex;
-      if (i === -1) {
-        i = dir === 1 ? -1 : 0;
-      }
-      const len = visibleOptions.length;
-      for (let step = 0; step < len; step++) {
-        i = (i + dir + len) % len;
-        if (!visibleOptions[i].disabled) {
-          setActiveIndex(i);
-          break;
-        }
-      }
-    },
-    [visibleOptions, isOpen, activeIndex]
-  );
-  const commitActive = useCallback(() => {
-    if (activeIndex < 0 || activeIndex >= visibleOptions.length) return;
-    selectOption(visibleOptions[activeIndex]);
-  }, [activeIndex, visibleOptions, selectOption]);
-  const onControlKeyDown = (e) => {
-    if (disabled) return;
-    switch (e.key) {
-      case " ":
-      case "Enter":
-        e.preventDefault();
-        if (!isOpen) setIsOpen(true);
-        else commitActive();
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        moveActive(1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        moveActive(-1);
-        break;
-      case "Home":
-        e.preventDefault();
-        setIsOpen(true);
-        setActiveIndex(visibleOptions.findIndex((o) => !o.disabled));
-        break;
-      case "End":
-        e.preventDefault();
-        setIsOpen(true);
-        for (let i = visibleOptions.length - 1; i >= 0; i--) {
-          if (!visibleOptions[i].disabled) {
-            setActiveIndex(i);
-            break;
-          }
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        setIsOpen(false);
-        break;
-      case "Tab":
-        setIsOpen(false);
-        break;
-    }
-  };
-  const onSearchKeyDown = (e) => {
-    if (e.nativeEvent.isComposing) return;
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        moveActive(1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        moveActive(-1);
-        break;
-      case "Enter":
-        e.preventDefault();
-        commitActive();
-        break;
-      case "Escape":
-        e.preventDefault();
-        closePanel();
-        break;
-      case "Tab":
+    (opt) => {
+      if (opt.disabled) return;
+      if (multiple) {
+        toggleMultiple(opt);
+      } else {
+        selectSingle(opt.value);
         closePanel();
-        break;
-    }
-  };
-  useEffect(() => {
-    if (!isOpen) return;
-    const selectedIdx = visibleOptions.findIndex(
-      (o) => selectedValues.includes(o.value) && !o.disabled
-    );
-    setActiveIndex(selectedIdx >= 0 ? selectedIdx : visibleOptions.findIndex((o) => !o.disabled));
-  }, [isOpen, visibleOptions]);
+      }
+    },
+    // closePanel 은 아래 훅에서 오므로 선언 순서상 참조만 한다 (렌더마다 동일 참조).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: closePanel 은 훅 결과라 아래에서 정의된다
+    [multiple, toggleMultiple, selectSingle]
+  );
+  const {
+    isOpen,
+    setIsOpen,
+    dropUp,
+    activeIndex,
+    setActiveIndex,
+    wrapperRef,
+    triggerRef: controlRef,
+    listRef,
+    close: closePanel,
+    onTriggerKeyDown: onControlKeyDown,
+    onInputKeyDown: onSearchKeyDown
+  } = useListboxPopup({
+    items: visibleOptions,
+    onCommit: selectOption,
+    disabled,
+    // searchable 은 포커스가 검색 입력에 있으므로 닫을 때 트리거로 되돌린다.
+    returnFocusOnClose: searchable,
+    // 열릴 때는 선택된 항목을 활성으로. 없으면 훅이 첫 활성 항목을 고른다.
+    initialActiveIndex: (opts) => opts.findIndex((o) => selectedValues.includes(o.value) && !o.disabled)
+  });
   useEffect(() => {
     if (!isOpen) {
       setSearchText("");
@@ -3266,14 +4292,6 @@ var Dropdown = (props) => {
       searchRef.current?.focus();
     }
   }, [isOpen, searchable]);
-  useEffect(() => {
-    if (!isOpen || !controlRef.current) return;
-    const rect = controlRef.current.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    const MIN_BELOW = 120;
-    setDropUp(spaceBelow < MIN_BELOW && spaceAbove > spaceBelow);
-  }, [isOpen]);
   const currentOption = useMemo(
     () => multiple ? null : options.find((o) => o.value === selectedValues[0]) ?? null,
     [multiple, options, selectedValues]
@@ -3304,6 +4322,8 @@ var Dropdown = (props) => {
         className: cn("dropdown_control", { is_disabled: disabled }),
         "aria-haspopup": "listbox",
         "aria-expanded": isOpen,
+        "aria-describedby": field?.describedBy,
+        "aria-invalid": field?.invalid || void 0,
         "aria-controls": isOpen ? `${dropdownId}_listbox` : void 0,
         onClick: () => !disabled && setIsOpen((o) => !o),
         onKeyDown: onControlKeyDown,
@@ -3354,6 +4374,7 @@ var Dropdown = (props) => {
       /* @__PURE__ */ jsx(
         "div",
         {
+          ref: listRef,
           id: `${dropdownId}_listbox`,
           role: "listbox",
           className: "dropdown_options",
@@ -3399,7 +4420,7 @@ var Dropdown = (props) => {
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
 var normalizeWidth = (v) => typeof v === "number" ? `${v}px` : v;
-var range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+var range2 = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
 var DatePicker = ({
   label,
   value,
@@ -3413,12 +4434,19 @@ var DatePicker = ({
   disabled,
   fullWidth = true,
   width,
-  yearLabel = "\uB144",
-  monthLabel = "\uC6D4",
-  dayLabel = "\uC77C",
-  minDateSrFormat = "\uCD5C\uC18C \uB0A0\uC9DC: {date}",
-  selectableRangeUntilTodaySrText = "\uC624\uB298\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5"
+  yearLabel: yearLabelProp,
+  monthLabel: monthLabelProp,
+  dayLabel: dayLabelProp,
+  minDateSrFormat: minDateSrFormatProp,
+  selectableRangeUntilTodaySrText: selectableRangeUntilTodaySrTextProp
 }) => {
+  const t = useLocaleText();
+  const yearLabel = yearLabelProp ?? t("datePicker.year");
+  const monthLabel = monthLabelProp ?? t("datePicker.month");
+  const dayLabel = dayLabelProp ?? t("datePicker.day");
+  const minDateSrFormat = minDateSrFormatProp ?? t("datePicker.minDateSr");
+  const selectableRangeUntilTodaySrText = selectableRangeUntilTodaySrTextProp ?? t("datePicker.rangeUntilTodaySr");
+  const field = useFieldControl();
   const groupId = React11.useId();
   const constraintId = React11.useId();
   const { todayYear, todayMonth, todayDay } = React11.useMemo(() => {
@@ -3467,22 +4495,23 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
+  const minYear = min.year > 0 ? Math.max(startYear, min.year) : startYear;
   const yearOptions = React11.useMemo(
-    () => range(startYear, maxYear).map((y) => ({
+    () => range2(minYear, Math.max(minYear, maxYear)).map((y) => ({
       value: String(y),
       label: String(y)
     })),
-    [startYear, maxYear]
+    [minYear, maxYear]
   );
   const monthOptions = React11.useMemo(
-    () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
+    () => range2(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
   const dayOptions = React11.useMemo(
-    () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
+    () => range2(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
@@ -3548,8 +4577,9 @@ var DatePicker = ({
       {
         className: "date_picker_fields",
         role: "group",
-        "aria-labelledby": label ? groupId : void 0,
-        "aria-describedby": constraintDesc ? constraintId : void 0,
+        "aria-labelledby": field?.labelId ?? (label ? groupId : void 0),
+        "aria-describedby": [field?.describedBy, constraintDesc ? constraintId : void 0].filter(Boolean).join(" ") || void 0,
+        "aria-invalid": field?.invalid || void 0,
         children: [
           /* @__PURE__ */ jsx(
             Dropdown,
@@ -3595,8 +4625,83 @@ var DatePicker = ({
     )
   ] });
 };
+var DateRangePicker = ({
+  value,
+  onValueChange,
+  startLabel: startLabelProp,
+  endLabel: endLabelProp,
+  startYear,
+  endYear,
+  minDate,
+  selectableRange = "all",
+  disabled,
+  fullWidth = true
+}) => {
+  const t = useLocaleText();
+  const startLabel = startLabelProp ?? t("dateRange.start");
+  const endLabel = endLabelProp ?? t("dateRange.end");
+  const field = useFieldControl();
+  const start = value?.start;
+  const end = value?.end;
+  const handleStartChange = (next) => {
+    onValueChange({ start: next, end: end && end < next ? void 0 : end });
+  };
+  const handleEndChange = (next) => {
+    onValueChange({ start, end: next });
+  };
+  const endMinDate = start ?? minDate;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("date_range_picker", {
+        date_range_picker_full_width: fullWidth,
+        date_range_picker_disabled: disabled
+      }),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "date_range_picker_fields",
+          role: "group",
+          "aria-labelledby": field?.labelId,
+          "aria-describedby": field?.describedBy,
+          "aria-invalid": field?.invalid || void 0,
+          children: [
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                label: startLabel,
+                value: start,
+                onValueChange: handleStartChange,
+                startYear,
+                endYear,
+                minDate,
+                selectableRange,
+                disabled,
+                fullWidth: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                label: endLabel,
+                value: end,
+                onValueChange: handleEndChange,
+                startYear,
+                endYear,
+                minDate: endMinDate,
+                selectableRange,
+                disabled: disabled || !start,
+                fullWidth: true
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 var FileInput = ({
-  label = "\uD30C\uC77C \uC120\uD0DD",
+  label: labelProp,
   onFiles,
   supportingText,
   preview = false,
@@ -3608,8 +4713,12 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React11.useId();
+  const t = useLocaleText();
+  const label = labelProp ?? t("fileInput.label");
+  const generatedInputId = React11.useId();
   const helperId = React11.useId();
+  const field = useFieldControl();
+  const inputId = field?.inputId ?? generatedInputId;
   const inputRef = React11.useRef(null);
   const [previewUrls, setPreviewUrls] = React11.useState([]);
   const previewUrlsRef = React11.useRef([]);
@@ -3679,7 +4788,8 @@ var FileInput = ({
         className: "file_input_control",
         disabled,
         accept: isPreviewVariant ? accept ?? "image/*" : accept,
-        "aria-describedby": supportingText ? helperId : void 0,
+        "aria-describedby": field?.describedBy ?? (supportingText ? helperId : void 0),
+        "aria-invalid": field?.invalid || void 0,
         onChange: handleChange
       }
     ),
@@ -3704,7 +4814,7 @@ var FileInput = ({
         type: "button",
         className: "file_input_preview_remove",
         onClick: handleRemove,
-        "aria-label": "\uC774\uBBF8\uC9C0 \uC81C\uAC70",
+        "aria-label": t("fileInput.removeImage"),
         children: /* @__PURE__ */ jsx(X, { size: iconSize.xs, "aria-hidden": "true" })
       }
     ),
@@ -3767,20 +4877,28 @@ function ImageCropper({
   onReady,
   onError,
   className,
-  label = "\uC774\uBBF8\uC9C0 \uC704\uCE58\uC640 \uBC30\uC728 \uC870\uC815",
-  hint = "\uB4DC\uB798\uADF8(\uB610\uB294 \uBC29\uD5A5\uD0A4)\uB85C \uC704\uCE58, \uD720\xB7\uC2AC\uB77C\uC774\uB354\uB85C \uBC30\uC728\uC744 \uB9DE\uCD94\uC138\uC694.",
-  zoomOutLabel = "\uCD95\uC18C",
-  zoomLabel = "\uBC30\uC728",
-  zoomInLabel = "\uD655\uB300",
-  noPanHint = "\uC774\uBBF8\uC9C0\uAC00 \uBDF0\uD3EC\uD2B8\uB97C \uB531 \uCC44\uC6CC \uC774\uB3D9 \uC5EC\uC720\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  label: labelProp,
+  hint: hintProp,
+  zoomOutLabel: zoomOutLabelProp,
+  zoomLabel: zoomLabelProp,
+  zoomInLabel: zoomInLabelProp,
+  noPanHint: noPanHintProp,
   ...rest
 }) {
+  const t = useLocaleText();
+  const hint = hintProp ?? t("imageCropper.hint");
+  const noPanHint = noPanHintProp ?? t("imageCropper.noPanHint");
+  const label = labelProp ?? t("imageCropper.label");
+  const zoomOutLabel = zoomOutLabelProp ?? t("imageCropper.zoomOut");
+  const zoomLabel = zoomLabelProp ?? t("imageCropper.zoom");
+  const zoomInLabel = zoomInLabelProp ?? t("imageCropper.zoomIn");
   const imageRef = useRef(null);
   const viewportRef = useRef(null);
   const dragRef = useRef(
     null
   );
   const hintId = useId();
+  const field = useFieldControl();
   const [previewUrl, setPreviewUrl] = useState("");
   const [srcType, setSrcType] = useState("");
   useEffect(() => {
@@ -3955,8 +5073,9 @@ function ImageCropper({
           className: cn("image_cropper_viewport", dragging && "image_cropper_viewport_dragging"),
           style: viewportStyle,
           role: "group",
-          "aria-label": label,
-          "aria-describedby": hintId,
+          "aria-labelledby": field?.labelId,
+          "aria-label": field?.labelId ? void 0 : label,
+          "aria-describedby": [field?.describedBy, hintId].filter(Boolean).join(" "),
           tabIndex: imageSize ? 0 : -1,
           onPointerDown: handlePointerDown,
           onPointerMove: handlePointerMove,
@@ -4044,9 +5163,11 @@ var OtpInput = ({
   disabled = false,
   supportingText,
   autoFocus = false,
-  ariaLabel = "OTP \uC785\uB825",
+  ariaLabel: ariaLabelProp,
   className
 }) => {
+  const t = useLocaleText();
+  const ariaLabel = ariaLabelProp ?? t("otpInput.label");
   const inputsRef = React11.useRef([]);
   const isTypingRef = React11.useRef(false);
   React11.useEffect(() => {
@@ -4130,46 +5251,56 @@ var OtpInput = ({
   };
   const rootClassName = cn("otp_input", className);
   const supportingId = React11.useId();
+  const field = useFieldControl();
   return (
     // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force border/legend styles; role=group is the WAI-ARIA equivalent for OTP grouping
-    /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
-      /* @__PURE__ */ jsx("div", { className: "otp_input_boxes", children: digits.map((digit, i) => /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: (el) => {
-            inputsRef.current[i] = el;
-          },
-          type: "text",
-          inputMode: "numeric",
-          pattern: "\\d*",
-          maxLength: 1,
-          autoComplete: i === 0 ? "one-time-code" : "off",
-          value: digit,
-          onChange: (e) => handleChange(i, e),
-          onFocus: () => handleFocus(i),
-          onKeyDown: (e) => handleKeyDown2(i, e),
-          onPaste: handlePaste,
-          disabled,
-          "aria-label": `${i + 1}\uBC88\uC9F8 \uC790\uB9AC`,
-          "aria-invalid": error || void 0,
-          "aria-describedby": supportingText ? supportingId : void 0,
-          className: cn(
-            "otp_input_box",
-            error && "otp_input_box_error",
-            disabled && "otp_input_box_disabled"
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: rootClassName,
+        role: "group",
+        "aria-labelledby": field?.labelId,
+        "aria-label": field?.labelId ? void 0 : ariaLabel,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "otp_input_boxes", children: digits.map((digit, i) => /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (el) => {
+                inputsRef.current[i] = el;
+              },
+              type: "text",
+              inputMode: "numeric",
+              pattern: "\\d*",
+              maxLength: 1,
+              autoComplete: i === 0 ? "one-time-code" : "off",
+              value: digit,
+              onChange: (e) => handleChange(i, e),
+              onFocus: () => handleFocus(i),
+              onKeyDown: (e) => handleKeyDown2(i, e),
+              onPaste: handlePaste,
+              disabled,
+              "aria-label": t("otpInput.digit", { index: i + 1 }),
+              "aria-invalid": error || field?.invalid || void 0,
+              "aria-describedby": field?.describedBy ?? (supportingText ? supportingId : void 0),
+              className: cn(
+                "otp_input_box",
+                error && "otp_input_box_error",
+                disabled && "otp_input_box_disabled"
+              )
+            },
+            i
+          )) }),
+          supportingText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: supportingId,
+              className: cn("otp_input_supporting", error && "otp_input_supporting_error"),
+              children: supportingText
+            }
           )
-        },
-        i
-      )) }),
-      supportingText && /* @__PURE__ */ jsx(
-        "span",
-        {
-          id: supportingId,
-          className: cn("otp_input_supporting", error && "otp_input_supporting_error"),
-          children: supportingText
-        }
-      )
-    ] })
+        ]
+      }
+    )
   );
 };
 OtpInput.displayName = "OtpInput";
@@ -4198,6 +5329,7 @@ var RadioGroup = ({
   const generatedName = React11.useId();
   const name = nameProp ?? generatedName;
   const idPrefix = React11.useId();
+  const field = useFieldControl();
   const labelId = label ? `${idPrefix}-label` : void 0;
   const helperId = supportingText ? `${idPrefix}-help` : void 0;
   const onChange = React11.useCallback(
@@ -4227,9 +5359,10 @@ var RadioGroup = ({
           "div",
           {
             role: "radiogroup",
-            "aria-labelledby": labelId,
-            "aria-describedby": helperId,
-            "aria-invalid": error || void 0,
+            "aria-labelledby": field?.labelId ?? labelId,
+            "aria-describedby": field?.describedBy ?? helperId,
+            "aria-invalid": error || field?.invalid || void 0,
+            "aria-required": field?.required || void 0,
             className: "radio_group_options",
             children
           }
@@ -4262,6 +5395,7 @@ var Radio = ({
     onChange?.(event);
   };
   const rootClassName = cn("radio", `radio_size_${size}`, disabled && "radio_disabled", className);
+  const field = useFieldControl();
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -4269,6 +5403,8 @@ var Radio = ({
         ref,
         type: "radio",
         className: "radio_input",
+        id: field?.inputId ?? props.id,
+        "aria-describedby": field?.describedBy ?? props["aria-describedby"],
         value,
         name,
         disabled,
@@ -4282,6 +5418,149 @@ var Radio = ({
   ] });
 };
 Radio.displayName = "Radio";
+var SEPARATORS = /[,\t\n\r]+/;
+var splitTags = (text) => text.split(SEPARATORS).map((part) => part.trim()).filter(Boolean);
+var TagInput = ({
+  value,
+  defaultValue = [],
+  onValueChange,
+  placeholder: placeholderProp,
+  maxTags,
+  allowDuplicates = false,
+  size = "md",
+  disabled = false,
+  fullWidth = false,
+  ariaLabel,
+  className,
+  ...props
+}) => {
+  const t = useLocaleText();
+  const placeholder = placeholderProp ?? t("tagInput.placeholder");
+  const generatedId = useId();
+  const field = useFieldControl();
+  const inputId = field?.inputId ?? generatedId;
+  const isControlled = value !== void 0;
+  const [innerTags, setInnerTags] = useState(defaultValue);
+  const tags = isControlled ? value : innerTags;
+  const [draft, setDraft] = useState("");
+  const [announcement, setAnnouncement] = useState("");
+  const inputRef = useRef(null);
+  const isFull = maxTags !== void 0 && tags.length >= maxTags;
+  const setTags = (next) => {
+    if (!isControlled) setInnerTags(next);
+    onValueChange?.(next);
+  };
+  const addTags = (text) => {
+    const candidates = splitTags(text);
+    if (candidates.length === 0) return 0;
+    const next = [...tags];
+    const added = [];
+    const duplicates = [];
+    for (const candidate of candidates) {
+      if (maxTags !== void 0 && next.length >= maxTags) break;
+      if (!allowDuplicates && next.includes(candidate)) {
+        duplicates.push(candidate);
+        continue;
+      }
+      next.push(candidate);
+      added.push(candidate);
+    }
+    const isAtCap = maxTags !== void 0 && next.length >= maxTags;
+    if (added.length === 0) {
+      if (isAtCap) {
+        setAnnouncement(t("tagInput.atCap", { max: maxTags }));
+      } else if (duplicates.length > 0) {
+        setAnnouncement(t("tagInput.duplicate", { names: duplicates.join(", ") }));
+      }
+      return 0;
+    }
+    setTags(next);
+    const notes = [
+      duplicates.length > 0 ? t("tagInput.duplicate", { names: duplicates.join(", ") }) : "",
+      isAtCap && maxTags !== void 0 ? t("tagInput.atCap", { max: maxTags }) : ""
+    ].filter(Boolean);
+    setAnnouncement(
+      notes.length > 0 ? t("tagInput.addedWithNotes", { names: added.join(", "), notes: notes.join(", ") }) : t("tagInput.added", { names: added.join(", ") })
+    );
+    return added.length;
+  };
+  const removeAt = (index) => {
+    const removed = tags[index];
+    setTags(tags.filter((_, i) => i !== index));
+    setAnnouncement(t("tagInput.removed", { name: removed }));
+  };
+  const onKeyDown = (event) => {
+    if (event.nativeEvent.isComposing) return;
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
+      if (addTags(draft) > 0) setDraft("");
+      return;
+    }
+    if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+      event.preventDefault();
+      removeAt(tags.length - 1);
+    }
+  };
+  const onPaste = (event) => {
+    const text = event.clipboardData.getData("text");
+    if (!SEPARATORS.test(text)) return;
+    event.preventDefault();
+    const input = event.currentTarget;
+    const start = input.selectionStart ?? draft.length;
+    const end = input.selectionEnd ?? draft.length;
+    const merged = `${draft.slice(0, start)}${text}${draft.slice(end)}`;
+    if (addTags(merged) > 0) setDraft("");
+  };
+  const rootClassName = cn(
+    "tag_input",
+    `tag_input_size_${size}`,
+    { tag_input_full_width: fullWidth, tag_input_disabled: disabled },
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "tag_input_control", onClick: () => inputRef.current?.focus(), children: [
+      tags.length > 0 && /* @__PURE__ */ jsx("ul", { className: "tag_input_tags", children: tags.map((tag, index) => (
+        /* biome-ignore lint/suspicious/noArrayIndexKey: allowDuplicates 면 같은 라벨이 여러 개라 값만으로는 구분되지 않는다 */
+        /* @__PURE__ */ jsx("li", { className: "tag_input_tag", children: /* @__PURE__ */ jsx(
+          Chip,
+          {
+            type: "static",
+            size: "sm",
+            label: tag,
+            removable: !disabled,
+            onRemove: () => removeAt(index)
+          }
+        ) }, `${tag}-${index}`)
+      )) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id: inputId,
+          className: "tag_input_field",
+          type: "text",
+          autoComplete: "off",
+          value: draft,
+          disabled,
+          readOnly: isFull,
+          placeholder: isFull ? "" : placeholder,
+          "aria-labelledby": field?.labelId,
+          "aria-label": field?.labelId ? void 0 : ariaLabel,
+          "aria-describedby": field?.describedBy,
+          "aria-invalid": field?.invalid || void 0,
+          "aria-required": field?.required || void 0,
+          onChange: (event) => setDraft(event.target.value),
+          onKeyDown,
+          onPaste,
+          onBlur: () => {
+            if (addTags(draft) > 0) setDraft("");
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "tag_input_live", role: "status", children: announcement })
+  ] });
+};
 var LINE_HEIGHT_PX = {
   sm: 20,
   md: 20,
@@ -4313,8 +5592,10 @@ var Textarea = ({
   ...props
 }) => {
   const generatedId = useId();
-  const inputId = id ?? generatedId;
+  const field = useFieldControl();
+  const inputId = id ?? field?.inputId ?? generatedId;
   const helperId = supportingText ? `${inputId}-help` : void 0;
+  const describedBy = field?.describedBy ?? helperId;
   const isControlled = value !== void 0;
   const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
   const [innerValue, setInnerValue] = useState(() => applyTransform(value ?? defaultValue ?? ""));
@@ -4346,228 +5627,187 @@ var Textarea = ({
     const maxH = maxRows ? maxRows * lh2 : Number.POSITIVE_INFINITY;
     el.style.height = "auto";
     const next = Math.min(Math.max(el.scrollHeight, minH), maxH);
-    el.style.height = `${next}px`;
-    el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
-  }, [innerValue, autoGrow, size, minRows, maxRows]);
-  const rootClassName = cn(
-    "textarea",
-    size === "sm" && "textarea_size_sm",
-    size === "lg" && "textarea_size_lg",
-    fullWidth && "textarea_full_width",
-    error && "textarea_error",
-    props.disabled && "textarea_disabled",
-    className
-  );
-  const counterText = showCounter && maxLength !== void 0 ? `${innerValue.length}/${maxLength}` : showCounter ? String(innerValue.length) : null;
-  const emit = (nextValue) => {
-    setInnerValue(nextValue);
-    if (nextValue !== lastEmittedValueRef.current) {
-      lastEmittedValueRef.current = nextValue;
-      (onValueChange ?? onChangeAction)?.(nextValue);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
-    label && showLabel && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "textarea_label", children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "textarea_container", children: [
-      toolbar && /* @__PURE__ */ jsx("div", { className: "textarea_toolbar", inert: props.disabled || void 0, children: toolbar }),
-      /* @__PURE__ */ jsx("div", { className: "textarea_input_wrap", children: /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          id: inputId,
-          ref: setRefs,
-          className: "textarea_input",
-          style: { resize: autoGrow ? "none" : resize },
-          rows: autoGrow ? minRows ?? rows : rows,
-          maxLength,
-          "aria-invalid": !!error,
-          "aria-describedby": helperId,
-          "aria-label": !showLabel ? label : void 0,
-          ...props,
-          value: innerValue,
-          onCompositionStart: () => {
-            isComposingRef.current = true;
-          },
-          onCompositionEnd: (event) => {
-            isComposingRef.current = false;
-            emit(applyTransform(event.currentTarget.value));
-          },
-          onChange: (event) => {
-            const rawValue = event.target.value;
-            if (isComposingRef.current) {
-              setInnerValue(rawValue);
-              if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
-                lastEmittedValueRef.current = rawValue;
-                (onValueChange ?? onChangeAction)?.(rawValue);
-              }
-              return;
-            }
-            emit(applyTransform(rawValue));
-          }
-        }
-      ) })
-    ] }),
-    (supportingText || counterText) && /* @__PURE__ */ jsxs("div", { className: "textarea_footer", children: [
-      supportingText ? /* @__PURE__ */ jsx("div", { id: helperId, className: "textarea_helper", children: supportingText }) : /* @__PURE__ */ jsx("span", {}),
-      counterText && /* @__PURE__ */ jsx("div", { className: "textarea_counter", "aria-hidden": "true", children: counterText })
-    ] })
-  ] });
-};
-Textarea.displayName = "Textarea";
-var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: iconSize.lg, "aria-hidden": "true" });
-var DEFAULT_PASSWORD_TOGGLE_LABELS = { show: "\uBE44\uBC00\uBC88\uD638 \uD45C\uC2DC", hide: "\uBE44\uBC00\uBC88\uD638 \uC228\uAE30\uAE30" };
-var TextField = ({
-  id,
-  label,
-  showLabel = true,
-  supportingText,
-  error,
-  success,
-  identifier,
-  leadingIcon,
-  trailingIcon,
-  leadingAction,
-  trailingAction,
-  showPasswordToggle,
-  passwordToggleLabels,
-  clearable,
-  clearLabel = "\uC9C0\uC6B0\uAE30",
-  type,
-  fullWidth,
-  size = "md",
-  variant = "outline",
-  className,
-  onValueChange,
-  onChangeAction,
-  imeStrategy = "delayed",
-  value,
-  defaultValue,
-  transformValue,
-  ref,
-  ...props
-}) => {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const helperId = supportingText ? `${inputId}-help` : void 0;
-  const isControlled = value !== void 0;
-  const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-  const [innerValue, setInnerValue] = useState(() => applyTransform(value ?? defaultValue ?? ""));
-  const isComposingRef = useRef(false);
-  const lastEmittedValueRef = useRef(innerValue);
-  const [prevValue, setPrevValue] = useState(value);
-  if (isControlled && value !== prevValue && !isComposingRef.current) {
-    setPrevValue(value);
-    const nextValue = applyTransform(value ?? "");
-    setInnerValue(nextValue);
-    lastEmittedValueRef.current = nextValue;
-  }
-  const emit = useCallback(
-    (nextValue) => {
-      setInnerValue(nextValue);
-      if (nextValue !== lastEmittedValueRef.current) {
-        lastEmittedValueRef.current = nextValue;
-        (onValueChange ?? onChangeAction)?.(nextValue);
-      }
-    },
-    [onValueChange, onChangeAction]
-  );
-  const handleClear = useCallback(() => {
-    emit("");
-  }, [emit]);
-  const [passwordRevealed, setPasswordRevealed] = useState(false);
-  const togglePassword = useCallback(() => {
-    setPasswordRevealed((revealed) => !revealed);
-  }, []);
-  let resolvedType = type;
-  if (showPasswordToggle) {
-    resolvedType = passwordRevealed ? "text" : type ?? "password";
-  }
-  const isError = !!error;
-  const isSuccess = !!success && !isError;
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
+  }, [innerValue, autoGrow, size, minRows, maxRows]);
   const rootClassName = cn(
-    "text_field",
-    `text_field_variant_${variant}`,
-    size === "sm" && "text_field_size_sm",
-    size === "lg" && "text_field_size_lg",
-    fullWidth && "text_field_full_width",
-    isError && "text_field_error",
-    isSuccess && "text_field_success",
-    props.disabled && "text_field_disabled",
+    "textarea",
+    size === "sm" && "textarea_size_sm",
+    size === "lg" && "textarea_size_lg",
+    fullWidth && "textarea_full_width",
+    error && "textarea_error",
+    props.disabled && "textarea_disabled",
     className
   );
-  const passwordToggleLabel = passwordRevealed ? passwordToggleLabels?.hide ?? DEFAULT_PASSWORD_TOGGLE_LABELS.hide : passwordToggleLabels?.show ?? DEFAULT_PASSWORD_TOGGLE_LABELS.show;
-  const resolvedTrailing = showPasswordToggle ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: togglePassword,
-      "aria-label": passwordToggleLabel,
-      disabled: props.disabled,
-      children: passwordRevealed ? /* @__PURE__ */ jsx(EyeOff, { size: iconSize.lg, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { size: iconSize.lg, "aria-hidden": "true" })
-    }
-  ) }) : clearable && innerValue ? /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: "text_field_clear",
-      onClick: handleClear,
-      "aria-label": clearLabel,
-      disabled: props.disabled,
-      children: /* @__PURE__ */ jsx(ClearIcon, {})
+  const counterText = showCounter && maxLength !== void 0 ? `${innerValue.length}/${maxLength}` : showCounter ? String(innerValue.length) : null;
+  const emit = (nextValue) => {
+    setInnerValue(nextValue);
+    if (nextValue !== lastEmittedValueRef.current) {
+      lastEmittedValueRef.current = nextValue;
+      (onValueChange ?? onChangeAction)?.(nextValue);
     }
-  ) : trailingAction ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: trailingAction }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
-  const resolvedLeading = leadingAction ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: leadingAction }) : leadingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }) : null;
+  };
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
-    label && showLabel && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text_field_label", children: label }),
-    /* @__PURE__ */ jsx("div", { className: "text_field_container", children: /* @__PURE__ */ jsxs("div", { className: "text_field_inner", children: [
-      resolvedLeading,
-      /* @__PURE__ */ jsx(
-        "div",
+    label && showLabel && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "textarea_label", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "textarea_container", children: [
+      toolbar && /* @__PURE__ */ jsx("div", { className: "textarea_toolbar", inert: props.disabled || void 0, children: toolbar }),
+      /* @__PURE__ */ jsx("div", { className: "textarea_input_wrap", children: /* @__PURE__ */ jsx(
+        "textarea",
         {
-          className: cn(
-            "text_field_input_wrap",
-            resolvedTrailing && "text_field_input_wrap_no_pad_right"
-          ),
-          children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: inputId,
-              ref,
-              className: cn("text_field_input", identifier && "text_field_input_identifier"),
-              "aria-invalid": isError,
-              "aria-describedby": helperId,
-              "aria-label": !showLabel ? label : void 0,
-              ...props,
-              type: resolvedType,
-              value: innerValue,
-              onCompositionStart: () => {
-                isComposingRef.current = true;
-              },
-              onCompositionEnd: (event) => {
-                isComposingRef.current = false;
-                emit(applyTransform(event.currentTarget.value));
-              },
-              onChange: (event) => {
-                const rawValue = event.target.value;
-                if (isComposingRef.current) {
-                  setInnerValue(rawValue);
-                  if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
-                    lastEmittedValueRef.current = rawValue;
-                    (onValueChange ?? onChangeAction)?.(rawValue);
-                  }
-                  return;
-                }
-                emit(applyTransform(rawValue));
+          id: inputId,
+          ref: setRefs,
+          className: "textarea_input",
+          style: { resize: autoGrow ? "none" : resize },
+          rows: autoGrow ? minRows ?? rows : rows,
+          maxLength,
+          "aria-invalid": !!error || !!field?.invalid,
+          "aria-describedby": describedBy,
+          "aria-required": field?.required || void 0,
+          "aria-label": !showLabel ? label : void 0,
+          ...props,
+          value: innerValue,
+          onCompositionStart: () => {
+            isComposingRef.current = true;
+          },
+          onCompositionEnd: (event) => {
+            isComposingRef.current = false;
+            emit(applyTransform(event.currentTarget.value));
+          },
+          onChange: (event) => {
+            const rawValue = event.target.value;
+            if (isComposingRef.current) {
+              setInnerValue(rawValue);
+              if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
+                lastEmittedValueRef.current = rawValue;
+                (onValueChange ?? onChangeAction)?.(rawValue);
               }
+              return;
             }
-          )
+            emit(applyTransform(rawValue));
+          }
         }
-      ),
-      resolvedTrailing
-    ] }) }),
-    supportingText && /* @__PURE__ */ jsx("div", { id: helperId, className: "text_field_helper", children: supportingText })
+      ) })
+    ] }),
+    (supportingText || counterText) && /* @__PURE__ */ jsxs("div", { className: "textarea_footer", children: [
+      supportingText ? /* @__PURE__ */ jsx("div", { id: helperId, className: "textarea_helper", children: supportingText }) : /* @__PURE__ */ jsx("span", {}),
+      counterText && /* @__PURE__ */ jsx("div", { className: "textarea_counter", "aria-hidden": "true", children: counterText })
+    ] })
   ] });
 };
-TextField.displayName = "TextField";
+Textarea.displayName = "Textarea";
+var toMinutes = (value) => {
+  if (!value) return null;
+  const [h, m] = value.split(":").map(Number);
+  if (!Number.isInteger(h) || !Number.isInteger(m)) return null;
+  if (h < 0 || h > 23 || m < 0 || m > 59) return null;
+  return h * 60 + m;
+};
+var pad2 = (n) => String(n).padStart(2, "0");
+var TimePicker = ({
+  label,
+  value,
+  onValueChange,
+  minuteStep = 5,
+  minTime,
+  maxTime,
+  disabled,
+  fullWidth = true,
+  hourLabel: hourLabelProp,
+  minuteLabel: minuteLabelProp
+}) => {
+  const t = useLocaleText();
+  const hourLabel = hourLabelProp ?? t("timePicker.hour");
+  const minuteLabel = minuteLabelProp ?? t("timePicker.minute");
+  const field = useFieldControl();
+  const groupId = React11.useId();
+  const constraintId = React11.useId();
+  const min = toMinutes(minTime) ?? 0;
+  const max = toMinutes(maxTime) ?? 23 * 60 + 59;
+  const parsed = toMinutes(value);
+  const hour = parsed === null ? null : Math.floor(parsed / 60);
+  const minute = parsed === null ? null : parsed % 60;
+  const hourOptions = React11.useMemo(() => {
+    const first = Math.floor(min / 60);
+    const last = Math.floor(max / 60);
+    return Array.from({ length: Math.max(0, last - first + 1) }, (_, i) => {
+      const h = first + i;
+      return { value: String(h), label: pad2(h) };
+    });
+  }, [min, max]);
+  const minuteOptions = React11.useMemo(() => {
+    if (hour === null) return [];
+    const step = Math.max(1, Math.floor(minuteStep));
+    return Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step).filter((m) => m < 60).filter((m) => hour * 60 + m >= min && hour * 60 + m <= max).map((m) => ({ value: String(m), label: pad2(m) }));
+  }, [hour, minuteStep, min, max]);
+  const emit = (h, m) => onValueChange(`${pad2(h)}:${pad2(m)}`);
+  const handleHourChange = (raw) => {
+    if (!raw) return;
+    const h = Number(raw);
+    const step = Math.max(1, Math.floor(minuteStep));
+    const candidates = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step).filter(
+      (m) => m < 60 && h * 60 + m >= min && h * 60 + m <= max
+    );
+    if (candidates.length === 0) return;
+    const keep = minute !== null && candidates.includes(minute) ? minute : candidates[0];
+    emit(h, keep);
+  };
+  const handleMinuteChange = (raw) => {
+    if (!raw || hour === null) return;
+    emit(hour, Number(raw));
+  };
+  const constraint = minTime || maxTime ? t("timePicker.rangeSr", { min: minTime ?? "00:00", max: maxTime ?? "23:59" }) : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("time_picker", {
+        time_picker_full_width: fullWidth,
+        time_picker_disabled: disabled
+      }),
+      children: [
+        label && /* @__PURE__ */ jsx("span", { className: "time_picker_label", id: groupId, children: label }),
+        constraint && /* @__PURE__ */ jsx("span", { id: constraintId, className: "time_picker_sr_only", children: constraint }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "time_picker_fields",
+            role: "group",
+            "aria-labelledby": field?.labelId ?? (label ? groupId : void 0),
+            "aria-describedby": [field?.describedBy, constraint ? constraintId : void 0].filter(Boolean).join(" ") || void 0,
+            "aria-invalid": field?.invalid || void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                Dropdown,
+                {
+                  size: "sm",
+                  fullWidth: true,
+                  label: hourLabel,
+                  placeholder: hourLabel,
+                  options: hourOptions,
+                  value: hour === null ? null : String(hour),
+                  onValueChange: handleHourChange,
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Dropdown,
+                {
+                  size: "sm",
+                  fullWidth: true,
+                  label: minuteLabel,
+                  placeholder: minuteLabel,
+                  options: minuteOptions,
+                  value: minute === null ? null : String(minute),
+                  onValueChange: handleMinuteChange,
+                  disabled: disabled || hour === null
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var Toggle = ({
   checked,
   defaultChecked,
@@ -4590,6 +5830,7 @@ var Toggle = ({
     if (!isControlled) setInnerChecked(next);
     (onCheckedChange ?? onChange)?.(next);
   };
+  const field = useFieldControl();
   const rootClassName = cn(
     "toggle",
     `toggle_size_${size}`,
@@ -4604,7 +5845,10 @@ var Toggle = ({
       type: "button",
       role: "switch",
       "aria-checked": isOn,
-      "aria-label": ariaLabel,
+      id: field?.inputId ?? props.id,
+      "aria-describedby": field?.describedBy ?? props["aria-describedby"],
+      "aria-labelledby": field?.labelId,
+      "aria-label": field?.labelId ? void 0 : ariaLabel,
       disabled,
       onClick: handleToggle,
       className: rootClassName,
@@ -4630,92 +5874,6 @@ var IconButton = ({
   );
   return /* @__PURE__ */ jsx("button", { ref, type, className: buttonClassName, ...props, children: /* @__PURE__ */ jsx("span", { className: "icon_button_icon", "aria-hidden": "true", children: icon }) });
 };
-var range2 = (start, end) => {
-  const out = [];
-  for (let i = start; i <= end; i += 1) out.push(i);
-  return out;
-};
-var getPaginationItems = (page, totalPages) => {
-  if (totalPages <= 7) return range2(1, totalPages);
-  const items = [];
-  const last = totalPages;
-  const sibling = 2;
-  if (page <= sibling + 2) {
-    for (const p of range2(1, sibling + 3)) items.push(p);
-    items.push("ellipsis");
-    items.push(last);
-    return items;
-  }
-  if (page >= last - sibling - 1) {
-    items.push(1);
-    items.push("ellipsis");
-    for (const p of range2(last - sibling - 2, last)) items.push(p);
-    return items;
-  }
-  items.push(1);
-  items.push("ellipsis");
-  for (const p of range2(page - sibling, page + sibling)) items.push(p);
-  items.push("ellipsis");
-  items.push(last);
-  return items;
-};
-var Pagination = ({
-  page,
-  totalPages,
-  onPageChange,
-  onChange,
-  prevLabel = "\uC774\uC804 \uD398\uC774\uC9C0",
-  nextLabel = "\uB2E4\uC74C \uD398\uC774\uC9C0",
-  navLabel = "\uD398\uC774\uC9C0 \uC774\uB3D9"
-}) => {
-  const emit = onPageChange ?? onChange;
-  const prevDisabled = page <= 1;
-  const nextDisabled = page >= totalPages;
-  const items = React11.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
-  return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": navLabel, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "pagination_item",
-        onClick: () => emit?.(page - 1),
-        disabled: prevDisabled,
-        "aria-label": prevLabel,
-        children: "\u2039"
-      }
-    ),
-    /* @__PURE__ */ jsx("ul", { className: "pagination_pages", children: items.map((it, idx) => {
-      if (it === "ellipsis") {
-        const prev = items[idx - 1];
-        const next = items[idx + 1];
-        return /* @__PURE__ */ jsx("li", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${prev}-${next}`);
-      }
-      const isActive = it === page;
-      const buttonClassName = cn("pagination_page_button", { pagination_active: isActive });
-      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: buttonClassName,
-          onClick: () => emit?.(it),
-          "aria-current": isActive ? "page" : void 0,
-          children: it
-        }
-      ) }, it);
-    }) }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "pagination_item",
-        onClick: () => emit?.(page + 1),
-        disabled: nextDisabled,
-        "aria-label": nextLabel,
-        children: "\u203A"
-      }
-    )
-  ] });
-};
 var SLIDE_FROM = {
   left: "translateX(-100%)",
   right: "translateX(100%)",
@@ -4731,13 +5889,15 @@ var Drawer = ({
   closeOnOverlay = true,
   dismissible,
   showCloseIcon = true,
-  closeLabel = "\uB2EB\uAE30",
+  closeLabel: closeLabelProp,
   ariaLabel,
   onExited,
   children,
   className,
   ...props
 }) => {
+  const t = useLocaleText();
+  const closeLabel = closeLabelProp ?? t("drawer.close");
   const lastContentRef = React11.useRef({ children, title, footer });
   if (open) lastContentRef.current = { children, title, footer };
   const content = open ? { children, title, footer } : lastContentRef.current;
@@ -4837,13 +5997,15 @@ var Modal = ({
   footer,
   footerAlign = "end",
   showCloseIcon = true,
-  closeLabel = "\uB2EB\uAE30",
+  closeLabel: closeLabelProp,
   children,
   className,
   ariaLabel,
   onExited,
   ...props
 }) => {
+  const t = useLocaleText();
+  const closeLabel = closeLabelProp ?? t("modal.close");
   const lastContentRef = React11.useRef({ children, title, description, footer });
   if (open) lastContentRef.current = { children, title, description, footer };
   const content = open ? { children, title, description, footer } : lastContentRef.current;
@@ -5010,15 +6172,39 @@ var ThemeProvider = ({
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 };
+var AppShell = ({
+  sidebar,
+  header,
+  padded = true,
+  className,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ref,
+    className: cn("app_shell", { app_shell_with_sidebar: !!sidebar }, className),
+    ...props,
+    children: [
+      sidebar && /* @__PURE__ */ jsx("div", { className: "app_shell_sidebar", children: sidebar }),
+      /* @__PURE__ */ jsxs("div", { className: "app_shell_body", children: [
+        header && /* @__PURE__ */ jsx("div", { className: "app_shell_header", children: header }),
+        /* @__PURE__ */ jsx("main", { className: cn("app_shell_main", { app_shell_main_padded: padded }), children })
+      ] })
+    ]
+  }
+);
 var Container = ({
   size = "xl",
   center = true,
-  as: Tag = "div",
+  as,
   ref,
   className,
   children,
   ...props
 }) => {
+  const Tag = as ?? "div";
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -5036,7 +6222,7 @@ var Grid = ({
   rowGap,
   colGap,
   singleColOnMobile = true,
-  as: Tag = "div",
+  as,
   ref,
   className,
   children,
@@ -5044,6 +6230,7 @@ var Grid = ({
   ...props
 }) => {
   const gridTemplateColumns = cols === "auto" ? `repeat(auto-fill, minmax(${minColWidth}, 1fr))` : `repeat(${cols}, 1fr)`;
+  const Tag = as ?? "div";
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -5061,15 +6248,36 @@ var Grid = ({
     }
   );
 };
+var PageHeader = ({
+  title,
+  description,
+  breadcrumb,
+  actions,
+  tabs,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { ref, className: cn("page_header", className), ...props, children: [
+  breadcrumb && /* @__PURE__ */ jsx("div", { className: "page_header_breadcrumb", children: breadcrumb }),
+  /* @__PURE__ */ jsxs("div", { className: "page_header_bar", children: [
+    /* @__PURE__ */ jsxs("div", { className: "page_header_titles", children: [
+      /* @__PURE__ */ jsx("h1", { className: "page_header_title", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "page_header_description", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "page_header_actions", children: actions })
+  ] }),
+  tabs && /* @__PURE__ */ jsx("div", { className: "page_header_tabs", children: tabs })
+] });
 var Section = ({
   spacing: spacing2 = "md",
   bg = "default",
-  as: Tag = "section",
+  as,
   ref,
   className,
   children,
   ...props
 }) => {
+  const Tag = as ?? "section";
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -5086,13 +6294,14 @@ var Stack = ({
   align,
   justify,
   wrap,
-  as: Tag = "div",
+  as,
   ref,
   className,
   children,
   style,
   ...props
 }) => {
+  const Tag = as ?? "div";
   return /* @__PURE__ */ jsx(
     Tag,
     {
@@ -5112,4 +6321,4 @@ var Stack = ({
   );
 };
 
-export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Drawer, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, ImageCropper, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Popover, Prose, Radio, RadioGroup, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, Textarea, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, AlertProvider, AppShell, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Combobox, Container, DataView, DatePicker, DateRangePicker, DescriptionList, Divider, Drawer, Dropdown, EmptyState, ErrorState, Field, FileInput, Form, Grid, Hero, Icon, IconButton, ImageCropper, LinearProgress, ListItem, LocaleProvider, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, PageHeader, Pagination, Popover, Prose, Radio, RadioGroup, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Stat, Tab, TabList, TabPanel, Table, Tabs, TagInput, TextField, Textarea, ThemeProvider, TimePicker, Timeline, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, catalogs, cn, colors, elevation, en, iconSize, ko, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFieldControl, useFocusTrap, useListboxPopup, useLocaleName, useLocaleText, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };