@opensite/ui 2.8.6 → 2.8.8

package/dist/index.cjs

@@ -1041,41 +1041,55 @@ function MarkerMediaCarousel({
   React6__namespace.useEffect(() => {
     setActiveIndex(0);
   }, [mediaResetKey]);
-  const activeMediaItem = mediaItems[activeItemIndex];
-  const mediaType = resolveMediaType(activeMediaItem);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative border-b border-border/60 bg-muted/40", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-44 w-full overflow-hidden", children: mediaType === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
-      {
-        className: "h-full w-full object-cover",
-        controls: true,
-        preload: "metadata",
-        poster: activeMediaItem.poster,
-        children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: activeMediaItem.src })
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: activeMediaItem.src,
-        alt: activeMediaItem.alt ?? "Map marker media",
-        className: "h-full w-full object-cover",
-        loading: "eager",
-        optixFlowConfig
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: mediaItems.map((item, index) => {
+      const isActive = index === activeItemIndex;
+      const mediaType = resolveMediaType(item);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": !isActive,
+          className: cn(
+            "absolute inset-0 transition-opacity duration-500 ease-in-out",
+            isActive ? "opacity-100 z-[1]" : "opacity-0 z-0 pointer-events-none"
+          ),
+          children: mediaType === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "video",
+            {
+              className: "h-full w-full object-cover",
+              controls: isActive,
+              preload: "metadata",
+              poster: item.poster,
+              tabIndex: isActive ? 0 : -1,
+              children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: item.src })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: item.src,
+              alt: item.alt ?? "Map marker media",
+              className: "h-full w-full object-cover",
+              loading: "eager",
+              optixFlowConfig
+            }
+          )
+        },
+        normalizeId(item.id, `media-slide-${index}`)
+      );
+    }) }),
     totalItems > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           "aria-label": "Show previous media",
