@almadar/ui 2.24.0 → 2.24.2

package/dist/components/index.cjs

@@ -3136,7 +3136,7 @@ var ContentSection = React88__namespace.default.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
       }
     );
   }
@@ -15256,7 +15256,7 @@ var CTABanner = ({
     Box,
     {
       className: cn(
-        "py-16 px-4",
+        "py-16",
         background === "alt" && "bg-[var(--color-surface)]",
         background === "dark" && "bg-[var(--color-surface)]",
         background === "gradient" && "bg-[var(--color-surface)]",
@@ -15268,7 +15268,7 @@ var CTABanner = ({
         {
           gap: "lg",
           align: align === "center" ? "center" : "start",
-          className: "mx-auto",
+          className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", align, children: title }),
             subtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "muted", align, children: subtitle }),
@@ -15430,10 +15430,10 @@ var HeroSection = ({
       )
     }
   );
-  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xl", align: "center", className: "w-full", responsive: true, children: [
+  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xl", align: "center", className: "w-full max-w-7xl", responsive: true, children: [
     textContent,
     imageNode
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full", children: [
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full max-w-7xl", children: [
     textContent,
     image && imagePosition === "below" && imageNode
   ] });
@@ -15443,7 +15443,7 @@ var HeroSection = ({
       as: "header",
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
-        "px-6 py-20",
+        "py-20",
         "relative overflow-hidden",
         className
       ),
@@ -15457,7 +15457,7 @@ var HeroSection = ({
             className: "absolute inset-0 w-full h-full opacity-20"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "relative z-10 w-full flex justify-center", children: innerContent })
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "relative z-10 w-full flex justify-center px-4 sm:px-6 lg:px-8", children: innerContent })
       ]
     }
   );
@@ -15628,7 +15628,7 @@ var ArticleSection = ({
     Box,
     {
       className: cn(
-        "w-full",
+        "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
         className
       ),
       padding: "md",
@@ -15869,7 +15869,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("w-full flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })

package/dist/components/index.js

@@ -3106,7 +3106,7 @@ var ContentSection = React88__default.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children
+        children: /* @__PURE__ */ jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
       }
     );
   }
@@ -15226,7 +15226,7 @@ var CTABanner = ({
     Box,
     {
       className: cn(
-        "py-16 px-4",
+        "py-16",
         background === "alt" && "bg-[var(--color-surface)]",
         background === "dark" && "bg-[var(--color-surface)]",
         background === "gradient" && "bg-[var(--color-surface)]",
@@ -15238,7 +15238,7 @@ var CTABanner = ({
         {
           gap: "lg",
           align: align === "center" ? "center" : "start",
-          className: "mx-auto",
+          className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
           children: [
             /* @__PURE__ */ jsx(Typography, { variant: "h2", align, children: title }),
             subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", color: "muted", align, children: subtitle }),
@@ -15400,10 +15400,10 @@ var HeroSection = ({
       )
     }
   );
-  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxs(HStack, { gap: "xl", align: "center", className: "w-full", responsive: true, children: [
+  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxs(HStack, { gap: "xl", align: "center", className: "w-full max-w-7xl", responsive: true, children: [
     textContent,
     imageNode
-  ] }) : /* @__PURE__ */ jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full", children: [
+  ] }) : /* @__PURE__ */ jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full max-w-7xl", children: [
     textContent,
     image && imagePosition === "below" && imageNode
   ] });
@@ -15413,7 +15413,7 @@ var HeroSection = ({
       as: "header",
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
-        "px-6 py-20",
+        "py-20",
         "relative overflow-hidden",
         className
       ),
@@ -15427,7 +15427,7 @@ var HeroSection = ({
             className: "absolute inset-0 w-full h-full opacity-20"
           }
         ),
-        /* @__PURE__ */ jsx(Box, { className: "relative z-10 w-full flex justify-center", children: innerContent })
+        /* @__PURE__ */ jsx(Box, { className: "relative z-10 w-full flex justify-center px-4 sm:px-6 lg:px-8", children: innerContent })
       ]
     }
   );
@@ -15598,7 +15598,7 @@ var ArticleSection = ({
     Box,
     {
       className: cn(
-        "w-full",
+        "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
         className
       ),
       padding: "md",
@@ -15839,7 +15839,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxs(Box, { className: cn("w-full flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })

package/dist/marketing/index.cjs

@@ -3505,7 +3505,7 @@ var ContentSection = React5__default.default.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
       }
     );
   }
@@ -3691,10 +3691,10 @@ var HeroSection = ({
       )
     }
   );
-  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xl", align: "center", className: "w-full", responsive: true, children: [
+  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xl", align: "center", className: "w-full max-w-7xl", responsive: true, children: [
     textContent,
     imageNode
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full", children: [
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full max-w-7xl", children: [
     textContent,
     image && imagePosition === "below" && imageNode
   ] });
@@ -3704,7 +3704,7 @@ var HeroSection = ({
       as: "header",
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
-        "px-6 py-20",
+        "py-20",
         "relative overflow-hidden",
         className
       ),
@@ -3718,7 +3718,7 @@ var HeroSection = ({
             className: "absolute inset-0 w-full h-full opacity-20"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "relative z-10 w-full flex justify-center", children: innerContent })
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "relative z-10 w-full flex justify-center px-4 sm:px-6 lg:px-8", children: innerContent })
       ]
     }
   );
