@iniguezmarc/design-system 0.0.5 → 0.0.7

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import se, { forwardRef as ne, useState as I, useEffect as Q } from "react";
+import se, { forwardRef as ne, useState as z, useEffect as Q } from "react";
 var W = { exports: {} }, A = {};
 /**
  * @license React
@@ -13,23 +13,23 @@ var X;
 function oe() {
   if (X) return A;
   X = 1;
-  var o = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
-  function i(n, a, t) {
-    var u = null;
-    if (t !== void 0 && (u = "" + t), a.key !== void 0 && (u = "" + a.key), "key" in a) {
-      t = {};
-      for (var s in a)
-        s !== "key" && (t[s] = a[s]);
-    } else t = a;
-    return a = t.ref, {
+  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, {
       $$typeof: o,
-      type: n,
-      key: u,
-      ref: a !== void 0 ? a : null,
-      props: t
+      type: s,
+      key: f,
+      ref: t !== void 0 ? t : null,
+      props: a
     };
   }
-  return A.Fragment = c, A.jsx = i, A.jsxs = i, A;
+  return A.Fragment = x, A.jsx = d, A.jsxs = d, A;
 }
 var O = {};
 /**
@@ -52,9 +52,9 @@ function le() {
       switch (r) {
         case w:
           return "Fragment";
-        case N:
+        case k:
           return "Profiler";
-        case $:
+        case y:
           return "StrictMode";
         case R:
           return "Suspense";
@@ -67,100 +67,100 @@ function le() {
         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 y:
+          case j:
             return "Portal";
           case _:
             return r.displayName || "Context";
           case E:
             return (r._context.displayName || "Context") + ".Consumer";
           case T:
-            var l = r.render;
-            return r = r.displayName, r || (r = l.displayName || l.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
+            var c = r.render;
+            return r = r.displayName, r || (r = c.displayName || c.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
           case C:
-            return l = r.displayName || null, l !== null ? l : o(r.type) || "Memo";
+            return c = r.displayName || null, c !== null ? c : o(r.type) || "Memo";
           case D:
-            l = r._payload, r = r._init;
+            c = r._payload, r = r._init;
             try {
-              return o(r(l));
+              return o(r(c));
             } catch {
             }
         }
       return null;
     }
-    function c(r) {
+    function x(r) {
       return "" + r;
     }
-    function i(r) {
+    function d(r) {
       try {
-        c(r);
-        var l = !1;
+        x(r);
+        var c = !1;
       } catch {
-        l = !0;
+        c = !0;
       }
-      if (l) {
-        l = console;
-        var g = l.error, b = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
-        return g.call(
-          l,
+      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,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          b
-        ), c(r);
+          p
+        ), x(r);
       }
     }
-    function n(r) {
+    function s(r) {
       if (r === w) return "<>";
       if (typeof r == "object" && r !== null && r.$$typeof === D)
         return "<...>";
       try {
-        var l = o(r);
-        return l ? "<" + l + ">" : "<...>";
+        var c = o(r);
+        return c ? "<" + c + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function a() {
+    function t() {
       var r = L.A;
       return r === null ? null : r.getOwner();
     }
-    function t() {
+    function a() {
       return Error("react-stack-top-frame");
     }
-    function u(r) {
+    function f(r) {
       if (F.call(r, "key")) {
-        var l = Object.getOwnPropertyDescriptor(r, "key").get;
-        if (l && l.isReactWarning) return !1;
+        var c = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (c && c.isReactWarning) return !1;
       }
       return r.key !== void 0;
     }
-    function s(r, l) {
-      function g() {
+    function i(r, c) {
+      function h() {
         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)",
-          l
+          c
         ));
       }
-      g.isReactWarning = !0, Object.defineProperty(r, "key", {
-        get: g,
+      h.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: h,
         configurable: !0
       });
     }
-    function x() {
+    function u() {
       var r = o(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 f(r, l, g, b, S, Y) {
-      var h = g.ref;
+    function m(r, c, h, p, S, Y) {
+      var v = h.ref;
       return r = {
-        $$typeof: j,
+        $$typeof: $,
         type: r,
-        key: l,
-        props: g,
-        _owner: b
-      }, (h !== void 0 ? h : null) !== null ? Object.defineProperty(r, "ref", {
+        key: c,
+        props: h,
+        _owner: p
+      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
-        get: x
+        get: u
       }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -183,91 +183,91 @@ function le() {
         value: Y
       }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function d(r, l, g, b, S, Y) {
-      var h = l.children;
-      if (h !== void 0)
-        if (b)
-          if (te(h)) {
-            for (b = 0; b < h.length; b++)
-              m(h[b]);
-            Object.freeze && Object.freeze(h);
+    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);
           } 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 m(h);
-      if (F.call(l, "key")) {
-        h = o(r);
-        var k = Object.keys(l).filter(function(ae) {
+        else n(v);
+      if (F.call(c, "key")) {
+        v = o(r);
+        var N = Object.keys(c).filter(function(ae) {
           return ae !== "key";
         });
-        b = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", q[h + b] || (k = 0 < k.length ? "{" + k.join(": ..., ") + ": ...}" : "{}", console.error(
+        p = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", q[v + p] || (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} />`,
-          b,
-          h,
-          k,
-          h
-        ), q[h + b] = !0);
+          p,
+          v,
+          N,
+          v
+        ), q[v + p] = !0);
       }
-      if (h = null, g !== void 0 && (i(g), h = "" + g), u(l) && (i(l.key), h = "" + l.key), "key" in l) {
-        g = {};
-        for (var z in l)
-          z !== "key" && (g[z] = l[z]);
-      } else g = l;
-      return h && s(
-        g,
+      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,
         typeof r == "function" ? r.displayName || r.name || "Unknown" : r
-      ), f(
+      ), m(
         r,
+        v,
         h,
-        g,
-        a(),
+        t(),
         S,
         Y
       );
     }
-    function m(r) {
-      p(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === D && (r._payload.status === "fulfilled" ? p(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
+    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 p(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === j;
+    function g(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === $;
     }
-    var v = se, j = Symbol.for("react.transitional.element"), y = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), N = 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 = v.__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 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() {
       return null;
     };
-    v = {
+    b = {
       react_stack_bottom_frame: function(r) {
         return r();
       }
     };
-    var V, H = {}, G = v.react_stack_bottom_frame.bind(
-      v,
-      t
-    )(), U = B(n(t)), q = {};
-    O.Fragment = w, O.jsx = function(r, l, g) {
-      var b = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return d(
+    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(
         r,
-        l,
-        g,
+        c,
+        h,
         !1,
-        b ? Error("react-stack-top-frame") : G,
-        b ? B(n(r)) : U
+        p ? Error("react-stack-top-frame") : G,
+        p ? B(s(r)) : U
       );
-    }, O.jsxs = function(r, l, g) {
-      var b = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return d(
+    }, O.jsxs = function(r, c, h) {
+      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return l(
         r,
-        l,
-        g,
+        c,
+        h,
         !0,
-        b ? Error("react-stack-top-frame") : G,
-        b ? B(n(r)) : U
+        p ? Error("react-stack-top-frame") : G,
+        p ? B(s(r)) : U
       );
     };
   }()), O;
@@ -276,116 +276,116 @@ process.env.NODE_ENV === "production" ? W.exports = oe() : W.exports = le();
 var e = W.exports;
 const ie = ({
   src: o,
-  alt: c = "Avatar",
-  size: i = "md",
-  imageFit: n = "cover",
-  customStyles: a = {},
-  className: t = "",
-  borderColor: u = "border-gray-200",
-  darkBorderColor: s = "dark:border-gray-700",
-  backgroundColor: x = "bg-gray-100",
-  darkBackgroundColor: f = "dark:bg-gray-800",
-  loading: d = "lazy"
+  alt: x = "Avatar",
+  size: d = "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"
 }) => {
-  const m = {
+  const n = {
     sm: "h-8 w-8",
     md: "h-12 w-12",
     lg: "h-16 w-16",
     xl: "h-32 w-32"
-  }, p = n === "contain" ? "object-contain" : "object-cover", v = `border ${u} ${s}`, j = `${x} ${f}`;
+  }, g = s === "contain" ? "object-contain" : "object-cover", b = `border ${f} ${i}`, $ = `${u} ${m}`;
   return /* @__PURE__ */ e.jsx("div", { className: `
             ds-avatar relative rounded-full overflow-hidden flex-shrink-0
-            ${m[i]}
-            ${j}
-            ${v}
-            ${a.container || ""}
-            ${t}
+            ${n[d]}
+            ${$}
+            ${b}
+            ${t.container || ""}
+            ${a}
         `, children: /* @__PURE__ */ e.jsx(
     "img",
     {
       src: o,
-      alt: c,
-      loading: d,
+      alt: x,
+      loading: l,
       decoding: "async",
       className: `
                     w-full h-full 
-                    ${p}
-                    ${a.image || ""}
+                    ${g}
+                    ${t.image || ""}
                 `
     }
   ) });
 }, K = ({
   label: o,
-  variant: c = "primary",
-  customStyles: i = {},
-  className: n = "",
-  endIcon: a,
+  variant: x = "primary",
+  customStyles: d = {},
+  className: s = "",
+  endIcon: t,
   // Default Colors
-  primaryColor: t = "bg-blue-100 text-blue-800",
-  darkPrimaryColor: u = "dark:bg-blue-900/50 dark:text-blue-200",
-  secondaryColor: s = "bg-gray-100 text-gray-800",
-  darkSecondaryColor: x = "dark:bg-gray-700 dark:text-gray-300",
-  outlineColor: f = "border border-gray-300 text-gray-600 bg-transparent",
-  darkOutlineColor: d = "dark:border-gray-600 dark:text-gray-400",
-  successColor: m = "bg-green-100 text-green-800",
-  darkSuccessColor: p = "dark:bg-green-900/50 dark:text-green-200"
+  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"
 }) => {
-  const v = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1", j = {
-    primary: `${t} ${u}`,
-    secondary: `${s} ${x}`,
-    outline: `${f} ${d}`,
-    success: `${m} ${p}`
+  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}`
   };
   return /* @__PURE__ */ e.jsxs("span", { className: `
             ds-badge
