@tapcart/mobile-components 0.6.1 → 0.6.2

package/dist/components/hooks/use-collection.d.ts

@@ -0,0 +1,25 @@
+interface Collection {
+    id: string;
+    title: string;
+    handle: string;
+    products: Product[];
+}
+interface UseCollectionProps {
+    apiUrl: string;
+    appId: string;
+    collectionId?: string;
+    collectionHandle?: string;
+    language: string;
+    getCollections?: boolean;
+}
+interface Product {
+    handle: string;
+}
+export declare const useCollection: ({ apiUrl, appId, collectionId, collectionHandle, language, getCollections, }: UseCollectionProps) => {
+    collections: Collection[] | null;
+    specificCollection: Collection | null;
+    loading: boolean;
+    error: string | null;
+};
+export {};
+//# sourceMappingURL=use-collection.d.ts.map

package/dist/components/hooks/use-collection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-collection.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-collection.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAC;CAEhB;AAED,eAAO,MAAM,aAAa,iFAQrB,kBAAkB;;;;;CAwEtB,CAAC"}

package/dist/components/hooks/use-collection.js

@@ -0,0 +1,74 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useState, useEffect } from "react";
+export const useCollection = ({ apiUrl, appId, collectionId, collectionHandle, language, getCollections = false, }) => {
+    const [collections, setCollections] = useState(null);
+    const [specificCollection, setSpecificCollection] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const fetchCollections = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const allCollectionsUrl = `${apiUrl}/collections/by-app-id`;
+                let specificCollectionUrl = null;
+                if (collectionId || collectionHandle) {
+                    // Fetch specific collection by ID or handle
+                    const params = new URLSearchParams({
+                        collectionHandle: collectionHandle || "",
+                        collectionId: collectionId || "",
+                        language,
+                    }).toString();
+                    const collectionBy = collectionHandle ? "by-handle" : "by-id";
+                    specificCollectionUrl = `${apiUrl}/collections/${collectionBy}?${params}`;
+                }
+                const fetchAllCollections = allCollectionsUrl
+                    ? fetch(allCollectionsUrl, {
+                        method: "GET",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                    })
+                    : null;
+                const fetchSpecificCollection = specificCollectionUrl
+                    ? fetch(specificCollectionUrl, {
+                        method: "GET",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                    })
+                    : null;
+                const [allCollectionsResponse, specificCollectionResponse] = yield Promise.all([
+                    fetchAllCollections,
+                    fetchSpecificCollection,
+                ]);
+                if (fetchAllCollections && allCollectionsResponse && !allCollectionsResponse.ok) {
+                    throw new Error(`Failed to fetch all collections: ${allCollectionsResponse.statusText}`);
+                }
+                if (fetchSpecificCollection && specificCollectionResponse && !specificCollectionResponse.ok) {
+                    throw new Error(`Failed to fetch specific collection: ${specificCollectionResponse.statusText}`);
+                }
+                const allCollectionsData = fetchAllCollections && allCollectionsResponse ? yield allCollectionsResponse.json() : null;
+                const specificCollectionData = fetchSpecificCollection && specificCollectionResponse ? yield specificCollectionResponse.json() : null;
+                setCollections(allCollectionsData);
+                setSpecificCollection(specificCollectionData);
+            }
+            catch (error) {
+                console.error("Error fetching collection:", error);
+                setError(error instanceof Error ? error.message : "An unknown error occurred.");
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        fetchCollections();
+    }, [apiUrl, appId, collectionId, collectionHandle, language, getCollections]);
+    return { collections, specificCollection, loading, error };
+};

package/dist/components/hooks/use-products.d.ts

@@ -10,6 +10,6 @@ type UseProductsReturn = {
     error: any;
     isLoading: boolean;
 };
-declare function useProducts({ productIds, baseURL, fetcher, }: UseProductsProps): UseProductsReturn;
-export { useProducts };
+export declare function useProducts(props: UseProductsProps | null): UseProductsReturn;
+export {};
 //# sourceMappingURL=use-products.d.ts.map

package/dist/components/hooks/use-products.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,WAAW,CAAC,EACnB,UAAU,EACV,OAAO,EACP,OAAuD,GACxD,EAAE,gBAAgB,GAAG,iBAAiB,CAStC;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CAc7E"}

package/dist/components/hooks/use-products.js

@@ -1,6 +1,9 @@
 import useSWR from "swr";