@@ -3740,7 +3740,7 @@ var CTABanner = ({
     Box,
     {
       className: cn(
-        "py-16 px-4",
+        "py-16",
         background === "alt" && "bg-[var(--color-surface)]",
         background === "dark" && "bg-[var(--color-surface)]",
         background === "gradient" && "bg-[var(--color-surface)]",
@@ -3752,7 +3752,7 @@ var CTABanner = ({
         {
           gap: "lg",
           align: align === "center" ? "center" : "start",
-          className: "mx-auto",
+          className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", align, children: title }),
             subtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "muted", align, children: subtitle }),
@@ -4039,7 +4039,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("w-full flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })
@@ -4469,7 +4469,7 @@ var ArticleSection = ({
     Box,
     {
       className: cn(
-        "w-full",
+        "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
         className
       ),
       padding: "md",
@@ -4497,7 +4497,7 @@ var MarketingFooter = ({
         "pt-12 pb-8 px-4",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: "w-full mx-auto", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "lg", align: "start", className: "flex-wrap w-full justify-between", children: [
           logo && /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: logo.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: logo.href, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }),
           columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: [

package/dist/marketing/index.js

@@ -3481,7 +3481,7 @@ var ContentSection = React5.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children
+        children: /* @__PURE__ */ jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
       }
     );
   }
@@ -3667,10 +3667,10 @@ var HeroSection = ({
       )
     }
   );
-  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxs(HStack, { gap: "xl", align: "center", className: "w-full", responsive: true, children: [
+  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxs(HStack, { gap: "xl", align: "center", className: "w-full max-w-7xl", responsive: true, children: [
     textContent,
     imageNode
-  ] }) : /* @__PURE__ */ jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full", children: [
+  ] }) : /* @__PURE__ */ jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full max-w-7xl", children: [
     textContent,
     image && imagePosition === "below" && imageNode
   ] });
@@ -3680,7 +3680,7 @@ var HeroSection = ({
       as: "header",
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
-        "px-6 py-20",
+        "py-20",
         "relative overflow-hidden",
         className
       ),
@@ -3694,7 +3694,7 @@ var HeroSection = ({
             className: "absolute inset-0 w-full h-full opacity-20"
           }
         ),
-        /* @__PURE__ */ jsx(Box, { className: "relative z-10 w-full flex justify-center", children: innerContent })
+        /* @__PURE__ */ jsx(Box, { className: "relative z-10 w-full flex justify-center px-4 sm:px-6 lg:px-8", children: innerContent })
       ]
     }
   );
@@ -3716,7 +3716,7 @@ var CTABanner = ({
     Box,
     {
       className: cn(
-        "py-16 px-4",
+        "py-16",
         background === "alt" && "bg-[var(--color-surface)]",
         background === "dark" && "bg-[var(--color-surface)]",
         background === "gradient" && "bg-[var(--color-surface)]",
@@ -3728,7 +3728,7 @@ var CTABanner = ({
         {
           gap: "lg",
           align: align === "center" ? "center" : "start",
-          className: "mx-auto",
+          className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
           children: [
             /* @__PURE__ */ jsx(Typography, { variant: "h2", align, children: title }),
             subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", color: "muted", align, children: subtitle }),
@@ -4015,7 +4015,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxs(Box, { className: cn("w-full flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })
@@ -4445,7 +4445,7 @@ var ArticleSection = ({
     Box,
     {
       className: cn(
-        "w-full",
+        "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
         className
       ),
       padding: "md",
@@ -4473,7 +4473,7 @@ var MarketingFooter = ({
         "pt-12 pb-8 px-4",
         className
       ),
-      children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "w-full mx-auto", children: [
+      children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
         /* @__PURE__ */ jsxs(HStack, { gap: "lg", align: "start", className: "flex-wrap w-full justify-between", children: [
           logo && /* @__PURE__ */ jsx(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: logo.href ? /* @__PURE__ */ jsx("a", { href: logo.href, children: /* @__PURE__ */ jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : /* @__PURE__ */ jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }),
           columns.map((col) => /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: [

package/dist/providers/index.cjs

@@ -2052,7 +2052,7 @@ var ContentSection = React110__namespace.default.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
       }
     );
   }

package/dist/providers/index.js

@@ -2022,7 +2022,7 @@ var ContentSection = React110__default.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children
+        children: /* @__PURE__ */ jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
       }
     );
   }

package/dist/runtime/index.cjs

@@ -4908,7 +4908,7 @@ var ContentSection = React114__namespace.default.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
       }
     );
   }

package/dist/runtime/index.js

@@ -4878,7 +4878,7 @@ var ContentSection = React114__default.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children
+        children: /* @__PURE__ */ jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.24.0",
+  "version": "2.24.2",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",