@vmscloud/moz-ui-components-react 0.1.54 → 0.1.56

package/dist/index.js

@@ -1,12 +1,12 @@
-var vt = Object.defineProperty;
-var Tt = (e, t, o) => t in e ? vt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var q = (e, t, o) => Tt(e, typeof t != "symbol" ? t + "" : t, o);
-import { createElement as $, createContext as W, useContext as D, useRef as I, forwardRef as bt, useState as U, useLayoutEffect as st, useEffect as Q, useImperativeHandle as ht, Fragment as At, Children as ct, isValidElement as K, useId as Z, useCallback as _, useMemo as N, cloneElement as F } from "react";
-import { createPortal as gt } from "react-dom";
-import { createRoot as Rt } from "react-dom/client";
-import { koKR as lt, createValidator as Ot, SPLITPANE_SPEC as _t, TOOLTIP_SPEC as Lt, POPOVER_SPEC as It, COLLAPSIBLE_SPEC as xt, AVATAR_SPEC as Mt, SCROLLAREA_SPEC as kt, BUTTON_SPEC as wt, LABEL_SPEC as zt, BADGE_SPEC as jt, CHIP_SPEC as Nt, CALLOUT_SPEC as Bt, TOGGLE_SPEC as Ut, BREADCRUMB_SPEC as Dt, EMPTYSTATE_SPEC as Kt, CHECKBOX_SPEC as Vt, RADIO_SPEC as Wt, INPUT_SPEC as $t, PASSWORDINPUT_SPEC as Ft, TEXTAREA_SPEC as Ht, NUMBERINPUT_SPEC as Gt, TAB_SPEC as qt, SLIDER_SPEC as Xt, CALENDAR_SPEC as Yt, DATEINPUT_SPEC as Jt, POPUP_SPEC as Qt, SELECT_SPEC as Zt, MULTISELECT_SPEC as te, TIMEPICKER_SPEC as ee, TAGINPUT_SPEC as oe, CONTEXTMENU_SPEC as ne, TABLESELECT_SPEC as re, TREESELECT_SPEC as se, CONTROLLER_SPEC as ce, TOAST_SPEC as le } from "@vmscloud/moz-ui-components-core";
-import { createValidator as go, enUS as Ro, jaJP as Oo, koKR as _o, useToast as Lo, zhCN as Io } from "@vmscloud/moz-ui-components-core";
-import { jsx as x, jsxs as ue } from "react/jsx-runtime";
+var At = Object.defineProperty;
+var ht = (e, t, o) => t in e ? At(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var q = (e, t, o) => ht(e, typeof t != "symbol" ? t + "" : t, o);
+import { createElement as $, createContext as K, useContext as D, useRef as I, forwardRef as gt, useState as U, useLayoutEffect as st, useEffect as Q, useImperativeHandle as Ot, Fragment as _t, useMemo as z, Children as ct, isValidElement as W, useId as Z, useCallback as R, cloneElement as V } from "react";
+import { createPortal as Rt } from "react-dom";
+import { createRoot as It } from "react-dom/client";
+import { koKR as lt, createValidator as Lt, useNotification as xt, SPLITPANE_SPEC as Mt, TOOLTIP_SPEC as Nt, POPOVER_SPEC as kt, COLLAPSIBLE_SPEC as wt, AVATAR_SPEC as zt, SCROLLAREA_SPEC as jt, BUTTON_SPEC as Bt, LABEL_SPEC as Ut, BADGE_SPEC as Dt, CHIP_SPEC as Wt, CALLOUT_SPEC as Ft, TOGGLE_SPEC as Kt, BREADCRUMB_SPEC as $t, EMPTYSTATE_SPEC as Vt, CHECKBOX_SPEC as Ht, RADIO_SPEC as Gt, INPUT_SPEC as qt, PASSWORDINPUT_SPEC as Xt, TEXTAREA_SPEC as Yt, NUMBERINPUT_SPEC as Jt, TAB_SPEC as Qt, SLIDER_SPEC as Zt, CALENDAR_SPEC as te, DATEINPUT_SPEC as ee, POPUP_SPEC as oe, SELECT_SPEC as ne, MULTISELECT_SPEC as re, TIMEPICKER_SPEC as se, TAGINPUT_SPEC as ce, CONTEXTMENU_SPEC as le, TABLESELECT_SPEC as ue, TREESELECT_SPEC as ae, CONTROLLER_SPEC as ie, TOAST_SPEC as pe, NOTIFICATION_CARD_SPEC as fe, NOTIFICATION_ITEM_SPEC as de } from "@vmscloud/moz-ui-components-core";
+import { createValidator as Mo, enUS as No, jaJP as ko, koKR as wo, useToast as zo, zhCN as jo } from "@vmscloud/moz-ui-components-core";
+import { jsx as x, jsxs as Ce } from "react/jsx-runtime";
 const X = /* @__PURE__ */ new Set();
 let Y = null;
 function et(e) {
@@ -17,7 +17,7 @@ function et(e) {
     for (const o of t) o.unmount();
   }, 0));
 }
