@tapcart/mobile-components 0.2.12 → 0.3.0

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

@@ -20,6 +20,7 @@ interface UseInfiniteScrollReturn {
     ref: (node?: Element | null | undefined) => void;
     products: Product[];
     isLoading: boolean;
+    isValidating: boolean;
 }
 declare const useInfiniteScroll: ({ initialData, loadMoreProducts, queryVariables, }: UseInfiniteScrollProps) => UseInfiniteScrollReturn;
 export { useInfiniteScroll };

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":"AAOA,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAOD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,QAAQ,EAAE,CAAA;IACvB,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;CACnB;AAED,QAAA,MAAM,iBAAiB,uDAIpB,sBAAsB,KAAG,uBA2D3B,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":"AAOA,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAOD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,QAAQ,EAAE,CAAA;IACvB,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;AAED,QAAA,MAAM,iBAAiB,uDAIpB,sBAAsB,KAAG,uBAkE3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

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

@@ -5,7 +5,7 @@ import { useInView } from "react-intersection-observer";
 const PAGE_SIZE = 8;
 const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables, }) => {
     var _a, _b, _c, _d;
-    const { ref, inView } = useInView({ rootMargin: "300px" }); // controls how early the next page loads
+    const { ref, inView } = useInView({ rootMargin: "600px" }); // controls how early the next page loads
     const getKey = (pageIndex, previousPageData) => {
         var _a;
         if (pageIndex === 0)
@@ -14,7 +14,7 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables, }) =
             return null;
         return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.pageData.cursorBlob });
     };
-    const { data, error, size, setSize, isLoading } = useSWRInfinite(getKey, loadMoreProducts, {
+    const { data, error, size, setSize, isLoading, isValidating, } = useSWRInfinite(getKey, loadMoreProducts, {
         // @ts-expect-error
         fallbackData: [initialData],
         revalidateFirstPage: false,
@@ -48,6 +48,7 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables, }) =
         ref,
         products: data ? data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products) : [],
         isLoading,
+        isValidating,
     };
 };
 export { useInfiniteScroll };

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

@@ -3,6 +3,6 @@ interface ScrollData {
     direction: ScrollDirection;
     scrollY: number;
 }
-declare function useScrollDirection(threshold?: number): ScrollData;
+declare function useScrollDirection(threshold?: number, throttleDelay?: number): ScrollData;
 export { useScrollDirection };
 //# sourceMappingURL=use-scroll-direction.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAE3C,UAAU,UAAU;IAClB,SAAS,EAAE,eAAe,CAAA;IAC1B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,kBAAkB,CAAC,SAAS,GAAE,MAAU,GAAG,UAAU,CAmC7D;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAGA,KAAK,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAE3C,UAAU,UAAU;IAClB,SAAS,EAAE,eAAe,CAAA;IAC1B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,kBAAkB,CACzB,SAAS,GAAE,MAAU,EACrB,aAAa,GAAE,MAAW,GACzB,UAAU,CAmDZ;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -1,10 +1,21 @@
+"use client";
 import { useState, useEffect, useRef } from "react";
-function useScrollDirection(threshold = 5) {
+function useScrollDirection(threshold = 5, throttleDelay = 50) {
     const [scrollData, setScrollData] = useState({
         direction: null,
         scrollY: 0,
     });
     const lastScrollY = useRef(0);
+    const throttle = (func, limit) => {
+        let inThrottle;
+        return (...args) => {
+            if (!inThrottle) {
+                func(...args);
+                inThrottle = true;
+                setTimeout(() => (inThrottle = false), limit);
+            }
+        };
+    };
     useEffect(() => {
         if (typeof window === "undefined") {
             return;
@@ -14,17 +25,18 @@ function useScrollDirection(threshold = 5) {
                 return;
             }
             const scrollY = window.scrollY;
-            const direction = scrollY > lastScrollY.current ? "down" : "up";
+            const direction = scrollY > lastScrollY.current && scrollY !== 0 ? "down" : "up";
             if (Math.abs(scrollY - lastScrollY.current) > threshold) {
                 setScrollData({ direction, scrollY });
                 lastScrollY.current = scrollY > 0 ? scrollY : 0;
             }
         };
-        window.addEventListener("scroll", updateScrollDirection);
+        const throttledUpdateScrollDirection = throttle(updateScrollDirection, throttleDelay);
+        window.addEventListener("scroll", throttledUpdateScrollDirection);
         return () => {
-            window.removeEventListener("scroll", updateScrollDirection);
+            window.removeEventListener("scroll", throttledUpdateScrollDirection);
         };
-    }, [threshold]);
+    }, [threshold, throttleDelay]);
     return scrollData;
 }
 export { useScrollDirection };

