@tapcart/mobile-components 0.7.9 → 0.7.10-beta.0

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

@@ -14,7 +14,7 @@ type UseReviewsProps = {
     page: number;
 };
 type UseReviewsReturn = {
-    data: ReviewSummaryData | ReviewMetaData | ReviewSearchData | null;
+    data: ReviewSummaryData | ReviewMetaData | ReviewSearchData;
     error: any;
     isLoading: boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"use-reviews.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-reviews.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAGtF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACxC,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,eAAe,CAAC;IACjF,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd,CAAA;AAED,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,iBAAiB,GAAG,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAA;IAClE,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,gBAAgB,CAwD1E;AAED,KAAK,wBAAwB,GAAG,gBAAgB,GAAG;IACjD,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CACtC,CAAA;AAGD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,wBAAwB,CA0H1F"}
+{"version":3,"file":"use-reviews.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-reviews.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAGtF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACxC,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,eAAe,CAAC;IACjF,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd,CAAA;AAED,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,iBAAiB,GAAG,cAAc,GAAG,gBAAgB,CAAA;IAC3D,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,gBAAgB,CAwD1E;AAED,KAAK,wBAAwB,GAAG,gBAAgB,GAAG;IACjD,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CACtC,CAAA;AAGD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,wBAAwB,CA8F1F"}

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

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
 import { useInView } from 'react-intersection-observer';
