cat-framework-core 0.5.0 → 0.5.2

package/dist/index.mjs

@@ -3,12 +3,12 @@ import { clsx as J } from "clsx";
 import { twMerge as L } from "tailwind-merge";
 import { cva as B } from "class-variance-authority";
 import * as k from "react";
-import V, { useRef as $, useEffect as T, useState as v, createContext as Q, useContext as X, useCallback as U } from "react";
+import V, { useRef as $, useState as v, useEffect as I, createContext as Q, useContext as X, useCallback as U } from "react";
 import { Slot as Y } from "@radix-ui/react-slot";
-import { motion as S } from "framer-motion";
+import { motion as R } from "framer-motion";
 import * as w from "@radix-ui/react-accordion";
-import { ChevronDown as R, X as ee, Menu as re, Search as te, ChevronRight as ae, Cloud as ne, Star as oe, Check as ie } from "lucide-react";
-import * as I from "@radix-ui/react-label";
+import { ChevronDown as S, X as ee, Menu as re, Search as te, ChevronRight as ae, Cloud as ne, Star as oe, Check as ie } from "lucide-react";
+import * as T from "@radix-ui/react-label";
 function l(...t) {
   return L(J(t));
 }
@@ -51,21 +51,21 @@ const se = B("", {
   "body-lg": "p",
   caption: "span",
   overline: "span"
-}, u = V.forwardRef(
-  ({ className: t, variant: a = "body", tone: r = "default", as: o, children: s, ...n }, d) => {
-    const f = o || de[a] || "p";
+}, m = V.forwardRef(
+  ({ className: t, variant: n = "body", tone: r = "default", as: o, children: s, ...a }, d) => {
+    const f = o || de[n] || "p";
     return /* @__PURE__ */ e(
       f,
       {
         ref: d,
-        className: l(se({ variant: a, color: r, className: t })),
-        ...n,
+        className: l(se({ variant: n, color: r, className: t })),
+        ...a,
         children: s
       }
     );
   }
 );
-u.displayName = "Typography";
+m.displayName = "Typography";
 const le = B(
   "inline-flex items-center rounded-full px-3 py-0.5 font-body text-xs font-medium transition-fast",
   {
@@ -82,7 +82,7 @@ const le = B(
     defaultVariants: { variant: "default" }
   }
 ), ce = V.forwardRef(
-  ({ className: t, variant: a, ...r }, o) => /* @__PURE__ */ e("span", { ref: o, className: l(le({ variant: a, className: t })), ...r })
+  ({ className: t, variant: n, ...r }, o) => /* @__PURE__ */ e("span", { ref: o, className: l(le({ variant: n, className: t })), ...r })
 );
 ce.displayName = "Badge";
 const me = B(
@@ -113,63 +113,62 @@ const me = B(
     }
   }
 ), b = k.forwardRef(
-  ({ className: t, variant: a, size: r, asChild: o = !1, ...s }, n) => /* @__PURE__ */ e(o ? Y : "button", { className: l(me({ variant: a, size: r, className: t })), ref: n, ...s })
+  ({ className: t, variant: n, size: r, asChild: o = !1, ...s }, a) => /* @__PURE__ */ e(o ? Y : "button", { className: l(me({ variant: n, size: r, className: t })), ref: a, ...s })
 );
 b.displayName = "Button";
 const M = ({
   src: t,
-  className: a,
-  poster: r
+  className: n
 }) => {
-  const o = $(null);
-  return T(() => {
-    var s;
-    (s = o.current) == null || s.play().catch(() => {
+  const r = $(null), [o, s] = v(!1);
+  return I(() => {
+    var a;
+    s(!1), (a = r.current) == null || a.play().catch(() => {
     });
   }, [t]), /* @__PURE__ */ e(
     "video",
     {
-      ref: o,
+      ref: r,
       src: t,
-      poster: r,
       autoPlay: !0,
       loop: !0,
       muted: !0,
       playsInline: !0,
-      className: a
+      onCanPlay: () => s(!0),
+      className: l(n, o ? "opacity-100" : "opacity-0"),
+      style: { transition: "opacity 0.3s ease-in" }
     }
   );
-}, ze = ({
+}, Ce = ({
   headline: t,
-  headlineMobile: a,
+  headlineMobile: n,
   subheadline: r,
   subheadlineMobile: o,
   ctaLabel: s,
-  ctaHref: n = "#",
+  ctaHref: a = "#",
   secondaryCtaLabel: d,
   secondaryCtaHref: f = "#",
-  backgroundImage: m,
-  backgroundImageMobile: g,
-  backgroundVideo: p,
+  backgroundImage: u,
+  backgroundImageMobile: p,
+  backgroundVideo: g,
   backgroundVideoMobile: y,
   imageAlt: N = "",
   className: h,
   ...j
 }) => {
-  const A = !!p, F = !!(y || p);
+  const A = !!g, F = !!(y || g);
   return /* @__PURE__ */ i("section", { className: l("relative overflow-hidden", h), ...j, children: [
     /* @__PURE__ */ i("div", { className: "hidden md:flex relative min-h-[420px] md:min-h-[420px] lg:min-h-[600px]", children: [
       A ? /* @__PURE__ */ e(
         M,
         {
-          src: p,
-          poster: m,
+          src: g,
           className: "absolute inset-0 h-full w-full object-cover object-right"
         }
-      ) : m ? /* @__PURE__ */ e(
+      ) : u ? /* @__PURE__ */ e(
         "img",
         {
-          src: m,
+          src: u,
           alt: N,
           className: "absolute inset-0 h-full w-full object-cover object-right",
           loading: "eager"
@@ -177,15 +176,15 @@ const M = ({
       ) : null,
       /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" }),
       /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center w-full pl-8 lg:pl-16", children: /* @__PURE__ */ i(
-        S.div,
+        R.div,
         {
           initial: { opacity: 0, y: 16 },
           animate: { opacity: 1, y: 0 },
           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(u, { variant: "h1", className: "text-white drop-shadow-lg", as: "h1", children: t }),
-            r && /* @__PURE__ */ e(u, { variant: "body-lg", className: "mt-4 text-white/85 drop-shadow-md", children: r }),
+            /* @__PURE__ */ e(m, { variant: "h1", className: "text-white drop-shadow-lg", as: "h1", children: t }),
+            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(
                 b,
@@ -193,7 +192,7 @@ const M = ({
                   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: a, children: s })
                 }
               ),
               d && /* @__PURE__ */ e(
@@ -215,14 +214,13 @@ const M = ({
       F ? /* @__PURE__ */ e(
         M,
         {
-          src: y || p,
-          poster: g || m,
+          src: y || g,
           className: "absolute inset-0 h-full w-full object-cover object-center"
         }
-      ) : g || m ? /* @__PURE__ */ e(
+      ) : p || u ? /* @__PURE__ */ e(
         "img",
         {
-          src: g || m,
+          src: p || u,
           alt: N,
           className: "absolute inset-0 h-full w-full object-cover object-center",
           loading: "eager"
@@ -231,20 +229,20 @@ const M = ({
       /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-black/80" }),
       /* @__PURE__ */ i("div", { className: "relative z-10 flex flex-1 flex-col justify-between px-5 py-10", children: [
         /* @__PURE__ */ i(
-          S.div,
+          R.div,
           {
             initial: { opacity: 0, y: 12 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.4 },
             children: [
-              /* @__PURE__ */ e(u, { variant: "h2", className: "text-white drop-shadow-lg", as: "h1", children: a || t }),
-              (o || r) && /* @__PURE__ */ e(u, { variant: "body-lg", className: "mt-3 text-white/90 drop-shadow-lg font-medium leading-relaxed", children: o || r })
+              /* @__PURE__ */ e(m, { variant: "h2", className: "text-white drop-shadow-lg", as: "h1", children: n || t }),
+              (o || r) && /* @__PURE__ */ e(m, { variant: "body-lg", className: "mt-3 text-white/90 drop-shadow-lg font-medium leading-relaxed", children: o || r })
             ]
           }
         ),
         /* @__PURE__ */ e("div", { className: "flex-1" }),
         (s || d) && /* @__PURE__ */ i(
-          S.div,
+          R.div,
           {
             initial: { opacity: 0, y: 12 },
             animate: { opacity: 1, y: 0 },
@@ -257,7 +255,7 @@ const M = ({
                   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: a, children: s })
                 }
               ),
               d && /* @__PURE__ */ e(
@@ -276,17 +274,17 @@ const M = ({
       ] })
     ] })
   ] });
-}, Ce = ({
+}, ze = ({
   heading: t,
-  text: a,
+  text: n,
   imageSrc: r,
   imageAlt: o,
   ctaLabel: s,
-  ctaHref: n = "#",
+  ctaHref: a = "#",
   imagePosition: d = "left",
   className: f,
-  ...m
-}) => /* @__PURE__ */ e("section", { className: l("section-padding", f), ...m, children: /* @__PURE__ */ i(
+  ...u
+}) => /* @__PURE__ */ e("section", { className: l("section-padding", f), ...u, children: /* @__PURE__ */ i(
   "div",
   {
     className: l(
@@ -304,33 +302,33 @@ const M = ({
         }
       ) }),
       /* @__PURE__ */ i("div", { children: [
-        /* @__PURE__ */ e(u, { variant: "h2", children: t }),
-        /* @__PURE__ */ e(u, { variant: "body", color: "muted", className: "mt-4", children: a }),
-        s && /* @__PURE__ */ e(b, { className: "mt-6", asChild: !0, children: /* @__PURE__ */ e("a", { href: n, children: s }) })
+        /* @__PURE__ */ e(m, { variant: "h2", children: t }),
+        /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mt-4", children: n }),
+        s && /* @__PURE__ */ e(b, { className: "mt-6", asChild: !0, children: /* @__PURE__ */ e("a", { href: a, children: s }) })
       ] })
     ]
   }
 ) }), Be = ({
   heading: t,
-  text: a,
+  text: n,
   imageSrc: r,
   imageAlt: o = "",
   tag: s,
-  href: n,
+  href: a,
   className: d,
   ...f
 }) => {
-  const m = n ? "a" : "div", g = n ? { href: n } : {};
+  const u = a ? "a" : "div", p = a ? { href: a } : {};
   return /* @__PURE__ */ e(
     "article",
     {
       className: l(
         "group overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-fast hover:shadow-lg",
-        n && "cursor-pointer",
+        a && "cursor-pointer",
         d
       ),
       ...f,
-      children: /* @__PURE__ */ i(m, { ...g, className: "block", children: [
+      children: /* @__PURE__ */ i(u, { ...p, className: "block", children: [
         r && /* @__PURE__ */ e("div", { className: "aspect-video overflow-hidden", children: /* @__PURE__ */ e(
           "img",
           {
@@ -341,16 +339,16 @@ const M = ({
           }
         ) }),
         /* @__PURE__ */ i("div", { className: "p-6", children: [
-          s && /* @__PURE__ */ e(u, { variant: "overline", className: "mb-2", children: s }),
-          /* @__PURE__ */ e(u, { variant: "h4", className: "group-hover:text-primary transition-fast", children: t }),
-          /* @__PURE__ */ e(u, { variant: "body-sm", color: "muted", className: "mt-2 line-clamp-3", children: a })
+          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: n })
         ] })
       ] })
     }
   );
-}, ue = w.Root, _ = k.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(w.Item, { ref: r, className: l("border-b", t), ...a }));
+}, ue = w.Root, _ = k.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ e(w.Item, { ref: r, className: l("border-b", t), ...n }));
 _.displayName = "AccordionItem";
-const E = k.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ e(w.Header, { className: "flex", children: /* @__PURE__ */ i(
+const E = k.forwardRef(({ className: t, children: n, ...r }, o) => /* @__PURE__ */ e(w.Header, { className: "flex", children: /* @__PURE__ */ i(
   w.Trigger,
   {
     ref: o,
@@ -360,42 +358,42 @@ const E = k.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__
     ),
     ...r,
     children: [
-      a,
-      /* @__PURE__ */ e(R, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+      n,
+      /* @__PURE__ */ e(S, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
     ]
   }
 ) }));
 E.displayName = w.Trigger.displayName;
-const K = k.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ e(
+const K = k.forwardRef(({ className: t, children: n, ...r }, o) => /* @__PURE__ */ e(
   w.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: l("pb-4 pt-0", t), children: a })
+    children: /* @__PURE__ */ e("div", { className: l("pb-4 pt-0", t), children: n })
   }
 ));
 K.displayName = w.Content.displayName;
 const je = ({
   heading: t,
-  items: a,
+  items: n,
   className: r,
   ...o
 }) => {
   const s = {
     "@context": "https://schema.org",
     "@type": "FAQPage",
-    mainEntity: a.map((n) => ({
+    mainEntity: n.map((a) => ({
       "@type": "Question",
-      name: n.question,
-      acceptedAnswer: { "@type": "Answer", text: n.answer }
+      name: a.question,
+      acceptedAnswer: { "@type": "Answer", text: a.answer }
     }))
   };
   return /* @__PURE__ */ e("section", { className: l("section-padding", r), ...o, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
-    t && /* @__PURE__ */ e(u, { variant: "h2", className: "mb-8 text-center", children: t }),
-    /* @__PURE__ */ e(ue, { type: "single", collapsible: !0, className: "w-full", children: a.map((n, d) => /* @__PURE__ */ i(_, { value: `item-${d}`, children: [
-      /* @__PURE__ */ e(E, { className: "font-display text-left font-semibold", children: n.question }),
-      /* @__PURE__ */ e(K, { className: "font-body text-muted-foreground", children: n.answer })
+    t && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-8 text-center", children: t }),
+    /* @__PURE__ */ e(ue, { type: "single", collapsible: !0, className: "w-full", children: n.map((a, d) => /* @__PURE__ */ i(_, { value: `item-${d}`, children: [
+      /* @__PURE__ */ e(E, { className: "font-display text-left font-semibold", children: a.question }),
+      /* @__PURE__ */ e(K, { className: "font-body text-muted-foreground", children: a.answer })
     ] }, d)) }),
     /* @__PURE__ */ e(
       "script",
@@ -405,11 +403,11 @@ const je = ({
       }
     )
   ] }) });
-}, C = k.forwardRef(
-  ({ className: t, type: a, ...r }, o) => /* @__PURE__ */ e(
+}, z = k.forwardRef(
+  ({ className: t, type: n, ...r }, o) => /* @__PURE__ */ e(
     "input",
     {
-      type: a,
+      type: n,
       className: l(
         "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
@@ -419,8 +417,8 @@ const je = ({
     }
   )
 );
-C.displayName = "Input";
-const W = k.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+z.displayName = "Input";
+const W = k.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ e(
   "textarea",
   {
     className: l(
@@ -428,68 +426,68 @@ const W = k.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
       t
     ),
     ref: r,
-    ...a
+    ...n
   }
 ));
 W.displayName = "Textarea";
-const he = B("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), z = k.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(I.Root, { ref: r, className: l(he(), t), ...a }));
-z.displayName = I.Root.displayName;
+const he = B("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), C = k.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ e(T.Root, { ref: r, className: l(he(), t), ...n }));
+C.displayName = T.Root.displayName;
 const Ae = ({
   heading: t = "Kontakt",
-  description: a,
+  description: n,
   onSubmit: r,
   className: o,
   ...s
 }) => {
-  const [n, d] = v({ name: "", email: "", message: "" }), [f, m] = v(!1), g = (p) => {
-    p.preventDefault(), r == null || r(n), m(!0);
+  const [a, d] = v({ name: "", email: "", message: "" }), [f, u] = v(!1), p = (g) => {
+    g.preventDefault(), r == null || r(a), u(!0);
   };
   return /* @__PURE__ */ e("section", { className: l("section-padding", o), ...s, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
-    /* @__PURE__ */ e(u, { variant: "h2", className: "mb-2", children: t }),
-    a && /* @__PURE__ */ e(u, { variant: "body", color: "muted", className: "mb-8", children: a }),
+    /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2", children: t }),
+    n && /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mb-8", children: n }),
     f ? /* @__PURE__ */ i("div", { className: "rounded-lg border border-success/30 bg-success/5 p-8 text-center", children: [
-      /* @__PURE__ */ e(u, { variant: "h4", color: "accent", children: "Vielen Dank für Ihre Nachricht!" }),
-      /* @__PURE__ */ e(u, { variant: "body-sm", color: "muted", className: "mt-2", children: "Wir melden uns in Kürze bei Ihnen." })
-    ] }) : /* @__PURE__ */ i("form", { onSubmit: g, className: "space-y-6", 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." })
+    ] }) : /* @__PURE__ */ i("form", { onSubmit: p, className: "space-y-6", children: [
       /* @__PURE__ */ i("div", { className: "grid gap-6 sm:grid-cols-2", children: [
         /* @__PURE__ */ i("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ e(z, { htmlFor: "name", children: "Name" }),
+          /* @__PURE__ */ e(C, { htmlFor: "name", children: "Name" }),
           /* @__PURE__ */ e(
-            C,
+            z,
             {
               id: "name",
               required: !0,
-              value: n.name,
-              onChange: (p) => d({ ...n, name: p.target.value }),
+              value: a.name,
+              onChange: (g) => d({ ...a, name: g.target.value }),
               placeholder: "Max Mustermann"
             }
           )
         ] }),
         /* @__PURE__ */ i("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ e(z, { htmlFor: "email", children: "E-Mail" }),
+          /* @__PURE__ */ e(C, { htmlFor: "email", children: "E-Mail" }),
           /* @__PURE__ */ e(
-            C,
+            z,
             {
               id: "email",
               type: "email",
               required: !0,
-              value: n.email,
-              onChange: (p) => d({ ...n, email: p.target.value }),
+              value: a.email,
+              onChange: (g) => d({ ...a, email: g.target.value }),
               placeholder: "max@beispiel.de"
             }
           )
         ] })
       ] }),
       /* @__PURE__ */ i("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ e(z, { htmlFor: "message", children: "Nachricht" }),
+        /* @__PURE__ */ e(C, { htmlFor: "message", children: "Nachricht" }),
         /* @__PURE__ */ e(
           W,
           {
             id: "message",
             required: !0,
             rows: 5,
-            value: n.message,
-            onChange: (p) => d({ ...n, message: p.target.value }),
+            value: a.message,
+            onChange: (g) => d({ ...a, message: g.target.value }),
             placeholder: "Ihre Nachricht..."
           }
         )
@@ -499,11 +497,11 @@ const Ae = ({
   ] }) });
 }, Fe = ({
   brand: t,
-  items: a,
+  items: n,
   ctaLabel: r,
   ctaHref: o = "#",
   className: s,
-  ...n
+  ...a
 }) => {
   const [d, f] = v(!1);
   return /* @__PURE__ */ i(
@@ -513,19 +511,19 @@ const Ae = ({
         "sticky top-0 z-50 border-b border-primary/20 bg-primary text-primary-foreground backdrop-blur",
         s
       ),
-      ...n,
+      ...a,
       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__ */ i("ul", { className: "hidden items-center gap-1 md:flex", children: [
-            a.map((m) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+            n.map((u) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
               "a",
               {
-                href: m.href,
+                href: u.href,
                 className: "rounded-full px-4 py-2 font-body text-sm text-primary-foreground/80 transition-fast hover:bg-primary-foreground/10 hover:text-primary-foreground",
-                children: m.label
+                children: u.label
               }
-            ) }, m.href)),
+            ) }, u.href)),
             r && /* @__PURE__ */ e("li", { className: "ml-4", children: /* @__PURE__ */ e(b, { size: "sm", className: "bg-primary-foreground text-primary hover:bg-primary-foreground/90", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: r }) }) })
           ] }),
           /* @__PURE__ */ e(
@@ -539,15 +537,15 @@ const Ae = ({
           )
         ] }),
         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((m) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+          n.map((u) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
             "a",
             {
-              href: m.href,
+              href: u.href,
               className: "block rounded-xl px-4 py-2 font-body text-sm text-primary-foreground/80 transition-fast hover:bg-primary-foreground/10 hover:text-primary-foreground",
               onClick: () => f(!1),
-              children: m.label
+              children: u.label
             }
-          ) }, m.href)),
+          ) }, u.href)),
           r && /* @__PURE__ */ e("li", { className: "pt-2", children: /* @__PURE__ */ e(b, { size: "sm", className: "w-full bg-primary-foreground text-primary hover:bg-primary-foreground/90", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: r }) }) })
         ] }) })
       ]
@@ -555,16 +553,16 @@ const Ae = ({
   );
 }, He = ({
   brand: t,
-  columns: a,
+  columns: n,
   copyright: r,
   className: o,
   ...s
 }) => /* @__PURE__ */ e("footer", { className: l("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(u, { variant: "h5", children: t }) }),
-    a.map((n) => /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(u, { 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: t }) }),
+    n.map((a) => /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ e(m, { variant: "overline", className: "mb-4", children: a.heading }),
+      /* @__PURE__ */ e("ul", { className: "space-y-2", children: a.links.map((d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
         "a",
         {
           href: d.href,
@@ -572,41 +570,41 @@ const Ae = ({
           children: d.label
         }
       ) }, d.href)) })
-    ] }, n.heading))
+    ] }, a.heading))
   ] }),
-  r && /* @__PURE__ */ e("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ e(u, { variant: "caption", children: r }) })
+  r && /* @__PURE__ */ e("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ e(m, { variant: "caption", children: r }) })
 ] }) }), fe = V.forwardRef(
-  ({ className: t, onSearch: a, ...r }, o) => /* @__PURE__ */ i("div", { className: l("relative", t), children: [
+  ({ className: t, onSearch: n, ...r }, o) => /* @__PURE__ */ i("div", { className: l("relative", t), children: [
     /* @__PURE__ */ e(te, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
     /* @__PURE__ */ e(
-      C,
+      z,
       {
         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
       }
     )
   ] })
 );
 fe.displayName = "SearchBar";
-const Se = ({ items: t, className: a, ...r }) => {
+const Re = ({ items: t, className: n, ...r }) => {
   const o = {
     "@context": "https://schema.org",
     "@type": "BreadcrumbList",
-    itemListElement: t.map((s, n) => ({
+    itemListElement: t.map((s, a) => ({
       "@type": "ListItem",
-      position: n + 1,
+      position: a + 1,
       name: s.label,
       ...s.href ? { item: s.href } : {}
     }))
   };
-  return /* @__PURE__ */ i("nav", { "aria-label": "Breadcrumb", className: l("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: l("font-body text-sm", n), ...r, children: [
+    /* @__PURE__ */ e("ol", { className: "flex items-center gap-1", children: t.map((s, a) => /* @__PURE__ */ i("li", { className: "flex items-center gap-1", children: [
+      a > 0 && /* @__PURE__ */ e(ae, { className: "h-3 w-3 text-muted-foreground" }),
+      s.href && a < 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 })
+    ] }, a)) }),
     /* @__PURE__ */ e(
       "script",
       {
@@ -689,32 +687,32 @@ const Se = ({ items: t, className: a, ...r }) => {
     ctaLabel: "Zum Angebot",
     ctaHref: "#"
   }
-], Re = ({
+], Se = ({
   heading: t = "Cloud-Speicher erweitern",
-  subheading: a = "Wählen Sie den passenden Tarif für Ihre Bedürfnisse",
+  subheading: n = "Wählen Sie den passenden Tarif für Ihre Bedürfnisse",
   plans: r = ge,
   defaultOpenId: o = "100gb",
   defaultBilling: s = "yearly",
-  className: n,
+  className: a,
   ...d
 }) => {
-  const [f, m] = v(o), [g, p] = v(s), [y, N] = v(!1), h = r.some((c) => c.hidden), j = y ? r : r.filter((c) => !c.hidden), A = (c) => {
-    m((x) => x === c ? null : c);
-  }, F = (c) => g === "yearly" ? c.yearlyPrice : c.monthlyPrice, O = (c) => {
+  const [f, u] = v(o), [p, g] = v(s), [y, N] = v(!1), h = r.some((c) => c.hidden), j = y ? r : r.filter((c) => !c.hidden), A = (c) => {
+    u((x) => x === c ? null : c);
+  }, F = (c) => p === "yearly" ? c.yearlyPrice : c.monthlyPrice, O = (c) => {
     const x = c.monthlyPrice - c.yearlyPrice;
     return x > 0 ? Math.round(x / c.monthlyPrice * 100) : 0;
   };
-  return /* @__PURE__ */ e("section", { className: l("section-padding", n), ...d, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
-    t && /* @__PURE__ */ e(u, { variant: "h2", className: "mb-2 text-center", children: t }),
-    a && /* @__PURE__ */ e(u, { variant: "body", tone: "muted", className: "mb-8 text-center", children: a }),
+  return /* @__PURE__ */ e("section", { className: l("section-padding", a), ...d, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
+    t && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2 text-center", children: t }),
+    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",
         {
-          onClick: () => p("monthly"),
+          onClick: () => g("monthly"),
           className: l(
             "rounded-lg px-5 py-2.5 font-body text-sm font-medium transition-fast",
-            g === "monthly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            p === "monthly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
           ),
           children: "Monatlich kündbar"
         }
@@ -722,10 +720,10 @@ const Se = ({ items: t, className: a, ...r }) => {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => p("yearly"),
+          onClick: () => g("yearly"),
           className: l(
             "rounded-lg px-5 py-2.5 font-body text-sm font-medium transition-fast",
-            g === "yearly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            p === "yearly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
           ),
           children: "12 Monate Laufzeit"
         }
@@ -758,7 +756,7 @@ const Se = ({ items: t, className: a, ...r }) => {
                     }
                   ),
                   /* @__PURE__ */ i("div", { className: "flex items-center gap-3 min-w-0", children: [
-                    /* @__PURE__ */ e(u, { variant: "h4", className: "whitespace-nowrap", children: c.storage }),
+                    /* @__PURE__ */ e(m, { variant: "h4", className: "whitespace-nowrap", children: c.storage }),
                     c.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(oe, { className: "h-3 w-3" }),
                       c.badge
@@ -782,7 +780,7 @@ const Se = ({ items: t, className: a, ...r }) => {
                       }
                     ),
                     /* @__PURE__ */ e(
-                      R,
+                      S,
                       {
                         className: l(
                           "h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200",
@@ -802,8 +800,8 @@ const Se = ({ items: t, className: a, ...r }) => {
                   x ? "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: [
-                  g === "monthly" && D > 0 && /* @__PURE__ */ i(
-                    u,
+                  p === "monthly" && D > 0 && /* @__PURE__ */ i(
+                    m,
                     {
                       variant: "body-sm",
                       className: "mb-4 text-primary font-medium",
@@ -844,7 +842,7 @@ const Se = ({ items: t, className: a, ...r }) => {
         children: [
           y ? "Weniger Tarife" : "Weitere Tarife",
           /* @__PURE__ */ e(
-            R,
+            S,
             {
               className: l(
                 "h-4 w-4 transition-transform duration-200",
@@ -855,20 +853,20 @@ const Se = ({ items: t, className: a, ...r }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e(u, { variant: "caption", className: "mt-6 block text-center", children: "Alle Preise inkl. MwSt. Kündigung bis 4 Wochen zum Ende der Vertragslaufzeit möglich." })
+    /* @__PURE__ */ e(m, { variant: "caption", className: "mt-6 block text-center", children: "Alle Preise inkl. MwSt. Kündigung bis 4 Wochen zum Ende der Vertragslaufzeit möglich." })
   ] }) });
 }, Ve = ({
   items: t,
-  defaultActiveId: a,
+  defaultActiveId: n,
   variant: r = "underline",
   onTabChange: o,
   className: s,
-  ...n
+  ...a
 }) => {
   var N;
-  const [d, f] = v(a || ((N = t[0]) == null ? void 0 : N.id)), m = (h) => {
+  const [d, f] = v(n || ((N = t[0]) == null ? void 0 : N.id)), u = (h) => {
     f(h), o == null || o(h);
-  }, g = t.find((h) => h.id === d), y = {
+  }, p = t.find((h) => h.id === d), y = {
     underline: {
       list: "border-b border-border",
       tab: (h) => l(
@@ -891,7 +889,7 @@ const Se = ({ items: t, className: a, ...r }) => {
       )
     }
   }[r];
-  return /* @__PURE__ */ i("div", { className: l("w-full", s), ...n, children: [
+  return /* @__PURE__ */ i("div", { className: l("w-full", s), ...a, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -903,7 +901,7 @@ const Se = ({ items: t, className: a, ...r }) => {
             role: "tab",
             "aria-selected": h.id === d,
             "aria-controls": `tabpanel-${h.id}`,
-            onClick: () => m(h.id),
+            onClick: () => u(h.id),
             className: y.tab(h.id === d),
             children: h.label
           },
@@ -917,7 +915,7 @@ const Se = ({ items: t, className: a, ...r }) => {
         role: "tabpanel",
         id: `tabpanel-${d}`,
         className: "pt-4",
-        children: g == null ? void 0 : g.content
+        children: p == null ? void 0 : p.content
       }
     )
   ] });
@@ -931,27 +929,27 @@ const Se = ({ items: t, className: a, ...r }) => {
   }
 }), pe = () => X(q), De = ({
   children: t,
-  defaultBrand: a = "default"
+  defaultBrand: n = "default"
 }) => {
   const [r, o] = v(
-    P.find((n) => n.id === a) || P[0]
-  ), s = U((n) => {
-    const d = P.find((f) => f.id === n);
+    P.find((a) => a.id === n) || P[0]
+  ), s = U((a) => {
+    const d = P.find((f) => f.id === a);
     d && o(d);
   }, []);
-  return T(() => {
-    const n = document.documentElement;
-    return r.id === "default" ? n.removeAttribute("data-brand") : n.setAttribute("data-brand", r.id), () => n.removeAttribute("data-brand");
+  return I(() => {
+    const a = document.documentElement;
+    return r.id === "default" ? a.removeAttribute("data-brand") : a.setAttribute("data-brand", r.id), () => a.removeAttribute("data-brand");
   }, [r]), /* @__PURE__ */ e(q.Provider, { value: { brand: r, setBrand: s }, children: t });
 }, Me = ({ className: t }) => {
-  const { brand: a, setBrand: r } = pe();
+  const { brand: n, setBrand: r } = pe();
   return /* @__PURE__ */ e("div", { className: l("flex items-center gap-1 rounded-xl border border-border bg-muted p-1", t), children: P.map((o) => /* @__PURE__ */ e(
     "button",
     {
       onClick: () => r(o.id),
       className: l(
         "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
     },
@@ -962,18 +960,18 @@ export {
   ce as Badge,
   De as BrandProvider,
   Me as BrandSwitcher,
-  Se as Breadcrumb,
+  Re as Breadcrumb,
   Ae as ContactForm,
   Be as ContentCard,
   je as FaqAccordion,
   He as Footer,
-  ze as Hero,
-  Ce as ImageTextTeaser,
+  Ce as Hero,
+  ze as ImageTextTeaser,
   Fe as Navbar,
   fe as SearchBar,
   Ve as Tabs,
-  Re as TariffSelect,
-  u as Typography,
+  Se as TariffSelect,
+  m as Typography,
   P as brands,
   pe as useBrand
 };