@pylerai/design-system 2.1.0 → 2.2.1

package/README.md

@@ -86,13 +86,21 @@ module.exports = {
 };
 ```
 
-이미 `extend.colors`를 쓰고 있어 색상 맵만 필요하다면:
+이미 자체 `theme.extend`가 있어 프리셋 대신 조각만 합치려면 (`darkMode` 등 프리셋의 다른 설정은 들어오지 않습니다):
 
 ```javascript
 const { dsColors } = require("@pylerai/design-system/pyler-tailwind-colors");
+const { pylerTypographyThemeExtend } = require("@pylerai/design-system/pyler-typography");
+const { pylerShadowRadiusThemeExtend } = require("@pylerai/design-system/pyler-shadow-radius");
 
 module.exports = {
-  theme: { extend: { colors: { ds: dsColors } } },
+  theme: {
+    extend: {
+      colors: { ds: dsColors },
+      ...pylerTypographyThemeExtend, // fontFamily.sans, fontSize.text-*
+      ...pylerShadowRadiusThemeExtend, // boxShadow.ds-*, borderRadius.ds-*
+    },
+  },
 };
 ```
 
@@ -229,6 +237,23 @@ import { PYLER_TYPOGRAPHY_STYLE } from "@pylerai/design-system";
                                                        // shadow: ds-default, ds-modal
 ```
 
+Tailwind 클래스를 쓸 수 없는 자리(Chakra `radii`/`shadows` foundation, `sx`, inline style)에는 `DS_RADIUS`·`DS_SHADOW`를 넘깁니다. 값은 `var(--ds-*)` 문자열이라 `style.css`가 로드돼 있어야 합니다.
+
+```tsx
+import { DS_RADIUS, DS_SHADOW } from "@pylerai/design-system";
+
+// Chakra: theme foundation 에 등록하면 borderRadius="ds-md" 처럼 토큰 이름으로 쓸 수 있습니다
+extendTheme({
+  radii: { "ds-xs": DS_RADIUS.xs, "ds-ss": DS_RADIUS.ss, "ds-md": DS_RADIUS.md, "ds-lg": DS_RADIUS.lg },
+  shadows: { "ds-default": DS_SHADOW.default, "ds-modal": DS_SHADOW.modal },
+});
+
+<Box borderRadius="ds-md" boxShadow="ds-default" />
+<div style={{ borderRadius: DS_RADIUS.md }} />
+```
+
+앱에서 `rounded-[8px]`·`shadow-[0px_5px_16px_…]` 같은 리터럴을 새로 쓰지 않습니다. 값이 같아도 토큰이 바뀌면 리터럴만 남아 드리프트합니다.
+
 Dim은 `var(--ds-dim-default)`로 제공됩니다. Storybook **Foundation → Radius / Shadow / Dim** 참고.
 
 ## ♿ 접근성

package/dist/components/ui/badge.js