-function useProducts({ productIds, baseURL, fetcher = (url) => fetch(url).then((res) => res.json()), }) {
-    const url = `${baseURL}/products/by-ids?ids=${productIds.join(",")}`;
+export function useProducts(props) {
+    const url = props
+        ? `${props.baseURL}/products/by-ids?ids=${props.productIds.join(",")}`
+        : null;
+    const fetcher = (props === null || props === void 0 ? void 0 : props.fetcher) || ((url) => fetch(url).then((res) => res.json()));
     const { data, error } = useSWR(url, fetcher);
     return {
         products: data || [],
@@ -8,4 +11,3 @@ function useProducts({ productIds, baseURL, fetcher = (url) => fetch(url).then((
         isLoading: !data && !error,
     };
 }
-export { useProducts };

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFAyEX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFAoFX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -81,12 +81,17 @@ const labelVariants = cva("truncate", {
 const Button = React.forwardRef((_a, ref) => {
     var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconPosition } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconPosition"]);
     const Comp = asChild ? Slot : "button";
-    const IconButton = () => (icon ? _jsx(Icon, { name: icon, size: "sm" }) : null);
+    const IconButton = () => icon ? _jsx(Icon, { name: icon, size: "sm", style: { color: iconColor } }) : null;
     const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), { "mr-2": iconPosition !== "right" }), style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
+    const LoadingButton = () => (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) })));
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,
             "flex-row-reverse": icon && iconPosition === "right"
-        }), ref: ref }, props, { children: loading ? (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) }))) : size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
+        }), ref: ref }, props, { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
+            React.isValidElement(props.children) ? ( // if children are passed as a valid React element
+        props.children // render it
+        ) : // otherwise use props
+            size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

package/dist/components/ui/chip.js

@@ -65,7 +65,7 @@ const MultipleChips = ({ children, containerRef, }) => {
     useEffect(() => {
         checkOverflow();
     }, [children]);
-    return (_jsxs("div", Object.assign({ className: "relative no-scrollbar" }, { children: [_jsx("div", Object.assign({ ref: containerRef, className: "flex overflow-x-auto overflow-y-hidden", onScroll: checkOverflow }, { children: children.map((chip, index) => (_jsx("div", Object.assign({ className: cn("shrink-0", {
+    return (_jsxs("div", Object.assign({ className: "relative no-scrollbar" }, { children: [_jsx("div", Object.assign({ ref: containerRef, className: "flex overflow-x-auto overflow-y-hidden pt-2", onScroll: checkOverflow }, { children: children.map((chip, index) => (_jsx("div", Object.assign({ className: cn("shrink-0", {
                         "mr-2": index < children.length - 1,
                     }) }, { children: chip }), index))) })), showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })));
 };

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

@@ -8,7 +8,7 @@ declare const favoriteVariants: (props?: ({
 export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
     selected?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    icon?: string;
+    iconUrl?: string;
     showBackground?: boolean;
     cornerRadius?: number;
     layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right";

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

@@ -1 +1 @@
-{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;;mFA0BrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,sBAAsB,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,cAAc,CAAA;CAChG;AAED,QAAA,MAAM,QAAQ,yFAuCb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;;mFA0BrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EACP,sBAAsB,GACtB,WAAW,GACX,UAAU,GACV,aAAa,GACb,cAAc,CAAA;CACnB;AAED,QAAA,MAAM,QAAQ,yFAwCb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/favorite.js

@@ -14,7 +14,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
-const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-primaryShadow active:[&_svg]:text-stateColors-favorites", {
+const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-primaryShadow", {
     variants: {
         size: {
             small: "p-2",
@@ -30,7 +30,7 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-p
             "top-left": "",
             "bottom-left": "",
             "bottom-right": "",
-        }
+        },
     },
     defaultVariants: {
         size: "small",
@@ -39,14 +39,14 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-p
     },
 });
 const Favorite = React.forwardRef((_a, ref) => {
-    var { className, size = "small", selected = false, onClick, icon = "heart-filled", showBackground = false, cornerRadius = 4, layoutType = "below-image-on-right" } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "icon", "showBackground", "cornerRadius", "layoutType"]);
+    var { className, size = "small", selected = false, onClick, iconUrl = "", showBackground = false, cornerRadius = 4, layoutType = "below-image-on-right" } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "iconUrl", "showBackground", "cornerRadius", "layoutType"]);
     return (_jsx("button", Object.assign({ onClick: onClick, ref: ref, className: cn(favoriteVariants({
             size,
             showBackground,
             layoutType,
         }), className), style: {
             borderRadius: `${cornerRadius}px`,
-        } }, props, { children: _jsx(Icon, { name: icon, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm" }) })));
+        } }, props, { children: _jsx(Icon, { url: iconUrl, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm" }) })));
 });
 Favorite.displayName = "Favorite";
 export { Favorite, favoriteVariants };

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

@@ -5,7 +5,7 @@ interface GridType {
     children: React.ReactNode;
 }
 declare const gridVariants: (props?: ({
-    columns?: 3 | 1 | 2 | 4 | null | undefined;
+    columns?: 2 | 1 | 3 | 4 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface GridProps extends GridType, VariantProps<typeof gridVariants> {
 }

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

@@ -1 +1 @@
-{"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,EA6EhB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAwGD,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"}
+{"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,EAuChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AA2DD,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;AA6CD,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,4 +1,4 @@
-'use client';
+"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)
@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 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, IconBolt, IconStar, IconUser, IconBell, IconShoppingBag, IconBottle, IconRosetteDiscountCheck, IconAlignLeft, IconCheese, IconBaselineDensityMedium, IconBrandInstagram, IconListSearch, IconMail, IconMessage2, IconShirt, IconLayoutGrid, IconRosetteDiscount, IconShoe, IconTag, IconWorld, IconLifebuoy, IconDots, IconHanger, IconNotes, IconToolsKitchen2, IconPackage, IconBookmark, IconBuildingStore, IconEyeglass2, IconGift, IconLicense, IconMessage, IconSpeakerphone, IconShoppingCart, IconReceipt2, IconFilePencil, IconPhoto, IconAppWindow, IconBoxMultiple, IconMilk, IconDeviceWatch, IconDeviceIpadHeart, IconMap2, } from "@tabler/icons-react";
+import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconChevronLeft, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff, IconStarFilled, IconShoppingBagPlus, IconShieldCheckFilled, IconShoppingBag, } 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: {
@@ -57,62 +57,13 @@ const icons = {
     "square-check": IconSquareCheck,
     "chevron-up": IconChevronUp,
     "chevron-right": IconChevronRight,
+    "chevron-left": IconChevronLeft,
     "eye-off": IconEyeOff,
     "square-x": IconSquareX,
     circle: IconCircle,
     "chevron-down": IconChevronDown,
     "heart-filled": IconHeartFilled,
-    "menu-icon-about": IconBuildingStore,
-    "menu-icon-account": IconUser,
-    "menu-icon-alerts": IconBell,
-    "menu-icon-bag": IconShoppingBag,
-    "menu-icon-blog": IconAppWindow,
-    // "menu-icon-banana": 
-    "menu-icon-bookmark": IconBookmark,
-    "menu-icon-beer": IconBottle,
-    "menu-icon-cards": IconBoxMultiple,
-    "menu-icon-cart": IconShoppingCart,
-    "menu-icon-carton": IconMilk,
-    "menu-icon-check": IconRosetteDiscountCheck,
-    "menu-icon-cheese": IconCheese,
-    "menu-icon-contact": IconMessage,
-    "menu-icon-delivery": IconPackage,
-    // "menu-icon-dresser": ,
-    "menu-icon-fork": IconToolsKitchen2,
-    "menu-icon-fullhamburger": IconBaselineDensityMedium,
-    "menu-icon-glasses": IconEyeglass2,
-    "menu-icon-globe": IconWorld,
-    "menu-icon-grid": IconLayoutGrid,
-    "menu-icon-hanger": IconHanger,
-    "menu-icon-hamburger": IconAlignLeft,
-    "menu-icon-handcart": IconShoppingBag,
     "menu-icon-heart": IconHeartFilled,
-    "menu-icon-info": IconInfoCircle,
-    "menu-icon-instagram": IconBrandInstagram,
-    "menu-icon-lightning": IconBolt,
-    "menu-icon-lookbook": IconDeviceIpadHeart,
-    "menu-icon-locator": IconMap2,
-    "menu-icon-mail": IconMail,
-    "menu-icon-more": IconDots,
-    "menu-icon-message": IconMessage2,
-    "menu-icon-package": IconGift,
-    "menu-icon-page": IconNotes,
-    "menu-icon-paper": IconLicense,
-    "menu-icon-photos": IconPhoto,
-    "menu-icon-sale": IconRosetteDiscount,
-    "menu-icon-scroll": IconLicense,
-    // "menu-icon-shirt": ,
-    // "menu-icon-shorts": ,
-    "menu-icon-shoes": IconShoe,
-    "menu-icon-speaker": IconSpeakerphone,
-    "menu-icon-star": IconStar,
-    "menu-icon-search": IconListSearch,
-    "menu-icon-support": IconLifebuoy,
-    "menu-icon-tag": IconTag,
-    "menu-icon-term receipt": IconReceipt2,
-    "menu-icon-tshirt": IconShirt,
-    "menu-icon-write": IconFilePencil,
-    "menu-icon-watch": IconDeviceWatch,
     upload: IconUpload,
     "currency-dollar": IconCurrencyDollar,
     x: IconX,
@@ -127,6 +78,10 @@ const icons = {
     "columns-3": IconColumns3,
     search: IconSearch,
     "shopping-cart-off": IconShoppingCartOff,
+    "star-filled": IconStarFilled,
+    "shopping-bag": IconShoppingBag,
+    "shopping-bag-plus": IconShoppingBagPlus,
+    "shield-check-filled": IconShieldCheckFilled,
 };
 const TablerIcon = ({ name, size }) => {
     const IconComponent = icons[name];
@@ -138,8 +93,8 @@ const CustomIcon = ({ url, size, strokeColor, fillColor }) => {
             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);
+                fillColor && path.setAttribute("fill", `var(--${fillColor})`);
+                strokeColor && path.setAttribute("stroke", `var(--${strokeColor})`);
             });
         } }));
 };

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":"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"}
+{"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

@@ -135,7 +135,7 @@ const productCardFavoriteVariants = cva("absolute ", {
     },
 });
 const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, className, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20;
     const { variants, images, title, tags } = product;
     // Select the variant that has the lowest price that is available or just the lowest price if none are available
     let searchVariants = variants.filter((variant) => variant.available);
@@ -217,34 +217,30 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
                                 imageSwipeEnabled
                             })), selected: favorited, onClick: (e) => {
                                 onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
-                            }, icon: ((_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.type) === "internal"
-                                ? (_s = (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.icon) === null || _s === void 0 ? void 0 : _s.url
-                                : undefined, layoutType: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.layoutType, showBackground: (_u = config.favoritesIcon) === null || _u === void 0 ? void 0 : _u.showBackground, cornerRadius: (_v = config.favoritesIcon) === null || _v === void 0 ? void 0 : _v.cornerRadius }))] }))), ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
+                            }, iconUrl: (_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.url, layoutType: (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.layoutType, showBackground: (_s = config.favoritesIcon) === null || _s === void 0 ? void 0 : _s.showBackground, cornerRadius: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.cornerRadius }))] }))), ((_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: (_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.uppercase }, { "text-left": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "left" }, { "text-right": ((_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.textAlignment) === "right" }, { "text-center": ((_0 = config.quickAdd) === null || _0 === void 0 ? void 0 : _0.textAlignment) === "center" }), labelStyle: { fontSize: (_1 = config.quickAdd) === null || _1 === void 0 ? void 0 : _1.fontSize }, variant: "quickadd", size: "default", disabled: product.availableForSale === false, 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: _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 })) }))), ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.uppercase }, {
-                                    "text-left": ((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "left",
+                            }) }, { 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",
                                 }, {
-                                    "text-right": ((_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.textAlignment) === "right",
+                                    "text-right": ((_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.textAlignment) === "right",
                                 }, {
-                                    "text-center": ((_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.textAlignment) === "center",
+                                    "text-center": ((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "center",
                                 }, {
-                                    "line-clamp-2": (_7 = config.productTitle) === null || _7 === void 0 ? void 0 : _7.wrapText,
-                                    "line-clamp-1": !((_8 = config.productTitle) === null || _8 === void 0 ? void 0 : _8.wrapText),
-                                }, "text-textColors-productTitle"), style: { fontSize: (_9 = config.productTitle) === null || _9 === void 0 ? void 0 : _9.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end items-center", { "justify-start": ((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.textAlignment) === "left" }, { "justify-end": ((_11 = config.price) === null || _11 === void 0 ? void 0 : _11.textAlignment) === "right" }, { "justify-center": ((_12 = config.price) === null || _12 === void 0 ? void 0 : _12.textAlignment) === "center" }) }, { children: [((_13 = config.price) === null || _13 === void 0 ? void 0 : _13.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
+                                    "line-clamp-2": (_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.wrapText,
+                                    "line-clamp-1": !((_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.wrapText),
+                                }, "text-textColors-productTitle"), style: { fontSize: (_7 = config.productTitle) === null || _7 === void 0 ? void 0 : _7.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end items-center", { "justify-start": ((_8 = config.price) === null || _8 === void 0 ? void 0 : _8.textAlignment) === "left" }, { "justify-end": ((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.textAlignment) === "right" }, { "justify-center": ((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.textAlignment) === "center" }) }, { children: [((_11 = config.price) === null || _11 === void 0 ? void 0 : _11.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
                                         variant.compareAtPrice &&
-                                        parseFloat((_14 = variant.compareAtPrice) === null || _14 === void 0 ? void 0 : _14.amount) >
+                                        parseFloat((_12 = variant.compareAtPrice) === null || _12 === void 0 ? void 0 : _12.amount) >
                                             parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
-                                        parseFloat((_15 = variant.compareAtPrice) === null || _15 === void 0 ? void 0 : _15.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_16 = config.price) === null || _16 === void 0 ? void 0 : _16.fontSize })), ((_17 = config.favoritesIcon) === null || _17 === void 0 ? void 0 : _17.enabled) &&
+                                        parseFloat((_13 = variant.compareAtPrice) === null || _13 === void 0 ? void 0 : _13.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_14 = config.price) === null || _14 === void 0 ? void 0 : _14.fontSize })), ((_15 = config.favoritesIcon) === null || _15 === void 0 ? void 0 : _15.enabled) &&
                                     config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
                                             onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
