@opensite/ui 3.4.9 → 3.5.0

package/dist/registry.cjs

@@ -4229,6 +4229,7 @@ function FooterLinksGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-links-grid",
       background,
       spacing,
       pattern,
@@ -4347,6 +4348,7 @@ function FooterSocialNewsletter({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-social-newsletter",
       background,
       spacing,
       pattern,
@@ -4504,6 +4506,7 @@ function FooterSocialApps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-social-apps",
       background,
       spacing,
       pattern,
@@ -4619,7 +4622,7 @@ function FooterSimpleCentered({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-simple-centered",
       background,
       spacing,
       pattern,
@@ -4749,6 +4752,7 @@ function FooterBrandDescription({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-brand-description",
       background,
       spacing,
       pattern,
@@ -4960,6 +4964,7 @@ function FooterNewsletterGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-newsletter-grid",
       background,
       spacing,
       pattern,
@@ -5076,7 +5081,7 @@ function FooterCtaBanner({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-cta-banner",
       background,
       spacing,
       pattern,
@@ -5297,7 +5302,7 @@ function FooterContactCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-contact-card",
       background,
       spacing,
       pattern,
@@ -5482,7 +5487,7 @@ function FooterBackgroundCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-background-card",
       background,
       spacing,
       pattern,
@@ -5782,7 +5787,7 @@ function FooterAnimatedSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-animated-social",
       background,
       spacing,
       pattern,
@@ -6050,7 +6055,7 @@ function FooterNewsletterMinimal({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-newsletter-minimal",
       background,
       spacing,
       pattern,
@@ -6267,7 +6272,7 @@ function FooterCtaSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-cta-social",
       background,
       spacing,
       pattern,
@@ -6402,6 +6407,7 @@ function FooterNavSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: "footer-nav-social",
       background,
       spacing,
       pattern,
@@ -27732,7 +27738,7 @@ function FooterBrandLinksContact({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      id: sectionId,
+      id: "footer-brand-links-contact",
       background,
       spacing,
       pattern,
@@ -27877,7 +27883,7 @@ function FooterComprehensiveLinks({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      id: sectionId,
+      id: "footer-comprehensive-links",
       background,
       spacing,
       pattern,
@@ -42882,7 +42888,7 @@ function FooterNewsletterContact({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-newsletter-contact",
       background,
       spacing,
       pattern,
@@ -43029,7 +43035,7 @@ function FooterSplitImageAccordion({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-split-image-accordion",
       background,
       spacing,
       pattern,
@@ -43287,7 +43293,7 @@ function FooterAccordionSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-accordion-social",
       background,
       spacing,
       pattern,
@@ -43409,7 +43415,7 @@ function FooterInfoCardsAccordion({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-info-cards-accordion",
       background,
       spacing,
       pattern,
@@ -56433,7 +56439,7 @@ function HeroStatsSocialProof({
           "pr-4 md:pr-6 shadow-2xl bg-card text-card-foreground"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          statusCard.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: statusCard.icon }),
+          statusCard.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: statusCard.icon }) }) : null,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-balance", children: [
             statusCard.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-sm md:text-md leading-snug", children: statusCard.title }),
             statusCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-snug tracking-tight", children: statusCard.subtitle })
@@ -63207,7 +63213,7 @@ var NavbarDropdownMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-dropdown-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -63435,7 +63441,7 @@ var NavbarCenteredMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-centered-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -63812,7 +63818,7 @@ var NavbarMegaMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-mega-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -64489,7 +64495,7 @@ var NavbarEnterpriseMega = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
@@ -64544,6 +64550,7 @@ var NavbarEnterpriseMega = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-enterprise-mega",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(
@@ -64910,7 +64917,7 @@ var NavbarFeatureGrid = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-feature-grid",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -65101,7 +65108,7 @@ var NavbarFloatingPill = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-floating-pill",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -65319,8 +65326,41 @@ var NavbarPlatformResources = ({
   const hasDropdownItems = (link) => Boolean(link.links?.length || link.dropdownGroups?.length);
   const renderDropdownContent3 = (link) => {
     const layout = link.layout || "simple-list";
+    if (layout === "list-with-icons") {
+      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] overflow-y-auto p-4 md:!w-[900px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full grid-cols-3 gap-4", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+        NavigationMenuLink,
+        {
+          href: getLinkUrl(item),
+          className: "!flex h-full min-h-20 !w-full min-w-0 flex-row items-center gap-4 rounded-lg border border-input bg-background p-4 hover:bg-accent hover:text-accent-foreground",
+          children: [
+            item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: item.image,
+                alt: typeof item.label === "string" ? item.label : "Menu item",
+                className: "h-full w-full object-cover object-center",
+                optixFlowConfig
+              }
+            ) }),
+            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+              DynamicIcon,
+              {
+                name: item.icon || item.iconName,
+                size: 18,
+                className: "shrink-0"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "break-words text-sm font-medium text-foreground", children: item.label }),
+              item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "break-words text-sm font-normal text-muted-foreground", children: item.description })
+            ] })
+          ]
+        },
+        `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
+      )) }) });
+    }
     if (layout === "simple-list") {
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "w-[400px] max-w-[calc(100vw-2rem)] p-3", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "w-full space-y-1", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[400px] max-w-[calc(100vw-2rem)] p-3 md:!w-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "w-full space-y-1", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
         "li",
         {
           className: "w-full",
@@ -65352,7 +65392,7 @@ var NavbarPlatformResources = ({
     if (layout === "featured-grid" && link.links && link.links.length > 0) {
       const featuredItem = link.links[0];
       const gridItems = link.links.slice(1);
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(260px,0.8fr)_minmax(0,1.2fr)] gap-8", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-6 md:!w-[900px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(260px,0.8fr)_minmax(0,1.2fr)] gap-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           NavigationMenuLink,
           {
@@ -65401,7 +65441,7 @@ var NavbarPlatformResources = ({
     }
     if (layout === "two-column-cta" && link.dropdownGroups && link.dropdownGroups.length > 0) {
       const ctaItem = link.links && link.links.length > 0 ? link.links[link.links.length - 1] : null;
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-4", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-6 md:!w-[900px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: link.dropdownGroups[0] && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 text-xs tracking-widest text-muted-foreground uppercase", children: link.dropdownGroups[0].label }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4", children: link.dropdownGroups[0].links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -65453,7 +65493,7 @@ var NavbarPlatformResources = ({
     if (layout === "list-showcase" && link.dropdownGroups && link.dropdownGroups.length > 0) {
       const listItems = link.dropdownGroups[0].links;
       const showcaseItems = link.links || [];
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)] gap-8", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-6 md:!w-[900px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)] gap-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs tracking-widest text-muted-foreground uppercase", children: link.dropdownGroups[0].label }),
           link.dropdownGroups[0].description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 text-sm font-normal text-muted-foreground", children: link.dropdownGroups[0].description }),
@@ -65503,7 +65543,7 @@ var NavbarPlatformResources = ({
     }
     if (layout === "multi-section" && link.dropdownGroups) {
       const ctaItem = link.links && link.links.length > 0 ? link.links[link.links.length - 1] : null;
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-8 md:!w-[900px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
         link.dropdownGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -65556,7 +65596,7 @@ var NavbarPlatformResources = ({
         ] })
       ] }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-4 md:!w-[900px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
       NavigationMenuLink,
       {
         href: getLinkUrl(item),
@@ -65611,7 +65651,7 @@ var NavbarPlatformResources = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-platform-resources",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -65879,7 +65919,7 @@ var NavbarImagePreview = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      id: sectionId,
+      id: "navbar-image-preview",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -66262,7 +66302,7 @@ var NavbarDarkIcons = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      id: sectionId,
+      id: "navbar-dark-icons",
       background,
       spacing: spacingOverride ?? spacing,
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
@@ -66612,6 +66652,7 @@ var NavbarAnimatedPreview = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-animated-preview",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(
@@ -67137,6 +67178,7 @@ var NavbarMultiColumnGroups = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-multi-column-groups",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -67450,6 +67492,7 @@ var NavbarSidebarMobile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-sidebar-mobile",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -67772,6 +67815,7 @@ var NavbarTransparentOverlay = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-transparent-overlay",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -68034,6 +68078,7 @@ var NavbarEducationPlatform = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-education-platform",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -68398,6 +68443,7 @@ var NavbarStickyCompact = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-sticky-compact",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(
@@ -68669,6 +68715,7 @@ var NavbarSearchFocused = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-search-focused",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -68936,6 +68983,7 @@ var NavbarSimpleLinks = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-simple-links",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -69157,7 +69205,7 @@ var NavbarSplitCta = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-split-cta",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -69376,7 +69424,7 @@ var NavbarIconLinks = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-icon-links",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -69699,7 +69747,7 @@ var NavbarTabbedSections = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-tabbed-sections",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -69847,6 +69895,7 @@ var NavbarFullscreenMenu = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-fullscreen-menu",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,