@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.tsx

@@ -0,0 +1,189 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, Clock, MapPin, Truck } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../ui/tabs'
+import { cn } from '../../../lib/utils'
+import type { FulfilmentStage, FulfilmentStageDetail } from './checkout-confirmation'
+
+const longDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'long' })
+const stampDate = new Intl.DateTimeFormat('en-US', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+})
+
+const STAGE_LABELS: Record<FulfilmentStage, string> = {
+  Confirmed: 'Confirmado',
+  Packed: 'Empaquetado',
+  Shipped: 'Enviado',
+  Delivered: 'Entregado',
+}
+
+interface CheckoutConfirmationFulfilmentProgressProps {
+  order: {
+    currentStage: FulfilmentStage
+    estimatedDelivery: string
+    trackingHref?: string
+  }
+  /** Ordered by `Object.keys(fulfilmentDetails)` from the orchestrator. */
+  stages: FulfilmentStageDetail[]
+  progressLabel?: string
+  estimatedDeliveryLabel?: string
+  currentStageLabel?: string
+  inProgressLabel?: string
+  expectedByLabel?: string
+  completedLabel?: string
+  statusLabel?: string
+  locationLabel?: string
+  trackOrderLabel?: string
+  /** Kept for API symmetry with the orchestrator; the fulfilment card renders no prices. */
+  formatPrice?: (value: number) => string
+}
+
+/**
+ * The four fulfilment stages, as tabs that actually open.
+ *
+ * This was a static `<ol>` that looked exactly like a tab strip — four labels with an underline
+ * under each — and did nothing when pressed. A control that looks pressable and is not is worse
+ * than no control: the reader tries it, nothing happens, and they conclude the page is broken
+ * rather than that the row was decoration.
+ *
+ * So it is a real `Tabs`, and each stage opens the one thing a reader on this screen wants that
+ * the label alone cannot give them: when it happened, where, and what it means. Radix Tabs
+ * supplies roving focus, arrow-key movement and the tab/panel wiring; a row of buttons with a
+ * `useState` would have to fake all three.
+ *
+ * Every stage is reachable, including ones still ahead — a reader is entitled to look at what
+ * "Delivered" will mean before it happens. What a future stage does not get is a fabricated
+ * timestamp; it says what it is waiting for instead.
+ */
+export function CheckoutConfirmationFulfilmentProgress({
+  order,
+  stages,
+  progressLabel = 'Progreso',
+  estimatedDeliveryLabel = 'Entrega estimada',
+  currentStageLabel = 'Etapa actual',
+  inProgressLabel = 'En curso',
+  expectedByLabel = 'Se espera para',
+  completedLabel = 'Completada',
+  statusLabel = 'Estado',
+  locationLabel = 'Ubicación',
+  trackOrderLabel = 'Seguir este pedido',
+}: CheckoutConfirmationFulfilmentProgressProps) {
+  const currentIndex = stages.findIndex(stage => stage.stage === order.currentStage)
+  const [selected, setSelected] = useState<string>(order.currentStage)
+
+  return (
+    <Card className='mt-10'>
+      <CardHeader>
+        <CardTitle className='flex flex-wrap items-center justify-between gap-2 text-base'>
+          {progressLabel}
+          <span className='text-muted-foreground text-sm font-normal'>
+            {`${estimatedDeliveryLabel} ${longDate.format(new Date(order.estimatedDelivery))}`}
+          </span>
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <Tabs value={selected} onValueChange={value => setSelected(String(value))}>
+          {/*
+            `variant='line'` because these are stages along a route, not a segmented control —
+            the underline reads as progress in a way a filled pill does not.
+
+            `h-auto!` because `TabsList` pins itself to `h-8` through a
+            `group-data-horizontal/tabs:` variant, which a plain `h-auto` cannot outrank and
+            tailwind-merge does not treat as the same utility. Left alone it clipped the 24px
+            stage markers. The list scrolls rather than wrapping on a narrow screen, so the four
+            stages stay in one order.
+
+            `pb-2` is load-bearing, not spacing. `TabsTrigger` draws its active underline at
+            `bottom-[-5px]`, i.e. outside its own box, and CSS forces an axis to `auto` when the
+            other one is not `visible` — so asking for `overflow-x-auto` silently made the
+            vertical axis scrollable too, and those 7px of underline became a stray vertical
+            scrollbar beside the tabs at every width. The padding puts the underline back inside
+            the box, which leaves nothing to scroll.
+          */}
+          <TabsList variant='line' className='h-auto! w-full justify-start gap-2 overflow-x-auto p-0 pb-2'>
+            {stages.map((stage, index) => {
+              const done = index <= currentIndex
+
+              return (
+                <TabsTrigger key={stage.stage} value={stage.stage} className='h-auto flex-1 justify-start gap-2 px-1 py-2'>
+                  <span
+                    aria-hidden='true'
+                    className={cn(
+                      'flex size-6 shrink-0 items-center justify-center rounded-full text-xs',
+                      done ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
+                    )}
+                  >
+                    {done ? <Check className='size-3.5' /> : index + 1}
+                  </span>
+                  {STAGE_LABELS[stage.stage]}
+                  {/*
+                    The stage the order is actually at, marked on the strip itself. Without it
+                    the only sign of "where we are" would be whichever tab happens to be open,
+                    which changes the moment the reader looks at another one.
+                  */}
+                  {index === currentIndex ? <span className='sr-only'>{currentStageLabel}</span> : null}
+                  {index === currentIndex ? (
+                    <span aria-hidden='true' className='bg-primary size-1.5 shrink-0 rounded-full' />
+                  ) : null}
+                </TabsTrigger>
+              )
+            })}
+          </TabsList>
+
+          {stages.map((detail, index) => {
+            const done = index <= currentIndex
+
+            return (
+              <TabsContent key={detail.stage} value={detail.stage} className='pt-4'>
+                {index === currentIndex ? (
+                  <p className='text-primary mb-2 text-xs font-medium tracking-[0.12em] uppercase'>
+                    {currentStageLabel}
+                  </p>
+                ) : null}
+                <p className='text-sm'>{detail.summary}</p>
+
+                <dl className='text-muted-foreground mt-3 flex flex-col gap-1.5 text-sm sm:flex-row sm:gap-6'>
+                  <div className='flex items-center gap-2'>
+                    <dt className='sr-only'>{detail.at ? completedLabel : statusLabel}</dt>
+                    <Clock className='size-4 shrink-0' aria-hidden='true' />
+                    <dd className='tabular-nums'>
+                      {detail.at
+                        ? stampDate.format(new Date(detail.at))
+                        : done
+                          ? inProgressLabel
+                          : `${expectedByLabel} ${longDate.format(new Date(order.estimatedDelivery))}`}
+                    </dd>
+                  </div>
+
+                  <div className='flex items-center gap-2'>
+                    <dt className='sr-only'>{locationLabel}</dt>
+                    <MapPin className='size-4 shrink-0' aria-hidden='true' />
+                    <dd>{detail.location}</dd>
+                  </div>
+                </dl>
+              </TabsContent>
+            )
+          })}
+        </Tabs>
+
+        {/*
+          Render as an anchor through Radix `asChild` when a real tracking URL exists; with no
+          href the button is omitted rather than pointing at a fabricated destination.
+        */}
+        {order.trackingHref ? (
+          <Button className='mt-6 w-full sm:w-auto' asChild>
+            <a href={order.trackingHref}>
+              <Truck />
+              {trackOrderLabel}
+            </a>
+          </Button>
+        ) : null}
+      </CardContent>
+    </Card>
+  )
+}

