@almadar/ui 4.51.16 → 4.53.1

package/dist/components/organisms/game/three/index.js

@@ -1,4 +1,4 @@
-import React21, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, Component, useContext, useReducer } from 'react';
+import React10, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useMemo, useCallback, createContext, Component, useContext, useReducer } from 'react';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
 import * as THREE6 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
@@ -1862,7 +1862,7 @@ function UnitRenderer({
   onAnimationStateChange,
   animationSpeed = 1
 }) {
-  const handleUnitClick = React21.useCallback(
+  const handleUnitClick = React10.useCallback(
     (unit) => {
       onUnitClick?.(unit);
     },
@@ -2740,6 +2740,8 @@ GameCanvas3D.displayName = "GameCanvas3D";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// components/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -2842,7 +2844,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React21.forwardRef(
+var Box = React10.forwardRef(
   ({
     padding,
     paddingX,
@@ -2892,38 +2894,26 @@ var Box = React21.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    const Comp = Component2;
-    return /* @__PURE__ */ jsx(
-      Comp,
+    return React10.createElement(
+      Component2,
       {
         ref,
         className: cn(
-          // Padding
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
           paddingY && paddingYStyles[paddingY],
-          // Margin
           margin && marginStyles[margin],
           marginX && marginXStyles[marginX],
           marginY && marginYStyles[marginY],
-          // Background
           bgStyles[bg],
-          // Border - uses theme variables
           border && "border-[length:var(--border-width)] border-border",
-          // Rounded
           roundedStyles[rounded],
-          // Shadow
           shadowStyles[shadow],
-          // Display
           display && displayStyles[display],
-          // Dimensions
           fullWidth && "w-full",
           fullHeight && "h-full",
-          // Overflow
           overflow && overflowStyles[overflow],
-          // Position
           position && positionStyles[position],
-          // Cursor for clickable
           isClickable && "cursor-pointer",
           className
         ),
@@ -2931,9 +2921,9 @@ var Box = React21.forwardRef(
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
         style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-        ...rest,
-        children
-      }
+        ...rest
+      },
+      children
     );
   }
 );
@@ -5630,7 +5620,7 @@ var Avl3DViewer = ({
   const handleTraitClick = useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React21.useState(null);
+  const [highlightedTrait, setHighlightedTrait] = React10.useState(null);
   const handleTransitionClick = useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
@@ -5717,7 +5707,7 @@ var Avl3DViewer = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React21.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                 Box,

package/dist/docs/index.cjs

@@ -2625,6 +2625,8 @@ function useEventBus() {
     };
   }, [baseBus, scope]);
 }
+
+// components/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -2777,38 +2779,26 @@ var Box = React5__default.default.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    const Comp = Component;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
+    return React5__default.default.createElement(
+      Component,
       {
         ref,
         className: cn(
-          // Padding
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
           paddingY && paddingYStyles[paddingY],
-          // Margin
           margin && marginStyles[margin],
           marginX && marginXStyles[marginX],
           marginY && marginYStyles[marginY],
-          // Background
           bgStyles[bg],
-          // Border - uses theme variables
           border && "border-[length:var(--border-width)] border-border",
-          // Rounded
           roundedStyles[rounded],
-          // Shadow
           shadowStyles[shadow],
-          // Display
           display && displayStyles[display],
-          // Dimensions
           fullWidth && "w-full",
           fullHeight && "h-full",
-          // Overflow
           overflow && overflowStyles[overflow],
-          // Position
           position && positionStyles[position],
-          // Cursor for clickable
           isClickable && "cursor-pointer",
           className
         ),
@@ -2816,9 +2806,9 @@ var Box = React5__default.default.forwardRef(
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
         style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-        ...rest,
-        children
-      }
+        ...rest
+      },
+      children
     );
   }
 );

package/dist/docs/index.js

@@ -1,6 +1,6 @@
 import React5, { createContext, useCallback, useContext, useMemo, useState, useRef, useEffect } from 'react';
 import { createLogger } from '@almadar/logger';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, ChevronDown, X } from 'lucide-react';
 
@@ -2601,6 +2601,8 @@ function useEventBus() {
     };
   }, [baseBus, scope]);
 }
