@tapcart/mobile-components 0.6.8 → 0.6.9

package/dist/components/hooks/use-product-options.d.ts

@@ -1,6 +1,6 @@
 import { ProductVariant } from "app-studio-types";
 type SelectedOptions = Record<string, string>;
-export declare function useProductOptions(variants: ProductVariant[] | undefined | null): {
+export declare function useProductOptions(variants: ProductVariant[] | undefined | null, selectedVariantId?: string | null): {
     selectedOptions: SelectedOptions;
     handleSelect: (optionName: string, optionValue: string) => void;
     selectedVariant: ProductVariant | undefined;

package/dist/components/hooks/use-product-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-product-options.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-product-options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE7C,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,cAAc,EAAE,GAAG,SAAS,GAAG,IAAI;;+BAyCX,MAAM,eAAe,MAAM,KAAG,IAAI;;EAwBrE"}
+{"version":3,"file":"use-product-options.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-product-options.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE7C,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,cAAc,EAAE,GAAG,SAAS,GAAG,IAAI,EAC7C,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI;;+BA0DC,MAAM,eAAe,MAAM,KAAG,IAAI;;EAwBrE"}

package/dist/components/hooks/use-product-options.js

@@ -1,6 +1,6 @@
 "use client";
-import { useState, useEffect, useMemo } from "react";
-export function useProductOptions(variants) {
+import { useState, useEffect, useMemo, useCallback } from "react";
+export function useProductOptions(variants, selectedVariantId) {
     const safeVariants = useMemo(() => variants || [], [variants]);
     const getCheapestProductFromVariants = useMemo(() => {
         return () => {
@@ -15,26 +15,40 @@ export function useProductOptions(variants) {
             });
         };
     }, [safeVariants]);
-    const initializeSelectedOptions = useMemo(() => {
-        return () => {
-            const lowestPriceVariant = getCheapestProductFromVariants();
-            if (lowestPriceVariant) {
-                const selectedOptions = {};
-                lowestPriceVariant.selectedOptions.forEach((option) => {
-                    selectedOptions[option.name] = option.value;
-                });
-                return selectedOptions;
-            }
-            return {};
+    const getSelectedOptions = useMemo(() => {
+        return (variant) => {
+            const selectedOptions = {};
+            variant.selectedOptions.forEach((option) => {
+                selectedOptions[option.name] = option.value;
+            });
+            return selectedOptions;
         };
-    }, [getCheapestProductFromVariants]);
-    const [selectedOptions, setSelectedOptions] = useState(initializeSelectedOptions());
+    }, []);
+    const getVariantById = useMemo(() => {
+        return (variantId) => {
+            return safeVariants.find((variant) => variant.id === variantId);
+        };
+    }, [safeVariants]);
+    const initializeSelectedOptions = useCallback((selectedVariantId) => {
+        if (selectedVariantId) {
+            const variant = getVariantById(selectedVariantId);
+            if (variant) {
+                return getSelectedOptions(variant);
+            }
+        }
+        const lowestPriceVariant = getCheapestProductFromVariants();
+        if (lowestPriceVariant) {
+            return getSelectedOptions(lowestPriceVariant);
+        }
+        return {};
+    }, [getCheapestProductFromVariants, getSelectedOptions, getVariantById]);
+    const [selectedOptions, setSelectedOptions] = useState(initializeSelectedOptions(selectedVariantId));
     const handleSelect = (optionName, optionValue) => {
         setSelectedOptions((prevOptions) => (Object.assign(Object.assign({}, prevOptions), { [optionName]: optionValue })));
     };
     useEffect(() => {
-        setSelectedOptions(initializeSelectedOptions());
-    }, [safeVariants, initializeSelectedOptions]);
+        setSelectedOptions(initializeSelectedOptions(selectedVariantId));
+    }, [safeVariants, initializeSelectedOptions, selectedVariantId]);
     const selectedVariant = useMemo(() => safeVariants.find((v) => v.selectedOptions.every((o) => selectedOptions[o.name] === o.value)), [safeVariants, selectedOptions]);
     return {
         selectedOptions,

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

@@ -8,6 +8,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     asChild?: boolean;
     loading?: boolean;
     icon?: string;
+    iconUrl?: string;
     labelClassName?: string;
     labelStyle?: React.CSSProperties | undefined;
     iconColor?: string;

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,uFAoFX,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,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,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,uFAqFX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -79,10 +79,10 @@ 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"]);
+    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconPosition, iconUrl } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconPosition", "iconUrl"]);
     const Comp = asChild ? Slot : "button";
-    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 IconButton = () => icon || iconUrl ? _jsx(Icon, { name: icon, size: "sm", style: { color: iconColor } }) : null;
+    const BasicButton = () => (_jsxs(_Fragment, { children: [icon || iconUrl ? (_jsx(Icon, { name: iconUrl ? undefined : icon, url: iconUrl, 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,

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

@@ -18,6 +18,7 @@ declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("../
 declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("../../components/ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 type CarouselDotsProps = {
     maxDots?: number;
+    dotColor?: string;
 };
 declare const CarouselDots: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselDotsProps & React.RefAttributes<HTMLDivElement>>;
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots, };

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../components/ui/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAA;AAM7B,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;IACnC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;CAC9C,CAAA;AAuBD,QAAA,MAAM,QAAQ,6HAkHb,CAAA;AAGD,QAAA,MAAM,eAAe,6GAmBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAmBhB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kLA0BpB,CAAA;AAGF,QAAA,MAAM,YAAY,kLA0BhB,CAAA;AAIF,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,QAAA,MAAM,YAAY,iIA8ChB,CAAC;AAGH,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,CAAA"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../components/ui/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAA;AAM7B,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;IACnC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;CAC9C,CAAA;AAuBD,QAAA,MAAM,QAAQ,6HAkHb,CAAA;AAGD,QAAA,MAAM,eAAe,6GAmBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAmBhB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kLA0BpB,CAAA;AAGF,QAAA,MAAM,YAAY,kLA0BhB,CAAA;AAIF,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,QAAA,MAAM,YAAY,iIA4ChB,CAAC;AAGH,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,CAAA"}

package/dist/components/ui/carousel.js

@@ -117,7 +117,7 @@ const CarouselNext = React.forwardRef((_a, ref) => {
 });
 CarouselNext.displayName = "CarouselNext";
 const CarouselDots = React.forwardRef((_a, ref) => {
-    var { maxDots = 5 } = _a, props = __rest(_a, ["maxDots"]);
+    var { maxDots = 5, dotColor = "var(--coreColors-brandColorPrimary)" } = _a, props = __rest(_a, ["maxDots", "dotColor"]);
     const { api } = useCarousel();
     const [_, setUpdateState] = React.useState(false);
     const toggleUpdateState = React.useCallback(() => setUpdateState((prevState) => !prevState), []);
@@ -134,9 +134,10 @@ const CarouselDots = React.forwardRef((_a, ref) => {
     const numberOfSlides = Math.min((api === null || api === void 0 ? void 0 : api.scrollSnapList().length) || 0, maxDots);
     const currentSlide = Math.min((api === null || api === void 0 ? void 0 : api.selectedScrollSnap()) || 0, maxDots - 1);
     if (numberOfSlides > 1) {
-        return (_jsx("div", Object.assign({ ref: ref, className: `flex justify-center ${props.className}` }, { children: Array.from({ length: numberOfSlides }, (_, i) => (_jsx(Button, { className: `mx-1 h-1.5 w-1.5 rounded-full p-0 border-none ${i === currentSlide
-                    ? 'bg-coreColors-brandColorPrimary'
-                    : 'bg-coreColors-brandColorPrimary opacity-50'}`, "aria-label": `Go to slide ${i + 1}`, onClick: () => api === null || api === void 0 ? void 0 : api.scrollTo(i) }, i))) })));
+        return (_jsx("div", Object.assign({ ref: ref, className: `flex justify-center ${props.className}` }, { children: Array.from({ length: numberOfSlides }, (_, i) => (_jsx(Button, { className: 'mx-1 h-1.5 w-1.5 rounded-full p-0 border-none', style: {
+                    backgroundColor: dotColor,
+                    opacity: i === currentSlide ? 1 : 0.5
+                }, "aria-label": `Go to slide ${i + 1}`, onClick: () => api === null || api === void 0 ? void 0 : api.scrollTo(i) }, i))) })));
     }
     else {
         return _jsx(_Fragment, {});

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

@@ -1,8 +1,10 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+import { Spacing } from "../../lib/utils";
+import { BorderSides } from "./Input/types";
 declare const favoriteVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
-    showBackground?: boolean | null | undefined;
+    showBackgroundShadow?: boolean | null | undefined;
     layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
@@ -10,9 +12,15 @@ export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElem
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     iconUrl?: string;
     showBackground?: boolean;
+    showBackgroundShadow?: boolean;
     cornerRadius?: number;
     layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right";
     favoriteFillColor?: string;
+    disabledFillColor?: string;
+    backgroundColor?: string;
+    borderSides?: BorderSides;
+    borderColorStyle?: string;
+    borderPadding?: Partial<Spacing>;
 }
 declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
 export { Favorite, favoriteVariants };

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,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;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,QAAA,MAAM,QAAQ,yFA0Cb,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;AAEjE,OAAO,EAA2B,OAAO,EAAmB,MAAM,iBAAiB,CAAA;AAEnF,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,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,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EACP,sBAAsB,GACtB,WAAW,GACX,UAAU,GACV,aAAa,GACb,cAAc,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAC,MAAM,CAAA;IACvB,WAAW,CAAC,EAAC,WAAW,CAAA;IACxB,gBAAgB,CAAC,EAAC,MAAM,CAAA;IACxB,aAAa,CAAC,EAAC,OAAO,CAAC,OAAO,CAAC,CAAA;CAChC;AAED,QAAA,MAAM,QAAQ,yFAsDb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/favorite.js

@@ -12,16 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn, getBorderSidesStyle, getPaddingStyle } from "../../lib/utils";
 import { Icon } from "./icon";
-const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-primaryShadow", {
+const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px]", {
     variants: {
         size: {
             small: "p-2",
             large: "p-3",
         },
-        showBackground: {
-            true: "bg-coreColors-inputBackground",
+        showBackgroundShadow: {
+            true: "shadow-primary",
             false: "",
         },
         layoutType: {
@@ -34,19 +34,17 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-p
     },
     defaultVariants: {
         size: "small",
-        showBackground: true,
+        showBackgroundShadow: false,
         layoutType: "below-image-on-right",
     },
 });
 const Favorite = React.forwardRef((_a, ref) => {
-    var { className, size = "small", selected = false, onClick, iconUrl = "https://storage.googleapis.com/tapcart-asset-uploads-prod/default-icon-options/Heart_1.svg", showBackground = false, cornerRadius = 4, layoutType = "below-image-on-right", favoriteFillColor = "#D91E18FF" } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "iconUrl", "showBackground", "cornerRadius", "layoutType", "favoriteFillColor"]);
+    var { className, size = "small", selected = false, onClick, iconUrl = "https://storage.googleapis.com/tapcart-asset-uploads-prod/default-icon-options/Heart_1.svg", showBackground = false, showBackgroundShadow = false, cornerRadius = 4, layoutType = "below-image-on-right", favoriteFillColor = "#D91E18", disabledFillColor = "#727272", backgroundColor = "#FFFFFF", borderSides = ["all"], borderColorStyle = undefined, borderPadding = {} } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "iconUrl", "showBackground", "showBackgroundShadow", "cornerRadius", "layoutType", "favoriteFillColor", "disabledFillColor", "backgroundColor", "borderSides", "borderColorStyle", "borderPadding"]);
     return (_jsx("button", Object.assign({ onClick: onClick, ref: ref, className: cn(favoriteVariants({
             size,
-            showBackground,
+            showBackgroundShadow,
             layoutType,
-        }), className), style: {
-            borderRadius: `${cornerRadius}px`,
-        } }, props, { children: _jsx(Icon, { url: iconUrl, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm", fillColor: selected ? favoriteFillColor : "" }) })));
+        }), className), style: Object.assign(Object.assign({ borderRadius: `${cornerRadius}px`, backgroundColor: backgroundColor || "var(--coreColors-inputBackground)", borderColor: borderColorStyle }, getBorderSidesStyle(borderSides)), getPaddingStyle(borderPadding)) }, props, { children: _jsx(Icon, { url: iconUrl, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm", fillColor: selected ? favoriteFillColor : disabledFillColor }) })));
 });
 Favorite.displayName = "Favorite";
 export { Favorite, favoriteVariants };

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 interface MoneyType {
     currency: string;
@@ -6,7 +7,8 @@ interface MoneyType {
 }
 declare const moneyVariants: (props?: ({} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface MoneyProps extends MoneyType, VariantProps<typeof moneyVariants> {
+    styles?: React.CSSProperties;
 }
-declare function Money({ price, locale, currency, ...props }: MoneyProps): import("react/jsx-runtime").JSX.Element;
+declare function Money({ price, locale, currency, styles, ...props }: MoneyProps): import("react/jsx-runtime").JSX.Element;
 export { Money, moneyVariants };
 //# sourceMappingURL=money.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../../../components/ui/money.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,aAAa,gGAMjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAS/D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../../../components/ui/money.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,aAAa,gGAMjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,aAAa,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC7B;AAEL,iBAAS,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CASvE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/money.js

@@ -19,13 +19,13 @@ const moneyVariants = cva("", {
     },
 });
 function Money(_a) {
-    var { price, locale, currency } = _a, props = __rest(_a, ["price", "locale", "currency"]);
+    var { price, locale, currency, styles } = _a, props = __rest(_a, ["price", "locale", "currency", "styles"]);
     const formatter = new Intl.NumberFormat(locale, {
         style: "currency",
         currency: currency,
         currencyDisplay: "narrowSymbol",
     });
     let formattedPrice = formatter.format(Number(price));
-    return _jsx("span", Object.assign({}, props, { children: formattedPrice }));
+    return _jsx("span", Object.assign({}, props, { style: styles }, { children: formattedPrice }));
 }
 export { Money, moneyVariants };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface PriceProps {
     price: number;
     priceHigh?: number;
@@ -9,7 +10,10 @@ interface PriceProps {
     locale?: string;
     fontSize?: number;
     textAlignment?: 'left' | 'center' | 'right' | '';
+    standardStyles?: React.CSSProperties;
+    saleStyles?: React.CSSProperties;
+    strikeThroughStyles?: React.CSSProperties;
 }
-declare function Price({ price, priceHigh, priceRanges, isSale, compareAtPrice, compareAtPriceHigh, currency, locale, fontSize, textAlignment, }: PriceProps): import("react/jsx-runtime").JSX.Element;
+declare function Price({ price, priceHigh, priceRanges, isSale, compareAtPrice, compareAtPriceHigh, currency, locale, fontSize, textAlignment, standardStyles, saleStyles, strikeThroughStyles, }: PriceProps): import("react/jsx-runtime").JSX.Element;
 export { Price };
 //# sourceMappingURL=price.d.ts.map

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

@@ -1 +1 @@
-{"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,2CA6DZ;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;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC3C;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,EAClB,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,EAAE,UAAU,2CA8DZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/price.js

@@ -2,16 +2,16 @@ 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, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', }) {
+function Price({ price, priceHigh, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', standardStyles, saleStyles, strikeThroughStyles, }) {
     const Spacer = () => (_jsx("span", { children: " - " }));
     const ProductPrice = () => {
         const colorClass = isSale ? 'text-textColors-salePriceText' : 'text-textColors-priceText';
-        return (_jsx(Text, Object.assign({ className: `${colorClass} flex-shrink-0`, style: { fontSize: `${fontSize}px` } }, { children: _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 }))] })) })));
+        return (_jsx(Text, Object.assign({ className: `${colorClass} flex-shrink-0`, style: { fontSize: `${fontSize}px` } }, { children: _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale, styles: standardStyles }), priceRanges && priceHigh !== undefined && _jsx(Spacer, {}), priceRanges && priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale, styles: saleStyles }))] })) })));
     };
     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(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: Object.assign({ fontSize: `${fontSize}px` }, strikeThroughStyles) }, { 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, {})] })));
 }

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, } from "./lib/utils";
+export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getPaddingStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, } 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";
-export * from "./components/hooks/use-products";
 export * from "./components/hooks/use-scroll-direction";
 export * from "./components/hooks/use-sort-filter";
 export * from "./components/ui/accordion";
