@reblu/site-blocks 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @reblu/site-blocks
 
+## 0.16.0
+
+### Minor Changes
+
+- af425de: REB-1005 / REB-1002 / REB-1003:
+  - `DATA_REQUEST_TYPES` now comes from `@reblu/site-contracts` (same value, still exported from `./client`, now also from the server-safe root entry). New `DATA_REQUEST_FIELD_LIMITS` export.
+  - `DataRequestForm`: focus moves to the first invalid field on a validation error and to the success status after a submission; the inputs carry `maxLength` at the server limits (name 200, email 320, details 5000).
+  - `TrustBadges`: optional `heading` + `headingId` render a `<section aria-labelledby>` landmark with the group headings one level below; new `sectionHeadingClassName`.
+  - `TrustBadges` renders a logo only when its URL is http(s) or root-relative — any other scheme shows the badge name instead.
+  - **BREAKING (visual):** `TrustBadges`' `headingClassName` now follows the REB-997 slot rule: it REPLACES the default `text-sm font-semibold uppercase tracking-widest` instead of merging with it. If you pass `headingClassName`, include the full typography you want.
+
+### Patch Changes
+
+- Updated dependencies [af425de]
+  - @reblu/site-contracts@1.17.0
+
+## 0.15.0
+
+### Minor Changes
+
+- cc4e14e: REB-980: add `DataRequestForm` to `@reblu/site-blocks/client` — the drop-in public GDPR rights form (request type, name, email, optional message, consent checkbox). Requires a reCAPTCHA token from `getCaptchaToken` and never submits without one or without consent; shows the 72h response deadline in a `role="status"` region on success. Rejections are mapped by status to fixed, overridable copy (`400` validation, `422` captcha, `429` rate limit, otherwise generic) so no server text reaches the visitor. Default transport POSTs JSON to the SITE's `/api/data-requests` Route Handler (`endpoint`, or a custom `submit`). Also exports `DATA_REQUEST_TYPES` and `DEFAULT_DATA_REQUEST_FORM_LABELS`. README: page + Route Handler snippet.
+- 2273e3c: Add `TrustBadges` — the drop-in for the tenant's trust badges from `client.trustBadges.list()` (REB-996). Server Component: groups badges by type under overridable headings (`DEFAULT_TRUST_BADGE_HEADINGS`, `SUBVENTION` → «Financiación»; `null` hides one), `types` filters and orders the groups, logos are images with `alt` = badge name, an optional http(s) link opens in a new window with `rel="noopener noreferrer"` and a visually hidden hint, and nothing is rendered when there are no badges. README: footer snippet.
+
+### Patch Changes
+
+- f48712a: Consumer classNames keep custom theme tokens (REB-997). `CourseDescription`'s `headingClassName` / `contentClassName` and `ProductTrustItems`' `itemClassName` now replace their slot's stylistic defaults instead of being merged over them, and the consumer's `text-*` classes on `CourseDescription`, `ProductTrustItems`, `MarkdownRenderer` and `SafeHtml` reach the DOM verbatim — tailwind-merge read a custom font-size token such as `text-h2` as a colour and dropped it. Rendering without those props is unchanged.
+- Updated dependencies [cc4e14e]
+  - @reblu/site-contracts@1.16.0
+
 ## 0.14.0
 
 ### Minor Changes

package/README.md

@@ -30,11 +30,13 @@ colour on the red background. See `docs/theming/theming.md`.
 | `CartLineList`, `CartSummary`, `CartAdjustmentsNotice`, `AddedToCartToast`, `CheckoutLoginPrompt`, `CheckoutForm`, `OrderConfirmation` | `.`        | Cart & checkout organisms. RSC-safe by construction. See "Cart & checkout" below.                                            |
 | `PageBlocks`, `FaqAccordion`                                                                                  | `.`        | Registry-block renderer (`PageDetail.blocks`) and native `<details>` FAQ. Server Components. See "Page blocks" below.        |
 | `ProductTrustItems`, `DEFAULT_TRUST_ICONS`                                                                    | `.`        | Store-wide trust messages from `ShopConfig.productTrustItems`. Server Component. See "Product trust items" below.            |
