@tapcart/mobile-components 0.5.3 → 0.5.4

package/dist/components/hooks/use-infinite-scroll.js

@@ -78,13 +78,13 @@ const useInfiniteScroll = ({ initialData, queryVariables: queryVariableProps, })
     return {
         data,
         error,
-        isLoadingInitialData: false,
+        isLoadingInitialData,
         isLoadingMore,
         isEmpty,
         isReachingEnd,
         ref,
         products: data ? data === null || data === void 0 ? void 0 : data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products) : [],
-        isLoading: isLoading,
+        isLoading,
         isValidating,
     };
 };

package/dist/components/hooks/use-scroll-direction.d.ts

@@ -3,6 +3,6 @@ interface ScrollData {
     direction: ScrollDirection;
     scrollY: number;
 }
-declare function useScrollDirection(threshold?: number, throttleDelay?: number): ScrollData;
+declare function useScrollDirection(threshold?: number): ScrollData;
 export { useScrollDirection };
 //# sourceMappingURL=use-scroll-direction.d.ts.map

package/dist/components/hooks/use-scroll-direction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAGA,KAAK,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAE3C,UAAU,UAAU;IAClB,SAAS,EAAE,eAAe,CAAA;IAC1B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,kBAAkB,CACzB,SAAS,GAAE,MAAU,EACrB,aAAa,GAAE,MAAW,GACzB,UAAU,CAmDZ;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAGA,KAAK,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAE3C,UAAU,UAAU;IAClB,SAAS,EAAE,eAAe,CAAA;IAC1B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,kBAAkB,CAAC,SAAS,GAAE,MAAU,GAAG,UAAU,CAqD7D;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/hooks/use-scroll-direction.js

@@ -1,21 +1,13 @@
 "use client";
-import { useState, useEffect, useRef } from "react";
-function useScrollDirection(threshold = 5, throttleDelay = 50) {
+import { useState, useEffect, useRef, useTransition } from "react";
+function useScrollDirection(threshold = 5) {
     const [scrollData, setScrollData] = useState({
         direction: null,
         scrollY: 0,
     });
+    const [isPending, startTransition] = useTransition();
     const lastScrollY = useRef(0);
-    const throttle = (func, limit) => {
-        let inThrottle;
-        return (...args) => {
-            if (!inThrottle) {
-                func(...args);
-                inThrottle = true;
-                setTimeout(() => (inThrottle = false), limit);
-            }
-        };
-    };
+    const isBouncing = useRef(false);
     useEffect(() => {
         if (typeof window === "undefined") {
             return;
@@ -25,18 +17,32 @@ function useScrollDirection(threshold = 5, throttleDelay = 50) {
                 return;
             }
             const scrollY = window.scrollY;
-            const direction = scrollY > lastScrollY.current && scrollY !== 0 ? "down" : "up";
-            if (Math.abs(scrollY - lastScrollY.current) > threshold) {
-                setScrollData({ direction, scrollY });
+            const scrollHeight = document.documentElement.scrollHeight;
+            const clientHeight = document.documentElement.clientHeight;
+            // Detect if the user is at the top or bottom of the page
+            if (scrollY <= 0 || scrollY + clientHeight >= scrollHeight) {
+                isBouncing.current = true;
+            }
+            else {
+                isBouncing.current = false;
+            }
+            // Prevent updating scroll direction if the page is bouncing
+            if (!isBouncing.current &&
+                Math.abs(scrollY - lastScrollY.current) > threshold) {
+                startTransition(() => {
+                    setScrollData({
+                        direction: scrollY > lastScrollY.current ? "down" : "up",
+                        scrollY,
+                    });
+                });
                 lastScrollY.current = scrollY > 0 ? scrollY : 0;
             }
         };
-        const throttledUpdateScrollDirection = throttle(updateScrollDirection, throttleDelay);
-        window.addEventListener("scroll", throttledUpdateScrollDirection);
+        window.addEventListener("scroll", updateScrollDirection);
         return () => {
-            window.removeEventListener("scroll", throttledUpdateScrollDirection);
+            window.removeEventListener("scroll", updateScrollDirection);
         };
-    }, [threshold, throttleDelay]);
+    }, [threshold]);
     return scrollData;
 }
 export { useScrollDirection };