+
+// components/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -2753,38 +2755,26 @@ var Box = React5.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    const Comp = Component;
-    return /* @__PURE__ */ jsx(
-      Comp,
+    return React5.createElement(
+      Component,
       {
         ref,
         className: cn(
-          // Padding
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
           paddingY && paddingYStyles[paddingY],
-          // Margin
           margin && marginStyles[margin],
           marginX && marginXStyles[marginX],
           marginY && marginYStyles[marginY],
-          // Background
           bgStyles[bg],
-          // Border - uses theme variables
           border && "border-[length:var(--border-width)] border-border",
-          // Rounded
           roundedStyles[rounded],
-          // Shadow
           shadowStyles[shadow],
-          // Display
           display && displayStyles[display],
-          // Dimensions
           fullWidth && "w-full",
           fullHeight && "h-full",
-          // Overflow
           overflow && overflowStyles[overflow],
-          // Position
           position && positionStyles[position],
-          // Cursor for clickable
           isClickable && "cursor-pointer",
           className
         ),
@@ -2792,9 +2782,9 @@ var Box = React5.forwardRef(
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
         style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-        ...rest,
-        children
-      }
+        ...rest
+      },
+      children
     );
   }
 );

package/dist/marketing/index.cjs

@@ -2625,6 +2625,8 @@ function useEventBus() {
     };
   }, [baseBus, scope]);
 }
+
+// components/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -2777,38 +2779,26 @@ var Box = React6__default.default.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    const Comp = Component;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
+    return React6__default.default.createElement(
+      Component,
       {
         ref,
         className: cn(
-          // Padding
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
           paddingY && paddingYStyles[paddingY],
-          // Margin
           margin && marginStyles[margin],
           marginX && marginXStyles[marginX],
           marginY && marginYStyles[marginY],
-          // Background
           bgStyles[bg],
-          // Border - uses theme variables
           border && "border-[length:var(--border-width)] border-border",
-          // Rounded
           roundedStyles[rounded],
-          // Shadow
           shadowStyles[shadow],
-          // Display
           display && displayStyles[display],
-          // Dimensions
           fullWidth && "w-full",
           fullHeight && "h-full",
-          // Overflow
           overflow && overflowStyles[overflow],
-          // Position
           position && positionStyles[position],
-          // Cursor for clickable
           isClickable && "cursor-pointer",
           className
         ),
@@ -2816,9 +2806,9 @@ var Box = React6__default.default.forwardRef(
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
         style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-        ...rest,
-        children
-      }
+        ...rest
+      },
+      children
     );
   }
 );
