@iniguezmarc/design-system 0.0.12 → 0.0.14

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import se, { forwardRef as ne, useState as z, useEffect as Q } from "react";
+import oe, { forwardRef as le, useState as M, useEffect as K } from "react";
 var W = { exports: {} }, A = {};
 /**
  * @license React
@@ -10,11 +10,11 @@ var W = { exports: {} }, A = {};
  * LICENSE file in the root directory of this source tree.
  */
 var X;
-function oe() {
+function ie() {
   if (X) return A;
   X = 1;
-  var o = Symbol.for("react.transitional.element"), x = Symbol.for("react.fragment");
-  function d(s, t, a) {
+  var n = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
+  function x(s, t, a) {
     var f = null;
     if (a !== void 0 && (f = "" + a), t.key !== void 0 && (f = "" + t.key), "key" in t) {
       a = {};
@@ -22,14 +22,14 @@ function oe() {
         i !== "key" && (a[i] = t[i]);
     } else a = t;
     return t = a.ref, {
-      $$typeof: o,
+      $$typeof: n,
       type: s,
       key: f,
       ref: t !== void 0 ? t : null,
       props: a
     };
   }
-  return A.Fragment = x, A.jsx = d, A.jsxs = d, A;
+  return A.Fragment = d, A.jsx = x, A.jsxs = x, A;
 }
 var O = {};
 /**
@@ -42,12 +42,12 @@ var O = {};
  * LICENSE file in the root directory of this source tree.
  */
 var J;
-function le() {
+function ce() {
   return J || (J = 1, process.env.NODE_ENV !== "production" && function() {
-    function o(r) {
+    function n(r) {
       if (r == null) return null;
       if (typeof r == "function")
-        return r.$$typeof === re ? null : r.displayName || r.name || null;
+        return r.$$typeof === ae ? null : r.displayName || r.name || null;
       if (typeof r == "string") return r;
       switch (r) {
         case w:
@@ -60,14 +60,14 @@ function le() {
           return "Suspense";
         case P:
           return "SuspenseList";
-        case ee:
+        case te:
           return "Activity";
       }
       if (typeof r == "object")
         switch (typeof r.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), r.$$typeof) {
-          case j:
+          case v:
             return "Portal";
           case _:
             return r.displayName || "Context";
@@ -76,50 +76,50 @@ function le() {
           case T:
             var c = r.render;
             return r = r.displayName, r || (r = c.displayName || c.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
-          case C:
-            return c = r.displayName || null, c !== null ? c : o(r.type) || "Memo";
-          case D:
+          case S:
+            return c = r.displayName || null, c !== null ? c : n(r.type) || "Memo";
+          case L:
             c = r._payload, r = r._init;
             try {
-              return o(r(c));
+              return n(r(c));
             } catch {
             }
         }
       return null;
     }
-    function x(r) {
+    function d(r) {
       return "" + r;
     }
-    function d(r) {
+    function x(r) {
       try {
-        x(r);
+        d(r);
         var c = !1;
       } catch {
         c = !0;
       }
       if (c) {
         c = console;
-        var h = c.error, p = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
-        return h.call(
+        var p = c.error, $ = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return p.call(
           c,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          p
-        ), x(r);
+          $
+        ), d(r);
       }
     }
     function s(r) {
       if (r === w) return "<>";
-      if (typeof r == "object" && r !== null && r.$$typeof === D)
+      if (typeof r == "object" && r !== null && r.$$typeof === L)
         return "<...>";
       try {
-        var c = o(r);
+        var c = n(r);
         return c ? "<" + c + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function t() {
-      var r = L.A;
+      var r = B.A;
       return r === null ? null : r.getOwner();
     }
     function a() {
@@ -133,32 +133,32 @@ function le() {
       return r.key !== void 0;
     }
     function i(r, c) {
-      function h() {
+      function p() {
         V || (V = !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)",
           c
         ));
       }
-      h.isReactWarning = !0, Object.defineProperty(r, "key", {
-        get: h,
+      p.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: p,
         configurable: !0
       });
     }
     function u() {
-      var r = o(this.type);
+      var r = n(this.type);
       return H[r] || (H[r] = !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."
       )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function m(r, c, h, p, S, Y) {
-      var v = h.ref;
+    function g(r, c, p, $, C, Y) {
+      var j = p.ref;
       return r = {
-        $$typeof: $,
+        $$typeof: h,
         type: r,
         key: c,
-        props: h,
-        _owner: p
-      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(r, "ref", {
+        props: p,
+        _owner: $
+      }, (j !== void 0 ? j : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
         get: u
       }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
@@ -175,7 +175,7 @@ function le() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: S
+        value: C
       }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
@@ -183,141 +183,141 @@ function le() {
         value: Y
       }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function l(r, c, h, p, S, Y) {
-      var v = c.children;
-      if (v !== void 0)
-        if (p)
-          if (te(v)) {
-            for (p = 0; p < v.length; p++)
-              n(v[p]);
-            Object.freeze && Object.freeze(v);
+    function b(r, c, p, $, C, Y) {
+      var j = c.children;
+      if (j !== void 0)
+        if ($)
+          if (se(j)) {
+            for ($ = 0; $ < j.length; $++)
+              o(j[$]);
+            Object.freeze && Object.freeze(j);
           } 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 n(v);
+        else o(j);
       if (F.call(c, "key")) {
-        v = o(r);
-        var N = Object.keys(c).filter(function(ae) {
-          return ae !== "key";
+        j = n(r);
+        var N = Object.keys(c).filter(function(ne) {
+          return ne !== "key";
         });
-        p = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", q[v + p] || (N = 0 < N.length ? "{" + N.join(": ..., ") + ": ...}" : "{}", console.error(
+        $ = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", q[j + $] || (N = 0 < N.length ? "{" + N.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} />`,
-          p,
-          v,
+          $,
+          j,
           N,
-          v
-        ), q[v + p] = !0);
+          j
+        ), q[j + $] = !0);
       }
-      if (v = null, h !== void 0 && (d(h), v = "" + h), f(c) && (d(c.key), v = "" + c.key), "key" in c) {
-        h = {};
-        for (var I in c)
-          I !== "key" && (h[I] = c[I]);
-      } else h = c;
-      return v && i(
-        h,
+      if (j = null, p !== void 0 && (x(p), j = "" + p), f(c) && (x(c.key), j = "" + c.key), "key" in c) {
+        p = {};
+        for (var z in c)
+          z !== "key" && (p[z] = c[z]);
+      } else p = c;
+      return j && i(
+        p,
         typeof r == "function" ? r.displayName || r.name || "Unknown" : r
-      ), m(
+      ), g(
         r,
-        v,
-        h,
+        j,
+        p,
         t(),
-        S,
+        C,
         Y
       );
     }
-    function n(r) {
-      g(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === D && (r._payload.status === "fulfilled" ? g(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
+    function o(r) {
+      m(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === L && (r._payload.status === "fulfilled" ? m(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
     }
-    function g(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === $;
+    function m(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === h;
     }
-    var b = se, $ = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), E = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), T = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), C = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), L = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, te = Array.isArray, B = console.createTask ? console.createTask : function() {
+    var l = oe, h = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), E = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), T = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), L = Symbol.for("react.lazy"), te = Symbol.for("react.activity"), ae = Symbol.for("react.client.reference"), B = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, se = Array.isArray, I = console.createTask ? console.createTask : function() {
       return null;
     };
-    b = {
+    l = {
       react_stack_bottom_frame: function(r) {
         return r();
       }
     };
-    var V, H = {}, G = b.react_stack_bottom_frame.bind(
-      b,
+    var V, H = {}, G = l.react_stack_bottom_frame.bind(
+      l,
       a
-    )(), U = B(s(a)), q = {};
-    O.Fragment = w, O.jsx = function(r, c, h) {
-      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return l(
+    )(), U = I(s(a)), q = {};
+    O.Fragment = w, O.jsx = function(r, c, p) {
+      var $ = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return b(
         r,
         c,
-        h,
+        p,
         !1,
-        p ? Error("react-stack-top-frame") : G,
-        p ? B(s(r)) : U
+        $ ? Error("react-stack-top-frame") : G,
+        $ ? I(s(r)) : U
       );
-    }, O.jsxs = function(r, c, h) {
-      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return l(
+    }, O.jsxs = function(r, c, p) {
+      var $ = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return b(
         r,
         c,
-        h,
+        p,
         !0,
-        p ? Error("react-stack-top-frame") : G,
-        p ? B(s(r)) : U
+        $ ? Error("react-stack-top-frame") : G,
+        $ ? I(s(r)) : U
       );
     };
   }()), O;
 }
-process.env.NODE_ENV === "production" ? W.exports = oe() : W.exports = le();
+process.env.NODE_ENV === "production" ? W.exports = ie() : W.exports = ce();
 var e = W.exports;
-const ie = ({
-  src: o,
-  alt: x = "Avatar",
-  size: d = "md",
+const de = ({
+  src: n,
+  alt: d = "Avatar",
+  size: x = "md",
   imageFit: s = "cover",
   customStyles: t = {},
   className: a = "",
   borderColor: f = "border-gray-200",
   darkBorderColor: i = "dark:border-gray-700",
   backgroundColor: u = "bg-gray-100",
-  darkBackgroundColor: m = "dark:bg-gray-800",
-  loading: l = "lazy"
+  darkBackgroundColor: g = "dark:bg-gray-800",
+  loading: b = "lazy"
 }) => {
-  const n = {
+  const o = {
     sm: "h-8 w-8",
     md: "h-12 w-12",
     lg: "h-16 w-16",
     xl: "h-32 w-32"
-  }, g = s === "contain" ? "object-contain" : "object-cover", b = `border ${f} ${i}`, $ = `${u} ${m}`;
+  }, m = s === "contain" ? "object-contain" : "object-cover", l = `border ${f} ${i}`, h = `${u} ${g}`;
   return /* @__PURE__ */ e.jsx("div", { className: `
             ds-avatar relative rounded-full overflow-hidden flex-shrink-0
-            ${n[d]}
-            ${$}
-            ${b}
+            ${o[x]}
+            ${h}
+            ${l}
             ${t.container || ""}
             ${a}
         `, children: /* @__PURE__ */ e.jsx(
     "img",
     {
-      src: o,
-      alt: x,
-      loading: l,
+      src: n,
+      alt: d,
+      loading: b,
       decoding: "async",
       className: `
                     w-full h-full 
-                    ${g}
+                    ${m}
                     ${t.image || ""}
                 `
     }
   ) });
-}, K = ({
-  label: o,
-  variant: x = "primary",
-  customStyles: d = {},
+}, ee = ({
+  label: n,
+  variant: d = "primary",
+  customStyles: x = {},
   className: s = "",
   endIcon: t,
   // Default Colors
@@ -325,31 +325,31 @@ const ie = ({
   darkPrimaryColor: f = "dark:bg-blue-900/50 dark:text-blue-200",
   secondaryColor: i = "bg-gray-100 text-gray-800",
   darkSecondaryColor: u = "dark:bg-gray-700 dark:text-gray-300",
-  outlineColor: m = "border border-gray-300 text-gray-600 bg-transparent",
-  darkOutlineColor: l = "dark:border-gray-600 dark:text-gray-400",
-  successColor: n = "bg-green-100 text-green-800",
-  darkSuccessColor: g = "dark:bg-green-900/50 dark:text-green-200"
+  outlineColor: g = "border border-gray-300 text-gray-600 bg-transparent",
+  darkOutlineColor: b = "dark:border-gray-600 dark:text-gray-400",
+  successColor: o = "bg-green-100 text-green-800",
+  darkSuccessColor: m = "dark:bg-green-900/50 dark:text-green-200"
 }) => {
-  const b = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1", $ = {
+  const l = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1", h = {
     primary: `${a} ${f}`,
     secondary: `${i} ${u}`,
-    outline: `${m} ${l}`,
-    success: `${n} ${g}`
+    outline: `${g} ${b}`,
+    success: `${o} ${m}`
   };
   return /* @__PURE__ */ e.jsxs("span", { className: `
             ds-badge
-            ${b} 
-            ${$[x]}
-            ${d.container || ""}
+            ${l} 
+            ${h[d]}
+            ${x.container || ""}
             ${s}
         `, children: [
-    /* @__PURE__ */ e.jsx("span", { className: d.label || "", children: o }),
+    /* @__PURE__ */ e.jsx("span", { className: x.label || "", children: n }),
     t && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: t })
   ] });
-}, M = ({
-  label: o,
-  variant: x = "primary",
-  size: d = "medium",
+}, D = ({
+  label: n,
+  variant: d = "primary",
+  size: x = "medium",
   onClick: s,
   className: t = "",
   customStyles: a = {},
@@ -357,27 +357,27 @@ const ie = ({
   target: i,
   // Default Colors
   primaryColor: u = "bg-blue-600",
-  primaryHoverColor: m = "hover:bg-blue-700",
-  darkPrimaryColor: l = "dark:bg-blue-600",
-  darkPrimaryHoverColor: n = "dark:hover:bg-blue-500",
-  secondaryColor: g = "bg-gray-100",
-  secondaryHoverColor: b = "hover:bg-gray-200",
-  darkSecondaryColor: $ = "dark:bg-gray-800",
-  darkSecondaryHoverColor: j = "dark:hover:bg-gray-700",
+  primaryHoverColor: g = "hover:bg-blue-700",
+  darkPrimaryColor: b = "dark:bg-blue-600",
+  darkPrimaryHoverColor: o = "dark:hover:bg-blue-500",
+  secondaryColor: m = "bg-gray-100",
+  secondaryHoverColor: l = "hover:bg-gray-200",
+  darkSecondaryColor: h = "dark:bg-gray-800",
+  darkSecondaryHoverColor: v = "dark:hover:bg-gray-700",
   outlineColor: w = "text-blue-600 border-blue-600",
   outlineHoverColor: y = "hover:bg-blue-50",
   darkOutlineColor: k = "dark:text-blue-400 dark:border-blue-400",
   darkOutlineHoverColor: E = "dark:hover:bg-blue-950"
 }) => {
   const _ = "relative group inline-flex justify-center items-center font-bold rounded-lg cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 no-underline", T = {
-    primary: `${u} text-white ${m} focus:ring-blue-500 border-2 border-transparent ${l} ${n}`,
-    secondary: `${g} text-gray-800 ${b} focus:ring-gray-500 border-2 border-transparent ${$} dark:text-gray-100 ${j}`,
+    primary: `${u} text-white ${g} focus:ring-blue-500 border-2 border-transparent ${b} ${o}`,
+    secondary: `${m} text-gray-800 ${l} focus:ring-gray-500 border-2 border-transparent ${h} dark:text-gray-100 ${v}`,
     outline: `bg-transparent ${w} border-2 ${y} focus:ring-blue-500 ${k} ${E}`
   }, R = {
     small: "px-3 py-1.5 text-sm",
     medium: "px-5 py-2.5 text-base",
     large: "px-8 py-3.5 text-lg"
-  }, P = `${_} ${T[x]} ${R[d]} ${a.container || ""} ${t}`, C = /* @__PURE__ */ e.jsx("span", { className: `relative z-10 flex items-center justify-center gap-2 ${a.label || ""}`, children: o });
+  }, P = `${_} ${T[d]} ${R[x]} ${a.container || ""} ${t}`, S = /* @__PURE__ */ e.jsx("span", { className: `relative z-10 flex items-center justify-center gap-2 ${a.label || ""}`, children: n });
   return f ? /* @__PURE__ */ e.jsx(
     "a",
     {
@@ -386,7 +386,7 @@ const ie = ({
       target: i,
       rel: i === "_blank" ? "noopener noreferrer" : void 0,
       onClick: s,
-      children: C
+      children: S
     }
   ) : /* @__PURE__ */ e.jsx(
     "button",
@@ -394,13 +394,13 @@ const ie = ({
       type: "button",
       className: P,
       onClick: s,
-      children: C
+      children: S
     }
   );
-}, ce = ne(({
-  label: o,
-  error: x,
-  className: d,
+}, xe = le(({
+  label: n,
+  error: d,
+  className: x,
   customStyles: s = {},
   startIcon: t,
   endIcon: a,
@@ -408,13 +408,13 @@ const ie = ({
   labelColor: f = "text-gray-700",
   darkLabelColor: i = "dark:text-gray-200",
   inputBgColor: u = "bg-white",
-  darkInputBgColor: m = "dark:bg-gray-800",
-  inputBorderColor: l = "border-gray-300",
-  darkInputBorderColor: n = "dark:border-gray-600",
-  inputTextColor: g = "text-gray-900",
-  darkInputTextColor: b = "dark:text-white",
-  focusRingColor: $ = "focus:ring-blue-500",
-  errorBorderColor: j = "border-red-500",
+  darkInputBgColor: g = "dark:bg-gray-800",
+  inputBorderColor: b = "border-gray-300",
+  darkInputBorderColor: o = "dark:border-gray-600",
+  inputTextColor: m = "text-gray-900",
+  darkInputTextColor: l = "dark:text-white",
+  focusRingColor: h = "focus:ring-blue-500",
+  errorBorderColor: v = "border-red-500",
   darkErrorBorderColor: w = "dark:border-red-500",
   errorTextColor: y = "text-red-500",
   darkErrorTextColor: k = "dark:text-red-400",
@@ -424,12 +424,12 @@ const ie = ({
         w-full py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-all
         ${t ? "pl-10" : "px-3"} 
         ${a ? "pr-10" : "px-3"}
-        ${u} ${m}
-        ${g} ${b}
-        ${$}
-    `, R = x ? `${j} focus:ring-red-500 ${w}` : `${l} ${n}`;
-  return /* @__PURE__ */ e.jsxs("div", { className: `w-full ${s.container || ""} ${d}`, children: [
-    o && /* @__PURE__ */ e.jsx("label", { className: `block text-sm font-medium ${f} ${i} mb-1 ${s.label || ""}`, children: o }),
+        ${u} ${g}
+        ${m} ${l}
+        ${h}
+    `, R = d ? `${v} focus:ring-red-500 ${w}` : `${b} ${o}`;
+  return /* @__PURE__ */ e.jsxs("div", { className: `w-full ${s.container || ""} ${x}`, children: [
+    n && /* @__PURE__ */ e.jsx("label", { className: `block text-sm font-medium ${f} ${i} mb-1 ${s.label || ""}`, children: n }),
     /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
       t && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${s.iconContainer || ""}`, children: t }),
       /* @__PURE__ */ e.jsx(
@@ -446,93 +446,125 @@ const ie = ({
       ),
       a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${s.iconContainer || ""}`, children: a })
     ] }),
-    x && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${y} ${k} ${s.error || ""}`, children: x })
+    d && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${y} ${k} ${s.error || ""}`, children: d })
   ] });
 });
-ce.displayName = "BasicInput";
-const de = ({
-  isToggled: o,
-  onToggle: x,
-  iconOn: d,
+xe.displayName = "BasicInput";
+const re = ({
+  isToggled: n,
+  onToggle: d,
+  iconOn: x,
   iconOff: s,
   imageOn: t,
   imageOff: a,
   imageFit: f = "contain",
   customStyles: i = {},
   className: u = "",
-  title: m
+  title: g
 }) => {
-  const l = `w-6 h-6 ${i.icon || ""}`, n = () => {
-    const g = f === "contain" ? "object-contain" : "object-cover";
-    return o ? t ? /* @__PURE__ */ e.jsx("img", { src: t, alt: "Toggled On", className: `${l} ${g}` }) : d : a ? /* @__PURE__ */ e.jsx("img", { src: a, alt: "Toggled Off", className: `${l} ${g}` }) : s;
+  const b = `w-6 h-6 ${i.icon || ""}`, o = () => {
+    const m = f === "contain" ? "object-contain" : "object-cover";
+    return n ? t ? /* @__PURE__ */ e.jsx("img", { src: t, alt: "Toggled On", className: `${b} ${m}` }) : x : a ? /* @__PURE__ */ e.jsx("img", { src: a, alt: "Toggled Off", className: `${b} ${m}` }) : s;
   };
   return /* @__PURE__ */ e.jsx(
     "button",
     {
-      onClick: x,
-      title: m,
+      onClick: d,
+      title: g,
       className: `
                 p-2 rounded-full transition-all duration-300 ease-in-out 
                 focus:outline-none focus:ring-2 focus:ring-blue-500 hover:rotate-12 hover:scale-110 overflow-hidden
-                ${o ? "bg-gray-800 text-white hover:bg-gray-700" : "bg-gray-200 text-gray-800 hover:bg-gray-300"}
+                ${n ? "bg-gray-800 text-white hover:bg-gray-700" : "bg-gray-200 text-gray-800 hover:bg-gray-300"}
                 ${i.container || ""}
                 ${u}
             `,
-      children: n()
+      children: o()
     }
   );
 }, Z = ({
-  isDark: o,
-  onToggle: x,
-  iconSun: d,
+  isDark: n,
+  onToggle: d,
+  iconSun: x,
   iconMoon: s,
   sunImage: t,
   moonImage: a,
   customStyles: f = {},
   ...i
 }) => {
-  const [u, m] = z(!1);
-  Q(() => {
-    const j = () => {
+  const [u, g] = M(!1);
+  K(() => {
+    const v = () => {
       const y = document.documentElement.classList.contains("dark");
-      m(y);
+      g(y);
     };
-    j();
-    const w = new MutationObserver(j);
+    v();
+    const w = new MutationObserver(v);
     return w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => w.disconnect();
   }, []);
-  const l = () => {
-    const j = document.documentElement;
-    j.classList.contains("dark") ? (j.classList.remove("dark"), localStorage.setItem("theme", "light")) : (j.classList.add("dark"), localStorage.setItem("theme", "dark")), x && x();
-  }, n = o !== void 0 ? o : u, g = `w-6 h-6 ${f.icon || ""}`, b = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: g, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }), $ = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: g, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
+  const b = () => {
+    const v = document.documentElement;
+    v.classList.contains("dark") ? (v.classList.remove("dark"), localStorage.setItem("theme", "light")) : (v.classList.add("dark"), localStorage.setItem("theme", "dark")), d && d();
+  }, o = n !== void 0 ? n : u, m = `w-6 h-6 ${f.icon || ""}`, l = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: m, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }), h = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: m, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
   return /* @__PURE__ */ e.jsx(
-    de,
+    re,
     {
       ...i,
-      isToggled: n,
-      onToggle: l,
-      iconOn: d || b,
-      iconOff: s || $,
+      isToggled: o,
+      onToggle: b,
+      iconOn: x || l,
+      iconOff: s || h,
       imageOn: t,
       imageOff: a,
       customStyles: f,
-      title: i.title || (n ? "Switch to light mode" : "Switch to dark mode")
+      title: i.title || (o ? "Switch to light mode" : "Switch to dark mode")
     }
   );
+}, Q = ({
+  initialLanguage: n = "en",
+  onLanguageChange: d,
+  className: x = "",
+  customStyles: s = {},
+  englishColor: t = "!bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-800",
+  englishBorderColor: a = "border-2 border-transparent",
+  englishTextColor: f = "!text-gray-600 dark:!text-gray-300",
+  spanishColor: i = "!bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-800",
+  spanishBorderColor: u = "border-2 border-transparent",
+  spanishTextColor: g = "!text-gray-600 dark:!text-gray-300",
+  isDark: b = !1
+}) => {
+  const [o, m] = M(n === "es"), l = () => {
+    const v = !o;
+    m(v), d && d(v ? "es" : "en");
+  }, h = o ? `${i} ${g} ${u}` : `${t} ${f} ${a}`;
+  return /* @__PURE__ */ e.jsx("div", { className: b ? "dark" : "", children: /* @__PURE__ */ e.jsx(
+    re,
+    {
+      isToggled: o,
+      onToggle: l,
+      className: x,
+      title: o ? "Switch to English" : "Cambiar a Español",
+      iconOn: /* @__PURE__ */ e.jsx("span", { className: "font-bold text-xs", children: "ES" }),
+      iconOff: /* @__PURE__ */ e.jsx("span", { className: "font-bold text-xs", children: "EN" }),
+      customStyles: {
+        container: `${h} ${s.container || ""}`,
+        icon: `w-6 h-6 flex items-center justify-center ${s.icon || ""}`
+      }
+    }
+  ) });
 }, ue = ({
-  title: o,
-  description: x,
-  image: d,
+  title: n,
+  description: d,
+  image: x,
   tags: s = [],
   orientation: t = "vertical",
   actionLabel: a = "View Project",
   projectUrl: f,
   linkTarget: i = "_self",
   onViewProject: u,
-  customStyles: m = {},
-  className: l = ""
+  customStyles: g = {},
+  className: b = ""
 }) => {
-  const n = t === "horizontal";
+  const o = t === "horizontal";
   return /* @__PURE__ */ e.jsxs("div", { className: `
       /* 1. IDENTIFIER CLASS */
       ds-card
@@ -540,7 +572,7 @@ const de = ({
       /* 2. BASE STRUCTURE */
       group w-full rounded-xl overflow-hidden border transition-all duration-300
       /* Switch layout based on orientation prop */
-      ${n ? "flex flex-col md:flex-row" : "flex flex-col"}
+      ${o ? "flex flex-col md:flex-row" : "flex flex-col"}
       
       /* 3. LIGHT MODE (Default) */
       /* White background, gray border, black shadow on hover */
@@ -564,19 +596,19 @@ const de = ({
       dark:hover:!shadow-[0_20px_25px_-5px_rgba(255,255,255,0.30)]
       
       /* 5. EXTERNAL INJECTIONS */
-      ${m.container || ""} 
-      ${l}
+      ${g.container || ""} 
+      ${b}
     `, children: [
     /* @__PURE__ */ e.jsxs("div", { className: `
         ds-card-image overflow-hidden relative
-        ${n ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"} 
-        ${m.imageWrapper || ""} 
+        ${o ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"} 
+        ${g.imageWrapper || ""} 
       `, children: [
       /* @__PURE__ */ e.jsx(
         "img",
         {
-          src: d,
-          alt: o,
+          src: x,
+          alt: n,
           loading: "lazy",
           decoding: "async",
           className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
@@ -584,20 +616,20 @@ const de = ({
       ),
       /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 bg-transparent dark:bg-black/20 transition-colors pointer-events-none" })
     ] }),
-    /* @__PURE__ */ e.jsxs("div", { className: `ds-card-content p-6 flex flex-col justify-between flex-1 ${m.content || ""}`, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: `ds-card-content p-6 flex flex-col justify-between flex-1 ${g.content || ""}`, children: [
       /* @__PURE__ */ e.jsxs("div", { children: [
         /* @__PURE__ */ e.jsx("h3", { className: `
             ds-card-title text-2xl font-bold mb-3 transition-colors text-gray-900 dark:text-white
-            ${m.title || ""}
-          `, children: o }),
+            ${g.title || ""}
+          `, children: n }),
         /* @__PURE__ */ e.jsx("p", { className: `
             ds-card-description mb-4 line-clamp-3 leading-relaxed transition-colors text-gray-600 dark:text-gray-300
-            ${m.description || ""}
-          `, children: x }),
-        /* @__PURE__ */ e.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${m.tagsContainer || ""}`, children: s.map((g) => /* @__PURE__ */ e.jsx(K, { label: g, variant: "secondary" }, g)) })
+            ${g.description || ""}
+          `, children: d }),
+        /* @__PURE__ */ e.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${g.tagsContainer || ""}`, children: s.map((m) => /* @__PURE__ */ e.jsx(ee, { label: m, variant: "secondary" }, m)) })
       ] }),
       /* @__PURE__ */ e.jsx("div", { className: "ds-card-actions flex justify-start mt-auto", children: /* @__PURE__ */ e.jsx(
-        M,
+        D,
         {
           label: a,
           onClick: u,
@@ -610,9 +642,9 @@ const de = ({
     ] })
   ] });
 }, me = ({
-  title: o = "Featured Content",
-  items: x,
-  layout: d = "grid",
+  title: n = "Featured Content",
+  items: d,
+  layout: x = "grid",
   itemButtonLabel: s = "View Details",
   onItemClick: t,
   customStyles: a = {},
@@ -620,41 +652,41 @@ const de = ({
   backgroundColor: f = "bg-gray-50",
   darkBackgroundColor: i = "dark:bg-gray-900",
   titleColor: u = "text-gray-900",
-  darkTitleColor: m = "dark:text-white"
+  darkTitleColor: g = "dark:text-white"
 }) => {
-  const l = d === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" : "flex flex-col gap-12 max-w-4xl mx-auto";
+  const b = x === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" : "flex flex-col gap-12 max-w-4xl mx-auto";
   return /* @__PURE__ */ e.jsx("section", { className: `
       py-16 px-4 transition-colors duration-300
       ${f} ${i}
       ${a.container || ""}
     `, children: /* @__PURE__ */ e.jsxs("div", { className: "max-w-7xl mx-auto", children: [
-    o && /* @__PURE__ */ e.jsxs("div", { className: "mb-12 text-start", children: [
+    n && /* @__PURE__ */ e.jsxs("div", { className: "mb-12 text-start", children: [
       /* @__PURE__ */ e.jsx("h2", { className: `
               text-4xl font-extrabold mb-4 tracking-tight transition-colors
-              ${u} ${m}
+              ${u} ${g}
               ${a.title || ""}
-            `, children: o }),
+            `, children: n }),
       /* @__PURE__ */ e.jsx("div", { className: "h-1.5 w-24 bg-blue-600 mx-auto rounded-full" })
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: l, children: x.map((n) => /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx("div", { className: b, children: d.map((o) => /* @__PURE__ */ e.jsx(
       ue,
       {
-        title: n.title,
-        description: n.description,
-        image: n.image,
-        tags: n.tags,
-        projectUrl: n.url,
-        orientation: d === "list" ? "horizontal" : "vertical",
+        title: o.title,
+        description: o.description,
+        image: o.image,
+        tags: o.tags,
+        projectUrl: o.url,
+        orientation: x === "list" ? "horizontal" : "vertical",
         actionLabel: s,
-        onViewProject: () => t == null ? void 0 : t(n.id)
+        onViewProject: () => t == null ? void 0 : t(o.id)
       },
-      n.id
+      o.id
     )) })
   ] }) });
-}, ge = ({
-  copyrightOwner: o,
-  copyrightText: x = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
-  socialLinks: d,
+}, be = ({
+  copyrightOwner: n,
+  copyrightText: d = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
+  socialLinks: x,
   secondaryLinks: s = [],
   customStyles: t = {},
   // Default Colors
@@ -662,10 +694,10 @@ const de = ({
   darkBackgroundColor: f = "dark:bg-black",
   borderColor: i = "border-gray-800",
   darkBorderColor: u = "dark:border-gray-800",
-  textColor: m = "text-white",
-  darkTextColor: l = "dark:text-white",
-  linksColor: n = "text-gray-400",
-  linksHoverColor: g = "hover:text-white"
+  textColor: g = "text-white",
+  darkTextColor: b = "dark:text-white",
+  linksColor: o = "text-gray-400",
+  linksHoverColor: m = "hover:text-white"
 }) => /* @__PURE__ */ e.jsx("footer", { className: `
       py-12 border-t transition-colors duration-300
       ${a} ${f}
@@ -673,41 +705,41 @@ const de = ({
       ${t.container || ""}
     `, children: /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center gap-6", children: [
   /* @__PURE__ */ e.jsxs("div", { className: `text-center md:text-left ${t.text || ""}`, children: [
-    /* @__PURE__ */ e.jsx("p", { className: `text-lg font-bold ${m} ${l}`, children: o }),
-    /* @__PURE__ */ e.jsx("p", { className: `text-sm mt-1 ${n} opacity-80`, children: x })
+    /* @__PURE__ */ e.jsx("p", { className: `text-lg font-bold ${g} ${b}`, children: n }),
+    /* @__PURE__ */ e.jsx("p", { className: `text-sm mt-1 ${o} opacity-80`, children: d })
   ] }),
-  s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((b) => /* @__PURE__ */ e.jsx(
+  s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((l) => /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: b.href,
+      href: l.href,
       className: `
                                         text-sm transition-colors 
-                                        ${n} ${g}
+                                        ${o} ${m}
                                         ${t.link || ""}
                                     `,
-      children: b.label
+      children: l.label
     },
-    b.label
+    l.label
   )) }),
-  /* @__PURE__ */ e.jsx("div", { className: "flex space-x-6", children: d.map((b) => /* @__PURE__ */ e.jsx(
+  /* @__PURE__ */ e.jsx("div", { className: "flex space-x-6", children: x.map((l) => /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: b.url,
+      href: l.url,
       target: "_blank",
       rel: "noopener noreferrer",
       className: `
                                     transition-colors text-sm font-medium uppercase tracking-wider 
-                                    ${n} ${g}
+                                    ${o} ${m}
                                     ${t.link || ""}
                                 `,
-      children: b.platform
+      children: l.platform
     },
-    b.platform
+    l.platform
   )) })
-] }) }) }), be = ({
-  greeting: o = "Hello",
-  title: x,
-  subtitle: d,
+] }) }) }), he = ({
+  greeting: n = "Hello",
+  title: d,
+  subtitle: x,
   imageUrl: s,
   actions: t = [],
   customStyles: a = {},
@@ -715,36 +747,36 @@ const de = ({
   backgroundColor: f = "bg-white",
   darkBackgroundColor: i = "dark:bg-gray-900",
   greetingColor: u = "text-blue-600",
-  darkGreetingColor: m = "dark:text-blue-400",
-  titleColor: l = "text-gray-900",
-  darkTitleColor: n = "dark:text-white",
-  subtitleColor: g = "text-gray-500",
-  darkSubtitleColor: b = "dark:text-gray-400"
+  darkGreetingColor: g = "dark:text-blue-400",
+  titleColor: b = "text-gray-900",
+  darkTitleColor: o = "dark:text-white",
+  subtitleColor: m = "text-gray-500",
+  darkSubtitleColor: l = "dark:text-gray-400"
 }) => {
-  const $ = s ? "flex flex-col lg:flex-row items-center gap-12 lg:gap-16" : "flex flex-col items-center text-center max-w-4xl mx-auto", j = s ? "flex-1 text-center lg:text-left" : "w-full", w = s ? "justify-center lg:justify-start" : "justify-center";
+  const h = s ? "flex flex-col lg:flex-row items-center gap-12 lg:gap-16" : "flex flex-col items-center text-center max-w-4xl mx-auto", v = s ? "flex-1 text-center lg:text-left" : "w-full", w = s ? "justify-center lg:justify-start" : "justify-center";
   return /* @__PURE__ */ e.jsx("section", { className: `
       relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden transition-colors duration-300
       ${f} ${i}
       ${a.container || ""}
-    `, children: /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: $, children: [
-    /* @__PURE__ */ e.jsxs("div", { className: `${j} ${a.content || ""}`, children: [
-      o && /* @__PURE__ */ e.jsx("p", { className: `
+    `, children: /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: h, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: `${v} ${a.content || ""}`, children: [
+      n && /* @__PURE__ */ e.jsx("p", { className: `
                                 font-semibold tracking-wide uppercase text-sm mb-4
-                                ${u} ${m}
-                            `, children: o }),
+                                ${u} ${g}
+                            `, children: n }),
       /* @__PURE__ */ e.jsx("h1", { className: `
               text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 transition-colors
-              ${l} ${n}
+              ${b} ${o}
               ${a.title || ""}
-            `, children: x }),
+            `, children: d }),
       /* @__PURE__ */ e.jsx("p", { className: `
               text-lg sm:text-xl mb-8 leading-relaxed transition-colors
-              ${g} ${b}
+              ${m} ${l}
               ${!s && "mx-auto max-w-2xl"}
               ${a.subtitle || ""}
-            `, children: d }),
+            `, children: x }),
       t.length > 0 && /* @__PURE__ */ e.jsx("div", { className: `flex flex-col sm:flex-row gap-4 ${w}`, children: t.map((y, k) => /* @__PURE__ */ e.jsx(
-        M,
+        D,
         {
           label: y.label,
           variant: y.variant || "primary",
@@ -771,17 +803,20 @@ const de = ({
       )
     ] }) })
   ] }) }) });
-}, xe = ({
-  logo: o = "Marc.Dev",
-  isLogoImage: x = !1,
-  links: d,
+}, fe = ({
+  logo: n = "Marc.Dev",
+  isLogoImage: d = !1,
+  links: x,
   actions: s = [],
   customStyles: t = {},
   isOpen: a = !1,
   isScrolled: f = !1,
   onToggleMenu: i,
   onLinkClick: u,
-  onLogoClick: m
+  onLogoClick: g,
+  enableLanguageToggle: b = !1,
+  language: o = "en",
+  onLanguageChange: m
 }) => /* @__PURE__ */ e.jsxs(
   "nav",
   {
@@ -793,13 +828,13 @@ const de = ({
       `,
     children: [
       /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center h-20", children: [
-        /* @__PURE__ */ e.jsx("div", { className: `flex-shrink-0 cursor-pointer flex items-center ${t.logo || ""}`, onClick: m, children: x ? /* @__PURE__ */ e.jsx("img", { src: o, alt: "Logo", className: "h-8 w-auto" }) : /* @__PURE__ */ e.jsx("span", { className: "text-2xl font-bold text-gray-900 dark:text-white tracking-tighter hover:text-blue-600 dark:hover:text-blue-400 transition-colors", children: o }) }),
+        /* @__PURE__ */ e.jsx("div", { className: `flex-shrink-0 cursor-pointer flex items-center ${t.logo || ""}`, onClick: g, children: d ? /* @__PURE__ */ e.jsx("img", { src: n, alt: "Logo", className: "h-8 w-auto" }) : /* @__PURE__ */ e.jsx("span", { className: "text-2xl font-bold text-gray-900 dark:text-white tracking-tighter hover:text-blue-600 dark:hover:text-blue-400 transition-colors", children: n }) }),
         /* @__PURE__ */ e.jsxs("div", { className: "hidden md:flex space-x-8 items-center", children: [
-          d.map((l) => /* @__PURE__ */ e.jsx(
+          x.map((l) => /* @__PURE__ */ e.jsx(
             "a",
             {
               href: l.href,
-              onClick: (n) => u == null ? void 0 : u(n, l.href),
+              onClick: (h) => u == null ? void 0 : u(h, l.href),
               className: `
                   text-sm font-medium transition-colors 
                   hover:text-blue-600 dark:hover:text-blue-400
@@ -811,11 +846,25 @@ const de = ({
             l.label
           )),
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700", children: [
+            b && /* @__PURE__ */ e.jsx(
+              Q,
+              {
+                initialLanguage: o,
+                onLanguageChange: m
+              }
+            ),
             /* @__PURE__ */ e.jsx(Z, {}),
-            s.map((l, n) => /* @__PURE__ */ e.jsx(M, { ...l, size: "small" }, n))
+            s.map((l, h) => /* @__PURE__ */ e.jsx(D, { ...l, size: "small" }, h))
           ] })
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 md:hidden", children: [
+          b && /* @__PURE__ */ e.jsx(
+            Q,
+            {
+              initialLanguage: o,
+              onLanguageChange: m
+            }
+          ),
           /* @__PURE__ */ e.jsx(Z, {}),
           /* @__PURE__ */ e.jsx(
             "button",
@@ -838,25 +887,25 @@ const de = ({
           ${t.mobileMenu || ""}
         `,
           children: /* @__PURE__ */ e.jsxs("div", { className: "px-6 py-6 space-y-4 flex flex-col items-center", children: [
-            d.map((l) => /* @__PURE__ */ e.jsx(
+            x.map((l) => /* @__PURE__ */ e.jsx(
               "a",
               {
                 href: l.href,
-                onClick: (n) => u == null ? void 0 : u(n, l.href),
+                onClick: (h) => u == null ? void 0 : u(h, l.href),
                 className: "block text-lg font-medium text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors",
                 children: l.label
               },
               l.label
             )),
-            s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: s.map((l, n) => /* @__PURE__ */ e.jsx(M, { ...l, size: "medium", className: "w-full" }, n)) })
+            s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: s.map((l, h) => /* @__PURE__ */ e.jsx(D, { ...l, size: "medium", className: "w-full" }, h)) })
           ] })
         }
       )
     ]
   }
-), he = (o) => {
-  const [x, d] = z(!1), [s, t] = z(!1);
-  Q(() => {
+), pe = (n) => {
+  const [d, x] = M(!1), [s, t] = M(!1);
+  K(() => {
     let i = !1;
     const u = () => {
       i || (window.requestAnimationFrame(() => {
@@ -867,26 +916,26 @@ const de = ({
   }, []);
   const a = (i, u) => {
     i.preventDefault();
-    const m = document.querySelector(u);
-    m && (m.scrollIntoView({ behavior: "smooth" }), d(!1));
+    const g = document.querySelector(u);
+    g && (g.scrollIntoView({ behavior: "smooth" }), x(!1));
   }, f = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
   return /* @__PURE__ */ e.jsx(
-    xe,
+    fe,
     {
-      ...o,
-      isOpen: x,
+      ...n,
+      isOpen: d,
       isScrolled: s,
-      onToggleMenu: () => d(!x),
+      onToggleMenu: () => x(!d),
       onLinkClick: a,
       onLogoClick: f
     }
   );
-}, pe = ({
-  title: o = "About Me",
-  avatarUrl: x,
-  bio: d,
+}, ve = ({
+  title: n = "About Me",
+  avatarUrl: d,
+  bio: x,
   skillsTitle: s = "Tech Stack",
   skills: t = [],
   customStyles: a = {},
@@ -894,12 +943,12 @@ const de = ({
   // Default Colors
   backgroundColor: i = "bg-white",
   darkBackgroundColor: u = "dark:bg-gray-900",
-  borderColor: m = "border-gray-100",
-  darkBorderColor: l = "dark:border-gray-800",
-  titleColor: n = "text-gray-900",
-  darkTitleColor: g = "dark:text-white",
-  textColor: b = "text-gray-600",
-  darkTextColor: $ = "dark:text-gray-300"
+  borderColor: g = "border-gray-100",
+  darkBorderColor: b = "dark:border-gray-800",
+  titleColor: o = "text-gray-900",
+  darkTitleColor: m = "dark:text-white",
+  textColor: l = "text-gray-600",
+  darkTextColor: h = "dark:text-gray-300"
 }) => /* @__PURE__ */ e.jsx(
   "section",
   {
@@ -908,29 +957,29 @@ const de = ({
         py-20 transition-colors duration-300
         border-y 
         ${i} ${u}
-        ${m} ${l}
+        ${g} ${b}
         ${a.container || ""}
       `,
     children: /* @__PURE__ */ e.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${a.contentWrapper || ""}`, children: [
-      o && /* @__PURE__ */ e.jsxs("div", { className: "text-center mb-12", children: [
+      n && /* @__PURE__ */ e.jsxs("div", { className: "text-center mb-12", children: [
         /* @__PURE__ */ e.jsx("h2", { className: `
               text-3xl font-bold transition-colors
-              ${n} ${g}
+              ${o} ${m}
               ${a.title || ""}
-            `, children: o }),
+            `, children: n }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-2 h-1 w-20 bg-blue-600 mx-auto rounded" })
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col md:flex-row items-center gap-12", children: [
-        /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(ie, { src: x, size: "xl" }) }),
-        /* @__PURE__ */ e.jsxs("div", { className: `text-lg leading-relaxed ${b} ${$} ${a.textWrapper || ""}`, children: [
-          /* @__PURE__ */ e.jsx("p", { className: `mb-8 whitespace-pre-line ${a.bio || ""}`, children: d }),
+        /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(de, { src: d, size: "xl" }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: `text-lg leading-relaxed ${l} ${h} ${a.textWrapper || ""}`, children: [
+          /* @__PURE__ */ e.jsx("p", { className: `mb-8 whitespace-pre-line ${a.bio || ""}`, children: x }),
           t.length > 0 && /* @__PURE__ */ e.jsxs("div", { children: [
             s && /* @__PURE__ */ e.jsx("h3", { className: `
                     text-sm font-bold uppercase tracking-wide mb-3
-                    ${n} ${g}
+                    ${o} ${m}
                     ${a.skillsTitle || ""}
                   `, children: s }),
-            /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: t.map((j) => /* @__PURE__ */ e.jsx(K, { label: j, variant: "secondary" }, j)) })
+            /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: t.map((v) => /* @__PURE__ */ e.jsx(ee, { label: v, variant: "secondary" }, v)) })
           ] })
         ] })
       ] })
@@ -938,15 +987,16 @@ const de = ({
   }
 );
 export {
-  ie as Avatar,
-  K as Badge,
-  M as Button,
+  de as Avatar,
+  ee as Badge,
+  D as Button,
   me as ContentGrid,
-  ge as Footer,
-  be as Hero,
-  ce as Input,
-  he as Navbar,
-  pe as ProfileSection,
+  be as Footer,
+  he as Hero,
+  xe as Input,
+  Q as LanguageToggle,
+  pe as Navbar,
+  ve as ProfileSection,
   ue as ProjectCard,
   Z as ThemeToggle
 };