package/dist/components/templates/product-card.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+declare type ProductCardProps = {
+    product: {
+        variants: {
+            compare_at_price: number | undefined;
+            price: number;
+        }[];
+        images: {
+            src: string;
+        }[];
+        title: string;
+        tags: string[];
+    };
+    className: string;
+    scaling: "fit" | "fill";
+    isQuickAddProductEnabled: boolean;
+    isLoading: boolean;
+    badge?: {
+        text: string;
+        variant: "secondary" | "default" | "destructive" | "outline" | null | undefined;
+        className?: string;
+        position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+    };
+    icon?: {
+        name: string;
+        position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+    };
+    quickAdd: (event: React.MouseEvent<HTMLButtonElement>, product: ProductCardProps["product"]) => void;
+    openProduct: (event: React.MouseEvent<HTMLDivElement>, product: ProductCardProps["product"]) => void;
+};
+declare const ProductCard: React.FC<ProductCardProps>;
+export { ProductCard };
+//# sourceMappingURL=product-card.d.ts.map

package/dist/components/templates/product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/templates/product-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,aAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE;QACP,QAAQ,EAAE;YAAE,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;QACnE,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;QACzB,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,EAAE,CAAA;KACf,CAAA;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAA;IACvB,wBAAwB,EAAE,OAAO,CAAA;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EACH,WAAW,GACX,SAAS,GACT,aAAa,GACb,SAAS,GACT,IAAI,GACJ,SAAS,CAAA;QACb,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAA;KAChE,CAAA;IACD,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAA;QACZ,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAA;KAChE,CAAA;IACD,QAAQ,EAAE,CACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAC1C,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KACjC,IAAI,CAAA;IACT,WAAW,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EACvC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KACjC,IAAI,CAAA;CACV,CAAA;AAsBD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkF3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/templates/product-card.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Text } from "./text";
+import { Price } from "./price";
+import { Icon } from "./icon";
+import { Skeleton } from "./skeleton";
+const positionClasses = {
+    topLeft: "absolute top-0 left-0 mt-2",
+    topRight: "absolute top-0 right-0 mt-2",
+    bottomLeft: "absolute bottom-0 left-0 mb-2",
+    bottomRight: "absolute bottom-0 right-0 mb-2",
+};
+var BadgeAlignment;
+(function (BadgeAlignment) {
+    BadgeAlignment["Left"] = "left";
+    BadgeAlignment["Right"] = "right";
+    BadgeAlignment["FullWidth"] = "full-width";
+})(BadgeAlignment || (BadgeAlignment = {}));
+const badgeAlignmentClasses = {
+    topLeft: BadgeAlignment.Left,
+    topRight: BadgeAlignment.Right,
+    bottomLeft: BadgeAlignment.Left,
+    bottomRight: BadgeAlignment.Right,
+};
+const ProductCard = ({ product, scaling, className, badge, icon, quickAdd, openProduct, isQuickAddProductEnabled, isLoading, }) => {
+    const { variants: [variant], images: [{ src }], title, } = product;
+    const badgePosition = (badge === null || badge === void 0 ? void 0 : badge.position) || "topRight";
+    const iconPosition = (icon === null || icon === void 0 ? void 0 : icon.position) || "bottomRight";
+    const scalingClass = scaling === "fit" ? "object-contain" : "object-cover";
+    if (isLoading) {
+        return (_jsxs("div", Object.assign({ className: "w-1/2" }, { children: [_jsx(Skeleton, { className: "w-full h-64" }, void 0), _jsx(Skeleton, { className: "h-6 w-1/2 mt-2" }, void 0), _jsx(Skeleton, { className: "h-6 w-3/4 mt-2" }, void 0)] }), void 0));
+    }
+    return (_jsxs("div", Object.assign({ className: "w-1/2" }, { children: [_jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx("img", { className: `w-full h-full ${scalingClass} ${isQuickAddProductEnabled
+                            ? "rounded-t-lg rounded-b-none"
+                            : "rounded-lg"}`, src: src }, void 0), badge && (_jsx(Badge, Object.assign({ size: "plp-layout", icon: "currency-dollar", className: positionClasses[badgePosition], alignment: badgeAlignmentClasses[badgePosition] }, { children: badge.text }), void 0)), icon && (_jsx(Icon, { name: "HeartFilled", className: positionClasses[iconPosition], color: "stateColors-favorites" }, void 0))] }), void 0), isQuickAddProductEnabled && (_jsx(Button, Object.assign({ variant: "quickadd", size: "sm", onClick: (e) => {
+                    e.stopPropagation();
+                    quickAdd(e, product);
+                } }, { children: "+ Quick add" }), void 0)), _jsx(Price, { price: variant.price, isSale: !!variant.compare_at_price, compareAtPrice: variant.compare_at_price, currency: "USD", locale: "en-US" }, void 0), _jsx(Text, Object.assign({ className: "text-textColors-productTitle" }, { children: title }), void 0)] }), void 0));
+};
+export { ProductCard };