package/dist/components/ui/accordion.js

@@ -23,7 +23,7 @@ const AccordionItem = React.forwardRef((_a, ref) => {
 AccordionItem.displayName = "AccordionItem";
 const AccordionTrigger = React.forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsx(AccordionPrimitive.Header, Object.assign({ className: "flex" }, { children: _jsxs(AccordionPrimitive.Trigger, Object.assign({ ref: ref, className: cn("px-4 flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline  [&[data-state=open]_svg]:rotate-180", className) }, props, { children: [children, _jsx(Icon, { name: "chevron-down", size: "sm", className: "text-coreColors-secondaryIcon shrink-0 transition-transform duration-200 " })] })) })));
+    return (_jsx(AccordionPrimitive.Header, Object.assign({ className: "flex" }, { children: _jsxs(AccordionPrimitive.Trigger, Object.assign({ ref: ref, className: cn("px-4 flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]_svg]:rotate-180 active:opacity-70", className) }, props, { children: [children, _jsx(Icon, { name: "chevron-down", size: "sm", className: "text-coreColors-secondaryIcon shrink-0 transition-transform duration-200 " })] })) })));
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef((_a, ref) => {

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    alignment?: "center" | "end" | "start" | null | undefined;
+    alignment?: "end" | "center" | "start" | null | undefined;
     cornerRadius?: "circle" | "square" | "rounded" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

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;AAOjE,QAAA,MAAM,cAAc;;;mFAmCnB,CAAA;AAED,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,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,uFAyCX,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;CAC7C;AAED,QAAA,MAAM,MAAM,uFAoEX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -13,11 +13,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { IconLoader2 } from "@tabler/icons-react";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
 import { Text } from "./text";
-const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors disabled:bg-stateColors-disabled disabled:outline-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate", {
+const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors disabled:bg-stateColors-disabled disabled:border-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate active:opacity-70 disabled:opacity-70", {
     variants: {
         size: {
             default: "py-3 px-4",
@@ -27,14 +26,14 @@ const buttonVariants = cva("w-full flex rounded items-center justify-center tran
             content: "py-3 px-4 w-auto",
         },
         variant: {
-            default: "bg-buttonColors-primaryFill [&_svg]:text-buttonColors-primaryText [&>p]:text-buttonColors-primaryText outline outline-1 outline-buttonColors-primaryOutline active:opacity-70 shadow-buttonColors-primaryShadow",
-            destructive: "bg-stateColors-error [&_svg]:text-coreColors-pageColor [&>p]:text-coreColors-pageColor active:opacity-70 disabled:bg-stateColors-disabled shadow-buttonColors-primaryShadow",
-            outline: "outline outline-1 outline-input hover:bg-accent hover:[&>p]:text-accent-foreground hover:[&_svg]:text-accent-foreground",
-            secondary: "bg-buttonColors-secondaryFill [&_svg]:text-buttonColors-secondaryText [&>p]:text-buttonColors-secondaryText outline outline-1 outline-buttonColors-secondaryOutline active:opacity-70 disabled:bg-buttonColors-secondaryFill disabled:text-stateColors-disabled disabled:border-stateColors-disabled shadow-buttonColors-secondaryShadow",
-            ghost: "hover:bg-accent hover:[&>p]:text-accent-foreground hover:[&_svg]:text-accent-foreground",
-            link: "underline-offset-4 hover:underline [&_svg]:text-textColors-primaryColor [&>p]:text-textColors-primaryColor disabled:text-stateColors-disabled disabled:bg-transparent",
-            quickadd: "bg-buttonColors-primaryFill [&_svg]:text-buttonColors-primaryText [&>p]:text-buttonColors-primaryText outline outline-1 outline-buttonColors-primaryOutline active:opacity-70 w-full rounded-none rounded-b-lg h-8 text-xs",
-            applePay: "bg-white [&_svg]:text-black [&>p]:text-black border border-black",
+            default: "bg-buttonColors-primaryFill border border-buttonColors-primaryOutlineColor shadow-buttonColors-primaryShadow",
+            destructive: "bg-stateColors-error disabled:bg-stateColors-disabled shadow-buttonColors-primaryShadow",
+            outline: "border border-input hover:bg-accent",
+            secondary: "bg-buttonColors-secondaryFill border border-buttonColors-secondaryOutlineColor disabled:bg-buttonColors-secondaryFill disabled:text-stateColors-disabled disabled:border-stateColors-disabled shadow-buttonColors-secondaryShadow",
+            ghost: "hover:bg-accent",
+            link: "underline-offset-4 hover:underline disabled:text-stateColors-disabled disabled:bg-transparent",
+            quickadd: "bg-buttonColors-primaryFill border border-buttonColors-primaryOutlineColor w-full rounded-none rounded-b-lg h-8 text-xs",
+            applePay: "bg-white border border-black",
             shopPay: "bg-[#612EFF]",
         },
     },
@@ -43,14 +42,50 @@ const buttonVariants = cva("w-full flex rounded items-center justify-center tran
         size: "default",
     },
 });
+const iconVariants = cva("", {
+    variants: {
+        variant: {
+            default: "text-buttonColors-primaryText",
+            destructive: "text-coreColors-pageColor",
+            outline: "hover:text-accent-foreground",
+            secondary: "text-buttonColors-secondaryText",
+            ghost: "hover:text-accent-foreground",
+            link: "text-textColors-primaryColor",
+            quickadd: "text-buttonColors-primaryText",
+            applePay: "text-black",
+            shopPay: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const labelVariants = cva("truncate", {
+    variants: {
+        variant: {
+            default: "text-buttonColors-primaryText",
+            destructive: "text-coreColors-pageColor",
+            outline: "hover:text-accent-foreground",
+            secondary: "text-buttonColors-secondaryText",
+            ghost: "hover:text-accent-foreground",
+            link: "text-textColors-primaryColor",
+            quickadd: "text-buttonColors-primaryText",
+            applePay: "text-black border",
+            shopPay: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
 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"]);
     const Comp = asChild ? Slot : "button";
-    const IconButton = () => !loading && size === "icon" && icon ? (_jsx(Icon, { name: icon, size: "sm" })) : null;
-    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: "mr-2" })) : null, !loading ? _jsx(Text, Object.assign({ type: "body-primary", className: cn("truncate", labelClassName), style: labelStyle }, { children: props.children })) : _jsx(_Fragment, {})] }));
-    return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size, className }), {
+    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, {}))] }));
+    return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,
-        }), ref: ref }, props, { children: loading ? (_jsx(IconLoader2, { className: "h-4 w-4 animate-spin" })) : 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" }) }))) : size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

package/dist/components/ui/checkbox.js

@@ -23,7 +23,7 @@ const checkboxVariants = cva("flex flex-col group group-disabled", {
     variants: {
         deactivated: {
             true: "[&_p]:text-stateColors-disabled",
-            false: "",
+            false: "active:opacity-70",
         },
     },
     defaultVariants: {
@@ -32,7 +32,7 @@ const checkboxVariants = cva("flex flex-col group group-disabled", {
 });
 const Checkbox = React.forwardRef((_a, ref) => {
     var { id, className, label, numberAmount, subtext, selected = false, onCheck, onSelect, deactivated = false } = _a, props = __rest(_a, ["id", "className", "label", "numberAmount", "subtext", "selected", "onCheck", "onSelect", "deactivated"]);
-    return (_jsx("div", Object.assign({ className: cn(checkboxVariants({ deactivated })) }, { children: _jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer h-6 shrink-0 self-start rounded ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group ", className), id: id, checked: selected, onSelect: onSelect, onCheckedChange: onCheck, disabled: deactivated !== null && deactivated !== void 0 ? deactivated : false }, props, { children: _jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(CheckboxPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center text-current col-start-1 row-start-1" }, { children: !deactivated && (_jsx(Check, { className: "col-start-1 row-start-1 items-center z-50 text-coreColors-brandColorPrimary" })) })), _jsxs("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: [!deactivated && (_jsx(Unchecked, { className: "text-coreColors-secondaryIcon" })), deactivated && (_jsx(DisabledCheckbox, { className: "text-stateColors-disabled" }))] }))] })), _jsxs("div", Object.assign({ className: "flex flex-col gap-2 items-start" }, { children: [label && (_jsx("label", Object.assign({ htmlFor: id }, { children: _jsxs("span", Object.assign({ className: "flex gap-2" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled" }, { children: label })), numberAmount && (_jsxs(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled inline" }, { children: ["(", numberAmount, ")"] })))] })) }))), subtext && (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled" }, { children: subtext })))] }))] })) })) })));
+    return (_jsx("div", Object.assign({ className: cn(checkboxVariants({ deactivated })) }, { children: _jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer h-6 shrink-0 self-start rounded ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group ", className), id: id, checked: selected, onSelect: onSelect, onCheckedChange: onCheck, disabled: deactivated !== null && deactivated !== void 0 ? deactivated : false }, props, { children: _jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(CheckboxPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center text-current col-start-1 row-start-1" }, { children: !deactivated && (_jsx(Check, { className: "col-start-1 row-start-1 items-center z-50 text-coreColors-brandColorPrimary" })) })), _jsxs("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: [!deactivated && !selected && (_jsx(Unchecked, { className: "text-coreColors-secondaryIcon" })), deactivated && (_jsx(DisabledCheckbox, { className: "text-stateColors-disabled" }))] }))] })), _jsxs("div", Object.assign({ className: "flex flex-col gap-2 items-start" }, { children: [label && (_jsx("label", Object.assign({ htmlFor: id }, { children: _jsxs("span", Object.assign({ className: "flex gap-2" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled" }, { children: label })), numberAmount && (_jsxs(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled inline" }, { children: ["(", numberAmount, ")"] })))] })) }))), subtext && (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled" }, { children: subtext })))] }))] })) })) })));
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

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

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../components/ui/chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,QAAA,MAAM,YAAY;;;mFAkBjB,CAAA;AAED,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GACvD,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAEH,QAAA,MAAM,IAAI;;;;;;yBAJc,IAAI;yBACJ,IAAI;2CAkD3B,CAAA;AAGD,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAA;IACzC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CAC9C,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkD/C,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,SAAS,EAAE,CAAA"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../components/ui/chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,QAAA,MAAM,YAAY;;;mFAkBjB,CAAA;AAED,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GACvD,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAEH,QAAA,MAAM,IAAI;;;;;;yBAJc,IAAI;yBACJ,IAAI;2CAoD3B,CAAA;AAGD,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAA;IACzC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CAC9C,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkD/C,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,SAAS,EAAE,CAAA"}

package/dist/components/ui/chip.js

@@ -15,7 +15,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import React, { useState, useEffect } from "react";
 import { Icon } from "./icon";
-const chipVariants = cva("inline-flex items-center justify-center rounded border border-coreColors-dividingLines text-[12px] transition-colors p-2 h-8", {
+const chipVariants = cva("inline-flex items-center justify-center rounded border border-coreColors-dividingLines text-[12px] transition-colors p-2 h-8 active:opacity-70", {
     variants: {
         variant: {
             primary: "bg-coreColors-pageColor text-textColors-primaryColor",
@@ -39,7 +39,7 @@ const Chip = React.forwardRef((_a, ref) => {
     const handleIconClick = () => {
         onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
     };
-    return (_jsxs("button", Object.assign({ onClick: handleOnClick, ref: ref, className: cn(chipVariants({ variant, direction }), className) }, props, { children: [iconPosition === "left" && (_jsx(Icon, { name: "square-x-filled", className: "mr-2 h-4 w-4 cursor-pointer", onClick: handleIconClick })), children, Icon && iconPosition === "right" && (_jsx(Icon, { name: "square-x-filled", className: "ml-2 h-4 w-4 cursor-pointer", onClick: handleIconClick }))] })));
+    return (_jsxs("button", Object.assign({ onClick: handleOnClick, ref: ref, className: cn(chipVariants({ variant, direction }), className) }, props, { children: [iconPosition === "left" && (_jsx(Icon, { name: "square-x-filled", className: "mr-2 h-4 w-4 cursor-pointer", color: "coreColors-secondaryIcon", onClick: handleIconClick })), children, Icon && iconPosition === "right" && (_jsx(Icon, { name: "square-x-filled", className: "ml-2 h-4 w-4 cursor-pointer", onClick: handleIconClick, color: "coreColors-secondaryIcon" }))] })));
 });
 Chip.displayName = "Chip";
 const MultipleChips = ({ children, containerRef, }) => {
@@ -59,7 +59,7 @@ const MultipleChips = ({ children, containerRef, }) => {
     useEffect(() => {
         checkOverflow();
     }, [children]);
-    return (_jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx("div", Object.assign({ ref: containerRef, className: "flex overflow-x-auto overflow-y-none overscroll-y-none no-scrollbar", onScroll: checkOverflow }, { children: children.map((chip, index) => (_jsx("div", Object.assign({ className: cn("shrink-0", {
+    return (_jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx("div", Object.assign({ ref: containerRef, className: "flex overflow-x-auto overflow-y-hidden no-scrollbar", onScroll: checkOverflow }, { children: children.map((chip, index) => (_jsx("div", Object.assign({ className: cn("shrink-0", {
                         "mr-2": index < children.length - 1,
                     }) }, { children: chip }), index))) })), showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })));
 };

package/dist/components/ui/drawer.js

@@ -57,7 +57,7 @@ const DrawerDescription = React.forwardRef((_a, ref) => {
 });
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 const DrawerHeader = ({ title, iconLeftName, iconRightName, onCloseClick, }) => {
-    return (_jsxs(DrawerHeaderBase, Object.assign({ className: "p-4 text-center flex justify-between" }, { children: [iconLeftName ? (_jsx(DrawerClose, Object.assign({ className: "h-6 w-6 p-0", onClick: onCloseClick }, { children: _jsx(Icon, { name: iconLeftName, className: "h-6 w-6 p-0", size: "md" }) }))) : (_jsx("div", { className: "w-6" })), _jsx(DrawerTitle, { children: title }), iconRightName ? (_jsx(DrawerClose, Object.assign({ className: "h-6 w-6 p-0", onClick: onCloseClick }, { children: _jsx(Icon, { name: iconRightName, className: "h-6 w-6 p-0", size: "md" }) }))) : (_jsx("div", { className: "w-6" }))] })));
+    return (_jsxs(DrawerHeaderBase, Object.assign({ className: "p-4 text-center flex justify-between" }, { children: [iconLeftName ? (_jsx(DrawerClose, Object.assign({ className: "h-6 w-6 p-0", onClick: onCloseClick }, { children: _jsx(Icon, { name: iconLeftName, color: "coreColors-secondaryIcon", className: "h-6 w-6 p-0", size: "md" }) }))) : (_jsx("div", { className: "w-6" })), _jsx(DrawerTitle, { children: title }), iconRightName ? (_jsx(DrawerClose, Object.assign({ className: "h-6 w-6 p-0", onClick: onCloseClick }, { children: _jsx(Icon, { name: iconRightName, color: "coreColors-secondaryIcon", className: "h-6 w-6 p-0", size: "md" }) }))) : (_jsx("div", { className: "w-6" }))] })));
 };
 const DrawerContent = ({ children }) => {
     return _jsx("div", Object.assign({ className: "h-full overflow-scroll" }, { children: children }));

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,EA0BhB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AA6CD,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,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"}

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, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, } 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, } 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: {
@@ -54,11 +54,13 @@ const icons = {
     square: IconSquare,
     "square-check": IconSquareCheck,
     "chevron-up": IconChevronUp,
+    "chevron-right": IconChevronRight,
     "eye-off": IconEyeOff,
     "square-x": IconSquareX,
     circle: IconCircle,
     "chevron-down": IconChevronDown,
     "heart-filled": IconHeartFilled,
+    "menu-icon-heart": IconHeartFilled,
     upload: IconUpload,
     "currency-dollar": IconCurrencyDollar,
     x: IconX,
@@ -66,6 +68,8 @@ const icons = {
     "circle-dot-filled": IconCircleDotFilled,
     "mood-sad": IconMoodSad,
     "square-x-filled": IconSquareXFilled,
+    trash: IconTrash,
+    loader: IconLoader2,
 };
 function Icon(_a) {
     var { className, name, size = "md", color } = _a, props = __rest(_a, ["className", "name", "size", "color"]);

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

@@ -0,0 +1,157 @@
+import * as React from "react";
+import type { PartialDeep } from "type-fest";
+import type { Image as ImageType } from "app-studio-types";
+type SrcSetOptions = {
+    intervals: number;
+    startingWidth: number;
+    incrementSize: number;
+    placeholderWidth: number;
+};
+export type LoaderParams = {
+    src?: ImageType["url"];
+    width?: number;
+    height?: number;
+    crop?: Crop;
+    isContained?: boolean;
+};
+export type Loader = (params: LoaderParams) => string;
+type Crop = "center" | "top" | "bottom" | "left" | "right";
+export type TapcartImageProps = React.ComponentPropsWithRef<"img"> & TapcartImageBaseProps;
+type TapcartImageBaseProps = {
+    /** The aspect ratio of the image, in the format of `width/height`.
+     *
+     * @example
+     * ```
+     * <Image data={productImage} aspectRatio="4/5" />
+     * ```
+     */
+    aspectRatio?: string;
+    /** The crop position of the image.
+     *
+     * @remarks
+     * In the event that AspectRatio is set, without specifying a crop,
+     * the Shopify CDN won't return the expected image.
+     *
+     * @defaultValue `center`
+     */
+    crop?: Crop;
+    data?: PartialDeep<ImageType, {
+        recurseIntoArrays: true;
+    }>;
+    /** A function that returns a URL string for an image.
+     *
+     * @remarks
+     * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide
+     * your own function to use a another provider, as long as they support URL based image transformations.
+     */
+    loader?: Loader;
+    /** An optional prop you can use to change the default srcSet generation behaviour */
+    srcSetOptions?: SrcSetOptions;
+    /** An optional prop to set the fill behavior of the image. Defaults to "cover"
+     *
+     * @remarks
+     * "fit" maps to `object-fit: contain`
+     * "fill" maps to `object-fit: cover`
+     */
+    objectFit?: "fit" | "fill" | "cover" | "contain" | "none" | "scale-down";
+};
+/**
+ * Tapcart’s Image component is a wrapper around the HTML image element.
+ * It supports the same props as the HTML `img` element, but automatically
+ * generates the srcSet and sizes attributes for you. For most use cases,
+ * you’ll want to set the `aspectRatio` prop to ensure the image is sized
+ * correctly.
+ *
+ * @remarks
+ * - `decoding` is set to `async` by default.
+ * - `loading` is set to `lazy` by default.
+ * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop
+ * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop
+ *
+ * @example
+ * A responsive image with a 4:5 aspect ratio:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   aspectRatio="4:5"
+ *   sizes="(min-width: 45em) 40vw, 100vw"
+ * />
+ * ```
+ * @example
+ * A fixed size image:
+ * ```
+ * <Image
+ *   data={product.featuredImage}
+ *   width={100}
+ *   height={100}
+ * />
+ * ```
+ *
+ * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
+ */
+export declare const Image: React.ForwardRefExoticComponent<Omit<TapcartImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+/**
+ * The shopifyLoader function is a simple utility function that takes a src, width,
+ * height, and crop and returns a string that can be used as the src for an image.
+ * It can be used with the Tapcart Image component or with the next/image component.
+ * (or any others that accept equivalent configuration)
+ * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`
+ * @param width - The width of the image, e.g. `100`
+ * @param height - The height of the image, e.g. `100`
+ * @param crop - The crop of the image, e.g. `center`
+ * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`
+ *
+ * @example
+ * ```
+ * shopifyLoader({
+ *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+ *   width: 100,
+ *   height: 100,
+ *   crop: 'center',
+ * })
+ * ```
+ */
+export declare function shopifyLoader({ src, width, height, crop, isContained, }: LoaderParams): string;
+/**
+ * This function generates a srcSet for Shopify images.
+ * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg
+ * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\{width: 200, height: 200, crop: 'center'\}, \{width: 400, height: 400, crop: 'center'\}]
+ * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters
+ * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'
+ */
+export declare function generateSrcSet(src?: string, sizesArray?: Array<{
+    width?: number;
+    height?: number;
+    crop?: Crop;
+}>, loader?: Loader, isContained?: boolean): string;
+/**
+ * This function generates an array of sizes for Shopify images, for both fixed and responsive images.
+ * @param width - The CSS width of the image
+ * @param intervals - The number of intervals to generate
+ * @param startingWidth - The starting width of the image
+ * @param incrementSize - The size of each interval
+ * @returns An array of widths
+ */
+export declare function generateImageWidths(width: string | number | undefined, intervals: number, startingWidth: number, incrementSize: number): number[];
+/**
+ * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1:1`, not `0.5`, or `auto`
+ * @param aspectRatio - The aspect ratio of the image, e.g. `1:1`
+ * @returns The aspect ratio as a number, e.g. `1`
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}
+ */
+export declare function parseAspectRatio(aspectRatio?: string): number | undefined;
+/**
+ * Generate sizes for Imagery loader
+ * @param imageWidths
+ * @param aspectRatio
+ * @param crop
+ * @returns
+ */
+export declare function generateSizes(imageWidths?: number[], aspectRatio?: string, crop?: Crop): {
+    width: number;
+    height: number | undefined;
+    crop: Crop;
+}[] | undefined;
+export {};
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +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,yGA8KjB,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"}