@electroplix/components 0.5.0-alpha.10 → 0.5.0-alpha.11

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.5.0-alpha.11 (2026-06-27)
+
+### 🚀 Features
+
+- add ImageHero component with responsive design ([3f42f5b](https://github.com/electroplix/Design-System/commit/3f42f5b))
+
+### ❤️ Thank You
+
+- Adnan
+
 ## 0.5.0-alpha.10 (2026-06-27)
 
 ### 🩹 Fixes

package/dist/index.esm.js

@@ -354,7 +354,7 @@ function useBlogTheme() {
   return useElectroplixConfig().blog;
 }
 
-const _excluded$$ = ["name", "size", "color", "style"];
+const _excluded$10 = ["name", "size", "color", "style"];
 /**
  * Render an inline SVG icon by name.
  *
@@ -370,7 +370,7 @@ function Icon(_ref) {
       color = 'currentColor',
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$$);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   const path = ICON_PATHS[name];
   if (!path) return null;
   return jsx("svg", _extends({
@@ -2297,7 +2297,7 @@ const maxLengthRule = max => ({
   message: `Must be at most ${max} characters`
 });
 
-const _excluded$_ = ["as", "items", "orientation", "offset", "maxW", "px", "py", "radius", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
+const _excluded$$ = ["as", "items", "orientation", "offset", "maxW", "px", "py", "radius", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
 function AnchorLinks(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _items$0$targetId, _items$;
   let {
@@ -2318,7 +2318,7 @@ function AnchorLinks(_ref) {
       style = {},
       className = ''
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   const t = useNavTheme();
   const radius = (_ref2 = radiusProp != null ? radiusProp : t.radius) != null ? _ref2 : 16;
   const bgColor = (_ref3 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref3 : '#ffffff';
@@ -2415,7 +2415,7 @@ function AnchorLinks(_ref) {
   }));
 }
 
-const _excluded$Z = ["as", "items", "showHomeIcon", "maxW", "px", "py", "radius", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
+const _excluded$_ = ["as", "items", "showHomeIcon", "maxW", "px", "py", "radius", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
 function Breadcrumbs(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _rest$separatorColor;
   let {
@@ -2435,7 +2435,7 @@ function Breadcrumbs(_ref) {
       style = {},
       className = ''
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -2531,7 +2531,7 @@ function Breadcrumbs(_ref) {
   }));
 }
 
-const _excluded$Y = ["as", "languages", "current", "onChange", "px", "py", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
+const _excluded$Z = ["as", "languages", "current", "onChange", "px", "py", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
 function LanguageSelector(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _languages$find;
   let {
@@ -2550,7 +2550,7 @@ function LanguageSelector(_ref) {
       style = {},
       className = ''
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -2658,7 +2658,7 @@ function LanguageSelector(_ref) {
   }));
 }
 
-const _excluded$X = ["as", "label", "sections", "maxW", "px", "py", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
+const _excluded$Y = ["as", "label", "sections", "maxW", "px", "py", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
 function MegaMenu(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -2677,7 +2677,7 @@ function MegaMenu(_ref) {
       style = {},
       className = ''
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   const t = useNavTheme();
   (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -2824,7 +2824,7 @@ function MegaMenu(_ref) {
   }));
 }
 
-const _excluded$W = ["currentPage", "totalPages", "onPageChange", "maxVisible", "showFirstLast", "showPrevNext", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "fontSize", "radius", "gap", "className", "style"];
+const _excluded$X = ["currentPage", "totalPages", "onPageChange", "maxVisible", "showFirstLast", "showPrevNext", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "fontSize", "radius", "gap", "className", "style"];
 function Pagination(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -2845,7 +2845,7 @@ function Pagination(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$X);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -2973,7 +2973,7 @@ function Pagination(_ref) {
   }));
 }
 
-const _excluded$V = ["logoText", "links", "showSearch", "showCTA", "ctaText", "ctaHref", "sticky", "height", "padding", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$W = ["logoText", "links", "showSearch", "showCTA", "ctaText", "ctaHref", "sticky", "height", "padding", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function PrimaryNav(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0;
   let {
@@ -2994,7 +2994,7 @@ function PrimaryNav(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$W);
   const t = useNavTheme();
   const showSearch = (_ref2 = showSearchProp != null ? showSearchProp : t.showSearch) != null ? _ref2 : false;
   const showCTA = (_ref3 = showCTAProp != null ? showCTAProp : t.showCTA) != null ? _ref3 : false;
@@ -3141,7 +3141,7 @@ function PrimaryNav(_ref) {
   }));
 }
 
-const _excluded$U = ["items", "width", "padding", "gap", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$V = ["items", "width", "padding", "gap", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function SidebarMenu(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -3158,7 +3158,7 @@ function SidebarMenu(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -3289,7 +3289,7 @@ function SidebarMenu(_ref) {
   }));
 }
 
-const _excluded$T = ["links", "width", "padding", "gap", "overlayColor", "position", "logoText", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$U = ["links", "width", "padding", "gap", "overlayColor", "position", "logoText", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function SideDrawerNav(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -3308,7 +3308,7 @@ function SideDrawerNav(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -3467,7 +3467,7 @@ function SideDrawerNav(_ref) {
   }));
 }
 
-const _excluded$S = ["steps", "currentStep", "orientation", "showNumbers", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$T = ["steps", "currentStep", "orientation", "showNumbers", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function Stepper(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -3483,7 +3483,7 @@ function Stepper(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$T);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -3594,7 +3594,7 @@ function Stepper(_ref) {
   }));
 }
 
-const _excluded$R = ["tabs", "defaultTab", "orientation", "showUnderline", "radius", "padding", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$S = ["tabs", "defaultTab", "orientation", "showUnderline", "radius", "padding", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function Tabs(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _tabs$active;
   let {
@@ -3613,7 +3613,7 @@ function Tabs(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$S);
   const t = useNavTheme();
   const radius = (_ref2 = radiusProp != null ? radiusProp : t.radius) != null ? _ref2 : 14;
   const bgColor = (_ref3 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref3 : '#ffffff';
@@ -3734,7 +3734,7 @@ function Tabs(_ref) {
   }));
 }
 
-const _excluded$Q = ["columns", "copyright", "socialLinks", "logo", "logoAlt", "tagline", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "children", "className", "style"];
+const _excluded$R = ["columns", "copyright", "socialLinks", "logo", "logoAlt", "tagline", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "children", "className", "style"];
 function Footer(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _t$radius;
   let {
@@ -3753,7 +3753,7 @@ function Footer(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$R);
   const t = useNavTheme();
   const bg = (_ref2 = bgColor != null ? bgColor : t.bgColor) != null ? _ref2 : '#ffffff';
   const fg = (_ref3 = textColor != null ? textColor : t.textColor) != null ? _ref3 : '#09090b';
@@ -3915,8 +3915,8 @@ function Footer(_ref) {
   }));
 }
 
-const _excluded$P = ["as", "bgColor", "textColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className", "children"];
-const ui$z = {
+const _excluded$Q = ["as", "bgColor", "textColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className", "children"];
+const ui$A = {
   white: '#ffffff',
   text: '#18181b',
   border: '#e4e4e7'};
@@ -3938,9 +3938,9 @@ function HeroShell(props) {
       className = '',
       children
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$P);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$z.white;
-  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$z.text;
+    rest = _objectWithoutPropertiesLoose(props, _excluded$Q);
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$A.white;
+  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$A.text;
   return jsxs(Tag, _extends({
     className: className
   }, rest, {
@@ -3954,7 +3954,7 @@ function HeroShell(props) {
       paddingInline: px,
       paddingBlock: py,
       borderRadius: radius,
-      border: `1px solid ${ui$z.border}`,
+      border: `1px solid ${ui$A.border}`,
       position: 'relative',
       overflow: 'hidden',
       boxShadow: '0 1px 2px rgba(9,9,11,0.04)'
@@ -4007,8 +4007,8 @@ function HeroShell(props) {
   }));
 }
 
-const _excluded$O = ["as", "title", "subtitle", "ctaLabel", "onCta", "titleSize", "subtitleSize", "align", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
-const ui$y = {
+const _excluded$P = ["as", "title", "subtitle", "ctaLabel", "onCta", "titleSize", "subtitleSize", "align", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
+const ui$z = {
   white: '#ffffff',
   black: '#09090b',
   text: '#18181b',
@@ -4040,11 +4040,11 @@ function StaticHero(props) {
       style = {},
       className = ''
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$O);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$y.white;
-  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$y.text;
-  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$y.black;
-  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$y.border;
+    rest = _objectWithoutPropertiesLoose(props, _excluded$P);
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$z.white;
+  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$z.text;
+  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$z.black;
+  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$z.border;
   return jsxs(Tag, _extends({
     className: className,
     style: _extends({
@@ -4104,7 +4104,7 @@ function StaticHero(props) {
             gap: 8,
             padding: '8px 16px',
             borderRadius: 999,
-            background: ui$y.white,
+            background: ui$z.white,
             border: `1px solid ${border}`,
             marginBottom: 24,
             boxShadow: '0 1px 2px rgba(9,9,11,0.04)'
@@ -4134,7 +4134,7 @@ function StaticHero(props) {
         }), subtitle && jsx("p", {
           style: {
             fontSize: subtitleSize,
-            color: ui$y.muted,
+            color: ui$z.muted,
             marginTop: 20,
             marginBottom: 32,
             maxWidth: 600,
@@ -4158,7 +4158,7 @@ function StaticHero(props) {
               borderRadius: 12,
               border: `1px solid ${accent}`,
               background: accent,
-              color: ui$y.white,
+              color: ui$z.white,
               cursor: 'pointer',
               fontWeight: 700,
               fontSize: 16,
@@ -4178,7 +4178,7 @@ function StaticHero(props) {
               padding: '16px 28px',
               borderRadius: 12,
               border: `1px solid ${border}`,
-              background: ui$y.white,
+              background: ui$z.white,
               color: fg,
               cursor: 'pointer',
               fontWeight: 600,
@@ -4194,8 +4194,8 @@ function StaticHero(props) {
   }));
 }
 
-const _excluded$N = ["as", "slides", "autoplay", "intervalMs", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
-const ui$x = {
+const _excluded$O = ["as", "slides", "autoplay", "intervalMs", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
+const ui$y = {
   white: '#ffffff',
   black: '#09090b',
   text: '#18181b',
@@ -4228,11 +4228,11 @@ function CarouselHero(props) {
       style = {},
       className = ''
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$N);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$x.white;
-  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$x.text;
-  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$x.black;
-  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$x.border;
+    rest = _objectWithoutPropertiesLoose(props, _excluded$O);
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$y.white;
+  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$y.text;
+  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$y.black;
+  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$y.border;
   const slides = Array.isArray(rawSlides) && rawSlides.length > 0 ? rawSlides : [{
     image: '',
     title: 'Welcome to Our Platform',
@@ -4301,7 +4301,7 @@ function CarouselHero(props) {
           height: 400,
           borderRadius: 16,
           overflow: 'hidden',
-          background: ui$x.surface,
+          background: ui$y.surface,
           border: `1px solid ${border}`,
           boxShadow: '0 1px 2px rgba(9,9,11,0.04)'
         },
@@ -4322,20 +4322,20 @@ function CarouselHero(props) {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            background: ui$x.surface,
-            color: ui$x.muted
+            background: ui$y.surface,
+            color: ui$y.muted
           },
           children: [jsx(Icon, {
             name: "image",
             size: 64,
-            color: ui$x.muted,
+            color: ui$y.muted,
             style: {
               opacity: 0.55
             }
           }), jsxs("span", {
             style: {
               marginTop: 12,
-              color: ui$x.muted,
+              color: ui$y.muted,
               fontSize: 14,
               fontWeight: 500
             },
@@ -4354,8 +4354,8 @@ function CarouselHero(props) {
               height: 44,
               borderRadius: '999px',
               border: '1px solid rgba(255,255,255,0.18)',
-              background: ui$x.overlay,
-              color: ui$x.white,
+              background: ui$y.overlay,
+              color: ui$y.white,
               cursor: 'pointer',
               display: 'flex',
               alignItems: 'center',
@@ -4380,8 +4380,8 @@ function CarouselHero(props) {
               height: 44,
               borderRadius: '999px',
               border: '1px solid rgba(255,255,255,0.18)',
-              background: ui$x.overlay,
-              color: ui$x.white,
+              background: ui$y.overlay,
+              color: ui$y.white,
               cursor: 'pointer',
               display: 'flex',
               alignItems: 'center',
@@ -4413,7 +4413,7 @@ function CarouselHero(props) {
         }), current.subtitle && jsx("p", {
           style: {
             fontSize: subtitleSize,
-            color: ui$x.muted,
+            color: ui$y.muted,
             marginTop: 12,
             marginBottom: 0,
             lineHeight: 1.6
@@ -4435,7 +4435,7 @@ function CarouselHero(props) {
             height: 10,
             borderRadius: 999,
             border: `1px solid ${i === idx ? accent : border}`,
-            background: i === idx ? accent : ui$x.white,
+            background: i === idx ? accent : ui$y.white,
             cursor: 'pointer',
             transition: 'all 0.3s ease',
             boxShadow: i === idx ? '0 1px 2px rgba(9,9,11,0.12)' : '0 1px 2px rgba(9,9,11,0.04)'
@@ -4446,8 +4446,8 @@ function CarouselHero(props) {
   }));
 }
 
-const _excluded$M = ["as", "title", "subtitle", "bgImage", "overlay", "form", "buttonText", "onSubmit", "inputPlaceholder", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
-const ui$w = {
+const _excluded$N = ["as", "title", "subtitle", "bgImage", "overlay", "form", "buttonText", "onSubmit", "inputPlaceholder", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
+const ui$x = {
   white: '#ffffff',
   black: '#09090b',
   text: '#18181b',
@@ -4482,11 +4482,11 @@ function CTAOverlayHero(props) {
       style = {},
       className = ''
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$M);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$w.white;
-  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$w.text;
-  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$w.black;
-  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$w.border;
+    rest = _objectWithoutPropertiesLoose(props, _excluded$N);
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$x.white;
+  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$x.text;
+  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$x.black;
+  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$x.border;
   const [email, setEmail] = useState('');
   const [isHovered, setIsHovered] = useState(false);
   return jsxs(Tag, _extends({
@@ -4498,7 +4498,7 @@ function CTAOverlayHero(props) {
       backgroundImage: bgImage ? `url(${bgImage})` : undefined,
       backgroundSize: 'cover',
       backgroundPosition: 'center',
-      color: bgImage ? ui$w.white : fg,
+      color: bgImage ? ui$x.white : fg,
       fontFamily,
       minHeight: typeof minH === 'number' ? `${minH}px` : minH,
       padding: `${py}px ${px}px`,
@@ -4559,13 +4559,13 @@ function CTAOverlayHero(props) {
             fontWeight: 800,
             lineHeight: 1.05,
             letterSpacing: '-0.05em',
-            color: bgImage ? ui$w.white : fg
+            color: bgImage ? ui$x.white : fg
           },
           children: title
         }), subtitle && jsx("p", {
           style: {
             fontSize: subtitleSize,
-            color: bgImage ? 'rgba(255,255,255,0.78)' : ui$w.muted,
+            color: bgImage ? 'rgba(255,255,255,0.78)' : ui$x.muted,
             marginTop: 20,
             marginBottom: 0,
             maxWidth: 640,
@@ -4585,7 +4585,7 @@ function CTAOverlayHero(props) {
           gap: 6,
           alignItems: 'center',
           justifySelf: 'center',
-          background: bgImage ? 'rgba(255,255,255,0.12)' : ui$w.white,
+          background: bgImage ? 'rgba(255,255,255,0.12)' : ui$x.white,
           padding: 6,
           borderRadius: 16,
           border: `1px solid ${bgImage ? 'rgba(255,255,255,0.18)' : border}`,
@@ -4606,7 +4606,7 @@ function CTAOverlayHero(props) {
             style: {
               position: 'absolute',
               left: 16,
-              color: bgImage ? 'rgba(255,255,255,0.7)' : ui$w.muted
+              color: bgImage ? 'rgba(255,255,255,0.7)' : ui$x.muted
             }
           }), jsx("input", {
             name: "email",
@@ -4619,7 +4619,7 @@ function CTAOverlayHero(props) {
               border: 'none',
               outline: 'none',
               background: 'transparent',
-              color: bgImage ? ui$w.white : fg,
+              color: bgImage ? ui$x.white : fg,
               width: 280,
               fontSize: 15,
               boxSizing: 'border-box'
@@ -4634,7 +4634,7 @@ function CTAOverlayHero(props) {
             borderRadius: 12,
             border: `1px solid ${accent}`,
             background: accent,
-            color: ui$w.white,
+            color: ui$x.white,
             cursor: 'pointer',
             fontWeight: 700,
             fontSize: 15,
@@ -4665,7 +4665,7 @@ function CTAOverlayHero(props) {
             borderRadius: 12,
             border: `1px solid ${accent}`,
             background: accent,
-            color: ui$w.white,
+            color: ui$x.white,
             cursor: 'pointer',
             fontWeight: 700,
             fontSize: 16,
@@ -4684,8 +4684,8 @@ function CTAOverlayHero(props) {
             padding: '16px 32px',
             borderRadius: 12,
             border: `1px solid ${bgImage ? 'rgba(255,255,255,0.22)' : border}`,
-            background: bgImage ? 'rgba(255,255,255,0.1)' : ui$w.white,
-            color: bgImage ? ui$w.white : fg,
+            background: bgImage ? 'rgba(255,255,255,0.1)' : ui$x.white,
+            color: bgImage ? ui$x.white : fg,
             cursor: 'pointer',
             fontWeight: 600,
             fontSize: 16,
@@ -4708,7 +4708,7 @@ function CTAOverlayHero(props) {
           justifyContent: 'center',
           gap: 24,
           flexWrap: 'wrap',
-          color: bgImage ? 'rgba(255,255,255,0.7)' : ui$w.muted,
+          color: bgImage ? 'rgba(255,255,255,0.7)' : ui$x.muted,
           fontSize: 13,
           fontWeight: 500
         },
@@ -4724,6 +4724,557 @@ function CTAOverlayHero(props) {
   }));
 }
 
+const _excluded$M = ["as", "eyebrow", "title", "titleAccent", "titleSuffix", "subtitle", "ctaLabel", "ctaHref", "ctaSecondaryLabel", "ctaSecondaryHref", "imageSrc", "imageAlt", "stats", "layout", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className", "children"];
+const ui$w = {
+  white: '#ffffff',
+  black: '#09090b',
+  muted: '#71717a'
+};
+/* ── Shared sub-components ──────────────────────────────────────── */
+function HeroEyebrow({
+  text,
+  accent,
+  fontFamily = 'sans-serif',
+  center,
+  isMobile
+}) {
+  if (isMobile) {
+    return jsx("span", {
+      style: {
+        color: accent,
+        fontFamily,
+        fontSize: 12,
+        fontWeight: 600,
+        letterSpacing: 6,
+        textTransform: 'uppercase',
+        display: 'block',
+        marginBottom: 24
+      },
+      children: text
+    });
+  }
+  return jsxs("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
+      marginBottom: 32,
+      justifyContent: center ? 'center' : 'flex-start'
+    },
+    children: [jsx("div", {
+      style: {
+        width: 48,
+        height: 1,
+        background: accent
+      }
+    }), jsx("span", {
+      style: {
+        color: accent,
+        fontFamily,
+        fontSize: 12,
+        fontWeight: 600,
+        letterSpacing: 4
+      },
+      children: text
+    }), jsx("div", {
+      style: {
+        width: 48,
+        height: 1,
+        background: accent
+      }
+    })]
+  });
+}
+function HeroCTAs({
+  ctaLabel,
+  ctaHref,
+  ctaSecondaryLabel,
+  ctaSecondaryHref,
+  accent,
+  fg,
+  fontFamily = 'sans-serif',
+  radius,
+  isMobile,
+  center
+}) {
+  if (!ctaLabel && !ctaSecondaryLabel) return null;
+  return jsxs("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: 12,
+      justifyContent: center ? 'center' : 'flex-start'
+    },
+    children: [ctaLabel && jsxs("a", {
+      href: ctaHref,
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: `${isMobile ? 12 : 16}px ${isMobile ? 24 : 32}px`,
+        background: accent,
+        color: ui$w.white,
+        fontFamily,
+        fontWeight: 700,
+        fontSize: isMobile ? 14 : 16,
+        letterSpacing: 1,
+        borderRadius: radius,
+        textDecoration: 'none',
+        transition: 'all 0.2s ease'
+      },
+      children: [ctaLabel, jsx(Icon, {
+        name: "arrow-right",
+        size: 18
+      })]
+    }), ctaSecondaryLabel && jsx("a", {
+      href: ctaSecondaryHref,
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: `${isMobile ? 12 : 16}px ${isMobile ? 24 : 32}px`,
+        border: '1px solid rgba(255,255,255,0.4)',
+        color: fg,
+        fontFamily,
+        fontWeight: 600,
+        fontSize: isMobile ? 14 : 16,
+        letterSpacing: 1,
+        borderRadius: radius,
+        textDecoration: 'none',
+        transition: 'all 0.2s ease'
+      },
+      children: ctaSecondaryLabel
+    })]
+  });
+}
+function HeroStats({
+  stats,
+  accent,
+  fontFamily = 'sans-serif',
+  isMobile,
+  center
+}) {
+  if (!stats || stats.length === 0) return null;
+  return jsx("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: isMobile ? 24 : 32,
+      marginTop: isMobile ? 40 : 48,
+      justifyContent: center ? 'center' : 'flex-start'
+    },
+    children: stats.map(stat => jsxs("div", {
+      children: [jsx("p", {
+        style: {
+          fontFamily,
+          color: accent,
+          fontSize: 24,
+          fontWeight: 700,
+          lineHeight: 1
+        },
+        children: stat.value
+      }), jsx("p", {
+        style: {
+          color: 'rgba(255,255,255,0.5)',
+          fontFamily,
+          fontSize: 10,
+          letterSpacing: 1.5,
+          marginTop: 4
+        },
+        children: stat.label.toUpperCase()
+      })]
+    }, stat.label))
+  });
+}
+/* ── Main component ────────────────────────────────────────────── */
+function ImageHero(props) {
+  var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _t$gap, _ref, _ref2, _ref3;
+  const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const {
+      as: Tag = 'section',
+      eyebrow = 'Welcome',
+      title = 'Build Something Amazing',
+      titleAccent,
+      titleSuffix,
+      subtitle,
+      ctaLabel,
+      ctaHref = '#',
+      ctaSecondaryLabel,
+      ctaSecondaryHref = '#',
+      imageSrc,
+      imageAlt = 'Hero image',
+      stats,
+      layout = 'split',
+      titleSize = 48,
+      subtitleSize = 18,
+      bgColor,
+      textColor,
+      accentColor,
+      fontFamily = t.fontFamily,
+      minH = (_t$minH = t.minH) != null ? _t$minH : '100vh',
+      maxW = (_t$maxW = t.maxW) != null ? _t$maxW : 1200,
+      px = (_t$px = t.px) != null ? _t$px : 24,
+      py = (_t$py = t.py) != null ? _t$py : 48,
+      radius = (_t$cardRadius = t.cardRadius) != null ? _t$cardRadius : 0,
+      gap = (_t$gap = t.gap) != null ? _t$gap : 24,
+      style = {},
+      className = '',
+      children
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$M);
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$w.black;
+  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : '#ffffff';
+  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : '#8B5CF6';
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 80 : py;
+  const subSize = isMobile ? Math.max(14, Math.floor(subtitleSize * 0.85)) : subtitleSize;
+  const overlay = `linear-gradient(135deg, ${bg}f2 0%, ${bg}99 60%, ${accent}14 100%)`;
+  const shared = {
+    accent,
+    fontFamily,
+    isMobile,
+    radius
+  };
+  // ── Minimal ──
+  if (layout === 'minimal') {
+    return jsxs(Tag, _extends({
+      className: className,
+      style: _extends({
+        position: 'relative',
+        minHeight: isMobile ? 'auto' : minH,
+        display: 'flex',
+        alignItems: 'center',
+        overflow: 'hidden',
+        background: bg
+      }, style)
+    }, rest, {
+      children: [!isMobile && jsxs(Fragment, {
+        children: [jsx("div", {
+          "aria-hidden": true,
+          style: {
+            position: 'absolute',
+            top: 80,
+            right: 80,
+            width: 160,
+            height: 160,
+            border: `2px solid ${accent}30`
+          }
+        }), jsx("div", {
+          "aria-hidden": true,
+          style: {
+            position: 'absolute',
+            bottom: 128,
+            left: 64,
+            width: 96,
+            height: 256,
+            background: `${accent}10`
+          }
+        }), jsx("div", {
+          "aria-hidden": true,
+          style: {
+            position: 'absolute',
+            top: '50%',
+            right: '33%',
+            width: 1,
+            height: 160,
+            background: accent
+          }
+        })]
+      }), jsx("div", {
+        style: {
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          maxWidth: maxW,
+          margin: '0 auto',
+          padding: `${pyPx}px ${rPx}px`
+        },
+        children: jsxs("div", {
+          style: {
+            maxWidth: 768
+          },
+          children: [jsx(HeroEyebrow, _extends({
+            text: eyebrow
+          }, shared)), jsxs("h1", {
+            style: {
+              fontFamily,
+              color: fg,
+              fontSize: 'clamp(2.2rem, 7vw, 5.5rem)',
+              fontWeight: 400,
+              lineHeight: 0.95,
+              letterSpacing: -1,
+              textTransform: 'uppercase',
+              marginTop: 16,
+              overflowWrap: 'break-word'
+            },
+            children: [title, titleAccent && jsxs(Fragment, {
+              children: [jsx("br", {}), jsx("span", {
+                style: {
+                  color: accent
+                },
+                children: titleAccent
+              })]
+            })]
+          }), subtitle && jsx("p", {
+            style: {
+              color: ui$w.muted,
+              fontFamily,
+              fontSize: subSize,
+              lineHeight: 1.8,
+              maxWidth: 400,
+              marginTop: isMobile ? 24 : 32,
+              marginBottom: isMobile ? 32 : 40
+            },
+            children: subtitle
+          }), jsx(HeroCTAs, _extends({
+            ctaLabel: ctaLabel,
+            ctaHref: ctaHref,
+            ctaSecondaryLabel: ctaSecondaryLabel,
+            ctaSecondaryHref: ctaSecondaryHref,
+            fg: fg
+          }, shared)), jsx(HeroStats, _extends({
+            stats: stats
+          }, shared))]
+        })
+      })]
+    }));
+  }
+  // ── Centered ──
+  if (layout === 'centered') {
+    return jsxs(Tag, _extends({
+      className: className,
+      style: _extends({
+        position: 'relative',
+        minHeight: isMobile ? 'auto' : minH,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        background: bg
+      }, style)
+    }, rest, {
+      children: [imageSrc && jsxs("div", {
+        style: {
+          position: 'absolute',
+          inset: 0
+        },
+        children: [jsx("img", {
+          src: imageSrc,
+          alt: imageAlt,
+          style: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover'
+          }
+        }), jsx("div", {
+          "aria-hidden": true,
+          style: {
+            position: 'absolute',
+            inset: 0,
+            background: overlay
+          }
+        })]
+      }), jsxs("div", {
+        style: {
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          maxWidth: isMobile ? '100%' : 800,
+          margin: '0 auto',
+          padding: `${pyPx}px ${rPx}px`,
+          textAlign: 'center'
+        },
+        children: [jsx(HeroEyebrow, _extends({
+          text: eyebrow
+        }, shared, {
+          center: true
+        })), jsxs("h1", {
+          style: {
+            fontFamily,
+            color: fg,
+            fontSize: `clamp(${isMobile ? '2rem' : '2.5rem'}, 6vw, 5.5rem)`,
+            lineHeight: 1.05,
+            letterSpacing: -1,
+            margin: 0
+          },
+          children: [title, titleAccent && jsxs(Fragment, {
+            children: [jsx("br", {}), jsx("em", {
+              style: {
+                color: accent,
+                fontStyle: 'italic'
+              },
+              children: titleAccent
+            })]
+          }), titleSuffix && ` ${titleSuffix}`]
+        }), subtitle && jsx("p", {
+          style: {
+            fontFamily,
+            color: 'rgba(255,255,255,0.7)',
+            fontSize: subSize,
+            lineHeight: 1.7,
+            maxWidth: 520,
+            margin: '20px auto 32px'
+          },
+          children: subtitle
+        }), jsx(HeroCTAs, _extends({
+          ctaLabel: ctaLabel,
+          ctaHref: ctaHref,
+          ctaSecondaryLabel: ctaSecondaryLabel,
+          ctaSecondaryHref: ctaSecondaryHref,
+          fg: fg
+        }, shared, {
+          center: true
+        })), jsx(HeroStats, _extends({
+          stats: stats
+        }, shared, {
+          center: true
+        }))]
+      })]
+    }));
+  }
+  // ── Split (default) ──
+  return jsxs(Tag, _extends({
+    className: className,
+    style: _extends({
+      position: 'relative',
+      minHeight: isMobile ? 'auto' : minH,
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'hidden',
+      background: bg
+    }, style)
+  }, rest, {
+    children: [imageSrc && jsxs("div", {
+      style: {
+        position: 'absolute',
+        inset: 0
+      },
+      children: [jsx("img", {
+        src: imageSrc,
+        alt: imageAlt,
+        style: {
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover'
+        }
+      }), jsx("div", {
+        "aria-hidden": true,
+        style: {
+          position: 'absolute',
+          inset: 0,
+          background: overlay
+        }
+      })]
+    }), !isMobile && jsxs(Fragment, {
+      children: [jsx("div", {
+        "aria-hidden": true,
+        style: {
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          height: '100%',
+          width: 1,
+          background: `linear-gradient(to bottom, transparent, ${accent}40, transparent)`
+        }
+      }), jsx("div", {
+        "aria-hidden": true,
+        style: {
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          height: '100%',
+          width: 1,
+          background: `linear-gradient(to bottom, transparent, ${accent}40, transparent)`
+        }
+      })]
+    }), jsxs("div", {
+      style: {
+        position: 'relative',
+        zIndex: 1,
+        width: '100%',
+        maxWidth: maxW,
+        margin: '0 auto',
+        padding: `${pyPx}px ${rPx}px`,
+        display: 'grid',
+        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
+        gap: isMobile ? 32 : gap,
+        alignItems: 'center'
+      },
+      children: [jsxs("div", {
+        children: [jsx(HeroEyebrow, _extends({
+          text: eyebrow
+        }, shared)), jsxs("h1", {
+          style: {
+            fontFamily,
+            color: fg,
+            fontSize: `clamp(${isMobile ? '2rem' : '3rem'}, 6vw, 5.5rem)`,
+            lineHeight: 1.05,
+            letterSpacing: -1,
+            margin: 0
+          },
+          children: [title, titleAccent && jsxs(Fragment, {
+            children: [jsx("br", {}), jsx("em", {
+              style: {
+                color: accent,
+                fontStyle: 'italic'
+              },
+              children: titleAccent
+            })]
+          }), titleSuffix && ` ${titleSuffix}`]
+        }), subtitle && jsx("p", {
+          style: {
+            fontFamily,
+            color: 'rgba(255,255,255,0.7)',
+            fontSize: subSize,
+            lineHeight: 1.7,
+            maxWidth: 480,
+            marginTop: isMobile ? 20 : 24,
+            marginBottom: isMobile ? 32 : 40
+          },
+          children: subtitle
+        }), jsx(HeroCTAs, _extends({
+          ctaLabel: ctaLabel,
+          ctaHref: ctaHref,
+          ctaSecondaryLabel: ctaSecondaryLabel,
+          ctaSecondaryHref: ctaSecondaryHref,
+          fg: fg
+        }, shared)), jsx(HeroStats, _extends({
+          stats: stats
+        }, shared))]
+      }), !isMobile && imageSrc && jsx("div", {
+        style: {
+          position: 'relative',
+          height: 580,
+          display: 'flex',
+          justifyContent: 'flex-end'
+        },
+        children: jsx("div", {
+          style: {
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: 288,
+            height: 384,
+            overflow: 'hidden',
+            borderRadius: radius || 12,
+            boxShadow: `0 0 60px ${accent}20`
+          },
+          children: jsx("img", {
+            src: imageSrc,
+            alt: imageAlt,
+            style: {
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover'
+            }
+          })
+        })
+      }), children]
+    })]
+  }));
+}
+
 const _excluded$L = ["as", "title", "subtitle", "pattern", "intensity", "badge", "ctaLabel", "onCta", "stats", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
 function usePattern(kind, accent, intensity) {
   return useMemo(() => {
@@ -20662,4 +21213,4 @@ function CommentsSection(_ref0) {
   }));
 }
 
-export { Accordion, AccountSettings, AddressAutocomplete, AnchorLinks, AnimatedBrandMark, AppInstallBanner, ArchiveList, ArticleRenderer, AudioEmbed, AuthForm, AuthorByline, AutoSuggest, AvatarProfile, Badge, BadgeGroup, BarChart, BlockShell, BlockquoteTestimonial, BlogBadge, BlogCard, BrandIconGrid, BrandingShell, Breadcrumbs, Button, PrimaryButton as ButtonAlias, ButtonGroup, CTAOverlayHero, CalendarGrid, CalloutBox, Captcha, CarouselHero, CartDrawer, CommentsBox, CommentsSection, ComparisonTable, ConfirmDialog, ContactForm, ContactSupportBlock, CookieConsent, CookieNotice, CountdownTimer, DataTable, DateTimePicker, DownloadBlock, DownloadButton, ElectroplixProvider, EmptyState, FAQAccordion, FacetFilters, FaviconUploader, FeatureGrid, FeatureHighlights, FileUploader, FloatingActionButton, FollowLike, Footer, FormDialog, FormShell, GenericList, GenericModal, HeadingSection, HeroShell, HowItWorks, ICON_NAMES, Icon, IconButton, IconGrid, ImageCropperUploader, ImageGallery, InlineCode, InlineCodeText, InputField, ItemCardGrid, LCTimeline, LanguageSelector, LeadMagnetGate, LightboxGallery, LineChart, LoadingButton, LoadingOverlay, LogoDisplay, LottieOrSVG, MapEmbed, MarketingHeroBlock, MasonryGrid, MediaShell, MegaMenu, MiniCartPanel, MultiFactorAuthInput, MultiStepWizard, NewsletterSignup, OnboardingWizard, OrderSummary, OverlayBase, Pagination, ParagraphBlock, PasswordReset, PatternedHero, PaymentButtons, PieChart, PolaroidImage, PricingTable, PrimaryButton, PrimaryNav, PrintButton, ProductCard, ProductDetail, ProductGrid, ProductTour, ProfileOverview, ProfileSettings, ProgressBar, PromoPopup, QuickAddButton, RSSFeed, RadioGroup, RatingStars, ReactionsBar, ReadingBar, RelatedPosts, ResponsiveVideo, ReviewsForm, RichMarkdown, RoleBadge, ScrollProgressBar, SearchEmptyState, SearchResultCard, SearchResults, SecondaryButton, SelectDropdown, ShareButton, SideDrawerNav, SidebarMenu, SiteSearchBar, SocialEmbed, SocialLoginButtons, SocialShareBar, SortableTable, Sparkline, SplitHero, StaticHero, StatsCounter, Stepper, SupportChat, Tabs, TagList, Taglines, TeamGrid, TertiaryButton, TestimonialsCarousel, TextAreaField, ThemeToggle, Timeline, ToastBanners, ToggleSwitch, Tooltip, TooltipHelp, TrustBadges, ValidationWrapper, VariantSelector, VideoHeaderHero, WelcomePopup, WishlistButton, baseBtn, baseButtonStyle, cn, defaultBlogTheme, defaultButtonTheme, defaultConfig, defaultContentTheme, defaultDataDisplayTheme, defaultEcommerceTheme, defaultFormsTheme, defaultHeroTheme, defaultListsCardsTheme, defaultMarketingTheme, defaultMediaTheme, defaultMiscTheme, defaultModalsTheme, defaultNavigationTheme, defaultOnboardingTheme, defaultSearchTheme, defaultSiteIdentityTheme, defaultSocialTheme, defaultUserAccountsTheme, defineConfig, emailRule, inputStyle, labelStyle, maxLengthRule, mergeTheme, minLengthRule, money, requiredRule, sx, timeAgo, truncate, useBlogTheme, useButtonTheme, useClickOutside, useContentTheme, useDataDisplayTheme, useDebounce, useEcommerceTheme, useElectroplixConfig, useFocusTrap, useFormsTheme, useHeroTheme, useListsCardsTheme, useMarketingTheme, useMediaQuery, useMediaTheme, useMiscTheme, useModalsTheme, useNavTheme, useOnboardingTheme, useSearchTheme, useSiteIdentityTheme, useSocialTheme, useUserAccountsTheme, validate };
+export { Accordion, AccountSettings, AddressAutocomplete, AnchorLinks, AnimatedBrandMark, AppInstallBanner, ArchiveList, ArticleRenderer, AudioEmbed, AuthForm, AuthorByline, AutoSuggest, AvatarProfile, Badge, BadgeGroup, BarChart, BlockShell, BlockquoteTestimonial, BlogBadge, BlogCard, BrandIconGrid, BrandingShell, Breadcrumbs, Button, PrimaryButton as ButtonAlias, ButtonGroup, CTAOverlayHero, CalendarGrid, CalloutBox, Captcha, CarouselHero, CartDrawer, CommentsBox, CommentsSection, ComparisonTable, ConfirmDialog, ContactForm, ContactSupportBlock, CookieConsent, CookieNotice, CountdownTimer, DataTable, DateTimePicker, DownloadBlock, DownloadButton, ElectroplixProvider, EmptyState, FAQAccordion, FacetFilters, FaviconUploader, FeatureGrid, FeatureHighlights, FileUploader, FloatingActionButton, FollowLike, Footer, FormDialog, FormShell, GenericList, GenericModal, HeadingSection, HeroShell, HowItWorks, ICON_NAMES, Icon, IconButton, IconGrid, ImageCropperUploader, ImageGallery, ImageHero, InlineCode, InlineCodeText, InputField, ItemCardGrid, LCTimeline, LanguageSelector, LeadMagnetGate, LightboxGallery, LineChart, LoadingButton, LoadingOverlay, LogoDisplay, LottieOrSVG, MapEmbed, MarketingHeroBlock, MasonryGrid, MediaShell, MegaMenu, MiniCartPanel, MultiFactorAuthInput, MultiStepWizard, NewsletterSignup, OnboardingWizard, OrderSummary, OverlayBase, Pagination, ParagraphBlock, PasswordReset, PatternedHero, PaymentButtons, PieChart, PolaroidImage, PricingTable, PrimaryButton, PrimaryNav, PrintButton, ProductCard, ProductDetail, ProductGrid, ProductTour, ProfileOverview, ProfileSettings, ProgressBar, PromoPopup, QuickAddButton, RSSFeed, RadioGroup, RatingStars, ReactionsBar, ReadingBar, RelatedPosts, ResponsiveVideo, ReviewsForm, RichMarkdown, RoleBadge, ScrollProgressBar, SearchEmptyState, SearchResultCard, SearchResults, SecondaryButton, SelectDropdown, ShareButton, SideDrawerNav, SidebarMenu, SiteSearchBar, SocialEmbed, SocialLoginButtons, SocialShareBar, SortableTable, Sparkline, SplitHero, StaticHero, StatsCounter, Stepper, SupportChat, Tabs, TagList, Taglines, TeamGrid, TertiaryButton, TestimonialsCarousel, TextAreaField, ThemeToggle, Timeline, ToastBanners, ToggleSwitch, Tooltip, TooltipHelp, TrustBadges, ValidationWrapper, VariantSelector, VideoHeaderHero, WelcomePopup, WishlistButton, baseBtn, baseButtonStyle, cn, defaultBlogTheme, defaultButtonTheme, defaultConfig, defaultContentTheme, defaultDataDisplayTheme, defaultEcommerceTheme, defaultFormsTheme, defaultHeroTheme, defaultListsCardsTheme, defaultMarketingTheme, defaultMediaTheme, defaultMiscTheme, defaultModalsTheme, defaultNavigationTheme, defaultOnboardingTheme, defaultSearchTheme, defaultSiteIdentityTheme, defaultSocialTheme, defaultUserAccountsTheme, defineConfig, emailRule, inputStyle, labelStyle, maxLengthRule, mergeTheme, minLengthRule, money, requiredRule, sx, timeAgo, truncate, useBlogTheme, useButtonTheme, useClickOutside, useContentTheme, useDataDisplayTheme, useDebounce, useEcommerceTheme, useElectroplixConfig, useFocusTrap, useFormsTheme, useHeroTheme, useListsCardsTheme, useMarketingTheme, useMediaQuery, useMediaTheme, useMiscTheme, useModalsTheme, useNavTheme, useOnboardingTheme, useSearchTheme, useSiteIdentityTheme, useSocialTheme, useUserAccountsTheme, validate };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electroplix/components",
-  "version": "0.5.0-alpha.9",
+  "version": "0.5.0-alpha.10",
   "description": "Parametric, config-driven UI components by Electroplix. 159 components across 18 categories — navigation, hero, buttons, forms, content, data display, ecommerce, lists/cards, marketing, media, miscellaneous, modals, onboarding, search, site-identity, social, user-accounts, and blog. AI-builder-ready metadata included.",
   "type": "module",
   "license": "MIT",

package/dist/src/components/hero/ImageHero.d.ts

@@ -0,0 +1,35 @@
+import type React from 'react';
+export interface ImageHeroProps extends React.ComponentPropsWithoutRef<'section'> {
+    as?: React.ElementType;
+    eyebrow?: string;
+    title?: string;
+    titleAccent?: string;
+    titleSuffix?: string;
+    subtitle?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    ctaSecondaryLabel?: string;
+    ctaSecondaryHref?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    stats?: Array<{
+        value: string;
+        label: string;
+    }>;
+    layout?: 'split' | 'centered' | 'minimal';
+    align?: 'left' | 'center' | 'right';
+    titleSize?: number;
+    subtitleSize?: number;
+    bgColor?: string;
+    textColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    minH?: string | number;
+    maxW?: number;
+    px?: number;
+    py?: number;
+    radius?: number;
+    gap?: number;
+}
+export declare function ImageHero(props: ImageHeroProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageHero.d.ts.map

package/dist/src/components/hero/ImageHero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageHero.d.ts","sourceRoot":"","sources":["../../../../src/components/hero/ImageHero.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,wBAAwB,CAAC,SAAS,CAAC;IAC/E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAiND,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CA0Y9C"}

package/dist/src/components/hero/index.d.ts

@@ -6,6 +6,8 @@ export { CarouselHero } from './CarouselHero';
 export type { CarouselHeroProps } from './CarouselHero';
 export { CTAOverlayHero } from './CTAOverlayHero';
 export type { CTAOverlayHeroProps } from './CTAOverlayHero';
+export { ImageHero } from './ImageHero';
+export type { ImageHeroProps } from './ImageHero';
 export { PatternedHero } from './PatternedHero';
 export type { PatternedHeroProps } from './PatternedHero';
 export { SplitHero } from './SplitHero';

package/dist/src/components/hero/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/hero/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/hero/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electroplix/components",
-  "version": "0.5.0-alpha.10",
+  "version": "0.5.0-alpha.11",
   "description": "Parametric, config-driven UI components by Electroplix. 159 components across 18 categories — navigation, hero, buttons, forms, content, data display, ecommerce, lists/cards, marketing, media, miscellaneous, modals, onboarding, search, site-identity, social, user-accounts, and blog. AI-builder-ready metadata included.",
   "type": "module",
   "license": "MIT",