@opensite/ui 1.5.1 → 1.5.3

package/dist/about-location-info-hero.cjs

@@ -32,32 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1095,13 +1069,13 @@ function AboutLocationInfoHero({
   imagesClassName,
   contentPosition = "left",
   mobileStackOrder = "content-first",
-  accentColor = "hsl(var(--primary))",
+  accentColor = "hsl(var(--muted))",
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   optixFlowConfig
 }) {
   const isSingleImage = (images?.length ?? 0) <= 1;
@@ -1122,21 +1096,27 @@ function AboutLocationInfoHero({
   const hoursSectionsContent = React.useMemo(() => {
     if (hoursSectionsSlot) return hoursSectionsSlot;
     if (!hoursSections || hoursSections.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", hoursSectionsClassName), children: hoursSections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6 md:space-y-12", hoursSectionsClassName), children: hoursSections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       section.label && (typeof section.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
         "h3",
         {
-          className: "mb-2 text-sm font-medium",
+          className: "mb-4 text-lg font-semibold ",
           style: { color: accentColor },
           children: section.label
         }
       ) : section.label),
-      section.hours && section.hours.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-sm", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: getTextColor(background, "muted"), children: item.day }) : item.day),
-        item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.time }) : item.time)
+      section.hours && section.hours.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-2", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-sm font-semibold uppercase opacity-60 tracking-wide", children: item.day }) : item.day),
+        item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-sm font-semibold uppercase opacity-60", children: item.time }) : item.time)
       ] }, itemIndex)) })
     ] }, sectionIndex)) });
