xertica-ui 2.7.0 → 2.9.6

package/dist/MarketingFooter-BwE1vmeX.cjs

@@ -0,0 +1,700 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('./skeleton-DhJswvTW.cjs');
+const button = require('./button-Kd9Fj53S.cjs');
+const ImageWithFallback = require('./ImageWithFallback-BkMXHCvV.cjs');
+const LanguageSelector = require('./LanguageSelector-1XhM7R1i.cjs');
+const reactI18next = require('react-i18next');
+const lucideReact = require('lucide-react');
+const React = require('react');
+
+function FeatureCardSkeleton({
+  showAction = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: button.cn("flex flex-col h-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-10 rounded-[var(--radius)] shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-28" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-12 rounded-full" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-full" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-5/6" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-4/6" })
+    ] }),
+    showAction && /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-full rounded-md" }) })
+  ] });
+}
+
+function AuthPageShell({ imageSrc, imageAlt, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-screen w-full flex overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-1 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ImageWithFallback.ImageWithFallback,
+        {
+          src: imageSrc,
+          alt: imageAlt,
+          className: "absolute inset-0 w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-20", children: /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector.LanguageSelector, { variant: "minimal", showIcon: false }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-sm space-y-6 relative z-10", children })
+    ] })
+  ] });
+}
+
+const DEFAULT_PROVIDERS = ["google", "mtLogin", "govBr"];
+function SocialLoginButtons({
+  onSocialLogin,
+  providers = DEFAULT_PROVIDERS
+}) {
+  const { t } = reactI18next.useTranslation();
+  if (providers.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-t border-border" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted px-2 text-muted-foreground", children: t("login.orContinueWith") }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      providers.includes("google") && /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center",
+          onClick: () => onSocialLogin("Google"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-5 h-5 mr-2", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fill: "#EA4335",
+                  d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fill: "#4285F4",
+                  d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fill: "#FBBC05",
+                  d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fill: "#34A853",
+                  d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("login.signInWithGoogle") })
+          ]
+        }
+      ),
+      providers.includes("mtLogin") && /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center",
+          onClick: () => onSocialLogin("MT Login"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-5 h-5 mr-2 text-[var(--chart-4)]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("login.signInWithMTLogin") })
+          ]
+        }
+      ),
+      providers.includes("govBr") && /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center font-normal",
+          onClick: () => onSocialLogin("gov.br"),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            t("login.signInWithGovBr").split("gov.br")[0],
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", children: "gov.br" }),
+            t("login.signInWithGovBr").split("gov.br")[1] || ""
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+function usePasswordStrength(password) {
+  return React.useMemo(() => {
+    if (password.length === 0) return null;
+    if (password.length < 6) return "weak";
+    if (password.length < 10) return "medium";
+    return "strong";
+  }, [password]);
+}
+
+const BAR_WIDTH = {
+  weak: "w-1/3 bg-destructive",
+  medium: "w-2/3 bg-[var(--chart-3)]",
+  strong: "w-full bg-[var(--chart-2)]"
+};
+const TEXT_COLOR = {
+  weak: "text-destructive",
+  medium: "text-[var(--chart-3)]",
+  strong: "text-[var(--chart-2)]"
+};
+const LABEL_KEY = {
+  weak: "resetPassword.strengthWeak",
+  medium: "resetPassword.strengthMedium",
+  strong: "resetPassword.strengthStrong"
+};
+function PasswordStrengthMeter({ strength }) {
+  const { t } = reactI18next.useTranslation();
+  if (!strength) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-full transition-all duration-300 ${BAR_WIDTH[strength]}` }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-small ${TEXT_COLOR[strength]}`, children: t(LABEL_KEY[strength]) })
+  ] });
+}
+
+const colorTokens$3 = {
+  primary: { bg: "bg-primary/10", icon: "text-primary" },
+  "chart-1": { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2": { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3": { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4": { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5": { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success: { bg: "bg-success/10", icon: "text-success" },
+  info: { bg: "bg-info/10", icon: "text-info" },
+  warning: { bg: "bg-warning/10", icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" }
+};
+function PillBadge({
+  children,
+  icon,
+  color = "primary",
+  className,
+  ...props
+}) {
+  const { bg, icon: textColor } = colorTokens$3[color];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: button.cn(
+        "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
+        bg,
+        textColor,
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center [&>svg]:size-3.5", "aria-hidden": "true", children: icon }),
+        children
+      ]
+    }
+  );
+}
+
+function MarketingNavbar({
+  logo,
+  links,
+  cta,
+  secondaryCta,
+  className
+}) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const closeMenu = () => setIsOpen(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className: button.cn(
+        "sticky top-0 z-50 w-full border-b border-border bg-card/80 backdrop-blur",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: logo }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden flex-1 items-center justify-center gap-8 md:flex", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: link.href,
+              className: "text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+              children: link.label
+            },
+            link.href
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden shrink-0 items-center gap-3 md:flex", children: [
+            secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "outline",
+                asChild: !!secondaryCta.href,
+                onClick: secondaryCta.onClick,
+                children: secondaryCta.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: secondaryCta.href, children: secondaryCta.label }) : secondaryCta.label
+              }
+            ),
+            cta && /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "default", asChild: !!cta.href, onClick: cta.onClick, children: cta.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta.href, children: cta.label }) : cta.label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "md:hidden",
+              onClick: () => setIsOpen((prev) => !prev),
+              "aria-label": isOpen ? "Close menu" : "Open menu",
+              "aria-expanded": isOpen,
+              children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
+            }
+          )
+        ] }),
+        isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border bg-card/95 backdrop-blur md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-4 py-4 sm:px-6", children: [
+          links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: link.href,
+              onClick: closeMenu,
+              className: "rounded-[var(--radius)] px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: link.label
+            },
+            link.href
+          )),
+          (secondaryCta || cta) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex flex-col gap-2 border-t border-border pt-4", children: [
+            secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "outline",
+                className: "w-full",
+                asChild: !!secondaryCta.href,
+                onClick: () => {
+                  closeMenu();
+                  secondaryCta.onClick?.();
+                },
+                children: secondaryCta.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: secondaryCta.href, children: secondaryCta.label }) : secondaryCta.label
+              }
+            ),
+            cta && /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "default",
+                className: "w-full",
+                asChild: !!cta.href,
+                onClick: () => {
+                  closeMenu();
+                  cta.onClick?.();
+                },
+                children: cta.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta.href, children: cta.label }) : cta.label
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+function HeroCtaButton({
+  cta,
+  variant
+}) {
+  if (cta.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, variant, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta.href, onClick: cta.onClick, children: cta.label }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant, size: "lg", onClick: cta.onClick, children: cta.label });
+}
+function Hero({
+  eyebrow,
+  title,
+  description,
+  primaryCta,
+  secondaryCta,
+  visual,
+  align = "left",
+  decorative = false,
+  className,
+  ...props
+}) {
+  const isCentered = align === "center";
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: button.cn("relative overflow-hidden py-16 md:py-24", className), ...props, children: [
+    decorative && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 z-0 overflow-hidden",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[linear-gradient(135deg,var(--gradient-start),var(--gradient-end))] opacity-20 blur-3xl md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem]" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: button.cn("grid items-center gap-12", visual ? "lg:grid-cols-2" : "mx-auto max-w-3xl"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: button.cn(
+                "flex flex-col gap-6",
+                isCentered ? "items-center text-center" : "items-start text-left"
+              ),
+              children: [
+                eyebrow && /* @__PURE__ */ jsxRuntime.jsx(PillBadge, { icon: eyebrow.icon, children: eyebrow.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", children: title }),
+                description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-2xl text-lg text-muted-foreground", children: description }),
+                (primaryCta || secondaryCta) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: button.cn(
+                      "flex flex-col gap-3 pt-2 sm:flex-row",
+                      isCentered && "sm:justify-center"
+                    ),
+                    children: [
+                      primaryCta && /* @__PURE__ */ jsxRuntime.jsx(HeroCtaButton, { cta: primaryCta, variant: "default" }),
+                      secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(HeroCtaButton, { cta: secondaryCta, variant: "outline" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          visual && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: visual })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function LogoCloud({ title, logos, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("w-full text-center", className), ...props, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-xs font-medium uppercase tracking-wider text-muted-foreground sm:mb-8", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-8 md:gap-12", children: logos.map((logo, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      ImageWithFallback.ImageWithFallback,
+      {
+        src: logo.src,
+        alt: logo.alt,
+        className: "h-6 w-auto object-contain grayscale opacity-60 transition-all hover:opacity-100 hover:grayscale-0 md:h-8"
+      },
+      `${logo.alt}-${index}`
+    )) })
+  ] });
+}
+
+const colorTokens$2 = {
+  primary: { bg: "bg-primary/10", icon: "text-primary" },
+  "chart-1": { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2": { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3": { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4": { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5": { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success: { bg: "bg-success/10", icon: "text-success" },
+  info: { bg: "bg-info/10", icon: "text-info" },
+  warning: { bg: "bg-warning/10", icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" }
+};
+const columnClasses$1 = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+function StatBand({ stats, columns, className, ...props }) {
+  const resolvedColumns = columns ?? Math.min(stats.length, 4);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: button.cn("grid grid-cols-2 gap-8", columnClasses$1[resolvedColumns] ?? columnClasses$1[4], className),
+      ...props,
+      children: stats.map((stat, index) => {
+        const { icon: valueColor } = colorTokens$2[stat.color ?? "primary"];
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center sm:items-start sm:text-left", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: button.cn("text-3xl md:text-5xl font-bold tracking-tight", valueColor), children: stat.value }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground mt-1", children: stat.label })
+        ] }, index);
+      })
+    }
+  );
+}
+
+function FeatureRow({
+  eyebrow,
+  title,
+  description,
+  bullets,
+  visual,
+  reverse = false,
+  tone = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: button.cn("py-16 md:py-24", tone === "muted" ? "bg-muted" : "bg-background", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-6xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn(reverse ? "lg:order-last" : "lg:order-first"), children: [
+          eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-primary", children: eyebrow }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: button.cn("text-2xl font-bold text-foreground md:text-3xl", eyebrow && "mt-2"), children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-muted-foreground leading-relaxed", children: description }),
+          bullets && bullets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-4 space-y-2", children: bullets.map((bullet) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "size-5 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: bullet })
+          ] }, bullet)) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn(reverse ? "lg:order-first" : "lg:order-last"), children: visual })
+      ] })
+    }
+  );
+}
+
+const colorTokens$1 = {
+  primary: { bg: "bg-primary/10", icon: "text-primary" },
+  "chart-1": { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2": { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3": { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4": { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5": { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success: { bg: "bg-success/10", icon: "text-success" },
+  info: { bg: "bg-info/10", icon: "text-info" },
+  warning: { bg: "bg-warning/10", icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" }
+};
+const columnClasses = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+function ServiceCardGrid({
+  items,
+  variant = "card",
+  columns = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn("grid grid-cols-1 gap-6 md:gap-8", columnClasses[columns], className), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(ServiceCard, { variant, ...item }, `${item.title}-${index}`)) });
+}
+function ServiceCard({
+  icon,
+  color = "primary",
+  category,
+  title,
+  description,
+  checklist,
+  bullets,
+  cta,
+  variant = "card",
+  className
+}) {
+  const { bg, icon: iconColor } = colorTokens$1[color];
+  const iconChip = /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn("w-fit rounded-[var(--radius)] p-3", bg), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn("[&>svg]:size-6", iconColor), children: icon }) });
+  if (variant === "plain") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("flex flex-col gap-3", className), children: [
+      iconChip,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: category }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: button.cn("text-base font-semibold text-foreground", category && "mt-1"), children: title })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: description })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: button.cn("flex h-full flex-col", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+      iconChip,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: category }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { className: category ? "mt-1" : void 0, children: title })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "flex-1 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { className: "leading-relaxed", children: description }),
+      checklist && checklist.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: checklist.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 rounded-[var(--radius)] bg-muted p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: button.cn(
+              "flex size-5 shrink-0 items-center justify-center rounded-[var(--radius)]",
+              bg,
+              iconColor
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: item })
+      ] }, item)) }),
+      bullets && bullets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1.5", children: bullets.map((bullet) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: bullet })
+      ] }, bullet)) })
+    ] }),
+    cta && /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", className: "w-full", onClick: cta.onClick, asChild: !!cta.href, children: cta.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta.href, children: cta.label }) : cta.label }) })
+  ] });
+}
+
+const colorTokens = {
+  primary: { bg: "bg-primary/10", icon: "text-primary" },
+  "chart-1": { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2": { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3": { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4": { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5": { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success: { bg: "bg-success/10", icon: "text-success" },
+  info: { bg: "bg-info/10", icon: "text-info" },
+  warning: { bg: "bg-warning/10", icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" }
+};
+function EvidenceTimeline({ items, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("relative pl-12", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute left-4 top-4 bottom-4 w-px bg-border" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "relative", children: items.map((item, index) => {
+      const { bg, icon: iconColor } = colorTokens[item.color ?? "primary"];
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative flex items-start gap-4 pb-10 last:pb-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: button.cn(
+              "absolute -left-12 top-0 flex size-8 shrink-0 items-center justify-center rounded-full z-10 [&>svg]:size-4",
+              bg,
+              iconColor
+            ),
+            children: item.icon ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: item.number ?? index + 1 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-foreground", children: item.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: item.description })
+        ] })
+      ] }, index);
+    }) })
+  ] });
+}
+
+function ComplianceBadgeRow({ badges, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: button.cn("flex flex-wrap items-start justify-center gap-8 md:gap-12", className),
+      ...props,
+      children: badges.map((badge, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex max-w-[10rem] flex-col items-center gap-2 text-center",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center rounded-full border border-border bg-card p-3 [&>svg]:size-6", children: badge.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: badge.label }),
+            badge.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: badge.description })
+          ]
+        },
+        `${badge.label}-${index}`
+      ))
+    }
+  );
+}
+
+function CTASection({
+  title,
+  description,
+  cta,
+  secondaryCta,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: button.cn(
+        "w-full rounded-[var(--radius-card)] bg-[image:var(--gradient-diagonal)] px-6 py-16 text-center md:py-20",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-white md:text-4xl", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-3 max-w-xl text-white/80", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              asChild: !!cta.href,
+              onClick: cta.onClick,
+              className: "border-0 bg-white text-foreground hover:bg-white/90",
+              children: cta.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta.href, children: cta.label }) : cta.label
+            }
+          ),
+          secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              asChild: !!secondaryCta.href,
+              onClick: secondaryCta.onClick,
+              className: "border-white/40 text-white hover:bg-white/10",
+              children: secondaryCta.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: secondaryCta.href, children: secondaryCta.label }) : secondaryCta.label
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+const gridColsClasses = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6"
+};
+function MarketingFooter({
+  logo,
+  tagline,
+  columns,
+  legalLinks,
+  copyright,
+  className
+}) {
+  const resolvedCols = Math.min(Math.max(columns.length + 1, 2), 6);
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: button.cn("border-t border-border bg-card", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("grid grid-cols-2 gap-8 py-12", gridColsClasses[resolvedCols]), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 md:col-span-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: logo }),
+        tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 max-w-xs text-sm text-muted-foreground", children: tagline })
+      ] }),
+      columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-semibold text-foreground", children: column.heading }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2 text-sm text-muted-foreground", children: column.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, className: "transition-colors hover:text-foreground", children: link.label }) }, link.href)) })
+      ] }, column.heading))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-4 border-t border-border pt-6 pb-8 text-xs text-muted-foreground md:flex-row", children: [
+      copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyright }),
+      legalLinks && legalLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap items-center gap-4", children: legalLinks.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, className: "transition-colors hover:text-foreground", children: link.label }) }, link.href)) })
+    ] })
+  ] }) });
+}
+
+exports.AuthPageShell = AuthPageShell;
+exports.CTASection = CTASection;
+exports.ComplianceBadgeRow = ComplianceBadgeRow;
+exports.EvidenceTimeline = EvidenceTimeline;
+exports.FeatureCardSkeleton = FeatureCardSkeleton;
+exports.FeatureRow = FeatureRow;
+exports.Hero = Hero;
+exports.LogoCloud = LogoCloud;
+exports.MarketingFooter = MarketingFooter;
+exports.MarketingNavbar = MarketingNavbar;
+exports.PasswordStrengthMeter = PasswordStrengthMeter;
+exports.PillBadge = PillBadge;
+exports.ServiceCard = ServiceCard;
+exports.ServiceCardGrid = ServiceCardGrid;
+exports.SocialLoginButtons = SocialLoginButtons;
+exports.StatBand = StatBand;
+exports.usePasswordStrength = usePasswordStrength;