@definable/ui 0.1.31 → 0.1.35

package/dist/components/alert-dialog.js

@@ -1,32 +1,32 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
-import { Button as c } from "./button.js";
+import { jsx as l, jsxs as i } from "react/jsx-runtime";
+import { Button as m } from "./button.js";
 import { Modal as v } from "./modal.js";
 const w = ({
   open: e = !1,
   onOpenChange: s,
-  title: i,
-  description: m,
+  title: c,
+  description: d,
   cancelText: a = "Cancel",
   actionText: f = "Continue",
   onCancel: t,
   onAction: r,
-  actionVariant: u = "default",
-  className: x
+  actionVariant: x = "default",
+  className: u
 }) => /* @__PURE__ */ l(
   v,
   {
     isOpen: e,
     onClose: () => s == null ? void 0 : s(!1),
     size: "sm",
-    className: x,
-    children: /* @__PURE__ */ d("div", { className: "space-y-4 p-6", children: [
-      /* @__PURE__ */ d("div", { className: "space-y-2", children: [
-        i && /* @__PURE__ */ l("h2", { className: "text-lg font-semibold", children: i }),
-        m && /* @__PURE__ */ l("p", { className: "text-sm text-muted-foreground", children: m })
+    className: u,
+    children: /* @__PURE__ */ i("div", { className: "space-y-4 p-6", children: [
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+        c && /* @__PURE__ */ l("h2", { className: "text-lg font-semibold", children: c }),
+        d && /* @__PURE__ */ l("p", { className: "text-sm text-tertiary", children: d })
       ] }),
-      /* @__PURE__ */ d("div", { className: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4", children: [
+      /* @__PURE__ */ i("div", { className: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4", children: [
         /* @__PURE__ */ l(
-          c,
+          m,
           {
             variant: "outline",
             onClick: () => {
@@ -37,9 +37,9 @@ const w = ({
           }
         ),
         /* @__PURE__ */ l(
-          c,
+          m,
           {
-            variant: u === "destructive" ? "destructive" : "default",
+            variant: x === "destructive" ? "destructive" : "default",
             onClick: () => {
               r == null || r(), s == null || s(!1);
             },

package/dist/components/alert.js

@@ -1,63 +1,63 @@
 import { jsx as a } from "react/jsx-runtime";
-import * as i from "react";
-import { cva as p } from "class-variance-authority";
-import { cn as d } from "../lib/utils.js";
+import * as d from "react";
+import { cva as u } from "class-variance-authority";
+import { cn as i } from "../lib/utils.js";
 import { ConfirmationModal as v } from "./confirmation-modal.js";
-const g = p(
+const g = u(
   "relative w-full rounded-lg border p-4",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive"
+        default: "bg-secondary text-primary",
+        destructive: "border-red-500/50 text-red-500 dark:border-red-500"
       }
     },
     defaultVariants: {
       variant: "default"
     }
   }
-), b = i.forwardRef(({ className: t, variant: r, isOpen: e, onClose: o, onConfirm: l, title: s, description: n, confirmText: m, cancelText: c, ...f }, u) => e !== void 0 && o && l && s && n ? /* @__PURE__ */ a(
+), x = d.forwardRef(({ className: t, variant: r, isOpen: e, onClose: o, onConfirm: l, title: m, description: n, confirmText: s, cancelText: f, ...c }, p) => e !== void 0 && o && l && m && n ? /* @__PURE__ */ a(
   v,
   {
     isOpen: e,
     onClose: o,
     onConfirm: l,
-    title: s,
+    title: m,
     description: n,
-    confirmText: m,
-    cancelText: c,
+    confirmText: s,
+    cancelText: f,
     type: r === "destructive" ? "danger" : "warning"
   }
 ) : /* @__PURE__ */ a(
   "div",
   {
-    ref: u,
+    ref: p,
     role: "alert",
-    className: d(g({ variant: r }), t),
-    ...f
+    className: i(g({ variant: r }), t),
+    ...c
   }
 ));
-b.displayName = "Alert";
-const x = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
+x.displayName = "Alert";
+const y = d.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "h5",
   {
     ref: e,
-    className: d("mb-1 font-medium leading-none tracking-tight", t),
+    className: i("mb-1 font-medium leading-none tracking-tight", t),
     ...r
   }
 ));
-x.displayName = "AlertTitle";
-const A = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
+y.displayName = "AlertTitle";
+const A = d.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
-    className: d("text-sm [&_p]:leading-relaxed", t),
+    className: i("text-sm [&_p]:leading-relaxed", t),
     ...r
   }
 ));
 A.displayName = "AlertDescription";
 export {
-  b as Alert,
+  x as Alert,
   A as AlertDescription,
-  x as AlertTitle
+  y as AlertTitle
 };

package/dist/components/avatar.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import * as t from "react";
 import { cn as f } from "../lib/utils.js";
-const o = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ l(
+const s = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ l(
   "div",
   {
     ref: r,
@@ -12,8 +12,8 @@ const o = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ l(
     ...e
   }
 ));
-o.displayName = "Avatar";
-const s = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ l(
+s.displayName = "Avatar";
+const o = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ l(
   "img",
   {
     ref: r,
@@ -21,13 +21,13 @@ const s = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ l(
     ...e
   }
 ));
-s.displayName = "AvatarImage";
+o.displayName = "AvatarImage";
 const m = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ l(
   "div",
   {
     ref: r,
     className: f(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground",
+      "flex h-full w-full items-center justify-center rounded-full bg-hover text-tertiary",
       a
     ),
     ...e
@@ -35,7 +35,7 @@ const m = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ l(
 ));
 m.displayName = "AvatarFallback";
 export {
-  o as Avatar,
+  s as Avatar,
   m as AvatarFallback,
-  s as AvatarImage
+  o as AvatarImage
 };

package/dist/components/badge.js

@@ -1,15 +1,15 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
-import { cn as a } from "../lib/utils.js";
+import { cn as o } from "../lib/utils.js";
 const i = n(
-  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-black/20 dark:focus:ring-white/20 focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground"
+        default: "border-transparent bg-primary text-white hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-primary hover:bg-secondary/80",
+        destructive: "border-transparent bg-red-500 text-white hover:bg-red-500/80",
+        outline: "text-primary"
       }
     },
     defaultVariants: {
@@ -17,10 +17,10 @@ const i = n(
     }
   }
 );
-function c({ className: r, variant: e, ...t }) {
-  return /* @__PURE__ */ o("div", { className: a(i({ variant: e }), r), ...t });
+function f({ className: r, variant: t, ...e }) {
+  return /* @__PURE__ */ a("div", { className: o(i({ variant: t }), r), ...e });
 }
 export {
-  c as Badge,
+  f as Badge,
   i as badgeVariants
 };

package/dist/components/button.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, ButtonHTMLAttributes } from 'react';
-type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'brand';
 type ButtonSize = 'icon' | 'sm' | 'md' | 'lg';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;

package/dist/components/button.js

@@ -1,54 +1,56 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
+import { forwardRef as k } from "react";
 const x = {
   icon: "p-0",
   sm: "px-2.5 py-1 text-[12px]",
   md: "px-4 py-1.5 text-[13px]",
   lg: "px-5 py-2 text-[14px]"
-}, b = m(({
+}, b = k(({
   variant: o = "primary",
-  size: s = "md",
-  children: c,
-  leftIcon: d,
-  rightIcon: l,
+  size: d = "md",
+  children: s,
+  leftIcon: c,
+  rightIcon: i,
   isLoading: r = !1,
   fullWidth: n = !1,
-  className: i = "",
+  className: l = "",
   disabled: e,
-  ...p
-}, h) => /* @__PURE__ */ t(
+  ...h
+}, p) => /* @__PURE__ */ t(
   "button",
   {
-    ref: h,
+    ref: p,
     className: `
         inline-flex items-center justify-center gap-2 font-medium rounded
         transition-all duration-200 active:scale-95
         ${(() => {
       switch (o) {
         case "primary":
-          return "bg-black hover:bg-black/90 dark:bg-blue-600 dark:hover:bg-blue-700 text-white";
+          return "bg-black hover:bg-black/90 dark:bg-white dark:hover:bg-white/90 text-white dark:text-black";
         case "secondary":
           return "bg-secondary dark:bg-dark-secondary border-light dark:border-dark text-primary dark:text-dark-primary hover:bg-hover dark:hover:bg-dark-hover";
         case "ghost":
           return "text-secondary dark:text-dark-secondary hover:text-primary dark:hover:text-dark-primary hover:bg-hover dark:hover:bg-dark-hover";
         case "outline":
-          return "border border-light bg-card text-foreground hover:bg-muted/50";
+          return "border border-light dark:border-dark bg-card text-primary dark:text-dark-primary hover:bg-hover dark:hover:bg-dark-hover";
+        case "brand":
+          return "bg-brand hover:opacity-90 text-white";
       }
     })()}
-        ${x[s]}
+        ${x[d]}
         ${n ? "w-full" : ""}
         ${e || r ? "opacity-50 cursor-not-allowed" : ""}
-        ${i}
+        ${l}
       `,
     disabled: e || r,
-    ...p,
+    ...h,
     children: [
       r ? /* @__PURE__ */ t("svg", { className: "animate-spin w-4 h-4", fill: "none", viewBox: "0 0 24 24", children: [
         /* @__PURE__ */ a("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
         /* @__PURE__ */ a("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-      ] }) : d,
-      c,
-      !r && l
+      ] }) : c,
+      s,
+      !r && i
     ]
   }
 ));

package/dist/components/calendar.js

@@ -1,10 +1,10 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import * as p from "react";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import * as y from "react";
 import { ChevronLeft as k, ChevronRight as A } from "lucide-react";
 import { DateTime as o } from "luxon";
-import { Button as y } from "./button.js";
-import { cn as g } from "../lib/utils.js";
-const j = p.forwardRef(
+import { Button as p } from "./button.js";
+import { cn as v } from "../lib/utils.js";
+const j = y.forwardRef(
   ({
     className: x,
     mode: T = "single",
@@ -13,29 +13,29 @@ const j = p.forwardRef(
     disabled: s,
     fromDate: m,
     toDate: c,
-    ...v
+    ...w
   }, D) => {
-    const [a, u] = p.useState(() => e && !Array.isArray(e) ? o.fromJSDate(e) : o.local()), d = (r) => e ? Array.isArray(e) ? e.some(
+    const [a, l] = y.useState(() => e && !Array.isArray(e) ? o.fromJSDate(e) : o.local()), h = (r) => e ? Array.isArray(e) ? e.some(
       (n) => o.fromJSDate(n).hasSame(r, "day")
-    ) : o.fromJSDate(e).hasSame(r, "day") : !1, M = (r) => r.hasSame(o.local(), "day"), l = (r) => s ? s(r.toJSDate()) : !!(m && r < o.fromJSDate(m) || c && r > o.fromJSDate(c)), N = () => {
-      u((r) => r.minus({ months: 1 }));
-    }, w = () => {
-      u((r) => r.plus({ months: 1 }));
+    ) : o.fromJSDate(e).hasSame(r, "day") : !1, M = (r) => r.hasSame(o.local(), "day"), u = (r) => s ? s(r.toJSDate()) : !!(m && r < o.fromJSDate(m) || c && r > o.fromJSDate(c)), N = () => {
+      l((r) => r.minus({ months: 1 }));
+    }, g = () => {
+      l((r) => r.plus({ months: 1 }));
     }, S = (r) => {
-      l(r) || i == null || i(r.toJSDate());
+      u(r) || i == null || i(r.toJSDate());
     };
     a.daysInMonth;
-    const f = a.startOf("month"), C = f.minus({ days: f.weekday % 7 }), J = Array.from({ length: 42 }, (r, n) => C.plus({ days: n }));
-    return /* @__PURE__ */ h(
+    const d = a.startOf("month"), C = d.minus({ days: d.weekday % 7 }), J = Array.from({ length: 42 }, (r, n) => C.plus({ days: n }));
+    return /* @__PURE__ */ f(
       "div",
       {
         ref: D,
-        className: g("w-full p-3 space-y-4", x),
-        ...v,
+        className: v("w-full p-3 space-y-4", x),
+        ...w,
         children: [
-          /* @__PURE__ */ h("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ f("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ t(
-              y,
+              p,
               {
                 variant: "outline",
                 size: "icon",
@@ -46,28 +46,28 @@ const j = p.forwardRef(
             ),
             /* @__PURE__ */ t("div", { className: "font-medium", children: a.toFormat("MMMM yyyy") }),
             /* @__PURE__ */ t(
-              y,
+              p,
               {
                 variant: "outline",
                 size: "icon",
-                onClick: w,
+                onClick: g,
                 className: "h-7 w-7",
                 children: /* @__PURE__ */ t(A, { className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center text-xs leading-6 text-muted-foreground", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((r, n) => /* @__PURE__ */ t("div", { children: r }, n)) }),
+          /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center text-xs leading-6 text-tertiary", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((r, n) => /* @__PURE__ */ t("div", { children: r }, n)) }),
           /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center", children: J.map((r, n) => {
             const b = r.month === a.month;
             return /* @__PURE__ */ t(
               "div",
               {
-                className: g(
+                className: v(
                   "h-9 w-9 p-0 font-normal flex items-center justify-center",
-                  !b && "text-muted-foreground opacity-50",
-                  d(r) && "bg-primary text-primary-foreground rounded-md",
-                  M(r) && !d(r) && "border border-primary rounded-md",
-                  l(r) ? "text-muted-foreground opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-accent rounded-md"
+                  !b && "text-tertiary opacity-50",
+                  h(r) && "bg-primary text-white rounded-md",
+                  M(r) && !h(r) && "border border-primary rounded-md",
+                  u(r) ? "text-tertiary opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-hover rounded-md"
                 ),
                 onClick: () => S(r),
                 children: r.day

package/dist/components/card.js

@@ -1,61 +1,61 @@
-import { jsx as d } from "react/jsx-runtime";
-import * as o from "react";
-import { cn as t } from "../lib/utils.js";
-const s = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+import { jsx as t } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as o } from "../lib/utils.js";
+const s = d.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
   "div",
   {
     ref: r,
-    className: t(
-      "rounded-lg border-border/50 bg-card text-card-foreground ",
-      e
+    className: o(
+      "rounded-lg border-light bg-card text-primary ",
+      a
     ),
-    ...a
+    ...e
   }
 ));
 s.displayName = "Card";
-const i = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const i = d.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
   "div",
   {
     ref: r,
-    className: t("flex flex-col space-y-1.5 p-6", e),
-    ...a
+    className: o("flex flex-col space-y-1.5 p-6", a),
+    ...e
   }
 ));
 i.displayName = "CardHeader";
-const c = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const l = d.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
   "h3",
   {
     ref: r,
-    className: t("text-lg font-semibold leading-none tracking-tight", e),
-    ...a
+    className: o("text-lg font-semibold leading-none tracking-tight", a),
+    ...e
   }
 ));
-c.displayName = "CardTitle";
-const l = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+l.displayName = "CardTitle";
+const m = d.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
   "p",
   {
     ref: r,
-    className: t("text-sm text-muted-foreground", e),
-    ...a
+    className: o("text-sm text-tertiary", a),
+    ...e
   }
 ));
-l.displayName = "CardDescription";
-const m = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d("div", { ref: r, className: t("p-6 pt-0", e), ...a }));
-m.displayName = "CardContent";
-const n = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+m.displayName = "CardDescription";
+const c = d.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: o("p-6 pt-0", a), ...e }));
+c.displayName = "CardContent";
+const n = d.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
   "div",
   {
     ref: r,
-    className: t("flex items-center p-6 pt-0", e),
-    ...a
+    className: o("flex items-center p-6 pt-0", a),
+    ...e
   }
 ));
 n.displayName = "CardFooter";
 export {
   s as Card,
-  m as CardContent,
-  l as CardDescription,
+  c as CardContent,
+  m as CardDescription,
   n as CardFooter,
   i as CardHeader,
-  c as CardTitle
+  l as CardTitle
 };

package/dist/components/carousel.js

@@ -1,23 +1,23 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
 import { useState as c, useEffect as C } from "react";
-import { AnimatePresence as I, motion as p } from "framer-motion";
+import { AnimatePresence as I, motion as g } from "framer-motion";
 function E({
-  slides: n,
-  interval: i = 5e3,
+  slides: a,
+  interval: n = 5e3,
   showIndicators: b = !0,
   className: x = ""
 }) {
-  const [a, o] = c(0), [u, s] = c(0), [d, m] = c(!1);
+  const [r, o] = c(0), [m, s] = c(0), [u, d] = c(!1);
   C(() => {
-    if (d) return;
-    const e = setInterval(() => {
-      s(1), o((t) => (t + 1) % n.length);
-    }, i);
-    return () => clearInterval(e);
-  }, [i, n.length, d]);
+    if (u) return;
+    const t = setInterval(() => {
+      s(1), o((e) => (e + 1) % a.length);
+    }, n);
+    return () => clearInterval(t);
+  }, [n, a.length, u]);
   const y = {
-    enter: (e) => ({
-      x: e > 0 ? 1e3 : -1e3,
+    enter: (t) => ({
+      x: t > 0 ? 1e3 : -1e3,
       opacity: 0
     }),
     center: {
@@ -25,23 +25,23 @@ function E({
       x: 0,
       opacity: 1
     },
-    exit: (e) => ({
+    exit: (t) => ({
       zIndex: 0,
-      x: e < 0 ? 1e3 : -1e3,
+      x: t < 0 ? 1e3 : -1e3,
       opacity: 0
     })
-  }, f = 1e4, v = (e, t) => Math.abs(e) * t, g = (e) => {
-    s(e), o((t) => (t + e + n.length) % n.length);
-  }, N = (e) => {
-    m(!0);
-    const t = e > a ? 1 : -1;
-    s(t), o(e), setTimeout(() => m(!1), i);
+  }, f = 1e4, v = (t, e) => Math.abs(t) * e, p = (t) => {
+    s(t), o((e) => (e + t + a.length) % a.length);
+  }, N = (t) => {
+    d(!0);
+    const e = t > r ? 1 : -1;
+    s(e), o(t), setTimeout(() => d(!1), n);
   };
   return /* @__PURE__ */ l("div", { className: `relative overflow-hidden ${x}`, children: [
-    /* @__PURE__ */ r(I, { initial: !1, custom: u, children: /* @__PURE__ */ l(
-      p.div,
+    /* @__PURE__ */ i(I, { initial: !1, custom: m, children: /* @__PURE__ */ l(
+      g.div,
       {
-        custom: u,
+        custom: m,
         variants: y,
         initial: "enter",
         animate: "center",
@@ -53,45 +53,45 @@ function E({
         drag: "x",
         dragConstraints: { left: 0, right: 0 },
         dragElastic: 1,
-        onDragEnd: (e, { offset: t, velocity: w }) => {
-          const h = v(t.x, w.x);
-          h < -f ? g(1) : h > f && g(-1);
+        onDragEnd: (t, { offset: e, velocity: w }) => {
+          const h = v(e.x, w.x);
+          h < -f ? p(1) : h > f && p(-1);
         },
         className: "absolute inset-0",
         children: [
-          /* @__PURE__ */ r("div", { className: "absolute inset-0 bg-gradient-to-b from-primary/20", children: /* @__PURE__ */ r(
+          /* @__PURE__ */ i("div", { className: "absolute inset-0 bg-gradient-to-b from-primary/20", children: /* @__PURE__ */ i(
             "img",
             {
-              src: n[a].image,
+              src: a[r].image,
               alt: "carousel",
               className: "w-full h-full object-cover"
             }
           ) }),
-          /* @__PURE__ */ r("div", { className: "absolute bottom-20 left-8 text-foreground", children: /* @__PURE__ */ l(
-            p.h1,
+          /* @__PURE__ */ i("div", { className: "absolute bottom-20 left-8 text-primary", children: /* @__PURE__ */ l(
+            g.h1,
             {
               className: "text-4xl font-semibold",
               initial: { y: 20, opacity: 0 },
               animate: { y: 0, opacity: 1 },
               transition: { delay: 0.2 },
               children: [
-                n[a].title,
-                /* @__PURE__ */ r("br", {}),
-                n[a].subtitle
+                a[r].title,
+                /* @__PURE__ */ i("br", {}),
+                a[r].subtitle
               ]
             }
           ) })
         ]
       },
-      a
+      r
     ) }),
-    b && /* @__PURE__ */ r("div", { className: "absolute bottom-8 left-8 flex gap-2 z-10", children: n.map((e, t) => /* @__PURE__ */ r(
+    b && /* @__PURE__ */ i("div", { className: "absolute bottom-8 left-8 flex gap-2 z-10", children: a.map((t, e) => /* @__PURE__ */ i(
       "button",
       {
-        onClick: () => N(t),
-        className: `w-8 h-1 rounded-full transition-all duration-300 ${t === a ? "bg-foreground" : "bg-foreground/30 hover:bg-foreground/50"}`
+        onClick: () => N(e),
+        className: `w-8 h-1 rounded-full transition-all duration-300 ${e === r ? "bg-primary" : "bg-primary/30 hover:bg-primary/50"}`
       },
-      t
+      e
     )) })
   ] });
 }