+| `TrustBadges`, `DEFAULT_TRUST_BADGE_HEADINGS`                                                                 | `.`        | The tenant's trust badges from `client.trustBadges.list()`, grouped by type. Server Component. See "Trust badges" below.     |
 | `buildFaqPageJsonLd`, `collectFaqItems`                                                                       | `./seo`    | schema.org `FAQPage` structured data. Directive-free (also on `.`). See "Page blocks" below.                                 |
 | `useCollection`                                                                                               | `./client` | Headless filterable/sortable/paginated collection hook (facets, category, tag, search). Serves both page and blog indexes.   |
 | `Collection`                                                                                                  | `./client` | Token-driven presentational grid over `useCollection`.                                                                       |
 | `ShareButtons`                                                                                                | `./client` | Social share (X / LinkedIn / WhatsApp / copy).                                                                               |
 | `AddToCartButton`, `CartIcon`                                                                                 | `./client` | Add-to-cart feedback (REB-837) — **moved here from `.`**, see below.                                                         |
+| `DataRequestForm`                                                                                             | `./client` | Drop-in public GDPR rights form over `POST /api/site/data-requests` (REB-980). See "GDPR rights form" below.                |
 
 ## Boundary
 
@@ -42,6 +44,38 @@ colour on the red background. See `docs/theming/theming.md`.
 - **`@reblu/site-blocks`** = organisms + headless data hooks. Higher churn — its
   own package so a breaking change in an organism does not bump the stable atoms.
 
+## Styling a drop-in — the className rule (REB-997)
+
+`cn` (tailwind-merge) only knows Tailwind's default scale. A SITE's own theme
+token such as `text-h2` (a font size) is read as a text **colour**, so
+`twMerge('text-xl font-semibold', 'text-h2 text-ink')` keeps `text-xl` and
+drops `text-h2`. To keep custom tokens working, the typography slot props
+follow one rule:
+
+- **A slot className replaces that slot's stylistic defaults.** Passing
+  `CourseDescription`'s `headingClassName` drops its `text-xl font-semibold`;
+  `contentClassName` drops `text-muted-foreground`; `ProductTrustItems`'
+  `itemClassName` drops `text-sm text-muted-foreground`; `TrustBadges`'
+  `headingClassName` drops `text-sm font-semibold uppercase tracking-widest`
+  (and `sectionHeadingClassName` its `text-xl font-semibold`). Pass the full
+  typography you want for that slot.
+- **Structural classes stay.** Layout an element needs (the trust row's
+  `flex items-center gap-3`, the `space-y-*` of a section or list, the
+  `max-w-none` of `MarkdownRenderer` / `SafeHtml`) is kept, and your layout
+  classes still override it through `cn` (`max-w-prose` beats `max-w-none`).
+- **Your `text-*` classes reach the DOM verbatim** on those elements
+  (`CourseDescription`, `ProductTrustItems`, `TrustBadges`' headings,
+  `MarkdownRenderer`, `SafeHtml`):
+  they never go through tailwind-merge, so `text-h2 text-ink` renders as both.
+- **Without the prop, nothing changes** — the defaults render exactly as before.
+
+The root `className` of interactive or boxed drop-ins (`AddToCartButton`,
+`CartIcon`, `CartAdjustmentsNotice`, cards, toasts, the login prompt) is still
+merged with `cn` over their defaults: those defaults pair a text colour with
+its background, and a root className is mostly used for spacing. Put a custom
+font-size token there on an element of your own (or wrap the drop-in) rather
+than on the root className.
+
 ## Authoring notes
 
 What `MarkdownRenderer` does with tenant-authored Markdown and HTML. These are
