@almadar/ui 5.95.0 → 5.97.0

package/dist/marketing/index.cjs

@@ -1,12 +1,10 @@
 'use strict';
 
-var React11 = require('react');
+var React12 = require('react');
 var logger = require('@almadar/logger');
 var jsxRuntime = require('react/jsx-runtime');
 var LucideIcons2 = require('lucide-react');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -25,7 +23,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React11__default = /*#__PURE__*/_interopDefault(React11);
+var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
 var LucideIcons2__namespace = /*#__PURE__*/_interopNamespace(LucideIcons2);
 
 // node_modules/clsx/dist/clsx.mjs
@@ -2509,10 +2507,10 @@ function cn(...inputs) {
 }
 logger.createLogger("almadar:eventbus");
 logger.createLogger("almadar:eventbus:subscribe");
-var EventBusContext = React11.createContext(null);
-var TraitScopeContext = React11.createContext(null);
+var EventBusContext = React12.createContext(null);
+var TraitScopeContext = React12.createContext(null);
 function useTraitScope() {
-  return React11.useContext(TraitScopeContext);
+  return React12.useContext(TraitScopeContext);
 }
 var log = logger.createLogger("almadar:eventbus");
 var subLog2 = logger.createLogger("almadar:eventbus:subscribe");
@@ -2588,10 +2586,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React11.useContext(EventBusContext);
+  const context = React12.useContext(EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const scope = useTraitScope();
-  return React11.useMemo(() => {
+  return React12.useMemo(() => {
     if (!scope) {
       return {
         ...baseBus,
@@ -2627,24 +2625,24 @@ function useEventBus() {
 }
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
-  const [revealed, setRevealed] = React11.useState(false);
-  const onRevealRef = React11.useRef(onReveal);
-  const onDismissRef = React11.useRef(onDismiss);
+  const [revealed, setRevealed] = React12.useState(false);
+  const onRevealRef = React12.useRef(onReveal);
+  const onDismissRef = React12.useRef(onDismiss);
   onRevealRef.current = onReveal;
   onDismissRef.current = onDismiss;
-  const reveal = React11.useCallback(() => {
+  const reveal = React12.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React11.useCallback(() => {
+  const dismiss = React12.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React11.useCallback(
+  const onPointerDown = React12.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -2652,7 +2650,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!revealed || typeof document === "undefined") return;
     const onDocDown = (ev) => {
       const target = ev.target;
@@ -2772,7 +2770,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React11__default.default.forwardRef(
+var Box = React12__namespace.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2804,20 +2802,20 @@ var Box = React11__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React11.useCallback((e) => {
+    const handleClick = React12.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React11.useCallback((e) => {
+    const handleMouseEnter = React12.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React11.useCallback((e) => {
+    const handleMouseLeave = React12.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -2825,19 +2823,19 @@ var Box = React11__default.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React11.useCallback(() => {
+      onReveal: React12.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React11.useCallback(() => {
+      onDismiss: React12.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React11.useCallback((e) => {
+    const handlePointerDown = React12.useCallback((e) => {
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React11__default.default.createElement(
+    return React12__namespace.default.createElement(
       Component,
       {
         ref,
@@ -2925,7 +2923,7 @@ var Stack = ({
   };
   const isHorizontal = direction === "horizontal";
   const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  return React11__default.default.createElement(
+  return React12__namespace.default.createElement(
     Component,
     {
       className: cn(
@@ -3035,7 +3033,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component = as || defaultElements[variant];
-  return React11__default.default.createElement(
+  return React12__namespace.default.createElement(
     Component,
     {
       id,
@@ -3105,7 +3103,7 @@ function getIconFamilyServerSnapshot() {
   return DEFAULT_FAMILY;
 }
 function useIconFamily() {
-  return React11.useSyncExternalStore(
+  return React12.useSyncExternalStore(
     subscribeIconFamily,
     getIconFamilySnapshot,
     getIconFamilyServerSnapshot
@@ -3127,7 +3125,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React11__default.default.lazy(async () => {
+  const Lazy = React12__namespace.default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -3137,7 +3135,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    React11__default.default.Suspense,
+    React12__namespace.default.Suspense,
     {
       fallback: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
@@ -3843,7 +3841,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React11__default.default.useMemo(() => {
+  const RenderedComponent = React12__namespace.default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3891,6 +3889,143 @@ var Icon = ({
   );
 };
 Icon.displayName = "Icon";
+
+// lib/atlasSlice.ts
+var atlasCache = /* @__PURE__ */ new Map();
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r2) => r2.json()).then((json) => {
+    atlasCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    atlasCache.set(url, null);
+  });
+  return void 0;
+}
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r2] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r2;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
+  }
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
+}
+function isAtlasAsset(asset) {
+  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+}
+var imageCache = /* @__PURE__ */ new Map();
+var imageWaiters = /* @__PURE__ */ new Map();
+function getSheetImage(url, onReady) {
+  const cached = imageCache.get(url);
+  if (cached) return cached;
+  (imageWaiters.get(url) ?? imageWaiters.set(url, /* @__PURE__ */ new Set()).get(url)).add(onReady);
+  if (!imageCache.has(url)) {
+    imageCache.set(url, null);
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      imageCache.set(url, img);
+      imageWaiters.get(url)?.forEach((fn) => fn());
+      imageWaiters.delete(url);
+    };
+    img.src = url;
+  }
+  return null;
+}
+function AtlasImage({
+  asset,
+  size,
+  width,
+  height,
+  fill = false,
+  fit = "contain",
+  alt,
+  className,
+  style,
+  "aria-hidden": ariaHidden
+}) {
+  const [, bump] = React12__namespace.useReducer((x) => x + 1, 0);
+  const canvasRef = React12__namespace.useRef(null);
+  const sliced = isAtlasAsset(asset);
+  const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
+  const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
+  const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
+  React12__namespace.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !img || !rect) return;
+    canvas.width = rect.sw;
+    canvas.height = rect.sh;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, rect.sw, rect.sh);
+    ctx.drawImage(img, rect.sx, rect.sy, rect.sw, rect.sh, 0, 0, rect.sw, rect.sh);
+  }, [img, rect?.sx, rect?.sy, rect?.sw, rect?.sh]);
+  const w = fill ? "100%" : width ?? size;
+  const h = fill ? "100%" : height ?? size;
+  const boxStyle = {
+    ...fill ? { position: "absolute", inset: 0 } : {},
+    width: w,
+    height: h,
+    objectFit: fit,
+    imageRendering: "pixelated",
+    ...style
+  };
+  if (!asset?.url) return null;
+  if (sliced) {
+    if (!rect || !img) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: cn("inline-block flex-shrink-0", className), style: { ...boxStyle, objectFit: void 0 } });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        role: ariaHidden ? void 0 : "img",
+        "aria-hidden": ariaHidden,
+        "aria-label": ariaHidden ? void 0 : alt ?? asset.name ?? asset.category ?? "",
+        className: cn("flex-shrink-0", className),
+        style: boxStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: asset.url,
+      alt: alt ?? asset.name ?? asset.category ?? "",
+      "aria-hidden": ariaHidden,
+      ...typeof w === "number" ? { width: w } : {},
+      ...typeof h === "number" ? { height: h } : {},
+      className: cn("flex-shrink-0", className),
+      style: boxStyle
+    }
+  );
+}
+AtlasImage.displayName = "AtlasImage";
 var variantStyles2 = {
   primary: [
     "bg-primary text-primary-foreground",
@@ -3963,7 +4098,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React11__default.default.isValidElement(value)) {
+  if (React12__namespace.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -3972,7 +4107,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React11__default.default.forwardRef(
+var Button = React12__namespace.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3996,7 +4131,7 @@ var Button = React11__default.default.forwardRef(
     const leftIconValue = leftIcon || iconProp;
     const rightIconValue = rightIcon || iconRightProp;
     const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
-    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: px, height: px, style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px }, className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
+    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx(AtlasImage, { asset: iconAsset, size: px, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
     const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
     const handleClick = (e) => {
       if (action) {
@@ -4071,7 +4206,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React11__default.default.forwardRef(
+var Badge = React12__namespace.default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
     const iconSizes = {
       sm: "h-icon-default w-icon-default",
@@ -4079,7 +4214,7 @@ var Badge = React11__default.default.forwardRef(
       lg: "h-icon-default w-icon-default"
     };
     const iconPx = size === "lg" ? 20 : 16;
-    const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: iconPx, height: iconPx, style: { imageRendering: "pixelated", objectFit: "contain", width: iconPx, height: iconPx }, className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes[size] }) : null;
+    const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx(AtlasImage, { asset: iconAsset, size: iconPx, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes[size] }) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
@@ -4125,7 +4260,7 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React11__default.default.forwardRef(
+var Spinner = React12__namespace.default.forwardRef(
   ({ className, size = "md", overlay, ...props }, ref) => {
     if (overlay) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4207,7 +4342,7 @@ var lookStyles = {
   chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
   "tile-image-first": "p-0 overflow-hidden"
 };
-var Card = React11__default.default.forwardRef(
+var Card = React12__namespace.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -4255,9 +4390,9 @@ var Card = React11__default.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React11__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React12__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React11__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React12__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -4270,11 +4405,11 @@ var CardTitle = React11__default.default.forwardRef(({ className, ...props }, re
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React11__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React12__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React11__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React12__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -4366,7 +4501,7 @@ var Center = ({
   as: Component = "div"
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  return React11__default.default.createElement(Component, {
+  return React12__namespace.default.createElement(Component, {
     className: cn(
       inline ? "inline-flex" : "flex",
       horizontal && "justify-center",
@@ -4427,7 +4562,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React11__default.default.forwardRef(
+var ContentSection = React12__namespace.default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -4451,8 +4586,8 @@ var InstallBox = ({
   label,
   className
 }) => {
-  const [copied, setCopied] = React11.useState(false);
-  const handleCopy = React11.useCallback(() => {
+  const [copied, setCopied] = React12.useState(false);
+  const handleCopy = React12.useCallback(() => {
     void navigator.clipboard.writeText(command);
     setCopied(true);
     const timer = setTimeout(() => setCopied(false), 2e3);
@@ -5029,7 +5164,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React12__namespace.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-8 bg-border" })
@@ -5040,7 +5175,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React11__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React12__namespace.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -5248,8 +5383,8 @@ var Avatar = ({
   actionPayload
 }) => {
   const eventBus = useEventBus();
-  const [imgFailed, setImgFailed] = React11__default.default.useState(false);
-  React11__default.default.useEffect(() => {
+  const [imgFailed, setImgFailed] = React12__namespace.default.useState(false);
+  React12__namespace.default.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -5566,10 +5701,10 @@ var AnimatedCounter = ({
   duration = 1500,
   className
 }) => {
-  const ref = React11.useRef(null);
-  const [displayValue, setDisplayValue] = React11.useState("0");
-  const [hasAnimated, setHasAnimated] = React11.useState(false);
-  const animate = React11.useCallback(() => {
+  const ref = React12.useRef(null);
+  const [displayValue, setDisplayValue] = React12.useState("0");
+  const [hasAnimated, setHasAnimated] = React12.useState(false);
+  const animate = React12.useCallback(() => {
     const { num, prefix, suffix, decimals } = parseValue(value);
     if (num === 0) {
       setDisplayValue(String(value));
@@ -5590,7 +5725,7 @@ var AnimatedCounter = ({
     };
     requestAnimationFrame(tick);
   }, [value, duration]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (hasAnimated) return;
     const el = ref.current;
     if (!el) return;
@@ -5640,7 +5775,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React11__default.default.forwardRef(
+var AnimatedReveal = React12__namespace.default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -5655,10 +5790,10 @@ var AnimatedReveal = React11__default.default.forwardRef(
     style,
     ...props
   }, forwardedRef) => {
-    const [isAnimated, setIsAnimated] = React11.useState(false);
-    const internalRef = React11.useRef(null);
-    const hasAnimated = React11.useRef(false);
-    const setRef = React11.useCallback(
+    const [isAnimated, setIsAnimated] = React12.useState(false);
+    const internalRef = React12.useRef(null);
+    const hasAnimated = React12.useRef(false);
+    const setRef = React12.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -5666,7 +5801,7 @@ var AnimatedReveal = React11__default.default.forwardRef(
       },
       [forwardedRef]
     );
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (trigger !== "scroll") return;
       const el = internalRef.current;
       if (!el) return;
@@ -5692,7 +5827,7 @@ var AnimatedReveal = React11__default.default.forwardRef(
         setIsAnimated(false);
       }
     } : void 0;
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (trigger === "manual" && manualAnimate !== void 0) {
         setIsAnimated(manualAnimate);
       }
@@ -5722,9 +5857,9 @@ var AnimatedReveal = React11__default.default.forwardRef(
 );
 AnimatedReveal.displayName = "AnimatedReveal";
 function useFetchedSvg(src) {
-  const [svg, setSvg] = React11.useState(null);
-  const cache = React11.useRef({});
-  React11.useEffect(() => {
+  const [svg, setSvg] = React12.useState(null);
+  const cache = React12.useRef({});
+  React12.useEffect(() => {
     if (!src) {
       setSvg(null);
       return;
@@ -5793,7 +5928,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React11__default.default.forwardRef(
+var AnimatedGraphic = React12__namespace.default.forwardRef(
   ({
     src,
     svgContent,
@@ -5812,11 +5947,11 @@ var AnimatedGraphic = React11__default.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = React11.useRef(null);
+    const containerRef = React12.useRef(null);
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
-    const prevAnimateRef = React11.useRef(animate);
-    const setRef = React11__default.default.useCallback(
+    const prevAnimateRef = React12.useRef(animate);
+    const setRef = React12__namespace.default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -5824,7 +5959,7 @@ var AnimatedGraphic = React11__default.default.forwardRef(
       },
       [ref]
     );
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       const el = containerRef.current;
       if (!el || !strokeColor) return;
       const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
@@ -5832,7 +5967,7 @@ var AnimatedGraphic = React11__default.default.forwardRef(
         p.style.stroke = strokeColor;
       });
     }, [resolvedSvg, strokeColor]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       const el = containerRef.current;
       if (!el || !resolvedSvg) return;
       if (animation === "draw" || animation === "fill") {
@@ -5857,7 +5992,7 @@ var AnimatedGraphic = React11__default.default.forwardRef(
         });
       }
     }, [resolvedSvg, animation]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const id = requestAnimationFrame(() => {
@@ -6657,7 +6792,7 @@ var GeometricPattern = ({
   children,
   className
 }) => {
-  const reactId = React11.useId();
+  const reactId = React12.useId();
   const patternId = `gp${reactId.replace(/:/g, "")}`;
   const size = 60 * scale;
   const stripHeight = 40 * scale;
@@ -6892,7 +7027,7 @@ var EdgeDecoration = ({
   width = 15,
   className
 }) => {
-  const id = React11.useId();
+  const id = React12.useId();
   const Variant = VARIANT_MAP2[variant];
   const resolvedColor = color in colorTokenVars2 ? colorTokenVars2[color] : color;
   const sides = side === "both" ? ["left", "right"] : [side];