package/src/blocks/e-commerce/checkout-forms/checkout-confirmation.tsx

@@ -0,0 +1,283 @@
+import { CircleCheck } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { Separator } from '../../../ui/separator'
+import { CheckoutConfirmationFulfilmentProgress } from './checkout-confirmation-fulfilment-progress'
+
+export type FulfilmentStage = 'Confirmed' | 'Packed' | 'Shipped' | 'Delivered'
+
+export interface OrderLine {
+  id: string
+  name: string
+  variant: string
+  quantity: number
+  price: number
+  image: string
+}
+
+export interface FulfilmentStageDetail {
+  stage: FulfilmentStage
+  /** What happened, in a sentence. Present tense for a stage that has not arrived yet. */
+  summary: string
+  /** Where it happened, or where it will. */
+  location: string
+  /**
+   * When it happened. `null` for a stage still ahead, which the panel renders as an
+   * expectation rather than as a fact — a date with no event behind it is a promise, and
+   * printing it in the same voice as a completed step is how a tracker starts lying.
+   */
+  at: string | null
+}
+
+export interface OrderAddress {
+  name: string
+  lines: string[]
+  method: string
+}
+
+export interface OrderTotals {
+  subtotal: number
+  shipping: number
+  tax: number
+}
+
+export interface Order {
+  number: string
+  /** ISO date */
+  placedAt: string
+  email: string
+  currentStage: FulfilmentStage
+  /** ISO date */
+  estimatedDelivery: string
+  trackingHref?: string
+  shipping: OrderAddress
+  billing: OrderAddress
+  totals: OrderTotals
+}
+
+export interface CheckoutConfirmationProps {
+  order: Order
+  orderLines: OrderLine[]
+  /**
+   * Keyed by `FulfilmentStage`. The stage strip is ordered by `Object.keys`,
+   * so define the record in the canonical `Confirmed → Packed → Shipped → Delivered` order.
+   */
+  fulfilmentDetails: Record<FulfilmentStage, FulfilmentStageDetail>
+  /** Override price formatting (locale, currency). Defaults to USD. */
+  formatPrice?: (value: number) => string
+  titleLabel?: string
+  /** Template with `{number}`/`{date}`/`{email}` placeholders, resolved internally. */
+  orderPlacedLabel?: string
+  itemsLabel?: string
+  quantityLabel?: string
+  subtotalLabel?: string
+  shippingLabel?: string
+  taxLabel?: string
+  totalLabel?: string
+  freeLabel?: string
+  shippingAddressLabel?: string
+  billingAddressLabel?: string
+  continueShoppingLabel?: string
+  /** Prefix of the support line; the `supportLabel` link renders right after it. */
+  contactSupportLabel?: string
+  supportLabel?: string
+  progressLabel?: string
+  estimatedDeliveryLabel?: string
+  currentStageLabel?: string
+  inProgressLabel?: string
+  expectedByLabel?: string
+  completedLabel?: string
+  statusLabel?: string
+  locationLabel?: string
+  trackOrderLabel?: string
+  continueShoppingHref?: string
+  supportHref?: string
+  onContinueShopping?: () => void
+}
+
+const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+const longDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'long' })
+
+/**
+ * The screen that closes the purchase journey the checkout blocks open.
+ *
+ * This file has no hooks or handlers, so it still renders as a server component straight from
+ * your order record. Only the progress tabs are interactive, and they carry their own
+ * `'use client'` — the boundary is one child rather than the whole page.
+ */
+export function CheckoutConfirmation({
+  order,
+  orderLines,
+  fulfilmentDetails,
+  formatPrice,
+  titleLabel = '¡Gracias! Tu pedido está en camino',
+  orderPlacedLabel = 'Pedido {number} realizado el {date}. Enviamos la confirmación a {email}.',
+  itemsLabel = 'Artículos',
+  quantityLabel = 'Cantidad',
+  subtotalLabel = 'Subtotal',
+  shippingLabel = 'Envío',
+  taxLabel = 'Impuestos',
+  totalLabel = 'Total',
+  freeLabel = 'Gratis',
+  shippingAddressLabel = 'Envío',
+  billingAddressLabel = 'Facturación',
+  continueShoppingLabel = 'Seguir comprando',
+  contactSupportLabel = '¿Algo falla con este pedido?',
+  supportLabel = 'Contacta con soporte',
+  progressLabel = 'Progreso',
+  estimatedDeliveryLabel = 'Entrega estimada',
+  currentStageLabel = 'Etapa actual',
+  inProgressLabel = 'En curso',
+  expectedByLabel = 'Se espera para',
+  completedLabel = 'Completada',
+  statusLabel = 'Estado',
+  locationLabel = 'Ubicación',
+  trackOrderLabel = 'Seguir este pedido',
+  continueShoppingHref,
+  supportHref,
+  onContinueShopping,
+}: CheckoutConfirmationProps) {
+  const total = order.totals.subtotal + order.totals.shipping + order.totals.tax
+  const format = formatPrice ?? (value => usdFormatter.format(value))
+  const fulfilmentStages = Object.keys(fulfilmentDetails) as FulfilmentStage[]
+
+  return (
+    <div className='w-full py-16 sm:py-24'>
+      <div className='mx-auto w-full max-w-3xl px-4 sm:px-6 lg:px-8'>
+        <div className='text-center'>
+          <span
+            aria-hidden='true'
+            className='bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full'
+          >
+            <CircleCheck className='size-6' />
+          </span>
+          <h1 className='mt-4 text-3xl font-semibold tracking-tight'>{titleLabel}</h1>
+          <p className='text-muted-foreground mt-3'>
+            {orderPlacedLabel
+              .replace('{number}', order.number)
+              .replace('{date}', longDate.format(new Date(order.placedAt)))
+              .replace('{email}', order.email)}
+          </p>
+        </div>
+
+        <CheckoutConfirmationFulfilmentProgress
+          order={{
+            currentStage: order.currentStage,
+            estimatedDelivery: order.estimatedDelivery,
+            trackingHref: order.trackingHref,
+          }}
+          stages={fulfilmentStages.map(stage => fulfilmentDetails[stage])}
+          progressLabel={progressLabel}
+          estimatedDeliveryLabel={estimatedDeliveryLabel}
+          currentStageLabel={currentStageLabel}
+          inProgressLabel={inProgressLabel}
+          expectedByLabel={expectedByLabel}
+          completedLabel={completedLabel}
+          statusLabel={statusLabel}
+          locationLabel={locationLabel}
+          trackOrderLabel={trackOrderLabel}
+        />
+
+        <Card className='mt-6'>
+          <CardHeader>
+            <CardTitle className='text-base'>{itemsLabel}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className='divide-border divide-y'>
+              {orderLines.map(line => (
+                <li key={line.id} className='flex gap-4 py-4 first:pt-0 last:pb-0'>
+                  <img
+                    src={line.image || undefined}
+                    alt={line.name}
+                    width={72}
+                    height={88}
+                    className='bg-muted h-22 w-18 shrink-0 rounded-md object-cover'
+                  />
+                  <div className='min-w-0 flex-1'>
+                    <p className='text-sm font-medium'>{line.name}</p>
+                    <p className='text-muted-foreground text-sm'>{line.variant}</p>
+                    <p className='text-muted-foreground text-sm tabular-nums'>
+                      {`${quantityLabel} ${line.quantity}`}
+                    </p>
+                  </div>
+                  <p className='text-sm font-medium tabular-nums'>
+                    {format(line.price * line.quantity)}
+                  </p>
+                </li>
+              ))}
+            </ul>
+
+            <Separator className='my-4' />
+
+            <dl className='flex flex-col gap-2 text-sm'>
+              <div className='flex justify-between'>
+                <dt className='text-muted-foreground'>{subtotalLabel}</dt>
+                <dd className='tabular-nums'>{format(order.totals.subtotal)}</dd>
+              </div>
+              <div className='flex justify-between'>
+                <dt className='text-muted-foreground'>{shippingLabel}</dt>
+                <dd className='tabular-nums'>
+                  {order.totals.shipping === 0 ? freeLabel : format(order.totals.shipping)}
+                </dd>
+              </div>
+              <div className='flex justify-between'>
+                <dt className='text-muted-foreground'>{taxLabel}</dt>
+                <dd className='tabular-nums'>{format(order.totals.tax)}</dd>
+              </div>
+              <div className='flex justify-between pt-2 text-base font-semibold'>
+                <dt>{totalLabel}</dt>
+                <dd className='tabular-nums'>{format(total)}</dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+
+        <div className='mt-6 grid gap-6 sm:grid-cols-2'>
+          {[
+            { title: shippingAddressLabel, address: order.shipping },
+            { title: billingAddressLabel, address: order.billing },
+          ].map(section => (
+            <Card key={section.title}>
+              <CardHeader>
+                <CardTitle className='text-base'>{section.title}</CardTitle>
+              </CardHeader>
+              <CardContent className='text-sm'>
+                <address className='text-muted-foreground not-italic'>
+                  <span className='text-foreground block font-medium'>{section.address.name}</span>
+                  {section.address.lines.map(line => (
+                    <span key={line} className='block'>
+                      {line}
+                    </span>
+                  ))}
+                </address>
+                <p className='text-muted-foreground mt-3'>{section.address.method}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className='mt-8 flex flex-col items-center gap-2'>
+          {continueShoppingHref ? (
+            <Button variant='ghost' asChild>
+              <a href={continueShoppingHref}>{continueShoppingLabel}</a>
+            </Button>
+          ) : onContinueShopping ? (
+            <Button variant='ghost' onClick={onContinueShopping}>
+              {continueShoppingLabel}
+            </Button>
+          ) : null}
+          {supportHref ? (
+            <p className='text-muted-foreground text-sm'>
+              {contactSupportLabel}{' '}
+              <a href={supportHref} className='underline underline-offset-4'>
+                {supportLabel}
+              </a>
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CheckoutConfirmation

package/src/blocks/e-commerce/checkout-forms/checkout-field-feedback.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { FieldDescription, FieldError } from '../../../ui/field'
+import type { CheckoutFieldError } from './checkout-form-types'
+
+export function checkoutFieldAria(id: string, errors?: CheckoutFieldError[]) {
+  const invalid = !!errors?.length
+  return {
+    'aria-invalid': invalid || undefined,
+    'aria-describedby': invalid ? `${id}-error` : undefined,
+  }
+}
+
+export function CheckoutFieldFeedback({
+  id,
+  errors,
+  description,
+}: {
+  id: string
+  errors?: CheckoutFieldError[]
+  description?: string
+}) {
+  return (
+    <>
+      {description && <FieldDescription id={`${id}-description`}>{description}</FieldDescription>}
+      {errors?.length ? <FieldError id={`${id}-error`} errors={errors} /> : null}
+    </>
+  )
+}

package/src/blocks/e-commerce/checkout-forms/checkout-form-1-contact-step.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
+import { Input } from '../../../ui/input'
+import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
+import type {
+  CheckoutForm1ChangeHandler,
+  CheckoutForm1FieldDescriptions,
+  CheckoutForm1FieldErrors,
+  CheckoutForm1FormData,
+} from './checkout-form-1'
+
+export interface CheckoutForm1ContactStepProps {
+  formData: CheckoutForm1FormData
+  onChange: CheckoutForm1ChangeHandler
+  fieldErrors?: CheckoutForm1FieldErrors
+  fieldDescriptions?: CheckoutForm1FieldDescriptions
+}
+
+export function CheckoutForm1ContactStep({
+  formData,
+  onChange,
+  fieldErrors,
+  fieldDescriptions,
+}: CheckoutForm1ContactStepProps) {
+  return (
+    <FieldGroup className="grid gap-4">
+      <Field data-invalid={!!fieldErrors?.email?.length}>
+        <FieldLabel htmlFor="checkout-email">Email</FieldLabel>
+        <Input
+          id="checkout-email"
+          type="text"
+          inputMode="email"
+          placeholder="john@example.com"
+          value={formData.email}
+          onChange={(e) => onChange('email', e.target.value)}
+          {...checkoutFieldAria('checkout-email', fieldErrors?.email)}
+        />
+        <CheckoutFieldFeedback
+          id="checkout-email"
+          errors={fieldErrors?.email}
+          description={fieldDescriptions?.email}
+        />
+      </Field>
+      <div className="grid gap-4 md:grid-cols-2">
+        <Field data-invalid={!!fieldErrors?.firstName?.length}>
+          <FieldLabel htmlFor="checkout-first-name">First name</FieldLabel>
+          <Input
+            id="checkout-first-name"
+            placeholder="John"
+            value={formData.firstName}
+            onChange={(e) => onChange('firstName', e.target.value)}
+            {...checkoutFieldAria('checkout-first-name', fieldErrors?.firstName)}
+          />
+          <CheckoutFieldFeedback
+            id="checkout-first-name"
+            errors={fieldErrors?.firstName}
+            description={fieldDescriptions?.firstName}
+          />
+        </Field>
+        <Field data-invalid={!!fieldErrors?.lastName?.length}>
+          <FieldLabel htmlFor="checkout-last-name">Last name</FieldLabel>
+          <Input
+            id="checkout-last-name"
+            placeholder="Doe"
+            value={formData.lastName}
+            onChange={(e) => onChange('lastName', e.target.value)}
+            {...checkoutFieldAria('checkout-last-name', fieldErrors?.lastName)}
+          />
+          <CheckoutFieldFeedback
+            id="checkout-last-name"
+            errors={fieldErrors?.lastName}
+            description={fieldDescriptions?.lastName}
+          />
+        </Field>
+      </div>
+      <Field data-invalid={!!fieldErrors?.phone?.length}>
+        <FieldLabel htmlFor="checkout-phone">Phone (optional)</FieldLabel>
+        <Input
+          id="checkout-phone"
+          type="text"
+          inputMode="tel"
+          placeholder="+1 (555) 000-0000"
+          value={formData.phone}
+          onChange={(e) => onChange('phone', e.target.value)}
+          {...checkoutFieldAria('checkout-phone', fieldErrors?.phone)}
+        />
+        <CheckoutFieldFeedback
+          id="checkout-phone"
+          errors={fieldErrors?.phone}
+          description={fieldDescriptions?.phone}
+        />
+      </Field>
+    </FieldGroup>
+  )
+}

package/src/blocks/e-commerce/checkout-forms/checkout-form-1-country-field.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Field, FieldLabel } from '../../../ui/field'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../ui/select'
+import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
+import type { CheckoutFieldError } from './checkout-form-types'
+import type { CheckoutForm1CountryOption } from './checkout-form-1'
+
+export interface CheckoutForm1CountryFieldProps {
+  countries: CheckoutForm1CountryOption[]
+  value: string
+  onValueChange: (value: string) => void
+  errors?: CheckoutFieldError[]
+  description?: string
+}
+
+export function CheckoutForm1CountryField({
+  countries,
+  value,
+  onValueChange,
+  errors,
+  description,
+}: CheckoutForm1CountryFieldProps) {
+  return (
+    <Field data-invalid={!!errors?.length}>
+      <FieldLabel htmlFor="checkout-country">Country</FieldLabel>
+      <Select value={value} onValueChange={onValueChange}>
+        <SelectTrigger id="checkout-country" {...checkoutFieldAria('checkout-country', errors)}>
+          <SelectValue placeholder="Select a country" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {countries.map((country) => (
+              <SelectItem key={country.value} value={country.value}>
+                {country.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <CheckoutFieldFeedback id="checkout-country" errors={errors} description={description} />
+    </Field>
+  )
+}