@exyconn/common 2.0.0 → 2.1.0

package/dist/client/index.js

@@ -2,10 +2,32 @@
 
 var axios = require('axios');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var Yup = require('yup');
+var formik = require('formik');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
 var axios__default = /*#__PURE__*/_interopDefault(axios);
+var Yup__namespace = /*#__PURE__*/_interopNamespace(Yup);
 
 // src/client/http/axios-instance.ts
 var createHttpClient = (options) => {
@@ -836,11 +858,11 @@ function useDefault(initialValue, defaultValue) {
 }
 var useDefault_default = useDefault;
 function usePrevious(value, initialValue) {
-  const ref = react.useRef(initialValue);
+  const ref2 = react.useRef(initialValue);
   react.useEffect(() => {
-    ref.current = value;
+    ref2.current = value;
   }, [value]);
-  return ref.current;
+  return ref2.current;
 }
 var usePrevious_default = usePrevious;
 function useObjectState(initialState) {
@@ -1766,7 +1788,7 @@ function useKeyPress(targetKey, callback, options = {}) {
 var useKeyPress_default = useKeyPress;
 function useHover(onHoverChange) {
   const [isHovered, setIsHovered] = react.useState(false);
-  const ref = react.useRef(null);
+  const ref2 = react.useRef(null);
   const onMouseEnter = react.useCallback(() => {
     setIsHovered(true);
     onHoverChange?.(true);
@@ -1776,7 +1798,7 @@ function useHover(onHoverChange) {
     onHoverChange?.(false);
   }, [onHoverChange]);
   return {
-    ref,
+    ref: ref2,
     isHovered,
     bind: {
       onMouseEnter,
@@ -1786,13 +1808,13 @@ function useHover(onHoverChange) {
 }
 var useHover_default = useHover;
 function useClickAway(callback, events = ["mousedown", "touchstart"]) {
-  const ref = react.useRef(null);
+  const ref2 = react.useRef(null);
   const savedCallback = react.useRef(callback);
   react.useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
   const handleClickAway = react.useCallback((event) => {
-    const el = ref.current;
+    const el = ref2.current;
     if (!el || el.contains(event.target)) {
       return;
     }
@@ -1809,14 +1831,14 @@ function useClickAway(callback, events = ["mousedown", "touchstart"]) {
       });
     };
   }, [events, handleClickAway]);
-  return ref;
+  return ref2;
 }
 var useClickAway_default = useClickAway;
-function useOnClickOutside(ref, handler, enabled = true) {
+function useOnClickOutside(ref2, handler, enabled = true) {
   react.useEffect(() => {
     if (!enabled) return;
     const listener = (event) => {
-      const el = ref?.current;
+      const el = ref2?.current;
       if (!el || el.contains(event.target)) {
         return;
       }
@@ -1828,7 +1850,7 @@ function useOnClickOutside(ref, handler, enabled = true) {
       document.removeEventListener("mousedown", listener);
       document.removeEventListener("touchstart", listener);
     };
-  }, [ref, handler, enabled]);
+  }, [ref2, handler, enabled]);
 }
 var useOnClickOutside_default = useOnClickOutside;
 function useLongPress(options = {}) {
@@ -1901,7 +1923,7 @@ function useLongPress(options = {}) {
 var useLongPress_default = useLongPress;
 function useMouse(options = {}) {
   const { enabled = true } = options;
-  const ref = react.useRef(null);
+  const ref2 = react.useRef(null);
   const [position, setPosition] = react.useState({
     x: 0,
     y: 0,
@@ -1915,8 +1937,8 @@ function useMouse(options = {}) {
     let elementX = 0;
     let elementY = 0;
     let isInElement = false;
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect();
+    if (ref2.current) {
+      const rect = ref2.current.getBoundingClientRect();
       elementX = event.clientX - rect.left;
       elementY = event.clientY - rect.top;
       isInElement = elementX >= 0 && elementX <= rect.width && elementY >= 0 && elementY <= rect.height;
@@ -1939,7 +1961,7 @@ function useMouse(options = {}) {
     };
   }, [enabled, handleMouseMove]);
   return {
-    ref,
+    ref: ref2,
     ...position
   };
 }
@@ -2851,7 +2873,7 @@ function useMeasure() {
       y: rect.y
     });
   }, []);
-  const ref = react.useCallback((node) => {
+  const ref2 = react.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -2898,7 +2920,7 @@ function useMeasure() {
       }
     };
   }, []);
-  return { ref, dimensions, measure };
+  return { ref: ref2, dimensions, measure };
 }
 var useMeasure_default = useMeasure;
 function useIntersectionObserver(options = {}) {
@@ -2915,7 +2937,7 @@ function useIntersectionObserver(options = {}) {
   const elementRef = react.useRef(null);
   const observerRef = react.useRef(null);
   const frozen = react.useRef(false);
-  const ref = react.useCallback(
+  const ref2 = react.useCallback(
     (node) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -2951,7 +2973,7 @@ function useIntersectionObserver(options = {}) {
       }
     };
   }, []);
-  return { ref, isIntersecting, entry };
+  return { ref: ref2, isIntersecting, entry };
 }
 var useIntersectionObserver_default = useIntersectionObserver;
 var DEFAULT_DURATION = 4e3;
@@ -2996,16 +3018,2636 @@ function useSnackbar(defaultDuration = DEFAULT_DURATION) {
 }
 var useSnackbar_default = useSnackbar;
 
+// src/client/web/theme/default-light-theme.ts
+var defaultLightTheme = {
+  name: "default-light",
+  mode: "light",
+  colors: {
+    brand: {
+      primary: "#3b82f6",
+      secondary: "#6366f1",
+      accent: "#f59e0b",
+      background: "#ffffff",
+      foreground: "#111827"
+    },
+    semantic: {
+      primary: "#3b82f6",
+      primaryHover: "#2563eb",
+      primaryActive: "#1d4ed8",
+      primaryDisabled: "#93c5fd",
+      secondary: "#6366f1",
+      secondaryHover: "#4f46e5",
+      secondaryActive: "#4338ca",
+      secondaryDisabled: "#a5b4fc",
+      accent: "#f59e0b",
+      accentHover: "#d97706",
+      success: "#22c55e",
+      successHover: "#16a34a",
+      warning: "#f59e0b",
+      warningHover: "#d97706",
+      error: "#ef4444",
+      errorHover: "#dc2626",
+      info: "#3b82f6",
+      infoHover: "#2563eb"
+    },
+    background: {
+      default: "#ffffff",
+      paper: "#f9fafb",
+      card: "#ffffff",
+      overlay: "rgba(0, 0, 0, 0.5)",
+      input: "#ffffff",
+      disabled: "#f3f4f6",
+      hover: "#f3f4f6",
+      selected: "#eff6ff"
+    },
+    surface: {
+      light: "#f9fafb",
+      main: "#f3f4f6",
+      dark: "#e5e7eb"
+    },
+    text: {
+      primary: "#111827",
+      secondary: "#6b7280",
+      disabled: "#9ca3af",
+      placeholder: "#9ca3af",
+      link: "#3b82f6",
+      linkHover: "#2563eb",
+      inverse: "#ffffff",
+      onPrimary: "#ffffff",
+      onSecondary: "#ffffff"
+    },
+    border: {
+      default: "#e5e7eb",
+      light: "#f3f4f6",
+      dark: "#d1d5db",
+      focus: "#3b82f6",
+      error: "#ef4444",
+      success: "#22c55e",
+      disabled: "#e5e7eb"
+    }
+  },
+  shadows: {
+    none: "none",
+    xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    button: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    buttonHover: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    card: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    cardHover: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    modal: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    dropdown: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+  },
+  typography: {
+    fontFamily: {
+      sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+      heading: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      body: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "3.75rem"
+    },
+    fontWeight: {
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800
+    },
+    lineHeight: {
+      none: 1,
+      tight: 1.25,
+      snug: 1.375,
+      normal: 1.5,
+      relaxed: 1.625,
+      loose: 2
+    }
+  },
+  spacing: {
+    0: "0",
+    px: "1px",
+    0.5: "0.125rem",
+    1: "0.25rem",
+    1.5: "0.375rem",
+    2: "0.5rem",
+    2.5: "0.625rem",
+    3: "0.75rem",
+    3.5: "0.875rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    11: "2.75rem",
+    12: "3rem",
+    14: "3.5rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    28: "7rem",
+    32: "8rem",
+    36: "9rem",
+    40: "10rem",
+    44: "11rem",
+    48: "12rem",
+    52: "13rem",
+    56: "14rem",
+    60: "15rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    96: "24rem"
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    default: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  },
+  breakpoints: {
+    xs: "475px",
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px"
+  },
+  zIndex: {
+    hide: -1,
+    auto: "auto",
+    base: 0,
+    dropdown: 1e3,
+    sticky: 1020,
+    fixed: 1030,
+    modalBackdrop: 1040,
+    modal: 1050,
+    popover: 1060,
+    tooltip: 1070,
+    toast: 1080
+  },
+  transitions: {
+    none: "none",
+    fast: "150ms ease-in-out",
+    normal: "200ms ease-in-out",
+    slow: "300ms ease-in-out",
+    slower: "500ms ease-in-out",
+    colors: "color 200ms ease-in-out, background-color 200ms ease-in-out, border-color 200ms ease-in-out",
+    transform: "transform 200ms ease-in-out",
+    opacity: "opacity 200ms ease-in-out",
+    shadow: "box-shadow 200ms ease-in-out",
+    all: "all 200ms ease-in-out"
+  },
+  components: {
+    button: {
+      bg: "#3b82f6",
+      bgHover: "#2563eb",
+      bgActive: "#1d4ed8",
+      bgDisabled: "#93c5fd",
+      color: "#ffffff",
+      colorHover: "#ffffff",
+      colorDisabled: "#ffffff",
+      border: "transparent",
+      borderHover: "transparent",
+      borderWidth: "1px",
+      borderRadius: "0.375rem",
+      shadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+      shadowHover: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+      paddingX: "1rem",
+      paddingY: "0.5rem",
+      fontSize: "0.875rem",
+      fontWeight: 500,
+      variants: {
+        primary: {
+          bg: "#3b82f6",
+          bgHover: "#2563eb",
+          color: "#ffffff"
+        },
+        secondary: {
+          bg: "#6366f1",
+          bgHover: "#4f46e5",
+          color: "#ffffff"
+        },
+        outline: {
+          bg: "transparent",
+          bgHover: "#f3f4f6",
+          color: "#374151",
+          border: "#d1d5db",
+          borderHover: "#9ca3af"
+        },
+        ghost: {
+          bg: "transparent",
+          bgHover: "#f3f4f6",
+          color: "#374151",
+          shadow: "none",
+          shadowHover: "none"
+        },
+        link: {
+          bg: "transparent",
+          bgHover: "transparent",
+          color: "#3b82f6",
+          colorHover: "#2563eb",
+          shadow: "none",
+          shadowHover: "none",
+          paddingX: "0",
+          paddingY: "0"
+        },
+        danger: {
+          bg: "#ef4444",
+          bgHover: "#dc2626",
+          color: "#ffffff"
+        },
+        success: {
+          bg: "#22c55e",
+          bgHover: "#16a34a",
+          color: "#ffffff"
+        }
+      },
+      sizes: {
+        xs: {
+          paddingX: "0.5rem",
+          paddingY: "0.25rem",
+          fontSize: "0.75rem"
+        },
+        sm: {
+          paddingX: "0.75rem",
+          paddingY: "0.375rem",
+          fontSize: "0.875rem"
+        },
+        md: {
+          paddingX: "1rem",
+          paddingY: "0.5rem",
+          fontSize: "0.875rem"
+        },
+        lg: {
+          paddingX: "1.25rem",
+          paddingY: "0.625rem",
+          fontSize: "1rem"
+        },
+        xl: {
+          paddingX: "1.5rem",
+          paddingY: "0.75rem",
+          fontSize: "1.125rem"
+        }
+      }
+    },
+    input: {
+      bg: "#ffffff",
+      bgFocus: "#ffffff",
+      bgDisabled: "#f3f4f6",
+      bgError: "#fef2f2",
+      color: "#111827",
+      colorPlaceholder: "#9ca3af",
+      colorDisabled: "#9ca3af",
+      border: "#d1d5db",
+      borderFocus: "#3b82f6",
+      borderError: "#ef4444",
+      borderWidth: "1px",
+      borderRadius: "0.375rem",
+      shadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      shadowFocus: "0 0 0 3px rgb(59 130 246 / 0.1)",
+      paddingX: "0.75rem",
+      paddingY: "0.5rem",
+      fontSize: "0.875rem",
+      labelColor: "#374151",
+      labelFontSize: "0.875rem",
+      labelFontWeight: 500,
+      helperColor: "#6b7280",
+      errorColor: "#ef4444",
+      sizes: {
+        sm: {
+          paddingX: "0.5rem",
+          paddingY: "0.375rem",
+          fontSize: "0.75rem"
+        },
+        md: {
+          paddingX: "0.75rem",
+          paddingY: "0.5rem",
+          fontSize: "0.875rem"
+        },
+        lg: {
+          paddingX: "1rem",
+          paddingY: "0.625rem",
+          fontSize: "1rem"
+        }
+      }
+    },
+    card: {
+      bg: "#ffffff",
+      bgHover: "#ffffff",
+      border: "#e5e7eb",
+      borderWidth: "1px",
+      borderRadius: "0.5rem",
+      shadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+      shadowHover: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+      padding: "1.5rem",
+      headerBg: "#f9fafb",
+      headerBorder: "#e5e7eb",
+      headerPadding: "1rem 1.5rem",
+      footerBg: "#f9fafb",
+      footerBorder: "#e5e7eb",
+      footerPadding: "1rem 1.5rem"
+    },
+    header: {
+      bg: "#ffffff",
+      bgScrolled: "rgba(255, 255, 255, 0.95)",
+      color: "#111827",
+      border: "#e5e7eb",
+      shadow: "none",
+      shadowScrolled: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+      height: "4rem",
+      paddingX: "1.5rem",
+      logoHeight: "2rem",
+      navColor: "#374151",
+      navColorHover: "#111827",
+      navColorActive: "#3b82f6",
+      navFontSize: "0.875rem",
+      navFontWeight: 500,
+      mobileMenuBg: "#ffffff",
+      mobileMenuShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)"
+    },
+    footer: {
+      bg: "#111827",
+      color: "#d1d5db",
+      colorMuted: "#9ca3af",
+      border: "#374151",
+      padding: "4rem 1.5rem",
+      linkColor: "#d1d5db",
+      linkColorHover: "#ffffff",
+      headingColor: "#ffffff",
+      headingFontSize: "1rem",
+      headingFontWeight: 600,
+      copyrightBg: "#0f172a",
+      copyrightColor: "#9ca3af"
+    },
+    banner: {
+      bg: "#eff6ff",
+      color: "#1e40af",
+      border: "#bfdbfe",
+      borderRadius: "0.5rem",
+      padding: "1rem 1.5rem",
+      shadow: "none",
+      closeBg: "transparent",
+      closeColor: "#1e40af",
+      variants: {
+        info: {
+          bg: "#eff6ff",
+          color: "#1e40af",
+          border: "#bfdbfe"
+        },
+        success: {
+          bg: "#f0fdf4",
+          color: "#166534",
+          border: "#bbf7d0"
+        },
+        warning: {
+          bg: "#fffbeb",
+          color: "#92400e",
+          border: "#fde68a"
+        },
+        error: {
+          bg: "#fef2f2",
+          color: "#991b1b",
+          border: "#fecaca"
+        },
+        promo: {
+          bg: "#faf5ff",
+          color: "#6b21a8",
+          border: "#e9d5ff"
+        }
+      }
+    },
+    loader: {
+      color: "#3b82f6",
+      colorSecondary: "#e5e7eb",
+      size: "2.5rem",
+      borderWidth: "3px",
+      overlayBg: "rgba(255, 255, 255, 0.8)",
+      overlayOpacity: 1,
+      sizes: {
+        xs: "1rem",
+        sm: "1.5rem",
+        md: "2.5rem",
+        lg: "3.5rem",
+        xl: "5rem"
+      }
+    },
+    modal: {
+      bg: "#ffffff",
+      color: "#111827",
+      border: "#e5e7eb",
+      borderRadius: "0.5rem",
+      shadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+      padding: "1.5rem",
+      overlayBg: "rgba(0, 0, 0, 0.5)",
+      overlayOpacity: 1,
+      headerBg: "#ffffff",
+      headerBorder: "#e5e7eb",
+      headerPadding: "1rem 1.5rem",
+      footerBg: "#f9fafb",
+      footerBorder: "#e5e7eb",
+      footerPadding: "1rem 1.5rem",
+      closeBg: "transparent",
+      closeColor: "#6b7280",
+      closeHoverBg: "#f3f4f6",
+      sizes: {
+        sm: "24rem",
+        md: "32rem",
+        lg: "48rem",
+        xl: "64rem",
+        full: "100%"
+      }
+    },
+    toast: {
+      bg: "#ffffff",
+      color: "#111827",
+      border: "#e5e7eb",
+      borderRadius: "0.5rem",
+      shadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+      padding: "1rem",
+      variants: {
+        success: {
+          bg: "#f0fdf4",
+          color: "#166534",
+          border: "#bbf7d0"
+        },
+        error: {
+          bg: "#fef2f2",
+          color: "#991b1b",
+          border: "#fecaca"
+        },
+        warning: {
+          bg: "#fffbeb",
+          color: "#92400e",
+          border: "#fde68a"
+        },
+        info: {
+          bg: "#eff6ff",
+          color: "#1e40af",
+          border: "#bfdbfe"
+        }
+      }
+    },
+    newsletter: {
+      bg: "#f9fafb",
+      color: "#111827",
+      border: "#e5e7eb",
+      borderRadius: "0.5rem",
+      padding: "2rem",
+      titleColor: "#111827",
+      titleFontSize: "1.5rem",
+      descColor: "#6b7280",
+      descFontSize: "1rem",
+      inputBg: "#ffffff",
+      inputBorder: "#d1d5db",
+      buttonBg: "#3b82f6",
+      buttonColor: "#ffffff"
+    }
+  }
+};
+
+// src/client/web/theme/default-dark-theme.ts
+var defaultDarkTheme = {
+  name: "default-dark",
+  mode: "dark",
+  colors: {
+    brand: {
+      primary: "#60a5fa",
+      secondary: "#818cf8",
+      accent: "#fbbf24",
+      background: "#0f172a",
+      foreground: "#f8fafc"
+    },
+    semantic: {
+      primary: "#60a5fa",
+      primaryHover: "#3b82f6",
+      primaryActive: "#2563eb",
+      primaryDisabled: "#1e3a5f",
+      secondary: "#818cf8",
+      secondaryHover: "#6366f1",
+      secondaryActive: "#4f46e5",
+      secondaryDisabled: "#312e81",
+      accent: "#fbbf24",
+      accentHover: "#f59e0b",
+      success: "#4ade80",
+      successHover: "#22c55e",
+      warning: "#fbbf24",
+      warningHover: "#f59e0b",
+      error: "#f87171",
+      errorHover: "#ef4444",
+      info: "#60a5fa",
+      infoHover: "#3b82f6"
+    },
+    background: {
+      default: "#0f172a",
+      paper: "#1e293b",
+      card: "#1e293b",
+      overlay: "rgba(0, 0, 0, 0.7)",
+      input: "#1e293b",
+      disabled: "#334155",
+      hover: "#334155",
+      selected: "#1e3a5f"
+    },
+    surface: {
+      light: "#334155",
+      main: "#1e293b",
+      dark: "#0f172a"
+    },
+    text: {
+      primary: "#f8fafc",
+      secondary: "#94a3b8",
+      disabled: "#64748b",
+      placeholder: "#64748b",
+      link: "#60a5fa",
+      linkHover: "#3b82f6",
+      inverse: "#0f172a",
+      onPrimary: "#0f172a",
+      onSecondary: "#0f172a"
+    },
+    border: {
+      default: "#334155",
+      light: "#475569",
+      dark: "#1e293b",
+      focus: "#60a5fa",
+      error: "#f87171",
+      success: "#4ade80",
+      disabled: "#334155"
+    }
+  },
+  shadows: {
+    none: "none",
+    xs: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
+    sm: "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.6)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.3)",
+    button: "0 1px 3px 0 rgb(0 0 0 / 0.4)",
+    buttonHover: "0 4px 6px -1px rgb(0 0 0 / 0.4)",
+    card: "0 1px 3px 0 rgb(0 0 0 / 0.4)",
+    cardHover: "0 10px 15px -3px rgb(0 0 0 / 0.4)",
+    modal: "0 25px 50px -12px rgb(0 0 0 / 0.6)",
+    dropdown: "0 10px 15px -3px rgb(0 0 0 / 0.4)"
+  },
+  typography: {
+    fontFamily: {
+      sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+      heading: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      body: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "3.75rem"
+    },
+    fontWeight: {
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800
+    },
+    lineHeight: {
+      none: 1,
+      tight: 1.25,
+      snug: 1.375,
+      normal: 1.5,
+      relaxed: 1.625,
+      loose: 2
+    }
+  },
+  spacing: {
+    0: "0",
+    px: "1px",
+    0.5: "0.125rem",
+    1: "0.25rem",
+    1.5: "0.375rem",
+    2: "0.5rem",
+    2.5: "0.625rem",
+    3: "0.75rem",
+    3.5: "0.875rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    11: "2.75rem",
+    12: "3rem",
+    14: "3.5rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    28: "7rem",
+    32: "8rem",
+    36: "9rem",
+    40: "10rem",
+    44: "11rem",
+    48: "12rem",
+    52: "13rem",
+    56: "14rem",
+    60: "15rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    96: "24rem"
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    default: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  },
+  breakpoints: {
+    xs: "475px",
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px"
+  },
+  zIndex: {
+    hide: -1,
+    auto: "auto",
+    base: 0,
+    dropdown: 1e3,
+    sticky: 1020,
+    fixed: 1030,
+    modalBackdrop: 1040,
+    modal: 1050,
+    popover: 1060,
+    tooltip: 1070,
+    toast: 1080
+  },
+  transitions: {
+    none: "none",
+    fast: "150ms ease-in-out",
+    normal: "200ms ease-in-out",
+    slow: "300ms ease-in-out",
+    slower: "500ms ease-in-out",
+    colors: "color 200ms ease-in-out, background-color 200ms ease-in-out, border-color 200ms ease-in-out",
+    transform: "transform 200ms ease-in-out",
+    opacity: "opacity 200ms ease-in-out",
+    shadow: "box-shadow 200ms ease-in-out",
+    all: "all 200ms ease-in-out"
+  },
+  components: {
+    button: {
+      bg: "#60a5fa",
+      bgHover: "#3b82f6",
+      bgActive: "#2563eb",
+      bgDisabled: "#1e3a5f",
+      color: "#0f172a",
+      colorHover: "#0f172a",
+      colorDisabled: "#64748b",
+      border: "transparent",
+      borderHover: "transparent",
+      borderWidth: "1px",
+      borderRadius: "0.375rem",
+      shadow: "0 1px 3px 0 rgb(0 0 0 / 0.4)",
+      shadowHover: "0 4px 6px -1px rgb(0 0 0 / 0.4)",
+      paddingX: "1rem",
+      paddingY: "0.5rem",
+      fontSize: "0.875rem",
+      fontWeight: 500,
+      variants: {
+        primary: {
+          bg: "#60a5fa",
+          bgHover: "#3b82f6",
+          color: "#0f172a"
+        },
+        secondary: {
+          bg: "#818cf8",
+          bgHover: "#6366f1",
+          color: "#0f172a"
+        },
+        outline: {
+          bg: "transparent",
+          bgHover: "#334155",
+          color: "#f8fafc",
+          border: "#475569",
+          borderHover: "#64748b"
+        },
+        ghost: {
+          bg: "transparent",
+          bgHover: "#334155",
+          color: "#f8fafc",
+          shadow: "none",
+          shadowHover: "none"
+        },
+        link: {
+          bg: "transparent",
+          bgHover: "transparent",
+          color: "#60a5fa",
+          colorHover: "#3b82f6",
+          shadow: "none",
+          shadowHover: "none",
+          paddingX: "0",
+          paddingY: "0"
+        },
+        danger: {
+          bg: "#f87171",
+          bgHover: "#ef4444",
+          color: "#0f172a"
+        },
+        success: {
+          bg: "#4ade80",
+          bgHover: "#22c55e",
+          color: "#0f172a"
+        }
+      },
+      sizes: {
+        xs: {
+          paddingX: "0.5rem",
+          paddingY: "0.25rem",
+          fontSize: "0.75rem"
+        },
+        sm: {
+          paddingX: "0.75rem",
+          paddingY: "0.375rem",
+          fontSize: "0.875rem"
+        },
+        md: {
+          paddingX: "1rem",
+          paddingY: "0.5rem",
+          fontSize: "0.875rem"
+        },
+        lg: {
+          paddingX: "1.25rem",
+          paddingY: "0.625rem",
+          fontSize: "1rem"
+        },
+        xl: {
+          paddingX: "1.5rem",
+          paddingY: "0.75rem",
+          fontSize: "1.125rem"
+        }
+      }
+    },
+    input: {
+      bg: "#1e293b",
+      bgFocus: "#1e293b",
+      bgDisabled: "#334155",
+      bgError: "#450a0a",
+      color: "#f8fafc",
+      colorPlaceholder: "#64748b",
+      colorDisabled: "#64748b",
+      border: "#475569",
+      borderFocus: "#60a5fa",
+      borderError: "#f87171",
+      borderWidth: "1px",
+      borderRadius: "0.375rem",
+      shadow: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
+      shadowFocus: "0 0 0 3px rgb(96 165 250 / 0.2)",
+      paddingX: "0.75rem",
+      paddingY: "0.5rem",
+      fontSize: "0.875rem",
+      labelColor: "#e2e8f0",
+      labelFontSize: "0.875rem",
+      labelFontWeight: 500,
+      helperColor: "#94a3b8",
+      errorColor: "#f87171",
+      sizes: {
+        sm: {
+          paddingX: "0.5rem",
+          paddingY: "0.375rem",
+          fontSize: "0.75rem"
+        },
+        md: {
+          paddingX: "0.75rem",
+          paddingY: "0.5rem",
+          fontSize: "0.875rem"
+        },
+        lg: {
+          paddingX: "1rem",
+          paddingY: "0.625rem",
+          fontSize: "1rem"
+        }
+      }
+    },
+    card: {
+      bg: "#1e293b",
+      bgHover: "#1e293b",
+      border: "#334155",
+      borderWidth: "1px",
+      borderRadius: "0.5rem",
+      shadow: "0 1px 3px 0 rgb(0 0 0 / 0.4)",
+      shadowHover: "0 10px 15px -3px rgb(0 0 0 / 0.4)",
+      padding: "1.5rem",
+      headerBg: "#0f172a",
+      headerBorder: "#334155",
+      headerPadding: "1rem 1.5rem",
+      footerBg: "#0f172a",
+      footerBorder: "#334155",
+      footerPadding: "1rem 1.5rem"
+    },
+    header: {
+      bg: "#0f172a",
+      bgScrolled: "rgba(15, 23, 42, 0.95)",
+      color: "#f8fafc",
+      border: "#334155",
+      shadow: "none",
+      shadowScrolled: "0 1px 3px 0 rgb(0 0 0 / 0.4)",
+      height: "4rem",
+      paddingX: "1.5rem",
+      logoHeight: "2rem",
+      navColor: "#94a3b8",
+      navColorHover: "#f8fafc",
+      navColorActive: "#60a5fa",
+      navFontSize: "0.875rem",
+      navFontWeight: 500,
+      mobileMenuBg: "#1e293b",
+      mobileMenuShadow: "0 10px 15px -3px rgb(0 0 0 / 0.4)"
+    },
+    footer: {
+      bg: "#020617",
+      color: "#94a3b8",
+      colorMuted: "#64748b",
+      border: "#1e293b",
+      padding: "4rem 1.5rem",
+      linkColor: "#94a3b8",
+      linkColorHover: "#f8fafc",
+      headingColor: "#f8fafc",
+      headingFontSize: "1rem",
+      headingFontWeight: 600,
+      copyrightBg: "#0f172a",
+      copyrightColor: "#64748b"
+    },
+    banner: {
+      bg: "#1e3a5f",
+      color: "#bfdbfe",
+      border: "#3b82f6",
+      borderRadius: "0.5rem",
+      padding: "1rem 1.5rem",
+      shadow: "none",
+      closeBg: "transparent",
+      closeColor: "#bfdbfe",
+      variants: {
+        info: {
+          bg: "#1e3a5f",
+          color: "#bfdbfe",
+          border: "#3b82f6"
+        },
+        success: {
+          bg: "#14532d",
+          color: "#bbf7d0",
+          border: "#22c55e"
+        },
+        warning: {
+          bg: "#78350f",
+          color: "#fde68a",
+          border: "#f59e0b"
+        },
+        error: {
+          bg: "#7f1d1d",
+          color: "#fecaca",
+          border: "#ef4444"
+        },
+        promo: {
+          bg: "#581c87",
+          color: "#e9d5ff",
+          border: "#a855f7"
+        }
+      }
+    },
+    loader: {
+      color: "#60a5fa",
+      colorSecondary: "#334155",
+      size: "2.5rem",
+      borderWidth: "3px",
+      overlayBg: "rgba(15, 23, 42, 0.8)",
+      overlayOpacity: 1,
+      sizes: {
+        xs: "1rem",
+        sm: "1.5rem",
+        md: "2.5rem",
+        lg: "3.5rem",
+        xl: "5rem"
+      }
+    },
+    modal: {
+      bg: "#1e293b",
+      color: "#f8fafc",
+      border: "#334155",
+      borderRadius: "0.5rem",
+      shadow: "0 25px 50px -12px rgb(0 0 0 / 0.6)",
+      padding: "1.5rem",
+      overlayBg: "rgba(0, 0, 0, 0.7)",
+      overlayOpacity: 1,
+      headerBg: "#1e293b",
+      headerBorder: "#334155",
+      headerPadding: "1rem 1.5rem",
+      footerBg: "#0f172a",
+      footerBorder: "#334155",
+      footerPadding: "1rem 1.5rem",
+      closeBg: "transparent",
+      closeColor: "#94a3b8",
+      closeHoverBg: "#334155",
+      sizes: {
+        sm: "24rem",
+        md: "32rem",
+        lg: "48rem",
+        xl: "64rem",
+        full: "100%"
+      }
+    },
+    toast: {
+      bg: "#1e293b",
+      color: "#f8fafc",
+      border: "#334155",
+      borderRadius: "0.5rem",
+      shadow: "0 10px 15px -3px rgb(0 0 0 / 0.4)",
+      padding: "1rem",
+      variants: {
+        success: {
+          bg: "#14532d",
+          color: "#bbf7d0",
+          border: "#22c55e"
+        },
+        error: {
+          bg: "#7f1d1d",
+          color: "#fecaca",
+          border: "#ef4444"
+        },
+        warning: {
+          bg: "#78350f",
+          color: "#fde68a",
+          border: "#f59e0b"
+        },
+        info: {
+          bg: "#1e3a5f",
+          color: "#bfdbfe",
+          border: "#3b82f6"
+        }
+      }
+    },
+    newsletter: {
+      bg: "#1e293b",
+      color: "#f8fafc",
+      border: "#334155",
+      borderRadius: "0.5rem",
+      padding: "2rem",
+      titleColor: "#f8fafc",
+      titleFontSize: "1.5rem",
+      descColor: "#94a3b8",
+      descFontSize: "1rem",
+      inputBg: "#0f172a",
+      inputBorder: "#475569",
+      buttonBg: "#60a5fa",
+      buttonColor: "#0f172a"
+    }
+  }
+};
+
+// src/client/web/theme/theme-utils.ts
+function deepMerge(target, source) {
+  const output = { ...target };
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const sourceValue = source[key];
+      const targetValue = target[key];
+      if (sourceValue && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+        output[key] = deepMerge(
+          targetValue,
+          sourceValue
+        );
+      } else if (sourceValue !== void 0) {
+        output[key] = sourceValue;
+      }
+    }
+  }
+  return output;
+}
+function createThemeFromBrand(brand, baseTheme = defaultLightTheme) {
+  const { colors } = brand;
+  const brandOverrides = {
+    brand,
+    colors: {
+      brand: {
+        primary: colors.primary,
+        secondary: colors.secondary,
+        accent: colors.accent || colors.primary,
+        background: colors.background || baseTheme.colors.background.default,
+        foreground: colors.foreground || baseTheme.colors.text.primary
+      },
+      semantic: {
+        primary: colors.primary,
+        primaryHover: adjustColor(colors.primary, -10),
+        primaryActive: adjustColor(colors.primary, -20),
+        primaryDisabled: adjustColor(colors.primary, 40),
+        secondary: colors.secondary,
+        secondaryHover: adjustColor(colors.secondary, -10),
+        secondaryActive: adjustColor(colors.secondary, -20),
+        secondaryDisabled: adjustColor(colors.secondary, 40),
+        accent: colors.accent || colors.primary,
+        accentHover: adjustColor(colors.accent || colors.primary, -10)
+      }
+    },
+    components: {
+      button: {
+        bg: colors.primary,
+        bgHover: adjustColor(colors.primary, -10),
+        bgActive: adjustColor(colors.primary, -20),
+        variants: {
+          primary: {
+            bg: colors.primary,
+            bgHover: adjustColor(colors.primary, -10)
+          },
+          secondary: {
+            bg: colors.secondary,
+            bgHover: adjustColor(colors.secondary, -10)
+          }
+        }
+      },
+      input: {
+        borderFocus: colors.primary
+      },
+      header: {
+        navColorActive: colors.primary
+      },
+      loader: {
+        color: colors.primary
+      },
+      newsletter: {
+        buttonBg: colors.primary
+      }
+    }
+  };
+  return deepMerge(baseTheme, brandOverrides);
+}
+function adjustColor(hex, percent) {
+  hex = hex.replace(/^#/, "");
+  let r = parseInt(hex.substring(0, 2), 16);
+  let g = parseInt(hex.substring(2, 4), 16);
+  let b = parseInt(hex.substring(4, 6), 16);
+  r = Math.min(255, Math.max(0, r + r * percent / 100));
+  g = Math.min(255, Math.max(0, g + g * percent / 100));
+  b = Math.min(255, Math.max(0, b + b * percent / 100));
+  const toHex = (n) => Math.round(n).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hexToRgba(hex, alpha = 1) {
+  hex = hex.replace(/^#/, "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function getContrastColor(hex) {
+  hex = hex.replace(/^#/, "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+function flattenToCssVars(obj, prefix = "--ec") {
+  const result = {};
+  function flatten(current, path = []) {
+    for (const key in current) {
+      if (Object.prototype.hasOwnProperty.call(current, key)) {
+        const value = current[key];
+        const newPath = [...path, key];
+        const varName = `${prefix}-${newPath.join("-")}`;
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+          flatten(value, newPath);
+        } else if (typeof value === "string" || typeof value === "number") {
+          result[varName] = String(value);
+        }
+      }
+    }
+  }
+  flatten(obj);
+  return result;
+}
+function generateCssVars(theme, prefix = "--ec") {
+  const cssVars = flattenToCssVars(theme, prefix);
+  return Object.entries(cssVars).map(([key, value]) => `${key}: ${value};`).join("\n");
+}
+function injectCssVars(theme, prefix = "--ec") {
+  if (typeof document === "undefined") return;
+  const cssVars = flattenToCssVars(theme, prefix);
+  const root = document.documentElement;
+  for (const [key, value] of Object.entries(cssVars)) {
+    root.style.setProperty(key, value);
+  }
+}
+function removeCssVars(prefix = "--ec") {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const style = root.style;
+  for (let i = style.length - 1; i >= 0; i--) {
+    const name = style[i];
+    if (name.startsWith(prefix)) {
+      root.style.removeProperty(name);
+    }
+  }
+}
+async function loadThemeFromUrl(url) {
+  try {
+    const response = await fetch(url, {
+      headers: {
+        Accept: "application/json"
+      }
+    });
+    if (!response.ok) {
+      console.error(`Failed to load theme from ${url}: ${response.status}`);
+      return null;
+    }
+    const themeData = await response.json();
+    return themeData;
+  } catch (error) {
+    console.error(`Error loading theme from ${url}:`, error);
+    return null;
+  }
+}
+async function createTheme(config = {}) {
+  let lightTheme = { ...defaultLightTheme };
+  let darkTheme = { ...defaultDarkTheme };
+  if (config.themeUrl) {
+    const urlTheme = await loadThemeFromUrl(config.themeUrl);
+    if (urlTheme) {
+      lightTheme = deepMerge(lightTheme, urlTheme);
+      darkTheme = deepMerge(darkTheme, urlTheme);
+    }
+  }
+  if (config.brandIdentity) {
+    lightTheme = createThemeFromBrand(config.brandIdentity, lightTheme);
+    darkTheme = createThemeFromBrand(config.brandIdentity, darkTheme);
+  }
+  if (config.light) {
+    lightTheme = deepMerge(lightTheme, config.light);
+  }
+  if (config.dark) {
+    darkTheme = deepMerge(darkTheme, config.dark);
+  }
+  return { light: lightTheme, dark: darkTheme };
+}
+var DEFAULT_STORAGE_KEY = "ec-theme-mode";
+function saveThemeMode(mode, storageKey = DEFAULT_STORAGE_KEY) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(storageKey, mode);
+  } catch (error) {
+    console.error("Failed to save theme mode:", error);
+  }
+}
+function loadThemeMode(storageKey = DEFAULT_STORAGE_KEY) {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const mode = localStorage.getItem(storageKey);
+    if (mode === "light" || mode === "dark" || mode === "system") {
+      return mode;
+    }
+    return null;
+  } catch (error) {
+    console.error("Failed to load theme mode:", error);
+    return null;
+  }
+}
+function getSystemColorScheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveThemeMode(mode) {
+  if (mode === "system") {
+    return getSystemColorScheme();
+  }
+  return mode;
+}
+var ThemeContext = react.createContext(null);
+function useTheme() {
+  const context = react.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+function ThemeProvider({
+  children,
+  config = {},
+  initialTheme
+}) {
+  const {
+    defaultMode = "system",
+    themeUrl,
+    light: lightOverrides,
+    dark: darkOverrides,
+    brandIdentity,
+    enableSystemTheme = true,
+    persistTheme = true,
+    storageKey = "ec-theme-mode",
+    cssVarPrefix = "--ec"
+  } = config;
+  const [mode, setModeState] = react.useState(() => {
+    if (persistTheme && typeof window !== "undefined") {
+      const savedMode = loadThemeMode(storageKey);
+      if (savedMode) return savedMode;
+    }
+    return defaultMode;
+  });
+  const [lightTheme, setLightTheme] = react.useState(() => {
+    if (initialTheme && initialTheme.mode === "light") return initialTheme;
+    let theme2 = defaultLightTheme;
+    if (brandIdentity) {
+      theme2 = createThemeFromBrand(brandIdentity, theme2);
+    }
+    if (lightOverrides) {
+      theme2 = deepMerge(theme2, lightOverrides);
+    }
+    return theme2;
+  });
+  const [darkTheme, setDarkTheme] = react.useState(() => {
+    if (initialTheme && initialTheme.mode === "dark") return initialTheme;
+    let theme2 = defaultDarkTheme;
+    if (brandIdentity) {
+      theme2 = createThemeFromBrand(brandIdentity, theme2);
+    }
+    if (darkOverrides) {
+      theme2 = deepMerge(theme2, darkOverrides);
+    }
+    return theme2;
+  });
+  const [isLoading, setIsLoading] = react.useState(!!themeUrl);
+  const [error, setError] = react.useState(null);
+  const resolvedMode = react.useMemo(() => resolveThemeMode(mode), [mode]);
+  const theme = react.useMemo(
+    () => resolvedMode === "dark" ? darkTheme : lightTheme,
+    [resolvedMode, lightTheme, darkTheme]
+  );
+  const isDark = resolvedMode === "dark";
+  const isLight = resolvedMode === "light";
+  react.useEffect(() => {
+    if (!themeUrl) return;
+    setIsLoading(true);
+    setError(null);
+    loadThemeFromUrl(themeUrl).then((urlTheme) => {
+      if (urlTheme) {
+        setLightTheme((prev) => deepMerge(prev, urlTheme));
+        setDarkTheme((prev) => deepMerge(prev, urlTheme));
+      }
+    }).catch((err) => {
+      setError(err instanceof Error ? err.message : "Failed to load theme");
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [themeUrl]);
+  react.useEffect(() => {
+    if (typeof window !== "undefined") {
+      injectCssVars(theme, cssVarPrefix);
+    }
+  }, [theme, cssVarPrefix]);
+  react.useEffect(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", resolvedMode);
+      document.documentElement.style.colorScheme = resolvedMode;
+    }
+  }, [resolvedMode]);
+  react.useEffect(() => {
+    if (!enableSystemTheme || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (mode === "system") {
+        setModeState("system");
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mode, enableSystemTheme]);
+  react.useEffect(() => {
+    if (persistTheme && typeof window !== "undefined") {
+      saveThemeMode(mode, storageKey);
+    }
+  }, [mode, persistTheme, storageKey]);
+  const setMode = react.useCallback((newMode) => {
+    setModeState(newMode);
+  }, []);
+  const toggleMode = react.useCallback(() => {
+    setModeState((prev) => {
+      const current = resolveThemeMode(prev);
+      return current === "dark" ? "light" : "dark";
+    });
+  }, []);
+  const updateTheme = react.useCallback((updates) => {
+    setLightTheme((prev) => deepMerge(prev, updates));
+    setDarkTheme((prev) => deepMerge(prev, updates));
+  }, []);
+  const resetTheme = react.useCallback(() => {
+    let light = defaultLightTheme;
+    let dark = defaultDarkTheme;
+    if (brandIdentity) {
+      light = createThemeFromBrand(brandIdentity, light);
+      dark = createThemeFromBrand(brandIdentity, dark);
+    }
+    if (lightOverrides) {
+      light = deepMerge(light, lightOverrides);
+    }
+    if (darkOverrides) {
+      dark = deepMerge(dark, darkOverrides);
+    }
+    setLightTheme(light);
+    setDarkTheme(dark);
+  }, [brandIdentity, lightOverrides, darkOverrides]);
+  const contextValue = react.useMemo(
+    () => ({
+      theme,
+      mode,
+      setMode,
+      toggleMode,
+      updateTheme,
+      resetTheme,
+      isDark,
+      isLight,
+      isLoading,
+      error
+    }),
+    [theme, mode, setMode, toggleMode, updateTheme, resetTheme, isDark, isLight, isLoading, error]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+function cssVar(path, prefix = "--ec") {
+  return `var(${prefix}-${path.replace(/\./g, "-")})`;
+}
+function useThemeValue(selector) {
+  const { theme } = useTheme();
+  return selector(theme);
+}
+function ThemeToggle({
+  className = "",
+  size = 24,
+  showLabel = false,
+  lightLabel = "Light",
+  darkLabel = "Dark"
+}) {
+  const { isDark, toggleMode } = useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: toggleMode,
+      className: `ec-theme-toggle ${className}`,
+      "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        padding: "0.5rem",
+        borderRadius: "0.375rem",
+        transition: "background-color 200ms ease-in-out"
+      },
+      children: [
+        isDark ? (
+          // Sun icon for dark mode (click to go light)
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: size,
+              height: size,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+              ]
+            }
+          )
+        ) : (
+          // Moon icon for light mode (click to go dark)
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: size,
+              height: size,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+            }
+          )
+        ),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: isDark ? darkLabel : lightLabel })
+      ]
+    }
+  );
+}
+
+// src/client/web/astro/types.ts
+function dummyImage(width, height, text, bgColor = "cccccc", textColor = "969696") {
+  const label = text ? `&text=${encodeURIComponent(text)}` : "";
+  return `https://dummyimage.com/${width}x${height}/${bgColor}/${textColor}${label}`;
+}
+function loremIpsum(type = "paragraph", count = 1) {
+  const words = [
+    "lorem",
+    "ipsum",
+    "dolor",
+    "sit",
+    "amet",
+    "consectetur",
+    "adipiscing",
+    "elit",
+    "sed",
+    "do",
+    "eiusmod",
+    "tempor",
+    "incididunt",
+    "ut",
+    "labore",
+    "et",
+    "dolore",
+    "magna",
+    "aliqua",
+    "enim",
+    "ad",
+    "minim",
+    "veniam",
+    "quis",
+    "nostrud",
+    "exercitation",
+    "ullamco",
+    "laboris",
+    "nisi",
+    "aliquip",
+    "ex",
+    "ea",
+    "commodo",
+    "consequat",
+    "duis",
+    "aute",
+    "irure",
+    "in",
+    "reprehenderit",
+    "voluptate",
+    "velit",
+    "esse",
+    "cillum",
+    "fugiat",
+    "nulla",
+    "pariatur",
+    "excepteur",
+    "sint",
+    "occaecat",
+    "cupidatat",
+    "non",
+    "proident",
+    "sunt",
+    "culpa",
+    "qui",
+    "officia",
+    "deserunt",
+    "mollit",
+    "anim",
+    "id",
+    "est",
+    "laborum"
+  ];
+  const getWords = (n) => {
+    const result = [];
+    for (let i = 0; i < n; i++) {
+      result.push(words[Math.floor(Math.random() * words.length)]);
+    }
+    return result;
+  };
+  const capitalize2 = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+  if (type === "word") {
+    return getWords(count).join(" ");
+  }
+  if (type === "sentence") {
+    const sentences = [];
+    for (let i = 0; i < count; i++) {
+      const sentence = capitalize2(getWords(Math.floor(Math.random() * 10) + 5).join(" ")) + ".";
+      sentences.push(sentence);
+    }
+    return sentences.join(" ");
+  }
+  const paragraphs = [];
+  for (let i = 0; i < count; i++) {
+    const sentences = [];
+    const sentenceCount = Math.floor(Math.random() * 4) + 3;
+    for (let j = 0; j < sentenceCount; j++) {
+      sentences.push(capitalize2(getWords(Math.floor(Math.random() * 10) + 5).join(" ")) + ".");
+    }
+    paragraphs.push(sentences.join(" "));
+  }
+  return paragraphs.join("\n\n");
+}
+var dummyHeaderData = {
+  logo: dummyImage(120, 40, "Logo"),
+  logoAlt: "Company Logo",
+  navLinks: [
+    { text: "Home", href: "/", active: true },
+    { text: "About", href: "/about" },
+    { text: "Services", href: "/services" },
+    { text: "Blog", href: "/blog" },
+    { text: "Contact", href: "/contact" }
+  ],
+  cta: {
+    text: "Get Started",
+    href: "/signup",
+    variant: "primary"
+  },
+  sticky: true
+};
+var dummyFooterData = {
+  logo: dummyImage(120, 40, "Logo"),
+  logoAlt: "Company Logo",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.",
+  columns: [
+    {
+      title: "Product",
+      links: [
+        { text: "Features", href: "/features" },
+        { text: "Pricing", href: "/pricing" },
+        { text: "Integrations", href: "/integrations" },
+        { text: "API", href: "/api" }
+      ]
+    },
+    {
+      title: "Company",
+      links: [
+        { text: "About", href: "/about" },
+        { text: "Blog", href: "/blog" },
+        { text: "Careers", href: "/careers" },
+        { text: "Contact", href: "/contact" }
+      ]
+    },
+    {
+      title: "Legal",
+      links: [
+        { text: "Privacy Policy", href: "/privacy" },
+        { text: "Terms of Service", href: "/terms" },
+        { text: "Cookie Policy", href: "/cookies" }
+      ]
+    }
+  ],
+  socialLinks: [
+    { platform: "twitter", href: "https://twitter.com" },
+    { platform: "facebook", href: "https://facebook.com" },
+    { platform: "instagram", href: "https://instagram.com" },
+    { platform: "linkedin", href: "https://linkedin.com" },
+    { platform: "github", href: "https://github.com" }
+  ],
+  copyright: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} Company Name. All rights reserved.`
+};
+var dummyBannerData = {
+  title: "Build Something Amazing Today",
+  subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  backgroundImage: dummyImage(1920, 800, "Hero+Background", "1e293b", "334155"),
+  primaryCta: {
+    text: "Get Started Free",
+    href: "/signup",
+    variant: "primary"
+  },
+  secondaryCta: {
+    text: "Learn More",
+    href: "/about",
+    variant: "outline"
+  },
+  height: "lg",
+  align: "center"
+};
+var dummyFeatures = [
+  {
+    title: "Lightning Fast",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>'
+  },
+  {
+    title: "Secure & Reliable",
+    description: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>'
+  },
+  {
+    title: "Easy to Use",
+    description: "Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>'
+  }
+];
+var dummyTestimonials = [
+  {
+    name: "John Doe",
+    role: "CEO",
+    company: "Tech Corp",
+    avatar: dummyImage(80, 80, "JD", "3b82f6", "ffffff"),
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    rating: 5
+  },
+  {
+    name: "Jane Smith",
+    role: "CTO",
+    company: "Startup Inc",
+    avatar: dummyImage(80, 80, "JS", "10b981", "ffffff"),
+    text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    rating: 5
+  },
+  {
+    name: "Bob Wilson",
+    role: "Product Manager",
+    company: "Enterprise Co",
+    avatar: dummyImage(80, 80, "BW", "f59e0b", "ffffff"),
+    text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    rating: 4
+  }
+];
+var dummyPricingPlans = [
+  {
+    name: "Starter",
+    description: "Perfect for individuals",
+    price: "$9",
+    period: "/month",
+    features: [
+      { text: "5 Projects", included: true },
+      { text: "10GB Storage", included: true },
+      { text: "Email Support", included: true },
+      { text: "API Access", included: false },
+      { text: "Custom Domain", included: false }
+    ],
+    ctaText: "Start Free Trial",
+    ctaHref: "/signup?plan=starter"
+  },
+  {
+    name: "Professional",
+    description: "Best for growing teams",
+    price: "$29",
+    period: "/month",
+    features: [
+      { text: "Unlimited Projects", included: true },
+      { text: "100GB Storage", included: true },
+      { text: "Priority Support", included: true },
+      { text: "API Access", included: true },
+      { text: "Custom Domain", included: false }
+    ],
+    ctaText: "Start Free Trial",
+    ctaHref: "/signup?plan=pro",
+    popular: true,
+    badge: "Most Popular"
+  },
+  {
+    name: "Enterprise",
+    description: "For large organizations",
+    price: "$99",
+    period: "/month",
+    features: [
+      { text: "Unlimited Projects", included: true },
+      { text: "Unlimited Storage", included: true },
+      { text: "24/7 Support", included: true },
+      { text: "API Access", included: true },
+      { text: "Custom Domain", included: true }
+    ],
+    ctaText: "Contact Sales",
+    ctaHref: "/contact?plan=enterprise"
+  }
+];
+var dummyFaqItems = [
+  {
+    question: "What is your refund policy?",
+    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  },
+  {
+    question: "How do I cancel my subscription?",
+    answer: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+  },
+  {
+    question: "Can I change my plan later?",
+    answer: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+  },
+  {
+    question: "Do you offer discounts for non-profits?",
+    answer: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+  }
+];
+
+// src/client/web/forms/types.ts
+var VALIDATION_MESSAGES = {
+  required: "This field is required",
+  email: "Please enter a valid email address",
+  phone: "Please enter a valid phone number",
+  minLength: (min) => `Must be at least ${min} characters`,
+  maxLength: (max) => `Must be no more than ${max} characters`,
+  passwordMatch: "Passwords must match",
+  acceptTerms: "You must accept the terms and conditions",
+  passwordUppercase: "Password must contain at least one uppercase letter",
+  passwordLowercase: "Password must contain at least one lowercase letter",
+  passwordNumber: "Password must contain at least one number",
+  passwordSpecial: "Password must contain at least one special character"
+};
+var contactFormSchema = Yup__namespace.object().shape({
+  name: Yup__namespace.string().required(VALIDATION_MESSAGES.required).min(2, VALIDATION_MESSAGES.minLength(2)).max(100, VALIDATION_MESSAGES.maxLength(100)),
+  email: Yup__namespace.string().required(VALIDATION_MESSAGES.required).email(VALIDATION_MESSAGES.email),
+  phone: Yup__namespace.string().matches(
+    /^[+]?[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/,
+    VALIDATION_MESSAGES.phone
+  ).nullable(),
+  subject: Yup__namespace.string().max(200, VALIDATION_MESSAGES.maxLength(200)).nullable(),
+  message: Yup__namespace.string().required(VALIDATION_MESSAGES.required).min(10, VALIDATION_MESSAGES.minLength(10)).max(2e3, VALIDATION_MESSAGES.maxLength(2e3))
+});
+var newsletterFormSchema = Yup__namespace.object().shape({
+  email: Yup__namespace.string().required(VALIDATION_MESSAGES.required).email(VALIDATION_MESSAGES.email),
+  firstName: Yup__namespace.string().min(2, VALIDATION_MESSAGES.minLength(2)).max(50, VALIDATION_MESSAGES.maxLength(50)).nullable(),
+  lastName: Yup__namespace.string().min(2, VALIDATION_MESSAGES.minLength(2)).max(50, VALIDATION_MESSAGES.maxLength(50)).nullable()
+});
+var loginFormSchema = Yup__namespace.object().shape({
+  email: Yup__namespace.string().required(VALIDATION_MESSAGES.required).email(VALIDATION_MESSAGES.email),
+  password: Yup__namespace.string().required(VALIDATION_MESSAGES.required).min(8, VALIDATION_MESSAGES.minLength(8)),
+  rememberMe: Yup__namespace.boolean()
+});
+function createRegisterFormSchema(requirements = {}) {
+  const {
+    minLength = 8,
+    requireUppercase = true,
+    requireLowercase = true,
+    requireNumber = true,
+    requireSpecial = false
+  } = requirements;
+  let passwordSchema = Yup__namespace.string().required(VALIDATION_MESSAGES.required).min(minLength, VALIDATION_MESSAGES.minLength(minLength));
+  if (requireUppercase) {
+    passwordSchema = passwordSchema.matches(
+      /[A-Z]/,
+      VALIDATION_MESSAGES.passwordUppercase
+    );
+  }
+  if (requireLowercase) {
+    passwordSchema = passwordSchema.matches(
+      /[a-z]/,
+      VALIDATION_MESSAGES.passwordLowercase
+    );
+  }
+  if (requireNumber) {
+    passwordSchema = passwordSchema.matches(
+      /[0-9]/,
+      VALIDATION_MESSAGES.passwordNumber
+    );
+  }
+  if (requireSpecial) {
+    passwordSchema = passwordSchema.matches(
+      /[!@#$%^&*(),.?":{}|<>]/,
+      VALIDATION_MESSAGES.passwordSpecial
+    );
+  }
+  return Yup__namespace.object().shape({
+    firstName: Yup__namespace.string().required(VALIDATION_MESSAGES.required).min(2, VALIDATION_MESSAGES.minLength(2)).max(50, VALIDATION_MESSAGES.maxLength(50)),
+    lastName: Yup__namespace.string().required(VALIDATION_MESSAGES.required).min(2, VALIDATION_MESSAGES.minLength(2)).max(50, VALIDATION_MESSAGES.maxLength(50)),
+    email: Yup__namespace.string().required(VALIDATION_MESSAGES.required).email(VALIDATION_MESSAGES.email),
+    password: passwordSchema,
+    confirmPassword: Yup__namespace.string().required(VALIDATION_MESSAGES.required).oneOf([Yup__namespace.ref("password")], VALIDATION_MESSAGES.passwordMatch),
+    acceptTerms: Yup__namespace.boolean().oneOf([true], VALIDATION_MESSAGES.acceptTerms)
+  });
+}
+var registerFormSchema = createRegisterFormSchema();
+var defaultInitialValues = {
+  name: "",
+  email: "",
+  phone: "",
+  subject: "",
+  message: ""
+};
+var defaultSubjectOptions = [
+  "General Inquiry",
+  "Support Request",
+  "Sales Question",
+  "Partnership",
+  "Feedback",
+  "Other"
+];
+function ContactForm({
+  actionUrl,
+  onSubmit,
+  initialValues,
+  showPhone = true,
+  showSubject = true,
+  subjectOptions = defaultSubjectOptions,
+  submitText = "Send Message",
+  successMessage = "Thank you! Your message has been sent successfully.",
+  className = "",
+  formClass = "",
+  inputClass = "",
+  labelClass = "",
+  buttonClass = "",
+  errorClass = ""
+}) {
+  const [submitStatus, setSubmitStatus] = react.useState("idle");
+  const [submitMessage, setSubmitMessage] = react.useState("");
+  const mergedInitialValues = {
+    ...defaultInitialValues,
+    ...initialValues
+  };
+  const baseInputClass = "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors";
+  const baseLabelClass = "block text-sm font-medium text-gray-700 mb-1";
+  const baseErrorClass = "text-sm text-red-600 mt-1";
+  const baseButtonClass = "w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+  const handleSubmit = async (values, { setSubmitting, resetForm }) => {
+    try {
+      let result;
+      if (onSubmit) {
+        result = await onSubmit(values);
+      } else if (actionUrl) {
+        const response = await fetch(actionUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(values)
+        });
+        result = await response.json();
+      } else {
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        result = { success: true };
+      }
+      if (result.success) {
+        setSubmitStatus("success");
+        setSubmitMessage(result.message || successMessage);
+        resetForm();
+      } else {
+        setSubmitStatus("error");
+        setSubmitMessage(result.message || "Something went wrong. Please try again.");
+      }
+    } catch (error) {
+      setSubmitStatus("error");
+      setSubmitMessage("An error occurred. Please try again later.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ec-contact-form ${className}`, children: submitStatus === "success" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 bg-green-50 border border-green-200 rounded-lg text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-12 h-12 text-green-500 mx-auto mb-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-green-800 font-medium", children: submitMessage }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setSubmitStatus("idle"),
+        className: "mt-4 text-green-600 hover:text-green-700 text-sm font-medium",
+        children: "Send another message"
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    formik.Formik,
+    {
+      initialValues: mergedInitialValues,
+      validationSchema: contactFormSchema,
+      onSubmit: handleSubmit,
+      children: ({ isSubmitting, errors, touched }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { className: `space-y-4 ${formClass}`, noValidate: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "contact-name", className: `${baseLabelClass} ${labelClass}`, children: [
+            "Name ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            formik.Field,
+            {
+              type: "text",
+              id: "contact-name",
+              name: "name",
+              placeholder: "John Doe",
+              className: `${baseInputClass} ${inputClass} ${errors.name && touched.name ? "border-red-500 focus:ring-red-500" : ""}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "name", component: "p", className: `${baseErrorClass} ${errorClass}` })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "contact-email", className: `${baseLabelClass} ${labelClass}`, children: [
+            "Email ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            formik.Field,
+            {
+              type: "email",
+              id: "contact-email",
+              name: "email",
+              placeholder: "john@example.com",
+              className: `${baseInputClass} ${inputClass} ${errors.email && touched.email ? "border-red-500 focus:ring-red-500" : ""}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "email", component: "p", className: `${baseErrorClass} ${errorClass}` })
+        ] }),
+        showPhone && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "contact-phone", className: `${baseLabelClass} ${labelClass}`, children: "Phone" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            formik.Field,
+            {
+              type: "tel",
+              id: "contact-phone",
+              name: "phone",
+              placeholder: "+1 (555) 000-0000",
+              className: `${baseInputClass} ${inputClass} ${errors.phone && touched.phone ? "border-red-500 focus:ring-red-500" : ""}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "phone", component: "p", className: `${baseErrorClass} ${errorClass}` })
+        ] }),
+        showSubject && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "contact-subject", className: `${baseLabelClass} ${labelClass}`, children: "Subject" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            formik.Field,
+            {
+              as: "select",
+              id: "contact-subject",
+              name: "subject",
+              className: `${baseInputClass} ${inputClass}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select a subject..." }),
+                subjectOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "subject", component: "p", className: `${baseErrorClass} ${errorClass}` })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "contact-message", className: `${baseLabelClass} ${labelClass}`, children: [
+            "Message ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            formik.Field,
+            {
+              as: "textarea",
+              id: "contact-message",
+              name: "message",
+              rows: 5,
+              placeholder: "Your message...",
+              className: `${baseInputClass} ${inputClass} resize-none ${errors.message && touched.message ? "border-red-500 focus:ring-red-500" : ""}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "message", component: "p", className: `${baseErrorClass} ${errorClass}` })
+        ] }),
+        submitStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-800 text-sm", children: submitMessage }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isSubmitting,
+            className: `${baseButtonClass} ${buttonClass}`,
+            children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin w-5 h-5", fill: "none", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+              ] }),
+              "Sending..."
+            ] }) : submitText
+          }
+        )
+      ] })
+    }
+  ) });
+}
+var defaultInitialValues2 = {
+  email: "",
+  firstName: "",
+  lastName: ""
+};
+function NewsletterForm({
+  actionUrl,
+  onSubmit,
+  initialValues,
+  showName = false,
+  placeholder = "Enter your email",
+  submitText = "Subscribe",
+  successMessage = "Thank you for subscribing!",
+  layout = "inline",
+  className = "",
+  formClass = "",
+  inputClass = "",
+  buttonClass = ""
+}) {
+  const [submitStatus, setSubmitStatus] = react.useState("idle");
+  const [submitMessage, setSubmitMessage] = react.useState("");
+  const mergedInitialValues = {
+    ...defaultInitialValues2,
+    ...initialValues
+  };
+  const baseInputClass = "px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors";
+  const baseButtonClass = "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+  const handleSubmit = async (values, { setSubmitting, resetForm }) => {
+    try {
+      let result;
+      if (onSubmit) {
+        result = await onSubmit(values);
+      } else if (actionUrl) {
+        const response = await fetch(actionUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(values)
+        });
+        result = await response.json();
+      } else {
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        result = { success: true };
+      }
+      if (result.success) {
+        setSubmitStatus("success");
+        setSubmitMessage(result.message || successMessage);
+        resetForm();
+      } else {
+        setSubmitStatus("error");
+        setSubmitMessage(result.message || "Something went wrong. Please try again.");
+      }
+    } catch (error) {
+      setSubmitStatus("error");
+      setSubmitMessage("An error occurred. Please try again later.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  if (submitStatus === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ec-newsletter-form ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-green-800 font-medium", children: submitMessage }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSubmitStatus("idle"),
+          className: "mt-2 text-green-600 hover:text-green-700 text-sm",
+          children: "Subscribe another email"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `ec-newsletter-form ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.Formik,
+      {
+        initialValues: mergedInitialValues,
+        validationSchema: newsletterFormSchema,
+        onSubmit: handleSubmit,
+        children: ({ isSubmitting, errors, touched }) => /* @__PURE__ */ jsxRuntime.jsxs(
+          formik.Form,
+          {
+            className: `${layout === "inline" ? "flex flex-col sm:flex-row gap-3" : "space-y-4"} ${formClass}`,
+            noValidate: true,
+            children: [
+              showName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: layout === "inline" ? "flex gap-3 flex-1" : "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    formik.Field,
+                    {
+                      type: "text",
+                      name: "firstName",
+                      placeholder: "First name",
+                      className: `w-full ${baseInputClass} ${inputClass} ${errors.firstName && touched.firstName ? "border-red-500" : ""}`
+                    }
+                  ),
+                  layout === "stacked" && /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "firstName", component: "p", className: "text-sm text-red-600 mt-1" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    formik.Field,
+                    {
+                      type: "text",
+                      name: "lastName",
+                      placeholder: "Last name",
+                      className: `w-full ${baseInputClass} ${inputClass} ${errors.lastName && touched.lastName ? "border-red-500" : ""}`
+                    }
+                  ),
+                  layout === "stacked" && /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "lastName", component: "p", className: "text-sm text-red-600 mt-1" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: layout === "inline" ? "flex-1" : "", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  formik.Field,
+                  {
+                    type: "email",
+                    name: "email",
+                    placeholder,
+                    className: `w-full ${baseInputClass} ${inputClass} ${errors.email && touched.email ? "border-red-500" : ""}`
+                  }
+                ),
+                layout === "stacked" && /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "email", component: "p", className: "text-sm text-red-600 mt-1" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "submit",
+                  disabled: isSubmitting,
+                  className: `${baseButtonClass} ${buttonClass} ${layout === "stacked" ? "w-full" : ""}`,
+                  children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin w-5 h-5", fill: "none", viewBox: "0 0 24 24", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+                    ] }),
+                    "Subscribing..."
+                  ] }) : submitText
+                }
+              ),
+              layout === "inline" && errors.email && touched.email && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:w-auto", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600", children: errors.email }) })
+            ]
+          }
+        )
+      }
+    ),
+    submitStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-4 bg-red-50 border border-red-200 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-800 text-sm", children: submitMessage }) })
+  ] });
+}
+var defaultInitialValues3 = {
+  email: "",
+  password: "",
+  rememberMe: false
+};
+function LoginForm({
+  actionUrl,
+  onSubmit,
+  initialValues,
+  showRememberMe = true,
+  forgotPasswordLink = "/forgot-password",
+  registerLink = "/register",
+  submitText = "Sign In",
+  successRedirect,
+  className = "",
+  formClass = "",
+  inputClass = "",
+  buttonClass = ""
+}) {
+  const [submitStatus, setSubmitStatus] = react.useState("idle");
+  const [submitMessage, setSubmitMessage] = react.useState("");
+  const [showPassword, setShowPassword] = react.useState(false);
+  const mergedInitialValues = {
+    ...defaultInitialValues3,
+    ...initialValues
+  };
+  const baseInputClass = "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors";
+  const baseLabelClass = "block text-sm font-medium text-gray-700 mb-1";
+  const baseErrorClass = "text-sm text-red-600 mt-1";
+  const baseButtonClass = "w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+  const handleSubmit = async (values, { setSubmitting }) => {
+    try {
+      let result;
+      if (onSubmit) {
+        result = await onSubmit(values);
+      } else if (actionUrl) {
+        const response = await fetch(actionUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(values)
+        });
+        result = await response.json();
+      } else {
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        result = { success: true };
+      }
+      if (result.success) {
+        setSubmitStatus("success");
+        setSubmitMessage(result.message || "Login successful!");
+        if (successRedirect && typeof window !== "undefined") {
+          window.location.href = successRedirect;
+        }
+      } else {
+        setSubmitStatus("error");
+        setSubmitMessage(result.message || "Invalid email or password.");
+      }
+    } catch (error) {
+      setSubmitStatus("error");
+      setSubmitMessage("An error occurred. Please try again later.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ec-login-form ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    formik.Formik,
+    {
+      initialValues: mergedInitialValues,
+      validationSchema: loginFormSchema,
+      onSubmit: handleSubmit,
+      children: ({ isSubmitting, errors, touched }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { className: `space-y-4 ${formClass}`, noValidate: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "login-email", className: baseLabelClass, children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            formik.Field,
+            {
+              type: "email",
+              id: "login-email",
+              name: "email",
+              placeholder: "you@example.com",
+              autoComplete: "email",
+              className: `${baseInputClass} ${inputClass} ${errors.email && touched.email ? "border-red-500 focus:ring-red-500" : ""}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "email", component: "p", className: baseErrorClass })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "login-password", className: baseLabelClass, children: "Password" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              formik.Field,
+              {
+                type: showPassword ? "text" : "password",
+                id: "login-password",
+                name: "password",
+                placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                autoComplete: "current-password",
+                className: `${baseInputClass} ${inputClass} pr-12 ${errors.password && touched.password ? "border-red-500 focus:ring-red-500" : ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowPassword(!showPassword),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700",
+                tabIndex: -1,
+                children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "password", component: "p", className: baseErrorClass })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          showRememberMe && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              formik.Field,
+              {
+                type: "checkbox",
+                name: "rememberMe",
+                className: "w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-600", children: "Remember me" })
+          ] }),
+          forgotPasswordLink && /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: forgotPasswordLink,
+              className: "text-sm text-blue-600 hover:text-blue-700 font-medium",
+              children: "Forgot password?"
+            }
+          )
+        ] }),
+        submitStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-800 text-sm", children: submitMessage }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isSubmitting,
+            className: `${baseButtonClass} ${buttonClass}`,
+            children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin w-5 h-5", fill: "none", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+              ] }),
+              "Signing in..."
+            ] }) : submitText
+          }
+        ),
+        registerLink && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-sm text-gray-600", children: [
+          "Don't have an account?",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("a", { href: registerLink, className: "text-blue-600 hover:text-blue-700 font-medium", children: "Sign up" })
+        ] })
+      ] })
+    }
+  ) });
+}
+var defaultInitialValues4 = {
+  firstName: "",
+  lastName: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+  acceptTerms: false
+};
+function RegisterForm({
+  actionUrl,
+  onSubmit,
+  initialValues,
+  termsLink = "/terms",
+  privacyLink = "/privacy",
+  loginLink = "/login",
+  submitText = "Create Account",
+  successRedirect,
+  passwordRequirements = {
+    minLength: 8,
+    requireUppercase: true,
+    requireLowercase: true,
+    requireNumber: true,
+    requireSpecial: false
+  },
+  className = "",
+  formClass = "",
+  inputClass = "",
+  buttonClass = ""
+}) {
+  const [submitStatus, setSubmitStatus] = react.useState("idle");
+  const [submitMessage, setSubmitMessage] = react.useState("");
+  const [showPassword, setShowPassword] = react.useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = react.useState(false);
+  const mergedInitialValues = {
+    ...defaultInitialValues4,
+    ...initialValues
+  };
+  const validationSchema = createRegisterFormSchema(passwordRequirements);
+  const baseInputClass = "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors";
+  const baseLabelClass = "block text-sm font-medium text-gray-700 mb-1";
+  const baseErrorClass = "text-sm text-red-600 mt-1";
+  const baseButtonClass = "w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+  const handleSubmit = async (values, { setSubmitting }) => {
+    try {
+      let result;
+      if (onSubmit) {
+        result = await onSubmit(values);
+      } else if (actionUrl) {
+        const response = await fetch(actionUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(values)
+        });
+        result = await response.json();
+      } else {
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        result = { success: true };
+      }
+      if (result.success) {
+        setSubmitStatus("success");
+        setSubmitMessage(result.message || "Account created successfully!");
+        if (successRedirect && typeof window !== "undefined") {
+          window.location.href = successRedirect;
+        }
+      } else {
+        setSubmitStatus("error");
+        setSubmitMessage(result.message || "Registration failed. Please try again.");
+      }
+    } catch (error) {
+      setSubmitStatus("error");
+      setSubmitMessage("An error occurred. Please try again later.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  if (submitStatus === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ec-register-form ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 bg-green-50 border border-green-200 rounded-lg text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-12 h-12 text-green-500 mx-auto mb-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-green-800 font-medium", children: submitMessage }),
+      loginLink && /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: loginLink,
+          className: "inline-block mt-4 text-green-600 hover:text-green-700 font-medium",
+          children: "Sign in to your account"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ec-register-form ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    formik.Formik,
+    {
+      initialValues: mergedInitialValues,
+      validationSchema,
+      onSubmit: handleSubmit,
+      children: ({ isSubmitting, errors, touched }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { className: `space-y-4 ${formClass}`, noValidate: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "register-firstName", className: baseLabelClass, children: [
+              "First Name ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              formik.Field,
+              {
+                type: "text",
+                id: "register-firstName",
+                name: "firstName",
+                placeholder: "John",
+                autoComplete: "given-name",
+                className: `${baseInputClass} ${inputClass} ${errors.firstName && touched.firstName ? "border-red-500 focus:ring-red-500" : ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "firstName", component: "p", className: baseErrorClass })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "register-lastName", className: baseLabelClass, children: [
+              "Last Name ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              formik.Field,
+              {
+                type: "text",
+                id: "register-lastName",
+                name: "lastName",
+                placeholder: "Doe",
+                autoComplete: "family-name",
+                className: `${baseInputClass} ${inputClass} ${errors.lastName && touched.lastName ? "border-red-500 focus:ring-red-500" : ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "lastName", component: "p", className: baseErrorClass })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "register-email", className: baseLabelClass, children: [
+            "Email ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            formik.Field,
+            {
+              type: "email",
+              id: "register-email",
+              name: "email",
+              placeholder: "you@example.com",
+              autoComplete: "email",
+              className: `${baseInputClass} ${inputClass} ${errors.email && touched.email ? "border-red-500 focus:ring-red-500" : ""}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "email", component: "p", className: baseErrorClass })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "register-password", className: baseLabelClass, children: [
+            "Password ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              formik.Field,
+              {
+                type: showPassword ? "text" : "password",
+                id: "register-password",
+                name: "password",
+                placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                autoComplete: "new-password",
+                className: `${baseInputClass} ${inputClass} pr-12 ${errors.password && touched.password ? "border-red-500 focus:ring-red-500" : ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowPassword(!showPassword),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700",
+                tabIndex: -1,
+                children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "password", component: "p", className: baseErrorClass }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [
+            "Min ",
+            passwordRequirements.minLength,
+            " characters",
+            passwordRequirements.requireUppercase && ", uppercase",
+            passwordRequirements.requireLowercase && ", lowercase",
+            passwordRequirements.requireNumber && ", number",
+            passwordRequirements.requireSpecial && ", special character"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "register-confirmPassword", className: baseLabelClass, children: [
+            "Confirm Password ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              formik.Field,
+              {
+                type: showConfirmPassword ? "text" : "password",
+                id: "register-confirmPassword",
+                name: "confirmPassword",
+                placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                autoComplete: "new-password",
+                className: `${baseInputClass} ${inputClass} pr-12 ${errors.confirmPassword && touched.confirmPassword ? "border-red-500 focus:ring-red-500" : ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowConfirmPassword(!showConfirmPassword),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700",
+                tabIndex: -1,
+                children: showConfirmPassword ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "confirmPassword", component: "p", className: baseErrorClass })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2 cursor-pointer", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              formik.Field,
+              {
+                type: "checkbox",
+                name: "acceptTerms",
+                className: "w-4 h-4 mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600", children: [
+              "I agree to the",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: termsLink, className: "text-blue-600 hover:underline", target: "_blank", rel: "noopener noreferrer", children: "Terms of Service" }),
+              " ",
+              "and",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: privacyLink, className: "text-blue-600 hover:underline", target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: " *" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: "acceptTerms", component: "p", className: baseErrorClass })
+        ] }),
+        submitStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-800 text-sm", children: submitMessage }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isSubmitting,
+            className: `${baseButtonClass} ${buttonClass}`,
+            children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin w-5 h-5", fill: "none", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+              ] }),
+              "Creating account..."
+            ] }) : submitText
+          }
+        ),
+        loginLink && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-sm text-gray-600", children: [
+          "Already have an account?",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("a", { href: loginLink, className: "text-blue-600 hover:text-blue-700 font-medium", children: "Sign in" })
+        ] })
+      ] })
+    }
+  ) });
+}
+
 exports.ApiUrlBuilder = ApiUrlBuilder;
 exports.ClientLogger = ClientLogger;
+exports.ContactForm = ContactForm;
 exports.EventEmitter = EventEmitter;
+exports.LoginForm = LoginForm;
+exports.NewsletterForm = NewsletterForm;
+exports.RegisterForm = RegisterForm;
+exports.ThemeContext = ThemeContext;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;
+exports.VALIDATION_MESSAGES = VALIDATION_MESSAGES;
 exports.addDays = addDays;
+exports.adjustColor = adjustColor;
 exports.appEvents = appEvents;
 exports.camelToKebab = camelToKebab;
 exports.capitalize = capitalize;
 exports.capitalizeWords = capitalizeWords;
 exports.checkPackage = checkPackage;
 exports.clientLogger = clientLogger;
+exports.contactFormSchema = contactFormSchema;
 exports.copyToClipboard = copyToClipboard;
 exports.createApiEndpoints = createApiEndpoints;
 exports.createApiUrlBuilder = createApiUrlBuilder;
@@ -3014,21 +5656,42 @@ exports.createEmptyPaginationMeta = createEmptyPaginationMeta;
 exports.createErrorResponse = createErrorResponse;
 exports.createEventEmitter = createEventEmitter;
 exports.createHttpClient = createHttpClient;
+exports.createRegisterFormSchema = createRegisterFormSchema;
 exports.createSuccessResponse = createSuccessResponse;
+exports.createTheme = createTheme;
+exports.createThemeFromBrand = createThemeFromBrand;
+exports.cssVar = cssVar;
+exports.deepMerge = deepMerge;
+exports.defaultDarkTheme = defaultDarkTheme;
+exports.defaultLightTheme = defaultLightTheme;
+exports.dummyBannerData = dummyBannerData;
+exports.dummyFaqItems = dummyFaqItems;
+exports.dummyFeatures = dummyFeatures;
+exports.dummyFooterData = dummyFooterData;
+exports.dummyHeaderData = dummyHeaderData;
+exports.dummyImage = dummyImage;
+exports.dummyPricingPlans = dummyPricingPlans;
+exports.dummyTestimonials = dummyTestimonials;
 exports.endOfDay = endOfDay;
+exports.flattenToCssVars = flattenToCssVars;
 exports.formatDate = formatDate;
 exports.formatDateForInput = formatDateForInput;
 exports.formatDateTime = formatDateTime;
 exports.formatDateTimeForInput = formatDateTimeForInput;
 exports.formatPackageCheckResult = formatPackageCheckResult;
 exports.formatRelativeTime = formatRelativeTime;
+exports.generateCssVars = generateCssVars;
 exports.generateNcuCommand = generateNcuCommand;
+exports.getContrastColor = getContrastColor;
 exports.getErrorMessage = getErrorMessage;
 exports.getNextPage = getNextPage;
 exports.getPrevPage = getPrevPage;
 exports.getResponseData = getResponseData;
+exports.getSystemColorScheme = getSystemColorScheme;
 exports.hasData = hasData;
 exports.hasMorePages = hasMorePages;
+exports.hexToRgba = hexToRgba;
+exports.injectCssVars = injectCssVars;
 exports.isClipboardAvailable = isClipboardAvailable;
 exports.isErrorResponse = isErrorResponse;
 exports.isForbidden = isForbidden;
@@ -3042,11 +5705,20 @@ exports.isSuccessResponse = isSuccessResponse;
 exports.isToday = isToday;
 exports.isUnauthorized = isUnauthorized;
 exports.kebabToCamel = kebabToCamel;
+exports.loadThemeFromUrl = loadThemeFromUrl;
+exports.loadThemeMode = loadThemeMode;
+exports.loginFormSchema = loginFormSchema;
+exports.loremIpsum = loremIpsum;
+exports.newsletterFormSchema = newsletterFormSchema;
 exports.packageCheck = packageCheck;
 exports.parseError = parseError;
 exports.parseFullResponse = parseFullResponse;
 exports.parseResponse = parseResponse;
 exports.readFromClipboard = readFromClipboard;
+exports.registerFormSchema = registerFormSchema;
+exports.removeCssVars = removeCssVars;
+exports.resolveThemeMode = resolveThemeMode;
+exports.saveThemeMode = saveThemeMode;
 exports.slugify = slugify;
 exports.slugifyUnique = slugifyUnique;
 exports.startOfDay = startOfDay;
@@ -3104,7 +5776,9 @@ exports.useScript = useScript_default;
 exports.useSessionStorage = useSessionStorage_default;
 exports.useSet = useSet_default;
 exports.useSnackbar = useSnackbar_default;
+exports.useTheme = useTheme;
 exports.useThemeDetector = useThemeDetector_default;
+exports.useThemeValue = useThemeValue;
 exports.useThrottle = useThrottle_default;
 exports.useTimeout = useTimeout_default;
 exports.useToggle = useToggle_default;