@almadar/ui 5.69.0 → 5.71.0

package/dist/marketing/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React9 = require('react');
+var React11 = require('react');
 var logger = require('@almadar/logger');
 var jsxRuntime = require('react/jsx-runtime');
 var LucideIcons2 = require('lucide-react');
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React9__default = /*#__PURE__*/_interopDefault(React9);
+var React11__default = /*#__PURE__*/_interopDefault(React11);
 var LucideIcons2__namespace = /*#__PURE__*/_interopNamespace(LucideIcons2);
 
 // node_modules/clsx/dist/clsx.mjs
@@ -2509,10 +2509,10 @@ function cn(...inputs) {
 }
 logger.createLogger("almadar:eventbus");
 logger.createLogger("almadar:eventbus:subscribe");
-var EventBusContext = React9.createContext(null);
-var TraitScopeContext = React9.createContext(null);
+var EventBusContext = React11.createContext(null);
+var TraitScopeContext = React11.createContext(null);
 function useTraitScope() {
-  return React9.useContext(TraitScopeContext);
+  return React11.useContext(TraitScopeContext);
 }
 var log = logger.createLogger("almadar:eventbus");
 var subLog2 = logger.createLogger("almadar:eventbus:subscribe");
@@ -2588,10 +2588,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React9.useContext(EventBusContext);
+  const context = React11.useContext(EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const scope = useTraitScope();
-  return React9.useMemo(() => {
+  return React11.useMemo(() => {
     if (!scope) {
       return {
         ...baseBus,
@@ -2627,24 +2627,24 @@ function useEventBus() {
 }
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
-  const [revealed, setRevealed] = React9.useState(false);
-  const onRevealRef = React9.useRef(onReveal);
-  const onDismissRef = React9.useRef(onDismiss);
+  const [revealed, setRevealed] = React11.useState(false);
+  const onRevealRef = React11.useRef(onReveal);
+  const onDismissRef = React11.useRef(onDismiss);
   onRevealRef.current = onReveal;
   onDismissRef.current = onDismiss;
-  const reveal = React9.useCallback(() => {
+  const reveal = React11.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React9.useCallback(() => {
+  const dismiss = React11.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React9.useCallback(
+  const onPointerDown = React11.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -2652,7 +2652,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     if (!revealed || typeof document === "undefined") return;
     const onDocDown = (ev) => {
       const target = ev.target;
@@ -2772,7 +2772,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React9__default.default.forwardRef(
+var Box = React11__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2804,20 +2804,20 @@ var Box = React9__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React9.useCallback((e) => {
+    const handleClick = React11.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React9.useCallback((e) => {
+    const handleMouseEnter = React11.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React9.useCallback((e) => {
+    const handleMouseLeave = React11.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -2825,19 +2825,19 @@ var Box = React9__default.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React9.useCallback(() => {
+      onReveal: React11.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React9.useCallback(() => {
+      onDismiss: React11.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React9.useCallback((e) => {
+    const handlePointerDown = React11.useCallback((e) => {
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React9__default.default.createElement(
+    return React11__default.default.createElement(
       Component,
       {
         ref,
@@ -2925,9 +2925,8 @@ 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";
-  const Comp = Component;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
+  return React11__default.default.createElement(
+    Component,
     {
       className: cn(
         "flex",
@@ -2943,9 +2942,9 @@ var Stack = ({
       onClick: action || onClick ? handleClick : void 0,
       onKeyDown,
       role,
-      tabIndex,
-      children
-    }
+      tabIndex
+    },
+    children
   );
 };
 var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
@@ -3036,9 +3035,8 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component = as || defaultElements[variant];
-  const Comp = Component;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
+  return React11__default.default.createElement(
+    Component,
     {
       id,
       className: cn(
@@ -3051,9 +3049,9 @@ var Typography = ({
         overflow && overflowStyles2[overflow],
         className
       ),
-      style,
-      children: children ?? content
-    }
+      style
+    },
+    children ?? content
   );
 };
 Typography.displayName = "Typography";
@@ -3107,7 +3105,7 @@ function getIconFamilyServerSnapshot() {
   return DEFAULT_FAMILY;
 }
 function useIconFamily() {
-  return React9.useSyncExternalStore(
+  return React11.useSyncExternalStore(
     subscribeIconFamily,
     getIconFamilySnapshot,
     getIconFamilyServerSnapshot
@@ -3129,7 +3127,7 @@ function loadLib(key, importer) {
   return p;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React9__default.default.lazy(async () => {
+  const Lazy = React11__default.default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -3139,7 +3137,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    React9__default.default.Suspense,
+    React11__default.default.Suspense,
     {
       fallback: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
@@ -3809,9 +3807,10 @@ function resolveIcon(name) {
 function doResolve(name) {
   if (iconAliases[name]) return iconAliases[name];
   const pascalName = kebabToPascal2(name);
-  const directLookup = LucideIcons2__namespace[pascalName];
+  const lucideMap = LucideIcons2__namespace;
+  const directLookup = lucideMap[pascalName];
   if (directLookup && typeof directLookup === "object") return directLookup;
-  const asIs = LucideIcons2__namespace[name];
+  const asIs = lucideMap[name];
   if (asIs && typeof asIs === "object") return asIs;
   return LucideIcons2__namespace.HelpCircle;
 }
@@ -3840,7 +3839,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React9__default.default.useMemo(() => {
+  const RenderedComponent = React11__default.default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3948,6 +3947,9 @@ var iconSizeStyles = {
   md: "h-icon-default w-icon-default",
   lg: "h-icon-default w-icon-default"
 };
+function isIconLike(v) {
+  return typeof v.render === "function";
+}
 function resolveIconProp(value, sizeClass) {
   if (!value) return null;
   if (typeof value === "string") {
@@ -3957,16 +3959,16 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React9__default.default.isValidElement(value)) {
+  if (React11__default.default.isValidElement(value)) {
     return value;
   }
-  if (typeof value === "object" && value !== null && "render" in value) {
+  if (typeof value === "object" && value !== null && isIconLike(value)) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
   return value;
 }
-var Button = React9__default.default.forwardRef(
+var Button = React11__default.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3982,6 +3984,7 @@ var Button = React9__default.default.forwardRef(
     label,
     children,
     onClick,
+    "data-testid": dataTestId,
     ...props
   }, ref) => {
     const eventBus = useEventBus();
@@ -4014,7 +4017,7 @@ var Button = React9__default.default.forwardRef(
         ),
         onClick: handleClick,
         ...props,
-        "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
+        "data-testid": dataTestId ?? (action ? `action-${action}` : void 0),
         children: [
           isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
           children || label,
@@ -4062,7 +4065,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React9__default.default.forwardRef(
+var Badge = React11__default.default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
     const iconSizes = {
       sm: "h-icon-default w-icon-default",
@@ -4115,7 +4118,7 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React9__default.default.forwardRef(
+var Spinner = React11__default.default.forwardRef(
   ({ className, size = "md", overlay, ...props }, ref) => {
     if (overlay) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4197,7 +4200,7 @@ var lookStyles = {
   chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
   "tile-image-first": "p-0 overflow-hidden"
 };
-var Card = React9__default.default.forwardRef(
+var Card = React11__default.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -4245,9 +4248,9 @@ var Card = React9__default.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React9__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React11__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React9__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React11__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -4260,11 +4263,11 @@ var CardTitle = React9__default.default.forwardRef(({ className, ...props }, ref
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React9__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React11__default.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 = React9__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React11__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -4356,22 +4359,18 @@ var Center = ({
   as: Component = "div"
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  const Comp = Component;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      className: cn(
-        inline ? "inline-flex" : "flex",
-        horizontal && "justify-center",
-        vertical && "items-center",
-        fullHeight && "h-full",
-        fullWidth && "w-full",
-        className
-      ),
-      style: mergedStyle,
-      children
-    }
-  );
+  return React11__default.default.createElement(Component, {
+    className: cn(
+      inline ? "inline-flex" : "flex",
+      horizontal && "justify-center",
+      vertical && "items-center",
+      fullHeight && "h-full",
+      fullWidth && "w-full",
+      className
+    ),
+    style: mergedStyle,
+    children
+  });
 };
 var horizontalSizes = {
   xs: "w-1",
@@ -4421,7 +4420,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React9__default.default.forwardRef(
+var ContentSection = React11__default.default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -4445,8 +4444,8 @@ var InstallBox = ({
   label,
   className
 }) => {
-  const [copied, setCopied] = React9.useState(false);
-  const handleCopy = React9.useCallback(() => {
+  const [copied, setCopied] = React11.useState(false);
+  const handleCopy = React11.useCallback(() => {
     void navigator.clipboard.writeText(command);
     setCopied(true);
     const timer = setTimeout(() => setCopied(false), 2e3);
@@ -5023,7 +5022,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(React9__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(React11__default.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" })
@@ -5034,7 +5033,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(React9__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(React11__default.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 }),
@@ -5242,8 +5241,8 @@ var Avatar = ({
   actionPayload
 }) => {
   const eventBus = useEventBus();
-  const [imgFailed, setImgFailed] = React9__default.default.useState(false);
-  React9__default.default.useEffect(() => {
+  const [imgFailed, setImgFailed] = React11__default.default.useState(false);
+  React11__default.default.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -5560,10 +5559,10 @@ var AnimatedCounter = ({
   duration = 1500,
   className
 }) => {
-  const ref = React9.useRef(null);
-  const [displayValue, setDisplayValue] = React9.useState("0");
-  const [hasAnimated, setHasAnimated] = React9.useState(false);
-  const animate = React9.useCallback(() => {
+  const ref = React11.useRef(null);
+  const [displayValue, setDisplayValue] = React11.useState("0");
+  const [hasAnimated, setHasAnimated] = React11.useState(false);
+  const animate = React11.useCallback(() => {
     const { num, prefix, suffix, decimals } = parseValue(value);
     if (num === 0) {
       setDisplayValue(String(value));
@@ -5584,7 +5583,7 @@ var AnimatedCounter = ({
     };
     requestAnimationFrame(tick);
   }, [value, duration]);
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     if (hasAnimated) return;
     const el = ref.current;
     if (!el) return;
@@ -5634,7 +5633,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React9__default.default.forwardRef(
+var AnimatedReveal = React11__default.default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -5649,10 +5648,10 @@ var AnimatedReveal = React9__default.default.forwardRef(
     style,
     ...props
   }, forwardedRef) => {
-    const [isAnimated, setIsAnimated] = React9.useState(false);
-    const internalRef = React9.useRef(null);
-    const hasAnimated = React9.useRef(false);
-    const setRef = React9.useCallback(
+    const [isAnimated, setIsAnimated] = React11.useState(false);
+    const internalRef = React11.useRef(null);
+    const hasAnimated = React11.useRef(false);
+    const setRef = React11.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -5660,7 +5659,7 @@ var AnimatedReveal = React9__default.default.forwardRef(
       },
       [forwardedRef]
     );
-    React9.useEffect(() => {
+    React11.useEffect(() => {
       if (trigger !== "scroll") return;
       const el = internalRef.current;
       if (!el) return;
@@ -5686,7 +5685,7 @@ var AnimatedReveal = React9__default.default.forwardRef(
         setIsAnimated(false);
       }
     } : void 0;
-    React9.useEffect(() => {
+    React11.useEffect(() => {
       if (trigger === "manual" && manualAnimate !== void 0) {
         setIsAnimated(manualAnimate);
       }
@@ -5716,9 +5715,9 @@ var AnimatedReveal = React9__default.default.forwardRef(
 );
 AnimatedReveal.displayName = "AnimatedReveal";
 function useFetchedSvg(src) {
-  const [svg, setSvg] = React9.useState(null);
-  const cache = React9.useRef({});
-  React9.useEffect(() => {
+  const [svg, setSvg] = React11.useState(null);
+  const cache = React11.useRef({});
+  React11.useEffect(() => {
     if (!src) {
       setSvg(null);
       return;
@@ -5787,7 +5786,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React9__default.default.forwardRef(
+var AnimatedGraphic = React11__default.default.forwardRef(
   ({
     src,
     svgContent,
@@ -5806,11 +5805,11 @@ var AnimatedGraphic = React9__default.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = React9.useRef(null);
+    const containerRef = React11.useRef(null);
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
-    const prevAnimateRef = React9.useRef(animate);
-    const setRef = React9__default.default.useCallback(
+    const prevAnimateRef = React11.useRef(animate);
+    const setRef = React11__default.default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -5818,7 +5817,7 @@ var AnimatedGraphic = React9__default.default.forwardRef(
       },
       [ref]
     );
-    React9.useEffect(() => {
+    React11.useEffect(() => {
       const el = containerRef.current;
       if (!el || !strokeColor) return;
       const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
@@ -5826,7 +5825,7 @@ var AnimatedGraphic = React9__default.default.forwardRef(
         p.style.stroke = strokeColor;
       });
     }, [resolvedSvg, strokeColor]);
-    React9.useEffect(() => {
+    React11.useEffect(() => {
       const el = containerRef.current;
       if (!el || !resolvedSvg) return;
       if (animation === "draw" || animation === "fill") {
@@ -5851,7 +5850,7 @@ var AnimatedGraphic = React9__default.default.forwardRef(
         });
       }
     }, [resolvedSvg, animation]);
-    React9.useEffect(() => {
+    React11.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const id = requestAnimationFrame(() => {
@@ -6651,7 +6650,7 @@ var GeometricPattern = ({
   children,
   className
 }) => {
-  const reactId = React9.useId();
+  const reactId = React11.useId();
   const patternId = `gp${reactId.replace(/:/g, "")}`;
   const size = 60 * scale;
   const stripHeight = 40 * scale;
@@ -6886,7 +6885,7 @@ var EdgeDecoration = ({
   width = 15,
   className
 }) => {
-  const id = React9.useId();
+  const id = React11.useId();
   const Variant = VARIANT_MAP2[variant];
   const resolvedColor = color in colorTokenVars2 ? colorTokenVars2[color] : color;
   const sides = side === "both" ? ["left", "right"] : [side];

package/dist/marketing/index.d.cts

@@ -267,6 +267,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     label?: string;
     /** Disable the button (greys out, blocks click events) */
     disabled?: boolean;
+    /** Test identifier for automated tests */
+    'data-testid'?: string;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;