@olundot/ui 0.12.0 → 0.14.0

package/dist/index.js

@@ -28,6 +28,14 @@ var durationMsByToken = {
   slower: 400,
   slowest: 600
 };
+var transitionDurationVarByToken = {
+  instant: "0ms",
+  fast: "var(--dur-fast)",
+  base: "var(--dur-base)",
+  slow: "var(--dur-slow)",
+  slower: "400ms",
+  slowest: "600ms"
+};
 var transitionCleanupTimer;
 var defaultThemeState = {
   theme: "light",
@@ -105,7 +113,7 @@ function setOlunTheme(nextTheme, options = {}) {
     root.dataset[TRANSITION_ATTR] = "true";
     root.style.setProperty(
       TRANSITION_DURATION_PROPERTY,
-      `var(--duration-${duration})`
+      transitionDurationVarByToken[duration]
     );
     void root.offsetWidth;
   }
@@ -201,7 +209,7 @@ var buttonVariants = cva(
         default: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
         destructive: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
         secondary: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
-        link: "border-transparent bg-transparent px-0 text-[var(--accent-fg)] underline-offset-4 hover:underline"
+        link: "border-transparent bg-transparent px-0 text-[var(--accent)] underline-offset-4 hover:underline"
       },
       size: {
         // Cross-control height map: Button sm/md/lg match field controls sm/md/lg (30/32/36px).
@@ -2168,43 +2176,54 @@ import { cva as cva7 } from "class-variance-authority";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var cardBaseVariants = cva7(
   [
-    "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
+    "rounded-[var(--radius-lg)] border border-[var(--border)]",
     "px-pad-roomy-x py-pad-roomy-y text-foreground"
   ].join(" "),
   {
     variants: {
       variant: {
-        default: "",
-        elevated: "shadow-[var(--elevation-2)]",
-        notice: "border-[var(--border-accent)]",
-        interactive: [
+        default: "shadow-[var(--shadow-2)]",
+        elevated: "shadow-[var(--shadow-4)]",
+        notice: "border-[var(--border-accent)] shadow-[var(--shadow-2)]"
+      },
+      interactive: {
+        true: [
           "cursor-pointer",
           "transition-[transform,border-color,box-shadow,background-color]",
           "motion-reduce:transition-none",
           "hover:-translate-y-[1px] motion-reduce:hover:translate-y-0",
           "hover:border-[var(--border-strong)]",
           "hover:bg-[var(--action-hover)]",
-          "hover:shadow-[var(--elevation-2)]",
-          "dark:hover:shadow-[var(--elevation-2),var(--glow-sm)]",
           "focus-visible:outline-none",
-          "focus-visible:border-[var(--border-accent)]",
-          "focus-visible:shadow-[var(--elevation-2),var(--glow-sm)]"
-        ].join(" ")
+          "focus-visible:border-[var(--focus-ring)]",
+          "focus-visible:shadow-[0_0_0_1px_var(--focus-ring)]"
+        ].join(" "),
+        false: ""
       }
     },
-    defaultVariants: { variant: "default" }
+    // Interactive hover lifts the shadow one step above the variant's resting depth.
+    compoundVariants: [
+      { variant: "default", interactive: true, class: "hover:shadow-[var(--shadow-4)]" },
+      { variant: "notice", interactive: true, class: "hover:shadow-[var(--shadow-4)]" },
+      { variant: "elevated", interactive: true, class: "hover:shadow-[var(--shadow-8)]" }
+    ],
+    defaultVariants: { variant: "default", interactive: false }
   }
 );
 function getCardDefaultSurface(variant) {
   return variant === "elevated" ? "raised" : "surface";
 }
-function cardVariants({ variant, surface, className } = {}) {
+function cardVariants({ variant, surface, interactive, className } = {}) {
   const resolvedVariant = variant ?? "default";
   const resolvedSurface = surface ?? getCardDefaultSurface(resolvedVariant);
-  return cn(cardBaseVariants({ variant: resolvedVariant }), surfaceClassNames[resolvedSurface], className);
+  return cn(
+    cardBaseVariants({ variant: resolvedVariant, interactive: interactive ?? false }),
+    surfaceClassNames[resolvedSurface],
+    className
+  );
 }
 var Card = React12.forwardRef(
-  ({ className, variant, surface, selected, disabled, "aria-disabled": ariaDisabled, ...props }, ref) => /* @__PURE__ */ jsx13(
+  ({ className, variant, surface, interactive, selected, disabled, "aria-disabled": ariaDisabled, ...props }, ref) => /* @__PURE__ */ jsx13(
     "div",
     {
       ref,
@@ -2214,8 +2233,8 @@ var Card = React12.forwardRef(
       "aria-disabled": disabled ? true : ariaDisabled,
       className: cn(
         "group/card",
-        cardVariants({ variant, surface }),
-        selected && "border-[var(--border-strong)] bg-[var(--bg-canvas)]",
+        cardVariants({ variant, surface, interactive }),
+        selected && "border-[var(--border-strong)] bg-[var(--action-selected)]",
         disabled && "pointer-events-none cursor-not-allowed border-[var(--border-subtle)] bg-[var(--action-disabled-bg)] text-text-disabled",
         className
       ),
@@ -2958,7 +2977,7 @@ var tabsTriggerVariants = cva8(
     "relative inline-flex shrink-0 cursor-pointer items-center gap-[var(--space-2)]",
     "px-0 py-pad-compact-y text-body-sm font-medium",
     "text-text-secondary transition-colors",
-    "duration-[var(--duration-fast)] ease-[var(--ease-standard)]",
+    "duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
     "hover:text-foreground",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
     "disabled:cursor-not-allowed disabled:pointer-events-auto disabled:text-text-disabled disabled:hover:text-text-disabled",
@@ -3130,6 +3149,38 @@ function DetailLayoutBody({
     }
   );
 }
+function isTabsContentChild(child) {
+  return React18.isValidElement(child) && child.type === TabsContent;
+}
+function containsTabsContent(children) {
+  return React18.Children.toArray(children).some((child) => {
+    if (isTabsContentChild(child)) return true;
+    return React18.isValidElement(child) && containsTabsContent(child.props.children);
+  });
+}
+function appendFooterToActiveTabsContent(children, activeTab, footer) {
+  return React18.Children.map(children, (child) => {
+    if (isTabsContentChild(child)) {
+      if (child.props.tabKey !== activeTab || !footer) return child;
+      return React18.cloneElement(
+        child,
+        void 0,
+        /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          child.props.children,
+          /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer })
+        ] })
+      );
+    }
+    if (React18.isValidElement(child)) {
+      return React18.cloneElement(
+        child,
+        void 0,
+        appendFooterToActiveTabsContent(child.props.children, activeTab, footer)
+      );
+    }
+    return child;
+  });
+}
 var DetailLayout = React18.forwardRef(
   ({
     className,
@@ -3160,6 +3211,7 @@ var DetailLayout = React18.forwardRef(
         children
       }
     );
+    const hasExplicitTabsContent = containsTabsContent(children);
     return /* @__PURE__ */ jsxs18(
       "section",
       {
@@ -3169,10 +3221,31 @@ var DetailLayout = React18.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-header", className: "min-w-0", children: header }),
-          tabs ? /* @__PURE__ */ jsxs18(Tabs, { tabs, activeKey: activeTab, onChange: onTabChange, baseId, children: [
-            body,
-            footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
-          ] }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          tabs ? /* @__PURE__ */ jsx19(Tabs, { tabs, activeKey: activeTab, onChange: onTabChange, baseId, children: hasExplicitTabsContent ? /* @__PURE__ */ jsx19(
+            DetailLayoutBody,
+            {
+              aside,
+              bodyClassName,
+              contentClassName,
+              asideClassName,
+              stickyAside,
+              stickyAsideTopClassName,
+              children: appendFooterToActiveTabsContent(children, activeTab, footer)
+            }
+          ) : tabs.map((tab) => /* @__PURE__ */ jsx19(
+            TabsContent,
+            {
+              tabKey: tab.key,
+              baseId,
+              forceMount: true,
+              hidden: tab.key !== activeTab,
+              children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
+                body,
+                footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
+              ] }) : null
+            },
+            tab.key
+          )) }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
             body,
             footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
           ] })
@@ -3384,9 +3457,9 @@ var DialogContent = React20.forwardRef(({ className, children, showCloseButton =
         // modal은 dim overlay 위 — 가장 밝은 DS surface(--bg-base #F1F3F5·여전히 tinted·순백 아님)로 깨끗하게.
         // arbitrary var 사용: 소비 site/app이 dist를 content-scan 안 해 `bg-base` 유틸이 purge될 수 있어 안전하게 var로.
         "bg-[var(--bg-base)] text-foreground",
-        // 2026: generic 무거운 그림자 대신 floating elevation-8 + 또렷한 중립 grey border(--border·16%) + radius-lg.
+        // 2026: generic 무거운 그림자 대신 floating shadow-8 + 또렷한 중립 grey border(--border·16%) + radius-lg.
         // (border-subtle=8%는 너무 흐려 가장자리가 안 보였음 → border-border로 grey 또렷하게.)
-        "border border-border rounded-[var(--radius-lg)] shadow-elevation-8",
+        "border border-border rounded-[var(--radius-lg)] shadow-8",
         "duration-200",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -3497,7 +3570,7 @@ var formModalContentClassName = cn(
   "bg-[var(--bg-raised)]",
   "border-[var(--border-subtle)]",
   "rounded-[var(--radius-lg)]",
-  "shadow-[var(--elevation-4)]",
+  "shadow-[var(--shadow-4)]",
   "text-foreground"
 );
 var formModalWideContentClassName = "max-w-[720px]";
@@ -3610,7 +3683,7 @@ var infoModalContentClassName = cn(
   "bg-[var(--bg-raised)]",
   "border border-[var(--border-subtle)]",
   "rounded-[var(--radius-lg)]",
-  "shadow-[var(--elevation-4)]",
+  "shadow-[var(--shadow-4)]",
   "text-foreground"
 );
 var infoModalWideContentClassName = "max-w-[720px]";
@@ -4110,7 +4183,7 @@ var Checkbox = React23.forwardRef(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 var dataTableVariants = cva10(
   [
     "relative overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -4290,27 +4363,35 @@ function SkeletonRows({
   gridTemplateColumns,
   count
 }) {
-  return /* @__PURE__ */ jsx26("div", { "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", role: "status", children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs25(
-    "div",
-    {
-      "data-slot": "data-table-skeleton-row",
-      className: "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
-      style: { gridTemplateColumns },
-      children: [
-        selectable ? /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "px-[var(--space-4)]" }) : null,
-        columns.map((column, columnIndex) => /* @__PURE__ */ jsx26("div", { className: "px-[var(--space-4)] py-[var(--space-2)]", children: /* @__PURE__ */ jsx26(
-          "div",
-          {
-            className: cn(
-              "h-[14px] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
-              columnIndex === 0 ? "w-[72%]" : column.align === "right" ? "ml-auto w-[54%]" : "w-[62%]"
-            )
-          }
-        ) }, column.key))
-      ]
-    },
-    rowIndex
-  )) });
+  return (
+    // role="table"의 허용 자식은 row/rowgroup뿐이라 컨테이너는 rowgroup이어야 한다.
+    // 로딩 알림은 그 안의 row/cell 안에 둔다 — 종전에는 컨테이너가 role="status"라
+    // aria-required-children(Critical)이 났다.
+    /* @__PURE__ */ jsxs25("div", { role: "rowgroup", children: [
+      /* @__PURE__ */ jsx26("div", { role: "row", children: /* @__PURE__ */ jsx26("div", { role: "cell", "aria-colindex": 1, "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", children: /* @__PURE__ */ jsx26("span", { role: "status", className: "sr-only", children: "\uB370\uC774\uD130 \uB85C\uB4DC \uC911" }) }) }),
+      Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs25(
+        "div",
+        {
+          "data-slot": "data-table-skeleton-row",
+          className: "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
+          style: { gridTemplateColumns },
+          children: [
+            selectable ? /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "px-[var(--space-4)]" }) : null,
+            columns.map((column, columnIndex) => /* @__PURE__ */ jsx26("div", { className: "px-[var(--space-4)] py-[var(--space-2)]", children: /* @__PURE__ */ jsx26(
+              "div",
+              {
+                className: cn(
+                  "h-[14px] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
+                  columnIndex === 0 ? "w-[72%]" : column.align === "right" ? "ml-auto w-[54%]" : "w-[62%]"
+                )
+              }
+            ) }, column.key))
+          ]
+        },
+        rowIndex
+      ))
+    ] })
+  );
 }
 function MobileSkeletonCards({ count }) {
   return /* @__PURE__ */ jsx26(
@@ -4346,14 +4427,12 @@ function DataTableInner({
   selectable = false,
   selectedIds,
   onSelectionChange,
-  selectionBar = "top",
   activeRowId,
   onRowContextMenu,
   sortBy,
   onSortChange,
   loading = false,
   emptyState,
-  bulkActions = [],
   rowHref,
   skeletonRowCount = 8,
   "aria-label": ariaLabel = "\uB370\uC774\uD130 \uD14C\uC774\uBE14",
@@ -4396,44 +4475,13 @@ function DataTableInner({
       className: cn(dataTableVariants({ density, surface, className })),
       ...props,
       children: [
-        selectable && selectionBar === "top" ? /* @__PURE__ */ jsx26(
+        selectable ? /* @__PURE__ */ jsx26(
           "div",
           {
-            "data-slot": "data-table-selection-bar",
-            "data-active": selectedCount > 0 ? "true" : "false",
+            "data-slot": "data-table-selection-status",
             "aria-live": "polite",
-            className: cn(
-              "flex min-h-[48px] flex-wrap items-center justify-between gap-[var(--space-3)] border-b border-[var(--border-subtle)] px-[var(--space-4)] py-[var(--space-2)]",
-              "bg-[var(--bg-raised)]"
-            ),
-            children: selectedCount > 0 ? /* @__PURE__ */ jsxs25(Fragment7, { children: [
-              /* @__PURE__ */ jsxs25("div", { className: "text-sm font-medium text-foreground", children: [
-                selectedCount.toLocaleString("ko-KR"),
-                "\uAC1C \uC120\uD0DD\uB428"
-              ] }),
-              /* @__PURE__ */ jsxs25("div", { className: "flex flex-wrap items-center justify-end gap-[var(--space-2)]", children: [
-                bulkActions.map((action, index) => /* @__PURE__ */ jsx26(
-                  Button,
-                  {
-                    size: "xs",
-                    variant: action.variant === "destructive" ? "destructive" : "secondary",
-                    onClick: () => action.onClick(new Set(resolvedSelectedIds)),
-                    children: action.label
-                  },
-                  index
-                )),
-                /* @__PURE__ */ jsx26(
-                  Button,
-                  {
-                    "aria-label": "\uC120\uD0DD \uCDE8\uC18C",
-                    size: "xs",
-                    variant: "ghost",
-                    onClick: () => emitSelection(/* @__PURE__ */ new Set()),
-                    children: "\uCDE8\uC18C"
-                  }
-                )
-              ] })
-            ] }) : /* @__PURE__ */ jsx26("div", { className: "text-sm text-text-tertiary", children: "\uC120\uD0DD\uB41C \uD589 \uC5C6\uC74C" })
+            className: "sr-only",
+            children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : ""
           }
         ) : null,
         loading && data.length > 0 ? /* @__PURE__ */ jsx26(
@@ -4507,7 +4555,20 @@ function DataTableInner({
               gridTemplateColumns,
               count: skeletonRowCount
             }
-          ) : data.length === 0 ? /* @__PURE__ */ jsx26("div", { "data-slot": "data-table-empty", className: "border-t border-[var(--border-subtle)] p-[var(--space-4)]", children: emptyState }) : /* @__PURE__ */ jsx26("div", { role: "rowgroup", children: data.map((row) => {
+          ) : data.length === 0 ? (
+            /* role="table" 직계 자식은 row/rowgroup이어야 한다. data-slot과 테두리는
+               그대로 유지해 시각 계약을 깨지 않는다(빈 상태에서도 표가 테두리를 그린다). */
+            /* @__PURE__ */ jsx26("div", { role: "rowgroup", children: /* @__PURE__ */ jsx26("div", { role: "row", children: /* @__PURE__ */ jsx26(
+              "div",
+              {
+                role: "cell",
+                "aria-colindex": 1,
+                "data-slot": "data-table-empty",
+                className: "border-t border-[var(--border-subtle)] p-[var(--space-4)]",
+                children: emptyState
+              }
+            ) }) })
+          ) : /* @__PURE__ */ jsx26("div", { role: "rowgroup", children: data.map((row) => {
             const rowId = getRowId(row, keyField);
             const selected = resolvedSelectedIds.has(rowId);
             const visuallySelected = selected || rowId === activeRowId;
@@ -4737,7 +4798,7 @@ function DropdownMenuContent({
       className: cn(
         "z-[var(--z-popover)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem]",
         "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
-        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-elevation-2",
+        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-2",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -4936,7 +4997,7 @@ function DropdownMenuSubContent({
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
         "z-[var(--z-popover)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
-        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-elevation-2",
+        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-2",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -5075,6 +5136,7 @@ function BulkActionBar({
   actions,
   onClear,
   emptyHint,
+  className,
   style,
   ...props
 }) {
@@ -5087,9 +5149,15 @@ function BulkActionBar({
       role: "toolbar",
       "aria-label": "\uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5",
       "data-slot": "bulk-action-bar",
+      className: cn(
+        // Subtle entrance when the bar appears (count>0). CSS animation runs once
+        // on mount; reduced motion opts out via the global guard + this variant.
+        "animate-[olun-bulk-action-bar-in_var(--dur-fast)_var(--ease-out)_both] motion-reduce:animate-none",
+        className
+      ),
       style: {
         position: "sticky",
-        bottom: "var(--space-4)",
+        bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
         zIndex: 1100,
         margin: "0 auto",
         display: "flex",
@@ -5149,14 +5217,14 @@ function BulkActionBar({
 
 // src/components/ui/confirm-dialog.tsx
 import * as React25 from "react";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 var confirmDialogContentClassName = cn(
   "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
   "-translate-x-1/2 -translate-y-1/2",
   "w-[calc(100vw-2rem)] max-w-[420px]",
   "flex flex-col gap-[var(--space-6)]",
   "bg-[var(--bg-raised)] border border-[var(--border-subtle)]",
-  "rounded-[var(--radius-lg)] p-[var(--space-6)] shadow-[var(--elevation-4)]",
+  "rounded-[var(--radius-lg)] p-[var(--space-6)] shadow-[var(--shadow-4)]",
   "text-foreground"
 );
 var confirmDialogTitleClassName = cn(
@@ -5203,7 +5271,7 @@ function ConfirmDialog({
       setPending(false);
     }
   }, [loading, onConfirm, onOpenChange]);
-  const dialogBody = /* @__PURE__ */ jsxs29(Fragment8, { children: [
+  const dialogBody = /* @__PURE__ */ jsxs29(Fragment7, { children: [
     /* @__PURE__ */ jsx30("div", { className: "flex items-start justify-between gap-[var(--space-4)]", children: /* @__PURE__ */ jsxs29("div", { className: "min-w-0 space-y-[var(--space-2)]", children: [
       /* @__PURE__ */ jsx30(
         DialogTitle,
@@ -5353,11 +5421,13 @@ var defaultSheetMotionConfig = {
   easing: "decel"
 };
 var sheetMotionEasingValue = {
-  standard: "var(--easing-standard)",
+  standard: "var(--ease-standard)",
+  // decel/sharp have no canonical --ease-* token; these compat beziers are frozen
+  // specifically to back this public `easing` prop (see tokens/compat.css).
   decel: "var(--easing-decel)",
-  accel: "var(--easing-accel)",
+  accel: "var(--ease-in)",
   sharp: "var(--easing-sharp)",
-  bounce: "var(--easing-bounce)"
+  bounce: "var(--ease-out)"
 };
 function resolveSheetMotionConfig(motion) {
   if (motion === false) return false;
@@ -5560,7 +5630,7 @@ import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 var sheetDrawerContentClassName = cn(
   "gap-0 p-0",
   "bg-[var(--bg-surface)] text-foreground",
-  "border-[var(--border)] shadow-[var(--elevation-4)]",
+  "border-[var(--border)] shadow-[var(--shadow-4)]",
   "min-[900px]:w-[480px] min-[900px]:max-w-[480px]",
   "max-[899px]:h-[min(85dvh,720px)] max-[899px]:max-h-[85dvh] max-[899px]:w-full max-[899px]:max-w-none",
   "max-[899px]:rounded-t-[var(--radius-lg)]"
@@ -5734,7 +5804,7 @@ var PopoverContent = React26.forwardRef(({ className, align = "center", sideOffs
       "z-[var(--z-popover)] w-[260px] outline-none",
       "rounded-[var(--radius-md)] border border-[var(--border)]",
       "bg-[var(--bg-raised)] p-[var(--space-4)] text-foreground",
-      "shadow-[var(--elevation-4)]",
+      "shadow-[var(--shadow-4)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -5816,100 +5886,93 @@ Badge.displayName = "Badge";
 
 // src/components/ui/two-tier-badge.tsx
 import * as React28 from "react";
-import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx37, jsxs as jsxs34 } from "react/jsx-runtime";
-var twoTierBadgeVariants = cva11(
-  "inline-flex w-fit flex-col gap-[var(--space-1)]",
-  {
-    variants: {
-      align: {
-        start: "items-start text-left",
-        center: "items-center text-center",
-        end: "items-end text-right"
-      }
-    },
-    defaultVariants: {
-      align: "start"
-    }
-  }
-);
-var twoTierBadgeLineVariants = cva11(
-  [
-    "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
-    "rounded-[var(--radius-xs)] border leading-none",
-    "transition-colors motion-reduce:transition-none"
-  ].join(" "),
-  {
-    variants: {
-      tier: {
-        primary: "px-[var(--space-2)] py-[calc(var(--space-1)/2)] text-xs font-medium",
-        secondary: "px-[var(--space-2)] py-[calc(var(--space-1)/2)] text-xs font-normal"
-      },
-      intent: {
-        neutral: "border-transparent bg-[var(--bg-raised)] text-foreground",
-        muted: "border-[var(--border-subtle)] bg-transparent text-text-tertiary",
-        brand: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-accent-fg",
-        success: "border-transparent bg-[var(--success-bg)] text-[var(--success)]",
-        warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)]",
-        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)]"
-      }
-    },
-    defaultVariants: {
-      tier: "primary",
-      intent: "neutral"
-    }
-  }
-);
+var FG = {
+  neutral: "var(--text-secondary)",
+  info: "var(--semantic-info-fg)",
+  success: "var(--semantic-success-fg)",
+  warning: "var(--semantic-warning-fg)",
+  error: "var(--semantic-error-fg)"
+};
+var BG = {
+  neutral: "var(--bg-inset)",
+  info: "var(--semantic-info-bg)",
+  success: "var(--semantic-success-bg)",
+  warning: "var(--semantic-warning-bg)",
+  error: "var(--semantic-error-bg)"
+};
+var SEGMENT = {
+  xs: "gap-[5px] py-[2px] px-[var(--space-2)] text-[12px]",
+  sm: "gap-[6px] py-[var(--space-1)] px-[var(--space-2)] text-[12px]",
+  md: "gap-[7px] py-[var(--space-1)] px-[var(--space-3)] text-[14px]"
+};
+var DOT2 = { xs: 5, sm: 6, md: 7 };
 var TwoTierBadge = React28.forwardRef(
-  ({
-    className,
-    align,
-    primary,
-    secondary,
-    primaryIntent = "neutral",
-    secondaryIntent = "muted",
-    primaryClassName,
-    secondaryClassName,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs34(
-    "div",
-    {
-      ref,
-      "data-slot": "two-tier-badge",
-      className: cn(twoTierBadgeVariants({ align, className })),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx37(
-          "span",
-          {
-            "data-slot": "two-tier-badge-primary",
-            className: cn(
-              twoTierBadgeLineVariants({
-                tier: "primary",
-                intent: primaryIntent
-              }),
-              primaryClassName
-            ),
-            children: primary
-          }
+  ({ primary, secondary, tone = "neutral", emphasis = "subtle", size = "sm", showDot = false, className, style, ...props }, ref) => {
+    const strong = emphasis === "strong";
+    const fg = FG[tone];
+    const ringDot = tone === "neutral";
+    const tinted = tone === "neutral" ? "var(--border)" : `color-mix(in srgb, ${fg} 26%, transparent)`;
+    const frame = strong ? tinted : "var(--border-subtle)";
+    const divider = strong ? tinted : "var(--border)";
+    const dotSize = DOT2[size];
+    return /* @__PURE__ */ jsxs34(
+      "span",
+      {
+        ref,
+        "data-slot": "two-tier-badge",
+        "data-tone": tone,
+        "data-emphasis": emphasis,
+        className: cn(
+          "inline-flex w-fit shrink-0 items-stretch overflow-hidden rounded-full border font-medium leading-none",
+          className
         ),
-        secondary ? /* @__PURE__ */ jsx37(
-          "span",
-          {
-            "data-slot": "two-tier-badge-secondary",
-            className: cn(
-              twoTierBadgeLineVariants({
-                tier: "secondary",
-                intent: secondaryIntent
-              }),
-              secondaryClassName
-            ),
-            children: secondary
-          }
-        ) : null
-      ]
-    }
-  )
+        style: { fontFamily: "var(--font-sans)", borderColor: frame, background: "transparent", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs34(
+            "span",
+            {
+              "data-slot": "two-tier-badge-primary",
+              className: cn("inline-flex items-center whitespace-nowrap font-semibold", SEGMENT[size]),
+              style: { color: fg, background: strong ? BG[tone] : "transparent" },
+              children: [
+                showDot ? /* @__PURE__ */ jsx37(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-slot": "two-tier-badge-dot",
+                    "data-ring-dot": ringDot ? "true" : "false",
+                    className: "box-border shrink-0 rounded-full",
+                    style: {
+                      width: dotSize,
+                      height: dotSize,
+                      background: ringDot ? "transparent" : "currentColor",
+                      border: ringDot ? "1.5px solid currentColor" : "none"
+                    }
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx37("span", { children: primary })
+              ]
+            }
+          ),
+          secondary != null ? /* @__PURE__ */ jsx37(
+            "span",
+            {
+              "data-slot": "two-tier-badge-secondary",
+              className: cn("inline-flex items-center whitespace-nowrap", SEGMENT[size]),
+              style: {
+                borderLeft: `1px solid ${divider}`,
+                color: "var(--text-tertiary)",
+                background: strong ? "var(--bg-inset)" : "transparent"
+              },
+              children: secondary
+            }
+          ) : null
+        ]
+      }
+    );
+  }
 );
 TwoTierBadge.displayName = "TwoTierBadge";
 
@@ -5925,14 +5988,14 @@ var ROLE = {
   success: "success",
   archived: "neutral"
 };
-var FG = {
+var FG2 = {
   error: "var(--semantic-error-fg)",
   warning: "var(--semantic-warning-fg)",
   info: "var(--semantic-info-fg)",
   success: "var(--semantic-success-fg)",
   neutral: "var(--semantic-neutral-fg)"
 };
-var BG = {
+var BG2 = {
   error: "var(--semantic-error-bg)",
   warning: "var(--semantic-warning-bg)",
   info: "var(--semantic-info-bg)",
@@ -5947,7 +6010,7 @@ var SIZE = {
 var StatusBadge = React29.forwardRef(
   ({ status = "active", emphasis = "subtle", size = "sm", showDot = true, pulse = true, className, children, style, ...props }, ref) => {
     const role = ROLE[status];
-    const fg = FG[role];
+    const fg = FG2[role];
     const strong = emphasis === "strong";
     const ringDot = role === "neutral";
     return /* @__PURE__ */ jsxs35(
@@ -5961,7 +6024,7 @@ var StatusBadge = React29.forwardRef(
         className: cn("inline-flex w-fit shrink-0 items-center whitespace-nowrap rounded-full border font-medium leading-none", SIZE[size].cls, className),
         style: {
           fontFamily: "var(--font-sans)",
-          background: strong ? BG[role] : "transparent",
+          background: strong ? BG2[role] : "transparent",
           borderColor: strong ? `color-mix(in srgb, ${fg} 26%, transparent)` : "var(--border-subtle)",
           color: fg,
           ...style
@@ -5996,9 +6059,9 @@ StatusBadge.displayName = "StatusBadge";
 
 // src/components/ui/notification-badge.tsx
 import * as React30 from "react";
-import { cva as cva12 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var notificationBadgeVariants = cva12(
+var notificationBadgeVariants = cva11(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)]",
     "bg-[var(--semantic-error,var(--error))] text-[var(--error-contrast)]",
@@ -6062,11 +6125,11 @@ NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/chip.tsx
 import * as React31 from "react";
-import { cva as cva13 } from "class-variance-authority";
+import { cva as cva12 } from "class-variance-authority";
 import { X as X3 } from "lucide-react";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
-var chipVariants = cva13(
+var chipVariants = cva12(
   [
     "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
     "rounded-[var(--radius-full)] border leading-none",
@@ -6087,7 +6150,7 @@ var chipVariants = cva13(
       },
       tone: {
         neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:bg-[var(--action-hover)]",
-        accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent-fg)] hover:bg-[var(--action-accent-hover)]",
+        accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent)] hover:bg-[var(--action-accent-hover)]",
         success: "border-transparent bg-[var(--success-bg)] text-[var(--success)] hover:bg-[var(--action-hover)]",
         warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)] hover:bg-[var(--action-hover)]",
         danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]",
@@ -6110,10 +6173,10 @@ var chipVariants = cva13(
         className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
       },
       {
-        // R10 — wash 패턴 정합 (--accent-bg-strong deep olive wash / --accent-fg olive/lime text).
+        // R10 — wash 패턴 정합 (--accent-bg-strong deep olive wash / --accent olive/lime text).
         pressed: true,
         tone: "accent",
-        className: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-[var(--accent-fg)]"
+        className: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-[var(--accent)]"
       },
       {
         pressed: true,
@@ -6129,7 +6192,7 @@ var chipVariants = cva13(
     }
   }
 );
-var chipCountVariants = cva13(
+var chipCountVariants = cva12(
   [
     "inline-flex min-w-[var(--space-4)] items-center justify-center",
     "rounded-[var(--radius-full)] px-[var(--space-1)]",
@@ -6139,7 +6202,7 @@ var chipCountVariants = cva13(
     variants: {
       tone: {
         neutral: "bg-[var(--bg-raised)] text-text-tertiary",
-        accent: "bg-[var(--accent-solid)] text-[var(--accent-on-solid)]",
+        accent: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
         success: "bg-[var(--success)] text-[var(--success-contrast)]",
         warning: "bg-[var(--warning)] text-[var(--warning-contrast)]",
         danger: "bg-[var(--error)] text-[var(--error-contrast)]",
@@ -6254,9 +6317,9 @@ Chip.displayName = "Chip";
 
 // src/components/ui/empty-state.tsx
 import * as React32 from "react";
-import { cva as cva14 } from "class-variance-authority";
+import { cva as cva13 } from "class-variance-authority";
 import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
-var emptyStateBaseVariants = cva14(
+var emptyStateBaseVariants = cva13(
   [
     "flex flex-col items-center justify-center text-center",
     "text-foreground"
@@ -6304,7 +6367,7 @@ function emptyStateVariants({
     className
   );
 }
-var emptyStateIconVariants = cva14(
+var emptyStateIconVariants = cva13(
   [
     "inline-flex items-center justify-center rounded-[var(--radius-full)]",
     "border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-tertiary"
@@ -6397,9 +6460,9 @@ EmptyState.displayName = "EmptyState";
 // src/components/ui/error-state.tsx
 import * as React33 from "react";
 import { AlertTriangle } from "lucide-react";
-import { cva as cva15 } from "class-variance-authority";
+import { cva as cva14 } from "class-variance-authority";
 import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
-var errorStateVariants = cva15(
+var errorStateVariants = cva14(
   [
     "flex flex-col items-center justify-center text-center",
     "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -6484,9 +6547,9 @@ ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
 import * as React34 from "react";
-import { cva as cva16 } from "class-variance-authority";
+import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx43 } from "react/jsx-runtime";
-var skeletonVariants = cva16(
+var skeletonVariants = cva15(
   [
     "animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
     "motion-reduce:animate-none motion-reduce:opacity-80"
@@ -6504,7 +6567,7 @@ var skeletonVariants = cva16(
     }
   }
 );
-var spinnerVariants = cva16(
+var spinnerVariants = cva15(
   [
     "inline-block shrink-0 animate-spin rounded-[var(--radius-full)] border-2",
     "border-[var(--border-subtle)] border-t-[var(--primary)]",
@@ -6635,9 +6698,9 @@ Spinner.displayName = "Spinner";
 
 // src/components/ui/icon-button.tsx
 import * as React35 from "react";
-import { cva as cva17 } from "class-variance-authority";
+import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
-var iconButtonVariants = cva17(
+var iconButtonVariants = cva16(
   [
     "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center",
     "rounded-[var(--radius-sm)] border font-medium",
@@ -6683,7 +6746,7 @@ var iconButtonVariants = cva17(
     }
   }
 );
-var iconButtonBadgeVariants = cva17(
+var iconButtonBadgeVariants = cva16(
   [
     "pointer-events-none absolute right-0 top-0 inline-flex",
     "olun-icon-button__badge",
@@ -6695,7 +6758,7 @@ var iconButtonBadgeVariants = cva17(
   {
     variants: {
       tone: {
-        info: "bg-[var(--accent-solid)] text-[var(--accent-on-solid)]",
+        info: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
         error: "bg-[var(--error)] text-[var(--error-contrast)]"
       }
     },
@@ -6780,7 +6843,7 @@ IconButton.displayName = "IconButton";
 // src/components/ui/pagination.tsx
 import * as React36 from "react";
 import { ChevronsLeft, ChevronLeft, ChevronRight as ChevronRight2, ChevronsRight } from "lucide-react";
-import { cva as cva18 } from "class-variance-authority";
+import { cva as cva17 } from "class-variance-authority";
 
 // src/components/ui/page-size-select.tsx
 import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -6835,7 +6898,7 @@ function PageSizeSelect({
 
 // src/components/ui/pagination.tsx
 import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
-var paginationVariants = cva18(
+var paginationVariants = cva17(
   [
     "flex w-full flex-col gap-[var(--space-3)]",
     "text-sm text-text-secondary",
@@ -6853,7 +6916,7 @@ var paginationVariants = cva18(
     }
   }
 );
-var paginationControlVariants = cva18(
+var paginationControlVariants = cva17(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
     "border-transparent bg-transparent font-medium text-text-secondary",
@@ -7056,26 +7119,26 @@ var Pagination = React36.forwardRef(
 Pagination.displayName = "Pagination";
 
 // src/components/ui/mode-toggle.tsx
-import { cva as cva19 } from "class-variance-authority";
+import { cva as cva18 } from "class-variance-authority";
 import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
-var modeToggleVariants = cva19(
+var modeToggleVariants = cva18(
   [
     "inline-flex items-center rounded-[var(--radius-sm)] border border-[var(--border-subtle)]",
     "bg-[var(--bg-raised)] p-[2px]"
   ].join(" ")
 );
-var modeToggleItemVariants = cva19(
+var modeToggleItemVariants = cva18(
   [
     "inline-flex min-h-[28px] cursor-pointer items-center justify-center gap-[var(--space-1)]",
     "rounded-[calc(var(--radius-sm)_-_2px)] px-[var(--space-3)] py-[var(--space-1)]",
     "font-[family-name:var(--font-display)] text-xs font-medium leading-none",
     "text-text-secondary transition-[background-color,color,box-shadow]",
-    "duration-[var(--duration-fast)] ease-[var(--ease-standard)]",
+    "duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
     "hover:text-foreground",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
     "disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:text-text-disabled",
     "data-[state=active]:bg-[var(--bg-surface)] data-[state=active]:font-semibold",
-    "data-[state=active]:text-foreground data-[state=active]:shadow-[var(--elevation-1)]",
+    "data-[state=active]:text-foreground data-[state=active]:shadow-[var(--shadow-1)]",
     "[&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:stroke-[1.75]"
   ].join(" ")
 );
@@ -7126,9 +7189,9 @@ function ModeToggle({
 
 // src/components/ui/action-footer.tsx
 import * as React37 from "react";
-import { cva as cva20 } from "class-variance-authority";
+import { cva as cva19 } from "class-variance-authority";
 import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
-var actionFooterVariants = cva20(
+var actionFooterVariants = cva19(
   [
     "flex flex-wrap items-center gap-[var(--space-4)] border-t border-[var(--border-subtle)]",
     "px-[var(--space-6)] py-[var(--space-4)]",
@@ -7150,7 +7213,7 @@ var actionFooterVariants = cva20(
     }
   }
 );
-var actionFooterStatusVariants = cva20(
+var actionFooterStatusVariants = cva19(
   [
     "flex min-w-0 flex-1 items-center gap-[var(--space-2)]",
     "text-sm leading-snug text-text-tertiary"
@@ -7283,21 +7346,21 @@ ActionFooter.displayName = "ActionFooter";
 
 // src/components/ui/toast.tsx
 import * as React38 from "react";
-import { cva as cva21 } from "class-variance-authority";
+import { cva as cva20 } from "class-variance-authority";
 import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
-var DOT2 = {
+var DOT3 = {
   default: "var(--neutral)",
   success: "var(--success)",
   warning: "var(--warning)",
   info: "var(--info)",
   error: "var(--error)"
 };
-var toastVariants = cva21(
+var toastVariants = cva20(
   [
     "flex min-w-[280px] max-w-[420px] items-center",
     "gap-[11px] rounded-[10px] border border-[var(--border)]",
     "px-[14px] py-[11px]",
-    "shadow-[var(--elevation-4)]",
+    "shadow-[var(--shadow-4)]",
     "pointer-events-auto",
     "motion-reduce:animate-none"
   ].join(" "),
@@ -7314,7 +7377,7 @@ var toastVariants = cva21(
     defaultVariants: { variant: "default" }
   }
 );
-var toastViewportVariants = cva21(
+var toastViewportVariants = cva20(
   [
     "fixed bottom-[var(--space-6)] right-[var(--space-6)] z-[var(--z-toast,50)]",
     "flex w-[min(420px,calc(100vw-var(--space-12)))] list-none flex-col gap-[var(--space-2)]",
@@ -7465,7 +7528,7 @@ var ToastRoot = React38.forwardRef(
               "aria-hidden": "true",
               "data-slot": "toast-dot",
               className: "size-[7px] shrink-0 rounded-full",
-              style: { background: DOT2[variant] ?? DOT2.default }
+              style: { background: DOT3[variant] ?? DOT3.default }
             }
           ),
           /* @__PURE__ */ jsxs44("div", { "data-slot": "toast-body", className: "min-w-0 flex-1", children: [
@@ -7545,10 +7608,10 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
 
 // src/components/ui/otp-field.tsx
 import * as React39 from "react";
-import { cva as cva22 } from "class-variance-authority";
+import { cva as cva21 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
-var otpFieldVariants = cva22("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
+import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+var otpFieldVariants = cva21("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
   variants: {
     size: {
       default: "",
@@ -7559,7 +7622,7 @@ var otpFieldVariants = cva22("flex w-full min-w-0 flex-col gap-[var(--space-3)]"
     size: "default"
   }
 });
-var otpFieldGroupVariants = cva22("flex items-start gap-[var(--space-2)] pt-[var(--space-1)]", {
+var otpFieldGroupVariants = cva21("flex items-start gap-[var(--space-2)] pt-[var(--space-1)]", {
   variants: {
     size: {
       default: "",
@@ -7575,7 +7638,7 @@ var otpFieldGroupVariants = cva22("flex items-start gap-[var(--space-2)] pt-[var
     fluid: false
   }
 });
-var otpCellVariants = cva22(
+var otpCellVariants = cva21(
   [
     "flex items-center justify-center rounded-[var(--radius-sm)] border",
     "border-[var(--border)] text-foreground",
@@ -7630,7 +7693,7 @@ var otpCellVariants = cva22(
     }
   }
 );
-var otpFieldMessageVariants = cva22("flex items-start gap-[var(--space-1)] text-xs leading-snug", {
+var otpFieldMessageVariants = cva21("flex items-start gap-[var(--space-1)] text-xs leading-snug", {
   variants: {
     state: {
       default: "text-text-tertiary",
@@ -7869,7 +7932,7 @@ var OTPField = React39.forwardRef(
               "data-slot": "otp-field-message",
               "data-kind": errorText ? "error" : "helper",
               className: otpFieldMessageVariants({ state: resolvedState }),
-              children: errorText ? /* @__PURE__ */ jsxs45(Fragment9, { children: [
+              children: errorText ? /* @__PURE__ */ jsxs45(Fragment8, { children: [
                 /* @__PURE__ */ jsx50(
                   AlertCircle4,
                   {
@@ -7905,9 +7968,9 @@ OTPField.displayName = "OTPField";
 // src/components/ui/search-field.tsx
 import * as React40 from "react";
 import { Search, X as X4 } from "lucide-react";
-import { cva as cva23 } from "class-variance-authority";
+import { cva as cva22 } from "class-variance-authority";
 import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
-var searchFieldVariants = cva23("relative flex w-full items-center", {
+var searchFieldVariants = cva22("relative flex w-full items-center", {
   variants: {
     size: {
       // Field-control scale follows Select: sm/md/lg = 30/32/36px. Pair with Button sm/md/lg.
@@ -7920,7 +7983,7 @@ var searchFieldVariants = cva23("relative flex w-full items-center", {
     size: "md"
   }
 });
-var searchFieldInputVariants = cva23(
+var searchFieldInputVariants = cva22(
   [
     "h-full w-full rounded-[var(--radius-sm)] border",
     "border-[var(--border)]",
@@ -8063,9 +8126,9 @@ SearchField.displayName = "SearchField";
 
 // src/components/ui/checkbox-group.tsx
 import * as React41 from "react";
-import { cva as cva24 } from "class-variance-authority";
+import { cva as cva23 } from "class-variance-authority";
 import { jsx as jsx52 } from "react/jsx-runtime";
-var checkboxGroupVariants = cva24("gap-[var(--space-2)]", {
+var checkboxGroupVariants = cva23("gap-[var(--space-2)]", {
   variants: {
     appearance: {
       plain: "flex",
@@ -8165,11 +8228,11 @@ CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/ui/radio-group.tsx
 import * as React42 from "react";
-import { cva as cva25 } from "class-variance-authority";
+import { cva as cva24 } from "class-variance-authority";
 import { Circle } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
-var radioGroupVariants = cva25("gap-[var(--space-2)]", {
+var radioGroupVariants = cva24("gap-[var(--space-2)]", {
   variants: {
     appearance: {
       plain: "flex",
@@ -8194,7 +8257,7 @@ var radioGroupVariants = cva25("gap-[var(--space-2)]", {
     columns: "one"
   }
 });
-var radioVariants = cva25(
+var radioVariants = cva24(
   [
     "group w-full cursor-pointer text-left transition-colors motion-reduce:transition-none",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
@@ -8236,7 +8299,7 @@ var radioVariants = cva25(
     }
   }
 );
-var radioControlVariants = cva25(
+var radioControlVariants = cva24(
   [
     "flex size-[calc(var(--space-4)+var(--space-1))] shrink-0 items-center justify-center",
     "rounded-[var(--radius-full)] border border-[var(--border-strong)] bg-[var(--bg-surface)] text-transparent",
@@ -8471,16 +8534,16 @@ function Progress({
 // src/components/ui/tree-view.tsx
 import * as React43 from "react";
 import { ChevronRight as ChevronRight3 } from "lucide-react";
-import { cva as cva26 } from "class-variance-authority";
+import { cva as cva25 } from "class-variance-authority";
 import { jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
-var treeViewVariants = cva26(
+var treeViewVariants = cva25(
   "m-0 list-none p-[var(--space-1)] text-body-sm text-foreground"
 );
-var treeItemRowVariants = cva26(
+var treeItemRowVariants = cva25(
   [
     "flex min-h-[32px] w-full cursor-pointer select-none items-center gap-[var(--space-2)]",
     "rounded-[var(--radius-sm)] py-[var(--space-2)] pr-[var(--space-3)]",
-    "text-text-secondary transition-colors duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
+    "text-text-secondary transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
     "hover:bg-[var(--action-hover)] hover:text-foreground",
     // Roving focus lives on the treeitem <li> (named group/treeitem); the ring is
     // painted on the visual row so it never wraps the nested child group.
@@ -8692,7 +8755,7 @@ function TreeView({
                           "aria-hidden": "true",
                           "data-slot": "treeitem-chevron",
                           className: cn(
-                            "size-[16px] transition-transform duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
+                            "size-[16px] transition-transform duration-[var(--dur-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
                             expanded && "rotate-90"
                           ),
                           strokeWidth: 2
@@ -8759,7 +8822,7 @@ function OlunSymbol({ size = 28, className }) {
             style: { color: "var(--text-primary)" }
           }
         ),
-        /* @__PURE__ */ jsx57("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-solid)" })
+        /* @__PURE__ */ jsx57("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-pop)" })
       ]
     }
   );
@@ -8793,7 +8856,7 @@ function OlunLogo({
             },
             children: [
               "OLUN",
-              /* @__PURE__ */ jsx57("span", { style: { color: "var(--accent-fg)" }, children: "." })
+              /* @__PURE__ */ jsx57("span", { style: { color: "var(--accent)" }, children: "." })
             ]
           }
         )
@@ -8862,7 +8925,7 @@ function ThemeFab({ variant = "square" } = {}) {
     border: "1px solid var(--border-accent)",
     background: "var(--theme-fab-bg, var(--bg-surface))",
     color: "var(--theme-fab-icon, var(--text-primary))",
-    boxShadow: "var(--elevation-4)",
+    boxShadow: "var(--shadow-4)",
     backdropFilter: "blur(16px)",
     WebkitBackdropFilter: "blur(16px)",
     zIndex: 9999
@@ -9144,8 +9207,6 @@ export {
   toastViewportVariants,
   treeItemRowVariants,
   treeViewVariants,
-  twoTierBadgeLineVariants,
-  twoTierBadgeVariants,
   useOlunTheme,
   usePermission
 };