@reblu/site-blocks 0.18.0 → 0.20.0

package/dist/client.js

@@ -183,7 +183,7 @@ function Collection({
     ] })
   ] });
 }
-var PAGE_BTN_CLASS = "inline-flex h-9 items-center rounded-md border border-border px-4 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var PAGE_BTN_CLASS = "inline-flex h-9 cursor-pointer items-center rounded-md border border-border px-4 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 function FacetChip({ label, pressed, color, onClick }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -193,7 +193,7 @@ function FacetChip({ label, pressed, color, onClick }) {
       onClick,
       style: color ? { "--facet-color": color } : void 0,
       className: cn(
-        "inline-flex items-center rounded-full border px-3 py-1 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "inline-flex cursor-pointer items-center rounded-full border px-3 py-1 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         pressed ? color ? "border-transparent bg-[var(--facet-color)] text-white" : "border-transparent bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
       ),
       children: label
@@ -278,7 +278,7 @@ function ShareButtons({ url, title, className, labels }) {
       {
         type: "button",
         onClick: handleCopy,
-        className: cn2(LINK_CLASS, "w-auto gap-2 px-3", copied && "border-primary text-primary"),
+        className: cn2(LINK_CLASS, "w-auto cursor-pointer gap-2 px-3", copied && "border-primary text-primary"),
         "aria-label": t.copy,
         children: [
           copied ? /* @__PURE__ */ jsx2(CheckIcon, {}) : /* @__PURE__ */ jsx2(CopyIcon, {}),
@@ -399,7 +399,7 @@ function AddToCartButton({
       "data-slot": "add-to-cart-button",
       "data-status": status,
       className: cn3(
-        "inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         isDisabled ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
         status === "error" && "bg-destructive text-destructive-foreground",
         className
@@ -415,7 +415,7 @@ import { cn as cn4 } from "@reblu/site-ui/utils";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_LABELS4 = {
   cart: "Carrito",
-  itemsSuffix: (count) => `${count} art\xEDculo${count === 1 ? "" : "s"}`
+  itemsSuffix: (count2) => `${count2} art\xEDculo${count2 === 1 ? "" : "s"}`
 };
 var BUMP_DURATION_MS = 400;
 function CartIcon({ itemCount, href, hydrated, bumpOnAdd, labels, className }) {
@@ -484,13 +484,404 @@ function CartIcon({ itemCount, href, hydrated, bumpOnAdd, labels, className }) {
   );
 }
 
-// src/components/data-request-form.tsx
-import { useEffect as useEffect3, useId, useRef as useRef3, useState as useState5 } from "react";
+// src/components/product-carousel.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useId, useRef as useRef3, useState as useState5 } from "react";
+import { buttonVariants } from "@reblu/site-ui/button-variants";
+import { cn as cn6 } from "@reblu/site-ui/utils";
+
+// src/components/_heading.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Heading({
+  level,
+  className,
+  children
+}) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx5(Tag, { className, children });
+}
+
+// src/components/product-card.tsx
 import { cn as cn5 } from "@reblu/site-ui/utils";
+
+// src/lib/format-price.ts
+function formatPrice(cents, currency = "EUR", locale = "es-ES") {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency
+  }).format(cents / 100);
+}
+
+// src/components/product-card.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function ProductCard({ product, href, currencyCode = "EUR", locale, className }) {
+  const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
+  const hasDiscount = product.comparePrice != null && product.comparePrice > product.price;
+  return /* @__PURE__ */ jsxs4(
+    "article",
+    {
+      className: cn5(
+        "group flex flex-col overflow-hidden rounded-lg border bg-card transition-shadow hover:shadow-lg",
+        className
+      ),
+      "data-slot": "product-card",
+      children: [
+        /* @__PURE__ */ jsx6("div", { className: "relative aspect-square overflow-hidden bg-muted", children: image ? /* @__PURE__ */ jsx6(
+          "img",
+          {
+            src: image.url,
+            alt: image.alt ?? product.name,
+            loading: "lazy",
+            className: "h-full w-full object-cover transition-transform group-hover:scale-105"
+          }
+        ) : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center text-4xl text-muted-foreground/30", "aria-hidden": "true", children: "\u{1F6CD}\uFE0F" }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 flex-col gap-2 p-4", children: [
+          product.category && /* @__PURE__ */ jsx6("span", { className: "inline-flex w-fit items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground", children: product.category.name }),
+          /* @__PURE__ */ jsx6("h3", { className: "text-base font-semibold leading-tight", children: href ? /* @__PURE__ */ jsx6("a", { href, className: "transition-colors hover:text-primary", children: product.name }) : product.name }),
+          product.shortDescription && /* @__PURE__ */ jsx6("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: product.shortDescription }),
+          /* @__PURE__ */ jsxs4("div", { className: "mt-auto flex items-baseline gap-2 pt-2", children: [
+            /* @__PURE__ */ jsx6("span", { className: "text-lg font-bold text-foreground", children: formatPrice(product.price, currencyCode, locale) }),
+            hasDiscount && /* @__PURE__ */ jsx6("span", { className: "text-sm text-muted-foreground line-through", children: formatPrice(product.comparePrice, currencyCode, locale) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/product-carousel.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var DEFAULT_PRODUCT_CAROUSEL_LABELS = {
+  region: "Productos relacionados",
+  roleDescription: "carrusel",
+  previous: "Anterior",
+  next: "Siguiente"
+};
+var EDGE_EPSILON = 1;
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+}
+function ChevronIcon({ direction }) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "rtl:-scale-x-100",
+      children: /* @__PURE__ */ jsx7("path", { d: direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+    }
+  );
+}
+function ProductCarousel(props) {
+  const { products, heading, headingLevel = 2, headingClassName, labels, className, itemClassName } = props;
+  const t = { ...DEFAULT_PRODUCT_CAROUSEL_LABELS, ...labels };
+  const trackId = useId();
+  const headingId = useId();
+  const trackRef = useRef3(null);
+  const [canPrev, setCanPrev] = useState5(false);
+  const [canNext, setCanNext] = useState5(false);
+  const update = useCallback2(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    const pos = Math.abs(el.scrollLeft);
+    setCanPrev(pos > EDGE_EPSILON);
+    setCanNext(pos < max - EDGE_EPSILON);
+  }, []);
+  useEffect3(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    let observer;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(update);
+      observer.observe(el);
+    } else {
+      window.addEventListener("resize", update);
+    }
+    return () => {
+      el.removeEventListener("scroll", update);
+      if (observer) observer.disconnect();
+      else window.removeEventListener("resize", update);
+    };
+  }, [update, products.length]);
+  const scrollByPage = (direction) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const rtl = typeof getComputedStyle === "function" && getComputedStyle(el).direction === "rtl";
+    el.scrollBy({
+      left: direction * el.clientWidth * (rtl ? -1 : 1),
+      behavior: prefersReducedMotion() ? "auto" : "smooth"
+    });
+  };
+  if (products.length === 0) return null;
+  const scrollable = canPrev || canNext;
+  return /* @__PURE__ */ jsxs5("section", { "data-slot": "product-carousel", className: cn6("flex flex-col gap-4", className), children: [
+    (heading || scrollable) && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-4", children: [
+      heading ? /* @__PURE__ */ jsx7("div", { id: headingId, children: /* @__PURE__ */ jsx7(Heading, { level: headingLevel, className: headingClassName ?? "text-xl font-semibold", children: heading }) }) : /* @__PURE__ */ jsx7("span", {}),
+      scrollable && /* @__PURE__ */ jsxs5("div", { className: "hidden gap-2 sm:flex", "data-slot": "product-carousel-controls", children: [
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: cn6(buttonVariants({ variant: "outline", size: "icon" }), "rounded-full"),
+            "aria-label": t.previous,
+            "aria-controls": trackId,
+            disabled: !canPrev,
+            onClick: () => scrollByPage(-1),
+            children: /* @__PURE__ */ jsx7(ChevronIcon, { direction: "left" })
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: cn6(buttonVariants({ variant: "outline", size: "icon" }), "rounded-full"),
+            "aria-label": t.next,
+            "aria-controls": trackId,
+            disabled: !canNext,
+            onClick: () => scrollByPage(1),
+            children: /* @__PURE__ */ jsx7(ChevronIcon, { direction: "right" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref: trackRef,
+        id: trackId,
+        role: "region",
+        "aria-roledescription": t.roleDescription,
+        ...heading ? { "aria-labelledby": headingId } : { "aria-label": t.region },
+        tabIndex: 0,
+        "data-slot": "product-carousel-track",
+        className: "snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth rounded-lg pb-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:scroll-auto",
+        children: /* @__PURE__ */ jsx7("ul", { role: "list", className: "m-0 flex list-none gap-4 p-0", children: products.map((product, index) => /* @__PURE__ */ jsx7(
+          "li",
+          {
+            className: cn6(
+              "shrink-0 snap-start basis-[calc((100%-1rem)/1.5)] sm:basis-[calc((100%-2rem)/3)] lg:basis-[calc((100%-3rem)/4)]",
+              itemClassName
+            ),
+            children: props.renderProduct ? props.renderProduct(product, index) : /* @__PURE__ */ jsx7(
+              ProductCard,
+              {
+                product,
+                href: props.productHref?.(product),
+                currencyCode: props.currencyCode,
+                locale: props.locale,
+                className: "h-full"
+              }
+            )
+          },
+          product.id
+        )) })
+      }
+    )
+  ] });
+}
+
+// src/components/course-syllabus.tsx
+import { useId as useId2, useState as useState6 } from "react";
+import { cn as cn8 } from "@reblu/site-ui/utils";
+
+// src/lib/slot-class-name.ts
+import { cn as cn7 } from "@reblu/site-ui/utils";
+var MERGE_SAFE_TEXT = /(?:^|:)!?text-(?:left|center|right|justify|start|end|wrap|nowrap|balance|pretty|ellipsis|clip)$/;
+var TEXT_UTILITY = /(?:^|:)!?-?text-/;
+function bypassesMerge(token) {
+  return TEXT_UTILITY.test(token) && !MERGE_SAFE_TEXT.test(token);
+}
+function slotClassName(structural, defaults, consumer) {
+  if (consumer === void 0 || consumer.trim() === "") return cn7(structural, defaults);
+  const tokens = consumer.split(/\s+/).filter(Boolean);
+  const verbatim = tokens.filter(bypassesMerge);
+  const merged = cn7(structural, tokens.filter((token) => !bypassesMerge(token)));
+  return [merged, ...verbatim].filter(Boolean).join(" ");
+}
+
+// src/components/course-syllabus.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_COURSE_SYLLABUS_LABELS = {
+  heading: "Programa",
+  moduleSingular: "m\xF3dulo",
+  modulePlural: "m\xF3dulos",
+  lessonSingular: "lecci\xF3n",
+  lessonPlural: "lecciones",
+  freePreview: "Vista previa gratuita",
+  hours: "h",
+  minutes: "min"
+};
+var SEPARATOR = " \xB7 ";
+function count(n, singular, plural) {
+  return `${n} ${n === 1 ? singular : plural}`;
+}
+function formatDuration(seconds, labels) {
+  const totalMinutes = Math.max(1, Math.round(seconds / 60));
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  if (hours === 0) return `${minutes} ${labels.minutes}`;
+  return minutes === 0 ? `${hours} ${labels.hours}` : `${hours} ${labels.hours} ${minutes} ${labels.minutes}`;
+}
+function moduleSeconds(lessons) {
+  let total = 0;
+  for (const l of lessons) {
+    if (typeof l.durationSeconds !== "number" || l.durationSeconds <= 0) return null;
+    total += l.durationSeconds;
+  }
+  return total;
+}
+function CourseSyllabus({
+  modules,
+  labels: labelOverrides,
+  headingLevel = 2,
+  headingClassName,
+  className
+}) {
+  const labels = { ...DEFAULT_COURSE_SYLLABUS_LABELS, ...labelOverrides };
+  const baseId = useId2();
+  const [open, setOpen] = useState6(() => /* @__PURE__ */ new Set());
+  if (modules.length === 0) return null;
+  const totalLessons = modules.reduce((sum, m) => sum + (m.lessons?.length ?? 0), 0);
+  const summary = [count(modules.length, labels.moduleSingular, labels.modulePlural)];
+  if (totalLessons > 0)
+    summary.push(count(totalLessons, labels.lessonSingular, labels.lessonPlural));
+  const headingId = `${baseId}-heading`;
+  const Tag = `h${headingLevel}`;
+  function toggle(id) {
+    setOpen((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      "data-slot": "course-syllabus",
+      "aria-labelledby": headingId,
+      className: cn8("space-y-4", className),
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx8(
+            Tag,
+            {
+              id: headingId,
+              className: slotClassName("", "text-xl font-semibold", headingClassName),
+              children: labels.heading
+            }
+          ),
+          /* @__PURE__ */ jsx8("p", { "data-slot": "course-syllabus-summary", className: "text-sm text-muted-foreground", children: summary.join(SEPARATOR) })
+        ] }),
+        /* @__PURE__ */ jsx8("ol", { className: "flex list-none flex-col gap-2.5 p-0", children: modules.map((module, index) => {
+          const lessons = module.lessons ?? [];
+          const number = /* @__PURE__ */ jsx8(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold text-primary",
+              children: index + 1
+            }
+          );
+          if (lessons.length === 0) {
+            return /* @__PURE__ */ jsxs6(
+              "li",
+              {
+                "data-slot": "course-syllabus-module",
+                className: "flex items-center gap-3.5 rounded-lg border border-border bg-card px-4 py-3.5",
+                children: [
+                  number,
+                  /* @__PURE__ */ jsx8("span", { className: "font-semibold leading-snug", children: module.title })
+                ]
+              },
+              module.id
+            );
+          }
+          const isOpen = open.has(module.id);
+          const panelId = `${baseId}-module-${index}`;
+          const seconds = moduleSeconds(lessons);
+          const meta = [count(lessons.length, labels.lessonSingular, labels.lessonPlural)];
+          if (seconds !== null) meta.push(formatDuration(seconds, labels));
+          return /* @__PURE__ */ jsxs6(
+            "li",
+            {
+              "data-slot": "course-syllabus-module",
+              className: "rounded-lg border border-border bg-card",
+              children: [
+                /* @__PURE__ */ jsxs6(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    onClick: () => toggle(module.id),
+                    className: "flex w-full cursor-pointer items-center gap-3.5 rounded-lg px-4 py-3.5 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+                    children: [
+                      number,
+                      /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                        /* @__PURE__ */ jsx8("span", { className: "font-semibold leading-snug", children: module.title }),
+                        /* @__PURE__ */ jsx8("span", { className: "text-sm text-muted-foreground", children: meta.join(SEPARATOR) })
+                      ] }),
+                      /* @__PURE__ */ jsx8(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: cn8(
+                            "shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
+                            isOpen && "rotate-180"
+                          ),
+                          children: "\u25BE"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  "ol",
+                  {
+                    id: panelId,
+                    hidden: !isOpen,
+                    "data-slot": "course-syllabus-lessons",
+                    className: "list-none space-y-2 border-t border-border px-4 py-3 pl-[3.75rem]",
+                    children: lessons.map((lesson) => /* @__PURE__ */ jsxs6(
+                      "li",
+                      {
+                        "data-slot": "course-syllabus-lesson",
+                        className: "flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm",
+                        children: [
+                          /* @__PURE__ */ jsx8("span", { "data-slot": "course-syllabus-lesson-title", className: "flex-1", children: lesson.title }),
+                          lesson.isFreePreview && /* @__PURE__ */ jsx8("span", { className: "rounded-full bg-muted px-2 py-0.5 text-xs font-medium", children: labels.freePreview }),
+                          typeof lesson.durationSeconds === "number" && lesson.durationSeconds > 0 && /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground tabular-nums", children: formatDuration(lesson.durationSeconds, labels) })
+                        ]
+                      },
+                      lesson.id
+                    ))
+                  }
+                )
+              ]
+            },
+            module.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/components/data-request-form.tsx
+import { useEffect as useEffect4, useId as useId3, useRef as useRef4, useState as useState7 } from "react";
+import { cn as cn9 } from "@reblu/site-ui/utils";
 import {
   DATA_REQUEST_TYPES
 } from "@reblu/site-contracts";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DATA_REQUEST_FIELD_LIMITS = Object.freeze({ name: 200, email: 320, details: 5e3 });
 var DEFAULT_DATA_REQUEST_FORM_LABELS = {
   requestTypeLabel: "Derecho que quieres ejercer",
@@ -516,7 +907,7 @@ var DEFAULT_DATA_REQUEST_FORM_LABELS = {
   nameRequired: "Indica tu nombre.",
   emailInvalid: "Introduce un email v\xE1lido.",
   consentRequired: "Debes aceptar el tratamiento de tus datos para gestionar la solicitud.",
-  success: (deadline) => /* @__PURE__ */ jsxs4(Fragment, { children: [
+  success: (deadline) => /* @__PURE__ */ jsxs7(Fragment, { children: [
     "Hemos recibido tu solicitud. Te responderemos como m\xE1ximo el ",
     deadline,
     "."
@@ -565,18 +956,18 @@ function DataRequestForm({
     ...labels,
     requestTypes: { ...DEFAULT_DATA_REQUEST_FORM_LABELS.requestTypes, ...labels?.requestTypes }
   };
-  const id = useId();
-  const [requestType, setRequestType] = useState5("");
-  const [name, setName] = useState5("");
-  const [email, setEmail] = useState5("");
-  const [details, setDetails] = useState5("");
-  const [consent, setConsent] = useState5(false);
-  const [errors, setErrors] = useState5({});
-  const [formError, setFormError] = useState5(null);
-  const [submitting, setSubmitting] = useState5(false);
-  const [ack, setAck] = useState5(null);
-  const statusRef = useRef3(null);
-  useEffect3(() => {
+  const id = useId3();
+  const [requestType, setRequestType] = useState7("");
+  const [name, setName] = useState7("");
+  const [email, setEmail] = useState7("");
+  const [details, setDetails] = useState7("");
+  const [consent, setConsent] = useState7(false);
+  const [errors, setErrors] = useState7({});
+  const [formError, setFormError] = useState7(null);
+  const [submitting, setSubmitting] = useState7(false);
+  const [ack, setAck] = useState7(null);
+  const statusRef = useRef4(null);
+  useEffect4(() => {
     if (ack) statusRef.current?.focus();
   }, [ack]);
   async function handleSubmit(event) {
@@ -627,21 +1018,21 @@ function DataRequestForm({
       dateStyle: "long",
       timeStyle: "short"
     }).format(new Date(ack.slaDueAt));
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         ref: statusRef,
         tabIndex: -1,
         role: "status",
         "data-slot": "data-request-form-success",
-        className: cn5("rounded-lg border border-border p-6 text-sm", className),
+        className: cn9("rounded-lg border border-border p-6 text-sm", className),
         children: t.success(deadline)
       }
     );
   }
   const errorId = (field) => errors[field] ? `${id}-${field}-error` : void 0;
-  const fieldError = (field) => errors[field] ? /* @__PURE__ */ jsx5("p", { id: `${id}-${field}-error`, className: "text-xs text-destructive", children: errors[field] }) : null;
-  return /* @__PURE__ */ jsxs4(
+  const fieldError = (field) => errors[field] ? /* @__PURE__ */ jsx9("p", { id: `${id}-${field}-error`, className: "text-xs text-destructive", children: errors[field] }) : null;
+  return /* @__PURE__ */ jsxs7(
     "form",
     {
       noValidate: true,
@@ -649,11 +1040,11 @@ function DataRequestForm({
       onFocusCapture: onInteract,
       onPointerDown: onInteract,
       "data-slot": "data-request-form",
-      className: cn5("space-y-4", className),
+      className: cn9("space-y-4", className),
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx5("label", { htmlFor: `${id}-type`, className: "text-sm font-medium", children: t.requestTypeLabel }),
-          /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx9("label", { htmlFor: `${id}-type`, className: "text-sm font-medium", children: t.requestTypeLabel }),
+          /* @__PURE__ */ jsxs7(
             "select",
             {
               id: `${id}-type`,
@@ -661,18 +1052,18 @@ function DataRequestForm({
               onChange: (e) => setRequestType(e.target.value),
               "aria-invalid": errors.requestType ? true : void 0,
               "aria-describedby": errorId("requestType"),
-              className: cn5(FIELD_CLASS, errors.requestType ? "border-destructive" : "border-border"),
+              className: cn9(FIELD_CLASS, errors.requestType ? "border-destructive" : "border-border"),
               children: [
-                /* @__PURE__ */ jsx5("option", { value: "", children: t.requestTypePlaceholder }),
-                requestTypes.map((type) => /* @__PURE__ */ jsx5("option", { value: type, children: t.requestTypes[type] }, type))
+                /* @__PURE__ */ jsx9("option", { value: "", children: t.requestTypePlaceholder }),
+                requestTypes.map((type) => /* @__PURE__ */ jsx9("option", { value: type, children: t.requestTypes[type] }, type))
               ]
             }
           ),
           fieldError("requestType")
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx5("label", { htmlFor: `${id}-name`, className: "text-sm font-medium", children: t.nameLabel }),
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx9("label", { htmlFor: `${id}-name`, className: "text-sm font-medium", children: t.nameLabel }),
+          /* @__PURE__ */ jsx9(
             "input",
             {
               id: `${id}-name`,
@@ -683,14 +1074,14 @@ function DataRequestForm({
               onChange: (e) => setName(e.target.value),
               "aria-invalid": errors.name ? true : void 0,
               "aria-describedby": errorId("name"),
-              className: cn5(FIELD_CLASS, errors.name ? "border-destructive" : "border-border")
+              className: cn9(FIELD_CLASS, errors.name ? "border-destructive" : "border-border")
             }
           ),
           fieldError("name")
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx5("label", { htmlFor: `${id}-email`, className: "text-sm font-medium", children: t.emailLabel }),
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx9("label", { htmlFor: `${id}-email`, className: "text-sm font-medium", children: t.emailLabel }),
+          /* @__PURE__ */ jsx9(
             "input",
             {
               id: `${id}-email`,
@@ -701,14 +1092,14 @@ function DataRequestForm({
               onChange: (e) => setEmail(e.target.value),
               "aria-invalid": errors.email ? true : void 0,
               "aria-describedby": errorId("email"),
-              className: cn5(FIELD_CLASS, errors.email ? "border-destructive" : "border-border")
+              className: cn9(FIELD_CLASS, errors.email ? "border-destructive" : "border-border")
             }
           ),
           fieldError("email")
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx5("label", { htmlFor: `${id}-details`, className: "text-sm font-medium", children: t.detailsLabel }),
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx9("label", { htmlFor: `${id}-details`, className: "text-sm font-medium", children: t.detailsLabel }),
+          /* @__PURE__ */ jsx9(
             "textarea",
             {
               id: `${id}-details`,
@@ -717,13 +1108,13 @@ function DataRequestForm({
               value: details,
               onChange: (e) => setDetails(e.target.value),
               placeholder: t.detailsPlaceholder,
-              className: cn5(FIELD_CLASS, "border-border")
+              className: cn9(FIELD_CLASS, "border-border")
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx9(
               "input",
               {
                 id: `${id}-consent`,
@@ -735,17 +1126,17 @@ function DataRequestForm({
                 className: "mt-1"
               }
             ),
-            /* @__PURE__ */ jsx5("label", { htmlFor: `${id}-consent`, className: "text-sm text-foreground/80", children: t.consent })
+            /* @__PURE__ */ jsx9("label", { htmlFor: `${id}-consent`, className: "text-sm text-foreground/80", children: t.consent })
           ] }),
           fieldError("consent")
         ] }),
-        formError && /* @__PURE__ */ jsx5("p", { role: "alert", className: "text-sm text-destructive", children: formError }),
-        /* @__PURE__ */ jsx5(
+        formError && /* @__PURE__ */ jsx9("p", { role: "alert", className: "text-sm text-destructive", children: formError }),
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "submit",
             disabled: submitting,
-            className: "rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground disabled:opacity-60",
+            className: "cursor-pointer rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground disabled:cursor-not-allowed disabled:opacity-60",
             children: submitting ? t.submitting : t.submit
           }
         )
@@ -757,10 +1148,14 @@ export {
   AddToCartButton,
   CartIcon,
   Collection,
+  CourseSyllabus,
   DATA_REQUEST_FIELD_LIMITS,
   DATA_REQUEST_TYPES,
+  DEFAULT_COURSE_SYLLABUS_LABELS,
   DEFAULT_DATA_REQUEST_FORM_LABELS,
+  DEFAULT_PRODUCT_CAROUSEL_LABELS,
   DataRequestForm,
+  ProductCarousel,
   ShareButtons,
   useCollection
 };