@opensite/ui 3.3.2 → 3.3.4

package/dist/hero-image-slider.cjs

@@ -7,8 +7,8 @@ var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('motion/react');
 var img = require('@page-speed/img');
-var pressable = require('@page-speed/pressable');
 var integration = require('@page-speed/forms/integration');
+var pressable = require('@page-speed/pressable');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -616,6 +616,70 @@ function CardContent({ className, ...props }) {
     }
   );
 }
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    pressable.Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 var DEFAULT_STYLE_RULES = {
   formContainer: "",
   fieldsContainer: "",
@@ -688,36 +752,6 @@ function HeroImageSlider({
   privacyNoticeClassName,
   gridClassName
 }) {
-  const renderActions = React3.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        asButton,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        pressable.Pressable,
-        {
-          asButton: asButton ?? false,
-          variant: "link",
-          className: cn("text-primary p-0 h-auto", actionClassName),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   const renderContent = React3.useMemo(() => {
     if (contentSlot) return contentSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -758,16 +792,14 @@ function HeroImageSlider({
               children: description
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }) : null,
-          actionsSlot || actions && actions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BlockActions,
             {
-              className: cn(
-                "mt-6 flex flex-col items-start gap-3 sm:flex-row",
-                actionsClassName
-              ),
-              children: renderActions
+              actions,
+              actionsSlot,
+              actionsClassName
             }
-          ) : null
+          )
         ]
       }
     );
@@ -782,8 +814,7 @@ function HeroImageSlider({
     eyebrowClassName,
     headingClassName,
     descriptionClassName,
-    actionsClassName,
-    renderActions
+    actionsClassName
   ]);
   const hasForm = formEngineSetup !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -811,7 +842,7 @@ function HeroImageSlider({
               "bg-linear-to-r from-black/70 via-black/50 to-black/30",
               overlayClassName
             ),
-            className: "min-h-full w-full rounded-none border-none shadow-none",
+            className: "min-h-full w-full rounded-none md:rounded-2xl border-none shadow-none md:shadow-xl overflow-hidden",
             imageClassName: cn("scale-[1.02]", imageClassName),
             optixFlowConfig
           }

package/dist/hero-image-slider.js

@@ -6,8 +6,8 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'motion/react';
 import { Img } from '@page-speed/img';
-import { Pressable } from '@page-speed/pressable';
 import { FormEngine } from '@page-speed/forms/integration';
+import { Pressable } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-image-slider.tsx
 function cn(...inputs) {
@@ -595,6 +595,70 @@ function CardContent({ className, ...props }) {
     }
   );
 }
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 var DEFAULT_STYLE_RULES = {
   formContainer: "",
   fieldsContainer: "",
@@ -667,36 +731,6 @@ function HeroImageSlider({
   privacyNoticeClassName,
   gridClassName
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        asButton,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: asButton ?? false,
-          variant: "link",
-          className: cn("text-primary p-0 h-auto", actionClassName),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   const renderContent = useMemo(() => {
     if (contentSlot) return contentSlot;
     return /* @__PURE__ */ jsxs(
@@ -737,16 +771,14 @@ function HeroImageSlider({
               children: description
             }
           ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }) : null,
-          actionsSlot || actions && actions.length > 0 ? /* @__PURE__ */ jsx(
-            "div",
+          /* @__PURE__ */ jsx(
+            BlockActions,
             {
-              className: cn(
-                "mt-6 flex flex-col items-start gap-3 sm:flex-row",
-                actionsClassName
-              ),
-              children: renderActions
+              actions,
+              actionsSlot,
+              actionsClassName
             }
-          ) : null
+          )
         ]
       }
     );
@@ -761,8 +793,7 @@ function HeroImageSlider({
     eyebrowClassName,
     headingClassName,
     descriptionClassName,
-    actionsClassName,
-    renderActions
+    actionsClassName
   ]);
   const hasForm = formEngineSetup !== void 0;
   return /* @__PURE__ */ jsxs(
@@ -790,7 +821,7 @@ function HeroImageSlider({
               "bg-linear-to-r from-black/70 via-black/50 to-black/30",
               overlayClassName
             ),
-            className: "min-h-full w-full rounded-none border-none shadow-none",
+            className: "min-h-full w-full rounded-none md:rounded-2xl border-none shadow-none md:shadow-xl overflow-hidden",
             imageClassName: cn("scale-[1.02]", imageClassName),
             optixFlowConfig
           }

package/dist/hero-marketplace-scattered-images.cjs

@@ -37,9 +37,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-marketplace-scattered-images.js

@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 
 // components/blocks/hero/hero-marketplace-scattered-images.tsx
@@ -16,9 +16,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-mentorship-video-split.cjs

@@ -42,9 +42,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 function AspectRatio({

package/dist/hero-mentorship-video-split.js

@@ -7,7 +7,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -19,9 +19,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 function AspectRatio({

package/dist/hero-mobile-app-download.cjs

@@ -38,9 +38,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-mobile-app-download.js

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -17,9 +17,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-overlay-cta-grid.cjs

@@ -37,9 +37,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-overlay-cta-grid.js

@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Pressable } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-overlay-cta-grid.tsx
@@ -16,9 +16,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-platform-features-grid.cjs

@@ -36,9 +36,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-platform-features-grid.js

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 
 // components/blocks/hero/hero-platform-features-grid.tsx
@@ -15,9 +15,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-portfolio-creative.cjs

@@ -62,9 +62,14 @@ function getTextColor(parentBg, variant = "default", options) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-portfolio-creative.js

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 
 // components/blocks/hero/hero-portfolio-creative.tsx
@@ -41,9 +41,14 @@ function getTextColor(parentBg, variant = "default", options) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-pricing-comparison.cjs

@@ -115,9 +115,14 @@ function getBorderColor(parentBg, variant = "default", options) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var badgeVariants = classVarianceAuthority.cva(

package/dist/hero-pricing-comparison.js

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 
@@ -94,9 +94,14 @@ function getBorderColor(parentBg, variant = "default", options) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var badgeVariants = cva(

package/dist/hero-product-showcase-floating.cjs

@@ -38,9 +38,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React5__namespace.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {

package/dist/hero-product-showcase-floating.js

@@ -4,7 +4,7 @@ import React5__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -17,9 +17,14 @@ function cn(...inputs) {
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React5.memo(function DynamicIcon2({
   apiKey,
+  name,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+  if (name == null) return null;
+  if (typeof name !== "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: name });
+  }
+  return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {