@tapcart/mobile-components 0.4.4 → 0.4.7

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

@@ -1,3 +1,4 @@
+import { ReadonlyURLSearchParams } from "next/navigation";
 interface Product {
     handle: string;
 }
@@ -23,7 +24,8 @@ interface UseInfiniteScrollReturn {
     isLoading: boolean;
     isValidating: boolean;
 }
-declare const constructURL: (params: Record<string, any>, apiURL: string) => string;
+export declare const formatSearchParamsAsNextQueryVariables: (searchParams: ReadonlyURLSearchParams) => {};
+declare const constructURL: (apiURL: string) => string;
 declare const useInfiniteScroll: ({ initialData, queryVariables: queryVariableProps, }: UseInfiniteScrollProps) => UseInfiniteScrollReturn;
 export { useInfiniteScroll, constructURL };
 //# sourceMappingURL=use-infinite-scroll.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAQA,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf;AAOD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,QAAQ,CAAA;IACrB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AA2CD,QAAA,MAAM,YAAY,WAAY,OAAO,MAAM,EAAE,GAAG,CAAC,UAAU,MAAM,WAahE,CAAA;AAqBD,QAAA,MAAM,iBAAiB,yDAGpB,sBAAsB,KAAG,uBAoF3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAmB,MAAM,iBAAiB,CAAA;AAE1E,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf;AAOD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,QAAQ,CAAA;IACrB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,sCAAsC,iBACnC,uBAAuB,OAsBtC,CAAA;AAED,QAAA,MAAM,YAAY,WAAY,MAAM,WAGnC,CAAA;AAED,QAAA,MAAM,iBAAiB,yDAGpB,sBAAsB,KAAG,uBA4F3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}

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

@@ -3,94 +3,65 @@ import { useCallback, useEffect, useMemo } from "react";
 import useSWRInfinite from "swr/infinite";
 import { useInView } from "react-intersection-observer";
 import { useSearchParams } from "next/navigation";
