@opensite/ui 2.3.1 → 2.3.2

package/dist/contact-photography.cjs

@@ -491,7 +491,7 @@ var DEFAULT_FORM_FIELDS = [
 function ContactPhotography({
   heading,
   description,
-  containerClassName = "mx-auto w-full max-w-full relative z-10 px-0",
+  containerClassName = "px-0 sm:px-0 md:px-0 lg:px-0 mx-0 w-full max-w-full relative z-10",
   className,
   headingClassName,
   descriptionClassName,

package/dist/contact-photography.js

@@ -470,7 +470,7 @@ var DEFAULT_FORM_FIELDS = [
 function ContactPhotography({
   heading,
   description,
-  containerClassName = "mx-auto w-full max-w-full relative z-10 px-0",
+  containerClassName = "px-0 sm:px-0 md:px-0 lg:px-0 mx-0 w-full max-w-full relative z-10",
   className,
   headingClassName,
   descriptionClassName,

package/dist/hero-event-registration.cjs

@@ -1008,20 +1008,30 @@ function HeroEventRegistration({
   const renderLocation = React3.useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-2 md:p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
-            "flex h-12 w-12 items-center justify-center rounded-full text-card-foreground"
+            "flex items-center justify-center shrink-0",
+            "size-12 rounded-xl bg-primary text-primary-foreground"
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/map-pin", size: 24 })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-start justify-center",
+            "text-card-foreground gap-0 pr-0 md:pr-2"
+          ),
+          children: [
+            locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: locationLabel }) : locationLabel),
+            locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs"), children: locationSublabel }) : locationSublabel)
+          ]
+        }
+      )
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
   const renderImage = React3.useMemo(() => {
@@ -1064,7 +1074,7 @@ function HeroEventRegistration({
                 {
                   src: logo.src,
                   alt: logo.alt,
-                  className: "mr-auto h-12 md:h-16",
+                  className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
                   optixFlowConfig
                 }
               ),

package/dist/hero-event-registration.js

@@ -987,20 +987,30 @@ function HeroEventRegistration({
   const renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-2 md:p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "flex h-12 w-12 items-center justify-center rounded-full text-card-foreground"
+            "flex items-center justify-center shrink-0",
+            "size-12 rounded-xl bg-primary text-primary-foreground"
           ),
           children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/map-pin", size: 24 })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
-      ] })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-start justify-center",
+            "text-card-foreground gap-0 pr-0 md:pr-2"
+          ),
+          children: [
+            locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold", children: locationLabel }) : locationLabel),
+            locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-xs"), children: locationSublabel }) : locationSublabel)
+          ]
+        }
+      )
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
   const renderImage = useMemo(() => {
@@ -1043,7 +1053,7 @@ function HeroEventRegistration({
                 {
                   src: logo.src,
                   alt: logo.alt,
-                  className: "mr-auto h-12 md:h-16",
+                  className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
                   optixFlowConfig
                 }
               ),

package/dist/hero-video-background-dark.cjs

@@ -972,9 +972,9 @@ function HeroVideoBackgroundDark({
           "div",
           {
             className: cn(
-              "relative z-10 mx-auto flex size-full max-w-3xl",
-              "flex-col justify-center gap-4 md:gap-6 items-center",
-              "text-center px-4 md:px-6",
+              "relative z-10 mx-auto flex size-full",
+              "md:max-w-3xl lg:max-w-4xl flex-col justify-center",
+              "gap-4 md:gap-6 items-center text-center px-4 md:px-6",
               contentClassName
             ),
             children: [
@@ -983,7 +983,8 @@ function HeroVideoBackgroundDark({
                 "h1",
                 {
                   className: cn(
-                    "text-4xl font-bold md:text-6xl lg:text-7xl text-balance text-white text-shadow-2xl",
+                    "font-bold text-5xl md:text-6xl lg:text-8xl",
+                    "text-pretty text-white text-shadow-2xl",
                     headingClassName
                   ),
                   children: heading

package/dist/hero-video-background-dark.js

@@ -951,9 +951,9 @@ function HeroVideoBackgroundDark({
           "div",
           {
             className: cn(
-              "relative z-10 mx-auto flex size-full max-w-3xl",
-              "flex-col justify-center gap-4 md:gap-6 items-center",
-              "text-center px-4 md:px-6",
+              "relative z-10 mx-auto flex size-full",
+              "md:max-w-3xl lg:max-w-4xl flex-col justify-center",
+              "gap-4 md:gap-6 items-center text-center px-4 md:px-6",
               contentClassName
             ),
             children: [
@@ -962,7 +962,8 @@ function HeroVideoBackgroundDark({
                 "h1",
                 {
                   className: cn(
-                    "text-4xl font-bold md:text-6xl lg:text-7xl text-balance text-white text-shadow-2xl",
+                    "font-bold text-5xl md:text-6xl lg:text-8xl",
+                    "text-pretty text-white text-shadow-2xl",
                     headingClassName
                   ),
                   children: heading

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

@@ -1019,7 +1019,8 @@ function LinkPageGridCards({
                 "group flex flex-col items-center gap-2 rounded-xl",
                 "hover:scale-[1.03] active:scale-[0.97]",
                 "transition-all duration-200 p-4",
-                "border border-border bg-card shadow-sm hover:shadow-md",
+                "bg-card text-card-foreground shadow-sm hover:shadow-md",
+                "border border-border",
                 cardClassName,
                 linkClassName
               ),

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

@@ -998,7 +998,8 @@ function LinkPageGridCards({
                 "group flex flex-col items-center gap-2 rounded-xl",
                 "hover:scale-[1.03] active:scale-[0.97]",
                 "transition-all duration-200 p-4",
-                "border border-border bg-card shadow-sm hover:shadow-md",
+                "bg-card text-card-foreground shadow-sm hover:shadow-md",
+                "border border-border",
                 cardClassName,
                 linkClassName
               ),

package/dist/navbar-image-preview.cjs

@@ -1328,7 +1328,7 @@ var NavbarImagePreview = ({
           "div",
           {
             className: cn(
-              "flex items-center justify-between gap-3.5 py-5",
+              "relative flex items-center justify-between gap-3.5 py-5",
               navClassName
             ),
             children: [
@@ -1345,7 +1345,7 @@ var NavbarImagePreview = ({
                 NavigationMenu,
                 {
                   className: cn(
-                    "hidden lg:flex [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
+                    "hidden lg:flex absolute left-1/2 -translate-x-1/2 [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
                     navigationMenuClassName
                   ),
                   children: renderNavigation

package/dist/navbar-image-preview.js

@@ -1305,7 +1305,7 @@ var NavbarImagePreview = ({
           "div",
           {
             className: cn(
-              "flex items-center justify-between gap-3.5 py-5",
+              "relative flex items-center justify-between gap-3.5 py-5",
               navClassName
             ),
             children: [
@@ -1322,7 +1322,7 @@ var NavbarImagePreview = ({
                 NavigationMenu,
                 {
                   className: cn(
-                    "hidden lg:flex [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
+                    "hidden lg:flex absolute left-1/2 -translate-x-1/2 [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
                     navigationMenuClassName
                   ),
                   children: renderNavigation

package/dist/registry.cjs

@@ -17028,7 +17028,7 @@ var DEFAULT_FORM_FIELDS25 = [
 function ContactPhotography({
   heading,
   description,
-  containerClassName = "mx-auto w-full max-w-full relative z-10 px-0",
+  containerClassName = "px-0 sm:px-0 md:px-0 lg:px-0 mx-0 w-full max-w-full relative z-10",
   className,
   headingClassName,
   descriptionClassName,
@@ -50181,9 +50181,9 @@ function HeroVideoBackgroundDark({
           "div",
           {
             className: cn(
-              "relative z-10 mx-auto flex size-full max-w-3xl",
-              "flex-col justify-center gap-4 md:gap-6 items-center",
-              "text-center px-4 md:px-6",
+              "relative z-10 mx-auto flex size-full",
+              "md:max-w-3xl lg:max-w-4xl flex-col justify-center",
+              "gap-4 md:gap-6 items-center text-center px-4 md:px-6",
               contentClassName
             ),
             children: [
@@ -50192,7 +50192,8 @@ function HeroVideoBackgroundDark({
                 "h1",
                 {
                   className: cn(
-                    "text-4xl font-bold md:text-6xl lg:text-7xl text-balance text-white text-shadow-2xl",
+                    "font-bold text-5xl md:text-6xl lg:text-8xl",
+                    "text-pretty text-white text-shadow-2xl",
                     headingClassName
                   ),
                   children: heading
@@ -58188,20 +58189,30 @@ function HeroEventRegistration({
   const renderLocation = React26.useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-2 md:p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
-            "flex h-12 w-12 items-center justify-center rounded-full text-card-foreground"
+            "flex items-center justify-center shrink-0",
+            "size-12 rounded-xl bg-primary text-primary-foreground"
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/map-pin", size: 24 })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-start justify-center",
+            "text-card-foreground gap-0 pr-0 md:pr-2"
+          ),
+          children: [
+            locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: locationLabel }) : locationLabel),
+            locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs"), children: locationSublabel }) : locationSublabel)
+          ]
+        }
+      )
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
   const renderImage = React26.useMemo(() => {
@@ -58244,7 +58255,7 @@ function HeroEventRegistration({
                 {
                   src: logo.src,
                   alt: logo.alt,
-                  className: "mr-auto h-12 md:h-16",
+                  className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
                   optixFlowConfig
                 }
               ),
@@ -62830,7 +62841,7 @@ var NavbarImagePreview = ({
           "div",
           {
             className: cn(
-              "flex items-center justify-between gap-3.5 py-5",
+              "relative flex items-center justify-between gap-3.5 py-5",
               navClassName
             ),
             children: [
@@ -62847,7 +62858,7 @@ var NavbarImagePreview = ({
                 NavigationMenu,
                 {
                   className: cn(
-                    "hidden lg:flex [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
+                    "hidden lg:flex absolute left-1/2 -translate-x-1/2 [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
                     navigationMenuClassName
                   ),
                   children: renderNavigation
@@ -99422,7 +99433,8 @@ function LinkPageGridCards({
                 "group flex flex-col items-center gap-2 rounded-xl",
                 "hover:scale-[1.03] active:scale-[0.97]",
                 "transition-all duration-200 p-4",
-                "border border-border bg-card shadow-sm hover:shadow-md",
+                "bg-card text-card-foreground shadow-sm hover:shadow-md",
+                "border border-border",
                 cardClassName,
                 linkClassName
               ),

package/dist/registry.js

@@ -16988,7 +16988,7 @@ var DEFAULT_FORM_FIELDS25 = [
 function ContactPhotography({
   heading,
   description,
-  containerClassName = "mx-auto w-full max-w-full relative z-10 px-0",
+  containerClassName = "px-0 sm:px-0 md:px-0 lg:px-0 mx-0 w-full max-w-full relative z-10",
   className,
   headingClassName,
   descriptionClassName,
@@ -50141,9 +50141,9 @@ function HeroVideoBackgroundDark({
           "div",
           {
             className: cn(
-              "relative z-10 mx-auto flex size-full max-w-3xl",
-              "flex-col justify-center gap-4 md:gap-6 items-center",
-              "text-center px-4 md:px-6",
+              "relative z-10 mx-auto flex size-full",
+              "md:max-w-3xl lg:max-w-4xl flex-col justify-center",
+              "gap-4 md:gap-6 items-center text-center px-4 md:px-6",
               contentClassName
             ),
             children: [
@@ -50152,7 +50152,8 @@ function HeroVideoBackgroundDark({
                 "h1",
                 {
                   className: cn(
-                    "text-4xl font-bold md:text-6xl lg:text-7xl text-balance text-white text-shadow-2xl",
+                    "font-bold text-5xl md:text-6xl lg:text-8xl",
+                    "text-pretty text-white text-shadow-2xl",
                     headingClassName
                   ),
                   children: heading
@@ -58148,20 +58149,30 @@ function HeroEventRegistration({
   const renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-2 md:p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "flex h-12 w-12 items-center justify-center rounded-full text-card-foreground"
+            "flex items-center justify-center shrink-0",
+            "size-12 rounded-xl bg-primary text-primary-foreground"
           ),
           children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/map-pin", size: 24 })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
-      ] })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-start justify-center",
+            "text-card-foreground gap-0 pr-0 md:pr-2"
+          ),
+          children: [
+            locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold", children: locationLabel }) : locationLabel),
+            locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-xs"), children: locationSublabel }) : locationSublabel)
+          ]
+        }
+      )
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
   const renderImage = useMemo(() => {
@@ -58204,7 +58215,7 @@ function HeroEventRegistration({
                 {
                   src: logo.src,
                   alt: logo.alt,
-                  className: "mr-auto h-12 md:h-16",
+                  className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
                   optixFlowConfig
                 }
               ),
@@ -62790,7 +62801,7 @@ var NavbarImagePreview = ({
           "div",
           {
             className: cn(
-              "flex items-center justify-between gap-3.5 py-5",
+              "relative flex items-center justify-between gap-3.5 py-5",
               navClassName
             ),
             children: [
@@ -62807,7 +62818,7 @@ var NavbarImagePreview = ({
                 NavigationMenu,
                 {
                   className: cn(
-                    "hidden lg:flex [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
+                    "hidden lg:flex absolute left-1/2 -translate-x-1/2 [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
                     navigationMenuClassName
                   ),
                   children: renderNavigation
@@ -99382,7 +99393,8 @@ function LinkPageGridCards({
                 "group flex flex-col items-center gap-2 rounded-xl",
                 "hover:scale-[1.03] active:scale-[0.97]",
                 "transition-all duration-200 p-4",
-                "border border-border bg-card shadow-sm hover:shadow-md",
+                "bg-card text-card-foreground shadow-sm hover:shadow-md",
+                "border border-border",
                 cardClassName,
                 linkClassName
               ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",