@@ -52,13 +52,13 @@ export function useReviews(props) {
     };
 }
 export function useReviewsInfinite(props) {
-    var _a;
+    var _a, _b;
     let url = null;
     const { ref, inView } = useInView({ rootMargin: "800px" });
     let baseURL = "";
     let queryParams = new URLSearchParams();
     if (props) {
-        const { productId, provider, dataType, searchText, ratings, topics, sortBy, ascending, perPage } = props;
+        const { productId, provider, dataType, searchText, ratings, topics, sortBy, ascending, perPage } = props; // Destructure all relevant props
         baseURL = props.baseURL;
         if (productId.length > 0) {
             queryParams.set("id", productId);
@@ -92,29 +92,12 @@ export function useReviewsInfinite(props) {
             url = `${baseURL}/reviews/by-id?${queryParams.toString()}`;
         }
     }
-    const isEndReached = useRef(false);
     const getKey = (pageIndex, previousPageData) => {
-        var _a, _b;
-        if ((props === null || props === void 0 ? void 0 : props.provider) === "yotpo") {
-            const dataType = queryParams.get("dataType") === "null" ? null : queryParams.get("dataType");
-            if (dataType == null) {
-                return null;
-            }
-            if (previousPageData && previousPageData.pagination) {
-                const { perPage, total } = previousPageData.pagination;
-                isEndReached.current = (((pageIndex + 1) * perPage) >= total);
-            }
-            return `${baseURL}/reviews/by-id?${queryParams.toString()}&page=${pageIndex + 1}`;
-        }
-        if ((props === null || props === void 0 ? void 0 : props.provider) === "okendo") {
-            if (pageIndex === 0)
-                return `${baseURL}/reviews/by-id?${queryParams.toString()}`;
-            if (!((_a = previousPageData === null || previousPageData === void 0 ? void 0 : previousPageData.pagination) === null || _a === void 0 ? void 0 : _a.nextUrl)) {
-                isEndReached.current = true;
-                return null;
-            }
-            return `${baseURL}/reviews/by-id?${queryParams.toString()}&nextUrl=${((_b = previousPageData === null || previousPageData === void 0 ? void 0 : previousPageData.pagination) === null || _b === void 0 ? void 0 : _b.nextUrl) || null}`;
+        const dataType = queryParams.get("dataType") === "null" ? null : queryParams.get("dataType");
+        if (dataType == null) {
+            return null;
         }
+        return `${baseURL}/reviews/by-id?${queryParams.toString()}&page=${pageIndex + 1}`;
     };
     const fetcher = (props === null || props === void 0 ? void 0 : props.fetcher) || ((url) => fetch(url).then((res) => res.json()));
     const { data: dataInfinite, error: errorInfinite, size, setSize, isLoading, isValidating, } = useSWRInfinite(getKey, fetcher);
@@ -127,22 +110,17 @@ export function useReviewsInfinite(props) {
         pagination: (dataInfinite === null || dataInfinite === void 0 ? void 0 : dataInfinite.length) ? dataInfinite[0].pagination : null,
         reviews: mergedReviews
     };
-    if ((props === null || props === void 0 ? void 0 : props.provider) === "yotpo") {
-        isEndReached.current = (mergedReviews === null || mergedReviews === void 0 ? void 0 : mergedReviews.length) === ((_a = searchResponse.pagination) === null || _a === void 0 ? void 0 : _a.total);
-    }
+    const isAllReviewsLoaded = (mergedReviews === null || mergedReviews === void 0 ? void 0 : mergedReviews.length) === ((_b = (_a = dataInfinite === null || dataInfinite === void 0 ? void 0 : dataInfinite[0]) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.total);
     const loadMore = useCallback(() => {
-        if (!isLoading && !isValidating && !isEndReached.current) {
+        if (!isLoading && !isValidating && !isAllReviewsLoaded) {
             setSize(size + 1);
         }
-    }, [isLoading, isValidating, setSize, size]);
+    }, [isLoading, isValidating, setSize, size, isAllReviewsLoaded]);
     useEffect(() => {
         if (inView) {
             loadMore();
         }
     }, [inView, loadMore]);
-    useEffect(() => {
-        isEndReached.current = false;
-    }, [props]);
     return {
         data: searchResponse || {},
         error: errorInfinite,

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

@@ -0,0 +1,8 @@
+import React from "react";
+declare const useTap: (tapThreshold?: number) => {
+    onTap: (handler: (event: any) => void) => (event: any) => void;
+    isPressed: boolean;
+    ref: React.MutableRefObject<null>;
+};
+export { useTap };
+//# sourceMappingURL=use-tap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tap.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-tap.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAuFvE,QAAA,MAAM,MAAM;6BAuBkC,GAAG,KAAK,IAAI,aACvC,GAAG;;;CAerB,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

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

@@ -0,0 +1,100 @@
+"use client";
+import { useState, useEffect, useCallback, useRef } from "react";
+// Shared manager for all instances of the hook
+const tapManager = (() => {
+    const elements = new Map();
+    let isListening = false;
+    const startListening = () => {
+        if (isListening)
+            return;
+        const handleTouchStart = (e) => {
+            const touch = e.touches[0];
+            elements.forEach((data, el) => {
+                if (el.contains(touch.target)) {
+                    data.touchStarted = true;
+                    data.touchMoved = false;
+                    data.startPosition = { x: touch.clientX, y: touch.clientY };
+                    // Don't set isPressed here, wait to determine if it's a tap or drag
+                }
+            });
+        };
+        const handleTouchMove = (e) => {
+            const touch = e.touches[0];
+            elements.forEach((data, el) => {
+                if (data.touchStarted) {
+                    const deltaX = Math.abs(touch.clientX - data.startPosition.x);
+                    const deltaY = Math.abs(touch.clientY - data.startPosition.y);
+                    if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
+                        data.touchMoved = true;
+                        data.setIsPressed(false);
+                    }
+                }
+            });
+        };
+        const handleTouchEnd = () => {
+            elements.forEach((data) => {
+                if (data.touchStarted) {
+                    data.touchStarted = false;
+                    if (!data.touchMoved) {
+                        // It's a tap, set isPressed briefly
+                        data.setIsPressed(true);
+                        setTimeout(() => data.setIsPressed(false), 100);
+                    }
+                }
+            });
+        };
+        document.addEventListener("touchstart", (e) => handleTouchStart(e), { passive: true });
+        document.addEventListener("touchmove", (e) => handleTouchMove(e), { passive: true });
+        document.addEventListener("touchend", () => handleTouchEnd(), {
+            passive: true,
+        });
+        isListening = true;
+    };
+    return {
+        register: (el, data) => {
+            elements.set(el, data);
+            startListening();
+        },
+        unregister: (el) => {
+            elements.delete(el);
+        },
+        elements,
+    };
+})();
+const useTap = (tapThreshold = 10) => {
+    const [isPressed, setIsPressed] = useState(false);
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const data = {
+            touchStarted: false,
+            touchMoved: false,
+            startPosition: { x: 0, y: 0 },
+            setIsPressed,
+            tapThreshold,
+        };
+        tapManager.register(element, data);
+        return () => {
+            tapManager.unregister(element);
+        };
+    }, [tapThreshold]);
+    const onTap = useCallback((handler) => {
+        return (event) => {
+            const data = tapManager.elements.get(elementRef.current);
+            if (!data)
+                return;
+            if (event.type === "touchend" && !data.touchMoved) {
+                handler(event);
+            }
+            else if (event.type === "click" && !data.touchStarted) {
+                handler(event);
+                setIsPressed(true);
+                setTimeout(() => setIsPressed(false), 100);
+            }
+        };
+    }, []);
+    return { onTap, isPressed, ref: elementRef };
+};
+export { useTap };

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

@@ -17,7 +17,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     iconStrokeColor?: string;
     iconClassName?: string;
     iconPosition?: "left" | "right";
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const getButtonProps: (buttonConfig: TextStyle & BackgroundAndPadding & {

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;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAMxB,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,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC9D;AAED,QAAA,MAAM,MAAM,uFA0GX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,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;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAIxB,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,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFAsGX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -16,8 +16,6 @@ import { cva } from "class-variance-authority";
 import { cn, getColor, getTextStyle, getBackgroundAndPaddingStyle, } from "../../lib/utils";
 import { Icon } from "./icon";
 import { Text } from "./text";
-import { useTap } from "./tap";
-import { useMergeRefs } from "../hooks/use-merge-refs";
 const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors disabled:bg-stateColors-disabled disabled:border-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate active:opacity-70 disabled:opacity-70 cursor-pointer", {
     variants: {
         size: {
@@ -81,9 +79,7 @@ const labelVariants = cva("truncate", {
     },
 });
 const Button = React.forwardRef((_a, ref) => {
-    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl, iconClassName, onClick } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconSize", "iconUrl", "iconClassName", "onClick"]);
-    const { onTap, isPressed, ref: tapRef } = useTap();
-    const mergedRef = useMergeRefs(ref, tapRef);
+    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl, iconClassName } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconSize", "iconUrl", "iconClassName"]);
     const Comp = asChild ? Slot : "button";
     const IconButton = () => icon || iconUrl ? (_jsx(Icon, { name: icon, url: iconUrl, size: "sm", style: { color: iconColor } })) : null;
     const BasicButton = () => (_jsxs(_Fragment, { children: [icon || iconUrl ? (_jsx(Icon, { name: iconUrl ? undefined : icon, url: iconUrl, size: iconSize || variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), {
@@ -94,7 +90,7 @@ const Button = React.forwardRef((_a, ref) => {
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,
             "flex-row-reverse": (icon || iconUrl) && iconPosition === "right",
-        }), ref: mergedRef, onClick: onTap(onClick) }, props, { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
+        }), 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

package/dist/components/ui/carousel.js

@@ -122,7 +122,7 @@ const CarouselPrevious = React.forwardRef((_a, ref) => {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
     return (_jsxs(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
             ? "-left-12 top-1/2 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev }, props, { onClick: scrollPrev }, { children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Previous slide" }))] })));
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev }, props, { children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Previous slide" }))] })));
 });
 CarouselPrevious.displayName = "CarouselPrevious";
 const CarouselNext = React.forwardRef((_a, ref) => {
@@ -130,7 +130,7 @@ const CarouselNext = React.forwardRef((_a, ref) => {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
     return (_jsxs(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
             ? "-right-12 top-1/2 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext }, props, { onClick: scrollNext }, { children: [_jsx(ArrowRight, { className: "h-4 w-4" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Next slide" }))] })));
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext }, props, { children: [_jsx(ArrowRight, { className: "h-4 w-4" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Next slide" }))] })));
 });
 CarouselNext.displayName = "CarouselNext";
 const CarouselDots = React.forwardRef((_a, ref) => {

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

@@ -5,27 +5,33 @@ type DrawerTriggerProps = React.ComponentPropsWithoutRef<"button"> & {
 };
 type DrawerPortalProps = {
     children: React.ReactNode;
+    containerRef?: HTMLElement;
 };
 type DrawerCloseProps = React.ComponentPropsWithoutRef<"button"> & {
     asChild?: boolean;
 };
 declare const DrawerTrigger: React.FC<DrawerTriggerProps>;
-declare const DrawerPortal: React.FC<DrawerPortalProps>;
+declare const DrawerPortal: {
+    ({ children, containerRef }: DrawerPortalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const DrawerClose: React.FC<DrawerCloseProps>;
 type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root> & {
     containerRef?: HTMLElement;
 };
 declare const Drawer: {
-    ({ shouldScaleBackground, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    ({ shouldScaleBackground, containerRef, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     backdropHexColor?: string | undefined;
+    containerRef?: HTMLElement | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerContentBase: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     hideBackdrop?: boolean | undefined;
     backdropHexColor?: string | undefined;
     isSheet?: boolean | undefined;
+    containerRef?: HTMLElement | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAIhD,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,aAAa,8BAA0D,CAAA;AAG7E,QAAA,MAAM,YAAY,6BAAwD,CAAA;AAG1E,QAAA,MAAM,WAAW,4BAAsD,CAAA;AAGvE,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAS/D,CAAA;AAOD,QAAA,MAAM,aAAa;;wCAYlB,CAAA;AASD,QAAA,MAAM,iBAAiB;;;;wCAwCtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,qLASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CA8BnB,CAAA;AAED,QAAA,MAAM,aAAa,sCAAuC,MAAM,cAAc,CAAC,cAAc,CAAC,4CAE7F,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAKhD,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,aAAa,8BAA0D,CAAA;AAG7E,QAAA,MAAM,YAAY;iCAAgC,iBAAiB;;CAKlE,CAAA;AAGD,QAAA,MAAM,WAAW,4BAAsD,CAAA;AAGvE,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,MAAM;wDAIT,WAAW;;CAgBb,CAAA;AAQD,QAAA,MAAM,aAAa;;;wCAsBlB,CAAA;AAUD,QAAA,MAAM,iBAAiB;;;;;wCAiDtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,qLASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CA8BnB,CAAA;AAED,QAAA,MAAM,aAAa,sCAIhB,MAAM,cAAc,CAAC,cAAc,CAAC,4CAMtC,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}

package/dist/components/ui/drawer.js

@@ -15,29 +15,40 @@ import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
+import ReactDOM from "react-dom";
 const DrawerTrigger = DrawerPrimitive.Trigger;
 DrawerTrigger.displayName = "DrawerTrigger";
-const DrawerPortal = DrawerPrimitive.Portal;
+const DrawerPortal = ({ children, containerRef }) => {
+    if (containerRef) {
+        return ReactDOM.createPortal(children, containerRef);
+    }
+    return _jsx(DrawerPrimitive.Portal, { children: children });
+};
 DrawerPortal.displayName = "DrawerPortal";
 const DrawerClose = DrawerPrimitive.Close;
 DrawerClose.displayName = "DrawerClose";
 const Drawer = (_a) => {
-    var { shouldScaleBackground } = _a, props = __rest(_a, ["shouldScaleBackground"]);
-    return (_jsx(DrawerPrimitive.Root, Object.assign({ shouldScaleBackground: true }, props, { noBodyStyles: true, disablePreventScroll: true })));
+    var { shouldScaleBackground, containerRef } = _a, props = __rest(_a, ["shouldScaleBackground", "containerRef"]);
+    return (_jsx(DrawerPrimitive.Root, Object.assign({ shouldScaleBackground: true }, props, { noBodyStyles: true, disablePreventScroll: true }, { children: React.Children.map(props.children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, { containerRef });
+            }
+            return child;
+        }) })));
 };
 Drawer.displayName = "Drawer";
 const DrawerOverlay = React.forwardRef((_a, ref) => {
-    var { className, backdropHexColor = "#000000" } = _a, props = __rest(_a, ["className", "backdropHexColor"]);
-    const style = { backgroundColor: `${backdropHexColor}CC` };
-    return (_jsx(DrawerPrimitive.Overlay, Object.assign({ style: style, ref: ref, className: cn(`fixed inset-0 z-50`, className) }, props)));
+    var { className, backdropHexColor = "#000000", containerRef } = _a, props = __rest(_a, ["className", "backdropHexColor", "containerRef"]);
+    const style = Object.assign({ backgroundColor: `${backdropHexColor}CC` }, (containerRef && { position: "absolute" }));
+    return (_jsx(DrawerPrimitive.Overlay, Object.assign({ style: style, ref: ref, className: cn(`fixed inset-0 z-50`, containerRef && "absolute", className) }, props)));
 });
 DrawerOverlay.displayName = "DrawerOverlay";
 const DrawerContentBase = React.forwardRef((_a, ref) => {
-    var { className, children, hideBackdrop = false, backdropHexColor, isSheet = false, onAnimationEnd } = _a, props = __rest(_a, ["className", "children", "hideBackdrop", "backdropHexColor", "isSheet", "onAnimationEnd"]);
-    const styles = isSheet
+    var { className, children, hideBackdrop = false, backdropHexColor, isSheet = false, containerRef } = _a, props = __rest(_a, ["className", "children", "hideBackdrop", "backdropHexColor", "isSheet", "containerRef"]);
+    const styles = Object.assign(Object.assign({}, (isSheet
         ? { height: "calc(100vh - 112px)" }
-        : { maxHeight: "calc(100vh - 112px)" };
-    return (_jsxs(DrawerPortal, { children: [hideBackdrop ? null : (_jsx(DrawerOverlay, { backdropHexColor: backdropHexColor })), _jsxs(DrawerPrimitive.Content, Object.assign({ ref: ref, style: styles, className: cn("fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground", className) }, props, { "data-testid": "drawer-content" }, { children: [_jsx("div", { className: "mx-auto mb-2 mt-2 h-[4px] w-[40px] rounded-full bg-coreColors-dividingLines" }), children] }))] }));
+        : { maxHeight: "calc(100vh - 112px)" })), (containerRef && { position: "absolute" }));
+    return (_jsxs(DrawerPortal, Object.assign({ containerRef: containerRef }, { children: [hideBackdrop ? null : (_jsx(DrawerOverlay, { backdropHexColor: backdropHexColor, containerRef: containerRef })), _jsxs(DrawerPrimitive.Content, Object.assign({ ref: ref, style: styles, className: cn("fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground", containerRef && "absolute", className) }, props, { "data-testid": "drawer-content" }, { children: [_jsx("div", { className: "mx-auto mb-2 mt-2 h-[4px] w-[40px] rounded-full bg-coreColors-dividingLines" }), children] }))] })));
 });
 DrawerContentBase.displayName = "DrawerContentBase";
 const DrawerHeaderBase = (_a) => {
@@ -65,6 +76,6 @@ const DrawerHeader = ({ title, iconLeftName, iconRightName, onCloseClick, }) =>
 };
 const DrawerContent = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return _jsx("div", Object.assign({ className: cn("h-full overflow-scroll", className) }, props, { children: children }));
+    return (_jsx("div", Object.assign({ className: cn("h-full overflow-scroll", className) }, props, { children: children })));
 };
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContentBase, DrawerContent, DrawerFooter, DrawerDescription, DrawerHeader, };

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

@@ -1 +1 @@
-{"version":3,"file":"tap.d.ts","sourceRoot":"","sources":["../../../components/ui/tap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACV,MAAM,OAAO,CAAA;AAyFd,QAAA,MAAM,MAAM;6BAyBU,GAAG,KAAK,IAAI,aACb,GAAG;;;CAmBvB,CAAA;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAuC3B,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"tap.d.ts","sourceRoot":"","sources":["../../../components/ui/tap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACV,MAAM,OAAO,CAAA;AAuFd,QAAA,MAAM,MAAM;6BAuBkC,GAAG,KAAK,IAAI,aACvC,GAAG;;;CAerB,CAAA;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAuC3B,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/tap.js

@@ -1,8 +1,6 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useRef, } from "react";
-// @ts-ignore -- webbridge-react is not typed (yet)
-import { useActions } from "@tapcart/webbridge-react";
 // Shared manager for all instances of the hook
 const tapManager = (() => {
     const elements = new Map();
@@ -67,7 +65,6 @@ const tapManager = (() => {
 const useTap = (tapThreshold = 10) => {
     const [isPressed, setIsPressed] = useState(false);
     const elementRef = useRef(null);
-    const webbridgeActions = useActions();
     useEffect(() => {
         const element = elementRef.current;
         if (!element)
@@ -86,22 +83,19 @@ const useTap = (tapThreshold = 10) => {
     }, [tapThreshold]);
     const onTap = useCallback((handler) => {
         return (event) => {
-            var _a, _b;
             const data = tapManager.elements.get(elementRef.current);
             if (!data)
                 return;
             if (event.type === "touchend" && !data.touchMoved) {
                 handler(event);
-                (_a = webbridgeActions.action) === null || _a === void 0 ? void 0 : _a.call(webbridgeActions, "trigger/haptic");
             }
             else if (event.type === "click" && !data.touchStarted) {
                 handler(event);
-                (_b = webbridgeActions.action) === null || _b === void 0 ? void 0 : _b.call(webbridgeActions, "trigger/haptic");
                 setIsPressed(true);
                 setTimeout(() => setIsPressed(false), 100);
             }
         };
-    }, [webbridgeActions]);
+    }, []);
     return { onTap, isPressed, ref: elementRef };
 };
 const Tap = ({ children }) => {

package/dist/components/ui/video-enhanced.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video-enhanced.d.ts","sourceRoot":"","sources":["../../../components/ui/video-enhanced.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,UAAU,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACtE,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,eAAe,CAAA;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,KAAK,qFAsMV,CAAA;AAID,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,CAAA"}
+{"version":3,"file":"video-enhanced.d.ts","sourceRoot":"","sources":["../../../components/ui/video-enhanced.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,UAAU,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACtE,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,eAAe,CAAA;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,KAAK,qFAkOV,CAAA;AAID,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,CAAA"}

package/dist/components/ui/video-enhanced.js

@@ -29,38 +29,45 @@ const videoVariants = {
     },
 };
 const Video = React.forwardRef((_a, ref) => {
+    var _b;
     var { src, videoAttributes, naturalAspectRatio = "1/1", className } = _a, props = __rest(_a, ["src", "videoAttributes", "naturalAspectRatio", "className"]);
-    const autoPlayEnabled = videoAttributes.autoplay && !videoAttributes.videoSound;
     const internalRef = React.useRef(null);
     const videoRef = ref || internalRef;
+    const playAttemptRef = React.useRef(false);
     const observerRef = React.useRef(null);
     const lastPositionRef = React.useRef(0);
     const [isLoaded, setIsLoaded] = React.useState(false);
     const [isVisible, setIsVisible] = React.useState(false);
     const [isPlaying, setIsPlaying] = React.useState(false);
-    const handlePlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const setupVideo = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         const video = videoRef.current;
         if (!video)
             return;
         try {
             video.currentTime = lastPositionRef.current;
-            video.muted = true;
+            if (!videoAttributes.videoSound) {
+                video.muted = true;
+            }
             yield video.play();
-            if (videoAttributes.videoSound) {
+            setIsPlaying(true);
+            playAttemptRef.current = true;
+            // If sound is enabled and autoplay was successful, unmute
+            if (videoAttributes.videoSound && videoAttributes.autoplay) {
                 video.muted = false;
             }
         }
         catch (error) {
             console.error("Error playing video:", error);
+            setIsPlaying(false);
         }
-    }), [videoRef, videoAttributes.videoSound]);
+    }), [videoAttributes.autoplay, videoAttributes.videoSound, videoRef]);
     const handlePlayPause = () => __awaiter(void 0, void 0, void 0, function* () {
         const video = videoRef.current;
         if (!video)
             return;
         if (video.paused) {
             try {
-                yield handlePlay();
+                yield setupVideo();
             }
             catch (error) {
                 console.error("Error playing video:", error);
@@ -68,9 +75,9 @@ const Video = React.forwardRef((_a, ref) => {
         }
         else {
             video.pause();
+            setIsPlaying(false);
         }
     });
-    // intersection observer setup
     React.useEffect(() => {
         const video = videoRef.current;
         if (!video)
@@ -81,11 +88,15 @@ const Video = React.forwardRef((_a, ref) => {
             setIsVisible(entry.isIntersecting);
             // Handle visibility change
             if (!entry.isIntersecting && !video.paused) {
+                lastPositionRef.current = video.currentTime;
                 video.pause();
+                setIsPlaying(false);
             }
-            else if (entry.isIntersecting && autoPlayEnabled && video.paused) {
+            else if (entry.isIntersecting &&
+                videoAttributes.autoplay &&
+                video.paused) {
                 video.currentTime = lastPositionRef.current;
-                handlePlay();
+                setupVideo();
             }
         }, {
             threshold: 0.1, // 10% of the video needs to be visible
@@ -98,28 +109,42 @@ const Video = React.forwardRef((_a, ref) => {
         video.addEventListener("play", handlePlay);
         video.addEventListener("pause", handlePause);
         return () => {
+            if (video && !video.paused) {
+                lastPositionRef.current = video.currentTime;
+            }
             if (observerRef.current) {
                 observerRef.current.disconnect();
             }
             video.removeEventListener("play", handlePlay);
             video.removeEventListener("pause", handlePause);
+            playAttemptRef.current = false;
         };
-    }, [handlePlay, autoPlayEnabled, videoRef]);
-    // handle visibility change
-    // pause video when not visible
-    // play video when visible and autoplay is on
+    }, [setupVideo, videoAttributes.autoplay, videoRef]);
+    // Handle attribute changes
     React.useEffect(() => {
         const video = videoRef.current;
         if (!video)
             return;
-        if (isVisible && autoPlayEnabled) {
-            handlePlay();
+        if (isVisible && videoAttributes.autoplay) {
+            setupVideo();
         }
         else if (!isVisible && !video.paused) {
+            lastPositionRef.current = video.currentTime;
             video.pause();
+            setIsPlaying(false);
         }
-    }, [autoPlayEnabled, isVisible, videoRef, handlePlay]);
-    // update lastPositionRef on video timeupdate event
+        return () => {
+            if (video && !video.paused) {
+                lastPositionRef.current = video.currentTime;
+            }
+        };
+    }, [
+        videoAttributes.autoplay,
+        videoAttributes.videoSound,
+        isVisible,
+        videoRef,
+        setupVideo,
+    ]);
     React.useEffect(() => {
         const video = videoRef.current;
         if (!video)
@@ -132,14 +157,14 @@ const Video = React.forwardRef((_a, ref) => {
             video.removeEventListener("timeupdate", handleTimeUpdate);
         };
     }, [videoRef]);
-    // metadata setup
+    // Initial load and metadata setup - only needs to run when src changes
     React.useEffect(() => {
         const video = videoRef.current;
         if (!video)
             return;
         const handleLoadedMetadata = () => {
             setIsLoaded(true);
-            if (autoPlayEnabled && isVisible) {
+            if (videoAttributes.autoplay && isVisible) {
                 const currentTime = lastPositionRef.current;
                 video.currentTime = currentTime;
                 video.play().catch((error) => {
@@ -148,16 +173,15 @@ const Video = React.forwardRef((_a, ref) => {
             }
         };
         video.addEventListener("loadedmetadata", handleLoadedMetadata);
+        video.load();
         return () => {
             video.removeEventListener("loadedmetadata", handleLoadedMetadata);
         };
-    }, []);
+    }, [src]);
     React.useEffect(() => {
-        const video = videoRef.current;
-        if (!video)
-            return;
-        video.load();
-    }, [videoRef]);
+        lastPositionRef.current = 0;
+        setIsLoaded(false);
+    }, [src]);
     const videoStyle = {
         aspectRatio: videoAttributes.enabled && videoAttributes.aspectRatio !== "auto"
             ? videoAttributes.aspectRatio.replace(":", "/")
@@ -165,7 +189,9 @@ const Video = React.forwardRef((_a, ref) => {
     };
     return (_jsxs("div", Object.assign({ className: "relative w-full" }, { children: [_jsx("video", Object.assign({ ref: videoRef, className: cn(videoVariants.base, videoAttributes.videoFit === "fill"
                     ? videoVariants.fit.cover
-                    : videoVariants.fit.contain, className), style: videoStyle, preload: "metadata", playsInline: true, loop: videoAttributes.enabled, controls: false, src: src }, props)), isLoaded && !isPlaying && (_jsx("button", Object.assign({ onClick: handlePlayPause, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50\n                     w-16 h-16 rounded-full bg-black/75 hover:bg-black/90 \n                     flex items-center justify-center transition-all duration-300\n                     hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white", "aria-label": "Play video" }, { children: _jsx("div", { className: "w-0 h-0 border-y-8 border-y-transparent \n                          border-l-[16px] border-l-white \n                          translate-x-[2px]" }) })))] })));
+                    : videoVariants.fit.contain, className), style: videoStyle, preload: "metadata", playsInline: true, loop: videoAttributes.enabled, controls: false, src: src }, props)), ((isLoaded && !isPlaying) ||
+                (videoAttributes.videoSound && ((_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.muted))) &&
+                videoAttributes.enabled && (_jsx("button", Object.assign({ onClick: handlePlayPause, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50\n                     w-16 h-16 rounded-full bg-black/75 hover:bg-black/90 \n                     flex items-center justify-center transition-all duration-300\n                     hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white", "aria-label": "Play video" }, { children: _jsx("div", { className: "w-0 h-0 border-y-8 border-y-transparent \n                          border-l-[16px] border-l-white \n                          translate-x-[2px]" }) })))] })));
 });
 Video.displayName = "Video";
 export { Video as VideoEnhanced };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.9",
+  "version": "0.7.10-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -65,7 +65,6 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@tabler/icons-react": "^3.2.0",
-    "@tapcart/webbridge-react": "^1.13.0",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.13",
@@ -81,4 +80,4 @@
     "tailwindcss-animate": "^1.0.6",
     "vaul": "0.9.1"
   }
-}
+}

package/dist/components/hooks/use-style-utils.d.ts

@@ -1,69 +0,0 @@
-type BorderSide = "all" | "top" | "bottom" | "left" | "right";
-type BorderSides = BorderSide[];
-declare const getBorderSidesStyle: (borderSides: BorderSides) => {
-    borderWidth: string;
-    borderTopWidth?: undefined;
-    borderBottomWidth?: undefined;
-    borderLeftWidth?: undefined;
-    borderRightWidth?: undefined;
-} | {
-    borderTopWidth: string | number;
-    borderBottomWidth: string | number;
-    borderLeftWidth: string | number;
-    borderRightWidth: string | number;
-    borderWidth?: undefined;
-};
-type VerticalAlignment = "top" | "middle" | "bottom";
-type Spacing = {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-};
-interface AlignmentAndSpacing {
-    alignment: VerticalAlignment;
-    spacing: Spacing;
-}
-declare const getVerticalAlignmentStyle: (alignmentAndSpacing: AlignmentAndSpacing) => {
-    bottom: string;
-    top: string;
-    transform?: undefined;
-} | {
-    top: string;
-    transform: string;
-    bottom?: undefined;
-} | {
-    bottom?: undefined;
-    top?: undefined;
-    transform?: undefined;
-};
-type BackgroundAndPadding = {
-    backgroundColor?: ColorOption;
-    borderSides?: BorderSides;
-    borderColor?: ColorOption;
-    cornerRadius?: number;
-    padding?: Partial<Spacing>;
-};
-type ColorOption = {
-    type: "brand-kit" | "custom";
-    value: string;
-} | undefined;
-declare const getColor: (colorOption: ColorOption) => string | undefined;
-type BackgroundAndSpacing = AlignmentAndSpacing & {
-    backgroundColor?: ColorOption;
-    borderColor?: ColorOption;
-    backgroundCorners?: number;
-};
-type TextStyle = {
-    font: {
-        family: string;
-        weight: number | string;
-    };
-    size: number | string;
-    color: ColorOption;
-    uppercase: boolean;
-    textAlignment: "left" | "center" | "right" | "justify";
-};
-type Headline = TextStyle;
-type Subtext = TextStyle;
-//# sourceMappingURL=use-style-utils.d.ts.map

package/dist/components/hooks/use-style-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-style-utils.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-style-utils.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC7D,KAAK,WAAW,GAAG,UAAU,EAAE,CAAA;AAE/B,QAAA,MAAM,mBAAmB;;;;;;;;;;;;CAUxB,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,QAAA,MAAM,yBAAyB,wBACR,mBAAmB;;;;;;;;;;;;CAczC,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAC3B,CAAA;AAED,KAAK,WAAW,GACZ;IACE,IAAI,EAAE,WAAW,GAAG,QAAQ,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;CACd,GACD,SAAS,CAAA;AAEb,QAAA,MAAM,QAAQ,gBAAiB,WAAW,KAAG,MAAM,GAAG,SAMrD,CAAA;AAqCD,KAAK,oBAAoB,GAAG,mBAAmB,GAAG;IAChD,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,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,WAAW,CAAA;IAClB,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"}

package/dist/components/hooks/use-style-utils.js

@@ -1,77 +0,0 @@
-"use strict";
-const getBorderSidesStyle = (borderSides) => {
-    const style = borderSides.includes("all")
-        ? { borderWidth: "1px" }
-        : {
-            borderTopWidth: borderSides.includes("top") ? "1px" : 0,
-            borderBottomWidth: borderSides.includes("bottom") ? "1px" : 0,
-            borderLeftWidth: borderSides.includes("left") ? "1px" : 0,
-            borderRightWidth: borderSides.includes("right") ? "1px" : 0,
-        };
-    return style;
-};
-const getVerticalAlignmentStyle = (alignmentAndSpacing) => {
-    const { alignment, spacing } = alignmentAndSpacing;
-    switch (alignment) {
-        case "bottom":
-            return { bottom: `${spacing.bottom}px`, top: "auto" };
-        case "middle":
-            return { top: "50%", transform: "translateY(-50%)" };
-        case "top":
-            return { top: `${spacing.top}px`, bottom: "auto" };
-        default:
-            return {};
-    }
-};
-const getColor = (colorOption) => {
-    return colorOption
-        ? colorOption.type === "brand-kit"
-            ? `var(--${colorOption.value})`
-            : colorOption.value
-        : undefined;
-};
-function 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"))
-            ? "1px"
-            : 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"))
-            ? "1px"
-            : undefined,
-        borderRightWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("right")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
-            ? "1px"
-            : undefined,
-        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,
-    };
-}
-function getBackgroundAndSpacingStyle(backgroundAndSpacing) {
-    const { spacing, borderColor, backgroundColor, backgroundCorners } = backgroundAndSpacing;
-    return {
-        padding: `${spacing.top}px ${spacing.right}px ${spacing.bottom}px ${spacing.left}px`,
-        borderColor: borderColor ? borderColor.value : "transparent",
-        backgroundColor: getColor(backgroundColor) || "transparent",
-        borderRadius: `${backgroundCorners !== null && backgroundCorners !== void 0 ? backgroundCorners : 0}px`,
-    };
-}
-function getTextStyle(textStyle) {
-    const { font, size, color, uppercase, textAlignment } = textStyle;
-    return {
-        fontFamily: font.family,
-        fontWeight: font.weight,
-        fontSize: size,
-        color: getColor(color),
-        textTransform: uppercase ? "uppercase" : "none",
-        textAlign: textAlignment,
-    };
-}

package/dist/lib/block-utils.d.ts

@@ -1,97 +0,0 @@
-type BorderSide = "all" | "top" | "bottom" | "left" | "right";
-type BorderSides = BorderSide[];
-declare const getBorderSidesStyle: (borderSides: BorderSides) => {
-    borderWidth: string;
-    borderTopWidth?: undefined;
-    borderBottomWidth?: undefined;
-    borderLeftWidth?: undefined;
-    borderRightWidth?: undefined;
-} | {
-    borderTopWidth: string | number;
-    borderBottomWidth: string | number;
-    borderLeftWidth: string | number;
-    borderRightWidth: string | number;
-    borderWidth?: undefined;
-};
-type VerticalAlignment = "top" | "middle" | "bottom";
-type Spacing = {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-};
-interface AlignmentAndSpacing {
-    alignment: VerticalAlignment;
-    spacing: Spacing;
-}
-declare const getVerticalAlignmentStyle: (alignmentAndSpacing: AlignmentAndSpacing) => {
-    bottom: string;
-    top: string;
-    transform?: undefined;
-} | {
-    top: string;
-    transform: string;
-    bottom?: undefined;
-} | {
-    bottom?: undefined;
-    top?: undefined;
-    transform?: undefined;
-};
-type BackgroundAndPadding = {
-    backgroundColor?: ColorOption;
-    borderSides?: BorderSides;
-    borderColor?: ColorOption;
-    cornerRadius?: number;
-    padding?: Partial<Spacing>;
-};
-type ColorOption = {
-    type: "brand-kit" | "custom";
-    value: string;
-} | undefined;
-declare const getColor: (colorOption: ColorOption) => string | undefined;
-declare function getBackgroundAndPaddingStyle(backgroundAndPadding: BackgroundAndPadding): {
-    backgroundColor: string | undefined;
-    borderColor: string | undefined;
-    borderTopWidth: string | undefined;
-    borderBottomWidth: string | undefined;
-    borderLeftWidth: string | undefined;
-    borderRightWidth: string | undefined;
-    paddingTop: string | undefined;
-    paddingBottom: string | undefined;
-    paddingLeft: string | undefined;
-    paddingRight: string | undefined;
-    borderStyle: string | undefined;
-    borderRadius: string | undefined;
-};
-type BackgroundAndSpacing = AlignmentAndSpacing & {
-    backgroundColor?: ColorOption;
-    borderColor?: ColorOption;
-    backgroundCorners?: number;
-};
-declare function getBackgroundAndSpacingStyle(backgroundAndSpacing: BackgroundAndSpacing): {
-    padding: string;
-    borderColor: string;
-    backgroundColor: string;
-    borderRadius: string;
-};
-type TextStyle = {
-    font: {
-        family: string;
-        weight: number | string;
-    };
-    size: number | string;
-    color: ColorOption;
-    uppercase: boolean;
-    textAlignment: "left" | "center" | "right" | "justify";
-};
-type Headline = TextStyle;
-type Subtext = TextStyle;
-declare function getTextStyle(textStyle: Headline | Subtext): {
-    fontFamily: string;
-    fontWeight: string | number;
-    fontSize: string | number;
-    color: string | undefined;
-    textTransform: string;
-    textAlign: "center" | "left" | "right" | "justify";
-};
-//# sourceMappingURL=block-utils.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"block-utils.d.ts","sourceRoot":"","sources":["../../lib/block-utils.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC7D,KAAK,WAAW,GAAG,UAAU,EAAE,CAAA;AAE/B,QAAA,MAAM,mBAAmB;;;;;;;;;;;;CAUxB,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,QAAA,MAAM,yBAAyB,wBACR,mBAAmB;;;;;;;;;;;;CAczC,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAC3B,CAAA;AAED,KAAK,WAAW,GACZ;IACE,IAAI,EAAE,WAAW,GAAG,QAAQ,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;CACd,GACD,SAAS,CAAA;AAEb,QAAA,MAAM,QAAQ,gBAAiB,WAAW,KAAG,MAAM,GAAG,SAMrD,CAAA;AAED,iBAAS,4BAA4B,CACnC,oBAAoB,EAAE,oBAAoB;;;;;;;;;;;;;EAgC3C;AAED,KAAK,oBAAoB,GAAG,mBAAmB,GAAG;IAChD,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,iBAAS,4BAA4B,CACnC,oBAAoB,EAAE,oBAAoB;;;;;EAU3C;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,WAAW,CAAA;IAClB,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,iBAAS,YAAY,CAAC,SAAS,EAAE,QAAQ,GAAG,OAAO;;;;;;;EAUlD"}

package/dist/lib/block-utils.js

@@ -1,77 +0,0 @@
-"use strict";
-const getBorderSidesStyle = (borderSides) => {
-    const style = borderSides.includes("all")
-        ? { borderWidth: "1px" }
-        : {
-            borderTopWidth: borderSides.includes("top") ? "1px" : 0,
-            borderBottomWidth: borderSides.includes("bottom") ? "1px" : 0,
-            borderLeftWidth: borderSides.includes("left") ? "1px" : 0,
-            borderRightWidth: borderSides.includes("right") ? "1px" : 0,
-        };
-    return style;
-};
-const getVerticalAlignmentStyle = (alignmentAndSpacing) => {
-    const { alignment, spacing } = alignmentAndSpacing;
-    switch (alignment) {
-        case "bottom":
-            return { bottom: `${spacing.bottom}px`, top: "auto" };
-        case "middle":
-            return { top: "50%", transform: "translateY(-50%)" };
-        case "top":
-            return { top: `${spacing.top}px`, bottom: "auto" };
-        default:
-            return {};
-    }
-};
-const getColor = (colorOption) => {
-    return colorOption
-        ? colorOption.type === "brand-kit"
-            ? `var(--${colorOption.value})`
-            : colorOption.value
-        : undefined;
-};
-function 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"))
-            ? "1px"
-            : 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"))
-            ? "1px"
-            : undefined,
-        borderRightWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("right")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
-            ? "1px"
-            : undefined,
-        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,
-    };
-}
-function getBackgroundAndSpacingStyle(backgroundAndSpacing) {
-    const { spacing, borderColor, backgroundColor, backgroundCorners } = backgroundAndSpacing;
-    return {
-        padding: `${spacing.top}px ${spacing.right}px ${spacing.bottom}px ${spacing.left}px`,
-        borderColor: borderColor ? borderColor.value : "transparent",
-        backgroundColor: getColor(backgroundColor) || "transparent",
-        borderRadius: `${backgroundCorners !== null && backgroundCorners !== void 0 ? backgroundCorners : 0}px`,
-    };
-}
-function getTextStyle(textStyle) {
-    const { font, size, color, uppercase, textAlignment } = textStyle;
-    return {
-        fontFamily: font.family,
-        fontWeight: font.weight,
-        fontSize: size,
-        color: getColor(color),
-        textTransform: uppercase ? "uppercase" : "none",
-        textAlign: textAlignment,
-    };
-}