package/dist/components/templates/product-grid.d.ts

@@ -0,0 +1,14 @@
+declare type Product = any;
+interface PageData {
+    products: Product[];
+    cursorBlob?: string;
+}
+interface ProductGridItemsProps {
+    initialData: PageData[];
+    loadMoreProducts: (params: any) => Promise<PageData>;
+    queryVariables: Record<string, any>;
+    config: Record<string, any>;
+}
+declare function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }: ProductGridItemsProps): import("react/jsx-runtime").JSX.Element;
+export { ProductGrid };
+//# sourceMappingURL=product-grid.d.ts.map

package/dist/components/templates/product-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-grid.d.ts","sourceRoot":"","sources":["../../../components/templates/product-grid.tsx"],"names":[],"mappings":"AAkBA,aAAK,OAAO,GAAG,GAAG,CAAA;AAClB,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,qBAAqB;IAC7B,WAAW,EAAE,QAAQ,EAAE,CAAA;IACvB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC5B;AAED,iBAAS,WAAW,CAAC,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,MAAM,GACP,EAAE,qBAAqB,2CAmCvB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/templates/product-grid.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInfiniteScroll } from "../hooks/use-infinite-scroll";
+import { ProductCard } from "./product-card";
+const Loader = () => (_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: Array(4)
+        .fill(0)
+        .map((_, index) => (_jsx("div", { className: "aspect-[2/3] animate-pulse bg-neutral-100 dark:bg-neutral-900" }, index))) }), void 0));
+function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }) {
+    const { data, error, isLoadingInitialData, isLoadingMore, isEmpty, isReachingEnd, ref, products, } = useInfiniteScroll({
+        initialData,
+        loadMoreProducts,
+        queryVariables,
+    });
+    if (error)
+        return _jsx("div", { children: "Failed to load data" }, void 0);
+    if (isLoadingInitialData)
+        return _jsx(Loader, {}, void 0);
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: products.map((product, i) => (_jsx(ProductCard, { 
+                    // @ts-expect-error
+                    product: product, config: config, isLoading: false }, product.handle))) }), void 0), isLoadingMore ? _jsx(Loader, {}, void 0) : _jsx("div", { ref: ref }, void 0)] }, void 0));
+}
+export { ProductGrid };

package/dist/components/ui/Input/input.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { InputProps } from "../../../components/ui/Input/types";
+import { InputProps } from "@/components/ui/Input/types";
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input };
 //# sourceMappingURL=input.d.ts.map

package/dist/components/ui/Input/types.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { VariantProps } from "class-variance-authority";
-import { inputVariants } from "../../../components/ui/Input/useInput";
-import { Color } from "../../../lib/utils";
+import { inputVariants } from "@/components/ui/Input/useInput";
+import { Color } from "@/lib/utils";
 export type BorderSides = ("all" | "bottom" | "left" | "right" | "top")[];
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
     id: string;

package/dist/components/ui/Input/useInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputProps } from "../../../components/ui/Input/types";
+import { InputProps } from "@/components/ui/Input/types";
 export declare const DEFAULT_ICON_SIZE = 20;
 export declare const DEFAULT_X_PADDING = 12;
 export declare const DEFAULT_Y_PADDING = 8;

