@danielcruzcode/ui-core 0.1.6 → 0.1.8

package/dist/JumboProvider/JumboProvider.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+export interface JumboProviderProps {
+    children: React.ReactNode;
+}
+export declare function JumboProvider({ children }: JumboProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JumboProvider.d.ts.map

package/dist/JumboProvider/JumboProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JumboProvider.d.ts","sourceRoot":"","sources":["../../src/JumboProvider/JumboProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAuC7D"}

package/dist/JumboProvider/JumboProvider.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '@danielcruzcode/design-tokens';
+import { Global, css } from '@emotion/react';
+export function JumboProvider({ children }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
+          *, *::before, *::after {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+          }
+          body {
+            font-family: ${tokens.font.body};
+            color: ${tokens.color.text};
+            background: ${tokens.color.surface};
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+          }
+          img, video {
+            display: block;
+            max-width: 100%;
+          }
+          button {
+            cursor: pointer;
+            border: none;
+            background: none;
+            font: inherit;
+          }
+          a {
+            color: inherit;
+            text-decoration: none;
+          }
+          ul, ol {
+            list-style: none;
+          }
+        ` }), children] }));
+}
+//# sourceMappingURL=JumboProvider.js.map

package/dist/JumboProvider/JumboProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JumboProvider.js","sourceRoot":"","sources":["../../src/JumboProvider/JumboProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAsB;IAC5D,OAAO,CACL,8BACE,KAAC,MAAM,IACL,MAAM,EAAE,GAAG,CAAA;;;;;;;2BAOQ,MAAM,CAAC,IAAI,CAAC,IAAI;qBACtB,MAAM,CAAC,KAAK,CAAC,IAAI;0BACZ,MAAM,CAAC,KAAK,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;SAqBrC,GACD,EACD,QAAQ,IACR,CACJ,CAAC;AACJ,CAAC"}

package/dist/JumboProvider/index.d.ts

@@ -0,0 +1,3 @@
+export { JumboProvider } from './JumboProvider';
+export type { JumboProviderProps } from './JumboProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/JumboProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/JumboProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/JumboProvider/index.js

@@ -0,0 +1,2 @@
+export { JumboProvider } from './JumboProvider';
+//# sourceMappingURL=index.js.map

package/dist/JumboProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/JumboProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/commerce/ProductCard/ProductCard.d.ts

@@ -1,8 +1,11 @@
+import { type FlagVariant } from './ProductCard.styles';
+export type { FlagVariant };
 export interface ProductImage {
     src: string;
     alt: string;
 }
 export interface ProductCardProps {
+    promotionalFlag?: FlagVariant;
     id: string;
     title: string;
     subtitle?: string;
@@ -10,9 +13,7 @@ export interface ProductCardProps {
     price: number;
     originalPrice?: number;
     discountPercent?: number;
-    badge?: string;
     rating?: number;
-    reviewCount?: number;
     installments?: {
         count: number;
         value: number;
@@ -20,11 +21,9 @@ export interface ProductCardProps {
     unavailable?: boolean;
     loading?: boolean;
     onAddToCart?: (id: string) => void;
-    onWishlist?: (id: string) => void;
-    onQuickView?: (id: string) => void;
     onClick?: (id: string) => void;
     formatPrice?: (value: number) => string;
     className?: string;
 }
-export declare function ProductCard({ id, title, subtitle, images, price, originalPrice, discountPercent, badge, rating, reviewCount, installments: installmentsData, unavailable, loading, onAddToCart, onWishlist, onQuickView, onClick, formatPrice, className }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard({ id, title, subtitle, images, price, originalPrice, discountPercent, rating, installments: installmentsData, unavailable, loading, onAddToCart, onClick, formatPrice, className, promotionalFlag, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ProductCard.d.ts.map

package/dist/commerce/ProductCard/ProductCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/commerce/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,YAAY;IAAG,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE;AAC1D,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,YAAY,EAAE,CAAA;IACpE,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5E,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACrE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5F;AAqDD,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAmB,EAAE,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAsD5R"}
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/commerce/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,WAAW,EAcjB,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8DD,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,aAAa,EACb,eAAe,EACf,MAAM,EACN,YAAY,EAAE,gBAAgB,EAC9B,WAAmB,EACnB,OAAe,EACf,WAAW,EACX,OAAO,EACP,WAAW,EACX,SAAS,EACT,eAAe,GAChB,EAAE,gBAAgB,2CA+ElB"}

package/dist/commerce/ProductCard/ProductCard.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card } from '../../components/Card';
+import { Badge } from '../../primitives/Badge';
+import { Button } from '../../primitives/Button';
+import { Body, Flag, Footer, ImageWrapper, Img, Installments, OriginalPrice, Price, ProductTitle, Root, SkeletonBtn, SkeletonImage, SkeletonLine, StarsWrapper, Subtitle, } from './ProductCard.styles';
+const flagLabels = {
+    'jumbo-pesos': 'Jumbo Pesos',
+    'black-days': 'Black Days',
+    'hot-sale': 'Hot Sale',
+    'without-stock': 'Agotado',
+};
+function Stars({ rating }) {
+    return (_jsx(StarsWrapper, { "aria-hidden": "true", children: Array.from({ length: 5 }).map((_, i) => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: i < Math.round(rating) ? '#F9AB00' : 'none', stroke: "#F9AB00", strokeWidth: "1", "aria-hidden": "true", children: _jsx("path", { d: "M6 1l1.39 2.82L10.5 4.27l-2.25 2.19.53 3.09L6 8l-2.78 1.55.53-3.09L1.5 4.27l3.11-.45L6 1z" }) }, i))) }));
+}
+function ProductCardSkeleton() {
+    return (_jsxs("article", { "aria-label": "Cargando producto", style: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            height: '528px',
+            boxSizing: 'border-box',
+            paddingBottom: '8px',
+        }, "aria-busy": "true", children: [_jsxs("div", { children: [_jsx(SkeletonLine, { style: { width: '80%', height: '1rem', margin: '8px auto 8px' } }), _jsx(SkeletonImage, {}), _jsxs("div", { style: { padding: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx(SkeletonLine, { style: { width: '70%' } }), _jsx(SkeletonLine, { style: { width: '100%' } }), _jsx(SkeletonLine, { style: { width: '70%' } }), _jsx(SkeletonLine, { style: { width: '50%' } })] })] }), _jsxs("div", { children: [_jsx(SkeletonBtn, {}), _jsx(SkeletonLine, { style: { width: '70%', marginTop: '8px' } })] })] }));
+}
+export function ProductCard({ id, title, subtitle, images, price, originalPrice, discountPercent, rating, installments: installmentsData, unavailable = false, loading = false, onAddToCart, onClick, formatPrice, className, promotionalFlag, }) {
+    if (loading)
+        return _jsx(ProductCardSkeleton, {});
+    const displayPrice = formatPrice ? formatPrice(price) : String(price);
+    const displayOriginal = originalPrice
+        ? formatPrice
+            ? formatPrice(originalPrice)
+            : String(originalPrice)
+        : undefined;
+    const firstImage = images[0];
+    const media = (_jsxs(_Fragment, { children: [_jsx(Flag, { variant: promotionalFlag, children: promotionalFlag ? flagLabels[promotionalFlag] : '\u00A0' }), _jsx(ImageWrapper, { unavailable: unavailable, children: firstImage && (_jsx(Img, { src: firstImage.src, alt: firstImage.alt, width: 100, height: 100, loading: "lazy" })) })] }));
+    const bodyContent = (_jsxs(Body, { children: [_jsx(Subtitle, { style: { visibility: subtitle ? 'visible' : 'hidden' }, children: subtitle ?? '\u00A0' }), _jsx(ProductTitle, { children: title }), _jsx(Badge, { visible: Boolean(discountPercent), variant: "warning", size: "sm", children: discountPercent ? `-${discountPercent}%` : '\u00A0' }), _jsx(Price, { children: displayPrice }), _jsx(OriginalPrice, { style: { visibility: displayOriginal ? 'visible' : 'hidden' }, children: displayOriginal ?? '\u00A0' }), _jsx(Installments, { style: { visibility: installmentsData ? 'visible' : 'hidden' }, children: installmentsData
+                    ? `${installmentsData.count}x ${formatPrice ? formatPrice(installmentsData.value) : installmentsData.value}`
+                    : '\u00A0' })] }));
+    const footerContent = (_jsxs(Footer, { children: [onAddToCart && (_jsx(Button, { variant: "primary", size: "sm", fullWidth: true, disabled: unavailable, onClick: () => onAddToCart(id), children: "Agregar" })), _jsx(StarsWrapper, { style: { visibility: rating !== undefined ? 'visible' : 'hidden' }, "aria-label": rating !== undefined ? `${rating} de 5 estrellas` : undefined, role: 'img', children: _jsx(Stars, { rating: rating ?? 0 }) })] }));
+    return (_jsx(Root, { className: className, children: _jsx(Card, { media: media, body: bodyContent, footer: footerContent, hoverable: Boolean(onClick), onClick: onClick ? () => onClick(id) : undefined }) }));
+}
+//# sourceMappingURL=ProductCard.js.map

package/dist/commerce/ProductCard/ProductCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../src/commerce/ProductCard/ProductCard.tsx"],"names":[],"mappings":"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"}

package/dist/commerce/ProductCard/ProductCard.styles.d.ts

@@ -0,0 +1,106 @@
+export declare const shimmer: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const Root: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    unavailable?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Img: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export type FlagVariant = 'jumbo-pesos' | 'black-days' | 'hot-sale' | 'without-stock';
+export declare const Flag: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    variant?: FlagVariant;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BadgeOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WishlistBtn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const UnavailableOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UnavailableText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Body: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ProductTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const Subtitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const StarsWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReviewCount: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const PriceWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Price: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const OriginalPrice: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Installments: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Footer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkeletonBase: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkeletonImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const SkeletonLine: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const SkeletonBtn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+//# sourceMappingURL=ProductCard.styles.d.ts.map

package/dist/commerce/ProductCard/ProductCard.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../src/commerce/ProductCard/ProductCard.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO;;;;;UAGnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;yGAIhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;kBAA8B,OAAO;yGAQ7D,CAAC;AAEF,eAAO,MAAM,GAAG;;;gHAUf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC;AA0BtF,eAAO,MAAM,IAAI;;;;cAA0B,WAAW;yGAcrD,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAOxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;qHAuBvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAO9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;2GAK3B,CAAC;AAEF,eAAO,MAAM,IAAI;;;yGAMhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;qHAYxB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;qHAKpB,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;2GAIvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAMxB,CAAC;AAEF,eAAO,MAAM,KAAK;;;2GAOjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;2GAQzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAIxB,CAAC;AAEF,eAAO,MAAM,MAAM;;;yGAIlB,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAUxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;UAIzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;UAGxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;UAGvB,CAAC"}

package/dist/commerce/ProductCard/ProductCard.styles.js

@@ -0,0 +1,212 @@
+import { tokens } from '@danielcruzcode/design-tokens';
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+export const shimmer = keyframes `
+  0% { background-position: -200% 0 }
+  100% { background-position: 200% 0 }
+`;
+export const Root = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+export const ImageWrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: ${tokens.space.sm};
+  ${({ unavailable }) => unavailable && 'opacity: 0.5;'}
+`;
+export const Img = styled.img `
+  width: 100%;
+  height: 100%;
+  max-width: 156px;
+  max-height: 144px;
+  object-fit: cover;
+  transition: transform ${tokens.transition.normal};
+  ${ImageWrapper}:hover & {
+    transform: scale(1.04);
+  }
+`;
+const flagVariantStyles = {
+    'jumbo-pesos': `
+    background-color: ${tokens.color.brand};
+    color: #ffffff;
+  `,
+    'black-days': `
+    background-color: #111111;
+    color: #ffffff;
+  `,
+    'hot-sale': `
+    background-color: #e53935;
+    color: #ffffff;
+  `,
+    'without-stock': `
+    background-color: #EBECF0;
+    color: #0B0C0E;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+    letter-spacing: -0.4px;
+    text-align: center;
+  `,
+};
+export const Flag = styled.div `
+  width: 156px;
+  max-width: 156px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 8px;
+  border-radius: ${tokens.radius.sm};
+  font-family: ${tokens.font.body};
+  font-size: 11px;
+  margin: ${tokens.space.sm} auto 0;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  ${({ variant }) => variant && flagVariantStyles[variant]}
+`;
+export const BadgeOverlay = styled.div `
+  position: absolute;
+  top: ${tokens.space.sm};
+  left: ${tokens.space.sm};
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+export const WishlistBtn = styled.button `
+  position: absolute;
+  top: ${tokens.space.sm};
+  right: ${tokens.space.sm};
+  width: 32px;
+  height: 32px;
+  border-radius: ${tokens.radius.full};
+  border: 1px solid ${tokens.color.border};
+  background-color: ${tokens.color.background};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: ${tokens.color.textMuted};
+  transition: color ${tokens.transition.fast}, border-color ${tokens.transition.fast};
+  &:hover {
+    color: ${tokens.color.danger};
+    border-color: ${tokens.color.danger};
+  }
+  &:focus-visible {
+    outline: 2px solid ${tokens.color.borderFocus};
+    outline-offset: 2px;
+  }
+`;
+export const UnavailableOverlay = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const UnavailableText = styled.span `
+  font-family: ${tokens.font.body};
+  font-size: 13px;
+  font-weight: 600;
+  color: ${tokens.color.textMuted};
+`;
+export const Body = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: ${tokens.space.sm};
+  flex: 1;
+`;
+export const ProductTitle = styled.p `
+  font-family: ${tokens.font.body};
+  font-size: 14px;
+  font-weight: 500;
+  color: ${tokens.color.text};
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  margin: 0;
+  height: 2.5rem;
+`;
+export const Subtitle = styled.p `
+  font-family: ${tokens.font.body};
+  font-size: 12px;
+  color: ${tokens.color.textMuted};
+  margin: 0;
+`;
+export const StarsWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 1rem;
+`;
+export const ReviewCount = styled.span `
+  font-family: ${tokens.font.body};
+  font-size: 12px;
+  color: ${tokens.color.textMuted};
+`;
+export const PriceWrapper = styled.div `
+  display: flex;
+  align-items: baseline;
+  gap: ${tokens.space.sm};
+  flex-wrap: wrap;
+  margin-top: auto;
+`;
+export const Price = styled.span `
+  font-family: ${tokens.font.body};
+  color: ${tokens.color.brand};
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0px;
+`;
+export const OriginalPrice = styled.span `
+  font-family: ${tokens.font.body};
+  color: ${tokens.color.textMuted};
+  text-decoration: line-through;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 14px;
+  letter-spacing: 0px;
+`;
+export const Installments = styled.span `
+  font-family: ${tokens.font.body};
+  font-size: 12px;
+  color: ${tokens.color.textMuted};
+`;
+export const Footer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.space.sm};
+`;
+export const SkeletonBase = styled.div `
+  border-radius: ${tokens.radius.md};
+  background: linear-gradient(
+    90deg,
+    ${tokens.color.surface} 25%,
+    ${tokens.color.surfaceHover} 50%,
+    ${tokens.color.surface} 75%
+  );
+  background-size: 200% 100%;
+  animation: ${shimmer} 1.5s ease-in-out infinite;
+`;
+export const SkeletonImage = styled(SkeletonBase) `
+  width: 156px;
+  height: 144px;
+  margin: 8px auto;
+`;
+export const SkeletonLine = styled(SkeletonBase) `
+  height: 14px;
+  border-radius: ${tokens.radius.sm};
+`;
+export const SkeletonBtn = styled(SkeletonBase) `
+  height: 40px;
+  border-radius: ${tokens.radius.md};
+`;
+//# sourceMappingURL=ProductCard.styles.js.map

package/dist/commerce/ProductCard/ProductCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../src/commerce/ProductCard/ProductCard.styles.ts"],"names":[],"mappings":"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"}

package/dist/commerce/ProductCard/index.js

@@ -0,0 +1,2 @@
+export { ProductCard } from './ProductCard';
+//# sourceMappingURL=index.js.map

package/dist/commerce/ProductCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/commerce/ProductCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/commerce/ProductShelf/ProductShelf.d.ts

@@ -1,8 +1,12 @@
-import { ProductCardProps } from '../ProductCard';
+import { type ProductCardProps } from '../ProductCard';
 type SlidesPerView = number | {
     mobile: number;
     tablet: number;
+    wide?: number;
     desktop: number;
+} | {
+    min: number;
+    max?: number;
 };
 export interface ProductShelfProps {
     products: ProductCardProps[];
@@ -11,12 +15,11 @@ export interface ProductShelfProps {
     autoplayMs?: number;
     slidesPerView?: SlidesPerView;
     onAddToCart?: (id: string) => void;
-    onWishlist?: (id: string) => void;
     onProductClick?: (id: string) => void;
     formatPrice?: (value: number) => string;
     loading?: boolean;
     skeletonCount?: number;
 }
-export declare function ProductShelf({ products, title, autoplay, autoplayMs, slidesPerView, onAddToCart, onWishlist, onProductClick, formatPrice, loading, skeletonCount }: ProductShelfProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductShelf({ products, title, autoplay, autoplayMs, slidesPerView, onAddToCart, onProductClick, formatPrice, loading, skeletonCount, }: ProductShelfProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ProductShelf.d.ts.map

package/dist/commerce/ProductShelf/ProductShelf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductShelf.d.ts","sourceRoot":"","sources":["../../../src/commerce/ProductShelf/ProductShelf.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEnE,KAAK,aAAa,GAAG,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IACrF,aAAa,CAAC,EAAE,aAAa,CAAC;IAAC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjE,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACxE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAA;CACnF;AAKD,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAgB,EAAE,UAAiB,EAAE,aAAoD,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,OAAe,EAAE,aAAiB,EAAE,EAAE,iBAAiB,2CAcvP"}
+{"version":3,"file":"ProductShelf.d.ts","sourceRoot":"","sources":["../../../src/commerce/ProductShelf/ProductShelf.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,KAAK,aAAa,GACd,MAAM,GACN;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAClE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,UAAiB,EACjB,aAAoD,EACpD,WAAW,EACX,cAAc,EACd,WAAW,EACX,OAAe,EACf,aAAiB,GAClB,EAAE,iBAAiB,2CAkCnB"}

package/dist/commerce/ProductShelf/ProductShelf.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '@danielcruzcode/design-tokens';
+import styled from '@emotion/styled';
+import { Carousel } from '../../components/Carousel';
+import { ProductCard } from '../ProductCard';
+const Root = styled.section `display:flex;flex-direction:column;gap:${tokens.space.md};`;
+const Heading = styled.h2 `font-family:${tokens.font.display};font-size:24px;color:${tokens.color.text};margin:0;letter-spacing:0.02em;`;
+export function ProductShelf({ products, title, autoplay = false, autoplayMs = 4000, slidesPerView = { mobile: 1, tablet: 2, desktop: 4 }, onAddToCart, onProductClick, formatPrice, loading = false, skeletonCount = 4, }) {
+    const items = loading
+        ? Array.from({ length: skeletonCount }).map((_, i) => ({
+            id: `skeleton-${i}`,
+            title: '',
+            images: [],
+            price: 0,
+            loading: true,
+        }))
+        : products;
+    return (_jsxs(Root, { "aria-label": title ?? 'Productos', children: [title && _jsx(Heading, { children: title }), _jsx(Carousel, { autoplay: autoplay, autoplayMs: autoplayMs, slidesPerView: slidesPerView, gap: "md", showArrows: true, showDots: true, loop: true, children: items.map((product) => (_jsx(ProductCard, { ...product, onAddToCart: onAddToCart, onClick: onProductClick, formatPrice: formatPrice }, product.id))) })] }));
+}
+//# sourceMappingURL=ProductShelf.js.map

package/dist/commerce/ProductShelf/ProductShelf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductShelf.js","sourceRoot":"","sources":["../../../src/commerce/ProductShelf/ProductShelf.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,WAAW,EAAyB,MAAM,gBAAgB,CAAC;AAoBpE,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAA,0CAA0C,MAAM,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AACxF,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,CAAA,eAAe,MAAM,CAAC,IAAI,CAAC,OAAO,yBAAyB,MAAM,CAAC,KAAK,CAAC,IAAI,kCAAkC,CAAC;AAExI,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,IAAI,EACjB,aAAa,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EACpD,WAAW,EACX,cAAc,EACd,WAAW,EACX,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,CAAC,GACC;IAClB,MAAM,KAAK,GAAuB,OAAO;QACvC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACnD,EAAE,EAAE,YAAY,CAAC,EAAE;YACnB,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,CAAC;YACR,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QACL,CAAC,CAAC,QAAQ,CAAC;IACb,OAAO,CACL,MAAC,IAAI,kBAAa,KAAK,IAAI,WAAW,aACnC,KAAK,IAAI,KAAC,OAAO,cAAE,KAAK,GAAW,EACpC,KAAC,QAAQ,IACP,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAC,IAAI,EACR,UAAU,QACV,QAAQ,QACR,IAAI,EAAE,IAAI,YAET,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACtB,KAAC,WAAW,OAEN,OAAO,EACX,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,cAAc,EACvB,WAAW,EAAE,WAAW,IAJnB,OAAO,CAAC,EAAE,CAKf,CACH,CAAC,GACO,IACN,CACR,CAAC;AACJ,CAAC"}

package/dist/commerce/ProductShelf/index.js

@@ -0,0 +1,2 @@
+export { ProductShelf } from './ProductShelf';
+//# sourceMappingURL=index.js.map

package/dist/commerce/ProductShelf/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/commerce/ProductShelf/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Card/Card.d.ts

@@ -9,5 +9,5 @@ export interface CardProps {
     className?: string;
     padding?: 'none' | 'sm' | 'md' | 'lg';
 }
-export declare function Card({ media, header, body, footer, onClick, hoverable, className, padding }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ media, header, body, footer, onClick, hoverable, className, padding, }: CardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACrG;AAiBD,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAiB,EAAE,SAAS,EAAE,OAAgB,EAAE,EAAE,SAAS,2CAWvH"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAyBD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAiB,EACjB,SAAS,EACT,OAAgB,GACjB,EAAE,SAAS,2CA2BX"}

package/dist/components/Card/Card.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '@danielcruzcode/design-tokens';
+import styled from '@emotion/styled';
+const paddingMap = { none: '0', sm: tokens.space.sm, md: tokens.space.md, lg: tokens.space.lg };
+const StyledArticle = styled.article `
+  display:flex;
+  flex-direction:column;
+  background-color:${tokens.color.background};
+  border-radius:${tokens.radius.md};
+  overflow: hidden;
+  position:relative;
+  transition:box-shadow ${tokens.transition.normal},transform ${tokens.transition.normal};
+  max-width:15rem;
+  height:528px;
+  padding:${({ padding }) => paddingMap[padding]};
+  ${({ hoverable }) => hoverable && `cursor:pointer;&:hover{box-shadow:${tokens.shadow.sm};transform:translateY(-2px);}`}
+`;
+const CardMedia = styled.div `width:100%;overflow:hidden;`;
+const CardHeader = styled.div `padding:${tokens.space.sm} ${tokens.space.md};`;
+const CardBody = styled.div `padding:0 ${tokens.space.sm};flex:1;`;
+const CardFooter = styled.div `padding:${tokens.space.sm};margin-top:auto;`;
+export function Card({ media, header, body, footer, onClick, hoverable = false, className, padding = 'none', }) {
+    const isInteractive = Boolean(onClick);
+    return (_jsxs(StyledArticle, { hoverable: hoverable || isInteractive, padding: padding, className: className, onClick: onClick, role: isInteractive ? 'button' : undefined, tabIndex: isInteractive ? 0 : undefined, onKeyDown: isInteractive
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onClick?.();
+                }
+            }
+            : undefined, children: [media && _jsx(CardMedia, { children: media }), header && _jsx(CardHeader, { children: header }), body && _jsx(CardBody, { children: body }), footer && _jsx(CardFooter, { children: footer })] }));
+}
+//# sourceMappingURL=Card.js.map