-                                        }, size: "small", icon: ((_19 = (_18 = config.favoritesIcon) === null || _18 === void 0 ? void 0 : _18.icon) === null || _19 === void 0 ? void 0 : _19.type) === "internal"
-                                            ? (_21 = (_20 = config.favoritesIcon) === null || _20 === void 0 ? void 0 : _20.icon) === null || _21 === void 0 ? void 0 : _21.url
-                                            : undefined, cornerRadius: (_22 = config.favoritesIcon) === null || _22 === void 0 ? void 0 : _22.cornerRadius, layoutType: (_23 = config.favoritesIcon) === null || _23 === void 0 ? void 0 : _23.layoutType, showBackground: (_24 = config.favoritesIcon) === null || _24 === void 0 ? void 0 : _24.showBackground }) })))] }))] }))] })) })));
+                                        }, size: "small", iconUrl: (_17 = (_16 = config.favoritesIcon) === null || _16 === void 0 ? void 0 : _16.icon) === null || _17 === void 0 ? void 0 : _17.url, cornerRadius: (_18 = config.favoritesIcon) === null || _18 === void 0 ? void 0 : _18.cornerRadius, layoutType: (_19 = config.favoritesIcon) === null || _19 === void 0 ? void 0 : _19.layoutType, showBackground: (_20 = config.favoritesIcon) === null || _20 === void 0 ? void 0 : _20.showBackground }) })))] }))] }))] })) })));
 };
 export { ProductCard };