-class ae {
+class ut {
   constructor() {
     q(this, "contextWrapper", null);
     q(this, "roots", /* @__PURE__ */ new Set());
@@ -31,7 +31,7 @@ class ae {
    * component(props) 를 컨테이너에 렌더하고, update(props) 로 갱신, destroy() 로 정리한다.
    */
   mountInstance(t, o, r) {
-    const n = Rt(t);
+    const n = It(t);
     this.roots.add(n);
     const c = (s) => {
       const l = $(o, s);
@@ -53,34 +53,34 @@ class ae {
     return this.roots.size;
   }
 }
-const ut = W(lt), at = W(null);
-function Ie({
+const at = K(lt), it = K(null);
+function ke({
   locale: e = lt,
   contextWrapper: t,
   children: o
 }) {
   return $(
-    ut.Provider,
+    at.Provider,
     { value: e },
     $(
-      at.Provider,
+      it.Provider,
       { value: t ?? null },
       o
     )
   );
 }
-function ie() {
-  return D(ut);
-}
-function pe() {
+function pt() {
   return D(at);
 }
-const tt = W(null);
-function xe({
+function ft() {
+  return D(it);
+}
+const tt = K(null);
+function we({
   children: e
 }) {
   const t = I();
-  t.current || (t.current = Ot());
+  t.current || (t.current = Lt());
   const o = { validate: t.current.validate, initValidator: t.current.initValidator };
   return $(
     tt.Provider,
@@ -88,13 +88,13 @@ function xe({
     typeof e == "function" ? e(o) : e
   );
 }
-function Me() {
+function ze() {
   return D(tt);
 }
 function H(e) {
   return e.startsWith("update:") ? "on" + e.slice(7).charAt(0).toUpperCase() + e.slice(8) + "Change" : "on" + e.charAt(0).toUpperCase() + e.slice(1);
 }
-function fe(e, t) {
+function Ee(e, t) {
   if (Object.is(e, t)) return !0;
   if (typeof e != "object" || typeof t != "object" || e === null || t === null) return !1;
   const o = Object.keys(e), r = Object.keys(t);
@@ -126,106 +126,106 @@ function p(e) {
     // slots 를 전부 등록하지만 React 는 스펙의 정적 목록만 알았다. 이름이 데이터에서 파생되는
     // 코어(Tab)는 이 통로 없이는 React 에서 콘텐츠를 받을 수 없었다.
     "slots"
-  ]), r = bt((n, c) => {
-    const s = I(null), l = I(void 0), f = I(void 0), [m, y] = U(() => /* @__PURE__ */ new Map());
+  ]), r = gt((n, c) => {
+    const s = I(null), l = I(void 0), f = I(void 0), [E, P] = U(() => /* @__PURE__ */ new Map());
     if (!f.current) {
-      const E = {};
-      Object.defineProperty(E, "el", {
+      const S = {};
+      Object.defineProperty(S, "el", {
         get: () => {
-          var i;
-          return ((i = l.current) == null ? void 0 : i.el) ?? null;
+          var C;
+          return ((C = l.current) == null ? void 0 : C.el) ?? null;
         },
         enumerable: !0
-      }), f.current = E;
+      }), f.current = S;
     }
     const u = I();
-    u.current || (u.current = new ae());
-    const d = pe();
-    u.current.setContextWrapper(d);
-    const a = ie(), S = D(tt), T = I(n);
+    u.current || (u.current = new ut());
+    const i = ft();
+    u.current.setContextWrapper(i);
+    const a = pt(), d = D(tt), T = I(n);
     T.current = n;
-    const b = ((E, ...i) => {
-      const v = H(String(E)), h = T.current[v];
-      typeof h == "function" && h(...i);
-    }), C = () => {
-      const E = T.current, i = {};
-      for (const v of Object.keys(E))
-        o.has(v) || (i[v] = E[v]);
-      for (const v of e.props) i[v] = E[v];
-      for (const v of Object.keys(t)) i[t[v].prop] = E[v];
-      return E.className != null && (i.class = E.className), E.style != null && (i.style = E.style), E.id != null && (i.id = E.id), i;
+    const v = ((S, ...C) => {
+      const b = H(String(S)), A = T.current[b];
+      typeof A == "function" && A(...C);
+    }), m = () => {
+      const S = T.current, C = {};
+      for (const b of Object.keys(S))
+        o.has(b) || (C[b] = S[b]);
+      for (const b of e.props) C[b] = S[b];
+      for (const b of Object.keys(t)) C[t[b].prop] = S[b];
+      return S.className != null && (C.class = S.className), S.style != null && (C.style = S.style), S.id != null && (C.id = S.id), C;
     };
     st(() => {
-      const E = u.current, i = {};
-      for (const P of e.slots ?? []) {
-        const O = P === "default" ? "children" : P;
-        T.current[O] != null && (i[P] = (A, z) => {
-          const M = ({ scope: w }) => {
-            const j = T.current[O];
-            return (typeof j == "function" ? j(w) : j) ?? null;
-          }, k = E.mountInstance(A, M, { scope: z });
-          return { update: (w) => k.update({ scope: w }), dispose: k.destroy };
+      const S = u.current, C = {};
+      for (const y of e.slots ?? []) {
+        const _ = y === "default" ? "children" : y;
+        T.current[_] != null && (C[y] = (h, w) => {
+          const M = ({ scope: k }) => {
+            const j = T.current[_];
+            return (typeof j == "function" ? j(k) : j) ?? null;
+          }, N = S.mountInstance(h, M, { scope: w });
+          return { update: (k) => N.update({ scope: k }), dispose: N.destroy };
         });
       }
-      const v = (P) => {
-        const O = T.current.slots;
-        if (!(O == null || O[P] == null))
-          return (A, z) => {
-            const M = A.getAttribute("data-moz-slot-id") ?? P;
-            return y((k) => new Map(k).set(M, { name: P, el: A, scope: z })), {
+      const b = (y) => {
+        const _ = T.current.slots;
+        if (!(_ == null || _[y] == null))
+          return (h, w) => {
+            const M = h.getAttribute("data-moz-slot-id") ?? y;
+            return P((N) => new Map(N).set(M, { name: y, el: h, scope: w })), {
               // scope 가 값까지 같으면 state 를 건드리지 않는다. 코어는 렌더마다 scope 객체를 새로
               // 만들어 fill 하므로, 무조건 setState 하면 브릿지 재렌더 → core.update → 다시 fill →
               // setState … 로 끝나지 않는 비동기 루프가 된다(소비처 실측: 페이지 테스트 타임아웃).
-              update: (k) => y((w) => {
-                const j = w.get(M);
-                return !j || fe(j.scope, k) ? w : new Map(w).set(M, { ...j, scope: k });
+              update: (N) => P((k) => {
+                const j = k.get(M);
+                return !j || Ee(j.scope, N) ? k : new Map(k).set(M, { ...j, scope: N });
               }),
-              dispose: () => y((k) => {
-                if (!k.has(M)) return k;
-                const w = new Map(k);
-                return w.delete(M), w;
+              dispose: () => P((N) => {
+                if (!N.has(M)) return N;
+                const k = new Map(N);
+                return k.delete(M), k;
               })
             };
           };
       };
-      l.current = e.core(s.current, C(), b, {
-        slots: i,
-        slotResolver: v,
+      l.current = e.core(s.current, m(), v, {
+        slots: C,
+        slotResolver: b,
         locale: a,
-        validator: S ?? void 0,
+        validator: d ?? void 0,
         // 소비자가 실제로 넘긴 prop 키 (controlled 판별)
         providedKeys: Object.keys(T.current)
       });
-      const h = l.current.api;
-      if (h)
-        for (const P of Object.keys(h))
-          P !== "el" && (f.current[P] = h[P]);
+      const A = l.current.api;
+      if (A)
+        for (const y of Object.keys(A))
+          y !== "el" && (f.current[y] = A[y]);
       return () => {
-        var P;
-        (P = l.current) == null || P.destroy(), E.unmountAll(), l.current = void 0;
+        var y;
+        (y = l.current) == null || y.destroy(), S.unmountAll(), l.current = void 0;
       };
     }, []);
     const g = () => {
-      const E = T.current, i = {};
-      for (const h of e.slots ?? []) {
-        const P = h === "default" ? "children" : h;
-        i[P] = E[P];
+      const S = T.current, C = {};
+      for (const A of e.slots ?? []) {
+        const y = A === "default" ? "children" : A;
+        C[y] = S[y];
       }
-      const v = E.slots;
-      return i.__dynamicSlotKeys = v ? Object.keys(v).sort().join("\0") : "", i;
-    }, R = I(null);
+      const b = S.slots;
+      return C.__dynamicSlotKeys = b ? Object.keys(b).sort().join("\0") : "", C;
+    }, O = I(null);
     Q(() => {
-      const E = l.current;
-      if (!E) return;
-      const i = C(), v = g(), h = R.current;
-      h && h.locale === a && ot(h.props, i) && ot(h.slots, v) || (R.current = { props: i, slots: v, locale: a }, (!h || h.locale !== a) && E.setLocale(a), E.update(i, { replace: !0, sync: e.syncUpdate }));
-    }), ht(c, () => f.current, []);
-    const L = n.slots, B = Array.from(m, ([E, i]) => {
-      const v = L == null ? void 0 : L[i.name], h = (typeof v == "function" ? v(i.scope) : v) ?? null;
-      return gt(h, i.el, E);
+      const S = l.current;
+      if (!S) return;
+      const C = m(), b = g(), A = O.current;
+      A && A.locale === a && ot(A.props, C) && ot(A.slots, b) || (O.current = { props: C, slots: b, locale: a }, (!A || A.locale !== a) && S.setLocale(a), S.update(C, { replace: !0, sync: e.syncUpdate }));
+    }), Ot(c, () => f.current, []);
+    const L = n.slots, B = Array.from(E, ([S, C]) => {
+      const b = L == null ? void 0 : L[C.name], A = (typeof b == "function" ? b(C.scope) : b) ?? null;
+      return Rt(A, C.el, S);
     });
     return $(
-      At,
+      _t,
       null,
       $("div", { ref: s, style: { display: "contents" } }),
       ...B
@@ -233,9 +233,30 @@ function p(e) {
   });
   return r.displayName = e.name, r;
 }
-const de = p(_t), Ce = (e) => null, ke = ({ horizontal: e, children: t }) => {
+const Pe = ["avatar", "heading", "description", "actions"];
+function je(e = {}) {
+  const t = ft(), o = pt(), r = I({ contextWrapper: t, locale: o, globalOptions: e });
+  return r.current = { contextWrapper: t, locale: o, globalOptions: e }, z(() => {
+    const n = xt();
+    return { open: (s = {}) => {
+      const { contextWrapper: l, locale: f, globalOptions: E } = r.current, P = { ...E, ...s }, u = { ...P }, i = new ut();
+      i.setContextWrapper(l);
+      const a = {};
+      for (const d of Pe) {
+        const T = P[d];
+        delete u[d], !(T == null || T === !1) && (a[d] = (v) => ({ dispose: i.mountInstance(v, () => T, {}).destroy }));
+      }
+      return n.open(u, {
+        slots: a,
+        locale: f,
+        onRemoved: () => i.unmountAll()
+      });
+    }, close: n.close, closeAll: n.closeAll };
+  }, []);
+}
+const me = p(Mt), Se = (e) => null, Be = ({ horizontal: e, children: t }) => {
   const o = ct.toArray(t).filter(
-    (c) => K(c) && c.type === Ce
+    (c) => W(c) && c.type === Se
   ), r = o.map((c) => ({
     size: c.props.size,
     minSize: c.props.minSize,
@@ -244,29 +265,29 @@ const de = p(_t), Ce = (e) => null, ke = ({ horizontal: e, children: t }) => {
   })), n = {};
   return o.forEach((c, s) => {
     n[`pane-${s}`] = c.props.children;
-  }), /* @__PURE__ */ x(de, { panes: r, horizontal: e, ...n });
-}, Ee = p(Lt), J = /* @__PURE__ */ new Set(), it = 200, Pe = 100, pt = W({
-  delayDuration: it,
+  }), /* @__PURE__ */ x(me, { panes: r, horizontal: e, ...n });
+}, ye = p(Nt), J = /* @__PURE__ */ new Set(), dt = 200, Te = 100, Ct = K({
+  delayDuration: dt,
   disableHoverableContent: !1
 });
-function we({
-  delayDuration: e = it,
+function Ue({
+  delayDuration: e = dt,
   disableHoverableContent: t = !1,
   children: o
 }) {
-  const r = N(
+  const r = z(
     () => ({ delayDuration: e, disableHoverableContent: t }),
     [e, t]
   );
-  return /* @__PURE__ */ x(pt.Provider, { value: r, children: o });
+  return /* @__PURE__ */ x(Ct.Provider, { value: r, children: o });
 }
-const ft = W(null);
-function dt(e) {
-  const t = D(ft);
+const Et = K(null);
+function Pt(e) {
+  const t = D(Et);
   if (!t) throw new Error(`${e} 는 <Tooltip> 안에서만 쓸 수 있습니다.`);
   return t;
 }
-function ze({
+function De({
   open: e,
   defaultOpen: t = !1,
   onOpenChange: o,
@@ -274,73 +295,73 @@ function ze({
   disableHoverableContent: n,
   children: c
 }) {
-  const s = D(pt), l = r ?? s.delayDuration, f = !(n ?? s.disableHoverableContent), [m, y] = U(t), u = e !== void 0, d = u ? !!e : m, [a, S] = U(null), T = `moz-tooltip-${Z()}`, b = I(null), C = I(null), g = I(o);
+  const s = D(Ct), l = r ?? s.delayDuration, f = !(n ?? s.disableHoverableContent), [E, P] = U(t), u = e !== void 0, i = u ? !!e : E, [a, d] = U(null), T = `moz-tooltip-${Z()}`, v = I(null), m = I(null), g = I(o);
   g.current = o;
-  const R = _(() => {
-    b.current && clearTimeout(b.current), C.current && clearTimeout(C.current), b.current = null, C.current = null;
-  }, []), L = _(
-    (A) => {
-      var z;
-      u || y(A), (z = g.current) == null || z.call(g, A);
+  const O = R(() => {
+    v.current && clearTimeout(v.current), m.current && clearTimeout(m.current), v.current = null, m.current = null;
+  }, []), L = R(
+    (h) => {
+      var w;
+      u || P(h), (w = g.current) == null || w.call(g, h);
     },
     [u]
-  ), B = _(() => {
-    R(), L(!0);
-  }, [R, L]), E = _(() => {
-    if (C.current && (clearTimeout(C.current), C.current = null), !b.current) {
+  ), B = R(() => {
+    O(), L(!0);
+  }, [O, L]), S = R(() => {
+    if (m.current && (clearTimeout(m.current), m.current = null), !v.current) {
       if (l <= 0) {
         L(!0);
         return;
       }
-      b.current = setTimeout(() => {
-        b.current = null, L(!0);
+      v.current = setTimeout(() => {
+        v.current = null, L(!0);
       }, l);
     }
-  }, [l, L]), i = _(() => {
-    R(), L(!1);
-  }, [R, L]), v = _(() => {
-    if (b.current && (clearTimeout(b.current), b.current = null), !f) {
+  }, [l, L]), C = R(() => {
+    O(), L(!1);
+  }, [O, L]), b = R(() => {
+    if (v.current && (clearTimeout(v.current), v.current = null), !f) {
       L(!1);
       return;
     }
-    C.current || (C.current = setTimeout(() => {
-      C.current = null, L(!1);
-    }, Pe));
-  }, [f, L]), h = _(() => {
-    C.current && (clearTimeout(C.current), C.current = null);
+    m.current || (m.current = setTimeout(() => {
+      m.current = null, L(!1);
+    }, Te));
+  }, [f, L]), A = R(() => {
+    m.current && (clearTimeout(m.current), m.current = null);
   }, []);
-  Q(() => R, [R]);
-  const P = I(i);
-  P.current = i, Q(() => {
-    if (!d) return;
-    const A = () => P.current();
+  Q(() => O, [O]);
+  const y = I(C);
+  y.current = C, Q(() => {
+    if (!i) return;
+    const h = () => y.current();
     for (const M of Array.from(J)) M();
-    J.add(A);
-    const z = (M) => {
-      M.key === "Escape" && P.current();
+    J.add(h);
+    const w = (M) => {
+      M.key === "Escape" && y.current();
     };
-    return document.addEventListener("keydown", z), () => {
-      J.delete(A), document.removeEventListener("keydown", z);
+    return document.addEventListener("keydown", w), () => {
+      J.delete(h), document.removeEventListener("keydown", w);
     };
-  }, [d]);
-  const O = N(
+  }, [i]);
+  const _ = z(
     () => ({
-      open: d,
+      open: i,
       contentId: T,
       anchor: a,
-      setAnchor: S,
+      setAnchor: d,
       hoverable: f,
       openNow: B,
-      openDelayed: E,
-      closeNow: i,
-      closeSoon: v,
-      cancelClose: h
+      openDelayed: S,
+      closeNow: C,
+      closeSoon: b,
+      cancelClose: A
     }),
-    [d, T, a, f, B, E, i, v, h]
+    [i, T, a, f, B, S, C, b, A]
   );
-  return /* @__PURE__ */ x(ft.Provider, { value: O, children: c });
+  return /* @__PURE__ */ x(Et.Provider, { value: _, children: c });
 }
-function V(e, t) {
+function F(e, t) {
   return (o) => {
     typeof e == "function" && e(o), t();
   };
@@ -348,39 +369,39 @@ function V(e, t) {
 function nt(e, t) {
   e && (typeof e == "function" ? e(t) : e.current = t);
 }
-function je({ asChild: e = !1, children: t }) {
-  const o = dt("TooltipTrigger"), { open: r, contentId: n, setAnchor: c, openNow: s, openDelayed: l, closeNow: f, closeSoon: m } = o, y = K(t) ? t : null, u = (y == null ? void 0 : y.props) ?? {}, d = y == null ? void 0 : y.ref, a = I(d);
-  a.current = d;
-  const S = I(null), T = _(
+function We({ asChild: e = !1, children: t }) {
+  const o = Pt("TooltipTrigger"), { open: r, contentId: n, setAnchor: c, openNow: s, openDelayed: l, closeNow: f, closeSoon: E } = o, P = W(t) ? t : null, u = (P == null ? void 0 : P.props) ?? {}, i = P == null ? void 0 : P.ref, a = I(i);
+  a.current = i;
+  const d = I(null), T = R(
     (g) => {
-      S.current = g, c(g), nt(a.current, g);
+      d.current = g, c(g), nt(a.current, g);
     },
     [c]
-  ), b = I(d);
+  ), v = I(i);
   st(() => {
-    b.current !== d && (b.current = d, nt(d, S.current));
+    v.current !== i && (v.current = i, nt(i, d.current));
   });
-  const C = {
+  const m = {
     ref: T,
     // pointermove·mouseenter 둘 다 받는다 — 포인터 종류·테스트 도구에 따라 어느 하나만 오는
     // 경우가 있어(예: fireEvent.pointerMove / fireEvent.mouseOver) 한쪽만 걸면 조용히 안 열린다.
-    onPointerMove: V(u.onPointerMove, l),
-    onMouseEnter: V(u.onMouseEnter, l),
-    onPointerLeave: V(u.onPointerLeave, m),
-    onMouseLeave: V(u.onMouseLeave, m),
+    onPointerMove: F(u.onPointerMove, l),
+    onMouseEnter: F(u.onMouseEnter, l),
+    onPointerLeave: F(u.onPointerLeave, E),
+    onMouseLeave: F(u.onMouseLeave, E),
     // 클릭하러 온 것이므로 즉시 치운다(누른 순간 가려지지 않게).
-    onPointerDown: V(u.onPointerDown, f),
+    onPointerDown: F(u.onPointerDown, f),
     // 포커스는 지연 없이 — 버블링된 focus 도 받는다(트리거가 감싼 span 인 경우).
-    onFocus: V(u.onFocus, s),
-    onBlur: V(u.onBlur, f),
+    onFocus: F(u.onFocus, s),
+    onBlur: F(u.onBlur, f),
     "aria-describedby": r ? n : u["aria-describedby"],
     // 트리거는 열림 상태를 attribute 로도 노출한다 — 소비처가 열려 있는 동안의 트리거 스타일을
     // CSS 만으로 걸 수 있고(`[data-state='open']`), "툴팁이 배선됐는가" 를 DOM 에서 확인할 수 있다.
     "data-state": r ? "open" : "closed"
   };
-  return e && y ? F(y, C) : /* @__PURE__ */ x("span", { ...C, children: t });
+  return e && P ? V(P, m) : /* @__PURE__ */ x("span", { ...m, children: t });
 }
-function Ne({
+function Fe({
   side: e = "top",
   align: t = "center",
   sideOffset: o = 8,
@@ -391,90 +412,90 @@ function Ne({
   children: l,
   ...f
 }) {
-  const m = dt("TooltipContent"), { open: y, anchor: u, contentId: d, hoverable: a, cancelClose: S, closeSoon: T } = m, b = I({ cancelClose: S, closeSoon: T });
-  b.current = { cancelClose: S, closeSoon: T };
-  const C = _(() => b.current.cancelClose(), []), g = _(() => b.current.closeSoon(), []), R = N(() => ({ content: l }), [l]);
+  const E = Pt("TooltipContent"), { open: P, anchor: u, contentId: i, hoverable: a, cancelClose: d, closeSoon: T } = E, v = I({ cancelClose: d, closeSoon: T });
+  v.current = { cancelClose: d, closeSoon: T };
+  const m = R(() => v.current.cancelClose(), []), g = R(() => v.current.closeSoon(), []), O = z(() => ({ content: l }), [l]);
   return /* @__PURE__ */ x(
-    Ee,
+    ye,
     {
-      open: y,
+      open: P,
       anchor: u,
       side: e,
       align: t,
       sideOffset: o,
       collisionPadding: r,
       arrow: n,
-      tooltipId: d,
+      tooltipId: i,
       className: c,
       style: s,
-      slots: R,
+      slots: O,
       "data-hoverable": a ? "true" : void 0,
-      onPointerEnter: a ? C : void 0,
+      onPointerEnter: a ? m : void 0,
       onPointerLeave: a ? g : void 0,
       ...f
     }
   );
 }
-const me = p(It), Ct = W(null);
+const ve = p(kt), mt = K(null);
 function G(e) {
-  const t = D(Ct);
+  const t = D(mt);
   if (!t) throw new Error(`${e} 는 <Popover> 안에서만 쓸 수 있습니다.`);
   return t;
 }
-function Et(...e) {
+function St(...e) {
   return (t) => {
     for (const o of e)
       o && (typeof o == "function" ? o(t) : o.current = t);
   };
 }
-function Pt(e, t) {
+function yt(e, t) {
   return (o) => {
     typeof e == "function" && e(o), t(o);
   };
 }
-function Be({ open: e, defaultOpen: t = !1, onOpenChange: o, children: r }) {
-  const [n, c] = U(t), s = e !== void 0, l = s ? !!e : n, [f, m] = U(null), [y, u] = U(null), d = `moz-popover-${Z()}`, a = I(o);
+function Ke({ open: e, defaultOpen: t = !1, onOpenChange: o, children: r }) {
+  const [n, c] = U(t), s = e !== void 0, l = s ? !!e : n, [f, E] = U(null), [P, u] = U(null), i = `moz-popover-${Z()}`, a = I(o);
   a.current = o;
-  const S = _(
-    (b) => {
-      var C;
-      s || c(b), (C = a.current) == null || C.call(a, b);
+  const d = R(
+    (v) => {
+      var m;
+      s || c(v), (m = a.current) == null || m.call(a, v);
     },
     [s]
-  ), T = N(
-    () => ({ open: l, setOpen: S, contentId: d, triggerEl: f, anchorEl: y, setTriggerEl: m, setAnchorEl: u }),
-    [l, S, d, f, y]
+  ), T = z(
+    () => ({ open: l, setOpen: d, contentId: i, triggerEl: f, anchorEl: P, setTriggerEl: E, setAnchorEl: u }),
+    [l, d, i, f, P]
   );
-  return /* @__PURE__ */ x(Ct.Provider, { value: T, children: r });
+  return /* @__PURE__ */ x(mt.Provider, { value: T, children: r });
 }
-function Ue({ asChild: e = !1, children: t }) {
-  const { open: o, setOpen: r, contentId: n, setTriggerEl: c } = G("PopoverTrigger"), s = K(t) ? t : null, l = (s == null ? void 0 : s.props) ?? {}, m = {
-    ref: N(
-      () => Et(c, s == null ? void 0 : s.ref),
+function $e({ asChild: e = !1, children: t }) {
+  const { open: o, setOpen: r, contentId: n, setTriggerEl: c } = G("PopoverTrigger"), s = W(t) ? t : null, l = (s == null ? void 0 : s.props) ?? {}, E = {
+    ref: z(
+      () => St(c, s == null ? void 0 : s.ref),
       [c, s]
     ),
-    onClick: Pt(l.onClick, () => r(!o)),
+    onClick: yt(l.onClick, () => r(!o)),
     "aria-haspopup": "dialog",
     "aria-expanded": o,
     "aria-controls": o ? n : void 0,
     "data-state": o ? "open" : "closed"
   };
-  return e && s ? F(s, m) : /* @__PURE__ */ x("span", { ...m, children: t });
+  return e && s ? V(s, E) : /* @__PURE__ */ x("span", { ...E, children: t });
 }
-function De({ asChild: e = !1, children: t }) {
-  const { setAnchorEl: o } = G("PopoverAnchor"), r = K(t) ? t : null, n = N(
-    () => Et(o, r == null ? void 0 : r.ref),
+function Ve({ asChild: e = !1, children: t }) {
+  const { setAnchorEl: o } = G("PopoverAnchor"), r = W(t) ? t : null, n = z(
+    () => St(o, r == null ? void 0 : r.ref),
     [o, r]
   );
-  return e && r ? F(r, { ref: n }) : /* @__PURE__ */ x("span", { ref: n, children: t });
+  return e && r ? V(r, { ref: n }) : /* @__PURE__ */ x("span", { ref: n, children: t });
 }
-function Ke({ asChild: e = !1, children: t }) {
-  const { setOpen: o } = G("PopoverClose"), r = K(t) ? t : null, n = (r == null ? void 0 : r.props) ?? {}, c = {
-    onClick: Pt(n.onClick, () => o(!1))
+function He({ asChild: e = !1, children: t }) {
+  const { setOpen: o } = G("PopoverClose"), r = W(t) ? t : null, n = (r == null ? void 0 : r.props) ?? {}, c = {
+    onClick: yt(n.onClick, () => o(!1))
   };
-  return e && r ? F(r, c) : /* @__PURE__ */ x("button", { type: "button", ...c, children: t });
+  return e && r ? V(r, c) : /* @__PURE__ */ x("button", { type: "button", ...c, children: t });
 }
-function Ve({
+function Ge({
   side: e = "bottom",
   align: t = "start",
   sideOffset: o = 4,
@@ -484,65 +505,65 @@ function Ve({
   className: s,
   style: l,
   onOpenAutoFocus: f,
-  onCloseAutoFocus: m,
-  onEscapeKeyDown: y,
+  onCloseAutoFocus: E,
+  onEscapeKeyDown: P,
   onInteractOutside: u,
-  children: d,
+  children: i,
   ...a
 }) {
-  const { open: S, setOpen: T, contentId: b, triggerEl: C, anchorEl: g } = G("PopoverContent"), R = I({ setOpen: T, triggerEl: C, anchorEl: g, onOpenAutoFocus: f, onCloseAutoFocus: m, onEscapeKeyDown: y, onInteractOutside: u });
-  R.current = { setOpen: T, triggerEl: C, anchorEl: g, onOpenAutoFocus: f, onCloseAutoFocus: m, onEscapeKeyDown: y, onInteractOutside: u };
-  const L = _((P) => {
-    R.current.setOpen(!1);
-  }, []), B = _((P) => {
-    var O, A;
-    (A = (O = R.current).onEscapeKeyDown) == null || A.call(O, P);
-  }, []), E = _((P) => {
-    var M, k, w, j;
-    const O = (k = (M = P.detail) == null ? void 0 : M.originalEvent) == null ? void 0 : k.target, { triggerEl: A, anchorEl: z } = R.current;
-    if (O && (A && A.contains(O) || z && z.contains(O))) {
-      P.preventDefault();
+  const { open: d, setOpen: T, contentId: v, triggerEl: m, anchorEl: g } = G("PopoverContent"), O = I({ setOpen: T, triggerEl: m, anchorEl: g, onOpenAutoFocus: f, onCloseAutoFocus: E, onEscapeKeyDown: P, onInteractOutside: u });
+  O.current = { setOpen: T, triggerEl: m, anchorEl: g, onOpenAutoFocus: f, onCloseAutoFocus: E, onEscapeKeyDown: P, onInteractOutside: u };
+  const L = R((y) => {
+    O.current.setOpen(!1);
+  }, []), B = R((y) => {
+    var _, h;
+    (h = (_ = O.current).onEscapeKeyDown) == null || h.call(_, y);
+  }, []), S = R((y) => {
+    var M, N, k, j;
+    const _ = (N = (M = y.detail) == null ? void 0 : M.originalEvent) == null ? void 0 : N.target, { triggerEl: h, anchorEl: w } = O.current;
+    if (_ && (h && h.contains(_) || w && w.contains(_))) {
+      y.preventDefault();
       return;
     }
-    (j = (w = R.current).onInteractOutside) == null || j.call(w, P);
-  }, []), i = _((P) => {
-    var O, A;
-    (A = (O = R.current).onOpenAutoFocus) == null || A.call(O, P);
-  }, []), v = _((P) => {
-    var O, A;
-    (A = (O = R.current).onCloseAutoFocus) == null || A.call(O, P);
-  }, []), h = N(() => ({ content: d }), [d]);
+    (j = (k = O.current).onInteractOutside) == null || j.call(k, y);
+  }, []), C = R((y) => {
+    var _, h;
+    (h = (_ = O.current).onOpenAutoFocus) == null || h.call(_, y);
+  }, []), b = R((y) => {
+    var _, h;
+    (h = (_ = O.current).onCloseAutoFocus) == null || h.call(_, y);
+  }, []), A = z(() => ({ content: i }), [i]);
   return /* @__PURE__ */ x(
-    me,
+    ve,
     {
-      open: S,
-      anchor: g ?? C,
+      open: d,
+      anchor: g ?? m,
       side: e,
       align: t,
       sideOffset: o,
       collisionPadding: r,
       matchTriggerWidth: n,
       trapFocus: c,
-      popoverId: b,
+      popoverId: v,
       className: s,
       style: l,
-      slots: h,
+      slots: A,
       onRequestClose: L,
       onEscapeKeyDown: B,
-      onInteractOutside: E,
-      onOpenAutoFocus: i,
-      onCloseAutoFocus: v,
+      onInteractOutside: S,
+      onOpenAutoFocus: C,
+      onCloseAutoFocus: b,
       ...a
     }
   );
 }
-const ye = p(xt), mt = W(null);
-function yt(e) {
-  const t = D(mt);
+const be = p(wt), Tt = K(null);
+function vt(e) {
+  const t = D(Tt);
   if (!t) throw new Error(`${e} 는 <Collapsible> 안에서만 쓸 수 있습니다.`);
   return t;
 }
-function Se(...e) {
+function Ae(...e) {
   return (t) => {
     for (const o of e)
       o && (typeof o == "function" ? o(t) : o.current = t);
@@ -553,11 +574,11 @@ function rt(e, t) {
     typeof e == "function" && e(o), t(o);
   };
 }
-function St(e, t) {
+function bt(e, t) {
   const o = [e, t].filter((r) => typeof r == "string" && r.length > 0).join(" ");
   return o.length > 0 ? o : void 0;
 }
-function We({
+function qe({
   open: e,
   defaultOpen: t = !1,
   onOpenChange: o,
@@ -568,29 +589,29 @@ function We({
   children: l,
   ...f
 }) {
-  const [m, y] = U(t), u = e !== void 0, d = u ? !!e : m, a = `moz-collapsible-${Z()}`, S = I(o);
-  S.current = o;
-  const T = _(
+  const [E, P] = U(t), u = e !== void 0, i = u ? !!e : E, a = `moz-collapsible-${Z()}`, d = I(o);
+  d.current = o;
+  const T = R(
     (L) => {
       var B;
-      u || y(L), (B = S.current) == null || B.call(S, L);
+      u || P(L), (B = d.current) == null || B.call(d, L);
     },
     [u]
-  ), b = N(
-    () => ({ open: d, setOpen: T, contentId: a, disabled: r }),
-    [d, T, a, r]
-  ), C = {
-    "data-state": d ? "open" : "closed",
+  ), v = z(
+    () => ({ open: i, setOpen: T, contentId: a, disabled: r }),
+    [i, T, a, r]
+  ), m = {
+    "data-state": i ? "open" : "closed",
     "data-disabled": r ? "" : void 0,
     ...f
-  }, g = K(l) ? l : null, R = n && g ? F(g, {
-    ...C,
-    className: St(g.props.className, c),
+  }, g = W(l) ? l : null, O = n && g ? V(g, {
+    ...m,
+    className: bt(g.props.className, c),
     style: s ?? g.props.style
-  }) : /* @__PURE__ */ x("div", { ...C, className: c, style: s, children: l });
-  return /* @__PURE__ */ x(mt.Provider, { value: b, children: R });
+  }) : /* @__PURE__ */ x("div", { ...m, className: c, style: s, children: l });
+  return /* @__PURE__ */ x(Tt.Provider, { value: v, children: O });
 }
-function $e({
+function Xe({
   asChild: e = !1,
   disabled: t,
   className: o,
@@ -599,26 +620,26 @@ function $e({
   children: c,
   ...s
 }) {
-  const { open: l, setOpen: f, contentId: m, disabled: y } = yt("CollapsibleTrigger"), u = t ?? y, d = _(() => {
+  const { open: l, setOpen: f, contentId: E, disabled: P } = vt("CollapsibleTrigger"), u = t ?? P, i = R(() => {
     u || f(!l);
-  }, [u, l, f]), a = K(c) ? c : null, S = (a == null ? void 0 : a.props) ?? {}, T = {
+  }, [u, l, f]), a = W(c) ? c : null, d = (a == null ? void 0 : a.props) ?? {}, T = {
     "aria-expanded": l,
-    "aria-controls": m,
+    "aria-controls": E,
     "data-state": l ? "open" : "closed",
     "data-disabled": u ? "" : void 0,
     ...s
   };
   if (e && a) {
-    const b = Se(a.ref);
-    return F(a, {
+    const v = Ae(a.ref);
+    return V(a, {
       ...T,
-      ref: b,
-      className: St(S.className, o),
-      style: r ?? S.style,
+      ref: v,
+      className: bt(d.className, o),
+      style: r ?? d.style,
       // 소비처 onClick 을 먼저 돌리고 토글한다 — 소비처가 stopPropagation 을 걸어도
       // 토글 의미는 유지된다(Radix 와 같은 순서).
-      onClick: rt(S.onClick, (C) => {
-        n == null || n(C), d();
+      onClick: rt(d.onClick, (m) => {
+        n == null || n(m), i();
       }),
       disabled: u || void 0
     });
@@ -631,12 +652,12 @@ function $e({
       className: o,
       style: r,
       disabled: u || void 0,
-      onClick: rt(n, d),
+      onClick: rt(n, i),
       children: c
     }
   );
 }
-function Fe({
+function Ye({
   forceMount: e = !1,
   className: t,
   style: o,
@@ -644,14 +665,14 @@ function Fe({
   children: n,
   ...c
 }) {
-  const { open: s, contentId: l, disabled: f } = yt("CollapsibleContent"), m = I({ onHeightChange: r });
-  m.current = { onHeightChange: r };
-  const y = _((d) => {
-    var a, S;
-    (S = (a = m.current).onHeightChange) == null || S.call(a, d);
-  }, []), u = N(() => ({ content: n }), [n]);
+  const { open: s, contentId: l, disabled: f } = vt("CollapsibleContent"), E = I({ onHeightChange: r });
+  E.current = { onHeightChange: r };
+  const P = R((i) => {
+    var a, d;
+    (d = (a = E.current).onHeightChange) == null || d.call(a, i);
+  }, []), u = z(() => ({ content: n }), [n]);
   return /* @__PURE__ */ x(
-    ye,
+    be,
     {
       open: s,
       forceMount: e,
@@ -660,26 +681,26 @@ function Fe({
       className: t,
       style: o,
       slots: u,
-      onHeightChange: y,
+      onHeightChange: P,
       ...c
     }
   );
 }
-const ve = p(Mt);
-function Te(e) {
+const he = p(zt);
+function ge(e) {
   return null;
 }
-function be(e) {
+function Oe(e) {
   return null;
 }
-function He({ className: e, style: t, onLoadingStatusChange: o, children: r, ...n }) {
+function Je({ className: e, style: t, onLoadingStatusChange: o, children: r, ...n }) {
   let c, s;
-  ct.forEach(r, (m) => {
-    K(m) && (m.type === Te ? c = m.props : m.type === be && (s = m.props));
+  ct.forEach(r, (E) => {
+    W(E) && (E.type === ge ? c = E.props : E.type === Oe && (s = E.props));
   });
-  const l = s == null ? void 0 : s.children, f = N(() => ({ fallback: l }), [l]);
+  const l = s == null ? void 0 : s.children, f = z(() => ({ fallback: l }), [l]);
   return /* @__PURE__ */ x(
-    ve,
+    he,
     {
       src: c == null ? void 0 : c.src,
       alt: c == null ? void 0 : c.alt,
@@ -694,8 +715,8 @@ function He({ className: e, style: t, onLoadingStatusChange: o, children: r, ...
     }
   );
 }
-const he = p(kt);
-function Ge({
+const _e = p(jt);
+function Qe({
   orientation: e = "vertical",
   scrollbarVisibility: t = "always",
   className: o,
@@ -705,27 +726,27 @@ function Ge({
   viewportRef: s,
   style: l,
   onScroll: f,
-  children: m,
-  ...y
+  children: E,
+  ...P
 }) {
-  const [u, d] = U(null), a = _(
-    (S) => {
-      d(S), typeof s == "function" ? s(S) : s && (s.current = S);
+  const [u, i] = U(null), a = R(
+    (d) => {
+      i(d), typeof s == "function" ? s(d) : s && (s.current = d);
     },
     [s]
   );
-  return /* @__PURE__ */ ue("div", { className: ["moz-scroll-area", o].filter(Boolean).join(" "), style: l, ...y, children: [
+  return /* @__PURE__ */ Ce("div", { className: ["moz-scroll-area", o].filter(Boolean).join(" "), style: l, ...P, children: [
     /* @__PURE__ */ x(
       "div",
       {
         ref: a,
         className: ["moz-scroll-area-viewport", r].filter(Boolean).join(" "),
         "data-moz-scroll-area-viewport": "",
-        children: m
+        children: E
       }
     ),
     /* @__PURE__ */ x(
-      he,
+      _e,
       {
         viewport: u,
         interactionRoot: u == null ? void 0 : u.parentElement,
@@ -738,69 +759,72 @@ function Ge({
     )
   ] });
 }
-const qe = p(wt), Xe = p(zt), Ye = p(jt), Je = p(Nt), Qe = p(Bt), Ze = p(Ut), to = p(Dt), eo = p(Kt), oo = p(Vt), no = p(Wt), ro = p($t), so = p(Ft), co = p(Ht), lo = p(Gt), uo = p(qt), ao = p(Xt), io = p(Yt), po = p(Jt), fo = p(Qt), Co = p(Zt), Eo = p(te), Po = p(ee), mo = p(oe), yo = p(ne), So = p(re), vo = p(se), To = p(ce), bo = p(le);
+const Ze = p(Bt), to = p(Ut), eo = p(Dt), oo = p(Wt), no = p(Ft), ro = p(Kt), so = p($t), co = p(Vt), lo = p(Ht), uo = p(Gt), ao = p(qt), io = p(Xt), po = p(Yt), fo = p(Jt), Co = p(Qt), Eo = p(Zt), Po = p(te), mo = p(ee), So = p(oe), yo = p(ne), To = p(re), vo = p(se), bo = p(ce), Ao = p(le), ho = p(ue), go = p(ae), Oo = p(ie), _o = p(pe), Ro = p(fe), Io = p(de);
 export {
-  He as Avatar,
-  be as AvatarFallback,
-  Te as AvatarImage,
-  Ye as Badge,
-  to as BreadCrumb,
-  qe as Button,
-  io as Calendar,
-  Qe as Callout,
-  oo as CheckBox,
-  Je as Chip,
-  We as Collapsible,
-  Fe as CollapsibleContent,
-  $e as CollapsibleTrigger,
-  yo as ContextMenu,
-  To as Controller,
-  po as DateInput,
-  eo as EmptyState,
-  ro as Input,
-  Xe as Label,
-  ut as MozComponentLocaleContext,
-  Ie as MozComponentLocaleProvider,
-  at as MozContextWrapperContext,
-  Eo as MultiSelect,
-  lo as NumberInput,
-  Ce as Pane,
-  so as PasswordInput,
-  Be as Popover,
-  De as PopoverAnchor,
-  Ke as PopoverClose,
-  Ve as PopoverContent,
-  Ue as PopoverTrigger,
-  fo as Popup,
-  no as Radio,
-  ae as ReactRenderer,
-  Ge as ScrollArea,
-  Co as Select,
-  ao as Slider,
-  ke as SplitPane,
-  uo as Tab,
-  So as TableSelect,
-  mo as TagInput,
-  co as TextArea,
-  Po as TimePicker,
-  bo as Toast,
-  Ze as Toggle,
-  ze as Tooltip,
-  Ne as TooltipContent,
-  we as TooltipProvider,
-  je as TooltipTrigger,
-  vo as TreeSelect,
-  xe as Validator,
+  Je as Avatar,
+  Oe as AvatarFallback,
+  ge as AvatarImage,
+  eo as Badge,
+  so as BreadCrumb,
+  Ze as Button,
+  Po as Calendar,
+  no as Callout,
+  lo as CheckBox,
+  oo as Chip,
+  qe as Collapsible,
+  Ye as CollapsibleContent,
+  Xe as CollapsibleTrigger,
+  Ao as ContextMenu,
+  Oo as Controller,
+  mo as DateInput,
+  co as EmptyState,
+  ao as Input,
+  to as Label,
+  at as MozComponentLocaleContext,
+  ke as MozComponentLocaleProvider,
+  it as MozContextWrapperContext,
+  To as MultiSelect,
+  Ro as NotificationCard,
+  Io as NotificationItem,
+  fo as NumberInput,
+  Se as Pane,
+  io as PasswordInput,
+  Ke as Popover,
+  Ve as PopoverAnchor,
+  He as PopoverClose,
+  Ge as PopoverContent,
+  $e as PopoverTrigger,
+  So as Popup,
+  uo as Radio,
+  ut as ReactRenderer,
+  Qe as ScrollArea,
+  yo as Select,
+  Eo as Slider,
+  Be as SplitPane,
+  Co as Tab,
+  ho as TableSelect,
+  bo as TagInput,
+  po as TextArea,
+  vo as TimePicker,
+  _o as Toast,
+  ro as Toggle,
+  De as Tooltip,
+  Fe as TooltipContent,
+  Ue as TooltipProvider,
+  We as TooltipTrigger,
+  go as TreeSelect,
+  we as Validator,
   tt as ValidatorReactContext,
   p as createMozComponent,
-  go as createValidator,
-  Ro as enUS,
-  Oo as jaJP,
-  _o as koKR,
-  ie as useMozComponentLocale,
-  pe as useMozContextWrapper,
-  Lo as useToast,
-  Me as useValidatorContext,
-  Io as zhCN
+  Mo as createValidator,
+  No as enUS,
+  ko as jaJP,
+  wo as koKR,
+  pt as useMozComponentLocale,
+  ft as useMozContextWrapper,
+  je as useNotification,
+  zo as useToast,
+  ze as useValidatorContext,
+  jo as zhCN
 };
 //# sourceMappingURL=index.js.map