-            ${v} 
-            ${j[c]}
-            ${i.container || ""}
-            ${n}
+            ${b} 
+            ${$[x]}
+            ${d.container || ""}
+            ${s}
         `, children: [
-    /* @__PURE__ */ e.jsx("span", { className: i.label || "", children: o }),
-    a && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: a })
+    /* @__PURE__ */ e.jsx("span", { className: d.label || "", children: o }),
+    t && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: t })
   ] });
 }, M = ({
   label: o,
-  variant: c = "primary",
-  size: i = "medium",
-  onClick: n,
-  className: a = "",
-  customStyles: t = {},
-  href: u,
-  target: s,
+  variant: x = "primary",
+  size: d = "medium",
+  onClick: s,
+  className: t = "",
+  customStyles: a = {},
+  href: f,
+  target: i,
   // Default Colors
-  primaryColor: x = "bg-blue-600",
-  primaryHoverColor: f = "hover:bg-blue-700",
-  darkPrimaryColor: d = "dark:bg-blue-600",
-  darkPrimaryHoverColor: m = "dark:hover:bg-blue-500",
-  secondaryColor: p = "bg-gray-100",
-  secondaryHoverColor: v = "hover:bg-gray-200",
-  darkSecondaryColor: j = "dark:bg-gray-800",
-  darkSecondaryHoverColor: y = "dark:hover:bg-gray-700",
+  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: $ = "hover:bg-blue-50",
-  darkOutlineColor: N = "dark:text-blue-400 dark:border-blue-400",
+  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: `${x} text-white ${f} focus:ring-blue-500 border-2 border-transparent ${d} ${m}`,
-    secondary: `${p} text-gray-800 ${v} focus:ring-gray-500 border-2 border-transparent ${j} dark:text-gray-100 ${y}`,
-    outline: `bg-transparent ${w} border-2 ${$} focus:ring-blue-500 ${N} ${E}`
+    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 = {
     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[c]} ${R[i]} ${t.container || ""} ${a}`, C = /* @__PURE__ */ e.jsx("span", { className: `relative z-10 flex items-center justify-center gap-2 ${t.label || ""}`, children: o });
