@opensite/ui 1.2.2 → 1.2.4

package/dist/feature-checklist-image.js

@@ -11,32 +11,6 @@ import { Img } from '@page-speed/img';
 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:")) {
@@ -938,6 +912,8 @@ Section.displayName = "Section";
 function FeatureChecklistImage({
   title,
   description,
+  titleClassName,
+  descriptionClassName,
   imageSrc,
   imageAlt,
   imageSlot,
@@ -946,12 +922,10 @@ function FeatureChecklistImage({
   checklistItems,
   checklistSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
   contentWrapperClassName,
   imageClassName,
   contentClassName,
-  titleClassName,
-  descriptionClassName,
   actionsClassName,
   checklistClassName,
   optixFlowConfig,
@@ -973,7 +947,7 @@ function FeatureChecklistImage({
             onClick: action.onClick,
             variant: action.variant,
             size: action.size,
-            className: cn("mt-6", action.className),
+            className: cn("", action.className),
             "aria-label": action["aria-label"],
             asButton: true,
             children: action.children
@@ -988,7 +962,7 @@ function FeatureChecklistImage({
           onClick: action.onClick,
           variant: action.variant,
           size: action.size,
-          className: cn("mt-6", action.className),
+          className: cn("", action.className),
           "aria-label": action["aria-label"],
           asButton: true,
           children: [
@@ -1010,7 +984,7 @@ function FeatureChecklistImage({
         src: imageSrc,
         alt: imageAlt || "Feature illustration",
         className: cn(
-          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2",
+          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2 shadow-xl",
           imageClassName
         ),
         loading: "lazy",
@@ -1026,17 +1000,10 @@ function FeatureChecklistImage({
       const content = isString ? item : item.content;
       const iconElement = isString ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
       const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxs(
-        "li",
-        {
-          className: cn("flex items-center gap-3", itemClassName),
-          children: [
-            iconElement,
-            content
-          ]
-        },
-        index
-      );
+      return /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: "mt-1", children: iconElement }),
+        content
+      ] }, index);
     });
   }, [checklistSlot, checklistItems]);
   return /* @__PURE__ */ jsx(
@@ -1053,73 +1020,62 @@ function FeatureChecklistImage({
         "div",
         {
           className: cn(
-            "flex flex-col gap-12 md:flex-row",
+            "flex flex-col gap-6 md:gap-12 md:flex-row",
             contentWrapperClassName
           ),
           children: [
             imageContent,
-            /* @__PURE__ */ jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
-              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-3xl font-medium text-balance md:text-5xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              ) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-3xl font-medium text-balance md:text-5xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-1 md:mt-6",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mt-1 md:mt-6",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              )),
-              actionsContent && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-wrap items-center gap-2",
-                    actionsClassName
-                  ),
-                  children: actionsContent
-                }
-              ),
-              checklistContent && /* @__PURE__ */ jsx(
-                "ul",
-                {
-                  className: cn(
-                    "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
-                    checklistClassName
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "px-4 md:px-6 lg:px-10 py-4 md:py-4 lg:py-0",
+                  contentClassName
+                ),
+                children: [
+                  title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description })),
+                  actionsContent && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-wrap items-center gap-4 md:gap-2",
+                        actionsClassName
+                      ),
+                      children: actionsContent
+                    }
                   ),
-                  children: checklistContent
-                }
-              )
-            ] })
+                  checklistContent && /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
+                        checklistClassName
+                      ),
+                      children: checklistContent
+                    }
+                  )
+                ]
+              }
+            )
           ]
         }
       )