@nextlevel_korea/design-system 1.1.2 → 1.1.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import ee from "react";
-var S = { exports: {} }, R = {};
+import te, { useState as O, useRef as oe, useEffect as J } from "react";
+var W = { exports: {} }, E = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var S = { exports: {} }, R = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var F;
-function re() {
-  if (F) return R;
-  F = 1;
-  var s = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
-  function d(m, o, c) {
-    var E = null;
-    if (c !== void 0 && (E = "" + c), o.key !== void 0 && (E = "" + o.key), "key" in o) {
-      c = {};
-      for (var b in o)
-        b !== "key" && (c[b] = o[b]);
-    } else c = o;
-    return o = c.ref, {
-      $$typeof: s,
-      type: m,
-      key: E,
-      ref: o !== void 0 ? o : null,
-      props: c
+var X;
+function ae() {
+  if (X) return E;
+  X = 1;
+  var f = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
+  function v(p, c, d) {
+    var u = null;
+    if (d !== void 0 && (u = "" + d), c.key !== void 0 && (u = "" + c.key), "key" in c) {
+      d = {};
+      for (var b in c)
+        b !== "key" && (d[b] = c[b]);
+    } else d = c;
+    return c = d.ref, {
+      $$typeof: f,
+      type: p,
+      key: u,
+      ref: c !== void 0 ? c : null,
+      props: d
     };
   }
-  return R.Fragment = i, R.jsx = d, R.jsxs = d, R;
+  return E.Fragment = s, E.jsx = v, E.jsxs = v, E;
 }
-var _ = {};
+var R = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,125 +41,125 @@ var _ = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var D;
-function te() {
-  return D || (D = 1, process.env.NODE_ENV !== "production" && function() {
-    function s(e) {
+var L;
+function ne() {
+  return L || (L = 1, process.env.NODE_ENV !== "production" && function() {
+    function f(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
         case T:
           return "Fragment";
-        case z:
+        case P:
           return "Profiler";
-        case U:
+        case C:
           return "StrictMode";
-        case J:
+        case m:
           return "Suspense";
-        case X:
+        case N:
           return "SuspenseList";
-        case B:
+        case Q:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case W:
+          case t:
             return "Portal";
-          case q:
+          case _:
             return (e.displayName || "Context") + ".Provider";
-          case V:
+          case $:
             return (e._context.displayName || "Context") + ".Consumer";
-          case G:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case H:
-            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
-          case g:
-            r = e._payload, e = e._init;
+          case a:
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return o = e.displayName || null, o !== null ? o : f(e.type) || "Memo";
+          case I:
+            o = e._payload, e = e._init;
             try {
-              return s(e(r));
+              return f(e(o));
             } catch {
             }
         }
       return null;
     }
-    function i(e) {
+    function s(e) {
       return "" + e;
     }
-    function d(e) {
+    function v(e) {
       try {
-        i(e);
-        var r = !1;
+        s(e);
+        var o = !1;
       } catch {
-        r = !0;
+        o = !0;
       }
-      if (r) {
-        r = console;
-        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return t.call(
-          r,
+      if (o) {
+        o = console;
+        var n = o.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          o,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          n
-        ), i(e);
+          l
+        ), s(e);
       }
     }
-    function m(e) {
+    function p(e) {
       if (e === T) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === g)
+      if (typeof e == "object" && e !== null && e.$$typeof === I)
         return "<...>";
       try {
-        var r = s(e);
-        return r ? "<" + r + ">" : "<...>";
+        var o = f(e);
+        return o ? "<" + o + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function o() {
-      var e = p.A;
+    function c() {
+      var e = B.A;
       return e === null ? null : e.getOwner();
     }
-    function c() {
+    function d() {
       return Error("react-stack-top-frame");
     }
-    function E(e) {
-      if (N.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
+    function u(e) {
+      if (H.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function b(e, r) {
-      function t() {
-        y || (y = !0, console.error(
+    function b(e, o) {
+      function n() {
+        z || (z = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          r
+          o
         ));
       }
-      t.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: t,
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
         configurable: !0
       });
     }
-    function L() {
-      var e = s(this.type);
-      return C[e] || (C[e] = !0, console.error(
+    function j() {
+      var e = f(this.type);
+      return G[e] || (G[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function M(e, r, t, n, l, u, O, A) {
-      return t = u.ref, e = {
-        $$typeof: h,
+    function S(e, o, n, l, g, x, Y, M) {
+      return n = x.ref, e = {
+        $$typeof: A,
         type: e,
-        key: r,
-        props: u,
-        _owner: l
-      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
+        key: o,
+        props: x,
+        _owner: g
+      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: L
+        get: j
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -174,113 +174,428 @@ function te() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: O
+        value: Y
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: A
+        value: M
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function P(e, r, t, n, l, u, O, A) {
-      var a = r.children;
-      if (a !== void 0)
-        if (n)
-          if (Q(a)) {
-            for (n = 0; n < a.length; n++)
-              w(a[n]);
-            Object.freeze && Object.freeze(a);
+    function k(e, o, n, l, g, x, Y, M) {
+      var i = o.children;
+      if (i !== void 0)
+        if (l)
+          if (ee(i)) {
+            for (l = 0; l < i.length; l++)
+              w(i[l]);
+            Object.freeze && Object.freeze(i);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else w(a);
-      if (N.call(r, "key")) {
-        a = s(e);
-        var f = Object.keys(r).filter(function(K) {
-          return K !== "key";
+        else w(i);
+      if (H.call(o, "key")) {
+        i = f(e);
+        var y = Object.keys(o).filter(function(re) {
+          return re !== "key";
         });
-        n = 0 < f.length ? "{key: someKey, " + f.join(": ..., ") + ": ...}" : "{key: someKey}", $[a + n] || (f = 0 < f.length ? "{" + f.join(": ..., ") + ": ...}" : "{}", console.error(
+        l = 0 < y.length ? "{key: someKey, " + y.join(": ..., ") + ": ...}" : "{key: someKey}", q[i + l] || (y = 0 < y.length ? "{" + y.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          n,
-          a,
-          f,
-          a
-        ), $[a + n] = !0);
+          l,
+          i,
+          y,
+          i
+        ), q[i + l] = !0);
       }
-      if (a = null, t !== void 0 && (d(t), a = "" + t), E(r) && (d(r.key), a = "" + r.key), "key" in r) {
-        t = {};
-        for (var j in r)
-          j !== "key" && (t[j] = r[j]);
-      } else t = r;
-      return a && b(
-        t,
+      if (i = null, n !== void 0 && (v(n), i = "" + n), u(o) && (v(o.key), i = "" + o.key), "key" in o) {
+        n = {};
+        for (var F in o)
+          F !== "key" && (n[F] = o[F]);
+      } else n = o;
+      return i && b(
+        n,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), M(
+      ), S(
         e,
-        a,
-        u,
-        l,
-        o(),
-        t,
-        O,
-        A
+        i,
+        x,
+        g,
+        c(),
+        n,
+        Y,
+        M
       );
     }
     function w(e) {
-      typeof e == "object" && e !== null && e.$$typeof === h && e._store && (e._store.validated = 1);
+      typeof e == "object" && e !== null && e.$$typeof === A && e._store && (e._store.validated = 1);
     }
-    var v = ee, h = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), q = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), J = Symbol.for("react.suspense"), X = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), B = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), p = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, Q = Array.isArray, k = console.createTask ? console.createTask : function() {
+    var h = te, A = Symbol.for("react.transitional.element"), t = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), $ = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), a = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), N = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), I = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), B = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, H = Object.prototype.hasOwnProperty, ee = Array.isArray, D = console.createTask ? console.createTask : function() {
       return null;
     };
-    v = {
+    h = {
       "react-stack-bottom-frame": function(e) {
         return e();
       }
     };
-    var y, C = {}, Y = v["react-stack-bottom-frame"].bind(
-      v,
-      c
-    )(), I = k(m(c)), $ = {};
-    _.Fragment = T, _.jsx = function(e, r, t, n, l) {
-      var u = 1e4 > p.recentlyCreatedOwnerStacks++;
-      return P(
+    var z, G = {}, U = h["react-stack-bottom-frame"].bind(
+      h,
+      d
+    )(), V = D(p(d)), q = {};
+    R.Fragment = T, R.jsx = function(e, o, n, l, g) {
+      var x = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return k(
         e,
-        r,
-        t,
-        !1,
+        o,
         n,
+        !1,
         l,
-        u ? Error("react-stack-top-frame") : Y,
-        u ? k(m(e)) : I
+        g,
+        x ? Error("react-stack-top-frame") : U,
+        x ? D(p(e)) : V
       );
-    }, _.jsxs = function(e, r, t, n, l) {
-      var u = 1e4 > p.recentlyCreatedOwnerStacks++;
-      return P(
+    }, R.jsxs = function(e, o, n, l, g) {
+      var x = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return k(
         e,
-        r,
-        t,
-        !0,
+        o,
         n,
+        !0,
         l,
-        u ? Error("react-stack-top-frame") : Y,
-        u ? k(m(e)) : I
+        g,
+        x ? Error("react-stack-top-frame") : U,
+        x ? D(p(e)) : V
       );
     };
-  }()), _;
+  }()), R;
 }
-process.env.NODE_ENV === "production" ? S.exports = re() : S.exports = te();
-var x = S.exports;
-const ae = ({ logo: s, title: i }) => /* @__PURE__ */ x.jsxs("header", { className: "flex items-center justify-between", children: [
-  s && /* @__PURE__ */ x.jsx("img", { src: s, alt: "Logo", className: "h-8" }),
-  i && /* @__PURE__ */ x.jsx("h1", { className: "text-xl text-success font-bold", children: i }),
-  "배포테스트"
-] });
+process.env.NODE_ENV === "production" ? W.exports = ae() : W.exports = ne();
+var r = W.exports;
+const le = ({
+  logo: f,
+  navList: s,
+  colors: v,
+  sidebarPosition: p = "left"
+}) => {
+  const [c, d] = O(null), [u, b] = O(!1), [j, S] = O(
+    null
+  ), [k, w] = O(!1), h = oe(null), t = { ...{
+    headerBg: "bg-white",
+    sidebarBg: "bg-white",
+    sidebarGradientFrom: "from-white",
+    sidebarGradientTo: "to-gray-50",
+    dropdownBg: "bg-white",
+    submenuBg: "bg-gray-50/50",
+    titleText: "bg-gradient-to-r from-primary to-primary-dark bg-clip-text text-transparent",
+    navText: "text-gray-600",
+    navTextHover: "hover:text-primary",
+    sidebarTitleText: "bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent",
+    sidebarNavText: "text-gray-700",
+    sidebarNavTextHover: "hover:text-primary",
+    submenuText: "text-gray-600",
+    submenuTextHover: "hover:text-primary",
+    primary: "bg-primary",
+    primaryDark: "bg-primary-dark",
+    accent: "bg-primary",
+    border: "border-gray-100",
+    dropdownBorder: "border-gray-200",
+    shadow: "shadow-sm",
+    sidebarShadow: "shadow-2xl",
+    overlayBg: "bg-black",
+    overlayOpacity: "bg-opacity-50"
+  }, ...v || {} }, T = (a) => {
+    d(c === a ? null : a);
+  }, C = (a) => {
+    S(j === a ? null : a);
+  }, P = () => {
+    w(!0), b(!u);
+  }, $ = () => {
+    w(!0), b(!1);
+  }, _ = () => {
+    w(!1), b(!1);
+  };
+  return J(() => {
+    const a = (m) => {
+      h.current && !h.current.contains(m.target) && d(null);
+    };
+    return document.addEventListener("mousedown", a), () => {
+      document.removeEventListener("mousedown", a);
+    };
+  }, []), J(() => (u ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
+    document.body.style.overflow = "unset";
+  }), [u]), /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      "header",
+      {
+        className: `w-full ${t.headerBg} ${t.shadow} border-b ${t.border} sticky top-0 z-99`,
+        children: /* @__PURE__ */ r.jsxs("div", { className: "w-full max-w-[1240px] px-5 mx-auto flex items-center justify-between h-14 md:h-16", children: [
+          /* @__PURE__ */ r.jsx("div", { className: "flex items-center space-x-4", children: f && /* @__PURE__ */ r.jsx("a", { href: "/", children: /* @__PURE__ */ r.jsx(
+            "img",
+            {
+              src: f,
+              alt: "Logo",
+              className: "h-7 w-auto object-contain md:h-8 cursor-pointer"
+            }
+          ) }) }),
+          /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-6", ref: h, children: [
+            /* @__PURE__ */ r.jsx("nav", { className: "hidden md:flex items-center space-x-6", children: s == null ? void 0 : s.map((a) => {
+              var m;
+              return /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ r.jsx(
+                  "button",
+                  {
+                    onClick: () => a.sub ? T(a.idx) : void 0,
+                    className: `${t.navText} ${t.navTextHover} transition-colors duration-200 font-medium flex items-center`,
+                    children: a.sub ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                      a.name,
+                      /* @__PURE__ */ r.jsx(
+                        "svg",
+                        {
+                          className: "w-4 h-4 ml-1",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ r.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M19 9l-7 7-7-7"
+                            }
+                          )
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ r.jsx("a", { href: a.path, children: a.name })
+                  }
+                ),
+                /* @__PURE__ */ r.jsxs(
+                  "div",
+                  {
+                    className: `absolute top-[44px] min-w-[100px] w-auto ${t.dropdownBg} border ${t.dropdownBorder} rounded-lg shadow-lg z-50 transition-all duration-300 ease-in-out transform ${a.idx === (s == null ? void 0 : s.length) ? "right-0" : "left-1/2 transform -translate-x-1/2"} ${c === a.idx ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 -translate-y-2 pointer-events-none"}`,
+                    children: [
+                      /* @__PURE__ */ r.jsx(
+                        "div",
+                        {
+                          className: `absolute -top-2 w-4 h-4 ${t.dropdownBg} border-l border-t ${t.dropdownBorder} transform rotate-45 ${a.idx === (s == null ? void 0 : s.length) ? "right-4" : "left-1/2 -translate-x-1/2"}`
+                        }
+                      ),
+                      /* @__PURE__ */ r.jsx("div", { className: "py-2", children: (m = a.sub) == null ? void 0 : m.map((N) => /* @__PURE__ */ r.jsx(
+                        "a",
+                        {
+                          href: N.path,
+                          className: `block px-4 py-2 text-sm whitespace-nowrap ${t.submenuText} hover:bg-gray-100 ${t.submenuTextHover} transition-colors duration-200`,
+                          onClick: () => d(null),
+                          children: N.name
+                        },
+                        N.idx
+                      )) })
+                    ]
+                  }
+                )
+              ] }, a.idx);
+            }) }),
+            /* @__PURE__ */ r.jsx(
+              "button",
+              {
+                className: `md:hidden p-2 rounded-lg ${t.navText} hover:bg-gray-100 transition-colors duration-200`,
+                onClick: P,
+                children: /* @__PURE__ */ r.jsx(
+                  "svg",
+                  {
+                    className: "w-6 h-6",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ r.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M4 6h16M4 12h16M4 18h16"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        className: `fixed inset-0 ${t.overlayBg} z-50 md:hidden ${u ? `${t.overlayOpacity} backdrop-blur-sm` : "bg-opacity-0 backdrop-blur-none pointer-events-none"} ${k ? "transition-all duration-300 ease-in-out" : ""}`,
+        onClick: $
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        className: `fixed top-0 ${p === "left" ? "left-0" : "right-0"} h-full w-4/5 xsm:w-80 ${t.sidebarBg} ${t.sidebarShadow} transform z-50 md:hidden ${u ? "translate-x-0" : p === "left" ? "-translate-x-full" : "translate-x-full"} ${k ? "transition-all duration-300 ease-in-out" : ""}`,
+        children: /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            className: `flex flex-col h-full bg-gradient-to-b ${t.sidebarGradientFrom} ${t.sidebarGradientTo}`,
+            children: [
+              /* @__PURE__ */ r.jsxs(
+                "div",
+                {
+                  className: `flex items-center justify-between p-4 border-b ${t.border} ${t.sidebarBg}/80 backdrop-blur-sm`,
+                  children: [
+                    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
+                      /* @__PURE__ */ r.jsx(
+                        "div",
+                        {
+                          className: `w-2 h-8 bg-gradient-to-b ${t.primary} ${t.primaryDark} rounded-full`
+                        }
+                      ),
+                      /* @__PURE__ */ r.jsx(
+                        "h2",
+                        {
+                          className: `text-xl font-bold ${t.sidebarTitleText}`,
+                          children: "Menu"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ r.jsx(
+                      "button",
+                      {
+                        onClick: $,
+                        className: "p-2 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-200",
+                        children: /* @__PURE__ */ r.jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "none",
+                            stroke: "currentColor",
+                            viewBox: "0 0 24 24",
+                            children: /* @__PURE__ */ r.jsx(
+                              "path",
+                              {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 2,
+                                d: "M6 18L18 6M6 6l12 12"
+                              }
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r.jsx("nav", { className: "flex-1 overflow-y-auto ", children: /* @__PURE__ */ r.jsx("ul", { className: "", children: s == null ? void 0 : s.map((a) => /* @__PURE__ */ r.jsx("li", { children: a.sub ? /* @__PURE__ */ r.jsxs(
+                "div",
+                {
+                  className: `${t.dropdownBg}  ${t.shadow} border-b ${t.border} overflow-hidden`,
+                  children: [
+                    /* @__PURE__ */ r.jsxs(
+                      "button",
+                      {
+                        onClick: () => C(a.idx),
+                        className: `w-full flex items-center justify-between p-4 text-left ${t.sidebarNavText} hover:bg-gray-50 transition-all duration-200 group`,
+                        children: [
+                          /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
+                            /* @__PURE__ */ r.jsx(
+                              "div",
+                              {
+                                className: `w-1.5 h-1.5 ${t.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200`
+                              }
+                            ),
+                            /* @__PURE__ */ r.jsx(
+                              "span",
+                              {
+                                className: `font-semibold text-gray-800 ${t.sidebarNavTextHover} transition-colors duration-200`,
+                                children: a.name
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ r.jsx(
+                            "svg",
+                            {
+                              className: `shrink-0 w-4 h-4 text-gray-400 transition-all duration-200 ${j === a.idx ? "rotate-180 text-primary" : "group-hover:text-gray-600"}`,
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ r.jsx(
+                                "path",
+                                {
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  strokeWidth: 2,
+                                  d: "M19 9l-7 7-7-7"
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ r.jsx(
+                      "div",
+                      {
+                        className: `overflow-hidden transition-all duration-300 ease-in-out ${j === a.idx ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}`,
+                        children: /* @__PURE__ */ r.jsx(
+                          "div",
+                          {
+                            className: `${t.submenuBg} border-t ${t.border}`,
+                            children: /* @__PURE__ */ r.jsx("ul", { className: "py-2", children: a.sub.map((m) => /* @__PURE__ */ r.jsx("li", { children: /* @__PURE__ */ r.jsxs(
+                              "a",
+                              {
+                                href: m.path,
+                                className: `px-6 py-3 text-sm ${t.submenuText} hover:bg-white ${t.submenuTextHover} transition-all duration-200 flex items-center space-x-2 group`,
+                                onClick: _,
+                                children: [
+                                  /* @__PURE__ */ r.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full group-hover:bg-primary transition-colors duration-200" }),
+                                  /* @__PURE__ */ r.jsx("span", { children: m.name })
+                                ]
+                              }
+                            ) }, m.idx)) })
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ r.jsx(
+                "a",
+                {
+                  href: a.path,
+                  className: `block p-4 ${t.sidebarNavText} hover:bg-white ${t.sidebarNavTextHover} transition-all duration-200 font-semibold ${t.dropdownBg} ${t.shadow} border-b ${t.border} group`,
+                  onClick: _,
+                  children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
+                    /* @__PURE__ */ r.jsx(
+                      "div",
+                      {
+                        className: `w-1.5 h-1.5 ${t.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200`
+                      }
+                    ),
+                    /* @__PURE__ */ r.jsx(
+                      "span",
+                      {
+                        className: `text-gray-800 ${t.sidebarNavTextHover} transition-colors duration-200`,
+                        children: a.name
+                      }
+                    )
+                  ] })
+                }
+              ) }, a.idx)) }) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
 export {
-  ae as Header
+  le as Header
 };