@weing-dev/ui-kit-primitive 0.3.2 → 0.4.2

package/dist/navigation.js

@@ -0,0 +1,1036 @@
+import { c as k, j as b } from "./compiler-runtime-BFrE5JtX.js";
+import p from "react";
+import { c as Y } from "./bind-D3ZJ5k4I.js";
+import { a as F } from "./Icon-DExqF865.js";
+import { c as C, T as W } from "./color-B71xRiyK.js";
+const at = "_Unset_hr4h9_2", dt = "_Root_hr4h9_6", ut = "_transition_hr4h9_15", ft = "_contained_hr4h9_20", mt = "_outlined_hr4h9_24", _t = "_adaptived_hr4h9_27", ht = "_open_hr4h9_31", bt = "_bottomLined_hr4h9_34", gt = "_sideLined_hr4h9_43", xt = "_shadow_hr4h9_52", vt = "_disabled_hr4h9_57", Ct = "_unset_hr4h9_69", pt = "_Trigger_hr4h9_77", $t = "_TriggerIcon_hr4h9_91", yt = "_Item_hr4h9_112", kt = {
+  Unset: at,
+  Root: dt,
+  transition: ut,
+  contained: ft,
+  outlined: mt,
+  adaptived: _t,
+  open: ht,
+  bottomLined: bt,
+  sideLined: gt,
+  shadow: xt,
+  disabled: vt,
+  unset: Ct,
+  Trigger: pt,
+  TriggerIcon: $t,
+  Item: yt
+}, nt = {
+  disabled: !1,
+  autoClosed: !0,
+  variant: "contained",
+  transition: !0
+}, ot = p.createContext(nt), Lt = (o) => {
+  const t = k.c(5), {
+    children: l
+  } = o;
+  let r;
+  t[0] !== o ? (r = {
+    ...nt,
+    ...o
+  }, t[0] = o, t[1] = r) : r = t[1];
+  let e;
+  return t[2] !== l || t[3] !== r ? (e = /* @__PURE__ */ b.jsx(ot.Provider, { value: r, children: l }), t[2] = l, t[3] = r, t[4] = e) : e = t[4], e;
+}, Z = Y.bind(kt), St = (o) => {
+  const t = k.c(13), {
+    children: l,
+    className: r
+  } = o, e = p.useRef(null), s = p.useContext(ot), {
+    open: n,
+    disabled: a,
+    transition: c,
+    "#firstClick": i
+  } = s;
+  let d, u;
+  t[0] !== i || t[1] !== n || t[2] !== c ? (d = () => {
+    if (!e.current || !c)
+      return;
+    const _ = window.getComputedStyle(e.current).paddingBottom, v = `${Array.from(e.current.childNodes).reduce(It, +_.split("px")[0])}`, x = {
+      duration: typeof c == "boolean" ? 250 : (c == null ? void 0 : c.duration) ?? 250,
+      easing: typeof c == "boolean" ? "ease-in-out" : (c == null ? void 0 : c.timingFC) ?? "ease-in-out"
+    }, $ = (...S) => {
+      const y = S;
+      e.current && e.current.animate(y, x);
+    };
+    if (n) {
+      if (!i)
+        return;
+      $({
+        maxHeight: 0,
+        opacity: 0,
+        marginBottom: `-${_}`
+      }, {
+        maxHeight: `${v}px`,
+        opacity: 1,
+        marginBottom: 0
+      });
+    } else {
+      if (!i)
+        return;
+      $({
+        maxHeight: `${e.current.scrollHeight}px`,
+        opacity: 1,
+        marginBottom: 0
+      }, {
+        maxHeight: 0,
+        opacity: 0,
+        marginBottom: `-${_}`
+      });
+    }
+  }, u = [i, c, n], t[0] = i, t[1] = n, t[2] = c, t[3] = d, t[4] = u) : (d = t[3], u = t[4]), p.useEffect(d, u);
+  const m = !!c;
+  let f;
+  t[5] !== r || t[6] !== a || t[7] !== n || t[8] !== m ? (f = Z("Item", r, {
+    open: n,
+    disabled: a,
+    transition: m
+  }), t[5] = r, t[6] = a, t[7] = n, t[8] = m, t[9] = f) : f = t[9];
+  let h;
+  return t[10] !== l || t[11] !== f ? (h = /* @__PURE__ */ b.jsx("div", { ref: e, className: f, children: l }), t[10] = l, t[11] = f, t[12] = h) : h = t[12], h;
+}, jt = (o) => {
+  const t = k.c(16), {
+    as: l,
+    children: r,
+    className: e
+  } = o, {
+    id: s,
+    open: n,
+    disabled: a,
+    transition: c,
+    onClick: i,
+    onChange: d,
+    "#triggerRef": u
+  } = p.useContext(ot);
+  let m;
+  t[0] !== a || t[1] !== s || t[2] !== d || t[3] !== i || t[4] !== n ? (m = {
+    hidden: !0,
+    type: "checkbox",
+    defaultChecked: n,
+    id: s,
+    disabled: a,
+    onClick: i,
+    onChange: d
+  }, t[0] = a, t[1] = s, t[2] = d, t[3] = i, t[4] = n, t[5] = m) : m = t[5];
+  const f = m;
+  let h;
+  return t[6] !== l || t[7] !== r || t[8] !== e || t[9] !== a || t[10] !== s || t[11] !== f || t[12] !== n || t[13] !== c || t[14] !== u ? (h = l ? /* @__PURE__ */ b.jsxs("label", { htmlFor: s, children: [
+    /* @__PURE__ */ b.jsx("input", { ref: u, ...f }),
+    l({
+      id: s,
+      open: n,
+      disabled: a
+    })
+  ] }) : /* @__PURE__ */ b.jsxs("label", { htmlFor: s, className: Z("Trigger", e, {
+    disabled: a
+  }), children: [
+    /* @__PURE__ */ b.jsx("input", { ref: u, ...f }),
+    r,
+    /* @__PURE__ */ b.jsx(F, { name: "ExpandMore", className: Z("TriggerIcon", {
+      open: n,
+      transition: !!c
+    }), color: "var(--textSecondary, #919eab)" })
+  ] }), t[6] = l, t[7] = r, t[8] = e, t[9] = a, t[10] = s, t[11] = f, t[12] = n, t[13] = c, t[14] = u, t[15] = h) : h = t[15], h;
+}, Pt = (o) => {
+  const t = k.c(35), {
+    children: l,
+    className: r,
+    open: e,
+    variant: s,
+    disabled: n,
+    autoClosed: a,
+    transition: c,
+    onClick: i
+  } = o, d = s === void 0 ? "contained" : s, u = n === void 0 ? !1 : n, m = a === void 0 ? !0 : a, f = c === void 0 ? !0 : c, [h, g] = p.useState(!1), [_, v] = p.useState(!1), x = p.useId(), $ = p.useRef(null), S = p.useRef(null);
+  let y;
+  t[0] !== u || t[1] !== _ || t[2] !== i || t[3] !== e ? (y = () => {
+    u || (e === void 0 && (g == null || g(Tt)), _ || v == null || v(!0), i == null || i());
+  }, t[0] = u, t[1] = _, t[2] = i, t[3] = e, t[4] = y) : y = t[4];
+  const L = y, j = e ?? h, q = o.id ?? x;
+  let M;
+  t[5] !== j || t[6] !== _ || t[7] !== L || t[8] !== o || t[9] !== q ? (M = {
+    ...o,
+    id: q,
+    open: j,
+    "#triggerRef": S,
+    "#firstClick": _,
+    onClick: L
+  }, t[5] = j, t[6] = _, t[7] = L, t[8] = o, t[9] = q, t[10] = M) : M = t[10];
+  const H = M;
+  let A;
+  t[11] === Symbol.for("react.memo_cache_sentinel") ? (A = (V) => {
+    var Q, rt;
+    const O = V.target;
+    (Q = $.current) != null && Q.contains(O) || (rt = S.current) == null || rt.click();
+  }, t[11] = A) : A = t[11];
+  const R = A;
+  let N, D;
+  t[12] !== m || t[13] !== j || t[14] !== u ? (N = () => {
+    if (!(u || !j) && m)
+      return document.addEventListener("click", R), () => {
+        document.removeEventListener("click", R);
+      };
+  }, D = [u, j, m, R], t[12] = m, t[13] = j, t[14] = u, t[15] = N, t[16] = D) : (N = t[15], D = t[16]), p.useEffect(N, D);
+  const B = d === "unset" ? "Unset" : "Root", E = !!f;
+  let P;
+  t[17] !== r || t[18] !== j || t[19] !== u || t[20] !== B || t[21] !== E || t[22] !== d ? (P = Z(B, r, d, {
+    open: j,
+    transition: E,
+    disabled: u
+  }), t[17] = r, t[18] = j, t[19] = u, t[20] = B, t[21] = E, t[22] = d, t[23] = P) : P = t[23];
+  let T;
+  t[24] !== f ? (T = typeof f != "boolean" && {
+    transitionDuration: `${+((f == null ? void 0 : f.duration) ?? 250) / 1e3}s`,
+    transitionTimingFunction: (f == null ? void 0 : f.timingFC) ?? "ease-in-out"
+  }, t[24] = f, t[25] = T) : T = t[25];
+  let I;
+  t[26] !== T ? (I = {
+    ...T
+  }, t[26] = T, t[27] = I) : I = t[27];
+  let w;
+  t[28] !== l || t[29] !== P || t[30] !== I ? (w = /* @__PURE__ */ b.jsx("div", { ref: $, className: P, style: I, children: l }), t[28] = l, t[29] = P, t[30] = I, t[31] = w) : w = t[31];
+  let z;
+  return t[32] !== H || t[33] !== w ? (z = /* @__PURE__ */ b.jsx(Lt, { ...H, children: w }), t[32] = H, t[33] = w, t[34] = z) : z = t[34], z;
+}, xo = {
+  Root: Pt,
+  Trigger: jt,
+  Item: St
+};
+function It(o, t) {
+  return o + t.scrollHeight;
+}
+function Tt(o) {
+  return !o;
+}
+const Nt = "_List_oqxbn_2", Dt = "_Link_oqxbn_7", wt = "_href_oqxbn_12", Rt = "_focused_oqxbn_15", Bt = "_Separator_oqxbn_18", zt = "_Ellipsis_oqxbn_21", Mt = {
+  List: Nt,
+  Link: Dt,
+  href: wt,
+  focused: Rt,
+  Separator: Bt,
+  Ellipsis: zt
+}, J = Y.bind(Mt), At = (o) => {
+  const t = k.c(5), {
+    className: l,
+    onClick: r
+  } = o;
+  let e;
+  t[0] !== l ? (e = J("Ellipsis", l), t[0] = l, t[1] = e) : e = t[1];
+  let s;
+  return t[2] !== r || t[3] !== e ? (s = /* @__PURE__ */ b.jsx(F, { name: "More", className: e, onClick: r }), t[2] = r, t[3] = e, t[4] = s) : s = t[4], s;
+}, Et = (o) => {
+  const t = k.c(4), {
+    className: l
+  } = o;
+  let r;
+  t[0] !== l ? (r = J("Separator", l), t[0] = l, t[1] = r) : r = t[1];
+  let e;
+  return t[2] !== r ? (e = /* @__PURE__ */ b.jsx(F, { name: "GoNext", className: r }), t[2] = r, t[3] = e) : e = t[3], e;
+}, qt = (o) => {
+  const t = k.c(11), {
+    children: l,
+    className: r,
+    href: e,
+    focused: s,
+    onClick: n,
+    as: a
+  } = o, c = s === void 0 ? !1 : s;
+  let i;
+  t[0] !== c || t[1] !== e || t[2] !== n ? (i = (m) => {
+    (!e || c) && m.preventDefault(), n == null || n(m);
+  }, t[0] = c, t[1] = e, t[2] = n, t[3] = i) : i = t[3];
+  const d = i;
+  let u;
+  return t[4] !== a || t[5] !== l || t[6] !== r || t[7] !== d || t[8] !== c || t[9] !== e ? (u = a ? a({
+    className: J("Link", r, {
+      href: e,
+      focused: c
+    }),
+    href: e,
+    focused: c,
+    onClick: d
+  }) : /* @__PURE__ */ b.jsx("a", { ...e && !c && {
+    href: e
+  }, className: J("Link", r, {
+    href: e,
+    focused: c
+  }), onClick: d, children: l }), t[4] = a, t[5] = l, t[6] = r, t[7] = d, t[8] = c, t[9] = e, t[10] = u) : u = t[10], u;
+}, Ht = (o) => {
+  const t = k.c(8), {
+    children: l,
+    className: r,
+    separator: e
+  } = o;
+  let s;
+  if (t[0] !== l || t[1] !== e) {
+    const i = p.Children.toArray(l);
+    s = e ? i.flatMap((d, u) => u < i.length - 1 ? [d, p.cloneElement(e, {
+      key: `separator-${u}`
+    })] : [d]) : i, t[0] = l, t[1] = e, t[2] = s;
+  } else
+    s = t[2];
+  const n = s;
+  let a;
+  t[3] !== r ? (a = J("List", r), t[3] = r, t[4] = a) : a = t[4];
+  let c;
+  return t[5] !== n || t[6] !== a ? (c = /* @__PURE__ */ b.jsx("div", { className: a, children: n }), t[5] = n, t[6] = a, t[7] = c) : c = t[7], c;
+}, vo = {
+  List: Ht,
+  Link: qt,
+  Separator: Et,
+  Ellipsis: At
+}, Wt = "_List_1lfpt_2", Ft = "_s_1lfpt_8", Ot = "_row_1lfpt_8", Gt = "_m_1lfpt_11", Ut = "_l_1lfpt_14", Xt = "_column_1lfpt_17", Yt = "_TextWrapper_1lfpt_20", Vt = "_Title_1lfpt_32", Jt = "_text_1lfpt_39", Kt = "_contentsHeader_1lfpt_90", Qt = "_Label_1lfpt_107", Zt = {
+  List: Wt,
+  s: Ft,
+  row: Ot,
+  m: Gt,
+  l: Ut,
+  column: Xt,
+  TextWrapper: Yt,
+  Title: Vt,
+  text: Jt,
+  contentsHeader: Kt,
+  Label: Qt
+}, G = Y.bind(Zt), Co = (o) => {
+  const t = k.c(27);
+  let l, r, e, s, n, a, c, i, d, u;
+  if (t[0] !== o) {
+    const {
+      direction: g,
+      type: _,
+      size: v,
+      icon: x,
+      title: $,
+      label: S,
+      children: y,
+      ...L
+    } = o;
+    if (e = x, d = $, n = S, l = y, r = g === void 0 ? "row" : g, u = _ === void 0 ? "default" : _, a = v === void 0 ? "m" : v, s = (d == null ? void 0 : d.value) || (n == null ? void 0 : n.value), u !== "default" && e)
+      throw new Error("text 또는 contentsHeader 타입에서는 icon을 사용할 수 없습니다.");
+    if (u === "default" && d)
+      throw new Error("default 타입에서는 title을 사용할 수 없습니다.");
+    if (!n)
+      throw new Error("label이 필요합니다.");
+    c = L, i = G("List", L.className, a, r), t[0] = o, t[1] = l, t[2] = r, t[3] = e, t[4] = s, t[5] = n, t[6] = a, t[7] = c, t[8] = i, t[9] = d, t[10] = u;
+  } else
+    l = t[1], r = t[2], e = t[3], s = t[4], n = t[5], a = t[6], c = t[7], i = t[8], d = t[9], u = t[10];
+  let m;
+  t[11] !== r || t[12] !== s || t[13] !== n || t[14] !== a || t[15] !== d || t[16] !== u ? (m = s && /* @__PURE__ */ b.jsxs("div", { className: G("TextWrapper", r), children: [
+    (d == null ? void 0 : d.value) && /* @__PURE__ */ b.jsx("div", { ...d, className: G("Title", d.className, u, a, r), children: d == null ? void 0 : d.value }),
+    (n == null ? void 0 : n.value) && /* @__PURE__ */ b.jsx("div", { ...n, className: G("Label", n.className, a), children: n == null ? void 0 : n.value }),
+    (n == null ? void 0 : n.children) && /* @__PURE__ */ b.jsx("div", { ...n, className: G("Label", n.className, a), children: n == null ? void 0 : n.children })
+  ] }), t[11] = r, t[12] = s, t[13] = n, t[14] = a, t[15] = d, t[16] = u, t[17] = m) : m = t[17];
+  let f;
+  t[18] !== e || t[19] !== u ? (f = u === "default" && /* @__PURE__ */ b.jsx(F, { ...e, name: (e == null ? void 0 : e.name) ?? "ExpandMore", size: (e == null ? void 0 : e.size) ?? 24, className: G("Icon", e == null ? void 0 : e.className) }), t[18] = e, t[19] = u, t[20] = f) : f = t[20];
+  let h;
+  return t[21] !== l || t[22] !== c || t[23] !== i || t[24] !== m || t[25] !== f ? (h = /* @__PURE__ */ b.jsxs("div", { ...c, className: i, children: [
+    m,
+    l,
+    f
+  ] }), t[21] = l, t[22] = c, t[23] = i, t[24] = m, t[25] = f, t[26] = h) : h = t[26], h;
+}, te = "_Wrapper_1ss2n_2", ee = "_Logo_1ss2n_6", oe = "_List_1ss2n_14", re = "_Item_1ss2n_18", ne = "_active_1ss2n_34", se = "_TextGroup_1ss2n_38", le = "_Subtitle_1ss2n_44", ie = "_full_1ss2n_61", ce = "_secondary_1ss2n_81", ae = "_list_1ss2n_100", de = "_title_1ss2n_119", ue = "_disabled_1ss2n_138", fe = {
+  Wrapper: te,
+  Logo: ee,
+  List: oe,
+  Item: re,
+  active: ne,
+  TextGroup: se,
+  Subtitle: le,
+  full: ie,
+  secondary: ce,
+  list: ae,
+  title: de,
+  disabled: ue
+}, st = {
+  onClick: (o) => {
+    window.location.href = o;
+  }
+}, lt = p.createContext(st), me = () => {
+  const o = {
+    enabled: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${C.light.textSecondary})`,
+      borderColor: "transparent"
+    },
+    actived: {
+      backgroundColor: `var(--primary4, ${W.primary4})`,
+      color: `var(--pDark, ${C.primary.pDark})`,
+      borderColor: "transparent"
+    },
+    hover: {
+      backgroundColor: `var(--grey4, ${W.grey4})`,
+      color: `var(--textPrimary, ${C.light.textPrimary})`,
+      borderColor: "transparent"
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${C.light.textDisabled})`,
+      borderColor: "transparent"
+    }
+  }, t = {
+    enabled: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${C.light.textSecondary})`,
+      borderColor: "transparent"
+    },
+    actived: {
+      backgroundColor: `var(--primary4, ${W.primary4})`,
+      color: `var(--pDark, ${C.primary.pDark})`,
+      borderColor: "transparent"
+    },
+    hover: {
+      backgroundColor: `var(--grey4, ${W.grey4})`,
+      color: `var(--textPrimary, ${C.light.textPrimary})`,
+      borderColor: "transparent"
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${C.light.textDisabled})`,
+      borderColor: "transparent"
+    }
+  }, l = {
+    enabled: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${C.light.textSecondary})`,
+      borderColor: "transparent"
+    },
+    actived: {
+      backgroundColor: `var(--primary4, ${W.primary4})`,
+      color: `var(--pDark, ${C.primary.pDark})`,
+      borderColor: "transparent"
+    },
+    hover: {
+      backgroundColor: `var(--grey4, ${W.grey4})`,
+      color: `var(--textPrimary, ${C.light.textPrimary})`,
+      borderColor: "transparent"
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${C.light.textDisabled})`,
+      borderColor: "transparent"
+    }
+  }, r = {
+    enabled: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${C.light.textSecondary})`,
+      borderColor: "transparent"
+    },
+    actived: {
+      backgroundColor: W.primary4,
+      color: `var(--pDark, ${C.primary.pDark})`,
+      borderColor: "transparent"
+    },
+    hover: {
+      backgroundColor: W.grey4,
+      color: `var(--textPrimary, ${C.light.textPrimary})`,
+      borderColor: "transparent"
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${C.light.textDisabled})`,
+      borderColor: "transparent"
+    }
+  };
+  return {
+    full: o,
+    secondary: t,
+    list: l,
+    title: r
+  };
+}, U = Y.bind(fe), _e = (o) => {
+  const t = k.c(8), {
+    className: l,
+    src: r
+  } = o;
+  let e;
+  t[0] !== l ? (e = U("Logo", l), t[0] = l, t[1] = e) : e = t[1];
+  let s;
+  t[2] !== r ? (s = /* @__PURE__ */ b.jsx("img", { src: r, alt: "logo" }), t[2] = r, t[3] = s) : s = t[3];
+  let n;
+  return t[4] !== o.children || t[5] !== e || t[6] !== s ? (n = /* @__PURE__ */ b.jsxs("div", { className: e, children: [
+    s,
+    o.children
+  ] }), t[4] = o.children, t[5] = e, t[6] = s, t[7] = n) : n = t[7], n;
+}, he = (o) => {
+  const t = k.c(53), {
+    className: l,
+    label: r,
+    icon: e,
+    subtitle: s,
+    type: n,
+    disabled: a,
+    href: c,
+    hasChildren: i,
+    isOpen: d,
+    isActive: u,
+    children: m
+  } = o, f = d === void 0 ? !0 : d, h = u === void 0 ? !1 : u, {
+    onClick: g
+  } = p.use(lt), [_, v] = p.useState(f);
+  let x, $;
+  t[0] !== f ? (x = () => {
+    v(f);
+  }, $ = [f], t[0] = f, t[1] = x, t[2] = $) : (x = t[1], $ = t[2]), p.useEffect(x, $);
+  const y = me()[n], L = a ? y.disabled.color : y.enabled.color, j = h ? y.actived.color : L, q = y.hover.color, M = y.enabled.backgroundColor, H = y.actived.backgroundColor, A = y.hover.backgroundColor;
+  let R;
+  t[3] !== l || t[4] !== a || t[5] !== h || t[6] !== n ? (R = U("Item", n, l, {
+    active: h,
+    disabled: a
+  }), t[3] = l, t[4] = a, t[5] = h, t[6] = n, t[7] = R) : R = t[7];
+  let N;
+  t[8] !== H || t[9] !== j || t[10] !== M || t[11] !== L || t[12] !== A || t[13] !== q ? (N = {
+    "--default-color": L,
+    "--active-color": j,
+    "--hover-color": q,
+    "--default-bg-color": M,
+    "--active-bg-color": H,
+    "--hover-bg-color": A
+  }, t[8] = H, t[9] = j, t[10] = M, t[11] = L, t[12] = A, t[13] = q, t[14] = N) : N = t[14];
+  let D;
+  t[15] !== a || t[16] !== i || t[17] !== c || t[18] !== g || t[19] !== _ ? (D = (Q) => {
+    if (Q.stopPropagation(), !a) {
+      if (!i) {
+        g == null || g(c);
+        return;
+      }
+      v(!_);
+    }
+  }, t[15] = a, t[16] = i, t[17] = c, t[18] = g, t[19] = _, t[20] = D) : D = t[20];
+  let B;
+  t[21] !== j || t[22] !== L || t[23] !== a || t[24] !== e || t[25] !== h ? (B = e && /* @__PURE__ */ b.jsx(F, { name: e, size: 20, color: !a && h ? j : L }), t[21] = j, t[22] = L, t[23] = a, t[24] = e, t[25] = h, t[26] = B) : B = t[26];
+  let E;
+  t[27] === Symbol.for("react.memo_cache_sentinel") ? (E = U("TextGroup"), t[27] = E) : E = t[27];
+  let P;
+  t[28] !== r ? (P = /* @__PURE__ */ b.jsx("span", { children: r }), t[28] = r, t[29] = P) : P = t[29];
+  let T;
+  t[30] !== s || t[31] !== n ? (T = n === "full" && /* @__PURE__ */ b.jsx("span", { className: U("Subtitle"), children: s }), t[30] = s, t[31] = n, t[32] = T) : T = t[32];
+  let I;
+  t[33] !== T || t[34] !== P ? (I = /* @__PURE__ */ b.jsxs("div", { className: E, children: [
+    P,
+    T
+  ] }), t[33] = T, t[34] = P, t[35] = I) : I = t[35];
+  let w;
+  t[36] !== j || t[37] !== L || t[38] !== a || t[39] !== i || t[40] !== h || t[41] !== _ ? (w = i && /* @__PURE__ */ b.jsx(F, { name: _ ? "ExpandMore" : "ArrowRight", size: 20, color: !a && h ? j : L }), t[36] = j, t[37] = L, t[38] = a, t[39] = i, t[40] = h, t[41] = _, t[42] = w) : w = t[42];
+  let z;
+  t[43] !== I || t[44] !== w || t[45] !== R || t[46] !== N || t[47] !== D || t[48] !== B ? (z = /* @__PURE__ */ b.jsxs("div", { className: R, style: N, onClick: D, children: [
+    B,
+    I,
+    w
+  ] }), t[43] = I, t[44] = w, t[45] = R, t[46] = N, t[47] = D, t[48] = B, t[49] = z) : z = t[49];
+  const V = _ && i ? m : null;
+  let O;
+  return t[50] !== z || t[51] !== V ? (O = /* @__PURE__ */ b.jsxs(p.Fragment, { children: [
+    z,
+    V
+  ] }), t[50] = z, t[51] = V, t[52] = O) : O = t[52], O;
+}, be = (o) => {
+  const t = k.c(5), {
+    className: l,
+    children: r
+  } = o;
+  let e;
+  t[0] !== l ? (e = U("List", l), t[0] = l, t[1] = e) : e = t[1];
+  let s;
+  return t[2] !== r || t[3] !== e ? (s = /* @__PURE__ */ b.jsx("div", { className: e, children: r }), t[2] = r, t[3] = e, t[4] = s) : s = t[4], s;
+}, ge = (o) => {
+  const t = k.c(10), {
+    children: l,
+    className: r,
+    onClick: e
+  } = o;
+  let s;
+  t[0] !== e ? (s = {
+    ...st,
+    onClick: e
+  }, t[0] = e, t[1] = s) : s = t[1];
+  const n = s;
+  let a;
+  t[2] !== r ? (a = U("Wrapper", r), t[2] = r, t[3] = a) : a = t[3];
+  let c;
+  t[4] !== l || t[5] !== a ? (c = /* @__PURE__ */ b.jsx("div", { className: a, children: l }), t[4] = l, t[5] = a, t[6] = c) : c = t[6];
+  let i;
+  return t[7] !== n || t[8] !== c ? (i = /* @__PURE__ */ b.jsx(lt, { value: n, children: c }), t[7] = n, t[8] = c, t[9] = i) : i = t[9], i;
+}, po = {
+  Logo: _e,
+  List: be,
+  Item: he,
+  Root: ge
+}, xe = /* @__PURE__ */ new Map([["ko", "한국어"], ["en", "English"], ["ja", "日本語"], ["zh-CN", "简体中文"]]);
+function ve({
+  list: o,
+  depth: t = 1,
+  isCommerce: l = !1,
+  maxDepth: r,
+  pathName: e
+}) {
+  return o.map((s) => {
+    const n = s.href, a = Array.from(xe.keys()), c = e != null && e.split("/").some((u) => a.includes(u)) ? (e == null ? void 0 : e.split("/")[t + 1]) === s.key : (e == null ? void 0 : e.split("/")[t]) === s.key, i = s.children && s.children.length > 0 ? !1 : e != null && e.split("/").some((u) => a.includes(u)) ? "/" + e.split("/").slice(2).join("/") === n || ("/" + e.split("/").slice(2).join("/")).startsWith(n + "/") : e === n || e.startsWith(n + "/");
+    s.isOpen = c, s.isActive = i;
+    const d = s.children ? ve({
+      list: (s == null ? void 0 : s.children) || [],
+      depth: t + 1,
+      maxDepth: r,
+      isCommerce: l,
+      pathName: e
+    }) : [];
+    return {
+      ...s,
+      href: n,
+      children: r && t >= r ? [] : d,
+      depth: t
+    };
+  });
+}
+const Ce = "_Root_hmncd_2", pe = "_medium_hmncd_8", $e = "_small_hmncd_11", ye = "_PageItem_hmncd_14", ke = "_square_hmncd_39", Le = "_round_hmncd_42", Se = "_active_hmncd_45", je = "_disabled_hmncd_62", Pe = "_Icon_hmncd_65", Ie = {
+  Root: Ce,
+  medium: pe,
+  small: $e,
+  PageItem: ye,
+  square: ke,
+  round: Le,
+  active: Se,
+  disabled: je,
+  Icon: Pe
+}, Te = {
+  colorType: "primary",
+  variant: "soft",
+  size: "medium",
+  total: 0,
+  currentPage: 1,
+  pageCount: 5,
+  onClick: () => {
+  }
+}, K = p.createContext(Te), Ne = () => {
+  const o = {
+    primary: {
+      text: {
+        backgroundColor: `var(--pMain, ${C.primary.pMain})`,
+        color: `var(--textContrast, ${C.primary.pContrastText})`,
+        borderColor: "transparent"
+      },
+      soft: {
+        backgroundColor: `var(--p8, ${C.primary.p8})`,
+        color: `var(--swapDarkLightPrimary, ${C.light.swapDarkLightPrimary})`,
+        borderColor: "transparent"
+      },
+      disabled: {
+        backgroundColor: `var(--actionDisabledBackground, ${C.light.actionDisabledBackground})`,
+        color: `var(--textDisabled, ${C.light.textDisabled})`,
+        borderColor: "transparent"
+      }
+    },
+    standard: {
+      text: {
+        backgroundColor: `var(--inheritBgcolor,${C.light.inheritBgcolor})`,
+        color: `var(--inheritColor, ${C.light.inheritColor})`,
+        borderColor: "transparent"
+      },
+      soft: {
+        backgroundColor: `var(--grey8, ${W.grey8})`,
+        color: `var(--textPrimary, ${C.light.textPrimary})`,
+        borderColor: "transparent"
+      },
+      disabled: {
+        backgroundColor: `var(--actionDisabledBackground, ${C.light.actionDisabledBackground})`,
+        color: `var(--textDisabled, ${C.light.textDisabled})`,
+        borderColor: "transparent"
+      }
+    }
+  }, t = {
+    primary: {
+      text: {
+        backgroundColor: "transparent",
+        color: `var(--textSecondary, ${C.light.textSecondary})`,
+        borderColor: "transparent"
+      },
+      soft: {
+        backgroundColor: "transparent",
+        color: `var(--textSecondary, ${C.light.textSecondary})`,
+        borderColor: "transparent"
+      },
+      disabled: {
+        backgroundColor: "transparent",
+        color: `var(--textDisabled, ${C.light.textDisabled})`,
+        borderColor: "transparent"
+      }
+    },
+    standard: {
+      text: {
+        backgroundColor: "transparent",
+        color: `var(--textSecondary, ${C.light.textSecondary})`,
+        borderColor: "transparent"
+      },
+      soft: {
+        backgroundColor: "transparent",
+        color: `var(--textSecondary, ${C.light.textSecondary})`,
+        borderColor: "transparent"
+      },
+      disabled: {
+        backgroundColor: "transparent",
+        color: `var(--textDisabled, ${C.light.textDisabled})`,
+        borderColor: "transparent"
+      }
+    }
+  };
+  return {
+    selected: o,
+    unselected: t
+  };
+}, tt = Y.bind(Ie), De = () => {
+  const o = k.c(15), {
+    size: t,
+    onClick: l,
+    limit: r,
+    currentPage: e,
+    disabled: s,
+    total: n,
+    pageCount: a
+  } = p.use(K), c = r === void 0 ? 15 : r, i = s || e === n || n <= a;
+  let d;
+  o[0] !== e || o[1] !== i || o[2] !== c || o[3] !== l ? (d = () => {
+    i || l({
+      offset: e * c,
+      limit: c
+    });
+  }, o[0] = e, o[1] = i, o[2] = c, o[3] = l, o[4] = d) : d = o[4];
+  const u = d;
+  let m;
+  o[5] !== i || o[6] !== t ? (m = tt("Icon", t, {
+    disabled: i
+  }), o[5] = i, o[6] = t, o[7] = m) : m = o[7];
+  const f = t === "medium" ? 24 : 20, h = i ? "#C4CDD5" : "#1C252E";
+  let g;
+  o[8] !== f || o[9] !== h ? (g = /* @__PURE__ */ b.jsx(F, { name: "GoNext", size: f, color: h }), o[8] = f, o[9] = h, o[10] = g) : g = o[10];
+  let _;
+  return o[11] !== u || o[12] !== m || o[13] !== g ? (_ = /* @__PURE__ */ b.jsx("button", { className: m, onClick: u, children: g }), o[11] = u, o[12] = m, o[13] = g, o[14] = _) : _ = o[14], _;
+}, we = () => {
+  const o = k.c(15), {
+    size: t,
+    onClick: l,
+    limit: r,
+    currentPage: e,
+    disabled: s,
+    total: n,
+    pageCount: a
+  } = p.use(K), c = r === void 0 ? 15 : r, i = s || e === 1 || n <= a;
+  let d;
+  o[0] !== e || o[1] !== i || o[2] !== c || o[3] !== l ? (d = () => {
+    i || l({
+      offset: (e - 2) * c,
+      limit: c
+    });
+  }, o[0] = e, o[1] = i, o[2] = c, o[3] = l, o[4] = d) : d = o[4];
+  const u = d;
+  let m;
+  o[5] !== i || o[6] !== t ? (m = tt("Icon", t, {
+    disabled: i
+  }), o[5] = i, o[6] = t, o[7] = m) : m = o[7];
+  const f = t === "medium" ? 24 : 20, h = i ? "#C4CDD5" : "#1C252E";
+  let g;
+  o[8] !== f || o[9] !== h ? (g = /* @__PURE__ */ b.jsx(F, { name: "GoBefore", size: f, color: h }), o[8] = f, o[9] = h, o[10] = g) : g = o[10];
+  let _;
+  return o[11] !== u || o[12] !== m || o[13] !== g ? (_ = /* @__PURE__ */ b.jsx("button", { className: m, onClick: u, children: g }), o[11] = u, o[12] = m, o[13] = g, o[14] = _) : _ = o[14], _;
+}, it = (o) => {
+  const t = k.c(16), {
+    active: l,
+    onClick: r,
+    page: e
+  } = o, {
+    shapeType: s,
+    variant: n,
+    colorType: a,
+    disabled: c
+  } = p.use(K), i = s === void 0 ? "round" : s, u = Ne()[l ? "selected" : "unselected"][a], m = u[c ? "disabled" : n], f = u[c ? "disabled" : n], h = u[n];
+  let g;
+  t[0] !== m.color || t[1] !== f.backgroundColor || t[2] !== h.borderColor ? (g = {
+    "--color": m.color,
+    "--background-color": f.backgroundColor,
+    "--border-color": h.borderColor
+  }, t[0] = m.color, t[1] = f.backgroundColor, t[2] = h.borderColor, t[3] = g) : g = t[3];
+  const _ = g;
+  let v;
+  t[4] !== r || t[5] !== e ? (v = r.bind(null, e), t[4] = r, t[5] = e, t[6] = v) : v = t[6];
+  let x;
+  t[7] !== l || t[8] !== c || t[9] !== i ? (x = tt("PageItem", i, {
+    active: l,
+    disabled: c
+  }), t[7] = l, t[8] = c, t[9] = i, t[10] = x) : x = t[10];
+  let $;
+  return t[11] !== e || t[12] !== _ || t[13] !== v || t[14] !== x ? ($ = /* @__PURE__ */ b.jsx("button", { onClick: v, className: x, style: _, children: e }), t[11] = e, t[12] = _, t[13] = v, t[14] = x, t[15] = $) : $ = t[15], $;
+}, Re = (o) => {
+  const t = k.c(9), {
+    itemAs: l
+  } = o, {
+    onClick: r,
+    total: e,
+    currentPage: s,
+    pageCount: n,
+    limit: a,
+    disabled: c
+  } = p.use(K), i = a === void 0 ? 15 : a;
+  let d, u;
+  if (t[0] !== s || t[1] !== c || t[2] !== l || t[3] !== i || t[4] !== r || t[5] !== n || t[6] !== e) {
+    u = Symbol.for("react.early_return_sentinel");
+    t: {
+      const m = [];
+      let f = s - Math.floor(n / 2);
+      f < 1 && (f = 1);
+      let h = f + n - 1;
+      h > e && (h = e, f = Math.max(1, h - n + 1));
+      for (let _ = f; _ <= h; _++)
+        m.push(_);
+      if (e === 0) {
+        u = null;
+        break t;
+      }
+      const g = (_) => {
+        c || s !== _ && r({
+          offset: (_ - 1) * i,
+          limit: i
+        });
+      };
+      d = /* @__PURE__ */ b.jsx(p.Fragment, { children: m.map((_, v) => /* @__PURE__ */ b.jsx(p.Fragment, { children: l ? l({
+        page: _,
+        active: s === _,
+        onClick: g
+      }) : /* @__PURE__ */ b.jsx(it, { onClick: g, active: s === _, page: _ }) }, v)) });
+    }
+    t[0] = s, t[1] = c, t[2] = l, t[3] = i, t[4] = r, t[5] = n, t[6] = e, t[7] = d, t[8] = u;
+  } else
+    d = t[7], u = t[8];
+  return u !== Symbol.for("react.early_return_sentinel") ? u : d;
+}, Be = (o) => {
+  const t = k.c(20), {
+    variant: l,
+    shapeType: r,
+    colorType: e,
+    size: s,
+    total: n,
+    limit: a,
+    offset: c,
+    children: i,
+    pageCount: d,
+    disabled: u,
+    onClick: m
+  } = o, f = r === void 0 ? "round" : r, h = a === void 0 ? 15 : a, g = c === void 0 ? 0 : c, _ = n < h ? 1 : Math.ceil(n / h), v = Math.ceil(g / h) + 1;
+  g > n && console.error("[Pagination] offset can't be greater than total");
+  let x;
+  t[0] !== e || t[1] !== v || t[2] !== u || t[3] !== h || t[4] !== g || t[5] !== m || t[6] !== d || t[7] !== f || t[8] !== s || t[9] !== _ || t[10] !== l ? (x = {
+    shapeType: f,
+    variant: l,
+    colorType: e,
+    size: s,
+    total: _,
+    limit: h,
+    offset: g,
+    currentPage: v,
+    pageCount: d,
+    disabled: u,
+    onClick: m
+  }, t[0] = e, t[1] = v, t[2] = u, t[3] = h, t[4] = g, t[5] = m, t[6] = d, t[7] = f, t[8] = s, t[9] = _, t[10] = l, t[11] = x) : x = t[11];
+  let $;
+  t[12] !== s ? ($ = tt("Root", s), t[12] = s, t[13] = $) : $ = t[13];
+  let S;
+  t[14] !== i || t[15] !== $ ? (S = /* @__PURE__ */ b.jsx("nav", { className: $, children: i }), t[14] = i, t[15] = $, t[16] = S) : S = t[16];
+  let y;
+  return t[17] !== x || t[18] !== S ? (y = /* @__PURE__ */ b.jsx(K, { value: x, children: S }), t[17] = x, t[18] = S, t[19] = y) : y = t[19], y;
+}, $o = {
+  Next: De,
+  Prev: we,
+  PageItem: it,
+  PageList: Re,
+  Root: Be
+};
+function ze(o, t, l) {
+  const r = k.c(9), [e, s] = p.useState(null);
+  let n, a;
+  if (r[0] !== o || r[1] !== t ? (n = () => {
+    const c = o || window, i = () => {
+      let m = {
+        id: null,
+        score: -1 / 0
+      };
+      const f = (o == null ? void 0 : o.getBoundingClientRect()) || {
+        top: 0,
+        left: 0,
+        width: window.innerWidth,
+        height: window.innerHeight
+      }, h = f.left + f.width / 2, g = f.top + f.height / 2;
+      t.forEach((_) => {
+        if (!_)
+          return;
+        const v = _, x = v.getBoundingClientRect(), $ = x.left + x.width / 2, S = x.top + x.height / 2, y = Math.abs(h - $), L = Math.abs(g - S), j = y / (f.width / 2), q = L / (f.height / 2), M = Math.max(x.left, f.left), H = Math.min(x.right, f.left + f.width), A = Math.max(x.top, f.top), R = Math.min(x.bottom, f.top + f.height), N = Math.max(0, H - M), D = Math.max(0, R - A), B = N * D, E = x.width * x.height, P = B / E, T = 1 - Math.min(1, (j + q) / 2), I = P * (1 + T);
+        I > m.score && P > 0.1 && (m = {
+          id: v.id,
+          score: I
+        });
+      }), m.score > 0 && s(m.id);
+    }, d = setTimeout(i, 100), u = setInterval(i, 500);
+    return c.addEventListener("scroll", i), window.addEventListener("resize", i), i(), () => {
+      c.removeEventListener("scroll", i), window.removeEventListener("resize", i), clearTimeout(d), clearInterval(u);
+    };
+  }, a = [o, t], r[0] = o, r[1] = t, r[2] = n, r[3] = a) : (n = r[2], a = r[3]), p.useEffect(n, a), l === "index" && e) {
+    let c;
+    if (r[4] !== e || r[5] !== t) {
+      let i;
+      r[7] !== e ? (i = (d) => (d == null ? void 0 : d.id) === e, r[7] = e, r[8] = i) : i = r[8], c = t.findIndex(i), r[4] = e, r[5] = t, r[6] = c;
+    } else
+      c = r[6];
+    return c;
+  }
+  return e;
+}
+const yo = {
+  useScrollSpy: ze
+}, ct = {
+  align: "center",
+  direction: "horizontal",
+  isFitted: !1,
+  onChange: () => {
+  },
+  bg: "transparent",
+  size: "small",
+  tabType: "line",
+  active: "0"
+}, et = p.createContext(ct), Me = (o) => {
+  const t = k.c(5);
+  let l;
+  t[0] !== o ? (l = {
+    ...ct,
+    ...o
+  }, t[0] = o, t[1] = l) : l = t[1];
+  const r = l;
+  let e;
+  return t[2] !== r || t[3] !== o.children ? (e = /* @__PURE__ */ b.jsx(et.Provider, { value: r, children: o.children }), t[2] = r, t[3] = o.children, t[4] = e) : e = t[4], e;
+}, Ae = "_Root_167r3_2", Ee = "_vertical_167r3_7", qe = "_List_167r3_10", He = "_horizontal_167r3_15", We = "_Item_167r3_28", Fe = "_fitted_167r3_31", Oe = "_ItemButton_167r3_35", Ge = "_small_167r3_38", Ue = "_medium_167r3_41", Xe = "_large_167r3_44", Ye = "_circle_167r3_47", Ve = "_square_167r3_52", Je = "_squareLine_167r3_57", Ke = "_rounded_167r3_63", Qe = "_start_167r3_69", Ze = "_center_167r3_72", to = "_end_167r3_75", eo = "_line_167r3_87", oo = "_textLine_167r3_87", ro = "_text_167r3_87", no = "_Panel_167r3_96", so = "_active_167r3_100", lo = {
+  Root: Ae,
+  vertical: Ee,
+  List: qe,
+  horizontal: He,
+  Item: We,
+  fitted: Fe,
+  ItemButton: Oe,
+  small: Ge,
+  medium: Ue,
+  large: Xe,
+  circle: Ye,
+  square: Ve,
+  squareLine: Je,
+  rounded: Ke,
+  start: Qe,
+  center: Ze,
+  end: to,
+  line: eo,
+  textLine: oo,
+  text: ro,
+  Panel: no,
+  active: so
+}, X = Y.bind(lo), io = (o) => {
+  const t = k.c(9), {
+    className: l,
+    children: r,
+    id: e,
+    index: s
+  } = o, {
+    active: n
+  } = p.useContext(et);
+  let a;
+  t[0] !== e || t[1] !== s ? (a = e ?? s.toString(), t[0] = e, t[1] = s, t[2] = a) : a = t[2];
+  const i = n === a;
+  let d;
+  t[3] !== l || t[4] !== i ? (d = X("Panel", l, {
+    active: i
+  }), t[3] = l, t[4] = i, t[5] = d) : d = t[5];
+  let u;
+  return t[6] !== r || t[7] !== d ? (u = /* @__PURE__ */ b.jsx("div", { className: d, children: r }), t[6] = r, t[7] = d, t[8] = u) : u = t[8], u;
+}, co = (o) => {
+  const t = k.c(5), {
+    className: l,
+    children: r
+  } = o;
+  let e;
+  t[0] !== l ? (e = X("Paenls", l), t[0] = l, t[1] = e) : e = t[1];
+  let s;
+  return t[2] !== r || t[3] !== e ? (s = /* @__PURE__ */ b.jsx("div", { className: e, children: r }), t[2] = r, t[3] = e, t[4] = s) : s = t[4], s;
+}, ao = (o) => {
+  const t = k.c(10), {
+    className: l
+  } = o, {
+    tabType: r,
+    direction: e,
+    align: s,
+    isFitted: n,
+    size: a
+  } = p.useContext(et);
+  let c;
+  t[0] !== s || t[1] !== l || t[2] !== e || t[3] !== n || t[4] !== a || t[5] !== r ? (c = X("List", e, s, r, l, a, {
+    fitted: n
+  }), t[0] = s, t[1] = l, t[2] = e, t[3] = n, t[4] = a, t[5] = r, t[6] = c) : c = t[6];
+  let i;
+  return t[7] !== o.children || t[8] !== c ? (i = /* @__PURE__ */ b.jsx("div", { className: c, children: o.children }), t[7] = o.children, t[8] = c, t[9] = i) : i = t[9], i;
+}, uo = (o) => {
+  const t = k.c(24), {
+    className: l,
+    children: r,
+    id: e,
+    index: s,
+    onClick: n,
+    isActive: a
+  } = o, {
+    onChange: c,
+    tabType: i,
+    size: d,
+    active: u,
+    isFitted: m
+  } = p.useContext(et);
+  let f;
+  t[0] !== e || t[1] !== s ? (f = e ?? s.toString(), t[0] = e, t[1] = s, t[2] = f) : f = t[2];
+  const g = u === f, _ = a ?? g;
+  let v;
+  t[3] !== l || t[4] !== m || t[5] !== d || t[6] !== _ || t[7] !== i ? (v = X("Item", d, i, l, {
+    active: _,
+    fitted: m
+  }), t[3] = l, t[4] = m, t[5] = d, t[6] = _, t[7] = i, t[8] = v) : v = t[8];
+  let x;
+  t[9] !== e || t[10] !== s || t[11] !== c || t[12] !== n ? (x = n ?? c.bind(null, e ?? s.toString()), t[9] = e, t[10] = s, t[11] = c, t[12] = n, t[13] = x) : x = t[13];
+  const $ = a ?? g;
+  let S;
+  t[14] !== $ || t[15] !== i ? (S = X("ItemButton", i, {
+    active: $
+  }), t[14] = $, t[15] = i, t[16] = S) : S = t[16];
+  let y;
+  t[17] !== r || t[18] !== S ? (y = /* @__PURE__ */ b.jsx("button", { className: S, children: r }), t[17] = r, t[18] = S, t[19] = y) : y = t[19];
+  let L;
+  return t[20] !== v || t[21] !== x || t[22] !== y ? (L = /* @__PURE__ */ b.jsx("div", { className: v, onClick: x, children: y }), t[20] = v, t[21] = x, t[22] = y, t[23] = L) : L = t[23], L;
+}, fo = (o) => {
+  const t = k.c(9), {
+    children: l,
+    className: r,
+    direction: e
+  } = o;
+  let s;
+  t[0] !== r || t[1] !== e ? (s = X("Root", e, r), t[0] = r, t[1] = e, t[2] = s) : s = t[2];
+  let n;
+  t[3] !== l || t[4] !== s ? (n = /* @__PURE__ */ b.jsx("div", { className: s, children: l }), t[3] = l, t[4] = s, t[5] = n) : n = t[5];
+  let a;
+  return t[6] !== o || t[7] !== n ? (a = /* @__PURE__ */ b.jsx(Me, { ...o, children: n }), t[6] = o, t[7] = n, t[8] = a) : a = t[8], a;
+}, ko = {
+  Root: fo,
+  List: ao,
+  Item: uo,
+  Panel: io,
+  Panels: co
+};
+export {
+  xo as Accordion,
+  vo as Breadcrumb,
+  po as LNB,
+  Co as List,
+  $o as Pagination,
+  yo as ScrollSpy,
+  ko as Tab,
+  ve as makeNavigation
+};