@@ -546,7 +580,9 @@ export default async function ProductPage() {
 A semantic `<ul>` (or `<ol>` via `as='ol'`) of `<li>` rows; each icon is
 `aria-hidden` because the text carries the meaning. Colours come from theme
 tokens only (`text-muted-foreground`, `text-foreground/60`). `className` styles
-the list, `itemClassName` each row.
+the list, `itemClassName` each row — it **replaces** the row's default
+`text-sm text-muted-foreground` and keeps its `flex items-center gap-3` layout
+(REB-997).
 
 ### Overriding icons
 
@@ -566,6 +602,63 @@ import { Truck } from 'my-icon-set'
 `icons` cannot add a new icon key: an item whose `icon` this version does not
 know is still skipped.
 
+## Trust badges
+
+`TrustBadges` renders the tenant's trust badges — partners, insurers, funding,
+certifications, awards — managed in nexus (`/trust-badges`) and served by
+`client.trustBadges.list()` (REB-996). The API only returns badges that are
+switched on AND inside their optional validity window («Visible desde» /
+«Visible hasta», whole days in the tenant's time zone), so toggling or expiring
+a badge in nexus removes it from the SITE on the next revalidation, with no
+deploy and no SITE change.
+
+```tsx
+import { TrustBadges } from '@reblu/site-blocks'
+
+export async function Footer() {
+  const { data: badges } = await client.trustBadges.list().catch(() => ({ data: [] }))
+  return (
+    <footer>
+      {/* … */}
+      <TrustBadges badges={badges} headingLevel={2} />
+    </footer>
+  )
+}
+```
+
+- Groups by type, each under a heading from `DEFAULT_TRUST_BADGE_HEADINGS`
+  (`SUBVENTION` → «Financiación», `CERTIFICATION` → «Certificaciones»,
+  `AWARD` → «Premios», `PARTNER` → «Colaboradores», `INSURANCE` →
+  «Aseguradoras»). Override any with `headings`; `null` hides one.
+- `types` picks which groups render and in what order, e.g. only the funding
+  logos: `<TrustBadges badges={badges} types={['SUBVENTION']} />`. To fetch
+  only one type, `client.trustBadges.list({ type: 'SUBVENTION' })`.
+- A logo is an `<img>` with `alt` = badge name, rendered only when its URL is
+  http(s) or root-relative (`/logos/x.svg`); any other scheme (`javascript:`,
+  `data:`, `//host`) is dropped and the badge shows its name as text, like a
+  badge without a logo. A badge `url` (http/https only) opens in a new window
+  with `rel="noopener noreferrer"` and a visually hidden «(se abre en una
+  ventana nueva)» — override it with `newWindowLabel`.
+- `null`, `undefined` or an empty list render nothing — never an empty heading.
+- **Section landmark.** Pass `heading` (e.g. «Nos avalan») and the drop-in
+  renders a `<section aria-labelledby={headingId}>` (default id
+  `trust-badges-heading`) with that heading at `headingLevel` and the group
+  headings one level below — so you keep the landmark without wrapping it:
+
+  ```tsx
+  <TrustBadges badges={badges} heading='Nos avalan' headingId='avales' headingLevel={2} />
+  ```
+
+- Styling hooks: `className`, `groupClassName`, `headingClassName`,
+  `sectionHeadingClassName`, `listClassName`, `logoClassName` (e.g.
+  `brightness-0 invert` on a dark footer). **The REB-997 slot rule applies**:
+  `headingClassName` replaces the group headings' `text-sm font-semibold
+  uppercase tracking-widest` and `sectionHeadingClassName` replaces the section
+  heading's `text-xl font-semibold` — pass the full typography you want; custom
+  `text-*` tokens reach the DOM verbatim. `className`, `groupClassName`,
+  `listClassName` and `logoClassName` are layout/sizing slots and still merge
+  with `cn`.
+
 ## `ParentPage` (formerly `Specialty`)
 
 `ParentPage` renders a page that groups other pages: the hero and content
@@ -778,13 +871,87 @@ export default async function CoursePage({ params }: Props) {
   description's own headings under it (`headingLevel`, default `2`; override with
   `headingOffset`; `headingId` when the page renders it twice);
 - styling hooks: `className`, `headingClassName`, `contentClassName`, and
-  `data-slot='course-description'` on the outer element.
+  `data-slot='course-description'` on the outer element. `headingClassName`
+  and `contentClassName` **replace** the default `text-xl font-semibold` /
+  `text-muted-foreground` (see [the className rule](#styling-a-drop-in--the-classname-rule-reb-997)).
 
 For any other rich-text Markdown field, `MarkdownRenderer` is the generic
 renderer (`headingOffset` demotes its headings under yours).
 `markdownToPlainText` drops images and anything the sanitiser strips, and cuts
 at a word boundary with `…` within `maxLength`.
 
+## GDPR rights form — `DataRequestForm` (REB-980)
+
+Drop-in form for a SITE's public rights page (e.g. `/derechos-rgpd`): request
+type, name, email, optional message and a consent checkbox. A submission lands
+in the tenant's nexus queue (`/settings/data-requests`) with source
+`PUBLIC_FORM` and its 72h clock running; the form then shows the response
+deadline (`slaDueAt`) in a `role="status"` region.
+
+```tsx
+'use client'
+import { useCallback, useState } from 'react'
+import { DataRequestForm } from '@reblu/site-blocks/client'
+import { RECAPTCHA_DATA_REQUEST_ACTION } from '@reblu/site-next/recaptcha'
+import {
+  DeferredRecaptchaProvider,
+  useDeferredRecaptchaToken,
+} from '@reblu/site-next/recaptcha-provider'
+
+function Form({ onArm }: { onArm: () => void }) {
+  const getCaptchaToken = useDeferredRecaptchaToken(RECAPTCHA_DATA_REQUEST_ACTION, { onArm })
+  return <DataRequestForm getCaptchaToken={getCaptchaToken} onInteract={onArm} />
+}
+
+export function DataRequestSection({ siteKey }: { siteKey: string }) {
+  const [armed, setArmed] = useState(false)
+  const arm = useCallback(() => setArmed(true), [])
+  return (
+    <DeferredRecaptchaProvider siteKey={siteKey} armed={armed}>
+      <Form onArm={arm} />
+    </DeferredRecaptchaProvider>
+  )
+}
+```
+
+```ts
+// app/api/data-requests/route.ts — server side, the API key never reaches the browser
+import { createDataRequestRoute } from '@reblu/site-next/route-handlers'
+
+export const POST = createDataRequestRoute()
+```
+
+`createDataRequestRoute` (REB-1005) validates the body, caps it at 16 KiB,
+forwards the visitor IP for base-api's per-IP limit and keeps exactly the
+statuses this form maps — see the `@reblu/site-next` README.
+
+- **Render it on the reCAPTCHA key alone — not on the contact form.** The rights
+  form is a legal channel the tenant must keep open even when its contact form
+  is `DISABLED` or `NOT_CONFIGURED`; base-api's data-request endpoint ignores
+  `contactFormMode` and needs only a captcha. Gate on
+  `isSafeRecaptchaSiteKey(analytics.recaptchaSiteKey)` (`@reblu/site-next/recaptcha`),
+  never on `resolveContactFormAvailability`.
+- **The list of rights** is `DATA_REQUEST_TYPES` — exported from
+  `@reblu/site-contracts` (server-safe, one source with base-api), and
+  re-exported from this package's root and `./client` entries.
+- **Accessibility.** On a validation error focus moves to the first invalid
+  field; on success to the `role="status"` confirmation. The inputs carry
+  `maxLength` at the server limits (`DATA_REQUEST_FIELD_LIMITS`: name 200,
+  email 320, details 5000), so overlong text cannot be typed.
+
+- **reCAPTCHA is required.** base-api rejects a request without a token, so the
+  form never submits when `getCaptchaToken` resolves `undefined`.
+- **No server text reaches the visitor.** Rejections are mapped by status to
+  fixed copy: `400` → `validationError`, `422` → `captchaError`, `429` →
+  `rateLimitError`, anything else (or no answer) → `genericError`.
+- **Transport.** By default the form POSTs JSON to `endpoint`
+  (`/api/data-requests`) and reads the `{ data }` envelope. Pass `submit` to
+  use your own transport; it returns `{ ok: true, data }` or `{ ok: false, status }`.
+- **Copy** defaults to Spanish; override any string with `labels` (including
+  `requestTypes` per right and `success(deadline)`), the date locale with
+  `locale`, and the offered rights with `requestTypes`.
+- `onSubmitted(ack)` fires after success — e.g. for analytics.
+
 ## Security boundaries
 
 Two sinks, two different helpers, in two different packages — do not reach for

package/dist/client.cjs

@@ -34,6 +34,10 @@ __export(client_exports, {
   AddToCartButton: () => AddToCartButton,
   CartIcon: () => CartIcon,
   Collection: () => Collection,
+  DATA_REQUEST_FIELD_LIMITS: () => DATA_REQUEST_FIELD_LIMITS,
+  DATA_REQUEST_TYPES: () => import_site_contracts.DATA_REQUEST_TYPES,
+  DEFAULT_DATA_REQUEST_FORM_LABELS: () => DEFAULT_DATA_REQUEST_FORM_LABELS,
+  DataRequestForm: () => DataRequestForm,
   ShareButtons: () => ShareButtons,
   useCollection: () => useCollection
 });
@@ -522,11 +526,283 @@ function CartIcon({ itemCount, href, hydrated, bumpOnAdd, labels, className }) {
     }
   );
 }
+
+// src/components/data-request-form.tsx
+var import_react4 = require("react");
+var import_utils5 = require("@reblu/site-ui/utils");
+var import_site_contracts = require("@reblu/site-contracts");
+var import_jsx_runtime5 = require("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",
+  requestTypePlaceholder: "Selecciona una opci\xF3n",
+  requestTypes: {
+    ACCESS: "Acceso",
+    RECTIFICATION: "Rectificaci\xF3n",
+    ERASURE: "Supresi\xF3n",
+    OBJECTION: "Oposici\xF3n",
+    PORTABILITY: "Portabilidad",
+    RESTRICTION: "Limitaci\xF3n del tratamiento",
+    AUTOMATED_DECISION: "No ser objeto de decisiones automatizadas",
+    INFORMATION: "Informaci\xF3n"
+  },
+  nameLabel: "Nombre y apellidos",
+  emailLabel: "Email",
+  detailsLabel: "Mensaje (opcional)",
+  detailsPlaceholder: "Describe tu solicitud",
+  consent: "Acepto que mis datos se traten para gestionar esta solicitud.",
+  submit: "Enviar solicitud",
+  submitting: "Enviando\u2026",
+  requestTypeRequired: "Elige el derecho que quieres ejercer.",
+  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__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    "Hemos recibido tu solicitud. Te responderemos como m\xE1ximo el ",
+    deadline,
+    "."
+  ] }),
+  captchaError: "No hemos podido verificar que no eres un robot. Recarga la p\xE1gina e int\xE9ntalo de nuevo.",
+  validationError: "Revisa los datos del formulario e int\xE9ntalo de nuevo.",
+  rateLimitError: "Has enviado demasiadas solicitudes. Espera unos minutos e int\xE9ntalo de nuevo.",
+  genericError: "No hemos podido enviar tu solicitud. Int\xE9ntalo de nuevo m\xE1s tarde."
+};
+var FIELD_ORDER = ["requestType", "name", "email", "consent"];
+var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+async function postToRoute(endpoint, input) {
+  try {
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(input)
+    });
+    if (!res.ok) return { ok: false, status: res.status };
+    const json = await res.json();
+    return json.data ? { ok: true, data: json.data } : { ok: false, status: res.status };
+  } catch {
+    return { ok: false, status: 0 };
+  }
+}
+function rejectionMessage(status, t) {
+  if (status === 400) return t.validationError;
+  if (status === 422) return t.captchaError;
+  if (status === 429) return t.rateLimitError;
+  return t.genericError;
+}
+var FIELD_CLASS = "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20";
+function DataRequestForm({
+  getCaptchaToken,
+  submit,
+  endpoint = "/api/data-requests",
+  onInteract,
+  onSubmitted,
+  requestTypes = import_site_contracts.DATA_REQUEST_TYPES,
+  labels,
+  locale = "es-ES",
+  className
+}) {
+  const t = {
+    ...DEFAULT_DATA_REQUEST_FORM_LABELS,
+    ...labels,
+    requestTypes: { ...DEFAULT_DATA_REQUEST_FORM_LABELS.requestTypes, ...labels?.requestTypes }
+  };
+  const id = (0, import_react4.useId)();
+  const [requestType, setRequestType] = (0, import_react4.useState)("");
+  const [name, setName] = (0, import_react4.useState)("");
+  const [email, setEmail] = (0, import_react4.useState)("");
+  const [details, setDetails] = (0, import_react4.useState)("");
+  const [consent, setConsent] = (0, import_react4.useState)(false);
+  const [errors, setErrors] = (0, import_react4.useState)({});
+  const [formError, setFormError] = (0, import_react4.useState)(null);
+  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
+  const [ack, setAck] = (0, import_react4.useState)(null);
+  const statusRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (ack) statusRef.current?.focus();
+  }, [ack]);
+  async function handleSubmit(event) {
+    event.preventDefault();
+    if (submitting) return;
+    setFormError(null);
+    const next = {};
+    if (!requestType) next.requestType = t.requestTypeRequired;
+    if (!name.trim()) next.name = t.nameRequired;
+    if (!EMAIL_PATTERN.test(email.trim())) next.email = t.emailInvalid;
+    if (!consent) next.consent = t.consentRequired;
+    setErrors(next);
+    const firstInvalid = FIELD_ORDER.find((field) => next[field]);
+    if (firstInvalid) {
+      document.getElementById(`${id}-${firstInvalid === "requestType" ? "type" : firstInvalid}`)?.focus();
+      return;
+    }
+    if (!requestType) return;
+    setSubmitting(true);
+    try {
+      const captcha = await getCaptchaToken().catch(() => void 0);
+      if (!captcha) {
+        setFormError(t.captchaError);
+        return;
+      }
+      const input = {
+        requestType,
+        name: name.trim(),
+        email: email.trim(),
+        ...details.trim() ? { details: details.trim() } : {},
+        captcha
+      };
+      const result = await (submit ?? ((body) => postToRoute(endpoint, body)))(input).catch(
+        () => ({ ok: false, status: 0 })
+      );
+      if (!result.ok) {
+        setFormError(rejectionMessage(result.status, t));
+        return;
+      }
+      setAck(result.data);
+      onSubmitted?.(result.data);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  if (ack) {
+    const deadline = new Intl.DateTimeFormat(locale, {
+      dateStyle: "long",
+      timeStyle: "short"
+    }).format(new Date(ack.slaDueAt));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        ref: statusRef,
+        tabIndex: -1,
+        role: "status",
+        "data-slot": "data-request-form-success",
+        className: (0, import_utils5.cn)("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__ */ (0, import_jsx_runtime5.jsx)("p", { id: `${id}-${field}-error`, className: "text-xs text-destructive", children: errors[field] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "form",
+    {
+      noValidate: true,
+      onSubmit: handleSubmit,
+      onFocusCapture: onInteract,
+      onPointerDown: onInteract,
+      "data-slot": "data-request-form",
+      className: (0, import_utils5.cn)("space-y-4", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-type`, className: "text-sm font-medium", children: t.requestTypeLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "select",
+            {
+              id: `${id}-type`,
+              value: requestType,
+              onChange: (e) => setRequestType(e.target.value),
+              "aria-invalid": errors.requestType ? true : void 0,
+              "aria-describedby": errorId("requestType"),
+              className: (0, import_utils5.cn)(FIELD_CLASS, errors.requestType ? "border-destructive" : "border-border"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: t.requestTypePlaceholder }),
+                requestTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: type, children: t.requestTypes[type] }, type))
+              ]
+            }
+          ),
+          fieldError("requestType")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-name`, className: "text-sm font-medium", children: t.nameLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              id: `${id}-name`,
+              type: "text",
+              autoComplete: "name",
+              maxLength: DATA_REQUEST_FIELD_LIMITS.name,
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              "aria-invalid": errors.name ? true : void 0,
+              "aria-describedby": errorId("name"),
+              className: (0, import_utils5.cn)(FIELD_CLASS, errors.name ? "border-destructive" : "border-border")
+            }
+          ),
+          fieldError("name")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-email`, className: "text-sm font-medium", children: t.emailLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              id: `${id}-email`,
+              type: "email",
+              autoComplete: "email",
+              maxLength: DATA_REQUEST_FIELD_LIMITS.email,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              "aria-invalid": errors.email ? true : void 0,
+              "aria-describedby": errorId("email"),
+              className: (0, import_utils5.cn)(FIELD_CLASS, errors.email ? "border-destructive" : "border-border")
+            }
+          ),
+          fieldError("email")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-details`, className: "text-sm font-medium", children: t.detailsLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "textarea",
+            {
+              id: `${id}-details`,
+              rows: 4,
+              maxLength: DATA_REQUEST_FIELD_LIMITS.details,
+              value: details,
+              onChange: (e) => setDetails(e.target.value),
+              placeholder: t.detailsPlaceholder,
+              className: (0, import_utils5.cn)(FIELD_CLASS, "border-border")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                id: `${id}-consent`,
+                type: "checkbox",
+                checked: consent,
+                onChange: (e) => setConsent(e.target.checked),
+                "aria-invalid": errors.consent ? true : void 0,
+                "aria-describedby": errorId("consent"),
+                className: "mt-1"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-consent`, className: "text-sm text-foreground/80", children: t.consent })
+          ] }),
+          fieldError("consent")
+        ] }),
+        formError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: formError }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: submitting,
+            className: "rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground disabled:opacity-60",
+            children: submitting ? t.submitting : t.submit
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddToCartButton,
   CartIcon,
   Collection,
+  DATA_REQUEST_FIELD_LIMITS,
+  DATA_REQUEST_TYPES,
+  DEFAULT_DATA_REQUEST_FORM_LABELS,
+  DataRequestForm,
   ShareButtons,
   useCollection
 });