xertica-ui 2.7.0 → 2.9.6

package/dist/SectionHeading-DMNObcwm.js

@@ -0,0 +1,838 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { C as Card, e as CardHeader, S as Skeleton, b as CardContent, d as CardFooter, f as CardTitle, c as CardDescription } from './skeleton-BtBwJ39W.js';
+import { c as cn, B as Button } from './button-B05czY_8.js';
+import { I as ImageWithFallback } from './ImageWithFallback-CGk5zPH-.js';
+import { L as LanguageSelector } from './LanguageSelector-DjbWIKWC.js';
+import { e as IsotypeTwist } from './IsotypeTwist-BTdNL4iV.js';
+import { useTranslation } from 'react-i18next';
+import { Lock, X, Menu, CheckCircle2, Check } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+function FeatureCardSkeleton({
+  showAction = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: cn("flex flex-col h-full", className), ...props, children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "size-10 rounded-[var(--radius)] shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12 rounded-full" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-5/6" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-4/6" })
+    ] }),
+    showAction && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full rounded-md" }) })
+  ] });
+}
+
+function AuthPageShell(props) {
+  const { children } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "h-screen w-full flex overflow-y-auto", children: [
+    props.leftPanel === "isotype" ? /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:flex-1 items-center justify-center bg-muted", children: /* @__PURE__ */ jsx(IsotypeTwist, { variant: "magenta-blue", className: "w-full max-w-sm" }) }) : /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-1 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        ImageWithFallback,
+        {
+          src: props.imageSrc,
+          alt: props.imageAlt,
+          className: "absolute inset-0 w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute inset-0 opacity-80",
+            props.gradientClassName ?? "bg-[image:var(--gradient-diagonal)]"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative",
+          props.leftPanel === "isotype" ? "bg-card" : "bg-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-20", children: /* @__PURE__ */ jsx(LanguageSelector, { variant: "minimal", showIcon: false }) }),
+          props.leftPanel !== "isotype" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 lg:hidden opacity-10 dark:opacity-5",
+                props.gradientClassName ?? "bg-[image:var(--gradient-diagonal)]"
+              )
+            }
+          ),
+          /* @__PURE__ */ 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 } = useTranslation();
+  if (providers.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-border" }) }),
+      /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx("span", { className: "bg-muted px-2 text-muted-foreground", children: t("login.orContinueWith") }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      providers.includes("google") && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center shadow-xs",
+          onClick: () => onSocialLogin("Google"),
+          children: [
+            /* @__PURE__ */ jsxs("svg", { className: "w-5 h-5 mr-2", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", children: [
+              /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: t("login.signInWithGoogle") })
+          ]
+        }
+      ),
+      providers.includes("mtLogin") && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center shadow-xs",
+          onClick: () => onSocialLogin("MT Login"),
+          children: [
+            /* @__PURE__ */ jsx(Lock, { className: "w-5 h-5 mr-2 text-[var(--chart-4)]" }),
+            /* @__PURE__ */ jsx("span", { children: t("login.signInWithMTLogin") })
+          ]
+        }
+      ),
+      providers.includes("govBr") && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-center font-normal shadow-xs",
+          onClick: () => onSocialLogin("gov.br"),
+          children: /* @__PURE__ */ jsxs("span", { children: [
+            t("login.signInWithGovBr").split("gov.br")[0],
+            /* @__PURE__ */ jsx("strong", { className: "font-semibold", children: "gov.br" }),
+            t("login.signInWithGovBr").split("gov.br")[1] || ""
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+function usePasswordStrength(password) {
+  return 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 } = useTranslation();
+  if (!strength) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: `h-full transition-all duration-300 ${BAR_WIDTH[strength]}` }) }),
+    /* @__PURE__ */ jsx("span", { className: `text-small ${TEXT_COLOR[strength]}`, children: t(LABEL_KEY[strength]) })
+  ] });
+}
+
+const colorTokens$5 = {
+  primary: { border: "border-primary", tint: "bg-primary/5", icon: "text-primary" },
+  "chart-1": {
+    border: "border-[var(--chart-1)]",
+    tint: "bg-[var(--chart-1)]/5",
+    icon: "text-[var(--chart-1)]"
+  },
+  "chart-2": {
+    border: "border-[var(--chart-2)]",
+    tint: "bg-[var(--chart-2)]/5",
+    icon: "text-[var(--chart-2)]"
+  },
+  "chart-3": {
+    border: "border-[var(--chart-3)]",
+    tint: "bg-[var(--chart-3)]/5",
+    icon: "text-[var(--chart-3)]"
+  },
+  "chart-4": {
+    border: "border-[var(--chart-4)]",
+    tint: "bg-[var(--chart-4)]/5",
+    icon: "text-[var(--chart-4)]"
+  },
+  "chart-5": {
+    border: "border-[var(--chart-5)]",
+    tint: "bg-[var(--chart-5)]/5",
+    icon: "text-[var(--chart-5)]"
+  },
+  success: { border: "border-success", tint: "bg-success/5", icon: "text-success" },
+  info: { border: "border-info", tint: "bg-info/5", icon: "text-info" },
+  warning: { border: "border-warning", tint: "bg-warning/5", icon: "text-warning" },
+  destructive: { border: "border-destructive", tint: "bg-destructive/5", icon: "text-destructive" }
+};
+function PillBadge({
+  children,
+  icon,
+  color = "primary",
+  className,
+  ...props
+}) {
+  const { border, tint, icon: textColor } = colorTokens$5[color];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide",
+        border,
+        tint,
+        textColor,
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex items-center [&>svg]:size-3.5", "aria-hidden": "true", children: icon }),
+        children
+      ]
+    }
+  );
+}
+
+function MarketingNavbar({
+  logo,
+  links,
+  cta,
+  secondaryCta,
+  showLanguageSelector = true,
+  openMenuLabel = "Open menu",
+  closeMenuLabel = "Close menu",
+  className
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const closeMenu = () => setIsOpen(false);
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-50 w-full border-b border-border bg-card/80 backdrop-blur",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "flex shrink-0 items-center", children: logo }),
+          /* @__PURE__ */ jsx("div", { className: "hidden flex-1 items-center justify-center gap-8 md:flex", children: links.map((link) => /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: link.href,
+              className: "text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+              children: link.label
+            },
+            link.href
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 items-center gap-3 md:flex", children: [
+            showLanguageSelector && /* @__PURE__ */ jsx(LanguageSelector, { variant: "minimal", showIcon: false }),
+            secondaryCta && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                asChild: !!secondaryCta.href,
+                onClick: secondaryCta.onClick,
+                children: secondaryCta.href ? /* @__PURE__ */ jsx("a", { href: secondaryCta.href, children: secondaryCta.label }) : secondaryCta.label
+              }
+            ),
+            cta && /* @__PURE__ */ jsx(Button, { variant: "secondary", asChild: !!cta.href, onClick: cta.onClick, children: cta.href ? /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) : cta.label })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "md:hidden",
+              onClick: () => setIsOpen((prev) => !prev),
+              "aria-label": isOpen ? closeMenuLabel : openMenuLabel,
+              "aria-expanded": isOpen,
+              children: isOpen ? /* @__PURE__ */ jsx(X, { className: "size-5" }) : /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+            }
+          )
+        ] }),
+        isOpen && /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-card/95 backdrop-blur md:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-4 py-4 sm:px-6", children: [
+          links.map((link) => /* @__PURE__ */ 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
+          )),
+          showLanguageSelector && /* @__PURE__ */ jsx("div", { className: "mt-2 flex border-t border-border pt-4", children: /* @__PURE__ */ jsx(LanguageSelector, { variant: "minimal", showIcon: false }) }),
+          (secondaryCta || cta) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-2 border-t border-border pt-4", children: [
+            secondaryCta && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                className: "w-full",
+                asChild: !!secondaryCta.href,
+                onClick: () => {
+                  closeMenu();
+                  secondaryCta.onClick?.();
+                },
+                children: secondaryCta.href ? /* @__PURE__ */ jsx("a", { href: secondaryCta.href, children: secondaryCta.label }) : secondaryCta.label
+              }
+            ),
+            cta && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                className: "w-full",
+                asChild: !!cta.href,
+                onClick: () => {
+                  closeMenu();
+                  cta.onClick?.();
+                },
+                children: cta.href ? /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) : cta.label
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+function HeroCtaButton({
+  cta,
+  variant
+}) {
+  if (cta.href) {
+    return /* @__PURE__ */ jsx(Button, { asChild: true, variant, size: "lg", children: /* @__PURE__ */ jsx("a", { href: cta.href, onClick: cta.onClick, children: cta.label }) });
+  }
+  return /* @__PURE__ */ jsx(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__ */ jsxs("section", { className: cn("relative overflow-hidden py-16 md:py-24", className), ...props, children: [
+    decorative && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 z-0 overflow-hidden",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ 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__ */ jsx("div", { className: "relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("grid items-center gap-12", visual ? "lg:grid-cols-2" : "mx-auto max-w-3xl"),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-6",
+                isCentered ? "items-center text-center" : "items-start text-left"
+              ),
+              children: [
+                eyebrow && /* @__PURE__ */ jsx(PillBadge, { icon: eyebrow.icon, children: eyebrow.label }),
+                /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", children: title }),
+                description && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-lg text-muted-foreground", children: description }),
+                (primaryCta || secondaryCta) && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-col gap-3 pt-2 sm:flex-row",
+                      isCentered && "sm:justify-center"
+                    ),
+                    children: [
+                      primaryCta && /* @__PURE__ */ jsx(HeroCtaButton, { cta: primaryCta, variant: "default" }),
+                      secondaryCta && /* @__PURE__ */ jsx(HeroCtaButton, { cta: secondaryCta, variant: "secondary" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          visual && /* @__PURE__ */ jsx("div", { className: "relative", children: visual })
+        ]
+      }
+    ) })
+  ] });
+}
+
+const colorTokens$4 = {
+  primary: "border-t-primary",
+  "chart-1": "border-t-[var(--chart-1)]",
+  "chart-2": "border-t-[var(--chart-2)]",
+  "chart-3": "border-t-[var(--chart-3)]",
+  "chart-4": "border-t-[var(--chart-4)]",
+  "chart-5": "border-t-[var(--chart-5)]",
+  success: "border-t-success",
+  info: "border-t-info",
+  warning: "border-t-warning",
+  destructive: "border-t-destructive"
+};
+function TopAccentCards({ items, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2 md:gap-8", className), children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "border border-t-4 border-border",
+        colorTokens$4[item.color ?? "primary"],
+        item.className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: item.title }) }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: item.body }),
+          item.bullets && item.bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: item.bullets.map((bullet) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { children: bullet })
+          ] }, bullet)) })
+        ] })
+      ]
+    },
+    `${item.title}-${index}`
+  )) });
+}
+
+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" }
+};
+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__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-2 gap-x-8 gap-y-10 md:gap-x-0",
+        columnClasses$1[resolvedColumns] ?? columnClasses$1[4],
+        className
+      ),
+      ...props,
+      children: stats.map((stat, index) => {
+        const { icon: valueColor } = colorTokens$3[stat.color ?? "primary"];
+        const isNewRow = index % resolvedColumns === 0;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center text-center sm:items-start sm:text-left",
+              isNewRow ? "md:pl-0" : "md:border-l md:border-border md:pl-10"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-3xl md:text-5xl font-bold tracking-tight tabular-nums",
+                    valueColor
+                  ),
+                  children: stat.value
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "mt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: stat.label })
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+}
+
+function FeatureRow({
+  eyebrow,
+  title,
+  description,
+  bullets,
+  visual,
+  reverse = false,
+  tone = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "py-16 md:py-24",
+        tone === "muted" ? "bg-muted" : tone === "card" ? "bg-card" : "bg-background",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ 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__ */ jsxs("div", { className: cn(reverse ? "lg:order-last" : "lg:order-first"), children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-primary", children: eyebrow }),
+          /* @__PURE__ */ jsx("h2", { className: cn("text-2xl font-bold text-foreground md:text-3xl", eyebrow && "mt-2"), children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-6 text-muted-foreground leading-relaxed", children: description }),
+          bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-2", children: bullets.map((bullet) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "size-5 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground", children: bullet })
+          ] }, bullet)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn(reverse ? "lg:order-first" : "lg:order-last"), children: visual })
+      ] })
+    }
+  );
+}
+
+const colorTokens$2 = {
+  primary: { border: "border-primary", tint: "bg-primary/5", icon: "text-primary" },
+  "chart-1": {
+    border: "border-[var(--chart-1)]",
+    tint: "bg-[var(--chart-1)]/5",
+    icon: "text-[var(--chart-1)]"
+  },
+  "chart-2": {
+    border: "border-[var(--chart-2)]",
+    tint: "bg-[var(--chart-2)]/5",
+    icon: "text-[var(--chart-2)]"
+  },
+  "chart-3": {
+    border: "border-[var(--chart-3)]",
+    tint: "bg-[var(--chart-3)]/5",
+    icon: "text-[var(--chart-3)]"
+  },
+  "chart-4": {
+    border: "border-[var(--chart-4)]",
+    tint: "bg-[var(--chart-4)]/5",
+    icon: "text-[var(--chart-4)]"
+  },
+  "chart-5": {
+    border: "border-[var(--chart-5)]",
+    tint: "bg-[var(--chart-5)]/5",
+    icon: "text-[var(--chart-5)]"
+  },
+  success: { border: "border-success", tint: "bg-success/5", icon: "text-success" },
+  info: { border: "border-info", tint: "bg-info/5", icon: "text-info" },
+  warning: { border: "border-warning", tint: "bg-warning/5", icon: "text-warning" },
+  destructive: { border: "border-destructive", tint: "bg-destructive/5", 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__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 md:gap-8", columnClasses[columns], className), children: items.map((item, index) => /* @__PURE__ */ jsx(ServiceCard, { variant, ...item }, `${item.title}-${index}`)) });
+}
+function ServiceCard({
+  icon,
+  color = "primary",
+  category,
+  title,
+  description,
+  checklist,
+  bullets,
+  cta,
+  variant = "card",
+  background = "default",
+  className
+}) {
+  const { border, tint, icon: iconColor } = colorTokens$2[color];
+  const iconChip = icon && /* @__PURE__ */ jsx("div", { className: cn("w-fit rounded-[var(--radius)] border p-3", border, tint), children: /* @__PURE__ */ jsx("div", { className: cn("[&>svg]:size-6", iconColor), children: icon }) });
+  if (variant === "plain") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+      iconChip,
+      /* @__PURE__ */ jsxs("div", { children: [
+        category && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: category }),
+        /* @__PURE__ */ jsx("h3", { className: cn("text-base font-semibold text-foreground", category && "mt-1"), children: title })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: description })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Card, { variant: background, className: cn("flex h-full flex-col", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      iconChip,
+      /* @__PURE__ */ jsxs("div", { children: [
+        category && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: category }),
+        /* @__PURE__ */ jsx(CardTitle, { className: category ? "mt-1" : void 0, children: title })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex-1 space-y-4", children: [
+      /* @__PURE__ */ jsx(CardDescription, { className: "leading-relaxed", children: description }),
+      checklist && checklist.length > 0 && /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: checklist.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 py-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex size-5 shrink-0 items-center justify-center rounded-[var(--radius)] border",
+              border,
+              tint,
+              iconColor
+            ),
+            children: /* @__PURE__ */ jsx(Check, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: item })
+      ] }, item)) }),
+      bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: bullets.map((bullet) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { children: bullet })
+      ] }, bullet)) })
+    ] }),
+    cta && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "w-full", onClick: cta.onClick, asChild: !!cta.href, children: cta.href ? /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) : cta.label }) })
+  ] });
+}
+
+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" }
+};
+function HowItWorksSteps({ items, className }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4", className), children: items.map((item, index) => {
+    const { bg, icon: iconColor } = colorTokens$1[item.color ?? "primary"];
+    return /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex size-10 shrink-0 items-center justify-center rounded-[var(--radius)] border border-current/20 md:size-12",
+            bg
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex items-center justify-center text-sm font-semibold [&>svg]:size-5",
+                iconColor
+              ),
+              children: item.icon ?? (item.number ?? index + 1)
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold", children: item.title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm opacity-70", children: item.description })
+      ] })
+    ] }, index);
+  }) });
+}
+
+function ComplianceBadgeRow({ badges, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-4", className),
+      ...props,
+      children: badges.map((badge, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-start gap-3 text-left",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-[var(--radius)] border border-border bg-background p-3 [&>svg]:size-6", children: badge.icon }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: badge.label }),
+            badge.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: badge.description })
+          ]
+        },
+        `${badge.label}-${index}`
+      ))
+    }
+  );
+}
+
+function CTASection({
+  title,
+  description,
+  cta,
+  secondaryCta,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "w-full rounded-[var(--radius-card)] border border-sidebar-border bg-sidebar px-6 py-16 md:py-20",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 md:flex-row md:items-center md:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-sidebar-foreground md:text-4xl", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-6 text-sidebar-foreground/70", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row md:shrink-0", children: [
+          /* @__PURE__ */ jsx(Button, { asChild: !!cta.href, onClick: cta.onClick, children: cta.href ? /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) : cta.label }),
+          secondaryCta && /* @__PURE__ */ jsx(Button, { variant: "outline", asChild: !!secondaryCta.href, onClick: secondaryCta.onClick, children: secondaryCta.href ? /* @__PURE__ */ 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__ */ jsx("footer", { className: cn("border-t border-border bg-card", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-8 py-12", gridColsClasses[resolvedCols]), children: [
+      /* @__PURE__ */ jsxs("div", { className: "col-span-2 md:col-span-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center", children: logo }),
+        tagline && /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-xs text-sm text-muted-foreground", children: tagline })
+      ] }),
+      columns.map((column) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xs font-semibold uppercase tracking-wide text-foreground", children: column.heading }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-2 text-sm text-muted-foreground", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, className: "transition-colors hover:text-foreground", children: link.label }) }, link.href)) })
+      ] }, column.heading))
+    ] }),
+    /* @__PURE__ */ 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__ */ jsx("p", { children: copyright }),
+      legalLinks && legalLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-4", children: legalLinks.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, className: "transition-colors hover:text-foreground", children: link.label }) }, link.href)) })
+    ] })
+  ] }) });
+}
+
+const colorTokens = {
+  primary: "bg-primary",
+  "chart-1": "bg-[var(--chart-1)]",
+  "chart-2": "bg-[var(--chart-2)]",
+  "chart-3": "bg-[var(--chart-3)]",
+  "chart-4": "bg-[var(--chart-4)]",
+  "chart-5": "bg-[var(--chart-5)]",
+  success: "bg-success",
+  info: "bg-info",
+  warning: "bg-warning",
+  destructive: "bg-destructive"
+};
+function SectionHeading({
+  title,
+  description,
+  tone = "default",
+  accentColor,
+  className
+}) {
+  const isSidebar = tone === "sidebar";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("h2", { className: cn("text-2xl font-bold md:text-3xl", !isSidebar && "text-foreground"), children: title }),
+    accentColor && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("mt-3 block h-1 w-10 rounded-full", colorTokens[accentColor])
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mt-6 max-w-2xl text-base",
+          isSidebar ? "text-sidebar-foreground/70" : "text-muted-foreground"
+        ),
+        children: description
+      }
+    )
+  ] });
+}
+
+export { AuthPageShell as A, CTASection as C, FeatureCardSkeleton as F, Hero as H, MarketingFooter as M, PasswordStrengthMeter as P, SectionHeading as S, TopAccentCards as T, ComplianceBadgeRow as a, FeatureRow as b, HowItWorksSteps as c, MarketingNavbar as d, PillBadge as e, ServiceCard as f, ServiceCardGrid as g, SocialLoginButtons as h, StatBand as i, usePasswordStrength as u };