-          className: "absolute left-2 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full bg-card text-card-foreground shadow-sm transition hover:bg-muted hover:text-muted-foreground",
+          className: "absolute left-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
           onClick: () => {
             setActiveIndex(
               (current) => (current - 1 + totalItems) % totalItems
             );
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 18 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1083,20 +1097,20 @@ function MarkerMediaCarousel({
         {
           type: "button",
           "aria-label": "Show next media",
-          className: "absolute right-2 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-card text-card-foreground shadow-sm transition hover:bg-muted hover:text-muted-foreground",
+          className: "absolute right-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
           onClick: () => {
             setActiveIndex((current) => (current + 1) % totalItems);
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 18 })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5", children: mediaItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-[2]", children: mediaItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           "aria-label": `Show media item ${index + 1}`,
           className: cn(
-            "h-2 rounded-full transition-all",
+            "h-2 rounded-full transition-all duration-300",
             index === activeItemIndex ? "w-6 bg-card" : "w-2 bg-card opacity-50 hover:opacity-100"
           ),
           onClick: () => setActiveIndex(index)
@@ -1427,9 +1441,9 @@ function GeoMap({
               {
                 type: "button",
                 "aria-label": "Close marker details",
-                className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
+                className: "\n            flex size-12 items-center justify-center rounded-bl-lg rounded-br-0 rounded-t-0 bg-black text-white transition-all duration-500 absolute top-0 right-0 z-10 cursor-pointer ring-4 ring-white\n",
                 onClick: clearSelection,
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
               }
             ),
             markerMediaItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1451,7 +1465,7 @@ function GeoMap({
                   {
                     name: "lucide:map-pin",
                     className: "opacity-50",
-                    size: 14
+                    size: 18
                   }
                 ),
                 typeof selectedMarker.locationLine === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1473,7 +1487,7 @@ function GeoMap({
                   {
                     name: "lucide:clock",
                     className: "opacity-50",
-                    size: 14
+                    size: 18
                   }
                 ),
                 typeof selectedMarker.hoursLine === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: selectedMarker.hoursLine }) : selectedMarker.hoursLine
@@ -1501,7 +1515,7 @@ function GeoMap({
                 "aria-label": "Close cluster details",
                 className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
                 onClick: clearSelection,
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
@@ -2190,6 +2204,23 @@ function PopoverContent({
     }
   ) });
 }
+function StarRating({
+  rating,
+  size = 18,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
+    DynamicIcon,
+    {
+      name: "icon-park-solid/star",
+      size,
+      className: cn(
+        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
+      )
+    },
+    star
+  )) });
+}
 var BUTTON_SIZES = {
   sm: { buttonSize: "size-8", iconSize: 16 },
   md: { buttonSize: "size-10", iconSize: 20 },
@@ -2291,6 +2322,7 @@ var SocialLinkIcon = React6__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -2303,6 +2335,21 @@ var SocialLinkIcon = React6__namespace.forwardRef(
     const accessibleLabel = React6__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React6__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -2314,16 +2361,7 @@ var SocialLinkIcon = React6__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }
@@ -7666,6 +7704,7 @@ exports.PopoverTrigger = PopoverTrigger;
 exports.Pressable = Pressable;
 exports.Section = Section;
 exports.SocialLinkIcon = SocialLinkIcon;
+exports.StarRating = StarRating;
 exports.cn = cn;
 exports.getAccentColor = getAccentColor;
 exports.getBorderColor = getBorderColor;

package/dist/index.d.cts

@@ -9,6 +9,7 @@ export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 export { Badge } from './badge.cjs';
 export { Popover, PopoverContent, PopoverTrigger } from './popover.cjs';
 export { DynamicIcon } from './dynamic-icon.cjs';
+export { StarRating, StarRatingProps } from './components.cjs';
 export { CarouselPagination, CarouselPaginationProps } from './carousel-pagination.cjs';
 export { SocialLinkIcon, SocialLinkIconDynamicIconProps, SocialLinkIconProps } from './social-link-icon.cjs';
 export { PaymentPlatformIcon, PaymentPlatformIconProps, PaymentPlatformName } from './payment-platform-icon.cjs';

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 export { Badge } from './badge.js';
 export { Popover, PopoverContent, PopoverTrigger } from './popover.js';
 export { DynamicIcon } from './dynamic-icon.js';
+export { StarRating, StarRatingProps } from './components.js';
 export { CarouselPagination, CarouselPaginationProps } from './carousel-pagination.js';
 export { SocialLinkIcon, SocialLinkIconDynamicIconProps, SocialLinkIconProps } from './social-link-icon.js';
 export { PaymentPlatformIcon, PaymentPlatformIconProps, PaymentPlatformName } from './payment-platform-icon.js';

package/dist/index.js

@@ -1019,41 +1019,55 @@ function MarkerMediaCarousel({
   React6.useEffect(() => {
     setActiveIndex(0);
   }, [mediaResetKey]);
-  const activeMediaItem = mediaItems[activeItemIndex];
-  const mediaType = resolveMediaType(activeMediaItem);
   return /* @__PURE__ */ jsxs("div", { className: "relative border-b border-border/60 bg-muted/40", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative h-44 w-full overflow-hidden", children: mediaType === "video" ? /* @__PURE__ */ jsx(
-      "video",
-      {
-        className: "h-full w-full object-cover",
-        controls: true,
-        preload: "metadata",
-        poster: activeMediaItem.poster,
-        children: /* @__PURE__ */ jsx("source", { src: activeMediaItem.src })
-      }
-    ) : /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: activeMediaItem.src,
-        alt: activeMediaItem.alt ?? "Map marker media",
-        className: "h-full w-full object-cover",
-        loading: "eager",
-        optixFlowConfig
-      }
-    ) }),
+    /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: mediaItems.map((item, index) => {
+      const isActive = index === activeItemIndex;
+      const mediaType = resolveMediaType(item);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": !isActive,
+          className: cn(
+            "absolute inset-0 transition-opacity duration-500 ease-in-out",
+            isActive ? "opacity-100 z-[1]" : "opacity-0 z-0 pointer-events-none"
+          ),
+          children: mediaType === "video" ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              className: "h-full w-full object-cover",
+              controls: isActive,
+              preload: "metadata",
+              poster: item.poster,
+              tabIndex: isActive ? 0 : -1,
+              children: /* @__PURE__ */ jsx("source", { src: item.src })
+            }
+          ) : /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: item.src,
+              alt: item.alt ?? "Map marker media",
+              className: "h-full w-full object-cover",
+              loading: "eager",
+              optixFlowConfig
+            }
+          )
+        },
+        normalizeId(item.id, `media-slide-${index}`)
+      );
+    }) }),
     totalItems > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           "aria-label": "Show previous media",