package/dist/components/ui/quantity-picker.js

@@ -14,10 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
-const IconButton = ({ icon, handler, className }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-8 w-8 bg-stateColors-skeleton outline outline-1 outline-stateColors-skeleton", className) }, { children: _jsx(Icon, { name: icon, size: "sm", color: "coreColors-secondaryIcon" }) })));
+const IconButton = ({ icon, handler, className }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-7 w-7 bg-stateColors-skeleton outline outline-1 outline-stateColors-skeleton", className) }, { children: _jsx(Icon, { name: icon, size: "sm", color: "coreColors-secondaryIcon" }) })));
 const QuantityPicker = React.forwardRef((_a, ref) => {
     var { className, decreaseIcon, increaseIcon, deleteIcon, onDecreaseClick, onIncreaseClick, value, setValue } = _a, props = __rest(_a, ["className", "decreaseIcon", "increaseIcon", "deleteIcon", "onDecreaseClick", "onIncreaseClick", "value", "setValue"]);
-    return (_jsxs("div", Object.assign({ className: cn("flex", className), ref: ref }, props, { children: [_jsx(IconButton, { handler: onDecreaseClick, icon: value === 1 ? deleteIcon : decreaseIcon, className: "rounded-tl rounded-bl" }), _jsx("div", Object.assign({ className: "w-12 py-1 flex justify-center bg-coreColors-inputBackground outline outline-1 outline-coreColors-dividingLines text-[15px] font-sfpro-roboto leading-[160%] font-normal text-textColors-primaryColor" }, { children: _jsx("input", { type: "tel", pattern: "[0-9]*", value: value, onBlur: (e) => (e.target.value = value.toString()), onFocus: (e) => (e.target.value = ""), onChange: (e) => setValue(parseInt(e.target.value) || 0), className: "w-8 focus-visible:outline-none text-center" }) })), _jsx(IconButton, { handler: onIncreaseClick, icon: increaseIcon, className: "rounded-tr rounded-br" })] })));
+    return (_jsxs("div", Object.assign({ className: cn("flex", className), ref: ref }, props, { children: [_jsx(IconButton, { handler: onDecreaseClick, icon: value === 1 ? deleteIcon : decreaseIcon, className: "rounded-tl rounded-bl" }), _jsx("div", Object.assign({ className: "w-8 h-7 py-1 flex justify-center bg-coreColors-inputBackground outline outline-1 outline-coreColors-dividingLines text-[14px] font-sfpro-roboto leading-[160%] font-normal text-textColors-primaryColor" }, { children: _jsx("input", { type: "tel", pattern: "[0-9]*", value: value, onBlur: (e) => (e.target.value = value.toString()), onFocus: (e) => (e.target.value = ""), onChange: (e) => setValue(parseInt(e.target.value) || 0), className: "w-8 focus-visible:outline-none text-center" }) })), _jsx(IconButton, { handler: onIncreaseClick, icon: increaseIcon, className: "rounded-tr rounded-br" })] })));
 });
 QuantityPicker.displayName = "QuantityPicker";
 export { QuantityPicker };

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

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA2CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACnF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA2CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GACpC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/selectors.js

@@ -55,7 +55,7 @@ const SelectorContainer = ({ children, containerRef, className, }) => {
     React.useEffect(() => {
         checkOverflow();
     }, [children]);
-    return (_jsx("div", Object.assign({ className: "relative no-scrollbar" }, { children: _jsxs("div", Object.assign({ className: cn("flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
+    return (_jsx("div", Object.assign({ className: "relative no-scrollbar" }, { children: _jsxs("div", Object.assign({ className: cn("flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none " }))] })) })));
 };
 Selectors.displayName = "Selectors";
 export { SelectorContainer, Selectors, selectorsVariants };

package/dist/components/ui/slider.js

@@ -41,7 +41,7 @@ const Slider = React.forwardRef((_a, ref) => {
     const debouncedSliderVal = useDebounce(value, 200);
     return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "mt-3 mb-6" }, { children: _jsxs(SliderPrimitive.Root, Object.assign({ ref: ref, className: cn("flex relative h-0.5 w-auto items-center select-none", className), onValueChange: (value) => onChange(value), onValueCommit: (value) => {
                         handleCommit(value);
-                    }, defaultValue: defaultValue, value: value, max: max, min: min, step: step }, props, { children: [_jsx(SliderPrimitive.Track, Object.assign({ className: "relative h-1 rounded w-full grow overflow-hidden bg-coreColors-dividingLines" }, { children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-coreColors-brandColorPrimary" }) })), _jsx(SliderPrimitive.Thumb, { className: "block hover:slider-thumb h-4 w-4 rounded-full border-2 border-coreColors-brandColorPrimary bg-coreColors-modalBackground focus-visible:outline-none hover:h-[18px] hover:w-[18px] disabled:pointer-events-none" })] })) })), _jsxs("div", Object.assign({ className: "flex w-auto gap-4 " }, { children: [doubleValue && doubleValue == true ? (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "w-full px-4 py-2 border bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Minimum" })), _jsxs("div", Object.assign({ className: "flex text-textColors-primaryColor text-[15px]" }, { children: ["$", min] }))] })) })), _jsx("div", { className: "w-4 h-0 self-center border-2 bg-coreColors-dividingLines" })] })) : (""), _jsx("div", Object.assign({ className: "w-full px-4 py-2 outline outline-1 outline-coreColors-dividingLines rounded bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "flex items-center h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Maximum" })), _jsxs("div", Object.assign({ className: "flex h-6 text-textColors-primaryColor text-[15px] w-full [&>div]:w-full" }, { children: ["$", _jsx(Input, { className: "border-0 p-0 h-full w-full text-[15px]", id: "slider-maximum", value: debouncedSliderVal[0].toString(), placeholder: defaultValue[0].toString(), onChange: (value) => {
+                    }, defaultValue: defaultValue, value: value, max: max, min: min, step: step }, props, { children: [_jsx(SliderPrimitive.Track, Object.assign({ className: "relative h-1 rounded w-full grow overflow-hidden bg-coreColors-dividingLines" }, { children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-coreColors-brandColorPrimary" }) })), _jsx(SliderPrimitive.Thumb, { className: "block hover:slider-thumb h-4 w-4 rounded-full border-2 border-coreColors-brandColorPrimary bg-coreColors-modalBackground focus-visible:outline-none hover:h-[18px] hover:w-[18px] disabled:pointer-events-none" })] })) })), _jsxs("div", Object.assign({ className: "flex w-auto gap-4 " }, { children: [doubleValue && doubleValue == true ? (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "w-full px-4 py-2 border bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Minimum" })), _jsxs("div", Object.assign({ className: "flex text-textColors-primaryColor text-[14px]" }, { children: ["$", min] }))] })) })), _jsx("div", { className: "w-4 h-0 self-center border-2 bg-coreColors-dividingLines" })] })) : (""), _jsx("div", Object.assign({ className: "w-full px-4 py-2 outline outline-1 outline-coreColors-dividingLines rounded bg-coreColors-inputBackground" }, { children: _jsxs("div", Object.assign({ className: "flex flex-col" }, { children: [_jsx("div", Object.assign({ className: "flex items-center h-4 text-textColors-secondaryColor text-[10px] leading-[13px]" }, { children: "Maximum" })), _jsxs("div", Object.assign({ className: "flex h-6 text-textColors-primaryColor text-[14px] w-full [&>div]:w-full" }, { children: ["$", _jsx(Input, { className: "border-0 p-0 h-full w-full text-[14px]", id: "slider-maximum", value: debouncedSliderVal[0].toString(), placeholder: defaultValue[0].toString(), onChange: (value) => {
                                                 const inputValue = Number(value);
                                                 inputValue > max ? onChange([max]) : onChange([inputValue]);
                                             } })] }))] })) }))] }))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../components/ui/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;mFAgBhB,CAAA;AAEF,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAChD,YAAY,CAAC,OAAO,YAAY,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAEL,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../components/ui/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;mFAgBhB,CAAA;AAEF,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAChD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAUhE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ui/text.js

@@ -17,7 +17,7 @@ const textVariants = cva("", {
         type: {
             h1: "text-[23px] font-fontRegular leading-[130%] font-normal text-textColors-primaryColor",
             h2: "text-lg font-fontMedium leading-[130%] font-medium text-textColors-primaryColor",
-            "body-primary": "text-[15px] font-fontRegular leading-[160%] font-normal text-textColors-primaryColor",
+            "body-primary": "text-[14px] font-fontRegular leading-[160%] font-normal text-textColors-primaryColor",
             "body-secondary": "text-[12px] font-fontRegular leading-[130%] font-normal text-textColors-secondaryColor",
             label: "text-[10px] font-fontRegular leading-[130%] font-normal text-textColors-secondaryColor",
         },
@@ -29,6 +29,6 @@ const textVariants = cva("", {
 function Text(_a) {
     var { className, type, fontColor } = _a, props = __rest(_a, ["className", "type", "fontColor"]);
     const fontColorOverride = fontColor ? { color: fontColor } : {};
-    return _jsx("p", Object.assign({ className: cn(textVariants({ type }), className), style: fontColorOverride }, props));
+    return (_jsx("p", Object.assign({ className: cn(textVariants({ type }), className), style: fontColorOverride }, props)));
 }
 export { Text, textVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../components/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,gBAAgB;;mFAarB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,QAAQ,2FA6Eb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../components/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,gBAAgB;;mFAarB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,QAAQ,2FAkFb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/textarea.js

@@ -48,7 +48,11 @@ const Textarea = React.forwardRef((_a, ref) => {
     return (_jsxs(Comp, Object.assign({ className: cn(textareaVariants({ error }), content ? "pt-6 pb-2" : "pt-4 pb-4", className), onClick: focusTextarea }, { children: [_jsx("textarea", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => {
                     onChange(e.target.value);
                     handleChange(e.target.value);
-                }, id: id, className: cn("textarea-component overflow-y-auto w-full resize-none text-[15px] font-fontRegular leading-[160%] font-normal min-h-[24px] align-top placeholder-shown:!truncate text-textColors-primaryColor ring-offset-background file:border-0 file:bg-transparent placeholder-shown:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer", { "pr-1": (textareaRef.current && maxHeight && textareaRef.current.scrollHeight >= maxHeight) }), style: { maxHeight: `${maxHeight}px` }, "data-text": "Enter text here", rows: 1, ref: textareaRef }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, style: { maxWidth: `-webkit-fill-available` }, className: "absolute truncate text-[10px] pr-4 text-textColors-secondaryColor top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null] })));
+                }, id: id, className: cn("textarea-component overflow-y-auto w-full resize-none text-[14px] font-fontRegular leading-[160%] font-normal min-h-[24px] align-top placeholder-shown:!truncate text-textColors-primaryColor ring-offset-background file:border-0 file:bg-transparent placeholder-shown:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer", {
+                    "pr-1": textareaRef.current &&
+                        maxHeight &&
+                        textareaRef.current.scrollHeight >= maxHeight,
+                }), style: { maxHeight: `${maxHeight}px` }, "data-text": "Enter text here", rows: 1, ref: textareaRef }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, style: { maxWidth: `-webkit-fill-available` }, className: "absolute truncate text-[10px] pr-4 text-textColors-secondaryColor top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null] })));
 });
 Textarea.displayName = "Textarea";
 export { Textarea };

package/dist/components/ui/wishlist-select.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Translations } from "app-studio-types";
+interface SelectProps<T> {
+    children: React.ReactElement<{
+        value: T;
+        onSelect?: () => void;
+        isTrigger?: boolean;
+        isSelected?: boolean;
+        translations: Translations;
+        children: ({ isTrigger, translations, }: {
+            isTrigger: boolean;
+            translations: Translations;
+        }) => React.ReactNode;
+    }>[];
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    onCreateNew?: () => void;
+    translations: Translations;
+}
+declare const WishlistSelect: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    isTrigger?: boolean;
+    children: React.ReactNode;
+}
+declare const WishlistSelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SelectContentProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    className?: string;
+}
+declare const WishlistSelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    onSelect?: () => void;
+    isSelected?: boolean;
+    isTrigger?: boolean;
+    children: React.ReactNode | (({ isTrigger }: {
+        isTrigger: boolean;
+    }) => React.ReactNode);
+}
+declare const WishlistSelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+export { WishlistSelect, WishlistSelectTrigger, WishlistSelectContent, WishlistSelectItem, };
+//# sourceMappingURL=wishlist-select.d.ts.map

package/dist/components/ui/wishlist-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wishlist-select.d.ts","sourceRoot":"","sources":["../../../components/ui/wishlist-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE/C,UAAU,WAAW,CAAC,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;QAC3B,KAAK,EAAE,CAAC,CAAA;QACR,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;QACrB,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,YAAY,EAAE,YAAY,CAAA;QAC1B,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,YAAY,GACb,EAAE;YACD,SAAS,EAAE,OAAO,CAAA;YAClB,YAAY,EAAE,YAAY,CAAA;SAC3B,KAAK,KAAK,CAAC,SAAS,CAAA;KACtB,CAAC,EAAE,CAAA;IACJ,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;CAC3B;AAED,QAAA,MAAM,cAAc,6FAwHnB,CAAA;AAID,UAAU,kBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,qBAAqB,8FAkBzB,CAAA;AAGF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,qBAAqB,2FAkBzB,CAAA;AAGF,UAAU,eACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACjE;AAED,QAAA,MAAM,kBAAkB,wFAmBvB,CAAA;AAGD,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,GACnB,CAAA"}

package/dist/components/ui/wishlist-select.js

@@ -0,0 +1,88 @@
+"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, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { CreateNew, Wishlist } from "./wishlist";
+const WishlistSelect = React.forwardRef(({ children, defaultValue, onChange, onOpenChange, onCreateNew, translations, }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    // useEffect for click outside listener
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isOpen &&
+                triggerRef.current &&
+                contentRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                !contentRef.current.contains(event.target)) {
+                setIsOpen(false);
+                onOpenChange && onOpenChange(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onOpenChange]);
+    const handleSelect = (value) => {
+        setSelectedValue(value);
+        setIsOpen(false);
+        onChange && onChange(value);
+        onOpenChange && onOpenChange(false);
+    };
+    const handleToggle = () => {
+        const newIsOpen = !isOpen;
+        setIsOpen(newIsOpen);
+        onOpenChange && onOpenChange(newIsOpen);
+    };
+    const handleCreateNew = () => {
+        onCreateNew && onCreateNew();
+        setIsOpen(false);
+        onOpenChange && onOpenChange(false);
+    };
+    const selectedChild = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.props.value === selectedValue);
+    return (_jsxs("div", Object.assign({ className: "relative", ref: ref }, { children: [_jsxs(WishlistSelectTrigger, Object.assign({ ref: triggerRef, onClick: handleToggle }, { children: [_jsx(WishlistSelectItem, Object.assign({ isTrigger: true }, { children: selectedChild ? (selectedChild.props.children({ isTrigger: true, translations })) : (_jsx(Wishlist, { name: translations["wishlist-multiple-create-text-field-placeholder"], isTrigger: true, translations: translations })) })), _jsx(ChevronDown, { className: cn("h-4 w-4 opacity-50 mr-4 transition-transform duration-200 ease-in-out", isOpen && "transform rotate-180") })] })), _jsxs(WishlistSelectContent, Object.assign({ isOpen: isOpen, ref: contentRef }, { children: [React.Children.map(children, (child) => React.isValidElement(child)
+                        ? React.cloneElement(child, {
+                            onSelect: () => handleSelect(child.props.value),
+                            isSelected: child.props.value === selectedValue,
+                            translations,
+                        }, child.props.children({ isTrigger: false, translations }))
+                        : child), _jsx("div", Object.assign({ className: "sticky bottom-0 bg-coreColors-inputBackground border-t border-coreColors-dividingLines" }, { children: _jsx(CreateNew, { onClick: handleCreateNew, translations: translations }) }))] }))] })));
+});
+WishlistSelect.displayName = "WishlistSelect";
+const WishlistSelectTrigger = React.forwardRef((_a, ref) => {
+    var { className, children, isTrigger = false } = _a, props = __rest(_a, ["className", "children", "isTrigger"]);
+    return (_jsx("button", Object.assign({ ref: ref, className: cn("flex w-full items-center justify-between rounded-md border border-coreColors-brandColorPrimary bg-coreColors-inputBackground text-sm placeholder:text-coreColors-brandColorPrimary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), style: {
+            WebkitTapHighlightColor: "transparent",
+        } }, props, { children: children })));
+});
+WishlistSelectTrigger.displayName = "WishlistSelectTrigger";
+const WishlistSelectContent = React.forwardRef((_a, ref) => {
+    var { className, children, isOpen } = _a, props = __rest(_a, ["className", "children", "isOpen"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("mt-1 absolute z-50 w-full max-h-[200px] overflow-y-auto rounded-md bg-coreColors-inputBackground shadow-md border border-coreColors-brandColorPrimary", "transition-all duration-300 ease-in-out", isOpen
+            ? "opacity-100 translate-y-0"
+            : "opacity-0 translate-y-[-10px] pointer-events-none", className) }, props, { children: children })));
+});
+WishlistSelectContent.displayName = "WishlistSelectContent";
+const WishlistSelectItem = React.forwardRef((_a, ref) => {
+    var { className, children, onSelect, isSelected, isTrigger } = _a, props = __rest(_a, ["className", "children", "onSelect", "isSelected", "isTrigger"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("relative flex w-full cursor-pointer select-none items-center text-sm outline-none", !isTrigger &&
+            "border-b border-coreColors-dividingLines last:border-b-0", isSelected && "bg-stateColors-skeleton", className), onClick: onSelect }, props, { children: typeof children === "function"
+            ? children({ isTrigger: isTrigger || false })
+            : children })));
+});
+WishlistSelectItem.displayName = "WishlistSelectItem";
+export { WishlistSelect, WishlistSelectTrigger, WishlistSelectContent, WishlistSelectItem, };

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

@@ -1,13 +1,24 @@
 import * as React from "react";
+import { Translations } from "app-studio-types";
 export interface WishlistProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    imgUrl?: string;
-    name: string;
-    amount: number;
+    name?: string;
+    amount?: number;
     selected?: boolean;
     onClick?: () => void;
     className?: string;
+    imgUrl?: string;
+    aspectRatio?: string;
+    objectFit?: "none" | "fit" | "fill" | "cover" | "contain" | "scale-down";
+    isTrigger?: boolean;
+    translations: Translations;
 }
 declare const PlaceholderIcon: () => import("react/jsx-runtime").JSX.Element;
 declare const Wishlist: React.ForwardRefExoticComponent<WishlistProps & React.RefAttributes<HTMLButtonElement>>;
-export { Wishlist, PlaceholderIcon };
+export interface CreateNewProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    selected?: boolean;
+    className?: string;
+    translations: Translations;
+}
+declare const CreateNew: React.ForwardRefExoticComponent<CreateNewProps & React.RefAttributes<HTMLButtonElement>>;
+export { CreateNew, Wishlist, PlaceholderIcon };
 //# sourceMappingURL=wishlist.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"wishlist.d.ts","sourceRoot":"","sources":["../../../components/ui/wishlist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,eAAe,+CAIpB,CAAA;AAED,QAAA,MAAM,QAAQ,yFAuCb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"wishlist.d.ts","sourceRoot":"","sources":["../../../components/ui/wishlist.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAA;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,YAAY,CAAA;CAC3B;AAED,QAAA,MAAM,eAAe,+CAIpB,CAAA;AAED,QAAA,MAAM,QAAQ,yFA+Db,CAAA;AAID,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,YAAY,CAAA;CAC3B;AAED,QAAA,MAAM,SAAS,0FAwBd,CAAA;AAID,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/wishlist.js

@@ -10,14 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @next/next/no-img-element */
 import * as React from "react";
 import { Text } from "./text";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
-const PlaceholderIcon = () => (_jsx("div", Object.assign({ className: "flex-shrink-0 flex items-center justify-center h-10 w-10 bg-stateColors-skeleton rounded-sm" }, { children: _jsx(Icon, { name: "heart-filled", size: "sm", color: "stateColors-disabled" }) })));
+const PlaceholderIcon = () => (_jsx("div", Object.assign({ className: "flex-shrink-0 flex items-center justify-center h-10 w-10 bg-stateColors-skeleton rounded-sm" }, { children: _jsx(Icon, { name: "heart-filled", size: "sm", color: "coreColors-secondaryIcon" }) })));
 const Wishlist = React.forwardRef((_a, ref) => {
-    var { imgUrl, name, amount, selected = false, onClick, className } = _a, props = __rest(_a, ["imgUrl", "name", "amount", "selected", "onClick", "className"]);
-    return (_jsxs("button", Object.assign({ className: cn("flex flex-row items-center px-4 py-2 w-full border-b border-coreColors-dividingLines", selected ? "bg-stateColors-skeleton" : "", className), ref: ref, onClick: onClick }, props, { children: [imgUrl ? (_jsx("img", { alt: "wishlist-image", className: "flex-shrink-0 h-10 w-10 border border-coreColors-dividingLines rounded-sm", src: imgUrl })) : (_jsx(PlaceholderIcon, {})), _jsxs("div", Object.assign({ className: "flex flex-col items-start ml-2 space-y-1 overflow-hidden" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "w-full overflow-hidden text-ellipsis whitespace-nowrap" }, { children: name })), _jsx(Text, Object.assign({ type: "body-secondary", className: "h-4" }, { children: `${amount} item${amount !== 1 ? "s" : ""}` }))] }))] })));
+    var { selected = false, onClick, className, name, amount, imgUrl, aspectRatio, objectFit, isTrigger, translations } = _a, props = __rest(_a, ["selected", "onClick", "className", "name", "amount", "imgUrl", "aspectRatio", "objectFit", "isTrigger", "translations"]);
+    return (_jsxs("button", Object.assign({ className: cn("flex flex-row items-center px-4 py-2 w-full ", selected ? "bg-stateColors-skeleton" : "", className), ref: ref, onClick: onClick }, props, { children: [imgUrl ? (_jsx("div", Object.assign({ className: "flex-shrink-0 h-10 w-10 border border-coreColors-dividingLines rounded-sm overflow-hidden" }, { children: _jsx("img", { alt: "wishlist-image", src: `${imgUrl}?width=40`, width: 40, height: 40, className: cn("rounded-sm w-full h-full", objectFit === "contain" ? "object-contain" : "object-cover") }) }))) : (_jsx(PlaceholderIcon, {})), _jsxs("div", Object.assign({ className: "flex flex-col items-start ml-2 space-y-1 overflow-hidden" }, { children: [isTrigger && _jsx(Text, Object.assign({ type: "body-secondary" }, { children: "Wishlists" })), _jsx(Text, Object.assign({ type: "body-primary", className: "w-full overflow-hidden text-ellipsis whitespace-nowrap" }, { children: name })), !isTrigger && (_jsx(Text, Object.assign({ type: "body-secondary" }, { children: `${amount} ${amount !== 1
+                            ? translations["cart-checkout-items"]
+                            : translations["cart-checkout-item"]}` })))] }))] })));
 });
 Wishlist.displayName = "Wishlist";
-export { Wishlist, PlaceholderIcon };
+const CreateNew = React.forwardRef((_a, ref) => {
+    var { selected = false, onClick, className, translations } = _a, props = __rest(_a, ["selected", "onClick", "className", "translations"]);
+    return (_jsx("button", Object.assign({ className: cn("flex flex-row items-center w-full relative py-2", "active:bg-black/10 transition-colors duration-150", className), ref: ref, onClick: onClick }, props, { children: _jsx("div", Object.assign({ className: "flex flex-col items-center justify-center m-auto space-y-1 overflow-hidden h-10" }, { children: _jsxs(Text, Object.assign({ type: "body-primary", className: "w-full text-center text-coreColors-brandColorPrimary" }, { children: ["+ ", translations["wishlist-dropdown-create-list-button"]] })) })) })));
+});
+CreateNew.displayName = "CreateNew";
+export { CreateNew, Wishlist, PlaceholderIcon };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { cn, cva, getColor } from "./lib/utils";
+export * from "./components/hooks/use-collection";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/use-recommendations";
 export * from "./components/hooks/use-products";
@@ -46,4 +47,5 @@ export * from "./components/ui/use-toast";
 export * from "./components/ui/video";
 export * from "./components/ui/wishlist";
 export * from "./components/hooks/use-product-options";