-  return u ? /* @__PURE__ */ e.jsx(
+  }, 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(
     "a",
     {
-      href: u,
+      href: f,
       className: P,
-      target: s,
-      rel: s === "_blank" ? "noopener noreferrer" : void 0,
-      onClick: n,
+      target: i,
+      rel: i === "_blank" ? "noopener noreferrer" : void 0,
+      onClick: s,
       children: C
     }
   ) : /* @__PURE__ */ e.jsx(
@@ -393,45 +393,45 @@ const ie = ({
     {
       type: "button",
       className: P,
-      onClick: n,
+      onClick: s,
       children: C
     }
   );
 }, ce = ne(({
   label: o,
-  error: c,
-  className: i,
-  customStyles: n = {},
-  startIcon: a,
-  endIcon: t,
+  error: x,
+  className: d,
+  customStyles: s = {},
+  startIcon: t,
+  endIcon: a,
   // Default Colors
-  labelColor: u = "text-gray-700",
-  darkLabelColor: s = "dark:text-gray-200",
-  inputBgColor: x = "bg-white",
-  darkInputBgColor: f = "dark:bg-gray-800",
-  inputBorderColor: d = "border-gray-300",
-  darkInputBorderColor: m = "dark:border-gray-600",
-  inputTextColor: p = "text-gray-900",
-  darkInputTextColor: v = "dark:text-white",
-  focusRingColor: j = "focus:ring-blue-500",
-  errorBorderColor: y = "border-red-500",
+  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: $ = "text-red-500",
-  darkErrorTextColor: N = "dark:text-red-400",
+  errorTextColor: y = "text-red-500",
+  darkErrorTextColor: k = "dark:text-red-400",
   ...E
 }, _) => {
   const T = `
         w-full py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-all
-        ${a ? "pl-10" : "px-3"} 
-        ${t ? "pr-10" : "px-3"}
-        ${x} ${f}
-        ${p} ${v}
-        ${j}
-    `, R = c ? `${y} focus:ring-red-500 ${w}` : `${d} ${m}`;
-  return /* @__PURE__ */ e.jsxs("div", { className: `w-full ${n.container || ""} ${i}`, children: [
-    o && /* @__PURE__ */ e.jsx("label", { className: `block text-sm font-medium ${u} ${s} mb-1 ${n.label || ""}`, children: o }),
+        ${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 }),
     /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
-      a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${n.iconContainer || ""}`, children: a }),
+      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(
         "input",
         {
@@ -439,89 +439,100 @@ const ie = ({
           className: `
                         ${T}
                         ${R}
-                        ${n.input || ""}
+                        ${s.input || ""}
                     `,
           ...E
         }
       ),
-      t && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${n.iconContainer || ""}`, children: t })
+      a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${s.iconContainer || ""}`, children: a })
     ] }),
-    c && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${$} ${N} ${n.error || ""}`, children: c })
+    x && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${y} ${k} ${s.error || ""}`, children: x })
   ] });
 });
 ce.displayName = "BasicInput";
 const de = ({
-  isDark: o,
-  onToggle: c,
-  iconSun: i,
-  iconMoon: n,
-  sunImage: a,
-  moonImage: t,
-  imageFit: u = "contain",
-  customStyles: s = {},
-  className: x = "",
-  title: f
+  isToggled: o,
+  onToggle: x,
+  iconOn: d,
+  iconOff: s,
+  imageOn: t,
+  imageOff: a,
+  imageFit: f = "contain",
+  customStyles: i = {},
+  className: u = "",
+  title: m
 }) => {
-  const d = `w-6 h-6 ${s.icon || ""}`, m = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: d, 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" }) }), p = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: d, 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" }) }), v = () => {
-    const j = u === "contain" ? "object-contain" : "object-cover";
-    return o ? a ? /* @__PURE__ */ e.jsx("img", { src: a, alt: "Light Mode", className: `${d} ${j}` }) : i || m : t ? /* @__PURE__ */ e.jsx("img", { src: t, alt: "Dark Mode", className: `${d} ${j}` }) : n || p;
+  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;
   };
   return /* @__PURE__ */ e.jsx(
     "button",
     {
-      onClick: c,
-      title: f || (o ? "Switch to light mode" : "Switch to dark mode"),
+      onClick: x,
+      title: m,
       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-700 text-yellow-300 hover:bg-gray-600" : "bg-gray-200 text-gray-600 hover:bg-gray-300"}
-                ${s.container || ""}
-                ${x}
+                ${o ? "bg-gray-800 text-white hover:bg-gray-700" : "bg-gray-200 text-gray-800 hover:bg-gray-300"}
+                ${i.container || ""}
+                ${u}
             `,
-      children: v()
+      children: n()
     }
   );
 }, Z = ({
   isDark: o,
-  onToggle: c,
+  onToggle: x,
+  iconSun: d,
+  iconMoon: s,
+  sunImage: t,
+  moonImage: a,
+  customStyles: f = {},
   ...i
 }) => {
-  const [n, a] = I(!1);
+  const [u, m] = z(!1);
   Q(() => {
-    const s = () => {
-      const f = document.documentElement.classList.contains("dark");
-      a(f);
+    const j = () => {
+      const y = document.documentElement.classList.contains("dark");
+      m(y);
     };
-    s();
-    const x = new MutationObserver(s);
-    return x.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => x.disconnect();
+    j();
+    const w = new MutationObserver(j);
+    return w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => w.disconnect();
   }, []);
-  const t = () => {
-    const s = document.documentElement;
-    s.classList.contains("dark") ? (s.classList.remove("dark"), localStorage.setItem("theme", "light")) : (s.classList.add("dark"), localStorage.setItem("theme", "dark")), c && c();
-  }, u = o !== void 0 ? o : n;
+  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" }) });
   return /* @__PURE__ */ e.jsx(
     de,
     {
       ...i,
-      isDark: u,
-      onToggle: t
+      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")
     }
   );
 }, ue = ({
   title: o,
-  description: c,
-  image: i,
-  tags: n = [],
-  orientation: a = "vertical",
-  actionLabel: t = "View Project",
-  projectUrl: u,
-  linkTarget: s = "_self",
-  onViewProject: x,
-  customStyles: f = {},
-  className: d = ""
+  description: x,
+  image: d,
+  tags: s = [],
+  orientation: t = "vertical",
+  actionLabel: a = "View Project",
+  projectUrl: f,
+  linkTarget: i = "_self",
+  onViewProject: u,
+  customStyles: m = {},
+  className: l = ""
 }) => {
-  const m = a === "horizontal";
+  const n = t === "horizontal";
   return /* @__PURE__ */ e.jsxs("div", { className: `
       /* 1. IDENTIFIER CLASS */
       ds-card
@@ -529,7 +540,7 @@ const de = ({
       /* 2. BASE STRUCTURE */
       group w-full rounded-xl overflow-hidden border transition-all duration-300
       /* Switch layout based on orientation prop */
-      ${m ? "flex flex-col md:flex-row" : "flex flex-col"}
+      ${n ? "flex flex-col md:flex-row" : "flex flex-col"}
       
       /* 3. LIGHT MODE (Default) */
       /* White background, gray border, black shadow on hover */
@@ -553,18 +564,18 @@ const de = ({
       dark:hover:!shadow-[0_20px_25px_-5px_rgba(255,255,255,0.30)]
       
       /* 5. EXTERNAL INJECTIONS */
-      ${f.container || ""} 
-      ${d}
+      ${m.container || ""} 
+      ${l}
     `, children: [
     /* @__PURE__ */ e.jsxs("div", { className: `
         ds-card-image overflow-hidden relative
-        ${m ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"} 
-        ${f.imageWrapper || ""} 
+        ${n ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"} 
+        ${m.imageWrapper || ""} 
       `, children: [
       /* @__PURE__ */ e.jsx(
         "img",
         {
-          src: i,
+          src: d,
           alt: o,
           loading: "lazy",
           decoding: "async",
@@ -573,25 +584,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 ${f.content || ""}`, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: `ds-card-content p-6 flex flex-col justify-between flex-1 ${m.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
-            ${f.title || ""}
+            ${m.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
-            ${f.description || ""}
-          `, children: c }),
-        /* @__PURE__ */ e.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${f.tagsContainer || ""}`, children: n.map((p) => /* @__PURE__ */ e.jsx(K, { label: p, variant: "secondary" }, p)) })
+            ${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)) })
       ] }),
       /* @__PURE__ */ e.jsx("div", { className: "ds-card-actions flex justify-start mt-auto", children: /* @__PURE__ */ e.jsx(
         M,
         {
-          label: t,
-          onClick: x,
-          href: u,
-          target: s,
+          label: a,
+          onClick: u,
+          href: f,
+          target: i,
           size: "medium",
           variant: "primary"
         }
@@ -600,127 +611,159 @@ const de = ({
   ] });
 }, me = ({
   title: o = "Featured Content",
-  items: c,
-  layout: i = "grid",
-  itemButtonLabel: n = "View Details",
-  onItemClick: a,
-  customStyles: t = {}
+  items: x,
+  layout: d = "grid",
+  itemButtonLabel: s = "View Details",
+  onItemClick: t,
+  customStyles: a = {},
+  // Default Colors
+  backgroundColor: f = "bg-gray-50",
+  darkBackgroundColor: i = "dark:bg-gray-900",
+  titleColor: u = "text-gray-900",
+  darkTitleColor: m = "dark:text-white"
 }) => {
-  const u = 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";
+  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";
   return /* @__PURE__ */ e.jsx("section", { className: `
       py-16 px-4 transition-colors duration-300
-      bg-gray-50 dark:bg-gray-900
-      ${t.container || ""}
+      ${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: [
       /* @__PURE__ */ e.jsx("h2", { className: `
               text-4xl font-extrabold mb-4 tracking-tight transition-colors
-              text-gray-900 dark:text-white
-              ${t.title || ""}
+              ${u} ${m}
+              ${a.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: u, children: c.map((s) => /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx("div", { className: l, children: x.map((n) => /* @__PURE__ */ e.jsx(
       ue,
       {
-        title: s.title,
-        description: s.description,
-        image: s.image,
-        tags: s.tags,
-        projectUrl: s.url,
-        orientation: i === "list" ? "horizontal" : "vertical",
-        actionLabel: n,
-        onViewProject: () => a == null ? void 0 : a(s.id)
+        title: n.title,
+        description: n.description,
+        image: n.image,
+        tags: n.tags,
+        projectUrl: n.url,
+        orientation: d === "list" ? "horizontal" : "vertical",
+        actionLabel: s,
+        onViewProject: () => t == null ? void 0 : t(n.id)
       },
-      s.id
+      n.id
     )) })
   ] }) });
 }, ge = ({
   copyrightOwner: o,
-  copyrightText: c = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
-  socialLinks: i,
-  secondaryLinks: n = [],
-  customStyles: a = {}
+  copyrightText: x = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
+  socialLinks: d,
+  secondaryLinks: s = [],
+  customStyles: t = {},
+  // 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"
 }) => /* @__PURE__ */ e.jsx("footer", { className: `
       py-12 border-t transition-colors duration-300
-      /* Light: Very dark background (almost black) */
-      bg-gray-900 text-white border-gray-800
-      /* Dark: Pure black or very dark gray background */
-      dark:bg-black dark:border-gray-800
-      ${a.container || ""}
+      ${a} ${f}
+      ${i} ${u}
+      ${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 ${a.text || ""}`, children: [
-    /* @__PURE__ */ e.jsx("p", { className: "text-lg font-bold text-white", children: o }),
-    /* @__PURE__ */ e.jsx("p", { className: "text-gray-400 text-sm mt-1", children: c })
+  /* @__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 })
   ] }),
-  n.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: n.map((t) => /* @__PURE__ */ e.jsx(
+  s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((b) => /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: t.href,
-      className: `text-gray-400 hover:text-blue-400 text-sm transition-colors ${a.link || ""}`,
-      children: t.label
+      href: b.href,
+      className: `
+                                        text-sm transition-colors 
+                                        ${n} ${g}
+                                        ${t.link || ""}
+                                    `,
+      children: b.label
     },
-    t.label
+    b.label
   )) }),
-  /* @__PURE__ */ e.jsx("div", { className: "flex space-x-6", children: i.map((t) => /* @__PURE__ */ e.jsx(
+  /* @__PURE__ */ e.jsx("div", { className: "flex space-x-6", children: d.map((b) => /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: t.url,
+      href: b.url,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: `text-gray-400 hover:text-white transition-colors text-sm font-medium uppercase tracking-wider ${a.link || ""}`,
-      children: t.platform
+      className: `
+                                    transition-colors text-sm font-medium uppercase tracking-wider 
+                                    ${n} ${g}
+                                    ${t.link || ""}
+                                `,
+      children: b.platform
     },
-    t.platform
+    b.platform
   )) })
 ] }) }) }), be = ({
   greeting: o = "Hello",
-  title: c,
-  subtitle: i,
-  imageUrl: n,
-  actions: a = [],
-  customStyles: t = {}
+  title: x,
+  subtitle: d,
+  imageUrl: s,
+  actions: t = [],
+  customStyles: a = {},
+  // 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"
 }) => {
-  const u = n ? "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", s = n ? "flex-1 text-center lg:text-left" : "w-full", x = n ? "justify-center lg:justify-start" : "justify-center";
+  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";
   return /* @__PURE__ */ e.jsx("section", { className: `
       relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden transition-colors duration-300
-      bg-white dark:bg-gray-900 
-      ${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: u, children: [
-    /* @__PURE__ */ e.jsxs("div", { className: `${s} ${t.content || ""}`, children: [
-      o && /* @__PURE__ */ e.jsx("p", { className: "text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase text-sm mb-4", children: o }),
+      ${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: `
+                                font-semibold tracking-wide uppercase text-sm mb-4
+                                ${u} ${m}
+                            `, children: o }),
       /* @__PURE__ */ e.jsx("h1", { className: `
               text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 transition-colors
-              text-gray-900 dark:text-white
-              ${t.title || ""}
-            `, children: c }),
+              ${l} ${n}
+              ${a.title || ""}
+            `, children: x }),
       /* @__PURE__ */ e.jsx("p", { className: `
               text-lg sm:text-xl mb-8 leading-relaxed transition-colors
-              text-gray-500 dark:text-gray-400
-              ${!n && "mx-auto max-w-2xl"}
-              ${t.subtitle || ""}
-            `, children: i }),
-      a.length > 0 && /* @__PURE__ */ e.jsx("div", { className: `flex flex-col sm:flex-row gap-4 ${x}`, children: a.map((f, d) => /* @__PURE__ */ e.jsx(
+              ${g} ${b}
+              ${!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,
         {
-          label: f.label,
-          variant: f.variant || "primary",
+          label: y.label,
+          variant: y.variant || "primary",
           size: "large",
-          onClick: f.onClick,
+          onClick: y.onClick,
           className: "w-full sm:w-auto"
         },
-        d
+        k
       )) })
     ] }),