package/dist/components/ui/badge.d.ts

@@ -7,8 +7,11 @@ declare const badgeVariants: (props?: ({
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     size: "plp-layout" | "carousels";
     icon?: string | null;
+    iconUrl?: string | null;
     type?: "icon-and-text" | "icon-only" | "text-only";
+    backgroundColor?: string | null;
+    fontColor?: string | null;
 }
-declare function Badge({ className, icon, alignment, cornerRadius, type, size, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, icon, iconUrl, alignment, cornerRadius, type, size, backgroundColor, fontColor, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };
 //# sourceMappingURL=badge.d.ts.map

package/dist/components/ui/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,aAAa;;;mFAkClB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,eAAe,GAAG,WAAW,GAAG,WAAW,CAAA;CACnD;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAI,EACJ,SAAS,EACT,YAAwB,EACxB,IAAsB,EACtB,IAAmB,EACnB,GAAG,KAAK,EACT,EAAE,UAAU,2CA0BZ;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,aAAa;;;mFAqDlB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,eAAe,GAAG,WAAW,GAAG,WAAW,CAAA;IAClD,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAwB,EACxB,IAAsB,EACtB,IAAmB,EACnB,eAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CA6BZ;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/badge.js

@@ -19,7 +19,7 @@ const badgeVariants = cva("inline-flex items-center justify-center gap-1 py-1 px
         alignment: {
             start: "",
             end: "",
-            center: "rounded-none w-full",
+            center: "w-full",
         },
         cornerRadius: {
             rounded: "",
@@ -42,11 +42,32 @@ const badgeVariants = cva("inline-flex items-center justify-center gap-1 py-1 px
             cornerRadius: "rounded",
             class: "rounded-tl rounded-bl",
         },
+        {
+            alignment: "center",
+            cornerRadius: "rounded",
+            class: "rounded",
+        },
+        {
+            alignment: "start",
+            cornerRadius: "circle",
+            class: "rounded-tr-2xl rounded-br-2xl",
+        },
+        {
+            alignment: "end",
+            cornerRadius: "circle",
+            class: "rounded-tl-2xl rounded-bl-2xl",
+        },
+        {
+            alignment: "center",
+            cornerRadius: "circle",
+            class: "rounded-2xl",
+        },
     ]
 });
 function Badge(_a) {
-    var { className, icon, alignment, cornerRadius = "rounded", type = "icon-and-text", size = "plp-layout" } = _a, props = __rest(_a, ["className", "icon", "alignment", "cornerRadius", "type", "size"]);
-    const BadgeText = () => (_jsx(Text, Object.assign({ type: size === "plp-layout" ? "body-primary" : "body-secondary", className: "text-productBadging-text" }, { children: props.children })));
-    return (_jsx("div", Object.assign({ className: cn(badgeVariants({ alignment, cornerRadius }), className) }, props, { children: type === "icon-and-text" ? (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { name: icon, size: size === "carousels" ? "xs" : "sm" })), _jsx(BadgeText, {})] })) : type === "icon-only" && icon ? (_jsx(Icon, { name: icon, size: size === "carousels" ? "xs" : "sm" })) : (_jsx(BadgeText, {})) })));
+    var { className, icon, iconUrl, alignment, cornerRadius = "rounded", type = "icon-and-text", size = "plp-layout", backgroundColor, fontColor } = _a, props = __rest(_a, ["className", "icon", "iconUrl", "alignment", "cornerRadius", "type", "size", "backgroundColor", "fontColor"]);
+    const backgroundColorOverride = backgroundColor ? { backgroundColor } : {};
+    const BadgeText = () => (_jsx(Text, Object.assign({ type: size === "plp-layout" ? "body-primary" : "body-secondary", className: "text-productBadging-text", fontColor: fontColor }, { children: props.children })));
+    return (_jsx("div", Object.assign({ className: cn(badgeVariants({ alignment, cornerRadius }), className), style: backgroundColorOverride }, props, { children: type === "icon-and-text" ? (_jsxs(_Fragment, { children: [(icon || iconUrl) && (_jsx(Icon, { name: icon, url: iconUrl, strokeColor: fontColor, fillColor: fontColor, size: size === "carousels" ? "xs" : "sm" })), _jsx(BadgeText, {})] })) : type === "icon-only" && icon ? (_jsx(Icon, { name: icon, url: iconUrl, strokeColor: fontColor, fillColor: fontColor, size: size === "carousels" ? "xs" : "sm" })) : (_jsx(BadgeText, {})) })));
 }
 export { Badge, badgeVariants };

package/dist/components/ui/button.js

@@ -32,7 +32,7 @@ const buttonVariants = cva("w-full flex rounded items-center justify-center tran
             secondary: "bg-buttonColors-secondaryFill border border-buttonColors-secondaryOutlineColor disabled:bg-buttonColors-secondaryFill disabled:text-stateColors-disabled shadow-secondary",
             ghost: "hover:bg-accent",
             link: "underline-offset-4 hover:underline disabled:text-stateColors-disabled disabled:bg-transparent",
-            quickadd: "bg-buttonColors-primaryFill border border-buttonColors-primaryOutlineColor w-full rounded-none rounded-b-lg h-8 text-xs",
+            quickadd: "bg-buttonColors-primaryFill w-full rounded-none rounded-b-lg h-8 text-xs border border-buttonColors-primaryOutlineColor py-2",
             applePay: "bg-white border border-black",
             shopPay: "bg-[#612EFF]",
         },
@@ -69,7 +69,7 @@ const labelVariants = cva("truncate", {
             secondary: "text-buttonColors-secondaryText",
             ghost: "hover:text-accent-foreground",
             link: "text-textColors-primaryColor",
-            quickadd: "text-buttonColors-primaryText",
+            quickadd: "text-buttonColors-primaryText text-xs",
             applePay: "text-black border",
             shopPay: "",
         },

package/dist/components/ui/color-swatch.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+declare const colorSwatchVariants: (props?: ({
+    overflow?: "wrap" | "horizontal-scroll" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface Color {
+    color: string;
+    disabled?: boolean;
+    selected?: boolean;
+}
+interface Img {
+    url: string;
+    disabled?: boolean;
+    selected?: boolean;
+}
+interface ColorSwatchProps extends VariantProps<typeof colorSwatchVariants> {
+    className?: string;
+    items: Color[] | Img[];
+    onSelect: (color: Color | Img) => void;
+    shape: "rectangle" | "circle";
+    type: "color" | "image";
+}
+declare const ColorSwatch: React.FC<ColorSwatchProps>;
+export { ColorSwatch, type ColorSwatchProps, type Color, type Img };
+//# sourceMappingURL=color-swatch.d.ts.map

package/dist/components/ui/color-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.d.ts","sourceRoot":"","sources":["../../../components/ui/color-swatch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAI5D,QAAA,MAAM,mBAAmB;;mFAWvB,CAAA;AAEF,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,GAAG;IACX,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,KAAK,EAAE,GAAG,GAAG,EAAE,CAAA;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAA;IAC7B,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsD3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,KAAK,EAAE,KAAK,GAAG,EAAE,CAAA"}

package/dist/components/ui/color-swatch.js

@@ -0,0 +1,44 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const colorSwatchVariants = cva("grid grid-flow-col w-full gap-x-2 gap-y-2", {
+    variants: {
+        overflow: {
+            "horizontal-scroll": "overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+            wrap: "flex flex-wrap",
+        },
+    },
+    defaultVariants: {
+        overflow: "horizontal-scroll",
+    },
+});
+const ColorSwatch = (_a) => {
+    var { className, onSelect, shape = "rectangle", overflow = "horizontal-scroll", items, type } = _a, props = __rest(_a, ["className", "onSelect", "shape", "overflow", "items", "type"]);
+    return (_jsx("div", Object.assign({ className: cn(colorSwatchVariants({ overflow }), className) }, props, { children: items.map((item, index) => {
+            return (_jsx("button", Object.assign({ className: cn("border border-transparent rounded-sm", {
+                    "border-coreColors-brandColorPrimary": item.selected,
+                    "rounded-sm": shape === "rectangle",
+                    "rounded-full": shape === "circle",
+                }), onClick: () => onSelect(item) }, { children: _jsx("div", Object.assign({ className: cn("relative h-[22px] w-[22px] border border-coreColors-dividingLines bg-contain", {
+                        "rounded-sm": shape === "rectangle",
+                        "rounded-full": shape === "circle",
+                    }), style: {
+                        backgroundColor: type === "color" ? item.color : "",
+                        borderColor: item.selected ? "#FFF" : "",
+                        backgroundImage: type === "image" ? `url(${item.url})` : "",
+                    } }, { children: item.disabled ? (_jsx("div", Object.assign({ className: "absolute flex items-center justify-center", style: { inset: shape === "rectangle" ? 0 : 2 } }, { children: _jsx("div", { className: "w-full h-[1px] bg-white transform rotate-45 rounded" }) }))) : null }), index) })));
+        }) })));
+};
+export { ColorSwatch };

package/dist/components/ui/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAIhD,QAAA,MAAM,aAAa,+HAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,8DAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,6HAAwB,CAAA;AAEzC,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAEpE,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAE/D,CAAA;AAGD,QAAA,MAAM,aAAa;;wCAejB,CAAA;AAGF,QAAA,MAAM,iBAAiB;;;;;;wCA0CtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,+LASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CAoBnB,CAAA;AAED,QAAA,MAAM,aAAa;cAA8B,MAAM,SAAS;6CAE/D,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAIhD,QAAA,MAAM,aAAa,+HAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,8DAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,6HAAwB,CAAA;AAEzC,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAEpE,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAS/D,CAAA;AAGD,QAAA,MAAM,aAAa;;wCAejB,CAAA;AAGF,QAAA,MAAM,iBAAiB;;;;;;wCA0CtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,+LASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CA8BnB,CAAA;AAED,QAAA,MAAM,aAAa;cAA8B,MAAM,SAAS;6CAE/D,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}

package/dist/components/ui/drawer.js

@@ -20,7 +20,7 @@ const DrawerPortal = DrawerPrimitive.Portal;
 const DrawerClose = DrawerPrimitive.Close;
 const Drawer = (_a) => {
     var { shouldScaleBackground } = _a, props = __rest(_a, ["shouldScaleBackground"]);
-    return _jsx(DrawerPrimitive.Root, Object.assign({ shouldScaleBackground: true }, props));
+    return (_jsx(DrawerPrimitive.Root, Object.assign({ shouldScaleBackground: true }, props, { noBodyStyles: true, disablePreventScroll: true })));
 };
 Drawer.displayName = "Drawer";
 const DrawerOverlay = React.forwardRef((_a, ref) => {

package/dist/components/ui/favorite.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 declare const favoriteVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
     showBackground?: boolean | null | undefined;
-    layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right" | null | undefined;
+    layoutType?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "below-image-on-right" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
     selected?: boolean;

package/dist/components/ui/icon.d.ts

@@ -6,8 +6,11 @@ declare const iconVariants: (props?: ({
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface IconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof iconVariants> {
-    name?: string;
+    name?: string | null;
+    url?: string | null;
+    fillColor?: string | null;
+    strokeColor?: string | null;
 }
-declare function Icon({ className, name, size, color, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ className, name, size, color, fillColor, strokeColor, url, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export { Icon, iconVariants, IconPencilMinus };
 //# sourceMappingURL=icon.d.ts.map

package/dist/components/ui/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAkChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAsDD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAczE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAkChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAsDD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B;AA8CD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,SAAS,EACT,WAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,2CAgBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/icon.js

@@ -1,3 +1,4 @@
+'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,8 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactSVG } from "react-svg";
 import { cva } from "class-variance-authority";
-import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff } from "@tabler/icons-react";
+import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff, } from "@tabler/icons-react";
 import { cn, iconColorVariantClasses } from "../../lib/utils";
 const iconVariants = cva("inline-flex items-center justify-center text-sm font-medium  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", {
     variants: {
@@ -76,9 +78,23 @@ const icons = {
     search: IconSearch,
     "shopping-cart-off": IconShoppingCartOff,
 };
-function Icon(_a) {
-    var { className, name, size = "md", color } = _a, props = __rest(_a, ["className", "name", "size", "color"]);
+const TablerIcon = ({ name, size }) => {
     const IconComponent = icons[name];
-    return (_jsxs("div", Object.assign({ className: cn(iconVariants({ color, size, className })) }, props, { children: [IconComponent ? (_jsx(IconComponent, { size: sizeMapping[size], strokeWidth: strokeWidthMapping[size] })) : null, props.children] })));
+    return IconComponent ? (_jsx(IconComponent, { size: sizeMapping[size], strokeWidth: strokeWidthMapping[size] })) : null;
+};
+const CustomIcon = ({ url, size, strokeColor, fillColor }) => {
+    return (_jsx(ReactSVG, { src: url, beforeInjection: (svg) => {
+            svg.setAttribute("style", `width: ${sizeMapping[size]}px; height: ${sizeMapping[size]}px`);
+            const paths = svg.querySelectorAll("path");
+            paths.forEach((path) => {
+                path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
+                fillColor && path.setAttribute("fill", fillColor);
+                strokeColor && path.setAttribute("stroke", strokeColor);
+            });
+        } }));
+};
+function Icon(_a) {
+    var { className, name, size = "md", color, fillColor, strokeColor, url } = _a, props = __rest(_a, ["className", "name", "size", "color", "fillColor", "strokeColor", "url"]);
+    return (_jsxs("div", Object.assign({ className: cn(iconVariants({ size, color, className })) }, props, { children: [url ? (_jsx(CustomIcon, { url: url, size: size, strokeColor: strokeColor, fillColor: fillColor })) : (_jsx(TablerIcon, { name: name, size: size })), props.children] })));
 }
 export { Icon, iconVariants, IconPencilMinus };

package/dist/components/ui/price.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":"AAKA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAC;CAClD;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAa,EACb,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,GACnB,EAAE,UAAU,2CAsGZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":"AAIA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAC;CAClD;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,GACnB,EAAE,UAAU,2CAiEZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/price.js

@@ -1,13 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Money } from "./money";
 import { Text } from "./text";
 import { cn } from "../../lib/utils";
-function Price({ price, priceHigh = 0, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', }) {
-    return (_jsx(_Fragment, { children: priceRanges ? (_jsx(_Fragment, { children: isSale &&
-                compareAtPrice !== undefined &&
-                compareAtPriceHigh !== undefined ? (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsxs(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx("div", { className: cn("flex flex-wrap gap-2", {
-                                    "ml-auto": textAlignment === 'right',
-                                    "mr-auto": textAlignment === 'center',
-                                }) }), _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), " -", " ", priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))] })), _jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }), " ", "-", " ", _jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale })] }))] }))) : (_jsxs(Text, Object.assign({ className: "text-textColors-priceText", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), " -", " ", priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))) })) : (_jsx(_Fragment, { children: isSale && compareAtPrice !== undefined ? (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsx(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: _jsx("span", Object.assign({ className: "mr-2" }, { children: _jsx(Money, { price: price, currency: currency, locale: locale }) })) })), _jsx(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize } }, { children: _jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }) }))] }))) : (_jsx(Text, Object.assign({ className: "text-textColors-priceText", style: { fontSize: `${fontSize}px` } }, { children: _jsx(Money, { price: price, currency: currency, locale: locale }) }))) })) }));
+function Price({ price, priceHigh, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', }) {
+    const Spacer = () => (_jsx("span", { children: " - " }));
+    const ProductPrice = () => {
+        const colorClass = isSale ? 'text-textColors-salePriceText' : 'text-textColors-priceText';
+        return (_jsxs(Text, Object.assign({ className: `${colorClass} flex-shrink-0`, style: { fontSize: `${fontSize}px` } }, { children: [_jsx("div", { className: cn("flex flex-wrap gap-2", {
+                        "ml-auto": textAlignment === 'right',
+                        "mr-auto": textAlignment === 'center',
+                    }) }), _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), priceRanges && priceHigh !== undefined && _jsx(Spacer, {}), priceRanges && priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))] })));
+    };
+    const StrikeThroughPrice = () => {
+        if (!isSale || !compareAtPrice)
+            return null;
+        return (_jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }), priceRanges && compareAtPriceHigh && _jsx(Spacer, {}), priceRanges && compareAtPriceHigh && (_jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale }))] })));
+    };
+    return (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsx(ProductPrice, {}), _jsx(StrikeThroughPrice, {})] })));
 }
 export { Price };

package/dist/components/ui/product-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAG1C,KAAK,MAAM,GAAG;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE;QACb,OAAO,EAAE,OAAO,CAAA;QAChB,YAAY,EAAE,MAAM,CAAA;QACpB,iBAAiB,EAAE,OAAO,CAAA;KAC3B,CAAA;IACD,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAA;KAClD,CAAA;IACD,YAAY,CAAC,EAAE;QACb,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,OAAO,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,QAAQ,EAAE,OAAO,CAAA;KAClB,CAAA;IACD,QAAQ,CAAC,EAAE;QACT,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,OAAO,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,aAAa,CAAC,EAAE;QACd,OAAO,EAAE,OAAO,CAAA;QAChB,UAAU,EACN,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,sBAAsB,CAAA;QAC1B,cAAc,EAAE,OAAO,CAAA;QACvB,YAAY,EAAE,MAAM,CAAA;QACpB,IAAI,EAAE;YACJ,IAAI,EAAE,UAAU,CAAA;YAChB,GAAG,EAAE,QAAQ,CAAA;YACb,OAAO,CAAC,EAAE,MAAM,CAAA;SACjB,CAAA;KACF,CAAA;CACF,CAAA;AAED,KAAK,SAAS,GAAG;IACf,kBAAkB,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC/C,YAAY,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;IAC7C,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,CAAA;AAMD,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,gBAAgB,EAAE;QAChB,GAAG,EAAE;YACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;YACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;YACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;SACzB,CAAA;KACF,CAAA;IACD,KAAK,EAAE;QACL,aAAa,EAAE;YACb,WAAW,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;YAClC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAA;SACxB,CAAA;KACF,CAAA;CACF,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,WAAW,CAAA;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,CAChB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,UAAU,CAAC,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA8HD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuU3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/product-card.js

@@ -6,6 +6,7 @@ import { Button } from "./button";
 import { Text } from "./text";
 import * as React from "react";
 import { Price } from "./price";
+import { Icon } from "./icon";
 import { Skeleton } from "./skeleton";
 import { cn } from "../../lib/utils";
 import { cva } from "class-variance-authority";
@@ -221,10 +222,10 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
                                 : undefined, layoutType: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.layoutType }))] }))), ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
                         borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
                         borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
-                    }, labelClassName: cn("outline-0 w-full", { uppercase: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.uppercase }, { "text-left": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "left" }, { "text-right": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "right" }, { "text-center": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "center" }), labelStyle: { fontSize: (_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
+                    }, labelClassName: cn("outline-0 w-full", { uppercase: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.uppercase }, { "text-left": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "left" }, { "text-right": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "right" }, { "text-center": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "center" }), labelStyle: { fontSize: (_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.fontSize }, variant: "quickadd", size: "default", disabled: product.availableForSale === false, onClick: (e) => {
                         e.stopPropagation();
                         onQuickAdd === null || onQuickAdd === void 0 ? void 0 : onQuickAdd(e, product);
-                    } }, { children: "+ Quick add" }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
+                    } }, { children: _jsxs("div", Object.assign({ className: "flex items-center justify-center gap-2" }, { children: [_jsx(Icon, { name: product.availableForSale ? "plus" : "shopping-cart-off", size: "xs" }), product.availableForSale ? "Quick Add" : "Sold Out"] })) }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
                                 "justify-end": belowBadge.horizontalPosition === "end",
                             }) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.uppercase }, {
                                     "text-left": ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.textAlignment) === "left",