@asteby/storefront-react 0.20.0 → 0.21.0

package/dist/account.css

@@ -241,3 +241,162 @@
     animation: none;
   }
 }
+
+/* products of an order card (`OrderProductsStack`); the line list is `OrderLines` (`ProductPreview` rows) */
+[data-sf-order-products] {
+  margin-block: 0.5rem 0.25rem;
+}
+[data-sf-order-lines-list] {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+[data-sf-order-line] {
+  padding-block: 0.75rem;
+}
+[data-sf-order-line] + [data-sf-order-line] {
+  border-top: 1px solid var(--sf-account-line, color-mix(in srgb, currentColor 14%, transparent));
+}
+
+/*
+ * <ProductThumb>, <ProductPreview>, <ProductThumbStack>: la foto del producto y la línea de producto de la tienda.
+ * CSS plano sobre los tokens de la tienda (--foreground, --background, --border, --muted-foreground, --radius); en tema
+ * oscuro la superficie y el brillo salen de color-mix, sin colores escritos aquí. Va incluido en cart.css, checkout.css,
+ * account.css y ui.css (misma regla, un solo origen: src/ui/product-preview.css).
+ */
+[data-sf-thumb] {
+  --_surface: color-mix(in srgb, var(--foreground, #111) 5%, var(--background, #fff));
+  position: relative;
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--sf-preview-size, 3.5rem);
+  aspect-ratio: var(--sf-preview-ratio, 1 / 1);
+  overflow: hidden;
+  border-radius: calc(var(--radius, 0.5rem) * 1.25);
+  background: var(--_surface);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground, #111) 9%, transparent);
+  vertical-align: middle;
+}
+:root[data-theme="dark"] [data-sf-thumb] { --_surface: color-mix(in srgb, var(--foreground, #fff) 9%, var(--background, #111)); }
+[data-sf-thumb] > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  object-fit: contain;
+  padding: 6%;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms;
+}
+[data-sf-thumb][data-fit="cover"] > img { object-fit: cover; padding: 0; }
+/* Fotos sobre fondo blanco: se funden con la superficie en tema claro (no hay caja blanca dentro del marco). */
+[data-sf-thumb][data-fit="contain"] > img { mix-blend-mode: multiply; }
+:root[data-theme="dark"] [data-sf-thumb] > img { mix-blend-mode: normal; }
+[data-sf-thumb][data-state="loading"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--foreground, #111) 8%, transparent) 50%, transparent 80%);
+  background-size: 200% 100%;
+  animation: sf-thumb-shimmer 1.4s linear infinite;
+  pointer-events: none;
+}
+@keyframes sf-thumb-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
+[data-sf-thumb][data-zoom]:hover > img { transform: scale(1.07); }
+@media (prefers-reduced-motion: reduce) {
+  [data-sf-thumb][data-state="loading"]::before { animation: none; }
+  [data-sf-thumb] > img { transition: none; }
+  [data-sf-thumb][data-zoom]:hover > img { transform: none; }
+}
+
+[data-sf-thumb-fallback] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: color-mix(in srgb, var(--foreground, #111) 42%, transparent);
+  background: linear-gradient(145deg, color-mix(in srgb, var(--foreground, #111) 3%, transparent), color-mix(in srgb, var(--foreground, #111) 9%, transparent));
+}
+[data-sf-thumb-initial] {
+  font-size: calc(var(--sf-preview-size, 3.5rem) * 0.36);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+[data-sf-thumb-qty] {
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  background: var(--sf-summary-qty-bg, color-mix(in srgb, var(--foreground, #111) 78%, transparent));
+  color: var(--sf-summary-qty-fg, var(--background, #fff));
+}
+
+/* Línea de producto: foto | texto | importe. */
+[data-sf-preview] {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  min-width: 0;
+}
+[data-sf-preview][data-missing] [data-sf-preview-name] { font-style: italic; color: var(--muted-foreground, color-mix(in srgb, currentColor 60%, transparent)); }
+[data-sf-preview-media] { flex: none; display: inline-flex; }
+[data-sf-preview-body] { display: grid; flex: 1 1 auto; gap: 0.125rem; min-width: 0; }
+[data-sf-preview-name] {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+[data-sf-preview-name] a { color: inherit; text-decoration: none; }
+[data-sf-preview-name] a:hover { text-decoration: underline; }
+[data-sf-preview-variant],
+[data-sf-preview-sku],
+[data-sf-preview-meta] {
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  color: var(--muted-foreground, color-mix(in srgb, currentColor 66%, transparent));
+}
+[data-sf-preview-sku] { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
+[data-sf-preview-total] {
+  flex: none;
+  align-self: flex-start;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* Fotos apiladas (tarjeta de pedido). */
+[data-sf-thumb-stack] { display: inline-flex; align-items: center; }
+[data-sf-thumb-stack] > * { box-shadow: 0 0 0 2px var(--card, var(--background, #fff)), inset 0 0 0 1px color-mix(in srgb, var(--foreground, #111) 9%, transparent); }
+[data-sf-thumb-stack] > * + * { margin-inline-start: -0.625rem; }
+[data-sf-thumb-more] {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--sf-preview-size, 2.75rem);
+  aspect-ratio: 1 / 1;
+  border-radius: calc(var(--radius, 0.5rem) * 1.25);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted-foreground, color-mix(in srgb, currentColor 66%, transparent));
+  background: color-mix(in srgb, var(--foreground, #111) 7%, var(--background, #fff));
+}

package/dist/account.d.cts

@@ -1,9 +1,12 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, MouseEvent } from 'react';
-import { CustomerCapabilities, Order, NextAction, OrderProgress as OrderProgress$1, Shipment, ShipmentMap, InvoiceDoc, InvoiceSummary, InvoiceFileKind, PendingPayment, PaymentInfo, Refund, StorefrontClient, Connection, Money } from '@asteby/storefront';
+import { CustomerCapabilities, Order, NextAction, OrderProgress as OrderProgress$1, OrderLine, Shipment, ShipmentMap, InvoiceDoc, InvoiceSummary, InvoiceFileKind, PendingPayment, PaymentInfo, Refund, StorefrontClient, Connection, Money } from '@asteby/storefront';
 import { a as CheckoutFieldClassNames } from './fields-vnMUi2HB.cjs';
 import { A as AuthActionData, c as AuthStep, a as AuthErrorCode } from './types-D7pVK0GK.cjs';
 export { b as AuthIntent } from './types-D7pVK0GK.cjs';
+import { a as ProductPreviewClassNames, e as ProductThumbImage } from './product-preview-DRtLWGLS.cjs';
+export { P as ProductPreview, b as ProductPreviewProps, c as ProductThumb, f as ProductThumbProps, g as ProductThumbStack, h as ProductThumbStackProps, p as productInitials } from './product-preview-DRtLWGLS.cjs';
+import './components-B5XhSH-m.cjs';
 
 type AccountAuthView = 'login' | 'register' | 'otp-email' | 'forgot' | AuthStep;
 type AccountAuthMessages = {
@@ -141,6 +144,11 @@ declare const ES: {
     readonly 'order.view': "Ver pedido";
     readonly 'order.items.one': "{count} artículo";
     readonly 'order.items.other': "{count} artículos";
+    readonly 'order.lines': "Artículos del pedido";
+    readonly 'order.line.quantity': "Cantidad {n}";
+    readonly 'order.line.each': "{price} c/u";
+    readonly 'order.line.unavailable': "Producto no disponible";
+    readonly 'order.productsMore': "y {n} más";
     readonly 'order.stepOf': "Paso {n} de {total}: {step}";
     readonly 'order.listLabel': "Tus pedidos";
     readonly 'order.loading': "Cargando tus pedidos";
@@ -357,7 +365,7 @@ type NextActionBarProps = AccountTextProps & {
  */
 declare function NextActionBar({ order, action, hrefFor, onAction, secondary, classNames: cx, ...text }: NextActionBarProps): react.JSX.Element | null;
 
-type OrderCardClassNames = Partial<Record<'root' | 'header' | 'number' | 'link' | 'meta' | 'badge' | 'summary' | 'shipment' | 'footer' | 'total' | 'actions', string>> & {
+type OrderCardClassNames = Partial<Record<'root' | 'header' | 'products' | 'number' | 'link' | 'meta' | 'badge' | 'summary' | 'shipment' | 'footer' | 'total' | 'actions', string>> & {
     progress?: OrderProgressClassNames;
     action?: NextActionBarClassNames;
 };
@@ -393,6 +401,30 @@ type OrderListProps = AccountTextProps & Pick<OrderCardProps, 'orderHref' | 'act
 };
 declare function OrderList({ orders, status, skeletons, onRetry, hasMore, loadingMore, onLoadMore, emptyAction, guestHint, orderHref, actionHref, onAction, headingLevel, classNames: cx, ...text }: OrderListProps): react.JSX.Element;
 
+/** The picture of a line when it carries a usable URL. */
+declare function lineImage(line: Partial<OrderLine> | null | undefined): ProductThumbImage | null;
+type OrderLinesClassNames = Partial<Record<'root' | 'list' | 'item', string>> & {
+    preview?: ProductPreviewClassNames;
+};
+type OrderLinesProps = AccountTextProps & {
+    order: Pick<Order, 'lines'>;
+    /** Product page of a line (return `null` for none). */
+    lineHref?: (line: OrderLine) => string | null | undefined;
+    /** Thumb side in px. Default 64. */
+    size?: number;
+    /** Heading of the list for screen readers. */
+    label?: string;
+    classNames?: OrderLinesClassNames;
+};
+declare function OrderLines({ order, lineHref, size, label, classNames: cx, ...text }: OrderLinesProps): react.JSX.Element | null;
+/** The products of an order as overlapped pictures with "+N": the glance of an order card. */
+declare function OrderProductsStack({ order, size, max, className, ...text }: AccountTextProps & {
+    order: Pick<Order, 'lines'>;
+    size?: number;
+    max?: number;
+    className?: string;
+}): react.JSX.Element | null;
+
 type ShipmentCardClassNames = Partial<Record<'root' | 'header' | 'carrier' | 'status' | 'meta' | 'number' | 'actions' | 'link' | 'copy' | 'events' | 'event' | 'toggle' | 'empty' | 'test' | 'map', string>>;
 /** What `renderMap` receives. */
 type ShipmentMapSlotProps = {
@@ -591,4 +623,4 @@ declare function barcodeGeometry(value: string, opts?: {
     height?: number;
 }): BarcodeGeometry | null;
 
-export { AccountAuth, type AccountAuthClassNames, type AccountAuthMessages, type AccountAuthProps, type AccountAuthView, type AccountFormProps, type AccountMessageKey, type AccountMessages, type AccountStatus, type AccountTextProps, AuthActionData, AuthErrorCode, AuthStep, Barcode, type BarcodeGeometry, type BarcodeProps, InvoiceList, type InvoiceListClassNames, type InvoiceListProps, NextActionBar, type NextActionBarClassNames, type NextActionBarProps, OrderCard, type OrderCardClassNames, type OrderCardProps, OrderList, type OrderListClassNames, type OrderListProps, OrderProgress, type OrderProgressClassNames, type OrderProgressProps, OrderStatusBadge, type OrderStatusBadgeProps, type OrderTone, PaymentSummary, type PaymentSummaryProps, PendingPaymentCard, type PendingPaymentCardClassNames, type PendingPaymentCardProps, PendingPaymentList, type PendingPaymentListProps, PostPurchaseAccountPrompt, type PostPurchaseAccountPromptClassNames, type PostPurchaseAccountPromptMessages, type PostPurchaseAccountPromptProps, RefundList, type RefundListClassNames, type RefundListProps, ShipmentCard, type ShipmentCardClassNames, type ShipmentCardProps, type ShipmentMapSlotProps, type UseConnectionResult, type UseCustomerOrderOptions, type UseCustomerOrderResult, type UseCustomerOrdersOptions, type UsePendingPaymentsOptions, type VoucherView, accountAuthMessages, accountMessages, barcodeGeometry, barcodeValue, code128Modules, enumText, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments, voucherOf };
+export { AccountAuth, type AccountAuthClassNames, type AccountAuthMessages, type AccountAuthProps, type AccountAuthView, type AccountFormProps, type AccountMessageKey, type AccountMessages, type AccountStatus, type AccountTextProps, AuthActionData, AuthErrorCode, AuthStep, Barcode, type BarcodeGeometry, type BarcodeProps, InvoiceList, type InvoiceListClassNames, type InvoiceListProps, NextActionBar, type NextActionBarClassNames, type NextActionBarProps, OrderCard, type OrderCardClassNames, type OrderCardProps, OrderLines, type OrderLinesClassNames, type OrderLinesProps, OrderList, type OrderListClassNames, type OrderListProps, OrderProductsStack, OrderProgress, type OrderProgressClassNames, type OrderProgressProps, OrderStatusBadge, type OrderStatusBadgeProps, type OrderTone, PaymentSummary, type PaymentSummaryProps, PendingPaymentCard, type PendingPaymentCardClassNames, type PendingPaymentCardProps, PendingPaymentList, type PendingPaymentListProps, PostPurchaseAccountPrompt, type PostPurchaseAccountPromptClassNames, type PostPurchaseAccountPromptMessages, type PostPurchaseAccountPromptProps, RefundList, type RefundListClassNames, type RefundListProps, ShipmentCard, type ShipmentCardClassNames, type ShipmentCardProps, type ShipmentMapSlotProps, type UseConnectionResult, type UseCustomerOrderOptions, type UseCustomerOrderResult, type UseCustomerOrdersOptions, type UsePendingPaymentsOptions, type VoucherView, accountAuthMessages, accountMessages, barcodeGeometry, barcodeValue, code128Modules, enumText, lineImage, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments, voucherOf };

package/dist/account.d.ts

@@ -1,9 +1,12 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, MouseEvent } from 'react';
-import { CustomerCapabilities, Order, NextAction, OrderProgress as OrderProgress$1, Shipment, ShipmentMap, InvoiceDoc, InvoiceSummary, InvoiceFileKind, PendingPayment, PaymentInfo, Refund, StorefrontClient, Connection, Money } from '@asteby/storefront';
+import { CustomerCapabilities, Order, NextAction, OrderProgress as OrderProgress$1, OrderLine, Shipment, ShipmentMap, InvoiceDoc, InvoiceSummary, InvoiceFileKind, PendingPayment, PaymentInfo, Refund, StorefrontClient, Connection, Money } from '@asteby/storefront';
 import { a as CheckoutFieldClassNames } from './fields-vnMUi2HB.js';
 import { A as AuthActionData, c as AuthStep, a as AuthErrorCode } from './types-D7pVK0GK.js';
 export { b as AuthIntent } from './types-D7pVK0GK.js';
+import { a as ProductPreviewClassNames, e as ProductThumbImage } from './product-preview-DaICr4f2.js';
+export { P as ProductPreview, b as ProductPreviewProps, c as ProductThumb, f as ProductThumbProps, g as ProductThumbStack, h as ProductThumbStackProps, p as productInitials } from './product-preview-DaICr4f2.js';
+import './components-B5XhSH-m.js';
 
 type AccountAuthView = 'login' | 'register' | 'otp-email' | 'forgot' | AuthStep;
 type AccountAuthMessages = {
@@ -141,6 +144,11 @@ declare const ES: {
     readonly 'order.view': "Ver pedido";
     readonly 'order.items.one': "{count} artículo";
     readonly 'order.items.other': "{count} artículos";
+    readonly 'order.lines': "Artículos del pedido";
+    readonly 'order.line.quantity': "Cantidad {n}";
+    readonly 'order.line.each': "{price} c/u";
+    readonly 'order.line.unavailable': "Producto no disponible";
+    readonly 'order.productsMore': "y {n} más";
     readonly 'order.stepOf': "Paso {n} de {total}: {step}";
     readonly 'order.listLabel': "Tus pedidos";
     readonly 'order.loading': "Cargando tus pedidos";
@@ -357,7 +365,7 @@ type NextActionBarProps = AccountTextProps & {
  */
 declare function NextActionBar({ order, action, hrefFor, onAction, secondary, classNames: cx, ...text }: NextActionBarProps): react.JSX.Element | null;
 
-type OrderCardClassNames = Partial<Record<'root' | 'header' | 'number' | 'link' | 'meta' | 'badge' | 'summary' | 'shipment' | 'footer' | 'total' | 'actions', string>> & {
+type OrderCardClassNames = Partial<Record<'root' | 'header' | 'products' | 'number' | 'link' | 'meta' | 'badge' | 'summary' | 'shipment' | 'footer' | 'total' | 'actions', string>> & {
     progress?: OrderProgressClassNames;
     action?: NextActionBarClassNames;
 };
@@ -393,6 +401,30 @@ type OrderListProps = AccountTextProps & Pick<OrderCardProps, 'orderHref' | 'act
 };
 declare function OrderList({ orders, status, skeletons, onRetry, hasMore, loadingMore, onLoadMore, emptyAction, guestHint, orderHref, actionHref, onAction, headingLevel, classNames: cx, ...text }: OrderListProps): react.JSX.Element;
 
+/** The picture of a line when it carries a usable URL. */
+declare function lineImage(line: Partial<OrderLine> | null | undefined): ProductThumbImage | null;
+type OrderLinesClassNames = Partial<Record<'root' | 'list' | 'item', string>> & {
+    preview?: ProductPreviewClassNames;
+};
+type OrderLinesProps = AccountTextProps & {
+    order: Pick<Order, 'lines'>;
+    /** Product page of a line (return `null` for none). */
+    lineHref?: (line: OrderLine) => string | null | undefined;
+    /** Thumb side in px. Default 64. */
+    size?: number;
+    /** Heading of the list for screen readers. */
+    label?: string;
+    classNames?: OrderLinesClassNames;
+};
+declare function OrderLines({ order, lineHref, size, label, classNames: cx, ...text }: OrderLinesProps): react.JSX.Element | null;
+/** The products of an order as overlapped pictures with "+N": the glance of an order card. */
+declare function OrderProductsStack({ order, size, max, className, ...text }: AccountTextProps & {
+    order: Pick<Order, 'lines'>;
+    size?: number;
+    max?: number;
+    className?: string;
+}): react.JSX.Element | null;
+
 type ShipmentCardClassNames = Partial<Record<'root' | 'header' | 'carrier' | 'status' | 'meta' | 'number' | 'actions' | 'link' | 'copy' | 'events' | 'event' | 'toggle' | 'empty' | 'test' | 'map', string>>;
 /** What `renderMap` receives. */
 type ShipmentMapSlotProps = {
@@ -591,4 +623,4 @@ declare function barcodeGeometry(value: string, opts?: {
     height?: number;
 }): BarcodeGeometry | null;
 
-export { AccountAuth, type AccountAuthClassNames, type AccountAuthMessages, type AccountAuthProps, type AccountAuthView, type AccountFormProps, type AccountMessageKey, type AccountMessages, type AccountStatus, type AccountTextProps, AuthActionData, AuthErrorCode, AuthStep, Barcode, type BarcodeGeometry, type BarcodeProps, InvoiceList, type InvoiceListClassNames, type InvoiceListProps, NextActionBar, type NextActionBarClassNames, type NextActionBarProps, OrderCard, type OrderCardClassNames, type OrderCardProps, OrderList, type OrderListClassNames, type OrderListProps, OrderProgress, type OrderProgressClassNames, type OrderProgressProps, OrderStatusBadge, type OrderStatusBadgeProps, type OrderTone, PaymentSummary, type PaymentSummaryProps, PendingPaymentCard, type PendingPaymentCardClassNames, type PendingPaymentCardProps, PendingPaymentList, type PendingPaymentListProps, PostPurchaseAccountPrompt, type PostPurchaseAccountPromptClassNames, type PostPurchaseAccountPromptMessages, type PostPurchaseAccountPromptProps, RefundList, type RefundListClassNames, type RefundListProps, ShipmentCard, type ShipmentCardClassNames, type ShipmentCardProps, type ShipmentMapSlotProps, type UseConnectionResult, type UseCustomerOrderOptions, type UseCustomerOrderResult, type UseCustomerOrdersOptions, type UsePendingPaymentsOptions, type VoucherView, accountAuthMessages, accountMessages, barcodeGeometry, barcodeValue, code128Modules, enumText, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments, voucherOf };
+export { AccountAuth, type AccountAuthClassNames, type AccountAuthMessages, type AccountAuthProps, type AccountAuthView, type AccountFormProps, type AccountMessageKey, type AccountMessages, type AccountStatus, type AccountTextProps, AuthActionData, AuthErrorCode, AuthStep, Barcode, type BarcodeGeometry, type BarcodeProps, InvoiceList, type InvoiceListClassNames, type InvoiceListProps, NextActionBar, type NextActionBarClassNames, type NextActionBarProps, OrderCard, type OrderCardClassNames, type OrderCardProps, OrderLines, type OrderLinesClassNames, type OrderLinesProps, OrderList, type OrderListClassNames, type OrderListProps, OrderProductsStack, OrderProgress, type OrderProgressClassNames, type OrderProgressProps, OrderStatusBadge, type OrderStatusBadgeProps, type OrderTone, PaymentSummary, type PaymentSummaryProps, PendingPaymentCard, type PendingPaymentCardClassNames, type PendingPaymentCardProps, PendingPaymentList, type PendingPaymentListProps, PostPurchaseAccountPrompt, type PostPurchaseAccountPromptClassNames, type PostPurchaseAccountPromptMessages, type PostPurchaseAccountPromptProps, RefundList, type RefundListClassNames, type RefundListProps, ShipmentCard, type ShipmentCardClassNames, type ShipmentCardProps, type ShipmentMapSlotProps, type UseConnectionResult, type UseCustomerOrderOptions, type UseCustomerOrderResult, type UseCustomerOrdersOptions, type UsePendingPaymentsOptions, type VoucherView, accountAuthMessages, accountMessages, barcodeGeometry, barcodeValue, code128Modules, enumText, lineImage, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments, voucherOf };

package/dist/account.js

@@ -2,6 +2,9 @@ import { fill } from './chunk-PPQEUTXJ.js';
 import { barcodeGeometry, voucherOf, barcodeValue } from './chunk-TXEYBDFG.js';
 export { barcodeGeometry, barcodeValue, code128Modules, voucherOf } from './chunk-TXEYBDFG.js';
 import { useFieldErrors, CheckoutField, ErrorSummary } from './chunk-DFGLCIEG.js';
+import { ProductPreview, ProductThumbStack } from './chunk-VHEY5AU3.js';
+export { ProductPreview, ProductThumb, ProductThumbStack, productInitials } from './chunk-VHEY5AU3.js';
+import './chunk-6CVKW7F3.js';
 import { useResolvedLocale } from './chunk-T52H5HL3.js';
 import { useOptionalStorefront } from './chunk-DQBL2DFJ.js';
 import { useState, useRef, useEffect, useId, useMemo, useCallback } from 'react';
@@ -335,6 +338,11 @@ var ES3 = {
   "order.view": "Ver pedido",
   "order.items.one": "{count} art\xEDculo",
   "order.items.other": "{count} art\xEDculos",
+  "order.lines": "Art\xEDculos del pedido",
+  "order.line.quantity": "Cantidad {n}",
+  "order.line.each": "{price} c/u",
+  "order.line.unavailable": "Producto no disponible",
+  "order.productsMore": "y {n} m\xE1s",
   "order.stepOf": "Paso {n} de {total}: {step}",
   "order.listLabel": "Tus pedidos",
   "order.loading": "Cargando tus pedidos",
@@ -497,6 +505,11 @@ var EN3 = {
   "order.view": "View order",
   "order.items.one": "{count} item",
   "order.items.other": "{count} items",
+  "order.lines": "Items in this order",
+  "order.line.quantity": "Quantity {n}",
+  "order.line.each": "{price} each",
+  "order.line.unavailable": "Product unavailable",
+  "order.productsMore": "and {n} more",
   "order.stepOf": "Step {n} of {total}: {step}",
   "order.listLabel": "Your orders",
   "order.loading": "Loading your orders",
@@ -724,6 +737,61 @@ function CopyButton({ value, label, copiedLabel, failedLabel, className, ariaLab
     /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "data-sf-copy-status": true, style: state === "failed" ? void 0 : SR_ONLY, children: state === "copied" ? copiedLabel : state === "failed" ? failedLabel : "" })
   ] });
 }
+function lineImage(line) {
+  const img = line?.image;
+  if (!img || typeof img !== "object") return null;
+  const url = str(img.url);
+  if (!url) return null;
+  const alt = str(img.alt);
+  const w = Number(img.width);
+  const h = Number(img.height);
+  return { url, alt, ...Number.isFinite(w) && w > 0 ? { width: w } : {}, ...Number.isFinite(h) && h > 0 ? { height: h } : {} };
+}
+function validLines(order) {
+  return (Array.isArray(order.lines) ? order.lines : []).filter((l) => !!l && typeof l === "object");
+}
+function OrderLines({ order, lineHref, size = 64, label, classNames: cx = {}, ...text }) {
+  const { m, locale } = useAccountText(text);
+  const lines = validLines(order);
+  if (lines.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cx.root, "data-sf-order-lines": "", children: /* @__PURE__ */ jsx("ul", { className: cx.list, "aria-label": label ?? m["order.lines"], "data-sf-order-lines-list": "", children: lines.map((l, i) => {
+    const qty = Number.isFinite(l.quantity) && l.quantity > 0 ? l.quantity : 1;
+    const unit = moneyText(l.unit, locale);
+    const variant = str(l.variant_title);
+    return /* @__PURE__ */ jsx("li", { className: cx.item, "data-sf-order-line": "", children: /* @__PURE__ */ jsx(
+      ProductPreview,
+      {
+        image: lineImage(l),
+        name: str(l.title) ?? "",
+        variant: variant && !/^default( title)?$/i.test(variant) ? variant : null,
+        sku: str(l.sku),
+        quantity: qty,
+        quantityLabel: m["order.line.quantity"],
+        unavailableLabel: m["order.line.unavailable"],
+        unitPrice: unit ? fill(m["order.line.each"], { price: unit }) : null,
+        total: moneyText(l.total, locale),
+        href: lineHref?.(l) ?? null,
+        size,
+        ...cx.preview ? { classNames: cx.preview } : {}
+      }
+    ) }, `${str(l.sku) ?? ""}-${i}`);
+  }) }) });
+}
+function OrderProductsStack({ order, size = 44, max = 4, className, ...text }) {
+  const { m } = useAccountText(text);
+  const lines = validLines(order);
+  if (lines.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    ProductThumbStack,
+    {
+      items: lines.map((l) => ({ image: lineImage(l), name: str(l.title) })),
+      size,
+      max,
+      moreLabel: m["order.productsMore"],
+      ...className ? { className } : {}
+    }
+  );
+}
 var STEP_STATES = /* @__PURE__ */ new Set(["done", "current", "pending", "problem"]);
 var stepState = (s) => typeof s === "string" && STEP_STATES.has(s) ? s : "pending";
 var GLYPH = { done: "\u2713", current: "\u25CF", pending: "\u25CB", problem: "!" };
@@ -823,6 +891,7 @@ function OrderCard({ order, orderHref, actionHref, onAction, headingLevel = 3, c
         plural(m, "order.items", items)
       ] }) : null
     ] }),
+    Array.isArray(order.lines) && order.lines.length > 0 ? /* @__PURE__ */ jsx("div", { className: cx.products, "data-sf-order-products": true, children: /* @__PURE__ */ jsx(OrderProductsStack, { order, ...text }) }) : null,
     /* @__PURE__ */ jsxs("div", { className: cx.summary, "data-sf-order-summary": true, children: [
       /* @__PURE__ */ jsx(OrderProgress, { progress, variant: "compact", ...text, ...cx.progress ? { classNames: cx.progress } : {} }),
       showShipment ? /* @__PURE__ */ jsxs("p", { className: cx.shipment, "data-sf-order-shipment": true, children: [
@@ -1351,6 +1420,6 @@ function useCustomerOrder(id, { client, initial, poll } = {}) {
   return { status: mine ? state.status : "loading", order, error: mine ? state.error : null, refreshing: mine && refreshing, reload };
 }
 
-export { AccountAuth, Barcode, InvoiceList, NextActionBar, OrderCard, OrderList, OrderProgress, OrderStatusBadge, PaymentSummary, PendingPaymentCard, PendingPaymentList, PostPurchaseAccountPrompt, RefundList, ShipmentCard, accountAuthMessages, accountMessages, enumText, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments };
+export { AccountAuth, Barcode, InvoiceList, NextActionBar, OrderCard, OrderLines, OrderList, OrderProductsStack, OrderProgress, OrderStatusBadge, PaymentSummary, PendingPaymentCard, PendingPaymentList, PostPurchaseAccountPrompt, RefundList, ShipmentCard, accountAuthMessages, accountMessages, enumText, lineImage, postPurchaseAccountPromptMessages, stageTone, useCustomerOrder, useCustomerOrders, usePendingPayments };
 //# sourceMappingURL=account.js.map
 //# sourceMappingURL=account.js.map