@@ -49,5 +48,6 @@ export * from "./components/ui/video";
 export * from "./components/ui/wishlist";
 export * from "./components/hooks/use-product-options";
 export * from "./components/ui/wishlist-select";
+export * from "./components/hooks/use-shop";
 export * from "./components/libs/sort-filter/search-integration";
 //# 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,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AACpB,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,oCAAoC,CAAA;AAClD,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;AAC/C,cAAc,kDAAkD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,yBAAyB,EACzB,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,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;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA"}

package/dist/index.js

@@ -1,10 +1,9 @@
 // component exports
-export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, } from "./lib/utils";
+export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getPaddingStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, } 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";
-export * from "./components/hooks/use-products";
 export * from "./components/hooks/use-scroll-direction";
 export * from "./components/hooks/use-sort-filter";
 export * from "./components/ui/accordion";
@@ -50,4 +49,5 @@ export * from "./components/ui/video";
 export * from "./components/ui/wishlist";
 export * from "./components/hooks/use-product-options";
 export * from "./components/ui/wishlist-select";
+export * from "./components/hooks/use-shop";
 export * from "./components/libs/sort-filter/search-integration";

package/dist/lib/utils.d.ts

@@ -24,7 +24,7 @@ export declare const getBorderSidesStyle: (borderSides: BorderSides) => {
     borderWidth?: undefined;
 };
 type VerticalAlignment = "top" | "middle" | "bottom";
-type Spacing = {
+export type Spacing = {
     top: number;
     bottom: number;
     left: number;
@@ -55,18 +55,24 @@ type BackgroundAndPadding = {
     padding?: Partial<Spacing>;
 };
 export declare const getBackgroundAndPaddingStyle: (backgroundAndPadding: BackgroundAndPadding) => {
+    paddingTop: string | undefined;
+    paddingBottom: string | undefined;
+    paddingLeft: string | undefined;
+    paddingRight: string | undefined;
     backgroundColor: string | undefined;
     borderColor: string | undefined;
     borderTopWidth: string | undefined;
     borderBottomWidth: string | undefined;
     borderLeftWidth: string | undefined;
     borderRightWidth: string | undefined;
+    borderStyle: string | undefined;
+    borderRadius: string | undefined;
+};
+export declare const getPaddingStyle: (padding: Partial<Spacing>) => {
     paddingTop: string | undefined;
     paddingBottom: string | undefined;
     paddingLeft: string | undefined;
     paddingRight: string | undefined;
-    borderStyle: string | undefined;
-    borderRadius: string | undefined;
 };
 type BackgroundAndSpacing = AlignmentAndSpacing & {
     backgroundColor?: Color;
@@ -88,6 +94,7 @@ type TextStyle = {
     color: Color;
     uppercase: boolean;
     textAlignment: "left" | "center" | "right" | "justify";
+    wrapText: boolean;
 };
 type Headline = TextStyle;
 type Subtext = TextStyle;
@@ -98,5 +105,6 @@ export declare const getTextStyle: (textStyle: Headline | Subtext) => {
     color: string | undefined;
     textTransform: string;
     textAlign: "left" | "right" | "center" | "justify";
+    textWrap: string;
 };
 //# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAA;AAGvC,MAAM,MAAM,KAAK,GAAG;IAAE,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnE,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,eAAO,MAAM,eAAe,UAc3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,CAAA;AAMjE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAI9C,eAAO,MAAM,QAAQ,gBAAiB,KAAK,GAAG,SAAS,uBAMtD,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC7D,KAAK,WAAW,GAAG,UAAU,EAAE,CAAA;AAE/B,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAU/B,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEpD,KAAK,OAAO,GAAG;IACb,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,iBAAiB,CAAA;IAC5B,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,yBAAyB,wBACf,mBAAmB;;;;;;;;;;;;CAczC,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,4BAA4B,yBACjB,oBAAoB;;;;;;;;;;;;;CAgC3C,CAAA;AAED,KAAK,oBAAoB,GAAG,mBAAmB,GAAG;IAChD,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,4BAA4B,yBACjB,oBAAoB;;;;;CAU3C,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;KACxB,CAAA;IACD,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;CACvD,CAAA;AAED,KAAK,QAAQ,GAAG,SAAS,CAAA;AACzB,KAAK,OAAO,GAAG,SAAS,CAAA;AAExB,eAAO,MAAM,YAAY,cAAe,QAAQ,GAAG,OAAO;;;;;;;CAUzD,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAA;AAGvC,MAAM,MAAM,KAAK,GAAG;IAAE,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnE,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,eAAO,MAAM,eAAe,UAc3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,CAAA;AAMjE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAI9C,eAAO,MAAM,QAAQ,gBAAiB,KAAK,GAAG,SAAS,uBAUtD,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC7D,KAAK,WAAW,GAAG,UAAU,EAAE,CAAA;AAE/B,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAU/B,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEpD,MAAM,MAAM,OAAO,GAAG;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,iBAAiB,CAAA;IAC5B,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,yBAAyB,wBACf,mBAAmB;;;;;;;;;;;;CAczC,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,4BAA4B,yBACjB,oBAAoB;;;;;;;;;;;;;CA4B3C,CAAA;AAED,eAAO,MAAM,eAAe,YACjB,QAAQ,OAAO,CAAC;;;;;CAU1B,CAAA;AAED,KAAK,oBAAoB,GAAG,mBAAmB,GAAG;IAChD,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,4BAA4B,yBACjB,oBAAoB;;;;;CAU3C,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;KACxB,CAAA;IACD,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;IACtD,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,QAAQ,GAAG,SAAS,CAAA;AACzB,KAAK,OAAO,GAAG,SAAS,CAAA;AAExB,eAAO,MAAM,YAAY,cAAe,QAAQ,GAAG,OAAO;;;;;;;;CAWzD,CAAA"}

package/dist/lib/utils.js

@@ -25,6 +25,9 @@ for (let iconColorLevel of iconColorLevels) {
 export { cva } from "class-variance-authority";
 // #region =-=-=-= Block Utils =-=-=-=
 export const getColor = (colorOption) => {
+    if ((colorOption === null || colorOption === void 0 ? void 0 : colorOption.value) === null) {
+        return undefined;
+    }
     return colorOption
         ? (colorOption === null || colorOption === void 0 ? void 0 : colorOption.type) === "brand-kit"
             ? `var(--${colorOption.value})`
@@ -57,27 +60,22 @@ export const getVerticalAlignmentStyle = (alignmentAndSpacing) => {
 };
 export const getBackgroundAndPaddingStyle = (backgroundAndPadding) => {
     const { backgroundColor, borderSides, borderColor, cornerRadius, padding } = backgroundAndPadding;
-    return {
-        backgroundColor: getColor(backgroundColor),
-        borderColor: getColor(borderColor),
-        borderTopWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("top")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+    return Object.assign({ backgroundColor: getColor(backgroundColor), borderColor: getColor(borderColor), borderTopWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("top")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
             ? "1px"
-            : undefined,
-        borderBottomWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("bottom")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+            : undefined, borderBottomWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("bottom")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
             ? "1px"
-            : undefined,
-        borderLeftWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("left")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+            : undefined, borderLeftWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("left")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
             ? "1px"
-            : undefined,
-        borderRightWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("right")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+            : undefined, borderRightWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("right")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
             ? "1px"
-            : undefined,
+            : undefined, borderStyle: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.length) ? "solid" : undefined, borderRadius: cornerRadius !== undefined ? `${cornerRadius}px` : undefined }, getPaddingStyle(padding || {}));
+};
+export const getPaddingStyle = (padding) => {
+    return {
         paddingTop: (padding === null || padding === void 0 ? void 0 : padding.top) !== undefined ? `${padding.top}px` : undefined,
         paddingBottom: (padding === null || padding === void 0 ? void 0 : padding.bottom) !== undefined ? `${padding.bottom}px` : undefined,
         paddingLeft: (padding === null || padding === void 0 ? void 0 : padding.left) !== undefined ? `${padding.left}px` : undefined,
         paddingRight: (padding === null || padding === void 0 ? void 0 : padding.right) !== undefined ? `${padding.right}px` : undefined,
-        borderStyle: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.length) ? "solid" : undefined,
-        borderRadius: cornerRadius !== undefined ? `${cornerRadius}px` : undefined,
     };
 };
 export const getBackgroundAndSpacingStyle = (backgroundAndSpacing) => {
@@ -90,7 +88,7 @@ export const getBackgroundAndSpacingStyle = (backgroundAndSpacing) => {
     };
 };
 export const getTextStyle = (textStyle) => {
-    const { font, size, color, uppercase, textAlignment } = textStyle;
+    const { font, size, color, uppercase, textAlignment, wrapText } = textStyle;
     return {
         fontFamily: font.family === "initial" ? undefined : font.family,
         fontWeight: font.weight === "initial" ? undefined : font.weight,
@@ -98,6 +96,7 @@ export const getTextStyle = (textStyle) => {
         color: getColor(color),
         textTransform: uppercase ? "uppercase" : "none",
         textAlign: textAlignment,
+        textWrap: wrapText ? "wrap" : "nowrap",
     };
 };
 // #endregion =-=-=-= END BLOCK UTILS =-=-=-=

package/dist/styles.css

@@ -994,6 +994,9 @@ video {
 .max-h-\[240px\] {
   max-height: 240px;
 }
+.max-h-\[300px\] {
+  max-height: 300px;
+}
 .max-h-screen {
   max-height: 100vh;
 }
@@ -1054,9 +1057,6 @@ video {
 .w-\[40px\] {
   width: 40px;
 }
-.w-\[69px\] {
-  width: 69px;
-}
 .w-auto {
   width: auto;
 }
@@ -1084,6 +1084,9 @@ video {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
+.max-w-\[200px\] {
+  max-width: 200px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -1224,6 +1227,9 @@ video {
 .grid-cols-\[auto\2c auto\2c 1fr\] {
   grid-template-columns: auto auto 1fr;
 }
+.grid-cols-\[auto_1fr_auto\] {
+  grid-template-columns: auto 1fr auto;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -1242,9 +1248,6 @@ video {
 .items-start {
   align-items: flex-start;
 }
-.items-end {
-  align-items: flex-end;
-}
 .items-center {
   align-items: center;
 }
@@ -1429,9 +1432,6 @@ video {
 .border-t-\[0px\] {
   border-top-width: 0px;
 }
-.border-t-\[1px\] {
-  border-top-width: 1px;
-}
 .border-none {
   border-style: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",