-    n && /* @__PURE__ */ e.jsx("div", { className: `
+    s && /* @__PURE__ */ e.jsx("div", { className: `
               flex-1 w-full max-w-md lg:max-w-full relative 
-              ${t.imageWrapper || ""}
+              ${a.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(
         "img",
         {
-          src: n,
+          src: s,
           alt: "Hero Visual",
           decoding: "async",
           className: "w-full h-full object-cover transform transition-transform duration-700 hover:scale-105"
@@ -730,46 +773,46 @@ const de = ({
   ] }) }) });
 }, xe = ({
   logo: o = "Marc.Dev",
-  isLogoImage: c = !1,
-  links: i,
-  actions: n = [],
-  customStyles: a = {},
-  isOpen: t = !1,
-  isScrolled: u = !1,
-  onToggleMenu: s,
-  onLinkClick: x,
-  onLogoClick: f
+  isLogoImage: x = !1,
+  links: d,
+  actions: s = [],
+  customStyles: t = {},
+  isOpen: a = !1,
+  isScrolled: f = !1,
+  onToggleMenu: i,
+  onLinkClick: u,
+  onLogoClick: m
 }) => /* @__PURE__ */ e.jsxs(
   "nav",
   {
     className: `
         fixed top-0 left-0 right-0 z-50 transition-all duration-300
 
-        ${u || 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 || ""}
+        ${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 || ""}
       `,
     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: f, children: c ? /* @__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: 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.jsxs("div", { className: "hidden md:flex space-x-8 items-center", children: [
-          i.map((d) => /* @__PURE__ */ e.jsx(
+          d.map((l) => /* @__PURE__ */ e.jsx(
             "a",
             {
-              href: d.href,
-              onClick: (m) => x == null ? void 0 : x(m, d.href),
+              href: l.href,
+              onClick: (n) => u == null ? void 0 : u(n, l.href),
               className: `
                   text-sm font-medium transition-colors 
                   hover:text-blue-600 dark:hover:text-blue-400
-                  ${d.active ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}
-                  ${a.link || ""}
+                  ${l.active ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}
+                  ${t.link || ""}
                 `,
-              children: d.label
+              children: l.label
             },
-            d.label
+            l.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, {}),
-            n.map((d, m) => /* @__PURE__ */ e.jsx(M, { ...d, size: "small" }, m))
+            s.map((l, n) => /* @__PURE__ */ e.jsx(M, { ...l, size: "small" }, n))
           ] })
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 md:hidden", children: [
@@ -777,9 +820,9 @@ const de = ({
           /* @__PURE__ */ e.jsx(
             "button",
             {
-              onClick: s,
+              onClick: i,
               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" }) })
+              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" }) })
             }
           )
         ] })