-const PAGE_SIZE = 8;
-const parseSort = (json) => {
-    return json ? JSON.parse(json) : undefined;
-};
-const reconcileFilters = ({ selectedFilters = "[]", filtersData = [] }) => {
-    if (!selectedFilters)
-        throw new Error("No filters provided");
-    const filtersArray = selectedFilters ? JSON.parse(selectedFilters) : undefined;
-    if (!filtersData)
-        throw new Error("No filters data found");
-    const selectedTags = new Map();
-    filtersArray === null || filtersArray === void 0 ? void 0 : filtersArray.forEach((filter) => {
-        selectedTags.set(filter, true);
-    });
-    const matchingFilters = (filtersList, selectedTags) => {
-        return filtersList.filter((filter) => {
-            if (!(filter === null || filter === void 0 ? void 0 : filter.tag))
-                return false;
-            const parsedFilter = filter.tag;
-            return selectedTags.has(parsedFilter);
-        });
-    };
-    const searchFilters = (filtersData === null || filtersData === void 0 ? void 0 : filtersData.map((category) => {
-        const filterList = category.filters;
-        const matchingFiltersList = matchingFilters(filterList, selectedTags);
-        return Object.assign(Object.assign({}, category), { filters: matchingFiltersList });
-    })) || [];
-    return {
-        searchFilters,
-        filtersData,
-    };
-};
-const constructURL = (params, apiURL) => {
-    const url = new URL(apiURL);
-    Object.keys(params).forEach((key) => {
-        const value = params[key];
-        if (value !== undefined && value !== null) {
-            if (typeof value === "string") {
-                url.searchParams.append(key, value);
+export const formatSearchParamsAsNextQueryVariables = (searchParams) => {
+    const formattedParams = {};
+    if (!searchParams)
+        return formattedParams;
+    searchParams.forEach((value, key) => {
+        //@ts-expect-error
+        if (formattedParams[key]) {
+            //@ts-expect-error
+            if (Array.isArray(formattedParams[key])) {
+                //@ts-expect-error
+                formattedParams[key].push(value);
             }
             else {
-                url.searchParams.append(key, JSON.stringify(value));
+                //@ts-expect-error
+                formattedParams[key] = [formattedParams[key], value];
             }
         }
+        else {
+            //@ts-expect-error
+            formattedParams[key] = value;
+        }
     });
-    return url.toString();
+    return formattedParams;
 };
-const getKey = (pageIndex, previousPageData, queryVariables, apiURL) => {
-    var _a;
-    if (pageIndex === 0)
-        return constructURL(queryVariables, apiURL);
-    if (!previousPageData || !((_a = previousPageData.pageData) === null || _a === void 0 ? void 0 : _a.cursorBlob))
-        return null;
-    return constructURL(Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.pageData.cursorBlob }), apiURL);
+const constructURL = (apiURL) => {
+    const url = new URL(apiURL);
+    return url.toString();
 };
 const useInfiniteScroll = ({ initialData, queryVariables: queryVariableProps, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const searchParams = useSearchParams();
-    const sortStateFromParam = useCallback(() => {
-        return (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("sort"))
-            ? parseSort(searchParams.get("sort"))
-            : // we need to default to the sort option from the query variables so that the initial sort is correct
-                queryVariableProps.sortOption;
-    }, [queryVariableProps.sortOption, searchParams]);
-    const selectedFilters = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("filters")) || "[]";
-    const queryVariables = useMemo(() => {
-        return Object.assign(Object.assign({}, queryVariableProps), { sortOption: sortStateFromParam(), filterCategories: reconcileFilters({
-                selectedFilters,
-                filtersData: initialData.filtersData,
-            }).searchFilters });
-    }, [
-        initialData.filtersData,
-        queryVariableProps,
-        selectedFilters,
-        sortStateFromParam,
-    ]);
     const { ref, inView } = useInView({ rootMargin: "600px" }); // controls how early the next page loads
-    const fetcher = (url) => fetch(url).then((res) => res.json());
-    const { data, error, size, setSize, isLoading, isValidating, } = useSWRInfinite((pageIndex, previousPageData) => getKey(pageIndex, previousPageData, queryVariables, initialData.apiURL), fetcher, {
+    const queryVariables = useMemo(() => {
+        const formattedParams = formatSearchParamsAsNextQueryVariables(searchParams);
+        return Object.assign(Object.assign({}, queryVariableProps), { searchParams: formattedParams });
+    }, [queryVariableProps, searchParams]);
+    const getKey = (pageIndex, previousPageData, queryVariables) => {
+        var _a;
+        if (pageIndex === 0) {
+            return Object.assign({}, queryVariables);
+        }
+        if (!previousPageData || !((_a = previousPageData.pageData) === null || _a === void 0 ? void 0 : _a.cursorBlob))
+            return null;
+        return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.pageData.cursorBlob });
+    };
+    const fetcher = (body) => fetch(constructURL(initialData.apiURL), {
+        method: "POST",
+        body: JSON.stringify(body),
+    }).then((res) => res.json());
+    const { data, error, size, setSize, isLoading, isValidating, } = useSWRInfinite((pageIndex, previousPageData) => getKey(pageIndex, previousPageData, queryVariables), fetcher, {
         revalidateFirstPage: false,
         initialSize: 1,
     });
     const isLoadingInitialData = !data && !error;
     const isLoadingMore = isLoadingInitialData ||
         (size > 0 && data && typeof data[size - 1] === "undefined");
-    const isEmpty = ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.length) === 0;
+    const isEmpty = ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) === 0;
     const isEndPointer = data
-        ? !((_d = (_c = data[data.length - 1]) === null || _c === void 0 ? void 0 : _c.pageData) === null || _d === void 0 ? void 0 : _d.cursorBlob)
+        ? !((_e = (_d = data[data.length - 1]) === null || _d === void 0 ? void 0 : _d.pageData) === null || _e === void 0 ? void 0 : _e.cursorBlob)
         : true;
     const isReachingEnd = isEmpty || isEndPointer;
     const isRefreshing = isValidating && data && data.length === size;
@@ -113,7 +84,7 @@ const useInfiniteScroll = ({ initialData, queryVariables: queryVariableProps, })
         isReachingEnd,
         ref,
         products: data ? data === null || data === void 0 ? void 0 : data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products) : [],
-        isLoading: false,
+        isLoading: isLoading,
         isValidating,
     };
 };

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

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

package/dist/components/ui/drawer.js

@@ -25,7 +25,8 @@ const Drawer = (_a) => {
 Drawer.displayName = "Drawer";
 const DrawerOverlay = React.forwardRef((_a, ref) => {
     var { className, backdropHexColor = "#000000" } = _a, props = __rest(_a, ["className", "backdropHexColor"]);
-    return (_jsx(DrawerPrimitive.Overlay, Object.assign({ style: { backgroundColor: `${backdropHexColor}CC` }, ref: ref, className: cn(`fixed inset-0 z-50`, className) }, props)));
+    const style = { backgroundColor: `${backdropHexColor}CC` };
+    return (_jsx(DrawerPrimitive.Overlay, Object.assign({ style: style, ref: ref, className: cn(`fixed inset-0 z-50`, className) }, props)));
 });
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 const DrawerContentBase = React.forwardRef((_a, ref) => {

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EA8BhB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAkDD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAczE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAkChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAsDD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAczE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/icon.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconSearch, } from "@tabler/icons-react";
+import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff } from "@tabler/icons-react";
 import { cn, iconColorVariantClasses } from "../../lib/utils";
 const iconVariants = cva("inline-flex items-center justify-center text-sm font-medium  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", {
     variants: {
@@ -70,7 +70,11 @@ const icons = {
     "square-x-filled": IconSquareXFilled,
     trash: IconTrash,
     loader: IconLoader2,
-    "search": IconSearch
+    "columns-1": IconColumns1,
+    "columns-2": IconColumns2,
+    "columns-3": IconColumns3,
+    search: IconSearch,
+    "shopping-cart-off": IconShoppingCartOff,
 };
 function Icon(_a) {
     var { className, name, size = "md", color } = _a, props = __rest(_a, ["className", "name", "size", "color"]);

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/image.js

@@ -9,10 +9,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/display-name */
 /* eslint-disable @next/next/no-img-element */
 import * as React from "react";
+import ReactDOM from "react-dom";
+function ImagePreload({ imgAttributes }) {
+    const opts = {
+        as: "image",
+        imageSrcSet: imgAttributes.srcSet,
+        imageSizes: imgAttributes.sizes,
+        fetchPriority: imgAttributes.fetchPriority,
+    };
+    if (ReactDOM.preload) {
+        // See https://github.com/facebook/react/pull/26940
+        ReactDOM.preload(imgAttributes.src, 
+        // @ts-expect-error TODO: upgrade to `@types/react-dom@18.3.x`
+        opts);
+        return null;
+    }
+    return null;
+}
 /**
  * Tapcart’s Image component is a wrapper around the HTML image element.
  * It supports the same props as the HTML `img` element, but automatically
@@ -100,6 +117,7 @@ export const Image = React.forwardRef((_a, ref) => {
             : objectFit === "fit"
                 ? "contain"
                 : objectFit;
+        const nFetchPriority = loading === "eager" ? "high" : "auto";
         return {
             width: nWidth,
             height: nHeight,
@@ -107,6 +125,7 @@ export const Image = React.forwardRef((_a, ref) => {
             alt: nAlt,
             aspectRatio: nAspectRatio,
             objectFit: nObjectFit,
+            fetchPriority: nFetchPriority,
         };
     }, [
         width,
@@ -136,12 +155,25 @@ export const Image = React.forwardRef((_a, ref) => {
     };
     const imgClassName = `opacity-0 transition-opacity duration-500 ease-in-out ${isLoaded ? "opacity-100" : ""}`;
     const wrapperStyle = Object.assign({ aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/") }, imageWrapperStyles);
-    return (_jsx("div", Object.assign({ className: "relative bg-stateColors-skeleton border-transparent", style: wrapperStyle }, { children: !hasError && normalizedProps.src ? (_jsx("img", Object.assign({ ref: ref, alt: normalizedProps.alt, decoding: decoding, height: normalizedProps.height, loading: loading, src: normalizedProps.src, srcSet: generateSrcSet(normalizedProps.src, generateSizes(imageWidths, normalizedProps.aspectRatio, crop), loader, normalizedProps.objectFit === "contain"), width: normalizedProps.width, className: imgClassName, onLoad: handleImageLoad, onError: handleImageError, sizes: sizes, style: {
-                objectFit: normalizedProps.objectFit,
-                maxHeight: "100%",
-                height: "100%",
-                width: "100%",
-            } }, passthroughProps))) : (_jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-stateColors-skeleton " })) })));
+    const srcSet = generateSrcSet(normalizedProps.src, generateSizes(imageWidths, normalizedProps.aspectRatio, crop), loader, normalizedProps.objectFit === "contain");
+    return (_jsxs(_Fragment, { children: [loading === "eager" && (_jsx(ImagePreload, { imgAttributes: {
+                    srcSet,
+                    sizes,
+                    fetchPriority: normalizedProps.fetchPriority,
+                    src: normalizedProps.src || "",
+                } })), _jsx("div", Object.assign({ className: "relative bg-stateColors-skeleton border-transparent", style: wrapperStyle }, { children: !hasError && normalizedProps.src ? (_jsx("img", Object.assign({}, passthroughProps, { fetchPriority: normalizedProps.fetchPriority, alt: normalizedProps.alt, decoding: decoding, height: normalizedProps.height, loading: loading, srcSet: srcSet, width: normalizedProps.width, className: imgClassName, onLoad: handleImageLoad, onError: handleImageError, sizes: sizes, 
+                    // `src` needs to come after `sizes` and `srcSet` because React updates
+                    // attributes in order. If we keep `src` the first one, Safari will
+                    // immediately start to fetch `src`, before `sizes` and `srcSet` are even
+                    // updated by React. That causes multiple unnecessary requests if `srcSet`
+                    // and `sizes` are defined.
+                    // This bug cannot be reproduced in Chrome or Firefox.
+                    src: normalizedProps.src, ref: ref, style: {
+                        objectFit: normalizedProps.objectFit,
+                        maxHeight: "100%",
+                        height: "100%",
+                        width: "100%",
+                    } }))) : (_jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-stateColors-skeleton " })) }))] }));
 });
 /**
  * The shopifyLoader function is a simple utility function that takes a src, width,

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Product } from "app-studio-types";
 type Config = {
-    gridLayout?: string;
+    columns?: string;
     productImage?: {
         enabled: boolean;
         cornerRadius: number;
@@ -80,6 +80,7 @@ export type ProductCardProps = {
         productId: string;
         variantId?: string;
     }) => void;
+    className?: string;
 };
 declare const ProductCard: React.FC<ProductCardProps>;
 export { ProductCard };

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

@@ -1 +1 @@
-{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}

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

@@ -133,8 +133,8 @@ const productCardFavoriteVariants = cva("absolute ", {
         iconPosition: "below-image-on-right",
     },
 });
-const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, className, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
     const { variants, images, title, tags } = product;
     // Select the variant that has the lowest price that is available or just the lowest price if none are available
     let searchVariants = variants.filter((variant) => variant.available);
@@ -172,12 +172,12 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
     // Prepare Product Open
     const _openProduct = () => openProduct === null || openProduct === void 0 ? void 0 : openProduct({ productId, variantId });
     const getImageSizes = (config) => {
-        switch (config.gridLayout) {
-            case "1x1":
+        switch (config.columns) {
+            case "1":
                 return "100vw";
-            case "2x2":
+            case "2":
                 return "50vw";
-            case "3x3":
+            case "3":
                 return "33vw";
             default:
                 return "100vw";
@@ -185,7 +185,7 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
     };
     const sizes = getImageSizes(config);
     const imageSwipeEnabled = (((_e = config.productImage) === null || _e === void 0 ? void 0 : _e.allowSwipeability) && product.images.length > 1);
-    return (_jsx("div", Object.assign({ className: `w-1/2` }, { children: _jsxs("div", Object.assign({ className: "w-full active:opacity-70", onClick: () => {
+    return (_jsx("div", Object.assign({ className: cn("w-1/2", className) }, { children: _jsxs("div", Object.assign({ className: "w-full active:opacity-70", onClick: () => {
                 _openProduct();
             } }, { children: [((_f = config.productImage) === null || _f === void 0 ? void 0 : _f.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
                         borderTopLeftRadius: `${config.productImage.cornerRadius}px`,
@@ -232,15 +232,17 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
                                     "text-right": ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.textAlignment) === "right",
                                 }, {
                                     "text-center": ((_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.textAlignment) === "center",
-                                }, { truncate: !((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.wrapText) }, { "text-wrap": (_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.wrapText }, "text-textColors-productTitle"), style: { fontSize: (_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_7 = config.price) === null || _7 === void 0 ? void 0 : _7.textAlignment) === "left" }, { "justify-end": ((_8 = config.price) === null || _8 === void 0 ? void 0 : _8.textAlignment) === "right" }, { "justify-center": ((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.textAlignment) === "center" }) }, { children: [((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
+                                }, {
+                                    "line-clamp-2 whitespace-normal overflow-hidden text-ellipsis": (_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.wrapText,
+                                }, "text-textColors-productTitle"), style: { fontSize: (_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_6 = config.price) === null || _6 === void 0 ? void 0 : _6.textAlignment) === "left" }, { "justify-end": ((_7 = config.price) === null || _7 === void 0 ? void 0 : _7.textAlignment) === "right" }, { "justify-center": ((_8 = config.price) === null || _8 === void 0 ? void 0 : _8.textAlignment) === "center" }) }, { children: [((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
                                         variant.compareAtPrice &&
-                                        parseFloat((_11 = variant.compareAtPrice) === null || _11 === void 0 ? void 0 : _11.amount) >
+                                        parseFloat((_10 = variant.compareAtPrice) === null || _10 === void 0 ? void 0 : _10.amount) >
                                             parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
-                                        parseFloat((_12 = variant.compareAtPrice) === null || _12 === void 0 ? void 0 : _12.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_13 = config.price) === null || _13 === void 0 ? void 0 : _13.fontSize })), ((_14 = config.favoritesIcon) === null || _14 === void 0 ? void 0 : _14.enabled) &&
+                                        parseFloat((_11 = variant.compareAtPrice) === null || _11 === void 0 ? void 0 : _11.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_12 = config.price) === null || _12 === void 0 ? void 0 : _12.fontSize })), ((_13 = config.favoritesIcon) === null || _13 === void 0 ? void 0 : _13.enabled) &&
                                     config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
                                             onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
-                                        }, size: "small", icon: ((_16 = (_15 = config.favoritesIcon) === null || _15 === void 0 ? void 0 : _15.icon) === null || _16 === void 0 ? void 0 : _16.type) === "internal"
-                                            ? (_18 = (_17 = config.favoritesIcon) === null || _17 === void 0 ? void 0 : _17.icon) === null || _18 === void 0 ? void 0 : _18.url
+                                        }, size: "small", icon: ((_15 = (_14 = config.favoritesIcon) === null || _14 === void 0 ? void 0 : _14.icon) === null || _15 === void 0 ? void 0 : _15.type) === "internal"
+                                            ? (_17 = (_16 = config.favoritesIcon) === null || _16 === void 0 ? void 0 : _16.icon) === null || _17 === void 0 ? void 0 : _17.url
                                             : undefined }) })))] }))] }))] })) })));
 };
 export { ProductCard };

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

@@ -24,6 +24,7 @@ declare const Selectors: React.ForwardRefExoticComponent<Omit<React.DetailedHTML
 type SelectorContainerProps = {
     children: React.ReactElement<SelectorsProps>[];
     containerRef: React.RefObject<HTMLDivElement>;
+    className: string;
 };
 declare const SelectorContainer: React.FC<SelectorContainerProps>;
 export { SelectorContainer, Selectors, selectorsVariants };

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

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

package/dist/components/ui/selectors.js

@@ -31,14 +31,14 @@ const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pa
     },
 });
 const Selectors = React.forwardRef((_a, ref) => {
-    var { label, selected, disabled = false, className, onSelect } = _a, props = __rest(_a, ["label", "selected", "disabled", "className", "onSelect"]);
+    var { label, selected, disabled = false, className, onSelect, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "className", "onSelect", "children"]);
     return (_jsx("button", Object.assign({ disabled: disabled, onClick: onSelect, className: cn(selectorsVariants({
             selected: selected,
             className,
             disabled,
-        }), "group"), ref: ref }, props, { children: _jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label })) })));
+        }), "group"), ref: ref }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
 });
-const SelectorContainer = ({ children, containerRef, }) => {
+const SelectorContainer = ({ children, containerRef, className, }) => {
     const [showFadeLeft, setShowFadeLeft] = React.useState(false);
     const [showFadeRight, setShowFadeRight] = React.useState(false);
     const checkOverflow = () => {
@@ -55,7 +55,7 @@ const SelectorContainer = ({ children, containerRef, }) => {
     React.useEffect(() => {
         checkOverflow();
     }, [children]);
-    return (_jsx("div", Object.assign({ className: "relative" }, { children: _jsxs("div", Object.assign({ className: "flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
+    return (_jsx("div", Object.assign({ className: "relative" }, { children: _jsxs("div", Object.assign({ className: cn("flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
 };
 Selectors.displayName = "Selectors";
 export { SelectorContainer, Selectors, selectorsVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../components/ui/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,gBAAgB;;mFAYrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,EACP,MAAM,EACN,KAAK,EACL,YAAgB,EAChB,GAAG,KAAK,EACT,EAAE,aAAa,2CAYf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../components/ui/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,gBAAgB;;mFAYrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,EACP,MAAM,EACN,KAAK,EACL,YAAgB,EAChB,GAAG,KAAK,EACT,EAAE,aAAa,2CAaf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/skeleton.js

@@ -24,10 +24,11 @@ const skeletonVariants = cva("animate-pulse flex bg-stateColors-skeleton rounded
 });
 function Skeleton(_a) {
     var { className, variant, height, width, borderRadius = 4 } = _a, props = __rest(_a, ["className", "variant", "height", "width", "borderRadius"]);
-    return (_jsx("div", Object.assign({ className: cn(skeletonVariants({ variant }), className), style: {
-            width: width,
-            height: height,
-            borderRadius: variant === "rectangular" ? borderRadius : "",
-        } }, props)));
+    const style = {
+        width: width,
+        height: height,
+        borderRadius: variant === "rectangular" ? borderRadius : "",
+    };
+    return (_jsx("div", Object.assign({ className: cn(skeletonVariants({ variant }), className), style: style }, props)));
 }
 export { Skeleton };

package/dist/components/ui/slider.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "../../lib/utils";
-import { Input } from "./Input";
+import { Input } from "./Input/index";
 const Slider = React.forwardRef((_a, ref) => {
     var { className, max, min = 0, step = 1, defaultValue, value, onChange } = _a, 
     // doubleValue = false,

package/dist/styles.css

@@ -803,6 +803,9 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-4 {
+  margin-bottom: 1rem;
+}
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1081,6 +1084,18 @@ video {
 .resize {
   resize: both;
 }
+.columns-1 {
+  -moz-columns: 1;
+       columns: 1;
+}
+.columns-2 {
+  -moz-columns: 2;
+       columns: 2;
+}
+.columns-3 {
+  -moz-columns: 3;
+       columns: 3;
+}
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1184,6 +1199,9 @@ video {
 .text-ellipsis {
   text-overflow: ellipsis;
 }
+.whitespace-normal {
+  white-space: normal;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1378,6 +1396,10 @@ video {
 .p-\[1px\] {
   padding: 1px;
 }
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1775,9 +1797,6 @@ video {
   --tw-drop-shadow: drop-shadow(0 3px 1px 0 rgba(0,0,0,1));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.\!filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
-}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1846,249 +1865,330 @@ video {
 *:hover {
     text-decoration-line: unset !important;
   }
+
+body::-webkit-scrollbar {
+  display: none;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
+
 .file\:bg-transparent::file-selector-button {
   background-color: transparent;
 }
+
 .file\:text-sm::file-selector-button {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+
 .file\:font-medium::file-selector-button {
   font-weight: 500;
 }
+
 .placeholder\:text-stateColors-error::-moz-placeholder {
   color: var(--stateColors-error);
 }
+
 .placeholder\:text-stateColors-error::placeholder {
   color: var(--stateColors-error);
 }
+
 .placeholder\:text-textColors-secondaryColor::-moz-placeholder {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+
 .placeholder\:text-textColors-secondaryColor::placeholder {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+
 .placeholder-shown\:\!truncate:-moz-placeholder-shown {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
 }
+
 .placeholder-shown\:\!truncate:placeholder-shown {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
 }
+
 .placeholder-shown\:p-4:-moz-placeholder-shown {
   padding: 1rem;
 }
+
 .placeholder-shown\:p-4:placeholder-shown {
   padding: 1rem;
 }
+
 .placeholder-shown\:text-textColors-secondaryColor:-moz-placeholder-shown {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+
 .placeholder-shown\:text-textColors-secondaryColor:placeholder-shown {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+
 .focus-within\:\!border-stateColors-error:focus-within {
   border-color: var(--stateColors-error) !important;
 }
+
 .focus-within\:border-coreColors-brandColorPrimary:focus-within {
   border-color: var(--coreColors-brandColorPrimary);
 }
+
 .hover\:h-\[18px\]:hover {
   height: 18px;
 }
+
 .hover\:w-\[18px\]:hover {
   width: 18px;
 }
+
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
+
 .hover\:bg-muted:hover {
   background-color: hsl(var(--muted));
 }
+
 .hover\:bg-secondary:hover {
   background-color: hsl(var(--secondary));
 }
+
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
+
 .hover\:text-foreground:hover {
   color: hsl(var(--foreground));
 }
+
 .hover\:text-muted-foreground:hover {
   color: hsl(var(--muted-foreground));
 }
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+
 .hover\:\!line-through:hover {
   text-decoration-line: line-through !important;
 }
+
 .focus\:border-coreColors-brandColorPrimary:focus {
   border-color: var(--coreColors-brandColorPrimary);
 }
+
 .focus\:border-stateColors-error:focus {
   border-color: var(--stateColors-error);
 }
+
 .focus\:bg-stateColors-skeleton:focus {
   background-color: var(--stateColors-skeleton);
 }
+
 .focus\:opacity-100:focus {
   opacity: 1;
 }
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .focus\:ring-ring:focus {
   --tw-ring-color: hsl(var(--ring));
 }
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
+
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+
 .focus-visible\:ring-0:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .focus-visible\:ring-2:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .focus-visible\:ring-ring:focus-visible {
   --tw-ring-color: hsl(var(--ring));
 }
+
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
+
 .focus-visible\:ring-offset-background:focus-visible {
   --tw-ring-offset-color: hsl(var(--background));
 }
+
 .active\:text-coreColors-brandColorPrimary:active {
   color: var(--coreColors-brandColorPrimary);
 }
+
 .active\:opacity-70:active {
   opacity: 0.7;
 }
+
 .active\:outline-coreColors-brandColorPrimary:active {
   outline-color: var(--coreColors-brandColorPrimary);
 }
+
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
+
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
+
 .disabled\:border-stateColors-disabled:disabled {
   border-color: var(--stateColors-disabled);
 }
+
 .disabled\:bg-buttonColors-secondaryFill:disabled {
   background-color: var(--buttonColors-secondaryFill);
 }
+
 .disabled\:bg-stateColors-disabled:disabled {
   background-color: var(--stateColors-disabled);
 }
+
 .disabled\:bg-transparent:disabled {
   background-color: transparent;
 }
+
 .disabled\:text-stateColors-disabled:disabled {
   color: var(--stateColors-disabled);
 }
+
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+
 .disabled\:opacity-70:disabled {
   opacity: 0.7;
 }
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
+
 .group:active .group-active\:text-coreColors-brandColorPrimary {
   color: var(--coreColors-brandColorPrimary);
 }
+
 .group:disabled .group-disabled\:text-stateColors-disabled {
   color: var(--stateColors-disabled);
 }
+
 .group.destructive .group-\[\.destructive\]\:border-muted\/40 {
   border-color: hsl(var(--muted) / 0.4);
 }
+
 .group.destructive .group-\[\.destructive\]\:text-red-300 {
   --tw-text-opacity: 1;
   color: rgb(252 165 165 / var(--tw-text-opacity));
 }
+
 .group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
   border-color: hsl(var(--destructive) / 0.3);
 }
+
 .group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
   background-color: hsl(var(--destructive));
 }
+
 .group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
   color: hsl(var(--destructive-foreground));
 }
+
 .group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
   --tw-text-opacity: 1;
   color: rgb(254 242 242 / var(--tw-text-opacity));
 }
+
 .group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
   --tw-ring-color: hsl(var(--destructive));
 }
+
 .group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
+
 .group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
   --tw-ring-offset-color: #dc2626;
 }
+
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:opacity-0 {
   opacity: 0;
 }
+
 .peer:placeholder-shown ~ .peer-placeholder-shown\:opacity-0 {
   opacity: 0;
 }
+
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
+
 .peer:disabled ~ .peer-disabled\:opacity-70 {
   opacity: 0.7;
 }
+
 .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
+
 .data-\[state\=checked\]\:translate-x-6[data-state=checked] {
   --tw-translate-x: 1.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel] {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end] {
   --tw-translate-x: var(--radix-toast-swipe-end-x);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move] {
   --tw-translate-x: var(--radix-toast-swipe-move-x);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 @keyframes accordion-up {
 
   from {
@@ -2099,9 +2199,11 @@ video {
     height: 0;
   }
 }
+
 .data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
   animation: accordion-up 0.2s ease-out;
 }
+
 @keyframes accordion-down {
 
   from {
@@ -2112,36 +2214,47 @@ video {
     height: var(--radix-accordion-content-height);
   }
 }
+
 .data-\[state\=open\]\:animate-accordion-down[data-state=open] {
   animation: accordion-down 0.2s ease-out;
 }
+
 .data-\[state\=checked\]\:bg-stateColors-success[data-state=checked] {
   background-color: var(--stateColors-success);
 }
+
 .data-\[state\=on\]\:bg-accent[data-state=on] {
   background-color: hsl(var(--accent));
 }
+
 .data-\[state\=unchecked\]\:bg-stateColors-disabled[data-state=unchecked] {
   background-color: var(--stateColors-disabled);
 }
+
 .data-\[icon\=true\]\:pr-10[data-icon=true] {
   padding-right: 2.5rem;
 }
+
 .data-\[error\=true\]\:text-stateColors-error[data-error=true] {
   color: var(--stateColors-error);
 }
+
 .data-\[state\=on\]\:text-accent-foreground[data-state=on] {
   color: hsl(var(--accent-foreground));
 }
+
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
+
 .data-\[swipe\=move\]\:transition-none[data-swipe=move] {
   transition-property: none;
 }
+
 .data-\[state\=open\]\:duration-500[data-state=open] {
   transition-duration: 500ms;
 }
+
 .data-\[state\=open\]\:animate-in[data-state=open] {
   animation-name: enter;
   animation-duration: 150ms;
@@ -2151,6 +2264,7 @@ video {
   --tw-enter-translate-x: initial;
   --tw-enter-translate-y: initial;
 }
+
 .data-\[state\=closed\]\:animate-out[data-state=closed] {
   animation-name: exit;
   animation-duration: 150ms;
@@ -2160,6 +2274,7 @@ video {
   --tw-exit-translate-x: initial;
   --tw-exit-translate-y: initial;
 }
+
 .data-\[swipe\=end\]\:animate-out[data-swipe=end] {
   animation-name: exit;
   animation-duration: 150ms;
@@ -2169,51 +2284,67 @@ video {
   --tw-exit-translate-x: initial;
   --tw-exit-translate-y: initial;
 }
+
 .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
   --tw-exit-opacity: 0;
 }
+
 .data-\[state\=open\]\:fade-in-0[data-state=open] {
   --tw-enter-opacity: 0;
 }
+
 .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
   --tw-exit-scale: .95;
 }
+
 .data-\[state\=open\]\:zoom-in-95[data-state=open] {
   --tw-enter-scale: .95;
 }
+
 .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
   --tw-enter-translate-y: -0.5rem;
 }
+
 .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
   --tw-enter-translate-x: 0.5rem;
 }
+
 .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
   --tw-enter-translate-x: -0.5rem;
 }
+
 .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
   --tw-enter-translate-y: 0.5rem;
 }
+
 .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
   --tw-exit-translate-x: -50%;
 }
+
 .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
   --tw-exit-translate-y: -48%;
 }
+
 .data-\[state\=closed\]\:slide-out-to-top-full[data-state=closed] {
   --tw-exit-translate-y: -100%;
 }
+
 .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
   --tw-enter-translate-x: -50%;
 }
+
 .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
   --tw-enter-translate-y: -48%;
 }
+
 .data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
   --tw-enter-translate-y: -100%;
 }
+
 .data-\[state\=open\]\:duration-500[data-state=open] {
   animation-duration: 500ms;
 }
+
 @media (min-width: 640px) {
 
   .sm\:mt-0 {
@@ -2242,68 +2373,89 @@ video {
     text-align: left;
   }
 }
+
 .\[\&\+label\]\:text-stateColors-error+label {
   color: var(--stateColors-error);
 }
+
 .\[\&\>div\>button\]\:border-coreColors-brandColorPrimary>div>button {
   border-color: var(--coreColors-brandColorPrimary);
 }
+
 .\[\&\>div\]\:w-full>div {
   width: 100%;
 }
+
 .\[\&\>p\]\:text-stateColors-disabled>p {
   color: var(--stateColors-disabled);
 }
+
 .\[\&\>p\]\:text-textColors-primaryColor>p {
   color: var(--textColors-primaryColor, #121212ff);
 }
+
 .\[\&\>p\]\:text-textColors-secondaryColor>p {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+
 .\[\&\>p\]\:\!line-through>p {
   text-decoration-line: line-through !important;
 }
+
 .\[\&\[data-state\=open\]\]\:outline-coreColors-brandColorPrimary[data-state=open] {
   outline-color: var(--coreColors-brandColorPrimary);
 }
+
 .\[\&\[data-state\=open\]_\.chevron-icon\]\:rotate-180[data-state=open] .chevron-icon {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .\[\&\[data-state\=open\]_\.label\]\:text-coreColors-brandColorPrimary[data-state=open] .label {
   color: var(--coreColors-brandColorPrimary);
 }
+
 .\[\&\[data-state\=open\]_\.label\]\:text-textColors-secondaryColor[data-state=open] .label {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+
 .\[\&\[data-state\=open\]_svg\]\:rotate-180[data-state=open] svg {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .\[\&_\*\]\:text-coreColors-pageColor * {
   color: var(--coreColors-pageColor);
 }
+
 .\[\&_\*\]\:text-stateColors-error * {
   color: var(--stateColors-error);
 }
+
 .\[\&_\*\]\:text-textColors-primaryColor * {
   color: var(--textColors-primaryColor, #121212ff);
 }
+
 .\[\&_\*\]\:placeholder\:text-stateColors-error *::-moz-placeholder {
   color: var(--stateColors-error);
 }
+
 .\[\&_\*\]\:placeholder\:text-stateColors-error *::placeholder {
   color: var(--stateColors-error);
 }
+
 .\[\&_label\]\:focus-within\:\!text-stateColors-error:focus-within label {
   color: var(--stateColors-error) !important;
 }
+
 .\[\&_label\]\:focus-within\:text-coreColors-brandColorPrimary:focus-within label {
   color: var(--coreColors-brandColorPrimary);
 }
+
 .\[\&_p\]\:text-stateColors-disabled p {
   color: var(--stateColors-disabled);
 }
+
 .active\:\[\&_svg\]\:text-stateColors-favorites svg:active {
   color: var(--stateColors-favorites);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.4.4",
+  "version": "0.4.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -11,6 +11,16 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Tapcart Inc.",
   "homepage": "https://tapcart.com",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "ui:add": "pnpm dlx shadcn-ui@latest add",
+    "build:styles": "postcss styles/globals.css -o dist/styles.css",
+    "build:ts": "tsc -p tsconfig.json && tsc-alias",
+    "build": "pnpm run build:ts && pnpm run build:styles",
+    "dev:ts": "tsc -w -p tsconfig.json",
+    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
+    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
+  },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
@@ -19,17 +29,17 @@
     "@types/lodash": "4.17.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "app-studio-types": "workspace:*",
     "autoprefixer": "^10.4.14",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
     "eslint": "^7.32.0",
+    "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",
     "tsc-alias": "^1.8.10",
-    "typescript": "^4.5.2",
-    "eslint-config-custom": "0.0.0",
-    "tsconfig": "0.0.0",
-    "app-studio-types": "0.0.0"
+    "tsconfig": "workspace:*",
+    "typescript": "^4.5.2"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
@@ -61,15 +71,5 @@
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.6",
     "vaul": "^0.9.1"
-  },
-  "scripts": {
-    "lint": "eslint \"**/*.ts*\"",
-    "ui:add": "pnpm dlx shadcn-ui@latest add",
-    "build:styles": "postcss styles/globals.css -o dist/styles.css",
-    "build:ts": "tsc -p tsconfig.json && tsc-alias",
-    "build": "pnpm run build:ts && pnpm run build:styles",
-    "dev:ts": "tsc -w -p tsconfig.json",
-    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
-    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
   }
-}
+}

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

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const inputVariants: (props?: ({
-    error?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
-    id: string;
-    label?: string;
-    icon?: string;
-    asChild?: boolean;
-    value: string;
-    placeholder: string;
-    onChange: (_: string) => void;
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export { Input };
-//# sourceMappingURL=input.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;mFAalB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,KAAK,qFAkDV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/input.js

@@ -1,35 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { Icon } from "./icon";
-const inputVariants = cva("flex h-14 w-full rounded border border-coreColors-dividingLines bg-coreColors-inputBackground px-4 pt-5 pb-2 placeholder-shown:p-4 text-textColors-primaryColor text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer data-[icon=true]:pr-10", {
-    variants: {
-        error: {
-            true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        error: false,
-    },
-});
-const Input = React.forwardRef((_a, ref) => {
-    var { className, error = false, id, type, label, icon, asChild, value, placeholder, onChange } = _a, props = __rest(_a, ["className", "error", "id", "type", "label", "icon", "asChild", "value", "placeholder", "onChange"]);
-    const Comp = asChild ? Slot : "div";
-    return (_jsxs(Comp, Object.assign({ className: "relative group" }, { children: [_jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error }), className), "data-icon": !!icon, ref: ref }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, className: "absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null, icon ? (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" })) : null] })));
-});
-Input.displayName = "Input";
-export { Input };

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

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

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

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

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

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