cat-framework-core 0.1.6 → 0.2.0

package/dist/index.mjs

@@ -1,18 +1,18 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { clsx as Z } from "clsx";
-import { twMerge as J } from "tailwind-merge";
-import { cva as C } from "class-variance-authority";
-import * as x from "react";
-import S, { useState as y, createContext as L, useContext as $, useCallback as Q, useEffect as X } from "react";
-import { Slot as U, createSlot as Y } from "@radix-ui/react-slot";
+import { clsx as G } from "clsx";
+import { twMerge as Z } from "tailwind-merge";
+import { cva as P } from "class-variance-authority";
+import * as v from "react";
+import j, { useState as x, createContext as J, useContext as L, useCallback as Q, useEffect as X } from "react";
+import { Slot as $ } from "@radix-ui/react-slot";
 import { motion as A } from "framer-motion";
-import * as v from "@radix-ui/react-accordion";
-import { ChevronDown as F, X as ee, Menu as re, Search as te, ChevronRight as ae, Cloud as ne, Star as ie, Check as oe } from "lucide-react";
-import "react-dom";
-function c(...t) {
-  return J(Z(t));
+import * as y from "@radix-ui/react-accordion";
+import { ChevronDown as F, X as U, Menu as Y, Search as ee, ChevronRight as re, Cloud as te, Star as ae, Check as ne } from "lucide-react";
+import * as H from "@radix-ui/react-label";
+function c(...a) {
+  return Z(G(a));
 }
-const se = C("", {
+const ie = P("", {
   variants: {
     variant: {
       h1: "font-display text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl",
@@ -39,7 +39,7 @@ const se = C("", {
     variant: "body",
     color: "default"
   }
-}), de = {
+}), oe = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -51,22 +51,22 @@ const se = C("", {
   "body-lg": "p",
   caption: "span",
   overline: "span"
-}, m = S.forwardRef(
-  ({ className: t, variant: a = "body", tone: r = "default", as: o, children: s, ...n }, d) => {
-    const u = o || de[a] || "p";
+}, m = j.forwardRef(
+  ({ className: a, variant: n = "body", tone: r = "default", as: o, children: s, ...t }, d) => {
+    const u = o || oe[n] || "p";
     return /* @__PURE__ */ e(
       u,
       {
         ref: d,
-        className: c(se({ variant: a, color: r, className: t })),
-        ...n,
+        className: c(ie({ variant: n, color: r, className: a })),
+        ...t,
         children: s
       }
     );
   }
 );
 m.displayName = "Typography";
-const le = C(
+const se = P(
   "inline-flex items-center rounded-full px-3 py-0.5 font-body text-xs font-medium transition-fast",
   {
     variants: {
@@ -81,11 +81,11 @@ const le = C(
     },
     defaultVariants: { variant: "default" }
   }
-), ce = S.forwardRef(
-  ({ className: t, variant: a, ...r }, o) => /* @__PURE__ */ e("span", { ref: o, className: c(le({ variant: a, className: t })), ...r })
+), de = j.forwardRef(
+  ({ className: a, variant: n, ...r }, o) => /* @__PURE__ */ e("span", { ref: o, className: c(se({ variant: n, className: a })), ...r })
 );
-ce.displayName = "Badge";
-const me = C(
+de.displayName = "Badge";
+const le = P(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl font-medium font-body transition-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
@@ -112,17 +112,17 @@ const me = C(
       size: "default"
     }
   }
-), g = x.forwardRef(
-  ({ className: t, variant: a, size: r, asChild: o = !1, ...s }, n) => /* @__PURE__ */ e(o ? U : "button", { className: c(me({ variant: a, size: r, className: t })), ref: n, ...s })
+), g = v.forwardRef(
+  ({ className: a, variant: n, size: r, asChild: o = !1, ...s }, t) => /* @__PURE__ */ e(o ? $ : "button", { className: c(le({ variant: n, size: r, className: a })), ref: t, ...s })
 );
 g.displayName = "Button";
-const Fe = ({
-  headline: t,
-  headlineMobile: a,
+const ke = ({
+  headline: a,
+  headlineMobile: n,
   subheadline: r,
   subheadlineMobile: o,
   ctaLabel: s,
-  ctaHref: n = "#",
+  ctaHref: t = "#",
   secondaryCtaLabel: d,
   secondaryCtaHref: u = "#",
   backgroundImage: h,
@@ -150,7 +150,7 @@ const Fe = ({
         transition: { duration: 0.4, ease: "easeOut" },
         className: "px-6 py-16 lg:px-8 lg:py-20 max-w-[500px] lg:max-w-[480px]",
         children: [
-          /* @__PURE__ */ e(m, { variant: "h1", className: "text-white drop-shadow-lg", as: "h1", children: t }),
+          /* @__PURE__ */ e(m, { variant: "h1", className: "text-white drop-shadow-lg", as: "h1", children: a }),
           r && /* @__PURE__ */ e(m, { variant: "body-lg", className: "mt-4 text-white/85 drop-shadow-md", children: r }),
           (s || d) && /* @__PURE__ */ i("div", { className: "mt-8 flex flex-wrap gap-4", children: [
             s && /* @__PURE__ */ e(
@@ -159,7 +159,7 @@ const Fe = ({
                 size: "lg",
                 className: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg",
                 asChild: !0,
-                children: /* @__PURE__ */ e("a", { href: n, children: s })
+                children: /* @__PURE__ */ e("a", { href: t, children: s })
               }
             ),
             d && /* @__PURE__ */ e(
@@ -196,7 +196,7 @@ const Fe = ({
           animate: { opacity: 1, y: 0 },
           transition: { duration: 0.4 },
           children: [
-            /* @__PURE__ */ e(m, { variant: "h2", className: "text-white drop-shadow-lg", as: "h1", children: a || t }),
+            /* @__PURE__ */ e(m, { variant: "h2", className: "text-white drop-shadow-lg", as: "h1", children: n || a }),
             (o || r) && /* @__PURE__ */ e(m, { variant: "body-lg", className: "mt-3 text-white/90 drop-shadow-lg font-medium leading-relaxed", children: o || r })
           ]
         }
@@ -216,7 +216,7 @@ const Fe = ({
                 size: "lg",
                 className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg",
                 asChild: !0,
-                children: /* @__PURE__ */ e("a", { href: n, children: s })
+                children: /* @__PURE__ */ e("a", { href: t, children: s })
               }
             ),
             d && /* @__PURE__ */ e(
@@ -234,13 +234,13 @@ const Fe = ({
       )
     ] })
   ] })
-] }), Se = ({
-  heading: t,
-  text: a,
+] }), Ce = ({
+  heading: a,
+  text: n,
   imageSrc: r,
   imageAlt: o,
   ctaLabel: s,
-  ctaHref: n = "#",
+  ctaHref: t = "#",
   imagePosition: d = "left",
   className: u,
   ...h
@@ -262,29 +262,29 @@ const Fe = ({
         }
       ) }),
       /* @__PURE__ */ i("div", { children: [
-        /* @__PURE__ */ e(m, { variant: "h2", children: t }),
-        /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mt-4", children: a }),
-        s && /* @__PURE__ */ e(g, { className: "mt-6", asChild: !0, children: /* @__PURE__ */ e("a", { href: n, children: s }) })
+        /* @__PURE__ */ e(m, { variant: "h2", children: a }),
+        /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mt-4", children: n }),
+        s && /* @__PURE__ */ e(g, { className: "mt-6", asChild: !0, children: /* @__PURE__ */ e("a", { href: t, children: s }) })
       ] })
     ]
   }
-) }), je = ({
-  heading: t,
-  text: a,
+) }), Pe = ({
+  heading: a,
+  text: n,
   imageSrc: r,
   imageAlt: o = "",
   tag: s,
-  href: n,
+  href: t,
   className: d,
   ...u
 }) => {
-  const h = n ? "a" : "div", p = n ? { href: n } : {};
+  const h = t ? "a" : "div", p = t ? { href: t } : {};
   return /* @__PURE__ */ e(
     "article",
     {
       className: c(
         "group overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-fast hover:shadow-lg",
-        n && "cursor-pointer",
+        t && "cursor-pointer",
         d
       ),
       ...u,
@@ -300,60 +300,60 @@ const Fe = ({
         ) }),
         /* @__PURE__ */ i("div", { className: "p-6", children: [
           s && /* @__PURE__ */ e(m, { variant: "overline", className: "mb-2", children: s }),
-          /* @__PURE__ */ e(m, { variant: "h4", className: "group-hover:text-primary transition-fast", children: t }),
-          /* @__PURE__ */ e(m, { variant: "body-sm", color: "muted", className: "mt-2 line-clamp-3", children: a })
+          /* @__PURE__ */ e(m, { variant: "h4", className: "group-hover:text-primary transition-fast", children: a }),
+          /* @__PURE__ */ e(m, { variant: "body-sm", color: "muted", className: "mt-2 line-clamp-3", children: n })
         ] })
       ] })
     }
   );
-}, he = v.Root, D = x.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(v.Item, { ref: r, className: c("border-b", t), ...a }));
-D.displayName = "AccordionItem";
-const M = x.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ e(v.Header, { className: "flex", children: /* @__PURE__ */ i(
-  v.Trigger,
+}, ce = y.Root, R = v.forwardRef(({ className: a, ...n }, r) => /* @__PURE__ */ e(y.Item, { ref: r, className: c("border-b", a), ...n }));
+R.displayName = "AccordionItem";
+const S = v.forwardRef(({ className: a, children: n, ...r }, o) => /* @__PURE__ */ e(y.Header, { className: "flex", children: /* @__PURE__ */ i(
+  y.Trigger,
   {
     ref: o,
     className: c(
       "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-      t
+      a
     ),
     ...r,
     children: [
-      a,
+      n,
       /* @__PURE__ */ e(F, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
     ]
   }
 ) }));
-M.displayName = v.Trigger.displayName;
-const V = x.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ e(
-  v.Content,
+S.displayName = y.Trigger.displayName;
+const T = v.forwardRef(({ className: a, children: n, ...r }, o) => /* @__PURE__ */ e(
+  y.Content,
   {
     ref: o,
     className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     ...r,
-    children: /* @__PURE__ */ e("div", { className: c("pb-4 pt-0", t), children: a })
+    children: /* @__PURE__ */ e("div", { className: c("pb-4 pt-0", a), children: n })
   }
 ));
-V.displayName = v.Content.displayName;
-const De = ({
-  heading: t,
-  items: a,
+T.displayName = y.Content.displayName;
+const ze = ({
+  heading: a,
+  items: n,
   className: r,
   ...o
 }) => {
   const s = {
     "@context": "https://schema.org",
     "@type": "FAQPage",
-    mainEntity: a.map((n) => ({
+    mainEntity: n.map((t) => ({
       "@type": "Question",
-      name: n.question,
-      acceptedAnswer: { "@type": "Answer", text: n.answer }
+      name: t.question,
+      acceptedAnswer: { "@type": "Answer", text: t.answer }
     }))
   };
   return /* @__PURE__ */ e("section", { className: c("section-padding", r), ...o, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
-    t && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-8 text-center", children: t }),
-    /* @__PURE__ */ e(he, { type: "single", collapsible: !0, className: "w-full", children: a.map((n, d) => /* @__PURE__ */ i(D, { value: `item-${d}`, children: [
-      /* @__PURE__ */ e(M, { className: "font-display text-left font-semibold", children: n.question }),
-      /* @__PURE__ */ e(V, { className: "font-body text-muted-foreground", children: n.answer })
+    a && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-8 text-center", children: a }),
+    /* @__PURE__ */ e(ce, { type: "single", collapsible: !0, className: "w-full", children: n.map((t, d) => /* @__PURE__ */ i(R, { value: `item-${d}`, children: [
+      /* @__PURE__ */ e(S, { className: "font-display text-left font-semibold", children: t.question }),
+      /* @__PURE__ */ e(T, { className: "font-body text-muted-foreground", children: t.answer })
     ] }, d)) }),
     /* @__PURE__ */ e(
       "script",
@@ -363,85 +363,48 @@ const De = ({
       }
     )
   ] }) });
-}, P = x.forwardRef(
-  ({ className: t, type: a, ...r }, o) => /* @__PURE__ */ e(
+}, C = v.forwardRef(
+  ({ className: a, type: n, ...r }, o) => /* @__PURE__ */ e(
     "input",
     {
-      type: a,
+      type: n,
       className: c(
         "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        t
+        a
       ),
       ref: o,
       ...r
     }
   )
 );
-P.displayName = "Input";
-const R = x.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+C.displayName = "Input";
+const M = v.forwardRef(({ className: a, ...n }, r) => /* @__PURE__ */ e(
   "textarea",
   {
     className: c(
       "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      t
+      a
     ),
     ref: r,
-    ...a
+    ...n
   }
 ));
-R.displayName = "Textarea";
-var ue = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "select",
-  "span",
-  "svg",
-  "ul"
-], fe = ue.reduce((t, a) => {
-  const r = Y(`Primitive.${a}`), o = x.forwardRef((s, n) => {
-    const { asChild: d, ...u } = s, h = d ? r : a;
-    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ e(h, { ...u, ref: n });
-  });
-  return o.displayName = `Primitive.${a}`, { ...t, [a]: o };
-}, {}), ge = "Label", H = x.forwardRef((t, a) => /* @__PURE__ */ e(
-  fe.label,
-  {
-    ...t,
-    ref: a,
-    onMouseDown: (r) => {
-      var s;
-      r.target.closest("button, input, select, textarea") || ((s = t.onMouseDown) == null || s.call(t, r), !r.defaultPrevented && r.detail > 1 && r.preventDefault());
-    }
-  }
-));
-H.displayName = ge;
-var T = H;
-const pe = C("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), k = x.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(T, { ref: r, className: c(pe(), t), ...a }));
-k.displayName = T.displayName;
-const Me = ({
-  heading: t = "Kontakt",
-  description: a,
+M.displayName = "Textarea";
+const me = P("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), k = v.forwardRef(({ className: a, ...n }, r) => /* @__PURE__ */ e(H.Root, { ref: r, className: c(me(), a), ...n }));
+k.displayName = H.Root.displayName;
+const Be = ({
+  heading: a = "Kontakt",
+  description: n,
   onSubmit: r,
   className: o,
   ...s
 }) => {
-  const [n, d] = y({ name: "", email: "", message: "" }), [u, h] = y(!1), p = (f) => {
-    f.preventDefault(), r == null || r(n), h(!0);
+  const [t, d] = x({ name: "", email: "", message: "" }), [u, h] = x(!1), p = (f) => {
+    f.preventDefault(), r == null || r(t), h(!0);
   };
   return /* @__PURE__ */ e("section", { className: c("section-padding", o), ...s, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
-    /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2", children: t }),
-    a && /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mb-8", children: a }),
+    /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2", children: a }),
+    n && /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mb-8", children: n }),
     u ? /* @__PURE__ */ i("div", { className: "rounded-lg border border-success/30 bg-success/5 p-8 text-center", children: [
       /* @__PURE__ */ e(m, { variant: "h4", color: "accent", children: "Vielen Dank für Ihre Nachricht!" }),
       /* @__PURE__ */ e(m, { variant: "body-sm", color: "muted", className: "mt-2", children: "Wir melden uns in Kürze bei Ihnen." })
@@ -450,12 +413,12 @@ const Me = ({
         /* @__PURE__ */ i("div", { className: "space-y-2", children: [
           /* @__PURE__ */ e(k, { htmlFor: "name", children: "Name" }),
           /* @__PURE__ */ e(
-            P,
+            C,
             {
               id: "name",
               required: !0,
-              value: n.name,
-              onChange: (f) => d({ ...n, name: f.target.value }),
+              value: t.name,
+              onChange: (f) => d({ ...t, name: f.target.value }),
               placeholder: "Max Mustermann"
             }
           )
@@ -463,13 +426,13 @@ const Me = ({
         /* @__PURE__ */ i("div", { className: "space-y-2", children: [
           /* @__PURE__ */ e(k, { htmlFor: "email", children: "E-Mail" }),
           /* @__PURE__ */ e(
-            P,
+            C,
             {
               id: "email",
               type: "email",
               required: !0,
-              value: n.email,
-              onChange: (f) => d({ ...n, email: f.target.value }),
+              value: t.email,
+              onChange: (f) => d({ ...t, email: f.target.value }),
               placeholder: "max@beispiel.de"
             }
           )
@@ -478,13 +441,13 @@ const Me = ({
       /* @__PURE__ */ i("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e(k, { htmlFor: "message", children: "Nachricht" }),
         /* @__PURE__ */ e(
-          R,
+          M,
           {
             id: "message",
             required: !0,
             rows: 5,
-            value: n.message,
-            onChange: (f) => d({ ...n, message: f.target.value }),
+            value: t.message,
+            onChange: (f) => d({ ...t, message: f.target.value }),
             placeholder: "Ihre Nachricht..."
           }
         )
@@ -492,15 +455,15 @@ const Me = ({
       /* @__PURE__ */ e(g, { type: "submit", size: "lg", children: "Nachricht senden" })
     ] })
   ] }) });
-}, Ve = ({
-  brand: t,
-  items: a,
+}, Ae = ({
+  brand: a,
+  items: n,
   ctaLabel: r,
   ctaHref: o = "#",
   className: s,
-  ...n
+  ...t
 }) => {
-  const [d, u] = y(!1);
+  const [d, u] = x(!1);
   return /* @__PURE__ */ i(
     "header",
     {
@@ -508,12 +471,12 @@ const Me = ({
         "sticky top-0 z-50 border-b border-primary/20 bg-primary text-primary-foreground backdrop-blur",
         s
       ),
-      ...n,
+      ...t,
       children: [
         /* @__PURE__ */ i("nav", { className: "container-wide flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8", "aria-label": "Main", children: [
-          /* @__PURE__ */ e("a", { href: "/", className: "font-display text-lg font-bold text-primary-foreground", children: t }),
+          /* @__PURE__ */ e("a", { href: "/", className: "font-display text-lg font-bold text-primary-foreground", children: a }),
           /* @__PURE__ */ i("ul", { className: "hidden items-center gap-1 md:flex", children: [
-            a.map((h) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+            n.map((h) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
               "a",
               {
                 href: h.href,
@@ -529,12 +492,12 @@ const Me = ({
               className: "md:hidden rounded-full p-2 text-primary-foreground/80 hover:bg-primary-foreground/10",
               onClick: () => u(!d),
               "aria-label": "Menu",
-              children: d ? /* @__PURE__ */ e(ee, { size: 20 }) : /* @__PURE__ */ e(re, { size: 20 })
+              children: d ? /* @__PURE__ */ e(U, { size: 20 }) : /* @__PURE__ */ e(Y, { size: 20 })
             }
           )
         ] }),
         d && /* @__PURE__ */ e("div", { className: "border-t border-primary-foreground/20 bg-primary md:hidden", children: /* @__PURE__ */ i("ul", { className: "container-wide space-y-1 px-4 py-4", children: [
-          a.map((h) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+          n.map((h) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
             "a",
             {
               href: h.href,
@@ -548,18 +511,18 @@ const Me = ({
       ]
     }
   );
-}, Re = ({
-  brand: t,
-  columns: a,
+}, Fe = ({
+  brand: a,
+  columns: n,
   copyright: r,
   className: o,
   ...s
 }) => /* @__PURE__ */ e("footer", { className: c("border-t border-border bg-muted section-padding", o), ...s, children: /* @__PURE__ */ i("div", { className: "container-wide", children: [
   /* @__PURE__ */ i("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: [
-    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, { variant: "h5", children: t }) }),
-    a.map((n) => /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(m, { variant: "overline", className: "mb-4", children: n.heading }),
-      /* @__PURE__ */ e("ul", { className: "space-y-2", children: n.links.map((d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, { variant: "h5", children: a }) }),
+    n.map((t) => /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ e(m, { variant: "overline", className: "mb-4", children: t.heading }),
+      /* @__PURE__ */ e("ul", { className: "space-y-2", children: t.links.map((d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
         "a",
         {
           href: d.href,
@@ -567,41 +530,41 @@ const Me = ({
           children: d.label
         }
       ) }, d.href)) })
-    ] }, n.heading))
+    ] }, t.heading))
   ] }),
   r && /* @__PURE__ */ e("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ e(m, { variant: "caption", children: r }) })
-] }) }), be = S.forwardRef(
-  ({ className: t, onSearch: a, ...r }, o) => /* @__PURE__ */ i("div", { className: c("relative", t), children: [
-    /* @__PURE__ */ e(te, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+] }) }), he = j.forwardRef(
+  ({ className: a, onSearch: n, ...r }, o) => /* @__PURE__ */ i("div", { className: c("relative", a), children: [
+    /* @__PURE__ */ e(ee, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
     /* @__PURE__ */ e(
-      P,
+      C,
       {
         ref: o,
         className: "pl-10",
         placeholder: "Suchen...",
-        onChange: (s) => a == null ? void 0 : a(s.target.value),
+        onChange: (s) => n == null ? void 0 : n(s.target.value),
         ...r
       }
     )
   ] })
 );
-be.displayName = "SearchBar";
-const He = ({ items: t, className: a, ...r }) => {
+he.displayName = "SearchBar";
+const je = ({ items: a, className: n, ...r }) => {
   const o = {
     "@context": "https://schema.org",
     "@type": "BreadcrumbList",
-    itemListElement: t.map((s, n) => ({
+    itemListElement: a.map((s, t) => ({
       "@type": "ListItem",
-      position: n + 1,
+      position: t + 1,
       name: s.label,
       ...s.href ? { item: s.href } : {}
     }))
   };
-  return /* @__PURE__ */ i("nav", { "aria-label": "Breadcrumb", className: c("font-body text-sm", a), ...r, children: [
-    /* @__PURE__ */ e("ol", { className: "flex items-center gap-1", children: t.map((s, n) => /* @__PURE__ */ i("li", { className: "flex items-center gap-1", children: [
-      n > 0 && /* @__PURE__ */ e(ae, { className: "h-3 w-3 text-muted-foreground" }),
-      s.href && n < t.length - 1 ? /* @__PURE__ */ e("a", { href: s.href, className: "text-muted-foreground transition-fast hover:text-foreground", children: s.label }) : /* @__PURE__ */ e("span", { className: "text-foreground font-medium", children: s.label })
-    ] }, n)) }),
+  return /* @__PURE__ */ i("nav", { "aria-label": "Breadcrumb", className: c("font-body text-sm", n), ...r, children: [
+    /* @__PURE__ */ e("ol", { className: "flex items-center gap-1", children: a.map((s, t) => /* @__PURE__ */ i("li", { className: "flex items-center gap-1", children: [
+      t > 0 && /* @__PURE__ */ e(re, { className: "h-3 w-3 text-muted-foreground" }),
+      s.href && t < a.length - 1 ? /* @__PURE__ */ e("a", { href: s.href, className: "text-muted-foreground transition-fast hover:text-foreground", children: s.label }) : /* @__PURE__ */ e("span", { className: "text-foreground font-medium", children: s.label })
+    ] }, t)) }),
     /* @__PURE__ */ e(
       "script",
       {
@@ -610,7 +573,7 @@ const He = ({ items: t, className: a, ...r }) => {
       }
     )
   ] });
-}, xe = [
+}, ue = [
   {
     id: "50gb",
     storage: "50 GB",
@@ -684,24 +647,24 @@ const He = ({ items: t, className: a, ...r }) => {
     ctaLabel: "Zum Angebot",
     ctaHref: "#"
   }
-], Te = ({
-  heading: t = "Cloud-Speicher erweitern",
-  subheading: a = "Wählen Sie den passenden Tarif für Ihre Bedürfnisse",
-  plans: r = xe,
+], Ve = ({
+  heading: a = "Cloud-Speicher erweitern",
+  subheading: n = "Wählen Sie den passenden Tarif für Ihre Bedürfnisse",
+  plans: r = ue,
   defaultOpenId: o = "100gb",
   defaultBilling: s = "yearly",
-  className: n,
+  className: t,
   ...d
 }) => {
-  const [u, h] = y(o), [p, f] = y(s), [N, z] = y(!1), E = r.some((l) => l.hidden), _ = N ? r : r.filter((l) => !l.hidden), K = (l) => {
+  const [u, h] = x(o), [p, f] = x(s), [N, z] = x(!1), I = r.some((l) => l.hidden), _ = N ? r : r.filter((l) => !l.hidden), E = (l) => {
     h((b) => b === l ? null : l);
-  }, O = (l) => p === "yearly" ? l.yearlyPrice : l.monthlyPrice, W = (l) => {
+  }, K = (l) => p === "yearly" ? l.yearlyPrice : l.monthlyPrice, W = (l) => {
     const b = l.monthlyPrice - l.yearlyPrice;
     return b > 0 ? Math.round(b / l.monthlyPrice * 100) : 0;
   };
-  return /* @__PURE__ */ e("section", { className: c("section-padding", n), ...d, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
-    t && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2 text-center", children: t }),
-    a && /* @__PURE__ */ e(m, { variant: "body", tone: "muted", className: "mb-8 text-center", children: a }),
+  return /* @__PURE__ */ e("section", { className: c("section-padding", t), ...d, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
+    a && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2 text-center", children: a }),
+    n && /* @__PURE__ */ e(m, { variant: "body", tone: "muted", className: "mb-8 text-center", children: n }),
     /* @__PURE__ */ e("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ i("div", { className: "inline-flex rounded-xl border border-border bg-muted p-1 gap-1", children: [
       /* @__PURE__ */ e(
         "button",
@@ -727,7 +690,7 @@ const He = ({ items: t, className: a, ...r }) => {
       )
     ] }) }),
     /* @__PURE__ */ e("div", { className: "space-y-3", children: _.map((l) => {
-      const b = u === l.id, q = O(l), j = W(l);
+      const b = u === l.id, q = K(l), V = W(l);
       return /* @__PURE__ */ i(
         "div",
         {
@@ -740,7 +703,7 @@ const He = ({ items: t, className: a, ...r }) => {
               "div",
               {
                 className: "flex items-center gap-4 px-5 py-4 cursor-pointer select-none",
-                onClick: () => K(l.id),
+                onClick: () => E(l.id),
                 children: [
                   /* @__PURE__ */ e(
                     "div",
@@ -749,13 +712,13 @@ const He = ({ items: t, className: a, ...r }) => {
                         "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-fast",
                         b ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                       ),
-                      children: /* @__PURE__ */ e(ne, { className: "h-5 w-5" })
+                      children: /* @__PURE__ */ e(te, { className: "h-5 w-5" })
                     }
                   ),
                   /* @__PURE__ */ i("div", { className: "flex items-center gap-3 min-w-0", children: [
                     /* @__PURE__ */ e(m, { variant: "h4", className: "whitespace-nowrap", children: l.storage }),
                     l.badge && /* @__PURE__ */ i("span", { className: "hidden sm:inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary", children: [
-                      /* @__PURE__ */ e(ie, { className: "h-3 w-3" }),
+                      /* @__PURE__ */ e(ae, { className: "h-3 w-3" }),
                       l.badge
                     ] })
                   ] }),
@@ -797,28 +760,28 @@ const He = ({ items: t, className: a, ...r }) => {
                   b ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
                 ),
                 children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ i("div", { className: "px-5 pb-5 pt-1", children: [
-                  p === "monthly" && j > 0 && /* @__PURE__ */ i(
+                  p === "monthly" && V > 0 && /* @__PURE__ */ i(
                     m,
                     {
                       variant: "body-sm",
                       className: "mb-4 text-primary font-medium",
                       children: [
                         "Sparen Sie ",
-                        j,
+                        V,
                         "% im Jahresabo"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ e("ul", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-5", children: l.features.map((B, G) => /* @__PURE__ */ i(
+                  /* @__PURE__ */ e("ul", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-5", children: l.features.map((B, O) => /* @__PURE__ */ i(
                     "li",
                     {
                       className: "flex items-start gap-2 font-body text-sm text-muted-foreground",
                       children: [
-                        /* @__PURE__ */ e(oe, { className: "h-4 w-4 mt-0.5 shrink-0 text-primary" }),
+                        /* @__PURE__ */ e(ne, { className: "h-4 w-4 mt-0.5 shrink-0 text-primary" }),
                         B
                       ]
                     },
-                    G
+                    O
                   )) }),
                   l.ctaHref && /* @__PURE__ */ e("a", { href: l.ctaHref, children: /* @__PURE__ */ e(g, { className: "w-full sm:w-auto", size: "lg", children: l.ctaLabel || "Jetzt buchen" }) })
                 ] }) })
@@ -829,7 +792,7 @@ const He = ({ items: t, className: a, ...r }) => {
         l.id
       );
     }) }),
-    E && /* @__PURE__ */ e("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ i(
+    I && /* @__PURE__ */ e("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ i(
       g,
       {
         variant: "ghost",
@@ -856,33 +819,33 @@ const He = ({ items: t, className: a, ...r }) => {
   { id: "default", name: "Core Framework" },
   { id: "webde", name: "WEB.DE" },
   { id: "gmx", name: "GMX" }
-], I = L({
+], D = J({
   brand: w[0],
   setBrand: () => {
   }
-}), ye = () => $(I), Ie = ({
-  children: t,
-  defaultBrand: a = "default"
+}), fe = () => L(D), He = ({
+  children: a,
+  defaultBrand: n = "default"
 }) => {
-  const [r, o] = y(
-    w.find((n) => n.id === a) || w[0]
-  ), s = Q((n) => {
-    const d = w.find((u) => u.id === n);
+  const [r, o] = x(
+    w.find((t) => t.id === n) || w[0]
+  ), s = Q((t) => {
+    const d = w.find((u) => u.id === t);
     d && o(d);
   }, []);
   return X(() => {
-    const n = document.documentElement;
-    return r.id === "default" ? n.removeAttribute("data-brand") : n.setAttribute("data-brand", r.id), () => n.removeAttribute("data-brand");
-  }, [r]), /* @__PURE__ */ e(I.Provider, { value: { brand: r, setBrand: s }, children: t });
-}, Ee = ({ className: t }) => {
-  const { brand: a, setBrand: r } = ye();
-  return /* @__PURE__ */ e("div", { className: c("flex items-center gap-1 rounded-xl border border-border bg-muted p-1", t), children: w.map((o) => /* @__PURE__ */ e(
+    const t = document.documentElement;
+    return r.id === "default" ? t.removeAttribute("data-brand") : t.setAttribute("data-brand", r.id), () => t.removeAttribute("data-brand");
+  }, [r]), /* @__PURE__ */ e(D.Provider, { value: { brand: r, setBrand: s }, children: a });
+}, Re = ({ className: a }) => {
+  const { brand: n, setBrand: r } = fe();
+  return /* @__PURE__ */ e("div", { className: c("flex items-center gap-1 rounded-xl border border-border bg-muted p-1", a), children: w.map((o) => /* @__PURE__ */ e(
     "button",
     {
       onClick: () => r(o.id),
       className: c(
         "rounded-lg px-3 py-1.5 font-body text-xs font-medium transition-fast",
-        a.id === o.id ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background"
+        n.id === o.id ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background"
       ),
       children: o.name
     },
@@ -890,21 +853,21 @@ const He = ({ items: t, className: a, ...r }) => {
   )) });
 };
 export {
-  ce as Badge,
-  Ie as BrandProvider,
-  Ee as BrandSwitcher,
-  He as Breadcrumb,
-  Me as ContactForm,
-  je as ContentCard,
-  De as FaqAccordion,
-  Re as Footer,
-  Fe as Hero,
-  Se as ImageTextTeaser,
-  Ve as Navbar,
-  be as SearchBar,
-  Te as TariffSelect,
+  de as Badge,
+  He as BrandProvider,
+  Re as BrandSwitcher,
+  je as Breadcrumb,
+  Be as ContactForm,
+  Pe as ContentCard,
+  ze as FaqAccordion,
+  Fe as Footer,
+  ke as Hero,
+  Ce as ImageTextTeaser,
+  Ae as Navbar,
+  he as SearchBar,
+  Ve as TariffSelect,
   m as Typography,
   w as brands,
-  ye as useBrand
+  fe as useBrand
 };
 //# sourceMappingURL=index.mjs.map