@iniguezmarc/design-system 0.0.12 → 0.0.17

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import se, { forwardRef as ne, useState as z, useEffect as Q } from "react";
-var W = { exports: {} }, A = {};
+import I, { forwardRef as le, useState as C, useEffect as U, useRef as ie } from "react";
+var q = { exports: {} }, M = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var W = { exports: {} }, A = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var X;
-function oe() {
-  if (X) return A;
-  X = 1;
-  var o = Symbol.for("react.transitional.element"), x = Symbol.for("react.fragment");
-  function d(s, t, a) {
-    var f = null;
-    if (a !== void 0 && (f = "" + a), t.key !== void 0 && (f = "" + t.key), "key" in t) {
-      a = {};
-      for (var i in t)
-        i !== "key" && (a[i] = t[i]);
-    } else a = t;
-    return t = a.ref, {
+var re;
+function ce() {
+  if (re) return M;
+  re = 1;
+  var o = Symbol.for("react.transitional.element"), l = Symbol.for("react.fragment");
+  function i(s, a, t) {
+    var x = null;
+    if (t !== void 0 && (x = "" + t), a.key !== void 0 && (x = "" + a.key), "key" in a) {
+      t = {};
+      for (var n in a)
+        n !== "key" && (t[n] = a[n]);
+    } else t = a;
+    return a = t.ref, {
       $$typeof: o,
       type: s,
-      key: f,
-      ref: t !== void 0 ? t : null,
-      props: a
+      key: x,
+      ref: a !== void 0 ? a : null,
+      props: t
     };
   }
-  return A.Fragment = x, A.jsx = d, A.jsxs = d, A;
+  return M.Fragment = l, M.jsx = i, M.jsxs = i, M;
 }
-var O = {};
+var D = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,126 +41,126 @@ var O = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var J;
-function le() {
-  return J || (J = 1, process.env.NODE_ENV !== "production" && function() {
+var ae;
+function de() {
+  return ae || (ae = 1, process.env.NODE_ENV !== "production" && function() {
     function o(r) {
       if (r == null) return null;
       if (typeof r == "function")
-        return r.$$typeof === re ? null : r.displayName || r.name || null;
+        return r.$$typeof === L ? null : r.displayName || r.name || null;
       if (typeof r == "string") return r;
       switch (r) {
-        case w:
+        case v:
           return "Fragment";
         case k:
           return "Profiler";
-        case y:
+        case N:
           return "StrictMode";
-        case R:
+        case w:
           return "Suspense";
-        case P:
+        case E:
           return "SuspenseList";
-        case ee:
+        case F:
           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 p:
             return "Portal";
-          case _:
+          case T:
             return r.displayName || "Context";
-          case E:
+          case R:
             return (r._context.displayName || "Context") + ".Consumer";
-          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:
-            c = r._payload, r = r._init;
+          case _:
+            var b = r.render;
+            return r = r.displayName, r || (r = b.displayName || b.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
+          case Y:
+            return b = r.displayName || null, b !== null ? b : o(r.type) || "Memo";
+          case S:
+            b = r._payload, r = r._init;
             try {
-              return o(r(c));
+              return o(r(b));
             } catch {
             }
         }
       return null;
     }
-    function x(r) {
+    function l(r) {
       return "" + r;
     }
-    function d(r) {
+    function i(r) {
       try {
-        x(r);
-        var c = !1;
+        l(r);
+        var b = !1;
       } catch {
-        c = !0;
+        b = !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(
-          c,
+      if (b) {
+        b = console;
+        var j = b.error, $ = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return j.call(
+          b,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          p
-        ), x(r);
+          $
+        ), l(r);
       }
     }
     function s(r) {
-      if (r === w) return "<>";
-      if (typeof r == "object" && r !== null && r.$$typeof === D)
+      if (r === v) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === S)
         return "<...>";
       try {
-        var c = o(r);
-        return c ? "<" + c + ">" : "<...>";
+        var b = o(r);
+        return b ? "<" + b + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function t() {
-      var r = L.A;
+    function a() {
+      var r = A.A;
       return r === null ? null : r.getOwner();
     }
-    function a() {
+    function t() {
       return Error("react-stack-top-frame");
     }
-    function f(r) {
-      if (F.call(r, "key")) {
-        var c = Object.getOwnPropertyDescriptor(r, "key").get;
-        if (c && c.isReactWarning) return !1;
+    function x(r) {
+      if (X.call(r, "key")) {
+        var b = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (b && b.isReactWarning) return !1;
       }
       return r.key !== void 0;
     }
-    function i(r, c) {
-      function h() {
-        V || (V = !0, console.error(
+    function n(r, b) {
+      function j() {
+        J || (J = !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
+          b
         ));
       }
-      h.isReactWarning = !0, Object.defineProperty(r, "key", {
-        get: h,
+      j.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: j,
         configurable: !0
       });
     }
-    function u() {
+    function c() {
       var r = o(this.type);
-      return H[r] || (H[r] = !0, console.error(
+      return Z[r] || (Z[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, b, j, $, B, G) {
+      var y = j.ref;
       return r = {
-        $$typeof: $,
+        $$typeof: h,
         type: r,
-        key: c,
-        props: h,
-        _owner: p
-      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(r, "ref", {
+        key: b,
+        props: j,
+        _owner: $
+      }, (y !== void 0 ? y : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
-        get: u
+        get: c
       }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -175,364 +175,437 @@ function le() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: S
+        value: B
       }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: Y
+        value: G
       }), 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 f(r, b, j, $, B, G) {
+      var y = b.children;
+      if (y !== void 0)
+        if ($)
+          if (ne(y)) {
+            for ($ = 0; $ < y.length; $++)
+              d(y[$]);
+            Object.freeze && Object.freeze(y);
           } 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);
-      if (F.call(c, "key")) {
-        v = o(r);
-        var N = Object.keys(c).filter(function(ae) {
-          return ae !== "key";
+        else d(y);
+      if (X.call(b, "key")) {
+        y = o(r);
+        var P = Object.keys(b).filter(function(oe) {
+          return oe !== "key";
         });
-        p = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", q[v + p] || (N = 0 < N.length ? "{" + N.join(": ..., ") + ": ...}" : "{}", console.error(
+        $ = 0 < P.length ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}", ee[y + $] || (P = 0 < P.length ? "{" + P.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,
-          N,
-          v
-        ), q[v + p] = !0);
+          $,
+          y,
+          P,
+          y
+        ), ee[y + $] = !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 (y = null, j !== void 0 && (i(j), y = "" + j), x(b) && (i(b.key), y = "" + b.key), "key" in b) {
+        j = {};
+        for (var H in b)
+          H !== "key" && (j[H] = b[H]);
+      } else j = b;
+      return y && n(
+        j,
         typeof r == "function" ? r.displayName || r.name || "Unknown" : r
-      ), m(
+      ), g(
         r,
-        v,
-        h,
-        t(),
-        S,
-        Y
+        y,
+        j,
+        a(),
+        B,
+        G
       );
     }
-    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 d(r) {
+      m(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === S && (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 u = I, h = Symbol.for("react.transitional.element"), p = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), N = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), R = Symbol.for("react.consumer"), T = Symbol.for("react.context"), _ = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), Y = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), F = Symbol.for("react.activity"), L = Symbol.for("react.client.reference"), A = u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, X = Object.prototype.hasOwnProperty, ne = Array.isArray, V = console.createTask ? console.createTask : function() {
       return null;
     };
-    b = {
+    u = {
       react_stack_bottom_frame: function(r) {
         return r();
       }
     };
-    var V, H = {}, G = b.react_stack_bottom_frame.bind(
-      b,
-      a
-    )(), U = B(s(a)), q = {};
-    O.Fragment = w, O.jsx = function(r, c, h) {
-      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return l(
+    var J, Z = {}, K = u.react_stack_bottom_frame.bind(
+      u,
+      t
+    )(), Q = V(s(t)), ee = {};
+    D.Fragment = v, D.jsx = function(r, b, j) {
+      var $ = 1e4 > A.recentlyCreatedOwnerStacks++;
+      return f(
         r,
-        c,
-        h,
+        b,
+        j,
         !1,
-        p ? Error("react-stack-top-frame") : G,
-        p ? B(s(r)) : U
+        $ ? Error("react-stack-top-frame") : K,
+        $ ? V(s(r)) : Q
       );
-    }, O.jsxs = function(r, c, h) {
-      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return l(
+    }, D.jsxs = function(r, b, j) {
+      var $ = 1e4 > A.recentlyCreatedOwnerStacks++;
+      return f(
         r,
-        c,
-        h,
+        b,
+        j,
         !0,
-        p ? Error("react-stack-top-frame") : G,
-        p ? B(s(r)) : U
+        $ ? Error("react-stack-top-frame") : K,
+        $ ? V(s(r)) : Q
       );
     };
-  }()), O;
+  }()), D;
 }
-process.env.NODE_ENV === "production" ? W.exports = oe() : W.exports = le();
-var e = W.exports;
-const ie = ({
+process.env.NODE_ENV === "production" ? q.exports = ce() : q.exports = de();
+var e = q.exports;
+const ue = ({
   src: o,
-  alt: x = "Avatar",
-  size: d = "md",
+  alt: l = "Avatar",
+  size: i = "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"
+  customStyles: a = {},
+  className: t = "",
+  borderColor: x = "border-gray-200",
+  darkBorderColor: n = "dark:border-gray-700",
+  backgroundColor: c = "bg-gray-100",
+  darkBackgroundColor: g = "dark:bg-gray-800",
+  loading: f = "lazy"
 }) => {
-  const n = {
+  const d = {
     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", u = `border ${x} ${n}`, h = `${c} ${g}`;
   return /* @__PURE__ */ e.jsx("div", { className: `
             ds-avatar relative rounded-full overflow-hidden flex-shrink-0
-            ${n[d]}
-            ${$}
-            ${b}
-            ${t.container || ""}
-            ${a}
+            ${d[i]}
+            ${h}
+            ${u}
+            ${a.container || ""}
+            ${t}
         `, children: /* @__PURE__ */ e.jsx(
     "img",
     {
       src: o,
-      alt: x,
-      loading: l,
+      alt: l,
+      loading: f,
       decoding: "async",
       className: `
                     w-full h-full 
-                    ${g}
-                    ${t.image || ""}
+                    ${m}
+                    ${a.image || ""}
                 `
     }
   ) });
-}, K = ({
+}, te = ({
   label: o,
-  variant: x = "primary",
-  customStyles: d = {},
+  variant: l = "primary",
+  customStyles: i = {},
   className: s = "",
-  endIcon: t,
+  endIcon: a,
   // Default Colors
-  primaryColor: a = "bg-blue-100 text-blue-800",
-  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"
+  primaryColor: t = "bg-blue-100 text-blue-800",
+  darkPrimaryColor: x = "dark:bg-blue-900/50 dark:text-blue-200",
+  secondaryColor: n = "bg-gray-100 text-gray-800",
+  darkSecondaryColor: c = "dark:bg-gray-700 dark:text-gray-300",
+  outlineColor: g = "border border-gray-300 text-gray-600 bg-transparent",
+  darkOutlineColor: f = "dark:border-gray-600 dark:text-gray-400",
+  successColor: d = "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", $ = {
-    primary: `${a} ${f}`,
-    secondary: `${i} ${u}`,
-    outline: `${m} ${l}`,
-    success: `${n} ${g}`
+  const u = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1", h = {
+    primary: `${t} ${x}`,
+    secondary: `${n} ${c}`,
+    outline: `${g} ${f}`,
+    success: `${d} ${m}`
   };
   return /* @__PURE__ */ e.jsxs("span", { className: `
             ds-badge
-            ${b} 
-            ${$[x]}
-            ${d.container || ""}
+            ${u} 
+            ${h[l]}
+            ${i.container || ""}
             ${s}
         `, children: [
-    /* @__PURE__ */ e.jsx("span", { className: d.label || "", children: o }),
-    t && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: t })
+    /* @__PURE__ */ e.jsx("span", { className: i.label || "", children: o }),
+    a && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: a })
   ] });
-}, M = ({
+}, O = ({
   label: o,
-  variant: x = "primary",
-  size: d = "medium",
+  variant: l = "primary",
+  size: i = "medium",
   onClick: s,
-  className: t = "",
-  customStyles: a = {},
-  href: f,
-  target: i,
+  className: a = "",
+  customStyles: t = {},
+  href: x,
+  target: n,
   // 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",
-  outlineColor: w = "text-blue-600 border-blue-600",
-  outlineHoverColor: y = "hover:bg-blue-50",
+  primaryColor: c = "bg-blue-600",
+  primaryHoverColor: g = "hover:bg-blue-700",
+  darkPrimaryColor: f = "dark:bg-blue-600",
+  darkPrimaryHoverColor: d = "dark:hover:bg-blue-500",
+  secondaryColor: m = "bg-gray-100",
+  secondaryHoverColor: u = "hover:bg-gray-200",
+  darkSecondaryColor: h = "dark:bg-gray-800",
+  darkSecondaryHoverColor: p = "dark:hover:bg-gray-700",
+  outlineColor: v = "text-blue-600 border-blue-600",
+  outlineHoverColor: N = "hover:bg-blue-50",
   darkOutlineColor: k = "dark:text-blue-400 dark:border-blue-400",
-  darkOutlineHoverColor: E = "dark:hover:bg-blue-950"
+  darkOutlineHoverColor: R = "dark:hover:bg-blue-950",
+  ghostColor: T = "text-gray-600 bg-transparent",
+  ghostHoverColor: _ = "hover:bg-gray-100",
+  darkGhostColor: w = "dark:text-gray-300",
+  darkGhostHoverColor: E = "dark:hover:bg-gray-800"
 }) => {
-  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}`,
-    outline: `bg-transparent ${w} border-2 ${y} focus:ring-blue-500 ${k} ${E}`
-  }, R = {
+  const Y = "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", S = {
+    primary: `${c} text-white ${g} focus:ring-blue-500 border-2 border-transparent ${f} ${d}`,
+    secondary: `${m} text-gray-800 ${u} focus:ring-gray-500 border-2 border-transparent ${h} dark:text-gray-100 ${p}`,
+    outline: `bg-transparent ${v} border-2 ${N} focus:ring-blue-500 ${k} ${R}`,
+    ghost: `${T} border-2 border-transparent ${_} focus:ring-gray-500 ${w} ${E}`
+  }, F = {
     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 });
-  return f ? /* @__PURE__ */ e.jsx(
+  }, L = `${Y} ${S[l]} ${F[i]} ${t.container || ""} ${a}`, A = /* @__PURE__ */ e.jsx("span", { className: `relative z-10 flex items-center justify-center gap-2 ${t.label || ""}`, children: o });
+  return x ? /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: f,
-      className: P,
-      target: i,
-      rel: i === "_blank" ? "noopener noreferrer" : void 0,
+      href: x,
+      className: L,
+      target: n,
+      rel: n === "_blank" ? "noopener noreferrer" : void 0,
       onClick: s,
-      children: C
+      children: A
     }
   ) : /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      className: P,
+      className: L,
       onClick: s,
-      children: C
+      children: A
     }
   );
-}, ce = ne(({
+}, xe = le(({
   label: o,
-  error: x,
-  className: d,
+  error: l,
+  className: i,
   customStyles: s = {},
-  startIcon: t,
-  endIcon: a,
+  startIcon: a,
+  endIcon: t,
   // Default Colors
-  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",
-  darkErrorBorderColor: w = "dark:border-red-500",
-  errorTextColor: y = "text-red-500",
+  labelColor: x = "text-gray-700",
+  darkLabelColor: n = "dark:text-gray-200",
+  inputBgColor: c = "bg-white",
+  darkInputBgColor: g = "dark:bg-gray-800",
+  inputBorderColor: f = "border-gray-300",
+  darkInputBorderColor: d = "dark:border-gray-600",
+  inputTextColor: m = "text-gray-900",
+  darkInputTextColor: u = "dark:text-white",
+  focusRingColor: h = "focus:ring-blue-500",
+  errorBorderColor: p = "border-red-500",
+  darkErrorBorderColor: v = "dark:border-red-500",
+  errorTextColor: N = "text-red-500",
   darkErrorTextColor: k = "dark:text-red-400",
-  ...E
-}, _) => {
-  const T = `
+  ...R
+}, T) => {
+  const _ = `
         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 }),
+        ${a ? "pl-10" : "px-3"} 
+        ${t ? "pr-10" : "px-3"}
+        ${c} ${g}
+        ${m} ${u}
+        ${h}
+    `, w = l ? `${p} focus:ring-red-500 ${v}` : `${f} ${d}`;
+  return /* @__PURE__ */ e.jsxs("div", { className: `w-full ${s.container || ""} ${i}`, children: [
+    o && /* @__PURE__ */ e.jsx("label", { className: `block text-sm font-medium ${x} ${n} mb-1 ${s.label || ""}`, children: o }),
     /* @__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 }),
+      a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${s.iconContainer || ""}`, children: a }),
       /* @__PURE__ */ e.jsx(
         "input",
         {
-          ref: _,
+          ref: T,
           className: `
-                        ${T}
-                        ${R}
+                        ${_}
+                        ${w}
                         ${s.input || ""}
                     `,
-          ...E
+          ...R
         }
       ),
-      a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${s.iconContainer || ""}`, children: a })
+      t && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${s.iconContainer || ""}`, children: t })
     ] }),
-    x && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${y} ${k} ${s.error || ""}`, children: x })
+    l && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${N} ${k} ${s.error || ""}`, children: l })
   ] });
 });
-ce.displayName = "BasicInput";
-const de = ({
+xe.displayName = "BasicInput";
+const se = ({
   isToggled: o,
-  onToggle: x,
-  iconOn: d,
+  onToggle: l,
+  iconOn: i,
   iconOff: s,
-  imageOn: t,
-  imageOff: a,
-  imageFit: f = "contain",
-  customStyles: i = {},
-  className: u = "",
-  title: m
+  imageOn: a,
+  imageOff: t,
+  imageFit: x = "contain",
+  customStyles: n = {},
+  className: c = "",
+  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 f = `w-6 h-6 ${n.icon || ""}`, d = () => {
+    const m = x === "contain" ? "object-contain" : "object-cover";
+    return o ? a ? /* @__PURE__ */ e.jsx("img", { src: a, alt: "Toggled On", className: `${f} ${m}` }) : i : t ? /* @__PURE__ */ e.jsx("img", { src: t, alt: "Toggled Off", className: `${f} ${m}` }) : s;
   };
   return /* @__PURE__ */ e.jsx(
     "button",
     {
-      onClick: x,
-      title: m,
+      onClick: l,
+      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"}
-                ${i.container || ""}
-                ${u}
+                ${n.container || ""}
+                ${c}
             `,
-      children: n()
+      children: d()
     }
   );
-}, Z = ({
+}, z = ({
   isDark: o,
-  onToggle: x,
-  iconSun: d,
+  onToggle: l,
+  iconSun: i,
   iconMoon: s,
-  sunImage: t,
-  moonImage: a,
-  customStyles: f = {},
-  ...i
+  sunImage: a,
+  moonImage: t,
+  customStyles: x = {},
+  ...n
 }) => {
-  const [u, m] = z(!1);
-  Q(() => {
-    const j = () => {
-      const y = document.documentElement.classList.contains("dark");
-      m(y);
+  const [c, g] = C(!1);
+  U(() => {
+    const p = () => {
+      const N = document.documentElement.classList.contains("dark");
+      g(N);
     };
-    j();
-    const w = new MutationObserver(j);
-    return w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => w.disconnect();
+    p();
+    const v = new MutationObserver(p);
+    return v.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => v.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 f = () => {
+    const p = document.documentElement;
+    p.classList.contains("dark") ? (p.classList.remove("dark"), localStorage.setItem("theme", "light")) : (p.classList.add("dark"), localStorage.setItem("theme", "dark")), l && l();
+  }, d = o !== void 0 ? o : c, m = `w-6 h-6 ${x.icon || ""}`, u = /* @__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,
+    se,
     {
-      ...i,
-      isToggled: n,
-      onToggle: l,
-      iconOn: d || b,
-      iconOff: s || $,
-      imageOn: t,
-      imageOff: a,
-      customStyles: f,
-      title: i.title || (n ? "Switch to light mode" : "Switch to dark mode")
+      ...n,
+      isToggled: d,
+      onToggle: f,
+      iconOn: i || u,
+      iconOff: s || h,
+      imageOn: a,
+      imageOff: t,
+      customStyles: x,
+      title: n.title || (d ? "Switch to light mode" : "Switch to dark mode")
     }
   );
-}, ue = ({
+}, W = ({
+  initialLanguage: o = "en",
+  onLanguageChange: l,
+  className: i = "",
+  customStyles: s = {},
+  englishColor: a = "!bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-800",
+  englishBorderColor: t = "border-2 border-transparent",
+  englishTextColor: x = "!text-gray-600 dark:!text-gray-300",
+  spanishColor: n = "!bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-800",
+  spanishBorderColor: c = "border-2 border-transparent",
+  spanishTextColor: g = "!text-gray-600 dark:!text-gray-300",
+  isDark: f = !1
+}) => {
+  const [d, m] = C(o === "es"), u = () => {
+    const p = !d;
+    m(p), l && l(p ? "es" : "en");
+  }, h = d ? `${n} ${g} ${c}` : `${a} ${x} ${t}`;
+  return /* @__PURE__ */ e.jsx("div", { className: f ? "dark" : "", children: /* @__PURE__ */ e.jsx(
+    se,
+    {
+      isToggled: d,
+      onToggle: u,
+      className: i,
+      title: d ? "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 || ""}`
+      }
+    }
+  ) });
+}, ge = ({
+  label: o,
+  value: l,
+  onChange: i,
+  min: s = 0,
+  max: a = 100,
+  step: t = 1,
+  className: x = "",
+  customStyles: n = {},
+  disabled: c,
+  ...g
+}) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-2 ${n.container || ""} ${x}`, children: [
+  o && /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center", children: [
+    /* @__PURE__ */ e.jsx("label", { className: `text-sm font-medium text-gray-700 dark:text-gray-300 ${n.label || ""}`, children: o }),
+    /* @__PURE__ */ e.jsx("span", { className: "text-xs text-gray-500 font-mono", children: l })
+  ] }),
+  /* @__PURE__ */ e.jsx(
+    "input",
+    {
+      type: "range",
+      min: s,
+      max: a,
+      step: t,
+      value: l,
+      onChange: (f) => i(Number(f.target.value)),
+      disabled: c,
+      className: `
+                    w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700
+                    accent-blue-600 dark:accent-blue-500
+                    disabled:opacity-50 disabled:cursor-not-allowed
+                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
+                    ${n.input || ""}
+                `,
+      ...g
+    }
+  )
+] }), Ne = (o) => /* @__PURE__ */ e.jsx(ge, { ...o }), fe = ({
   title: o,
-  description: x,
-  image: d,
+  description: l,
+  image: i,
   tags: s = [],
-  orientation: t = "vertical",
-  actionLabel: a = "View Project",
-  projectUrl: f,
-  linkTarget: i = "_self",
-  onViewProject: u,
-  customStyles: m = {},
-  className: l = ""
+  orientation: a = "vertical",
+  actionLabel: t = "View Project",
+  projectUrl: x,
+  linkTarget: n = "_self",
+  onViewProject: c,
+  customStyles: g = {},
+  className: f = ""
 }) => {
-  const n = t === "horizontal";
+  const d = a === "horizontal";
   return /* @__PURE__ */ e.jsxs("div", { className: `
       /* 1. IDENTIFIER CLASS */
       ds-card
@@ -540,7 +613,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"}
+      ${d ? "flex flex-col md:flex-row" : "flex flex-col"}
       
       /* 3. LIGHT MODE (Default) */
       /* White background, gray border, black shadow on hover */
@@ -564,18 +637,18 @@ const de = ({
       dark:hover:!shadow-[0_20px_25px_-5px_rgba(255,255,255,0.30)]
       
       /* 5. EXTERNAL INJECTIONS */
-      ${m.container || ""} 
-      ${l}
+      ${g.container || ""} 
+      ${f}
     `, 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 || ""} 
+        ${d ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"} 
+        ${g.imageWrapper || ""} 
       `, children: [
       /* @__PURE__ */ e.jsx(
         "img",
         {
-          src: d,
+          src: i,
           alt: o,
           loading: "lazy",
           decoding: "async",
@@ -584,25 +657,25 @@ 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 || ""}
+            ${g.title || ""}
           `, children: o }),
         /* @__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: l }),
+        /* @__PURE__ */ e.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${g.tagsContainer || ""}`, children: s.map((m) => /* @__PURE__ */ e.jsx(te, { label: m, variant: "secondary" }, m)) })
       ] }),
       /* @__PURE__ */ e.jsx("div", { className: "ds-card-actions flex justify-start mt-auto", children: /* @__PURE__ */ e.jsx(
-        M,
+        O,
         {
-          label: a,
-          onClick: u,
-          href: f,
-          target: i,
+          label: t,
+          onClick: c,
+          href: x,
+          target: n,
           size: "medium",
           variant: "primary"
         }
@@ -610,146 +683,172 @@ const de = ({
     ] })
   ] });
 }, me = ({
+  children: o,
+  title: l,
+  actions: i,
+  className: s = "",
+  customStyles: a = {}
+}) => /* @__PURE__ */ e.jsxs(
+  "div",
+  {
+    className: `
+                bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 
+                rounded-xl shadow-sm overflow-hidden
+                ${a.container || ""} ${s}
+            `,
+    children: [
+      (l || i) && /* @__PURE__ */ e.jsxs("div", { className: `
+                    px-4 py-3 border-b border-gray-100 dark:border-gray-700 
+                    flex justify-between items-center bg-gray-50/50 dark:bg-gray-900/50
+                    ${a.header || ""}
+                `, children: [
+        l && /* @__PURE__ */ e.jsx("h3", { className: `text-sm font-semibold text-gray-900 dark:text-gray-100 ${a.title || ""}`, children: l }),
+        i && /* @__PURE__ */ e.jsx("div", { className: `flex items-center gap-2 ${a.actions || ""}`, children: i })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: `p-4 ${a.content || ""}`, children: o })
+    ]
+  }
+), ke = (o) => /* @__PURE__ */ e.jsx(me, { ...o }), he = ({
   title: o = "Featured Content",
-  items: x,
-  layout: d = "grid",
+  items: l,
+  layout: i = "grid",
   itemButtonLabel: s = "View Details",
-  onItemClick: t,
-  customStyles: a = {},
+  onItemClick: a,
+  customStyles: t = {},
   // Default Colors
-  backgroundColor: f = "bg-gray-50",
-  darkBackgroundColor: i = "dark:bg-gray-900",
-  titleColor: u = "text-gray-900",
-  darkTitleColor: m = "dark:text-white"
+  backgroundColor: x = "bg-gray-50",
+  darkBackgroundColor: n = "dark:bg-gray-900",
+  titleColor: c = "text-gray-900",
+  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 f = i === "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 || ""}
+      ${x} ${n}
+      ${t.container || ""}
     `, children: /* @__PURE__ */ e.jsxs("div", { className: "max-w-7xl mx-auto", children: [
     o && /* @__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}
-              ${a.title || ""}
+              ${c} ${g}
+              ${t.title || ""}
             `, children: o }),
       /* @__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(
-      ue,
+    /* @__PURE__ */ e.jsx("div", { className: f, children: l.map((d) => /* @__PURE__ */ e.jsx(
+      fe,
       {
-        title: n.title,
-        description: n.description,
-        image: n.image,
-        tags: n.tags,
-        projectUrl: n.url,
-        orientation: d === "list" ? "horizontal" : "vertical",
+        title: d.title,
+        description: d.description,
+        image: d.image,
+        tags: d.tags,
+        projectUrl: d.url,
+        orientation: i === "list" ? "horizontal" : "vertical",
         actionLabel: s,
-        onViewProject: () => t == null ? void 0 : t(n.id)
+        onViewProject: () => a == null ? void 0 : a(d.id)
       },
-      n.id
+      d.id
     )) })
   ] }) });
-}, ge = ({
+}, be = ({
   copyrightOwner: o,
-  copyrightText: x = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
-  socialLinks: d,
+  copyrightText: l = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
+  socialLinks: i,
   secondaryLinks: s = [],
-  customStyles: t = {},
+  customStyles: a = {},
   // Default Colors
-  backgroundColor: a = "bg-gray-900",
-  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"
+  backgroundColor: t = "bg-gray-900",
+  darkBackgroundColor: x = "dark:bg-black",
+  borderColor: n = "border-gray-800",
+  darkBorderColor: c = "dark:border-gray-800",
+  textColor: g = "text-white",
+  darkTextColor: f = "dark:text-white",
+  linksColor: d = "text-gray-400",
+  linksHoverColor: m = "hover:text-white"
 }) => /* @__PURE__ */ e.jsx("footer", { className: `
       py-12 border-t transition-colors duration-300
-      ${a} ${f}
-      ${i} ${u}
-      ${t.container || ""}
+      ${t} ${x}
+      ${n} ${c}
+      ${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: "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.jsxs("div", { className: `text-center md:text-left ${a.text || ""}`, children: [
+    /* @__PURE__ */ e.jsx("p", { className: `text-lg font-bold ${g} ${f}`, children: o }),
+    /* @__PURE__ */ e.jsx("p", { className: `text-sm mt-1 ${d} opacity-80`, children: l })
   ] }),
-  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((u) => /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: b.href,
+      href: u.href,
       className: `
                                         text-sm transition-colors 
-                                        ${n} ${g}
-                                        ${t.link || ""}
+                                        ${d} ${m}
+                                        ${a.link || ""}
                                     `,
-      children: b.label
+      children: u.label
     },
-    b.label
+    u.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: i.map((u) => /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: b.url,
+      href: u.url,
       target: "_blank",
       rel: "noopener noreferrer",
       className: `
                                     transition-colors text-sm font-medium uppercase tracking-wider 
-                                    ${n} ${g}
-                                    ${t.link || ""}
+                                    ${d} ${m}
+                                    ${a.link || ""}
                                 `,
-      children: b.platform
+      children: u.platform
     },
-    b.platform
+    u.platform
   )) })
-] }) }) }), be = ({
+] }) }) }), pe = ({
   greeting: o = "Hello",
-  title: x,
-  subtitle: d,
+  title: l,
+  subtitle: i,
   imageUrl: s,
-  actions: t = [],
-  customStyles: a = {},
+  actions: a = [],
+  customStyles: t = {},
   // Default Colors
-  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"
+  backgroundColor: x = "bg-white",
+  darkBackgroundColor: n = "dark:bg-gray-900",
+  greetingColor: c = "text-blue-600",
+  darkGreetingColor: g = "dark:text-blue-400",
+  titleColor: f = "text-gray-900",
+  darkTitleColor: d = "dark:text-white",
+  subtitleColor: m = "text-gray-500",
+  darkSubtitleColor: u = "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", p = s ? "flex-1 text-center lg:text-left" : "w-full", v = 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: [
+      ${x} ${n}
+      ${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: h, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: `${p} ${t.content || ""}`, children: [
       o && /* @__PURE__ */ e.jsx("p", { className: `
                                 font-semibold tracking-wide uppercase text-sm mb-4
-                                ${u} ${m}
+                                ${c} ${g}
                             `, children: o }),
       /* @__PURE__ */ e.jsx("h1", { className: `
               text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 transition-colors
-              ${l} ${n}
-              ${a.title || ""}
-            `, children: x }),
+              ${f} ${d}
+              ${t.title || ""}
+            `, children: l }),
       /* @__PURE__ */ e.jsx("p", { className: `
               text-lg sm:text-xl mb-8 leading-relaxed transition-colors
-              ${g} ${b}
+              ${m} ${u}
               ${!s && "mx-auto max-w-2xl"}
-              ${a.subtitle || ""}
-            `, children: d }),
-      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,
+              ${t.subtitle || ""}
+            `, children: i }),
+      a.length > 0 && /* @__PURE__ */ e.jsx("div", { className: `flex flex-col sm:flex-row gap-4 ${v}`, children: a.map((N, k) => /* @__PURE__ */ e.jsx(
+        O,
         {
-          label: y.label,
-          variant: y.variant || "primary",
+          label: N.label,
+          variant: N.variant || "primary",
           size: "large",
-          onClick: y.onClick,
+          onClick: N.onClick,
           className: "w-full sm:w-auto"
         },
         k
@@ -757,7 +856,7 @@ const de = ({
     ] }),
     s && /* @__PURE__ */ e.jsx("div", { className: `
               flex-1 w-full max-w-md lg:max-w-full relative 
-              ${a.imageWrapper || ""}
+              ${t.imageWrapper || ""}
             `, children: /* @__PURE__ */ e.jsxs("div", { className: "relative rounded-2xl overflow-hidden shadow-2xl dark:shadow-none dark:border dark:border-gray-800 aspect-[4/3] group", children: [
       /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 bg-gray-900/5 dark:bg-black/20 group-hover:bg-transparent transition-colors duration-500" }),
       /* @__PURE__ */ e.jsx(
@@ -771,58 +870,75 @@ const de = ({
       )
     ] }) })
   ] }) }) });
-}, xe = ({
+}, ve = ({
   logo: o = "Marc.Dev",
-  isLogoImage: x = !1,
-  links: d,
+  isLogoImage: l = !1,
+  links: i,
   actions: s = [],
-  customStyles: t = {},
-  isOpen: a = !1,
-  isScrolled: f = !1,
-  onToggleMenu: i,
-  onLinkClick: u,
-  onLogoClick: m
+  customStyles: a = {},
+  isOpen: t = !1,
+  isScrolled: x = !1,
+  onToggleMenu: n,
+  onLinkClick: c,
+  onLogoClick: g,
+  enableLanguageToggle: f = !1,
+  language: d = "en",
+  onLanguageChange: m
 }) => /* @__PURE__ */ e.jsxs(
   "nav",
   {
     className: `
         fixed top-0 left-0 right-0 z-50 transition-all duration-300
 
-        ${f || a ? "bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-100 dark:border-gray-800" : "bg-transparent"}
-        ${t.container || ""}
+        ${x || t ? "bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-100 dark:border-gray-800" : "bg-transparent"}
+        ${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: "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 ${a.logo || ""}`, onClick: g, children: l ? /* @__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.jsxs("div", { className: "hidden md:flex space-x-8 items-center", children: [
-          d.map((l) => /* @__PURE__ */ e.jsx(
+          i.map((u) => /* @__PURE__ */ e.jsx(
             "a",
             {
-              href: l.href,
-              onClick: (n) => u == null ? void 0 : u(n, l.href),
+              href: u.href,
+              onClick: (h) => c == null ? void 0 : c(h, u.href),
               className: `
                   text-sm font-medium transition-colors 
                   hover:text-blue-600 dark:hover:text-blue-400
-                  ${l.active ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}
-                  ${t.link || ""}
+                  ${u.active ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}
+                  ${a.link || ""}
                 `,
-              children: l.label
+              children: u.label
             },
-            l.label
+            u.label
           )),
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700", children: [
-            /* @__PURE__ */ e.jsx(Z, {}),
-            s.map((l, n) => /* @__PURE__ */ e.jsx(M, { ...l, size: "small" }, n))
+            f && /* @__PURE__ */ e.jsx(
+              W,
+              {
+                initialLanguage: d,
+                onLanguageChange: m
+              }
+            ),
+            /* @__PURE__ */ e.jsx(z, {}),
+            s.map((u, h) => /* @__PURE__ */ e.jsx(O, { ...u, size: "small" }, h))
           ] })
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 md:hidden", children: [
-          /* @__PURE__ */ e.jsx(Z, {}),
+          f && /* @__PURE__ */ e.jsx(
+            W,
+            {
+              initialLanguage: d,
+              onLanguageChange: m
+            }
+          ),
+          /* @__PURE__ */ e.jsx(z, {}),
           /* @__PURE__ */ e.jsx(
             "button",
             {
-              onClick: i,
+              onClick: n,
               className: "p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none",
-              children: /* @__PURE__ */ e.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: a ? /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
+              children: /* @__PURE__ */ e.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: t ? /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
             }
           )
         ] })
@@ -834,119 +950,476 @@ const de = ({
           md:hidden absolute top-20 left-0 w-full 
           bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 
           shadow-xl transition-all duration-300 ease-in-out origin-top 
-          ${a ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0 h-0 overflow-hidden"}
-          ${t.mobileMenu || ""}
+          ${t ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0 h-0 overflow-hidden"}
+          ${a.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(
+            i.map((u) => /* @__PURE__ */ e.jsx(
               "a",
               {
-                href: l.href,
-                onClick: (n) => u == null ? void 0 : u(n, l.href),
+                href: u.href,
+                onClick: (h) => c == null ? void 0 : c(h, u.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
+                children: u.label
               },
-              l.label
+              u.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((u, h) => /* @__PURE__ */ e.jsx(O, { ...u, size: "medium", className: "w-full" }, h)) })
           ] })
         }
       )
     ]
   }
-), he = (o) => {
-  const [x, d] = z(!1), [s, t] = z(!1);
-  Q(() => {
-    let i = !1;
-    const u = () => {
-      i || (window.requestAnimationFrame(() => {
-        t(window.scrollY > 20), i = !1;
-      }), i = !0);
+), Ee = (o) => {
+  const [l, i] = C(!1), [s, a] = C(!1);
+  U(() => {
+    let n = !1;
+    const c = () => {
+      n || (window.requestAnimationFrame(() => {
+        a(window.scrollY > 20), n = !1;
+      }), n = !0);
     };
-    return window.addEventListener("scroll", u), () => window.removeEventListener("scroll", u);
+    return window.addEventListener("scroll", c), () => window.removeEventListener("scroll", c);
   }, []);
-  const a = (i, u) => {
-    i.preventDefault();
-    const m = document.querySelector(u);
-    m && (m.scrollIntoView({ behavior: "smooth" }), d(!1));
-  }, f = () => {
+  const t = (n, c) => {
+    n.preventDefault();
+    const g = document.querySelector(c);
+    g && (g.scrollIntoView({ behavior: "smooth" }), i(!1));
+  }, x = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
   return /* @__PURE__ */ e.jsx(
-    xe,
+    ve,
     {
       ...o,
-      isOpen: x,
+      isOpen: l,
       isScrolled: s,
-      onToggleMenu: () => d(!x),
-      onLinkClick: a,
-      onLogoClick: f
+      onToggleMenu: () => i(!l),
+      onLinkClick: t,
+      onLogoClick: x
     }
   );
-}, pe = ({
+}, je = ({
   title: o = "About Me",
-  avatarUrl: x,
-  bio: d,
+  avatarUrl: l,
+  bio: i,
   skillsTitle: s = "Tech Stack",
-  skills: t = [],
-  customStyles: a = {},
-  id: f,
+  skills: a = [],
+  customStyles: t = {},
+  id: x,
   // 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"
+  backgroundColor: n = "bg-white",
+  darkBackgroundColor: c = "dark:bg-gray-900",
+  borderColor: g = "border-gray-100",
+  darkBorderColor: f = "dark:border-gray-800",
+  titleColor: d = "text-gray-900",
+  darkTitleColor: m = "dark:text-white",
+  textColor: u = "text-gray-600",
+  darkTextColor: h = "dark:text-gray-300"
 }) => /* @__PURE__ */ e.jsx(
   "section",
   {
-    id: f,
+    id: x,
     className: `
         py-20 transition-colors duration-300
         border-y 
-        ${i} ${u}
-        ${m} ${l}
-        ${a.container || ""}
+        ${n} ${c}
+        ${g} ${f}
+        ${t.container || ""}
       `,
-    children: /* @__PURE__ */ e.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${a.contentWrapper || ""}`, children: [
+    children: /* @__PURE__ */ e.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${t.contentWrapper || ""}`, children: [
       o && /* @__PURE__ */ e.jsxs("div", { className: "text-center mb-12", children: [
         /* @__PURE__ */ e.jsx("h2", { className: `
               text-3xl font-bold transition-colors
-              ${n} ${g}
-              ${a.title || ""}
+              ${d} ${m}
+              ${t.title || ""}
             `, children: o }),
         /* @__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 }),
-          t.length > 0 && /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(ue, { src: l, size: "xl" }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: `text-lg leading-relaxed ${u} ${h} ${t.textWrapper || ""}`, children: [
+          /* @__PURE__ */ e.jsx("p", { className: `mb-8 whitespace-pre-line ${t.bio || ""}`, children: i }),
+          a.length > 0 && /* @__PURE__ */ e.jsxs("div", { children: [
             s && /* @__PURE__ */ e.jsx("h3", { className: `
                     text-sm font-bold uppercase tracking-wide mb-3
-                    ${n} ${g}
-                    ${a.skillsTitle || ""}
+                    ${d} ${m}
+                    ${t.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: a.map((p) => /* @__PURE__ */ e.jsx(te, { label: p, variant: "secondary" }, p)) })
           ] })
         ] })
       ] })
     ] })
   }
-);
+), we = ({
+  logo: o = "Marc.Dev",
+  isLogoImage: l = !1,
+  links: i,
+  actions: s = [],
+  customStyles: a = {},
+  isOpen: t = !1,
+  onToggleMenu: x,
+  onLinkClick: n,
+  onLogoClick: c,
+  enableLanguageToggle: g = !1,
+  language: f = "en",
+  onLanguageChange: d,
+  // Default Colors
+  backgroundColor: m = "bg-white",
+  darkBackgroundColor: u = "dark:bg-gray-900",
+  borderColor: h = "border-gray-100",
+  darkBorderColor: p = "dark:border-gray-800",
+  textColor: v = "text-gray-900",
+  darkTextColor: N = "dark:text-white",
+  activeLinkColor: k = "text-blue-600",
+  darkActiveLinkColor: R = "dark:text-blue-400",
+  hoverLinkColor: T = "hover:text-blue-600",
+  darkHoverLinkColor: _ = "dark:hover:text-blue-400"
+}) => /* @__PURE__ */ e.jsxs(
+  "nav",
+  {
+    className: `
+        w-full border-b transition-colors duration-300
+        ${m} ${u}
+        ${h} ${p}
+        ${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: "flex justify-between items-center h-20", children: [
+        /* @__PURE__ */ e.jsx("div", { className: `flex-shrink-0 cursor-pointer flex items-center ${a.logo || ""}`, onClick: c, children: l ? /* @__PURE__ */ e.jsx("img", { src: o, alt: "Logo", className: "h-8 w-auto" }) : /* @__PURE__ */ e.jsx("span", { className: `
+                                text-2xl font-bold tracking-tighter transition-colors
+                                ${v} ${N}
+                                ${T} ${_}
+                            `, children: o }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "hidden md:flex space-x-8 items-center", children: [
+          i.map((w) => /* @__PURE__ */ e.jsx(
+            "a",
+            {
+              href: w.href,
+              onClick: (E) => n == null ? void 0 : n(E, w.href),
+              className: `
+                  text-sm font-medium transition-colors 
+                  ${w.active ? `${k} ${R}` : "text-gray-600 dark:text-gray-300"}
+                  ${T} ${_}
+                  ${a.link || ""}
+                `,
+              children: w.label
+            },
+            w.label
+          )),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700", children: [
+            g && /* @__PURE__ */ e.jsx(
+              W,
+              {
+                initialLanguage: f,
+                onLanguageChange: d
+              }
+            ),
+            /* @__PURE__ */ e.jsx(z, {}),
+            s.map((w, E) => /* @__PURE__ */ e.jsx(O, { ...w, size: "small" }, E))
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 md:hidden", children: [
+          g && /* @__PURE__ */ e.jsx(
+            W,
+            {
+              initialLanguage: f,
+              onLanguageChange: d
+            }
+          ),
+          /* @__PURE__ */ e.jsx(z, {}),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              onClick: x,
+              className: "p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none",
+              children: /* @__PURE__ */ e.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: t ? /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: `
+          md:hidden
+          border-b border-gray-100 dark:border-gray-800 
+          transition-all duration-300 ease-in-out
+          ${m} ${u}
+          ${t ? "opacity-100 max-h-screen py-4" : "opacity-0 max-h-0 overflow-hidden"}
+          ${a.mobileMenu || ""}
+        `,
+          children: /* @__PURE__ */ e.jsxs("div", { className: "px-6 space-y-4 flex flex-col items-center", children: [
+            i.map((w) => /* @__PURE__ */ e.jsx(
+              "a",
+              {
+                href: w.href,
+                onClick: (E) => n == null ? void 0 : n(E, w.href),
+                className: `
+                                block text-lg font-medium transition-colors
+                                text-gray-800 dark:text-gray-200 
+                                ${T} ${_}
+                            `,
+                children: w.label
+              },
+              w.label
+            )),
+            s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: s.map((w, E) => /* @__PURE__ */ e.jsx(O, { ...w, size: "medium", className: "w-full" }, E)) })
+          ] })
+        }
+      )
+    ]
+  }
+), $e = [
+  {
+    id: "1",
+    title: "E-commerce Dashboard",
+    description: "Complete admin dashboard with real-time metrics and dark mode.",
+    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80",
+    tags: ["React", "TypeScript", "Tailwind"],
+    url: "https://google.com"
+  },
+  {
+    id: "2",
+    title: "Task App",
+    description: "Kanban-style productivity app.",
+    image: "https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?auto=format&fit=crop&w=800&q=80",
+    tags: ["Next.js", "Supabase"],
+    url: "#"
+  },
+  {
+    id: "3",
+    title: "Landing Page",
+    description: "High-performance corporate website.",
+    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80",
+    tags: ["Astro", "CSS"],
+    url: "#"
+  }
+], Te = ({
+  enableLanguageToggle: o = !1,
+  language: l = "en",
+  onLanguageChange: i,
+  items: s = $e,
+  text: a = {
+    navbar: { contact: "Contact" },
+    hero: {
+      greeting: "Hi, I'm Marc",
+      title: "I transform ideas into digital experiences.",
+      subtitle: "Full Stack Developer passionate about clean code and scalable architecture.",
+      viewProjects: "View Projects",
+      downloadCv: "Download CV"
+    },
+    about: {
+      title: "About Me",
+      bio: `Hi, I'm Marc. I've been passionately developing software for several years. 
+          I specialize in the JavaScript/TypeScript ecosystem, building applications that only work well but feel good to use.`,
+      skillsTitle: "Tech Stack"
+    },
+    projects: { title: "Featured Projects", viewCaseStudy: "View Case Study" },
+    footer: { legalNotice: "Legal Notice" }
+  }
+}) => {
+  const t = () => {
+    const n = document.createElement("a"), c = "/design-system/", g = c.endsWith("/") ? c + "cv.pdf" : c + "/cv.pdf";
+    n.href = g, n.download = "Marc_Iniguez_CV.pdf", document.body.appendChild(n), n.click(), document.body.removeChild(n);
+  }, x = () => {
+    const g = `https://mail.google.com/mail/?view=cm&fs=1&to=marc@example.com&su=${encodeURIComponent("Hi Marc, I saw your portfolio")}`;
+    window.open(g, "_blank");
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900 min-h-screen font-sans transition-colors duration-300", children: [
+    /* @__PURE__ */ e.jsx(
+      we,
+      {
+        logo: "Marc.Dev",
+        links: [],
+        actions: [
+          {
+            label: a.navbar.contact,
+            onClick: x,
+            variant: "primary"
+          }
+        ],
+        enableLanguageToggle: o,
+        language: l,
+        onLanguageChange: i
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("main", { children: [
+      /* @__PURE__ */ e.jsx("div", { id: "home", children: /* @__PURE__ */ e.jsx(
+        pe,
+        {
+          greeting: a.hero.greeting,
+          title: a.hero.title,
+          subtitle: a.hero.subtitle,
+          actions: [
+            {
+              label: a.hero.viewProjects,
+              variant: "primary",
+              onClick: () => {
+                var n;
+                return (n = document.getElementById("projects")) == null ? void 0 : n.scrollIntoView({ behavior: "smooth" });
+              }
+            },
+            {
+              label: a.hero.downloadCv,
+              variant: "secondary",
+              onClick: t
+              // 👈 Connected here
+            }
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(
+        je,
+        {
+          id: "about",
+          title: a.about.title,
+          avatarUrl: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?fit=crop&w=300&h=300",
+          bio: a.about.bio,
+          skillsTitle: a.about.skillsTitle,
+          skills: ["React", "TypeScript", "Tailwind CSS", "Node.js", "Git", "Docker", "Storybook"]
+        }
+      ),
+      /* @__PURE__ */ e.jsx("div", { id: "projects", children: /* @__PURE__ */ e.jsx(
+        he,
+        {
+          title: a.projects.title,
+          items: s,
+          layout: "grid",
+          itemButtonLabel: a.projects.viewCaseStudy
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      be,
+      {
+        copyrightOwner: "Marc Iñiguez",
+        socialLinks: [{ platform: "GitHub", url: "#" }],
+        secondaryLinks: [{ label: a.footer.legalNotice, href: "#" }]
+      }
+    )
+  ] });
+}, _e = ({
+  leftContent: o,
+  rightContent: l,
+  initialLeftWidth: i = 30,
+  minWidth: s = 20,
+  className: a = "",
+  customStyles: t = {}
+}) => {
+  const [x, n] = I.useState(i), [c, g] = I.useState(!1), f = I.useRef(null), d = (m) => {
+    m.preventDefault(), g(!0);
+  };
+  return I.useEffect(() => {
+    const m = (h) => {
+      if (!c || !f.current) return;
+      const p = f.current.getBoundingClientRect(), v = (h.clientX - p.left) / p.width * 100;
+      v >= s && v <= 100 - s && n(v);
+    }, u = () => {
+      g(!1);
+    };
+    return c && (document.addEventListener("mousemove", m), document.addEventListener("mouseup", u)), () => {
+      document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", u);
+    };
+  }, [c, s]), /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: f,
+      className: `flex h-full w-full overflow-hidden ${a} ${t.container || ""}`,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            style: { width: `${x}%` },
+            className: `h-full overflow-auto ${t.leftPanel || ""}`,
+            children: o
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: `w-1 cursor-col-resize bg-gray-200 hover:bg-blue-500 active:bg-blue-600 transition-colors z-10 flex flex-col justify-center items-center ${t.resizer || ""}`,
+            onMouseDown: d,
+            children: /* @__PURE__ */ e.jsx("div", { className: "h-8 w-1 bg-gray-400 rounded-full mx-auto" })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            style: { width: `${100 - x}%` },
+            className: `h-full overflow-auto bg-gray-50 dark:bg-gray-900 ${t.rightPanel || ""}`,
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}, Re = ({
+  rows: o,
+  cols: l,
+  renderCell: i,
+  onCellClick: s,
+  onCellMouseEnter: a,
+  onCellMouseDown: t,
+  onCellMouseUp: x,
+  className: n = "",
+  gap: c = 1
+}) => {
+  const g = ie(null), [f, d] = C(!1), m = (h, p, v) => {
+    h.preventDefault(), d(!0), t == null || t(p, v), s == null || s(p, v);
+  }, u = (h, p) => {
+    f && (a == null || a(h, p));
+  };
+  return U(() => {
+    const h = () => {
+      f && (d(!1), x == null || x(-1, -1));
+    };
+    return window.addEventListener("mouseup", h), () => window.removeEventListener("mouseup", h);
+  }, [f, x]), /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      ref: g,
+      className: `grid select-none ${n}`,
+      style: {
+        display: "grid",
+        gridTemplateRows: `repeat(${o}, 1fr)`,
+        gridTemplateColumns: `repeat(${l}, 1fr)`,
+        gap: `${c}px`,
+        width: "100%",
+        height: "100%"
+      },
+      onMouseLeave: () => f && d(!1),
+      children: Array.from({ length: o }).map(
+        (h, p) => Array.from({ length: l }).map((v, N) => /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            onMouseDown: (k) => m(k, p, N),
+            onMouseEnter: () => u(p, N),
+            children: i(p, N)
+          },
+          `${p}-${N}`
+        ))
+      )
+    }
+  );
+};
 export {
-  ie as Avatar,
-  K as Badge,
-  M as Button,
-  me as ContentGrid,
-  ge as Footer,
-  be as Hero,
-  ce as Input,
-  he as Navbar,
-  pe as ProfileSection,
-  ue as ProjectCard,
-  Z as ThemeToggle
+  ue as Avatar,
+  te as Badge,
+  O as Button,
+  he as ContentGrid,
+  ke as ControlPanel,
+  be as Footer,
+  pe as Hero,
+  xe as Input,
+  Re as InteractiveGrid,
+  W as LanguageToggle,
+  Ee as Navbar,
+  Te as PortfolioPage,
+  je as ProfileSection,
+  fe as ProjectCard,
+  Ne as Slider,
+  _e as SplitLayout,
+  z as ThemeToggle
 };