-  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor, background]);
+  }, [
+    hoursSectionsSlot,
+    hoursSections,
+    hoursSectionsClassName,
+    accentColor,
+    background
+  ]);
   const imagesContent = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -1145,7 +1125,7 @@ function AboutLocationInfoHero({
         "div",
         {
           className: cn(
-            "relative aspect-[4/3] w-full max-w-lg overflow-hidden rounded-lg shadow-2xl",
+            "relative aspect-4/3 w-full max-w-lg overflow-hidden rounded-lg shadow-2xl",
             imagesClassName
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1168,7 +1148,7 @@ function AboutLocationInfoHero({
           imagesClassName
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-0 z-10 aspect-[4/3] w-[70%] overflow-hidden rounded-lg shadow-2xl md:w-[65%]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[70%] overflow-hidden rounded-lg shadow-2xl md:w-[65%]", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: images[0]?.src || imagePlaceholders[5],
@@ -1177,7 +1157,7 @@ function AboutLocationInfoHero({
               optixFlowConfig
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-[3/4] w-[55%] overflow-hidden rounded-lg shadow-2xl md:w-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[55%] overflow-hidden rounded-lg shadow-2xl md:w-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: images[1]?.src || imagePlaceholders[6],
@@ -1197,11 +1177,9 @@ function AboutLocationInfoHero({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(
-        "relative w-full overflow-hidden",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      className: cn("relative w-full overflow-hidden", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(" relative"), children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
@@ -1222,16 +1200,16 @@ function AboutLocationInfoHero({
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headlineClassName, children: headline })),
               actionsContent,
-              address || phone ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              address || phone ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
                 address ? /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-3 text-sm",
+                      "flex items-center gap-3 text-md",
                       addressClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/map-pin", size: 16 }),
+                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/map-pin", size: 18 }),
                       addressHref ? /* @__PURE__ */ jsxRuntime.jsx(
                         Pressable,
                         {
@@ -1247,11 +1225,11 @@ function AboutLocationInfoHero({
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-3 text-sm",
+                      "flex items-center gap-3 text-md",
                       phoneClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/phone", size: 16 }),
+                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/phone", size: 18 }),
                       phoneHref ? /* @__PURE__ */ jsxRuntime.jsx(
                         Pressable,
                         {

package/dist/about-location-info-hero.d.cts

@@ -144,6 +144,6 @@ interface AboutLocationInfoHeroProps {
  * hours breakdown, and a dual-image layout. Great for showcasing location-focused
  * service hubs or flagship office pages.
  */
-declare function AboutLocationInfoHero({ headline, headlineClassName, address, addressHref, addressClassName, phone, phoneHref, phoneClassName, actions, actionsSlot, actionsClassName, hoursSections, hoursSectionsSlot, hoursSectionsClassName, images, imagesSlot, imagesClassName, contentPosition, mobileStackOrder, accentColor, background, spacing, pattern, patternOpacity, className, containerClassName, optixFlowConfig, }: AboutLocationInfoHeroProps): React.JSX.Element;
+declare function AboutLocationInfoHero({ headline, headlineClassName, address, addressHref, addressClassName, phone, phoneHref, phoneClassName, actions, actionsSlot, actionsClassName, hoursSections, hoursSectionsSlot, hoursSectionsClassName, images, imagesSlot, imagesClassName, contentPosition, mobileStackOrder, accentColor, background, pattern, patternOpacity, className, containerClassName, spacing, optixFlowConfig, }: AboutLocationInfoHeroProps): React.JSX.Element;
 
 export { AboutLocationInfoHero, type AboutLocationInfoHeroProps };

package/dist/about-location-info-hero.d.ts

@@ -144,6 +144,6 @@ interface AboutLocationInfoHeroProps {
  * hours breakdown, and a dual-image layout. Great for showcasing location-focused
  * service hubs or flagship office pages.
  */
-declare function AboutLocationInfoHero({ headline, headlineClassName, address, addressHref, addressClassName, phone, phoneHref, phoneClassName, actions, actionsSlot, actionsClassName, hoursSections, hoursSectionsSlot, hoursSectionsClassName, images, imagesSlot, imagesClassName, contentPosition, mobileStackOrder, accentColor, background, spacing, pattern, patternOpacity, className, containerClassName, optixFlowConfig, }: AboutLocationInfoHeroProps): React.JSX.Element;
+declare function AboutLocationInfoHero({ headline, headlineClassName, address, addressHref, addressClassName, phone, phoneHref, phoneClassName, actions, actionsSlot, actionsClassName, hoursSections, hoursSectionsSlot, hoursSectionsClassName, images, imagesSlot, imagesClassName, contentPosition, mobileStackOrder, accentColor, background, pattern, patternOpacity, className, containerClassName, spacing, optixFlowConfig, }: AboutLocationInfoHeroProps): React.JSX.Element;
 
 export { AboutLocationInfoHero, type AboutLocationInfoHeroProps };

package/dist/about-location-info-hero.js

@@ -11,32 +11,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1074,13 +1048,13 @@ function AboutLocationInfoHero({
   imagesClassName,
   contentPosition = "left",
   mobileStackOrder = "content-first",
-  accentColor = "hsl(var(--primary))",
+  accentColor = "hsl(var(--muted))",
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   optixFlowConfig
 }) {
   const isSingleImage = (images?.length ?? 0) <= 1;
@@ -1101,21 +1075,27 @@ function AboutLocationInfoHero({
   const hoursSectionsContent = useMemo(() => {
     if (hoursSectionsSlot) return hoursSectionsSlot;
     if (!hoursSections || hoursSections.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", hoursSectionsClassName), children: hoursSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-6 md:space-y-12", hoursSectionsClassName), children: hoursSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
       section.label && (typeof section.label === "string" ? /* @__PURE__ */ jsx(
         "h3",
         {
-          className: "mb-2 text-sm font-medium",
+          className: "mb-4 text-lg font-semibold ",
           style: { color: accentColor },
           children: section.label
         }
       ) : section.label),
-      section.hours && section.hours.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-sm", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsx("span", { className: getTextColor(background, "muted"), children: item.day }) : item.day),
-        item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsx("span", { children: item.time }) : item.time)
+      section.hours && section.hours.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-2", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsx("span", { className: "text-white text-sm font-semibold uppercase opacity-60 tracking-wide", children: item.day }) : item.day),
+        item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsx("span", { className: "text-white text-sm font-semibold uppercase opacity-60", children: item.time }) : item.time)
       ] }, itemIndex)) })
     ] }, sectionIndex)) });
-  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor, background]);
+  }, [
+    hoursSectionsSlot,
+    hoursSections,
+    hoursSectionsClassName,
+    accentColor,
+    background
+  ]);
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -1124,7 +1104,7 @@ function AboutLocationInfoHero({
         "div",
         {
           className: cn(
-            "relative aspect-[4/3] w-full max-w-lg overflow-hidden rounded-lg shadow-2xl",
+            "relative aspect-4/3 w-full max-w-lg overflow-hidden rounded-lg shadow-2xl",
             imagesClassName
           ),
           children: /* @__PURE__ */ jsx(
@@ -1147,7 +1127,7 @@ function AboutLocationInfoHero({
           imagesClassName
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 z-10 aspect-[4/3] w-[70%] overflow-hidden rounded-lg shadow-2xl md:w-[65%]", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[70%] overflow-hidden rounded-lg shadow-2xl md:w-[65%]", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: images[0]?.src || imagePlaceholders[5],
@@ -1156,7 +1136,7 @@ function AboutLocationInfoHero({
               optixFlowConfig
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-[3/4] w-[55%] overflow-hidden rounded-lg shadow-2xl md:w-[50%]", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[55%] overflow-hidden rounded-lg shadow-2xl md:w-[50%]", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: images[1]?.src || imagePlaceholders[6],
@@ -1176,11 +1156,9 @@ function AboutLocationInfoHero({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(
-        "relative w-full overflow-hidden",
-        className
-      ),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container relative", containerClassName), children: /* @__PURE__ */ jsxs(
+      className: cn("relative w-full overflow-hidden", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: cn(" relative"), children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
@@ -1201,16 +1179,16 @@ function AboutLocationInfoHero({
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headlineClassName, children: headline })),
               actionsContent,
-              address || phone ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              address || phone ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
                 address ? /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-3 text-sm",
+                      "flex items-center gap-3 text-md",
                       addressClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/map-pin", size: 16 }),
+                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/map-pin", size: 18 }),
                       addressHref ? /* @__PURE__ */ jsx(
                         Pressable,
                         {
@@ -1226,11 +1204,11 @@ function AboutLocationInfoHero({
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-3 text-sm",
+                      "flex items-center gap-3 text-md",
                       phoneClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/phone", size: 16 }),
+                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/phone", size: 18 }),
                       phoneHref ? /* @__PURE__ */ jsx(
                         Pressable,
                         {