@pylerai/design-system 2.3.1-rc.1 → 2.5.0

package/README.md

@@ -207,6 +207,7 @@ flatPylerLightTokens.forEach(({ path, hex, cssVar }) => { /* 문서화·순회
 | Body 4 M | 12px | 500 | `text-body-4-m` | `.ds-type-body-4-m` |
 | Body 4 R | 12px | 400 | `text-body-4-r` | `.ds-type-body-4-r` |
 | Label 1 R | 11px | 400 | `text-label-1-r` | `.ds-type-label-1-r` |
+| Label 1 SB | 11px | 600 | `text-label-1-sb` | `.ds-type-label-1-sb` |
 
 폰트는 Pretendard JP(`--ds-font-sans`)를 사용합니다. `@pylerai/design-system/fonts.css`를 함께 로드하면 등록됩니다(위 "폰트" 절 참고).
 
@@ -274,7 +275,7 @@ Dim은 `var(--ds-dim-default)`로 제공됩니다. Storybook **Foundation → Ra
 - `Checkbox`·`Radio`는 자체적으로 `<label>`을 렌더합니다. **밖에서 `<label>`로 감싸지 마세요** — label이 중첩되어 연결이 깨집니다. 텍스트는 children으로 넘기고(`<Checkbox>동의</Checkbox>`), 텍스트가 없으면 `aria-label`을 지정하세요.
 - `Toggle`, 아이콘 전용 `Button`, 라벨 없는 `Dropdown`/`SearchField`에는 `aria-label`이 필요합니다.
 
-> ⚠️ **컬러 대비는 아직 WCAG AA를 충족하지 못합니다.** `--ds-text-normal`(#969696)은 흰 배경에서 2.95:1, `--ds-text-disabled`(#cccccc)는 1.6:1, 흰 글자 + `--ds-primary-blue-normal`(#2c80f5)은 3.8:1로 기준(4.5:1)에 미달합니다. 토큰을 바꾸면 제품 전체 색이 바뀌므로 디자이너 결정이 필요한 사안이며, 그때까지 axe의 `color-contrast` 규칙만 꺼 둔 상태입니다(`.storybook/preview.ts`).
+> ⚠️ **컬러 대비는 아직 WCAG AA를 충족하지 못합니다.** `--ds-text-normal`(#afafaf, 이전 #969696)은 흰 배경에서 2.2:1, `--ds-text-disabled`(#cccccc)는 1.6:1, 흰 글자 + `--ds-primary-blue-normal`(#2c80f5)은 3.8:1로 기준(4.5:1)에 미달합니다. 토큰을 바꾸면 제품 전체 색이 바뀌므로 디자이너 결정이 필요한 사안이며, 그때까지 axe의 `color-contrast` 규칙만 꺼 둔 상태입니다(`.storybook/preview.ts`).
 
 ## 📁 프로젝트 구조
 

package/dist/components/ui/badge.d.ts

@@ -2,9 +2,12 @@ import { DsSize } from '../../lib/size';
 import * as React from "react";
 export type BadgeColor = "normal" | "neutral" | "negative" | "positive";
 export type BadgeSize = Extract<DsSize, "md" | "sm">;
+/** `outline` 흰 바탕 + 테두리(기본) · `surface` 테두리 없이 연한 면(Figma 2026-11 추가) */
+export type BadgeVariant = "outline" | "surface";
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     color?: BadgeColor;
     size?: BadgeSize;
+    variant?: BadgeVariant;
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export { Badge };

package/dist/components/ui/badge.js

@@ -1,8 +1,13 @@
 "use client";
-import { jsx as x } from "react/jsx-runtime";
-import { cn as i } from "../../lib/utils.js";
-import * as l from "react";
-const b = {
+import { jsx as l } from "react/jsx-runtime";
+import { cn as b } from "../../lib/utils.js";
+import * as c from "react";
+const g = {
+  normal: "bg-ds-primary-blue-muted",
+  neutral: "bg-ds-surface-normal",
+  negative: "bg-ds-primary-red-muted",
+  positive: "bg-ds-primary-green-muted"
+}, u = {
   normal: {
     border: "border-ds-primary-blue-normal",
     text: "text-ds-primary-blue-normal"
@@ -19,31 +24,34 @@ const b = {
     border: "border-ds-primary-green-normal",
     text: "text-ds-primary-green-normal"
   }
-}, c = {
+}, f = {
   md: { padding: "px-2 pt-[5px] pb-[3px]", text: "text-body-3-m" },
   sm: { padding: "px-1 pt-[3px] pb-[1px]", text: "text-label-1-r" }
-}, g = l.forwardRef(
-  ({ color: r = "normal", size: e = "md", className: t, children: o, ...s }, d) => {
-    const { border: a, text: n } = b[r], { padding: p, text: m } = c[e];
-    return /* @__PURE__ */ x(
+}, y = {
+  md: { padding: "px-2 pt-[5px] pb-[3px]", text: "text-body-3-m" },
+  sm: { padding: "px-1.5 pt-[5px] pb-[3px]", text: "text-label-1-sb" }
+}, C = c.forwardRef(
+  ({ color: e = "normal", size: t = "md", variant: s = "outline", className: a, children: d, ...o }, n) => {
+    const r = s === "surface", { border: p, text: m } = u[e], { padding: i, text: x } = (r ? y : f)[t];
+    return /* @__PURE__ */ l(
       "span",
       {
-        ref: d,
-        className: i(
-          "inline-flex items-center justify-center border rounded-ds-ss bg-ds-background-default whitespace-nowrap",
-          a,
-          p,
-          n,
+        ref: n,
+        className: b(
+          "inline-flex items-center justify-center rounded-ds-ss whitespace-nowrap",
+          r ? g[e] : ["border bg-ds-background-default", p],
+          i,
           m,
-          t
+          x,
+          a
         ),
-        ...s,
-        children: o
+        ...o,
+        children: d
       }
     );
   }
 );
-g.displayName = "Badge";
+C.displayName = "Badge";
 export {
-  g as Badge
+  C as Badge
 };

package/dist/components/ui/button.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "text" | "icon" | "filled" | "outlined" | "indicator" | null | undefined;
-    color?: "blue" | "red" | "green" | null | undefined;
+    color?: "blue" | "red" | "green" | "neutral" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color">, VariantProps<typeof buttonVariants> {

package/dist/components/ui/button.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as a, jsxs as O, Fragment as k } from "react/jsx-runtime";
+import { jsx as s, jsxs as O, Fragment as k } from "react/jsx-runtime";
 import { cn as m } from "../../lib/utils.js";
 import { Slot as B } from "@radix-ui/react-slot";
 import { cva as R } from "class-variance-authority";
-import * as g from "react";
+import * as p from "react";
 const v = R(
   "inline-flex items-center justify-center whitespace-nowrap font-sans transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none select-none",
   {
@@ -12,13 +12,16 @@ const v = R(
         filled: "rounded-ds-md",
         outlined: "rounded-ds-md border border-ds-line-normal bg-ds-background-default text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:bg-ds-surface-normal disabled:text-ds-text-disabled",
         text: "rounded-ds-md bg-transparent text-ds-text-strong disabled:text-ds-text-disabled",
-        icon: "rounded-ds-md",
+        // radius 는 size compound 에서 — buttonVariants 를 cn 없이 직접 쓰는 앱에서도 sm 4px 이 나오도록
+        icon: "",
         indicator: "rounded-full inline-block"
       },
       color: {
         blue: "",
         red: "",
-        green: ""
+        green: "",
+        /** 회색 버튼 — Figma 2026-11 추가. filled·icon 에서 쓴다(indicator 는 대상 아님) */
+        neutral: ""
       },
       size: {
         sm: "h-7 gap-1",
@@ -44,6 +47,11 @@ const v = R(
         color: "green",
         className: "bg-ds-primary-green-normal text-white hover:bg-ds-primary-green-hovered active:bg-ds-primary-green-hovered disabled:bg-ds-primary-green-disabled disabled:text-white focus-visible:ring-ds-primary-green-normal"
       },
+      {
+        variant: "filled",
+        color: "neutral",
+        className: "bg-ds-surface-strong text-ds-text-strong hover:bg-ds-surface-hovered active:bg-ds-surface-hovered disabled:bg-ds-surface-disabled disabled:text-ds-text-disabled focus-visible:ring-ds-text-strong"
+      },
       // ── icon filled × color ───────────────────────────────────────────────
       {
         variant: "icon",
@@ -60,17 +68,22 @@ const v = R(
         color: "green",
         className: "bg-ds-primary-green-normal text-white hover:bg-ds-primary-green-hovered active:bg-ds-primary-green-hovered disabled:bg-ds-primary-green-disabled disabled:text-white focus-visible:ring-ds-primary-green-normal"
       },
+      {
+        variant: "icon",
+        color: "neutral",
+        className: "bg-ds-surface-strong text-ds-text-strong hover:bg-ds-surface-hovered active:bg-ds-surface-hovered disabled:bg-ds-surface-disabled disabled:text-ds-text-disabled focus-visible:ring-ds-text-strong"
+      },
       // ── icon × size (fixed square dimensions + SVG sizing) ──────────────
-      { variant: "icon", size: "sm", className: "h-7 w-7 p-0 rounded [&_svg]:size-3" },
-      { variant: "icon", size: "md", className: "h-8 w-8 p-0 [&_svg]:size-5" },
-      { variant: "icon", size: "lg", className: "h-9 w-9 p-0 [&_svg]:size-5" },
-      { variant: "icon", size: "xl", className: "h-11 w-11 p-0 [&_svg]:size-7" },
+      { variant: "icon", size: "sm", className: "h-7 w-7 p-0 rounded-ds-ss [&_svg]:size-3" },
+      { variant: "icon", size: "md", className: "h-8 w-8 p-0 rounded-ds-md [&_svg]:size-5" },
+      { variant: "icon", size: "lg", className: "h-9 w-9 p-0 rounded-ds-md [&_svg]:size-5" },
+      { variant: "icon", size: "xl", className: "h-11 w-11 p-0 rounded-ds-md [&_svg]:size-7" },
       // ── filled/outlined/text size → padding + typography ─────────────────
-      { variant: "filled", size: "sm", className: "px-2 text-body-4-m rounded" },
+      { variant: "filled", size: "sm", className: "px-2 text-body-4-m" },
       { variant: "filled", size: "md", className: "px-3 text-body-3-m" },
       { variant: "filled", size: "lg", className: "px-3.5 text-body-2-m" },
       { variant: "filled", size: "xl", className: "px-[18px] text-body-2-m" },
-      { variant: "outlined", size: "sm", className: "px-2 text-body-4-m rounded" },
+      { variant: "outlined", size: "sm", className: "px-2 text-body-4-m" },
       { variant: "outlined", size: "md", className: "px-3 text-body-3-m" },
       { variant: "outlined", size: "lg", className: "px-3.5 text-body-2-m" },
       { variant: "outlined", size: "xl", className: "px-[18px] text-body-2-m" },
@@ -107,9 +120,9 @@ const v = R(
       size: "md"
     }
   }
-), _ = g.forwardRef(
+), _ = p.forwardRef(
   ({
-    className: s,
+    className: a,
     variant: e,
     color: i,
     size: r,
@@ -120,44 +133,44 @@ const v = R(
     rightIcon: t,
     children: b,
     ...h
-  }, y) => {
-    const f = c ? B : "button", N = e === "icon" && x === "outlined" ? "bg-ds-background-default border border-ds-line-normal text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:text-ds-text-disabled" : void 0, l = !!d, p = !!t, z = e !== "icon" && e !== "indicator" && (l || p) ? (() => {
-      const n = r ?? "md", o = {
+  }, f) => {
+    const y = c ? B : "button", N = e === "icon" && x === "outlined" ? "bg-ds-background-default border border-ds-line-normal text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:text-ds-text-disabled" : void 0, l = !!d, g = !!t, z = e !== "icon" && e !== "indicator" && (l || g) ? (() => {
+      const o = r ?? "md", n = {
         sm: { leftOnly: "pl-1 pr-2", rightOnly: "pl-2 pr-1", both: "px-1" },
         md: { leftOnly: "pl-2 pr-3", rightOnly: "pl-3 pr-2", both: "px-2" },
         lg: { leftOnly: "pl-2.5 pr-3.5", rightOnly: "pl-3.5 pr-2.5", both: "px-2.5" },
         xl: { leftOnly: "pl-3.5 pr-[18px]", rightOnly: "pl-[18px] pr-3.5", both: "px-3.5" }
-      }, w = l && p ? o[n].both : l ? o[n].leftOnly : o[n].rightOnly;
+      }, w = l && g ? n[o].both : l ? n[o].leftOnly : n[o].rightOnly;
       return m(w, "gap-1");
     })() : void 0;
-    return /* @__PURE__ */ a(
-      f,
+    return /* @__PURE__ */ s(
+      y,
       {
         className: m(
           v({ variant: e, color: i, size: r }),
           e === "icon" && u === "round" && "rounded-full",
           N,
           z,
-          s
+          a
         ),
-        ref: y,
+        ref: f,
         ...h,
         children: c ? b : /* @__PURE__ */ O(k, { children: [
-          d && /* @__PURE__ */ a("span", { className: "shrink-0", children: d }),
+          d && /* @__PURE__ */ s("span", { className: "shrink-0", children: d }),
           b,
-          t && /* @__PURE__ */ a("span", { className: "shrink-0", children: t })
+          t && /* @__PURE__ */ s("span", { className: "shrink-0", children: t })
         ] })
       }
     );
   }
 );
 _.displayName = "Button";
-const j = g.forwardRef(
-  ({ color: s = "blue", size: e = "md", className: i }, r) => /* @__PURE__ */ a(
+const j = p.forwardRef(
+  ({ color: a = "blue", size: e = "md", className: i }, r) => /* @__PURE__ */ s(
     "span",
     {
       className: m(
-        v({ variant: "indicator", color: s, size: e }),
+        v({ variant: "indicator", color: a, size: e }),
         i
       ),
       ref: r

package/dist/components/ui/dropdown.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { DropdownArrowIcon as V, SelectCheckIcon as ee, CheckboxCheckedIcon as re, CheckboxUncheckedIcon as te, RadioCheckedIcon as ne, RadioUncheckedIcon as se } from "../../lib/icons.js";
-import { cn as f } from "../../lib/utils.js";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { DropdownArrowIcon as V, SelectCheckIcon as ee, CheckboxCheckedIcon as te, CheckboxUncheckedIcon as re, RadioCheckedIcon as ne, RadioUncheckedIcon as se } from "../../lib/icons.js";
+import { cn as x } from "../../lib/utils.js";
 import * as s from "react";
 import { Button as U } from "./button.js";
 const k = {
@@ -22,20 +22,20 @@ const k = {
   }
 }, ae = s.forwardRef(
   ({
-    type: c = "default",
+    type: o = "default",
     options: i,
     value: R,
     onValueChange: K,
-    values: m,
+    values: b,
     onValuesChange: T,
     placeholder: D = "선택해주세요",
-    label: h,
+    label: p,
     showLabel: v = !0,
     require: E,
-    size: g = "lg",
-    disabled: x,
+    size: h = "lg",
+    disabled: d,
     readOnly: w,
-    error: b,
+    error: u,
     hint: N,
     leftIcon: j,
     showButtons: q,
@@ -47,181 +47,184 @@ const k = {
     className: J,
     "aria-label": P
   }, Q) => {
-    const [n, l] = s.useState(!1), [a, p] = s.useState(-1), [$, A] = s.useState("keyboard"), y = s.useRef(null), L = s.useRef(null), M = s.useRef(null), d = s.useId(), I = (e) => `${d}-option-${e}`;
+    const [t, c] = s.useState(!1), [a, g] = s.useState(-1), [$, A] = s.useState("keyboard"), y = s.useRef(null), L = s.useRef(null), M = s.useRef(null), f = s.useId(), I = (e) => `${f}-option-${e}`;
     s.useEffect(() => {
       const e = (r) => {
-        y.current && !y.current.contains(r.target) && l(!1);
+        y.current && !y.current.contains(r.target) && c(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
     }, []), s.useEffect(() => {
-      n || p(-1);
-    }, [n]), s.useEffect(() => {
-      !n || a < 0 || L.current?.querySelector(`#${CSS.escape(I(a))}`)?.scrollIntoView({ block: "nearest" });
-    }, [n, a]);
-    const W = (e) => c === "checkbox" ? m?.includes(e) ?? !1 : e === R, C = i.find((e) => e.value === R), X = () => c === "checkbox" ? !m || m.length === 0 ? D : i.filter((r) => m.includes(r.value)).map((r) => r.label).join(", ") : C ? C.label : D, Y = () => {
-      x || w || l((e) => !e);
+      t || g(-1);
+    }, [t]), s.useEffect(() => {
+      !t || a < 0 || L.current?.querySelector(`#${CSS.escape(I(a))}`)?.scrollIntoView({ block: "nearest" });
+    }, [t, a]);
+    const W = (e) => o === "checkbox" ? b?.includes(e) ?? !1 : e === R, C = i.find((e) => e.value === R), X = () => o === "checkbox" ? !b || b.length === 0 ? D : i.filter((r) => b.includes(r.value)).map((r) => r.label).join(", ") : C ? C.label : D, Y = () => {
+      d || w || c((e) => !e);
     }, O = (e) => {
-      if (c === "checkbox") {
-        const r = m ?? [], o = r.includes(e) ? r.filter((S) => S !== e) : [...r, e];
-        T?.(o);
+      if (o === "checkbox") {
+        const r = b ?? [], l = r.includes(e) ? r.filter((S) => S !== e) : [...r, e];
+        T?.(l);
       } else
-        K?.(e), l(!1);
-    }, Z = c === "checkbox" ? (m?.length ?? 0) > 0 : !!C, _ = (e) => {
-      if (x || w) return;
-      const r = (o) => {
-        e.preventDefault(), n || l(!0), A("keyboard"), p(o);
+        K?.(e), c(!1);
+    }, Z = o === "checkbox" ? (b?.length ?? 0) > 0 : !!C, _ = (e) => {
+      if (d || w) return;
+      const r = (l) => {
+        e.preventDefault(), t || c(!0), A("keyboard"), g(l);
       };
       switch (e.key) {
         case "ArrowDown":
-          return r(n ? Math.min(a + 1, i.length - 1) : 0);
+          return r(t ? Math.min(a + 1, i.length - 1) : 0);
         case "ArrowUp":
-          return r(n ? Math.max(a - 1, 0) : i.length - 1);
+          return r(t ? Math.max(a - 1, 0) : i.length - 1);
         case "Home":
-          return n ? r(0) : void 0;
+          return t ? r(0) : void 0;
         case "End":
-          return n ? r(i.length - 1) : void 0;
+          return t ? r(i.length - 1) : void 0;
         case "Enter":
         case " ":
-          e.preventDefault(), n ? a >= 0 && O(i[a].value) : l(!0);
+          e.preventDefault(), t ? a >= 0 && O(i[a].value) : c(!0);
           return;
         case "Escape":
-          n && (e.preventDefault(), l(!1), M.current?.focus());
+          t && (e.preventDefault(), c(!1), M.current?.focus());
           return;
         case "Tab":
-          l(!1);
+          c(!1);
           return;
         default:
           return;
       }
     };
-    return /* @__PURE__ */ u("div", { ref: Q, className: f("flex flex-col gap-2", G), children: [
-      v && h && /* @__PURE__ */ u("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
-        /* @__PURE__ */ t("span", { id: `${d}-label`, className: "text-body-2-r text-ds-text-strong", children: h }),
-        E && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
+    return /* @__PURE__ */ m("div", { ref: Q, className: x("flex flex-col gap-2", G), children: [
+      v && p && /* @__PURE__ */ m("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
+        /* @__PURE__ */ n("span", { id: `${f}-label`, className: "text-body-2-r text-ds-text-strong", children: p }),
+        E && /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
       ] }),
-      /* @__PURE__ */ u("div", { ref: y, className: "relative", children: [
-        /* @__PURE__ */ u(
+      /* @__PURE__ */ m("div", { ref: y, className: "relative", children: [
+        /* @__PURE__ */ m(
           "button",
           {
             ref: M,
             type: "button",
             role: "combobox",
-            "aria-expanded": n,
+            "aria-expanded": t,
             "aria-haspopup": "listbox",
-            "aria-controls": n ? d : void 0,
-            "aria-activedescendant": n && a >= 0 ? I(a) : void 0,
-            "aria-labelledby": v && h ? `${d}-label` : void 0,
-            "aria-label": v && h ? void 0 : P,
-            "aria-invalid": b ? !0 : void 0,
-            "aria-describedby": b || N ? `${d}-description` : void 0,
+            "aria-controls": t ? f : void 0,
+            "aria-activedescendant": t && a >= 0 ? I(a) : void 0,
+            "aria-labelledby": v && p ? `${f}-label` : void 0,
+            "aria-label": v && p ? void 0 : P,
+            "aria-invalid": u ? !0 : void 0,
+            "aria-describedby": u || N ? `${f}-description` : void 0,
             "aria-required": E || void 0,
-            disabled: x,
+            disabled: d,
             onClick: Y,
             onKeyDown: _,
-            className: f(
+            className: x(
               "flex items-center w-full rounded-ds-md border transition-colors",
-              x ? "bg-ds-surface-strong border-ds-line-normal cursor-not-allowed" : w ? "bg-ds-surface-normal border-ds-line-normal cursor-default" : b ? "bg-ds-background-default border-ds-primary-red-normal hover:bg-ds-surface-normal" : n ? "bg-ds-background-default border-ds-primary-blue-normal" : "bg-ds-background-default border-ds-line-normal hover:bg-ds-surface-normal hover:border-ds-primary-blue-normal",
-              k[g].trigger,
+              // SearchField·InputField(src/lib/field-box.ts)와 같은 규칙. 트리거는 버튼이라 focus-within 대신
+              // 열림 상태와 focus-visible 로 표현한다. 배경은 disabled·readOnly 우선, 테두리는 error 우선
+              d ? "bg-ds-surface-strong cursor-not-allowed" : w ? "bg-ds-surface-strong cursor-default" : u || t ? "bg-ds-background-default" : "bg-ds-surface-normal",
+              u ? "border-ds-primary-red-normal" : d ? "border-transparent" : t ? "border-ds-primary-blue-normal" : "border-transparent focus-visible:outline-none focus-visible:border-ds-primary-blue-normal",
+              k[h].trigger,
               J
             ),
             children: [
-              j && /* @__PURE__ */ t("span", { className: "shrink-0 flex items-center justify-center text-ds-icon-normal", children: j }),
-              /* @__PURE__ */ t(
+              j && /* @__PURE__ */ n("span", { className: "shrink-0 flex items-center justify-center text-ds-icon-normal", children: j }),
+              /* @__PURE__ */ n(
                 "span",
                 {
-                  className: f(
+                  className: x(
                     "flex-1 min-w-0 text-left truncate font-sans",
-                    k[g].text,
-                    Z ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
+                    k[h].text,
+                    Z ? "text-ds-text-strong" : d ? "text-ds-text-disabled" : "text-ds-text-normal"
                   ),
                   children: X()
                 }
               ),
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ n(
                 "span",
                 {
-                  className: f(
+                  className: x(
                     "shrink-0 flex items-center justify-center transition-transform",
-                    n && "rotate-180",
-                    x ? "text-ds-text-disabled" : "text-ds-icon-strong"
+                    t && "rotate-180",
+                    d ? "text-ds-text-disabled" : "text-ds-icon-strong"
                   ),
-                  children: /* @__PURE__ */ t(V, {})
+                  children: /* @__PURE__ */ n(V, {})
                 }
               )
             ]
           }
         ),
-        n && /* @__PURE__ */ u(
+        t && /* @__PURE__ */ m(
           "ul",
           {
             ref: L,
-            id: d,
+            id: f,
             role: "listbox",
-            "aria-multiselectable": c === "checkbox" ? !0 : void 0,
+            "aria-multiselectable": o === "checkbox" ? !0 : void 0,
             className: "absolute top-full left-0 z-50 mt-1 min-w-full w-max max-w-sm bg-ds-background-default border border-ds-line-normal rounded-ds-md p-1 shadow-ds-default",
             onMouseLeave: () => {
-              $ === "mouse" && p(-1);
+              $ === "mouse" && g(-1);
             },
             children: [
               i.map((e, r) => {
-                const o = W(e.value), S = r === a;
+                const l = W(e.value), S = r === a;
                 return (
                   // 키보드 조작은 aria-activedescendant 패턴에 따라 combobox 트리거의
                   // onKeyDown이 전담한다(옵션은 포커스를 받지 않는 것이 WAI-ARIA 권고).
                   // 이 규칙은 그 패턴을 인식하지 못하므로 해당 줄만 해제한다.
                   // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                  /* @__PURE__ */ u(
+                  /* @__PURE__ */ m(
                     "li",
                     {
                       id: I(r),
                       role: "option",
-                      "aria-selected": o,
+                      "aria-selected": l,
                       onClick: () => O(e.value),
                       onMouseEnter: () => {
-                        A("mouse"), p(r);
+                        A("mouse"), g(r);
                       },
-                      className: f(
+                      className: x(
                         "flex items-center rounded-ds-md cursor-pointer gap-1.5 transition-colors",
-                        k[g].option,
-                        o ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
+                        k[h].option,
+                        l ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
                         // 키보드 이동 위치 표시 (마우스 hover와 구분되도록 링으로, 키보드 이동에만)
                         S && $ === "keyboard" && "ring-1 ring-inset ring-ds-primary-blue-normal"
                       ),
                       children: [
-                        /* @__PURE__ */ t(
+                        /* @__PURE__ */ n(
                           "span",
                           {
-                            className: f(
+                            className: x(
                               "flex-1 min-w-0 truncate font-sans",
-                              k[g].text,
+                              k[h].text,
                               "text-ds-text-strong"
                             ),
                             children: e.label
                           }
                         ),
-                        c === "default" && o && /* @__PURE__ */ t("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ t(ee, {}) }),
-                        c === "checkbox" && /* @__PURE__ */ t("span", { className: "shrink-0 flex items-center justify-center", children: o ? /* @__PURE__ */ t(re, {}) : /* @__PURE__ */ t(te, {}) }),
-                        c === "radio" && /* @__PURE__ */ t("span", { className: "shrink-0 flex items-center justify-center", children: o ? /* @__PURE__ */ t(ne, {}) : /* @__PURE__ */ t(se, {}) })
+                        o === "default" && l && /* @__PURE__ */ n("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ n(ee, {}) }),
+                        o === "checkbox" && /* @__PURE__ */ n("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ n(te, {}) : /* @__PURE__ */ n(re, {}) }),
+                        o === "radio" && /* @__PURE__ */ n("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ n(ne, {}) : /* @__PURE__ */ n(se, {}) })
                       ]
                     },
                     e.value
                   )
                 );
               }),
-              q && /* @__PURE__ */ u("li", { className: "flex gap-2 pt-1", children: [
-                /* @__PURE__ */ t(
+              q && /* @__PURE__ */ m("li", { className: "flex gap-2 pt-1", children: [
+                /* @__PURE__ */ n(
                   U,
                   {
                     variant: "outlined",
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      H?.(), l(!1);
+                      H?.(), c(!1);
                     },
                     children: z
                   }
                 ),
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ n(
                   U,
                   {
                     variant: "filled",
@@ -229,7 +232,7 @@ const k = {
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      F?.(), l(!1);
+                      F?.(), c(!1);
                     },
                     children: B
                   }
@@ -239,15 +242,15 @@ const k = {
           }
         )
       ] }),
-      (b || N) && /* @__PURE__ */ t(
+      (u || N) && /* @__PURE__ */ n(
         "p",
         {
-          id: `${d}-description`,
-          className: f(
+          id: `${f}-description`,
+          className: x(
             "text-body-4-r",
-            b ? "text-ds-primary-red-normal" : "text-ds-text-normal"
+            u ? "text-ds-primary-red-normal" : "text-ds-text-normal"
           ),
-          children: b ?? N
+          children: u ?? N
         }
       )
     ] });