@@ -791,90 +834,103 @@ 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 
-          ${t ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0 h-0 overflow-hidden"}
-          ${a.mobileMenu || ""}
+          ${a ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0 h-0 overflow-hidden"}
+          ${t.mobileMenu || ""}
         `,
           children: /* @__PURE__ */ e.jsxs("div", { className: "px-6 py-6 space-y-4 flex flex-col items-center", children: [
-            i.map((d) => /* @__PURE__ */ e.jsx(
+            d.map((l) => /* @__PURE__ */ e.jsx(
               "a",
               {
-                href: d.href,
-                onClick: (m) => x == null ? void 0 : x(m, d.href),
+                href: l.href,
+                onClick: (n) => u == null ? void 0 : u(n, 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: d.label
+                children: l.label
               },
-              d.label
+              l.label
             )),
-            n.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: n.map((d, m) => /* @__PURE__ */ e.jsx(M, { ...d, size: "medium", className: "w-full" }, m)) })
+            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)) })
           ] })
         }
       )
     ]
   }
 ), he = (o) => {
-  const [c, i] = I(!1), [n, a] = I(!1);
+  const [x, d] = z(!1), [s, t] = z(!1);
   Q(() => {
-    let s = !1;
-    const x = () => {
-      s || (window.requestAnimationFrame(() => {
-        a(window.scrollY > 20), s = !1;
-      }), s = !0);
+    let i = !1;
+    const u = () => {
+      i || (window.requestAnimationFrame(() => {
+        t(window.scrollY > 20), i = !1;
+      }), i = !0);
     };
-    return window.addEventListener("scroll", x), () => window.removeEventListener("scroll", x);
+    return window.addEventListener("scroll", u), () => window.removeEventListener("scroll", u);
   }, []);
-  const t = (s, x) => {
-    s.preventDefault();
-    const f = document.querySelector(x);
-    f && (f.scrollIntoView({ behavior: "smooth" }), i(!1));
-  }, u = () => {
+  const a = (i, u) => {
+    i.preventDefault();
+    const m = document.querySelector(u);
+    m && (m.scrollIntoView({ behavior: "smooth" }), d(!1));
+  }, f = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
   return /* @__PURE__ */ e.jsx(
     xe,
     {
       ...o,
-      isOpen: c,
-      isScrolled: n,
-      onToggleMenu: () => i(!c),
-      onLinkClick: t,
-      onLogoClick: u
+      isOpen: x,
+      isScrolled: s,
+      onToggleMenu: () => d(!x),
+      onLinkClick: a,
+      onLogoClick: f
     }
   );
 }, pe = ({
   title: o = "About Me",
-  avatarUrl: c,
-  bio: i,
-  skillsTitle: n = "Tech Stack",
-  skills: a = [],
-  customStyles: t = {},
-  id: u
+  avatarUrl: x,
+  bio: d,
+  skillsTitle: s = "Tech Stack",
+  skills: t = [],
+  customStyles: a = {},
+  id: f,
+  // 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"
 }) => /* @__PURE__ */ e.jsx(
   "section",
   {
-    id: u,
+    id: f,
     className: `
         py-20 transition-colors duration-300
-        bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800
-        ${t.container || ""}
+        border-y 
+        ${i} ${u}
+        ${m} ${l}
+        ${a.container || ""}
       `,
-    children: /* @__PURE__ */ e.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${t.contentWrapper || ""}`, children: [
+    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: [
         /* @__PURE__ */ e.jsx("h2", { className: `
-              text-3xl font-bold text-gray-900 dark:text-white transition-colors
-              ${t.title || ""}
+              text-3xl font-bold transition-colors
+              ${n} ${g}
+              ${a.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: c, size: "xl" }) }),
-        /* @__PURE__ */ e.jsxs("div", { className: `text-lg text-gray-600 dark:text-gray-300 leading-relaxed ${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: [
-            n && /* @__PURE__ */ e.jsx("h3", { className: `
-                    text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wide mb-3
-                    ${t.skillsTitle || ""}
-                  `, children: n }),
-            /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: a.map((s) => /* @__PURE__ */ e.jsx(K, { label: s, variant: "secondary" }, s)) })
+        /* @__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: [
+            s && /* @__PURE__ */ e.jsx("h3", { className: `
+                    text-sm font-bold uppercase tracking-wide mb-3
+                    ${n} ${g}
+                    ${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)) })
           ] })
         ] })
       ] })