@opensite/ui 2.4.8 → 2.4.9

package/dist/cta-accent-background.cjs

@@ -31,62 +31,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-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:")) {
@@ -886,14 +830,14 @@ function CtaAccentBackground({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   cardClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
@@ -933,18 +877,14 @@ function CtaAccentBackground({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(
-            "rounded-lg p-8 md:rounded-xl lg:p-12",
-            getNestedCardBg(background, "accent"),
-            getNestedCardTextColor(background),
-            cardClassName
-          ),
+          className: cn("rounded-lg p-8 md:rounded-xl lg:p-12", cardClassName),
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h3",
@@ -955,18 +895,17 @@ function CtaAccentBackground({
                 ),
                 children: heading
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 lg:mb-6", headingClassName), children: heading })),
+            ) : heading),
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
                 className: cn(
                   "mb-8 text-lg font-medium lg:text-xl",
-                  getTextColor(background, "muted"),
                   descriptionClassName
                 ),
                 children: description
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", descriptionClassName), children: description })),
+            ) : description),
             actionsContent
           ] })
         }

package/dist/cta-accent-background.d.cts

@@ -86,6 +86,6 @@ interface CtaAccentBackgroundProps {
  * />
  * ```
  */
-declare function CtaAccentBackground({ heading, description, actions, actionsSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, cardClassName, background, spacing, pattern, patternOpacity, }: CtaAccentBackgroundProps): React.JSX.Element;
+declare function CtaAccentBackground({ heading, description, actions, actionsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, cardClassName, background, containerClassName, spacing, pattern, patternOpacity, }: CtaAccentBackgroundProps): React.JSX.Element;
 
 export { CtaAccentBackground, type CtaAccentBackgroundProps };

package/dist/cta-accent-background.d.ts

@@ -86,6 +86,6 @@ interface CtaAccentBackgroundProps {
  * />
  * ```
  */
-declare function CtaAccentBackground({ heading, description, actions, actionsSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, cardClassName, background, spacing, pattern, patternOpacity, }: CtaAccentBackgroundProps): React.JSX.Element;
+declare function CtaAccentBackground({ heading, description, actions, actionsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, cardClassName, background, containerClassName, spacing, pattern, patternOpacity, }: CtaAccentBackgroundProps): React.JSX.Element;
 
 export { CtaAccentBackground, type CtaAccentBackgroundProps };

package/dist/cta-accent-background.js

@@ -10,62 +10,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-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:")) {
@@ -865,14 +809,14 @@ function CtaAccentBackground({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   cardClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
@@ -912,18 +856,14 @@ function CtaAccentBackground({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsx(
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(
-            "rounded-lg p-8 md:rounded-xl lg:p-12",
-            getNestedCardBg(background, "accent"),
-            getNestedCardTextColor(background),
-            cardClassName
-          ),
+          className: cn("rounded-lg p-8 md:rounded-xl lg:p-12", cardClassName),
           children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h3",
@@ -934,18 +874,17 @@ function CtaAccentBackground({
                 ),
                 children: heading
               }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 lg:mb-6", headingClassName), children: heading })),
+            ) : heading),
             description && (typeof description === "string" ? /* @__PURE__ */ jsx(
               "p",
               {
                 className: cn(
                   "mb-8 text-lg font-medium lg:text-xl",
-                  getTextColor(background, "muted"),
                   descriptionClassName
                 ),
                 children: description
               }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mb-8", descriptionClassName), children: description })),
+            ) : description),
             actionsContent
           ] })
         }

package/dist/cta-app-download-newsletter.cjs

@@ -37,62 +37,6 @@ var TextInput = inputs.TextInput;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-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:")) {
@@ -1001,7 +945,8 @@ function CtaAppDownloadNewsletter({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -1021,17 +966,7 @@ function CtaAppDownloadNewsletter({
                     children: appHeading
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", appHeadingClassName), children: appHeading })),
-                appDescription && (typeof appDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "mb-8",
-                      getTextColor(background, "muted"),
-                      appDescriptionClassName
-                    ),
-                    children: appDescription
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", appDescriptionClassName), children: appDescription })),
+                appDescription && (typeof appDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8", appDescriptionClassName), children: appDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", appDescriptionClassName), children: appDescription })),
                 appActionsContent
               ] }),
               phoneMockupImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-16 -bottom-16 h-64 w-48 rotate-12 opacity-20 lg:h-80 lg:w-60", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1051,8 +986,6 @@ function CtaAppDownloadNewsletter({
           {
             className: cn(
               "flex flex-col justify-center rounded-2xl border p-8 lg:p-12",
-              getNestedCardBg(background, "card"),
-              getNestedCardTextColor(background),
               newsletterCardClassName
             ),
             children: [
@@ -1066,17 +999,7 @@ function CtaAppDownloadNewsletter({
                   children: newsletterHeading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", newsletterHeadingClassName), children: newsletterHeading })),
-              newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mb-8",
-                    getTextColor(background, "muted"),
-                    newsletterDescriptionClassName
-                  ),
-                  children: newsletterDescription
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription })),
+              newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription })),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 forms.Form,
                 {

package/dist/cta-app-download-newsletter.js

@@ -16,62 +16,6 @@ var TextInput = TextInput$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-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:")) {
@@ -980,7 +924,8 @@ function CtaAppDownloadNewsletter({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1000,17 +945,7 @@ function CtaAppDownloadNewsletter({
                     children: appHeading
                   }
                 ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", appHeadingClassName), children: appHeading })),
-                appDescription && (typeof appDescription === "string" ? /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "mb-8",
-                      getTextColor(background, "muted"),
-                      appDescriptionClassName
-                    ),
-                    children: appDescription
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: cn("mb-8", appDescriptionClassName), children: appDescription })),
+                appDescription && (typeof appDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8", appDescriptionClassName), children: appDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8", appDescriptionClassName), children: appDescription })),
                 appActionsContent
               ] }),
               phoneMockupImage && /* @__PURE__ */ jsx("div", { className: "absolute -right-16 -bottom-16 h-64 w-48 rotate-12 opacity-20 lg:h-80 lg:w-60", children: /* @__PURE__ */ jsx(
@@ -1030,8 +965,6 @@ function CtaAppDownloadNewsletter({
           {
             className: cn(
               "flex flex-col justify-center rounded-2xl border p-8 lg:p-12",
-              getNestedCardBg(background, "card"),
-              getNestedCardTextColor(background),
               newsletterCardClassName
             ),
             children: [
@@ -1045,17 +978,7 @@ function CtaAppDownloadNewsletter({
                   children: newsletterHeading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", newsletterHeadingClassName), children: newsletterHeading })),
-              newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mb-8",
-                    getTextColor(background, "muted"),
-                    newsletterDescriptionClassName
-                  ),
-                  children: newsletterDescription
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription })),
+              newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription })),
               /* @__PURE__ */ jsxs(
                 Form,
                 {