-          className: "absolute left-2 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full bg-card text-card-foreground shadow-sm transition hover:bg-muted hover:text-muted-foreground",
+          className: "absolute left-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
           onClick: () => {
             setActiveIndex(
               (current) => (current - 1 + totalItems) % totalItems
             );
           },
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 18 })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1061,20 +1075,20 @@ function MarkerMediaCarousel({
         {
           type: "button",
           "aria-label": "Show next media",
-          className: "absolute right-2 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-card text-card-foreground shadow-sm transition hover:bg-muted hover:text-muted-foreground",
+          className: "absolute right-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
           onClick: () => {
             setActiveIndex((current) => (current + 1) % totalItems);
           },
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5", children: mediaItems.map((item, index) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-[2]", children: mediaItems.map((item, index) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           "aria-label": `Show media item ${index + 1}`,
           className: cn(
-            "h-2 rounded-full transition-all",
+            "h-2 rounded-full transition-all duration-300",
             index === activeItemIndex ? "w-6 bg-card" : "w-2 bg-card opacity-50 hover:opacity-100"
           ),
           onClick: () => setActiveIndex(index)
@@ -1405,9 +1419,9 @@ function GeoMap({
               {
                 type: "button",
                 "aria-label": "Close marker details",
-                className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
+                className: "\n            flex size-12 items-center justify-center rounded-bl-lg rounded-br-0 rounded-t-0 bg-black text-white transition-all duration-500 absolute top-0 right-0 z-10 cursor-pointer ring-4 ring-white\n",
                 onClick: clearSelection,
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
               }
             ),
             markerMediaItems.length > 0 ? /* @__PURE__ */ jsx(
@@ -1429,7 +1443,7 @@ function GeoMap({
                   {
                     name: "lucide:map-pin",
                     className: "opacity-50",
-                    size: 14
+                    size: 18
                   }
                 ),
                 typeof selectedMarker.locationLine === "string" ? /* @__PURE__ */ jsx(
@@ -1451,7 +1465,7 @@ function GeoMap({
                   {
                     name: "lucide:clock",
                     className: "opacity-50",
-                    size: 14
+                    size: 18
                   }
                 ),
                 typeof selectedMarker.hoursLine === "string" ? /* @__PURE__ */ jsx("div", { className: "font-medium", children: selectedMarker.hoursLine }) : selectedMarker.hoursLine
@@ -1479,7 +1493,7 @@ function GeoMap({
                 "aria-label": "Close cluster details",
                 className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
                 onClick: clearSelection,
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
@@ -2168,6 +2182,23 @@ function PopoverContent({
     }
   ) });
 }
+function StarRating({
+  rating,
+  size = 18,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
+    DynamicIcon,
+    {
+      name: "icon-park-solid/star",
+      size,
+      className: cn(
+        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
+      )
+    },
+    star
+  )) });
+}
 var BUTTON_SIZES = {
   sm: { buttonSize: "size-8", iconSize: 16 },
   md: { buttonSize: "size-10", iconSize: 20 },
@@ -2269,6 +2300,7 @@ var SocialLinkIcon = React6.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -2281,6 +2313,21 @@ var SocialLinkIcon = React6.forwardRef(
     const accessibleLabel = React6.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React6.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -2292,16 +2339,7 @@ var SocialLinkIcon = React6.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }
@@ -7560,4 +7598,4 @@ var useResponsiveLayout = ({
   return { responsiveClassName };
 };
 
-export { AboutCultureTabs, AboutExpandableValues, AboutMissionPrinciples, AboutSplitHero, AlternatingBlocks, AnimatedDialog, Badge, BannerAnnouncementDismissible, BannerCountdownSale, BannerDeliveryCountdown, BannerEventPromo, BannerFloatingOffer, BannerGdprRights, BannerPrivacyNotice, BannerPromoCta, BannerSocialFollow, BannerSurveyIncentive, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CarouselPagination, CommunityInitiatives, Container, DynamicIcon, FooterAnimatedSocial, FooterBackgroundCard, FooterBrandDescription, FooterContactCard, FooterCtaBanner, FooterCtaSocial, FooterLinksGrid, FooterNavSocial, FooterNewsletterGrid, FooterNewsletterMinimal, FooterSimpleCentered, FooterSocialApps, FooterSocialNewsletter, GeoMap, ImageSlider, MediaHoverCtas, PageHeroBanner, PaymentPlatformIcon, Popover, PopoverContent, PopoverTrigger, Pressable, Section, SocialLinkIcon, cn, getAccentColor, getBorderColor, getNestedCardBg, getNestedCardTextColor, getTextColor, useNavigation, useResponsiveLayout };
+export { AboutCultureTabs, AboutExpandableValues, AboutMissionPrinciples, AboutSplitHero, AlternatingBlocks, AnimatedDialog, Badge, BannerAnnouncementDismissible, BannerCountdownSale, BannerDeliveryCountdown, BannerEventPromo, BannerFloatingOffer, BannerGdprRights, BannerPrivacyNotice, BannerPromoCta, BannerSocialFollow, BannerSurveyIncentive, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CarouselPagination, CommunityInitiatives, Container, DynamicIcon, FooterAnimatedSocial, FooterBackgroundCard, FooterBrandDescription, FooterContactCard, FooterCtaBanner, FooterCtaSocial, FooterLinksGrid, FooterNavSocial, FooterNewsletterGrid, FooterNewsletterMinimal, FooterSimpleCentered, FooterSocialApps, FooterSocialNewsletter, GeoMap, ImageSlider, MediaHoverCtas, PageHeroBanner, PaymentPlatformIcon, Popover, PopoverContent, PopoverTrigger, Pressable, Section, SocialLinkIcon, StarRating, cn, getAccentColor, getBorderColor, getNestedCardBg, getNestedCardTextColor, getTextColor, useNavigation, useResponsiveLayout };

package/dist/link-page-bento-layout.cjs

@@ -879,6 +879,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -891,6 +892,21 @@ var SocialLinkIcon = React__namespace.forwardRef(
     const accessibleLabel = React__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -902,16 +918,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/link-page-bento-layout.js

@@ -858,6 +858,7 @@ var SocialLinkIcon = React.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -870,6 +871,21 @@ var SocialLinkIcon = React.forwardRef(
     const accessibleLabel = React.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -881,16 +897,7 @@ var SocialLinkIcon = React.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/link-page-grid-cards.cjs

@@ -879,6 +879,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -891,6 +892,21 @@ var SocialLinkIcon = React__namespace.forwardRef(
     const accessibleLabel = React__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -902,16 +918,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/link-page-grid-cards.js

@@ -858,6 +858,7 @@ var SocialLinkIcon = React.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -870,6 +871,21 @@ var SocialLinkIcon = React.forwardRef(
     const accessibleLabel = React.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -881,16 +897,7 @@ var SocialLinkIcon = React.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }