@tapcart/mobile-components 0.4.3 → 0.4.6

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

@@ -5,10 +5,10 @@ interface PageData {
     products: Product[];
     cursorBlob?: string;
     filtersData: any;
+    apiURL: string;
 }
 interface UseInfiniteScrollProps {
     initialData: PageData;
-    loadMoreProducts: (params: any) => Promise<PageData>;
     queryVariables: Record<string, any>;
 }
 interface UseInfiniteScrollReturn {
@@ -23,6 +23,7 @@ interface UseInfiniteScrollReturn {
     isLoading: boolean;
     isValidating: boolean;
 }
-declare const useInfiniteScroll: ({ initialData, loadMoreProducts, queryVariables: queryVariableProps, }: UseInfiniteScrollProps) => UseInfiniteScrollReturn;
-export { useInfiniteScroll };
+declare const constructURL: (params: Record<string, any>, 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;CACjB;AAOD,UAAU,sBAAsB;IAC9B,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;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,iBAAiB,2EAIpB,sBAAsB,KAAG,uBA+F3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"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"}

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

@@ -35,7 +35,30 @@ const reconcileFilters = ({ selectedFilters = "[]", filtersData = [] }) => {
         filtersData,
     };
 };
-const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables: queryVariableProps, }) => {
+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);
+            }
+            else {
+                url.searchParams.append(key, JSON.stringify(value));
+            }
+        }
+    });
+    return url.toString();
+};
+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 useInfiniteScroll = ({ initialData, queryVariables: queryVariableProps, }) => {
     var _a, _b, _c, _d;
     const searchParams = useSearchParams();
     const sortStateFromParam = useCallback(() => {
@@ -57,15 +80,8 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables: quer
         sortStateFromParam,
     ]);
     const { ref, inView } = useInView({ rootMargin: "600px" }); // controls how early the next page loads
-    const getKey = (pageIndex, previousPageData) => {
-        var _a;
-        if (pageIndex === 0)
-            return 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 { data, error, size, setSize, isLoading, isValidating, } = useSWRInfinite(getKey, loadMoreProducts, {
+    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, {
         revalidateFirstPage: false,
         initialSize: 1,
     });
@@ -77,20 +93,17 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables: quer
         ? !((_d = (_c = data[data.length - 1]) === null || _c === void 0 ? void 0 : _c.pageData) === null || _d === void 0 ? void 0 : _d.cursorBlob)
         : true;
     const isReachingEnd = isEmpty || isEndPointer;
+    const isRefreshing = isValidating && data && data.length === size;
     const loadMore = useCallback(() => {
-        if (!isLoadingMore && !isReachingEnd) {
+        if (!isLoadingMore && !isReachingEnd && !isRefreshing) {
             setSize(size + 1);
         }
-    }, [isLoadingMore, isReachingEnd, size, setSize]);
+    }, [isLoadingMore, isReachingEnd, isRefreshing, setSize, size]);
     useEffect(() => {
         if (inView) {
             loadMore();
         }
     }, [inView, loadMore]);
-    // Trigger a new page load when the query variables change
-    useEffect(() => {
-        setSize(1);
-    }, [queryVariables, setSize]);
     return {
         data,
         error,
@@ -104,4 +117,4 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables: quer
         isValidating,
     };
 };
-export { useInfiniteScroll };
+export { useInfiniteScroll, constructURL };

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

@@ -0,0 +1,2 @@
+export * from './input';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/ui/Input/index.js

@@ -0,0 +1 @@
+export * from './input';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGxD,QAAA,MAAM,KAAK,qFAiIV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/Input/input.js

@@ -0,0 +1,46 @@
+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 { inputVariants, useInput } from "./useInput";
+import { cn } from "../../../lib/utils";
+import { Icon } from "../icon";
+const Input = React.forwardRef((_a, ref) => {
+    var { className, error = false, id, type, label, asChild, value, onChange, icon, iconPosition = "right", // Default to "right" for backward compatibility
+    iconColor, placeholder, placeholderFont, placeholderFontWeight, placeholderFontSize, placeholderTextAlign, placeholderTextColor, placeholderUpperCase, inputPadding, backgroundColor, borderRadius, inputBorderColor, borderSides, inputSpacing } = _a, props = __rest(_a, ["className", "error", "id", "type", "label", "asChild", "value", "onChange", "icon", "iconPosition", "iconColor", "placeholder", "placeholderFont", "placeholderFontWeight", "placeholderFontSize", "placeholderTextAlign", "placeholderTextColor", "placeholderUpperCase", "inputPadding", "backgroundColor", "borderRadius", "inputBorderColor", "borderSides", "inputSpacing"]);
+    const { Comp, inputPaddingRight, inputPaddingLeft, borderStyle, borderRadiusStyle, iconLeftPadding, iconRightPadding, iconTopPadding, iconBottomPadding, placeholderTextColorStyle, iconColorStyle, inputBgColor, inputBorderColorStyle, } = useInput({
+        asChild,
+        icon,
+        iconPosition,
+        iconColor,
+        className,
+        backgroundColor,
+        borderRadius,
+        inputBorderColor,
+        borderSides,
+        inputSpacing,
+        inputPadding,
+        placeholderTextColor,
+    });
+    return (_jsxs(Comp, Object.assign({ className: "relative flex items-center group" }, { children: [icon && iconPosition === "left" && (_jsx(Icon, { name: icon, "data-error": error, size: "sm", color: iconColorStyle !== "inherit" ? undefined : "coreColors-secondaryIcon", className: cn("flex items-center absolute aspect-square fill-current z-10 icon ", {
+                    "w-5": true,
+                    "text-stateColors-error": error,
+                }), style: {
+                    left: iconLeftPadding,
+                    right: iconRightPadding,
+                    top: iconTopPadding,
+                    bottom: iconBottomPadding,
+                    color: iconColorStyle,
+                } })), _jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error, hasLabel: !!label }), className), "data-icon": !!icon, ref: ref }, props, { style: Object.assign(Object.assign({ paddingLeft: inputPaddingLeft, paddingRight: inputPaddingRight, fontFamily: placeholderFont, fontWeight: placeholderFontWeight, fontSize: `${placeholderFontSize}px`, textAlign: placeholderTextAlign, color: placeholderTextColorStyle, textTransform: placeholderUpperCase ? "uppercase" : undefined, borderColor: inputBorderColorStyle, paddingTop: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.top, paddingBottom: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.bottom, backgroundColor: inputBgColor }, borderStyle), (label ? { borderRadius: "8px" } : borderRadiusStyle)) })), label ? (_jsx("label", Object.assign({ htmlFor: id, className: cn("absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] opacity-100 peer-placeholder-shown:opacity-0", iconPosition === "left" ? "start-10" : "start-4") }, { children: label }))) : null, icon && iconPosition === "right" && (_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" }))] })));
+});
+Input.displayName = "Input";
+export { Input };

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { VariantProps } from "class-variance-authority";
+import { inputVariants } from "../../../components/ui/Input/useInput";
+import { Color } from "../../../lib/utils";
+export type BorderSides = ("all" | "bottom" | "left" | "right" | "top")[];
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
+    id: string;
+    label?: string;
+    asChild?: boolean;
+    value: string;
+    onChange: (value: string) => void;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    iconColor?: Color;
+    placeholder: string;
+    placeholderFont?: string;
+    placeholderFontWeight?: string;
+    placeholderFontSize?: number;
+    placeholderTextAlign?: "left" | "center" | "right";
+    placeholderTextColor?: Color;
+    placeholderUpperCase?: boolean;
+    backgroundColor?: Color;
+    borderRadius?: number;
+    inputBorderColor?: Color;
+    borderSides?: BorderSides;
+    inputPadding?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    inputSpacing?: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;AAE1E,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,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnD,oBAAoB,CAAC,EAAE,KAAK,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;KAAE,CAAC;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/ui/Input/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { InputProps } from "../../../components/ui/Input/types";
+export declare const DEFAULT_ICON_SIZE = 20;
+export declare const DEFAULT_X_PADDING = 12;
+export declare const DEFAULT_Y_PADDING = 8;
+export declare const inputVariants: (props?: ({
+    hasLabel?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const useInput: (props: Pick<InputProps, "asChild" | "icon" | "iconPosition" | "iconColor" | "className" | "backgroundColor" | "borderRadius" | "inputBorderColor" | "borderSides" | "inputSpacing" | "inputPadding" | "placeholderTextColor">) => {
+    Comp: string | import("react").ForwardRefExoticComponent<import("@radix-ui/react-slot").SlotProps & import("react").RefAttributes<HTMLElement>>;
+    inputPaddingRight: string | undefined;
+    inputPaddingLeft: string | undefined;
+    borderStyle: {
+        borderWidth: string;
+        borderTopWidth?: undefined;
+        borderBottomWidth?: undefined;
+        borderLeftWidth?: undefined;
+        borderRightWidth?: undefined;
+    } | {
+        borderTopWidth: string | number;
+        borderBottomWidth: string | number;
+        borderLeftWidth: string | number;
+        borderRightWidth: string | number;
+        borderWidth?: undefined;
+    };
+    borderRadiusStyle: {
+        borderRadius: string;
+    } | {
+        borderRadius?: undefined;
+    };
+    iconLeftPadding: string;
+    iconRightPadding: string;
+    iconTopPadding: string;
+    iconBottomPadding: string;
+    placeholderTextColorStyle: string | undefined;
+    iconColorStyle: string | undefined;
+    inputBgColor: string | undefined;
+    inputBorderColorStyle: string | undefined;
+};
+//# sourceMappingURL=useInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInput.d.ts","sourceRoot":"","sources":["../../../../components/ui/Input/useInput.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGxD,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,IAAI,CAAA;AAElC,eAAO,MAAM,aAAa;;;mFAkBzB,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,KAAK,UAAU,EAAE,SAAS,GAAG,MAAM,GAAG,cAAc,GAAG,WAAW,GAAG,WAAW,GAAG,iBAAiB,GAAG,cAAc,GAAG,kBAAkB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,GAAG,sBAAsB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkErP,CAAA"}

package/dist/components/ui/Input/useInput.js

@@ -0,0 +1,69 @@
+import { getColor } from "../../../lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+export const DEFAULT_ICON_SIZE = 20;
+export const DEFAULT_X_PADDING = 12;
+export const DEFAULT_Y_PADDING = 8;
+export const inputVariants = cva("flex w-full border border-coreColors-dividingLines bg-coreColors-inputBackground 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: {
+        hasLabel: {
+            true: "h-14 px-4 rounded pt-5 pb-2 placeholder-shown:p-4",
+            false: "pl-10 pr-4 py-2",
+        },
+        error: {
+            true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        error: false,
+        hasLabel: true,
+    },
+});
+export const useInput = (props) => {
+    const { asChild, icon, iconPosition = "right", // Default to "right" for backward compatibility
+    iconColor, placeholderTextColor, backgroundColor, borderRadius, inputBorderColor, borderSides = ["all"], inputPadding, inputSpacing = DEFAULT_X_PADDING, } = props;
+    const Comp = asChild ? Slot : "div";
+    const inputPaddingRight = icon && iconPosition === "right" ? (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.right) ? `${inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.right}px` : "2.5rem" : undefined;
+    const inputPaddingLeft = icon && iconPosition === "left"
+        ? (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) !== undefined && inputSpacing
+            ? `calc(${(inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) + inputSpacing + DEFAULT_ICON_SIZE}px)`
+            : (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left)
+                ? `calc(${(inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) + DEFAULT_ICON_SIZE + DEFAULT_Y_PADDING}px)`
+                : inputSpacing
+                    ? `calc(${inputSpacing + DEFAULT_X_PADDING + DEFAULT_ICON_SIZE}px)`
+                    : `calc(${DEFAULT_Y_PADDING + DEFAULT_X_PADDING + DEFAULT_ICON_SIZE}px)`
+        : undefined;
+    const borderStyle = 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,
+        };
+    const borderRadiusStyle = borderRadius ? { borderRadius: `${borderRadius}px` } : {};
+    const iconLeftPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.left) !== undefined ? `${inputPadding.left}px` : `${DEFAULT_X_PADDING}px`;
+    const iconRightPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.right) !== undefined ? `${inputPadding.right}px` : `${DEFAULT_X_PADDING}px`;
+    const iconTopPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.top) !== undefined ? `${inputPadding.top}px` : `${DEFAULT_Y_PADDING}px`;
+    const iconBottomPadding = (inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.bottom) !== undefined ? `${inputPadding.bottom}px` : `${DEFAULT_Y_PADDING}px`;
+    const iconColorStyle = getColor(iconColor);
+    const inputBgColor = getColor(backgroundColor);
+    const inputBorderColorStyle = getColor(inputBorderColor);
+    const placeholderTextColorStyle = getColor(placeholderTextColor);
+    return {
+        Comp,
+        inputPaddingRight,
+        inputPaddingLeft,
+        borderStyle,
+        borderRadiusStyle,
+        iconLeftPadding,
+        iconRightPadding,
+        iconTopPadding,
+        iconBottomPadding,
+        placeholderTextColorStyle,
+        iconColorStyle,
+        inputBgColor,
+        inputBorderColorStyle,
+    };
+};

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

@@ -10,6 +10,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     icon?: string;
     labelClassName?: string;
     labelStyle?: React.CSSProperties | undefined;
+    iconColor?: string;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

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

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

package/dist/components/ui/button.js

@@ -79,13 +79,13 @@ const labelVariants = cva("truncate", {
     },
 });
 const Button = React.forwardRef((_a, ref) => {
-    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon"]);
+    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor"]);
     const Comp = asChild ? Slot : "button";
     const IconButton = () => (icon ? _jsx(Icon, { name: icon, size: "sm" }) : null);
-    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), "mr-2") })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
+    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), "mr-2"), style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,
-        }), ref: ref }, props, { children: loading ? (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader" }) }))) : size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
+        }), ref: ref }, props, { children: loading ? (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) }))) : size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

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,EA6BhB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAiDD,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, } 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,6 +70,11 @@ const icons = {
     "square-x-filled": IconSquareXFilled,
     trash: IconTrash,
     loader: IconLoader2,
+    "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

@@ -54,6 +54,9 @@ type TapcartImageBaseProps = {
      * "fill" maps to `object-fit: cover`
      */
     objectFit?: "fit" | "fill" | "cover" | "contain" | "none" | "scale-down";
+    /** An optional prop to set styles for the image wrapper
+     */
+    imageWrapperStyles?: any;
 };
 /**
  * Tapcart’s Image component is a wrapper around the HTML image element.

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAM1D,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAUD,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAA;AAKrD,KAAK,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAE1D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAChE,qBAAqB,CAAA;AAEvB,KAAK,qBAAqB,GAAG;IAC3B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE;QAAE,iBAAiB,EAAE,IAAI,CAAA;KAAE,CAAC,CAAA;IAC1D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qFAAqF;IACrF,aAAa,CAAC,EAAE,aAAa,CAAA;IAE7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAA;CACzE,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,KAAK,yGAqKjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,WAAW,GACZ,EAAE,YAAY,UAiBd;AAiED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,GAAG,CAAC,EAAE,MAAM,EACZ,UAAU,CAAC,EAAE,KAAK,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC,EACpE,MAAM,GAAE,MAAsB,EAC9B,WAAW,UAAQ,GAClB,MAAM,CAiBR;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,6BAA0B,EAC/B,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,GACpB,MAAM,EAAE,CAUV;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIzE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,WAAW,CAAC,EAAE,MAAM,EAAE,EACtB,WAAW,CAAC,EAAE,MAAM,EACpB,IAAI,GAAE,IAAe,GAEnB;IACE,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,IAAI,EAAE,IAAI,CAAA;CACX,EAAE,GACH,SAAS,CAUZ"}
+{"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
@@ -49,12 +66,12 @@ import * as React from "react";
  */
 export const Image = React.forwardRef((_a, ref) => {
     var _b;
-    var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, srcSetOptions = {
+    var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, imageWrapperStyles, srcSetOptions = {
         intervals: 15,
         startingWidth: 100,
         incrementSize: 100,
         placeholderWidth: 100,
-    }, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "srcSetOptions", "width", "objectFit"]);
+    }, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "imageWrapperStyles", "srcSetOptions", "width", "objectFit"]);
     /*
      * Gets normalized values for width, height from data  prop
      */
@@ -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,
@@ -135,15 +154,26 @@ export const Image = React.forwardRef((_a, ref) => {
         setHasError(true);
     };
     const imgClassName = `opacity-0 transition-opacity duration-500 ease-in-out ${isLoaded ? "opacity-100" : ""}`;
-    const wrapperStyle = {
-        aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/"),
-    };
-    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 wrapperStyle = Object.assign({ aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/") }, imageWrapperStyles);
+    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/money.d.ts.map

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

package/dist/components/ui/money.js

@@ -23,6 +23,7 @@ function Money(_a) {
     const formatter = new Intl.NumberFormat(locale, {
         style: "currency",
         currency: currency,
+        currencyDisplay: "narrowSymbol",
     });
     let formattedPrice = formatter.format(Number(price));
     return _jsx("span", Object.assign({}, props, { children: formattedPrice }));

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,7 +133,7 @@ const productCardFavoriteVariants = cva("absolute ", {
         iconPosition: "below-image-on-right",
     },
 });
-const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, }) => {
+const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, className, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
     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
@@ -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`,

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type VariantProps } from "class-variance-authority";
 declare const skeletonVariants: (props?: ({
-    variant?: "circle" | "line" | "rectangular" | null | undefined;
+    variant?: "line" | "rectangular" | "circle" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
     height?: number;

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";
 const Slider = React.forwardRef((_a, ref) => {
     var { className, max, min = 0, step = 1, defaultValue, value, onChange } = _a, 
     // doubleValue = false,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./components/ui/button";
-export * from "./components/ui/input";
+export * from "./components/ui/Input/input";
 export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/accordion";
 export * from "./components/ui/icon";
@@ -32,14 +32,13 @@ export * from "./components/ui/favorite";
 export * from "./components/ui/wishlist";
 export * from "./components/ui/product-card";
 export * from "./components/ui/dropdown";
-export * from "./components/ui/product-grid";
 export * from "./components/ui/quantity-picker";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/ui/subscription";
 export * from "./components/ui/line-item-text-icons";
 export * from "./components/ui/textarea";
 export * from "./components/hooks/use-scroll-direction";
+export { cn, cva, getColor } from "./lib/utils";
 export * from "./components/ui/image";
 export * from "./components/ui/empty-message";
-export { cn, cva } from "./lib/utils";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1,6 +1,6 @@
 // component exports
 export * from "./components/ui/button";
-export * from "./components/ui/input";
+export * from "./components/ui/Input/input";
 export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/accordion";
 export * from "./components/ui/icon";
@@ -33,13 +33,12 @@ export * from "./components/ui/favorite";
 export * from "./components/ui/wishlist";
 export * from "./components/ui/product-card";
 export * from "./components/ui/dropdown";
-export * from "./components/ui/product-grid";
 export * from "./components/ui/quantity-picker";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/ui/subscription";
 export * from "./components/ui/line-item-text-icons";
 export * from "./components/ui/textarea";
 export * from "./components/hooks/use-scroll-direction";
+export { cn, cva, getColor } from "./lib/utils";
 export * from "./components/ui/image";
 export * from "./components/ui/empty-message";
-export { cn, cva } from "./lib/utils";

package/dist/lib/utils.d.ts

@@ -1,6 +1,11 @@
 import { ClassValue } from "clsx";
+export type Color = {
+    type: "custom" | "brand-kit";
+    value: string;
+};
 export declare function cn(...inputs: ClassValue[]): string;
 export declare const iconColorLevels: string[];
 export declare const iconColorVariantClasses: Record<string, string>;
 export { cva } from "class-variance-authority";
+export declare const getColor: (colorOption: Color | undefined) => string | undefined;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAA;AAGvC,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,eAAO,MAAM,eAAe,UAc3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,CAAA;AAMjE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAA;AAGvC,MAAM,MAAM,KAAK,GAAG;IAAE,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,eAAO,MAAM,eAAe,UAc3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,CAAA;AAMjE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAG9C,eAAO,MAAM,QAAQ,gBAAiB,KAAK,GAAG,SAAS,uBAEtD,CAAC"}

package/dist/lib/utils.js

@@ -23,3 +23,6 @@ for (let iconColorLevel of iconColorLevels) {
     iconColorVariantClasses[iconColorLevel] = `text-${iconColorLevel}`;
 }
 export { cva } from "class-variance-authority";
+export const getColor = (colorOption) => {
+    return colorOption ? (colorOption === null || colorOption === void 0 ? void 0 : colorOption.type) === 'brand-kit' ? `var(--${colorOption.value})` : colorOption.value : undefined;
+};

package/dist/styles.css

@@ -814,6 +814,10 @@ body {
   right: 0.5rem;
 }
 
+.start-10 {
+  inset-inline-start: 2.5rem;
+}
+
 .start-4 {
   inset-inline-start: 1rem;
 }
@@ -908,6 +912,10 @@ body {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -963,10 +971,6 @@ body {
   display: grid;
 }
 
-.aspect-\[2\/3\] {
-  aspect-ratio: 2/3;
-}
-
 .aspect-productImages {
   aspect-ratio: var(--productImage-aspectRatio);
 }
@@ -1275,6 +1279,21 @@ body {
   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));
 }
@@ -1586,11 +1605,6 @@ body {
   background-color: var(--coreColors-pageColor);
 }
 
-.bg-neutral-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
-}
-
 .bg-productBadging-fill {
   background-color: var(--productBadging-fill);
 }
@@ -1672,6 +1686,11 @@ body {
   padding: 1px;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1748,6 +1767,10 @@ body {
   padding-left: 0px;
 }
 
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2274,6 +2297,14 @@ body {
   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;
 }
@@ -2745,11 +2776,6 @@ body {
   animation-duration: 500ms;
 }
 
-:is(.dark .dark\:bg-neutral-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:mt-0 {
     margin-top: 0px;
@@ -2778,12 +2804,6 @@ body {
   }
 }
 
-@media (min-width: 1024px) {
-  .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
 .\[\&\+label\]\:text-stateColors-error+label {
   color: var(--stateColors-error);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.4.3",
+  "version": "0.4.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -11,16 +11,6 @@
   "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"
@@ -29,17 +19,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",
-    "tsconfig": "workspace:*",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "eslint-config-custom": "0.0.0",
+    "tsconfig": "0.0.0",
+    "app-studio-types": "0.0.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
@@ -71,5 +61,15 @@
     "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\""
   }
-}
+}