@cashdoc/cashdoc-cms-design-system 2.6.2 → 2.7.0

package/dist/index.es.js

@@ -6615,30 +6615,32 @@ function Na(e) {
   const t = Vt(Fb);
   return e ?? t ?? void 0;
 }
-const dK = Ma, fK = Tf, Yk = Ce(({ className: e, align: t = "end", sideOffset: r = 8, container: n, ...o }, a) => /* @__PURE__ */ g(ka, { container: Na(n), children: /* @__PURE__ */ g(
-  No,
-  {
-    ref: a,
-    align: t,
-    sideOffset: r,
-    className: P(
-      "z-cms-overlay min-w-50 p-1.5",
-      "rounded-cms-lg border border-cms-gray-200",
-      "bg-cms-white",
-      "shadow-[0_12px_24px_rgba(15,20,25,0.08),0_4px_8px_rgba(15,20,25,0.04)]",
-      "animate-in fade-in-0 zoom-in-95",
-      "data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0",
-      "data-[state=closed]:zoom-out-95",
-      "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",
-      e
-    ),
-    ...o
-  }
-) }));
+const dK = Ma, fK = Tf, Yk = Ce(
+  ({ className: e, align: t = "start", sideOffset: r = 8, container: n, ...o }, a) => /* @__PURE__ */ g(ka, { container: Na(n), children: /* @__PURE__ */ g(
+    No,
+    {
+      ref: a,
+      align: t,
+      sideOffset: r,
+      className: P(
+        "z-cms-overlay min-w-50 p-1.5",
+        "rounded-cms-lg border border-cms-gray-200",
+        "bg-cms-white",
+        "shadow-[0_12px_24px_rgba(15,20,25,0.08),0_4px_8px_rgba(15,20,25,0.04)]",
+        "animate-in fade-in-0 zoom-in-95",
+        "data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0",
+        "data-[state=closed]:zoom-out-95",
+        "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",
+        e
+      ),
+      ...o
+    }
+  ) })
+);
 Yk.displayName = No.displayName;
 const zk = De(
   P(
@@ -12864,7 +12866,8 @@ const FT = [
                       "aria-invalid": i || void 0,
                       "aria-describedby": w,
                       className: P(
-                        "h-9 w-full rounded-cms-md border bg-cms-white px-3 pr-8",
+                        "h-9 w-full rounded-cms-md border bg-cms-white px-3",
+                        u && "pr-8",
                         "text-sm text-cms-gray-900",
                         "placeholder:text-cms-gray-450",
                         "hover:border-cms-gray-350",
@@ -14971,29 +14974,30 @@ const m5 = {
     onOpenChange: t,
     icon: r,
     title: n,
-    children: o,
-    footer: a,
-    className: i,
-    showCloseButton: s = !0,
-    size: c = "md",
-    modal: l,
-    onOpenAutoFocus: d,
-    onCloseAutoFocus: u
-  }, f) => {
-    const [h, v] = E.useState(
+    description: o,
+    children: a,
+    footer: i,
+    className: s,
+    showCloseButton: c = !0,
+    size: l = "md",
+    modal: d,
+    onOpenAutoFocus: u,
+    onCloseAutoFocus: f
+  }, h) => {
+    const [v, m] = E.useState(
       null
-    ), m = E.useCallback(
-      (p) => {
-        v(p), typeof f == "function" ? f(p) : f && (f.current = p);
+    ), p = E.useCallback(
+      (y) => {
+        m(y), typeof h == "function" ? h(y) : h && (h.current = y);
       },
-      [f]
+      [h]
     );
     return /* @__PURE__ */ g(
       s5,
       {
         open: e,
         onOpenChange: t,
-        modal: l,
+        modal: d,
         children: /* @__PURE__ */ N(c5, { children: [
           /* @__PURE__ */ g(
             l5,
@@ -15011,14 +15015,20 @@ const m5 = {
           /* @__PURE__ */ g(
             u5,
             {
-              ref: m,
-              onOpenAutoFocus: d,
-              onCloseAutoFocus: u,
+              ref: p,
+              onOpenAutoFocus: u,
+              onCloseAutoFocus: f,
+              ...o ? {} : { "aria-describedby": void 0 },
               className: P(
+                // Radix Dialog는 body로 portal되어 .cms-cashdoc-ds inherit
+                // 체인 밖에 놓인다. 루트 클래스를 직접 부여해 Pretendard/
+                // font-weight 등 DS 타이포를 복원한다. (없으면 OS serif로
+                // fallback되어 라벨 폭이 넓어져 픽커 라벨↔값 간격이 깨짐)
+                "cms-cashdoc-ds",
                 "fixed top-[50%] left-[50%] z-cms-modal",
                 "translate-x-[-50%] translate-y-[-50%]",
                 "w-full",
-                m5[c],
+                m5[l],
                 "rounded-cms-xl",
                 "shadow-[0_24px_48px_rgba(15,20,25,0.12),0_8px_16px_rgba(15,20,25,0.06)]",
                 "data-[state=closed]:animate-out",
@@ -15027,10 +15037,10 @@ const m5 = {
                 "data-[state=open]:fade-in-0",
                 "data-[state=closed]:zoom-out-95",
                 "data-[state=open]:zoom-in-95",
-                i
+                s
               ),
-              children: /* @__PURE__ */ g(Fb.Provider, { value: h, children: /* @__PURE__ */ N("div", { className: "overflow-hidden rounded-cms-xl bg-cms-white", children: [
-                s && /* @__PURE__ */ g(h5, { asChild: !0, children: /* @__PURE__ */ N(
+              children: /* @__PURE__ */ g(Fb.Provider, { value: v, children: /* @__PURE__ */ N("div", { className: "overflow-hidden rounded-cms-xl bg-cms-white", children: [
+                c && /* @__PURE__ */ g(h5, { asChild: !0, children: /* @__PURE__ */ N(
                   $t,
                   {
                     variant: "ghost",
@@ -15055,16 +15065,17 @@ const m5 = {
                     }
                   )
                 ] }),
-                o && /* @__PURE__ */ g(
-                  f5,
+                o && /* @__PURE__ */ g(f5, { className: "sr-only", children: o }),
+                a && /* @__PURE__ */ g(
+                  "div",
                   {
                     className: P(
                       "px-6 pt-1 pb-5 text-sm/relaxed text-cms-gray-700"
                     ),
-                    children: o
+                    children: a
                   }
                 ),
-                a && /* @__PURE__ */ g(
+                i && /* @__PURE__ */ g(
                   "div",
                   {
                     className: P(
@@ -15072,7 +15083,7 @@ const m5 = {
                       "px-6 pt-3.5 pb-[18px]",
                       "border-t border-cms-gray-150 bg-cms-gray-50"
                     ),
-                    children: a
+                    children: i
                   }
                 )
               ] }) })