@@ -23,21 +23,21 @@ const b = {
   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, ...d }, a) => {
-    const { border: s, text: n } = b[r], { padding: p, text: m } = c[e];
+  ({ 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(
       "span",
       {
-        ref: a,
+        ref: d,
         className: i(
-          "inline-flex items-center justify-center border rounded-[4px] bg-ds-background-default whitespace-nowrap",
-          s,
+          "inline-flex items-center justify-center border rounded-ds-ss bg-ds-background-default whitespace-nowrap",
+          a,
           p,
           n,
           m,
           t
         ),
-        ...d,
+        ...s,
         children: o
       }
     );

package/dist/components/ui/button.js

@@ -9,10 +9,10 @@ const v = R(
   {
     variants: {
       variant: {
-        filled: "rounded-lg",
-        outlined: "rounded-lg 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-lg bg-transparent text-ds-text-strong disabled:text-ds-text-disabled",
-        icon: "rounded-lg",
+        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",
         indicator: "rounded-full inline-block"
       },
       color: {
@@ -116,12 +116,12 @@ const v = R(
     asChild: c = !1,
     shape: u = "square",
     iconStyle: x = "filled",
-    leftIcon: t,
-    rightIcon: d,
+    leftIcon: d,
+    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 = !!t, p = !!d, z = e !== "icon" && e !== "indicator" && (l || p) ? (() => {
+    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 = {
         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" },
@@ -143,9 +143,9 @@ const v = R(
         ref: y,
         ...h,
         children: c ? b : /* @__PURE__ */ O(k, { children: [
-          t && /* @__PURE__ */ a("span", { className: "shrink-0", children: t }),
+          d && /* @__PURE__ */ a("span", { className: "shrink-0", children: d }),
           b,
-          d && /* @__PURE__ */ a("span", { className: "shrink-0", children: d })
+          t && /* @__PURE__ */ a("span", { className: "shrink-0", children: t })
         ] })
       }
     );

package/dist/components/ui/chip.js

@@ -4,20 +4,20 @@ import { XIcon as b } from "../../lib/icons.js";
 import { cn as n } from "../../lib/utils.js";
 import * as f from "react";
 const h = f.forwardRef(
-  ({ size: l = "md", selected: i = !1, disabled: e = !1, onRemove: a, onClick: r, children: p, className: d }, c) => {
+  ({ size: l = "md", selected: i = !1, disabled: e = !1, onRemove: a, onClick: r, children: d, className: p }, c) => {
     const s = l === "md", t = !!a, u = r ? "button" : "span";
     return /* @__PURE__ */ x(
       "div",
       {
         ref: c,
         className: n(
-          "inline-flex items-center border rounded-[4px] bg-ds-background-default select-none transition-colors",
+          "inline-flex items-center border rounded-ds-ss bg-ds-background-default select-none transition-colors",
           // 좌우 여백은 컨테이너가 아니라 본문(클릭 대상)이 갖는다.
           // 컨테이너에 두면 여백 영역이 클릭되지 않는 죽은 공간이 된다.
           s ? t ? "h-8 pr-1" : "h-8" : t ? "h-[26px] pr-0.5" : "h-[26px]",
           s ? "text-body-3-r" : "text-body-4-r",
           e ? "border-ds-line-normal text-ds-text-disabled cursor-not-allowed" : i ? "border-ds-primary-blue-normal text-ds-text-strong cursor-pointer" : "border-ds-line-normal text-ds-text-strong cursor-pointer hover:border-ds-line-strong",
-          d
+          p
         ),
         children: [
           /* @__PURE__ */ o(
@@ -36,7 +36,7 @@ const h = f.forwardRef(
                 r && !e && "cursor-pointer",
                 r && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal rounded-[3px]"
               ),
-              children: p
+              children: d
             }
           ),
           t && /* @__PURE__ */ o(

package/dist/components/ui/dropdown.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { DropdownArrowIcon as _, SelectCheckIcon as C, CheckboxCheckedIcon as V, CheckboxUncheckedIcon as ee, RadioCheckedIcon as te, RadioUncheckedIcon as re } from "../../lib/icons.js";
+import { DropdownArrowIcon as V, SelectCheckIcon as ee, CheckboxCheckedIcon as te, CheckboxUncheckedIcon as re, RadioCheckedIcon as se, RadioUncheckedIcon as ne } from "../../lib/icons.js";
 import { cn as m } from "../../lib/utils.js";
-import * as a from "react";
-import { Button as q } from "./button.js";
-const k = {
+import * as n from "react";
+import { Button as B } from "./button.js";
+const v = {
   lg: {
     trigger: "h-11 pl-3 pr-2 gap-1.5",
     option: "h-11 pl-3 pr-2",
@@ -20,111 +20,111 @@ const k = {
     option: "h-8 pl-3 pr-2",
     text: "text-body-3-r"
   }
-}, se = a.forwardRef(
+}, ae = n.forwardRef(
   ({
-    type: o = "default",
-    options: d,
+    type: d = "default",
+    options: i,
     value: A,
     onValueChange: w,
-    values: n,
+    values: a,
     onValuesChange: N,
     placeholder: L = "선택해주세요",
-    label: g,
-    showLabel: v = !0,
+    label: h,
+    showLabel: y = !0,
     require: M,
-    size: h = "lg",
+    size: g = "lg",
     disabled: x,
-    readOnly: y,
+    readOnly: I,
     error: b,
-    hint: I,
+    hint: S,
     leftIcon: O,
-    showButtons: z,
-    cancelLabel: B = "취소",
-    confirmLabel: H = "확인",
+    showButtons: H,
+    cancelLabel: F = "취소",
+    confirmLabel: G = "확인",
     onCancel: R,
-    onConfirm: S,
-    wrapperClassName: F,
-    className: G,
-    "aria-label": J
-  }, P) => {
-    const [s, i] = a.useState(!1), [c, D] = a.useState(-1), E = a.useRef(null), U = a.useRef(null), K = a.useRef(null), f = a.useId(), j = (e) => `${f}-option-${e}`;
-    a.useEffect(() => {
+    onConfirm: D,
+    wrapperClassName: J,
+    className: P,
+    "aria-label": Q
+  }, W) => {
+    const [s, o] = n.useState(!1), [c, k] = n.useState(-1), [U, K] = n.useState("keyboard"), E = n.useRef(null), T = n.useRef(null), q = n.useRef(null), f = n.useId(), j = (e) => `${f}-option-${e}`;
+    n.useEffect(() => {
       const e = (t) => {
-        E.current && !E.current.contains(t.target) && i(!1);
+        E.current && !E.current.contains(t.target) && o(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, []), a.useEffect(() => {
-      s || D(-1);
-    }, [s]), a.useEffect(() => {
+    }, []), n.useEffect(() => {
+      s || k(-1);
+    }, [s]), n.useEffect(() => {
       var e, t;
-      !s || c < 0 || (t = (e = U.current) == null ? void 0 : e.querySelector(`#${CSS.escape(j(c))}`)) == null || t.scrollIntoView({ block: "nearest" });
+      !s || c < 0 || (t = (e = T.current) == null ? void 0 : e.querySelector(`#${CSS.escape(j(c))}`)) == null || t.scrollIntoView({ block: "nearest" });
     }, [s, c]);
-    const Q = (e) => o === "checkbox" ? (n == null ? void 0 : n.includes(e)) ?? !1 : e === A, $ = d.find((e) => e.value === A), W = () => o === "checkbox" ? !n || n.length === 0 ? L : d.filter((t) => n.includes(t.value)).map((t) => t.label).join(", ") : $ ? $.label : L, X = () => {
-      x || y || i((e) => !e);
-    }, T = (e) => {
-      if (o === "checkbox") {
-        const t = n ?? [], l = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
+    const X = (e) => d === "checkbox" ? (a == null ? void 0 : a.includes(e)) ?? !1 : e === A, $ = i.find((e) => e.value === A), Y = () => d === "checkbox" ? !a || a.length === 0 ? L : i.filter((t) => a.includes(t.value)).map((t) => t.label).join(", ") : $ ? $.label : L, Z = () => {
+      x || I || o((e) => !e);
+    }, z = (e) => {
+      if (d === "checkbox") {
+        const t = a ?? [], l = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
         N == null || N(l);
       } else
-        w == null || w(e), i(!1);
-    }, Y = o === "checkbox" ? ((n == null ? void 0 : n.length) ?? 0) > 0 : !!$, Z = (e) => {
+        w == null || w(e), o(!1);
+    }, _ = d === "checkbox" ? ((a == null ? void 0 : a.length) ?? 0) > 0 : !!$, C = (e) => {
       var l;
-      if (x || y) return;
+      if (x || I) return;
       const t = (p) => {
-        e.preventDefault(), s || i(!0), D(p);
+        e.preventDefault(), s || o(!0), K("keyboard"), k(p);
       };
       switch (e.key) {
         case "ArrowDown":
-          return t(s ? Math.min(c + 1, d.length - 1) : 0);
+          return t(s ? Math.min(c + 1, i.length - 1) : 0);
         case "ArrowUp":
-          return t(s ? Math.max(c - 1, 0) : d.length - 1);
+          return t(s ? Math.max(c - 1, 0) : i.length - 1);
         case "Home":
           return s ? t(0) : void 0;
         case "End":
-          return s ? t(d.length - 1) : void 0;
+          return s ? t(i.length - 1) : void 0;
         case "Enter":
         case " ":
-          e.preventDefault(), s ? c >= 0 && T(d[c].value) : i(!0);
+          e.preventDefault(), s ? c >= 0 && z(i[c].value) : o(!0);
           return;
         case "Escape":
-          s && (e.preventDefault(), i(!1), (l = K.current) == null || l.focus());
+          s && (e.preventDefault(), o(!1), (l = q.current) == null || l.focus());
           return;
         case "Tab":
-          i(!1);
+          o(!1);
           return;
         default:
           return;
       }
     };
-    return /* @__PURE__ */ u("div", { ref: P, className: m("flex flex-col gap-2", F), children: [
-      v && g && /* @__PURE__ */ u("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
-        /* @__PURE__ */ r("span", { id: `${f}-label`, className: "text-body-2-r text-ds-text-strong", children: g }),
+    return /* @__PURE__ */ u("div", { ref: W, className: m("flex flex-col gap-2", J), children: [
+      y && h && /* @__PURE__ */ u("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
+        /* @__PURE__ */ r("span", { id: `${f}-label`, className: "text-body-2-r text-ds-text-strong", children: h }),
         M && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
       ] }),
       /* @__PURE__ */ u("div", { ref: E, className: "relative", children: [
         /* @__PURE__ */ u(
           "button",
           {
-            ref: K,
+            ref: q,
             type: "button",
             role: "combobox",
             "aria-expanded": s,
             "aria-haspopup": "listbox",
             "aria-controls": s ? f : void 0,
             "aria-activedescendant": s && c >= 0 ? j(c) : void 0,
-            "aria-labelledby": v && g ? `${f}-label` : void 0,
-            "aria-label": v && g ? void 0 : J,
+            "aria-labelledby": y && h ? `${f}-label` : void 0,
+            "aria-label": y && h ? void 0 : Q,
             "aria-invalid": b ? !0 : void 0,
-            "aria-describedby": b || I ? `${f}-description` : void 0,
+            "aria-describedby": b || S ? `${f}-description` : void 0,
             "aria-required": M || void 0,
             disabled: x,
-            onClick: X,
-            onKeyDown: Z,
+            onClick: Z,
+            onKeyDown: C,
             className: m(
-              "flex items-center w-full rounded-lg border transition-colors",
-              x ? "bg-ds-surface-strong border-ds-line-normal cursor-not-allowed" : y ? "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" : s ? "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-line-strong",
-              k[h].trigger,
-              G
+              "flex items-center w-full rounded-ds-md border transition-colors",
+              x ? "bg-ds-surface-strong border-ds-line-normal cursor-not-allowed" : I ? "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" : s ? "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",
+              v[g].trigger,
+              P
             ),
             children: [
               O && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-icon-normal", children: O }),
@@ -133,10 +133,10 @@ const k = {
                 {
                   className: m(
                     "flex-1 min-w-0 text-left truncate font-sans",
-                    k[h].text,
-                    Y ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
+                    v[g].text,
+                    _ ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
                   ),
-                  children: W()
+                  children: Y()
                 }
               ),
               /* @__PURE__ */ r(
@@ -147,7 +147,7 @@ const k = {
                     s && "rotate-180",
                     x ? "text-ds-text-disabled" : "text-ds-text-normal"
                   ),
-                  children: /* @__PURE__ */ r(_, {})
+                  children: /* @__PURE__ */ r(V, {})
                 }
               )
             ]
@@ -156,14 +156,17 @@ const k = {
         s && /* @__PURE__ */ u(
           "ul",
           {
-            ref: U,
+            ref: T,
             id: f,
             role: "listbox",
-            "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-lg p-1 shadow-ds-default",
+            "aria-multiselectable": d === "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: () => {
+              U === "mouse" && k(-1);
+            },
             children: [
-              d.map((e, t) => {
-                const l = Q(e.value), p = t === c;
+              i.map((e, t) => {
+                const l = X(e.value), p = t === c;
                 return (
                   // 키보드 조작은 aria-activedescendant 패턴에 따라 combobox 트리거의
                   // onKeyDown이 전담한다(옵션은 포커스를 받지 않는 것이 WAI-ARIA 권고).
@@ -175,14 +178,16 @@ const k = {
                       id: j(t),
                       role: "option",
                       "aria-selected": l,
-                      onClick: () => T(e.value),
-                      onMouseEnter: () => D(t),
+                      onClick: () => z(e.value),
+                      onMouseEnter: () => {
+                        K("mouse"), k(t);
+                      },
                       className: m(
-                        "flex items-center rounded-lg cursor-pointer gap-1.5 transition-colors",
-                        k[h].option,
+                        "flex items-center rounded-ds-md cursor-pointer gap-1.5 transition-colors",
+                        v[g].option,
                         l ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
-                        // 키보드 이동 위치 표시 (마우스 hover와 구분되도록 링으로)
-                        p && "ring-1 ring-inset ring-ds-primary-blue-normal"
+                        // 키보드 이동 위치 표시 (마우스 hover와 구분되도록 링으로, 키보드 이동에만)
+                        p && U === "keyboard" && "ring-1 ring-inset ring-ds-primary-blue-normal"
                       ),
                       children: [
                         /* @__PURE__ */ r(
@@ -190,45 +195,45 @@ const k = {
                           {
                             className: m(
                               "flex-1 min-w-0 truncate font-sans",
-                              k[h].text,
+                              v[g].text,
                               "text-ds-text-strong"
                             ),
                             children: e.label
                           }
                         ),
-                        o === "default" && l && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ r(C, {}) }),
-                        o === "checkbox" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(V, {}) : /* @__PURE__ */ r(ee, {}) }),
-                        o === "radio" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(te, {}) : /* @__PURE__ */ r(re, {}) })
+                        d === "default" && l && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ r(ee, {}) }),
+                        d === "checkbox" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(te, {}) : /* @__PURE__ */ r(re, {}) }),
+                        d === "radio" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(se, {}) : /* @__PURE__ */ r(ne, {}) })
                       ]
                     },
                     e.value
                   )
                 );
               }),
-              z && /* @__PURE__ */ u("li", { className: "flex gap-2 pt-1", children: [
+              H && /* @__PURE__ */ u("li", { className: "flex gap-2 pt-1", children: [
                 /* @__PURE__ */ r(
-                  q,
+                  B,
                   {
                     variant: "outlined",
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      R == null || R(), i(!1);
+                      R == null || R(), o(!1);
                     },
-                    children: B
+                    children: F
                   }
                 ),
                 /* @__PURE__ */ r(
-                  q,
+                  B,
                   {
                     variant: "filled",
                     color: "blue",
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      S == null || S(), i(!1);
+                      D == null || D(), o(!1);
                     },
-                    children: H
+                    children: G
                   }
                 )
               ] })
@@ -236,7 +241,7 @@ const k = {
           }
         )
       ] }),
-      (b || I) && /* @__PURE__ */ r(
+      (b || S) && /* @__PURE__ */ r(
         "p",
         {
           id: `${f}-description`,
@@ -244,13 +249,13 @@ const k = {
             "text-body-4-r",
             b ? "text-ds-primary-red-normal" : "text-ds-text-normal"
           ),
-          children: b ?? I
+          children: b ?? S
         }
       )
     ] });
   }
 );
-se.displayName = "Dropdown";
+ae.displayName = "Dropdown";
 export {
-  se as Dropdown
+  ae as Dropdown
 };

package/dist/components/ui/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { EyeOnIcon as E, EyeOffIcon as P } from "../../lib/icons.js";
-import { cn as r } from "../../lib/utils.js";
+import { cn as d } from "../../lib/utils.js";
 import * as o from "react";
 const I = {
   lg: {
@@ -18,7 +18,7 @@ const I = {
   }
 }, V = o.forwardRef(
   ({
-    label: d,
+    label: r,
     showLabel: c = !0,
     require: l,
     message: n,
@@ -44,17 +44,17 @@ const I = {
         children: m ? /* @__PURE__ */ e(E, {}) : /* @__PURE__ */ e(P, {})
       }
     ) : null);
-    return /* @__PURE__ */ i("div", { className: r("flex flex-col gap-2", F), children: [
-      c && d && /* @__PURE__ */ i("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
-        /* @__PURE__ */ e("label", { htmlFor: y, className: "text-body-2-r text-ds-text-strong", children: d }),
+    return /* @__PURE__ */ i("div", { className: d("flex flex-col gap-2", F), children: [
+      c && r && /* @__PURE__ */ i("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
+        /* @__PURE__ */ e("label", { htmlFor: y, className: "text-body-2-r text-ds-text-strong", children: r }),
         l && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
       ] }),
       n && /* @__PURE__ */ e("p", { id: N, className: "text-body-4-r text-ds-text-strong", children: n }),
       /* @__PURE__ */ i(
         "div",
         {
-          className: r(
-            "flex items-center overflow-hidden bg-ds-background-default border rounded-lg transition-colors",
+          className: d(
+            "flex items-center overflow-hidden bg-ds-background-default border rounded-ds-md transition-colors",
             t ? "border-ds-primary-red-normal" : "border-ds-line-normal hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal",
             (b || f) && "bg-ds-surface-normal",
             I[a].container
@@ -69,7 +69,7 @@ const I = {
                 "aria-invalid": t ? !0 : void 0,
                 "aria-describedby": B,
                 "aria-required": l || void 0,
-                className: r(
+                className: d(
                   "flex-1 min-w-0 bg-transparent outline-none font-sans",
                   "text-ds-text-strong placeholder:text-ds-text-normal",
                   "disabled:text-ds-text-disabled",
@@ -89,7 +89,7 @@ const I = {
         "p",
         {
           id: v,
-          className: r(
+          className: d(
             "text-body-4-r",
             t ? "text-ds-primary-red-normal" : "text-ds-text-normal"
           ),
@@ -101,16 +101,16 @@ const I = {
 );
 V.displayName = "InputField";
 const $ = o.forwardRef(
-  ({ label: d, showLabel: c = !0, wrapperClassName: l, className: n, ...s }, t) => {
+  ({ label: r, showLabel: c = !0, wrapperClassName: l, className: n, ...s }, t) => {
     const x = o.useId(), a = s.id ?? x;
-    return /* @__PURE__ */ i("div", { className: r("flex flex-col gap-2", l), children: [
-      c && d && /* @__PURE__ */ e("label", { htmlFor: a, className: "text-body-2-r text-ds-text-strong", children: d }),
-      /* @__PURE__ */ e("div", { className: "overflow-hidden border border-ds-line-normal bg-ds-background-default rounded-lg p-3 hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal transition-colors", children: /* @__PURE__ */ e(
+    return /* @__PURE__ */ i("div", { className: d("flex flex-col gap-2", l), children: [
+      c && r && /* @__PURE__ */ e("label", { htmlFor: a, className: "text-body-2-r text-ds-text-strong", children: r }),
+      /* @__PURE__ */ e("div", { className: "overflow-hidden border border-ds-line-normal bg-ds-background-default rounded-ds-md p-3 hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal transition-colors", children: /* @__PURE__ */ e(
         "textarea",
         {
           ref: t,
           id: a,
-          className: r(
+          className: d(
             "w-full min-h-[114px] resize-none bg-transparent outline-none font-sans",
             "text-body-3-r text-ds-text-strong placeholder:text-ds-text-normal",
             "disabled:text-ds-text-disabled",