+export * from "./components/ui/wishlist-select";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC/C,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wCAAwC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC/C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA"}

package/dist/index.js

@@ -1,5 +1,6 @@
 // component exports
 export { cn, cva, getColor } from "./lib/utils";
+export * from "./components/hooks/use-collection";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/use-recommendations";
 export * from "./components/hooks/use-products";
@@ -47,3 +48,4 @@ export * from "./components/ui/use-toast";
 export * from "./components/ui/video";
 export * from "./components/ui/wishlist";
 export * from "./components/hooks/use-product-options";
+export * from "./components/ui/wishlist-select";

package/dist/styles.css

@@ -673,6 +673,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -707,9 +710,15 @@ video {
 .bottom-\[18px\] {
   bottom: 18px;
 }
+.bottom-\[30px\] {
+  bottom: 30px;
+}
 .bottom-\[58px\] {
   bottom: 58px;
 }
+.bottom-\[70px\] {
+  bottom: 70px;
+}
 .end-4 {
   inset-inline-end: 1rem;
 }
@@ -722,6 +731,9 @@ video {
 .left-2 {
   left: 0.5rem;
 }
+.left-4 {
+  left: 1rem;
+}
 .left-6 {
   left: 1.5rem;
 }
@@ -734,6 +746,9 @@ video {
 .right-2 {
   right: 0.5rem;
 }
+.right-4 {
+  right: 1rem;
+}
 .start-10 {
   inset-inline-start: 2.5rem;
 }
@@ -752,6 +767,12 @@ video {
 .top-2 {
   top: 0.5rem;
 }
+.top-4 {
+  top: 1rem;
+}
+.top-\[16px\] {
+  top: 16px;
+}
 .top-\[18px\] {
   top: 18px;
 }
@@ -779,6 +800,9 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
+.m-auto {
+  margin: auto;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -820,12 +844,21 @@ video {
 .mb-6 {
   margin-bottom: 1.5rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
 .ml-4 {
   margin-left: 1rem;
 }
+.mr-0 {
+  margin-right: 0px;
+}
+.mr-0\.5 {
+  margin-right: 0.125rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -952,6 +985,9 @@ video {
 .h-full {
   height: 100%;
 }
+.max-h-\[200px\] {
+  max-height: 200px;
+}
 .max-h-\[240px\] {
   max-height: 240px;
 }
@@ -973,9 +1009,6 @@ video {
 .w-10 {
   width: 2.5rem;
 }
-.w-12 {
-  width: 3rem;
-}
 .w-14 {
   width: 3.5rem;
 }
@@ -1089,10 +1122,22 @@ video {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-\[-10px\] {
+  --tw-translate-y: -10px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-y-\[-50\%\] {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-45 {
   --tw-rotate: 45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1426,6 +1471,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(97 46 255 / var(--tw-bg-opacity));
 }
+.bg-\[rgba\(255\2c 255\2c 255\2c 0\.5\)\] {
+  background-color: rgba(255,255,255,0.5);
+}
 .bg-background {
   background-color: hsl(var(--background));
 }
@@ -1511,6 +1559,10 @@ video {
 .fill-current {
   fill: currentColor;
 }
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1521,6 +1573,9 @@ video {
 .p-1 {
   padding: 0.25rem;
 }
+.p-1\.5 {
+  padding: 0.375rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -1637,6 +1692,9 @@ video {
 .pt-12 {
   padding-top: 3rem;
 }
+.pt-2 {
+  padding-top: 0.5rem;
+}
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1681,6 +1739,9 @@ video {
 .text-\[12px\] {
   font-size: 12px;
 }
+.text-\[14px\] {
+  font-size: 14px;
+}
 .text-\[15px\] {
   font-size: 15px;
 }
@@ -2017,6 +2078,9 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.duration-150 {
+  transition-duration: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -2043,6 +2107,9 @@ video {
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
+.duration-150 {
+  animation-duration: 150ms;
+}
 .duration-200 {
   animation-duration: 200ms;
 }
@@ -2092,6 +2159,14 @@ body::-webkit-scrollbar {
   font-weight: 500;
 }
 
+.placeholder\:text-coreColors-brandColorPrimary::-moz-placeholder {
+  color: var(--coreColors-brandColorPrimary);
+}
+
+.placeholder\:text-coreColors-brandColorPrimary::placeholder {
+  color: var(--coreColors-brandColorPrimary);
+}
+
 .placeholder\:text-stateColors-error::-moz-placeholder {
   color: var(--stateColors-error);
 }
@@ -2108,6 +2183,10 @@ body::-webkit-scrollbar {
   color: var(--textColors-secondaryColor, #727272ff);
 }
 
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
 .placeholder-shown\:\!truncate:-moz-placeholder-shown {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
@@ -2189,6 +2268,10 @@ body::-webkit-scrollbar {
   text-decoration-line: line-through !important;
 }
 
+.hover\:line-through:hover {
+  text-decoration-line: line-through;
+}
+
 .focus\:border-coreColors-brandColorPrimary:focus {
   border-color: var(--coreColors-brandColorPrimary);
 }
@@ -2253,6 +2336,10 @@ body::-webkit-scrollbar {
   --tw-ring-offset-color: hsl(var(--background));
 }
 
+.active\:bg-black\/10:active {
+  background-color: rgb(0 0 0 / 0.1);
+}
+
 .active\:text-coreColors-brandColorPrimary:active {
   color: var(--coreColors-brandColorPrimary);
 }
@@ -2614,6 +2701,13 @@ body::-webkit-scrollbar {
   text-decoration-line: line-through !important;
 }
 
+.\[\&\>span\]\:line-clamp-1>span {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
 .\[\&\[data-state\=open\]\]\:outline-coreColors-brandColorPrimary[data-state=open] {
   outline-color: var(--coreColors-brandColorPrimary);
 }
@@ -2667,7 +2761,3 @@ body::-webkit-scrollbar {
 .\[\&_p\]\:text-stateColors-disabled p {
   color: var(--stateColors-disabled);
 }
-
-.active\:\[\&_svg\]\:text-stateColors-favorites svg:active {
-  color: var(--stateColors-favorites);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -51,6 +51,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
@@ -73,4 +74,4 @@
     "tailwindcss-animate": "^1.0.6",
     "vaul": "^0.9.1"
   }
-}
+}