@@ -3911,10 +3901,10 @@ var gapStyles2 = {
 var colStyles = {
   1: "grid-cols-1",
   2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -3925,12 +3915,12 @@ var SimpleGrid = ({
   children
 }) => {
   if (cols) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid", colStyles[cols], gapStyles2[gap], className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("grid", colStyles[cols], gapStyles2[gap], className), children });
   }
   const minWidth = typeof minChildWidth === "number" ? `${minChildWidth}px` : minChildWidth;
   const templateColumns = maxCols ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : `repeat(auto-fit, minmax(${minWidth}, 1fr))`;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Box,
     {
       className: cn("grid", gapStyles2[gap], className),
       style: {
@@ -4088,9 +4078,9 @@ 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: [
-        /* @__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 })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("w-full flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 items-center", isImageLeft && "md:flex-row-reverse"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 md:min-w-[45%]", children: textContent }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 md:max-w-[50%]", children: mediaContent })
       ] })
     }
   );
@@ -4118,7 +4108,16 @@ var StepCircle = ({ step, index }) => {
         "flex items-center justify-center",
         "bg-primary text-primary-foreground"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-primary-foreground leading-none", children: step.number ?? index + 1 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Typography,
+        {
+          as: "span",
+          variant: "small",
+          weight: "semibold",
+          className: "text-primary-foreground leading-none",
+          children: step.number ?? index + 1
+        }
+      )
     }
   );
 };
@@ -4508,6 +4507,11 @@ var CaseStudyCard = ({
   ] }) });
 };
 CaseStudyCard.displayName = "CaseStudyCard";
+var maxWidthMap = {
+  sm: "max-w-full sm:max-w-xl md:max-w-2xl",
+  md: "max-w-full sm:max-w-2xl md:max-w-3xl",
+  lg: "max-w-full sm:max-w-3xl md:max-w-4xl"
+};
 var ArticleSection = ({
   title,
   children,
@@ -4522,7 +4526,7 @@ var ArticleSection = ({
         className
       ),
       padding: "md",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", align: "start", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", align: "start", className: cn("w-full mx-auto", maxWidthMap[maxWidth]), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", children: title }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-full", children })
       ] })

package/dist/marketing/index.js

@@ -1,6 +1,6 @@
 import React6, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useId } from 'react';
 import { createLogger } from '@almadar/logger';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, Check, User } from 'lucide-react';
 
@@ -2601,6 +2601,8 @@ function useEventBus() {
     };
   }, [baseBus, scope]);
 }
+
+// components/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -2753,38 +2755,26 @@ var Box = React6.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    const Comp = Component;
-    return /* @__PURE__ */ jsx(
-      Comp,
+    return React6.createElement(
+      Component,
       {
         ref,
         className: cn(
-          // Padding
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
           paddingY && paddingYStyles[paddingY],
-          // Margin
           margin && marginStyles[margin],
           marginX && marginXStyles[marginX],
           marginY && marginYStyles[marginY],
-          // Background
           bgStyles[bg],
-          // Border - uses theme variables
           border && "border-[length:var(--border-width)] border-border",
-          // Rounded
           roundedStyles[rounded],
-          // Shadow
           shadowStyles[shadow],
-          // Display
           display && displayStyles[display],
-          // Dimensions
           fullWidth && "w-full",
           fullHeight && "h-full",
-          // Overflow
           overflow && overflowStyles[overflow],
-          // Position
           position && positionStyles[position],
-          // Cursor for clickable
           isClickable && "cursor-pointer",
           className
         ),
@@ -2792,9 +2782,9 @@ var Box = React6.forwardRef(
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
         style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-        ...rest,
-        children
-      }
+        ...rest
+      },
+      children
     );
   }
 );
@@ -3887,10 +3877,10 @@ var gapStyles2 = {
 var colStyles = {
   1: "grid-cols-1",
   2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -3901,12 +3891,12 @@ var SimpleGrid = ({
   children
 }) => {
   if (cols) {
-    return /* @__PURE__ */ jsx("div", { className: cn("grid", colStyles[cols], gapStyles2[gap], className), children });
+    return /* @__PURE__ */ jsx(Box, { className: cn("grid", colStyles[cols], gapStyles2[gap], className), children });
   }
   const minWidth = typeof minChildWidth === "number" ? `${minChildWidth}px` : minChildWidth;
   const templateColumns = maxCols ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : `repeat(auto-fit, minmax(${minWidth}, 1fr))`;
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
       className: cn("grid", gapStyles2[gap], className),
       style: {
@@ -4064,9 +4054,9 @@ 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: [
-        /* @__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 })
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("w-full flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 items-center", isImageLeft && "md:flex-row-reverse"), children: [
+        /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 md:min-w-[45%]", children: textContent }),
+        /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 md:max-w-[50%]", children: mediaContent })
       ] })
     }
   );
@@ -4094,7 +4084,16 @@ var StepCircle = ({ step, index }) => {
         "flex items-center justify-center",
         "bg-primary text-primary-foreground"
       ),
-      children: /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-primary-foreground leading-none", children: step.number ?? index + 1 })
+      children: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          as: "span",
+          variant: "small",
+          weight: "semibold",
+          className: "text-primary-foreground leading-none",
+          children: step.number ?? index + 1
+        }
+      )
     }
   );
 };
@@ -4484,6 +4483,11 @@ var CaseStudyCard = ({
   ] }) });
 };
 CaseStudyCard.displayName = "CaseStudyCard";
+var maxWidthMap = {
+  sm: "max-w-full sm:max-w-xl md:max-w-2xl",
+  md: "max-w-full sm:max-w-2xl md:max-w-3xl",
+  lg: "max-w-full sm:max-w-3xl md:max-w-4xl"
+};
 var ArticleSection = ({
   title,
   children,
@@ -4498,7 +4502,7 @@ var ArticleSection = ({
         className
       ),
       padding: "md",
-      children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", align: "start", children: [
+      children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", align: "start", className: cn("w-full mx-auto", maxWidthMap[maxWidth]), children: [
         /* @__PURE__ */ jsx(Typography, { variant: "h2", children: title }),
         /* @__PURE__ */ jsx(Box, { className: "w-full", children })
       ] })