@tapcart/mobile-components 0.2.4 → 0.2.8

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

@@ -0,0 +1,25 @@
+interface Product {
+    handle: string;
+}
+interface PageData {
+    products: Product[];
+    cursorBlob?: string;
+}
+interface UseInfiniteScrollProps {
+    initialData: PageData[];
+    loadMoreProducts: (params: any) => Promise<PageData>;
+    queryVariables: Record<string, any>;
+}
+interface UseInfiniteScrollReturn {
+    data: PageData[] | undefined;
+    error: any;
+    isLoadingInitialData: boolean;
+    isLoadingMore: boolean | undefined;
+    isEmpty: boolean;
+    isReachingEnd: boolean;
+    ref: (node?: Element | null | undefined) => void;
+    products: Product[];
+}
+declare const useInfiniteScroll: ({ initialData, loadMoreProducts, queryVariables, }: UseInfiniteScrollProps) => UseInfiniteScrollReturn;
+export { useInfiniteScroll };
+//# sourceMappingURL=use-infinite-scroll.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAMA,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,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;CACpB;AAED,QAAA,MAAM,iBAAiB,uDAIpB,sBAAsB,KAAG,uBAkD3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

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

@@ -0,0 +1,48 @@
+import { useCallback, useEffect } from "react";
+import useSWRInfinite from "swr/infinite";
+import { useInView } from "react-intersection-observer";
+const PAGE_SIZE = 8;
+const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables, }) => {
+    var _a, _b, _c, _d;
+    const { ref, inView } = useInView();
+    const getKey = (pageIndex, previousPageData) => {
+        if (pageIndex === 0)
+            return queryVariables;
+        if (!previousPageData || !previousPageData.cursorBlob)
+            return null;
+        return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.cursorBlob });
+    };
+    const { data, error, size, setSize } = useSWRInfinite(getKey, loadMoreProducts, {
+        // @ts-ignore
+        fallbackData: [initialData],
+        revalidateFirstPage: false,
+        initialSize: 1,
+    });
+    const isLoadingInitialData = !data && !error;
+    const isLoadingMore = isLoadingInitialData ||
+        (size > 0 && data && typeof data[size - 1] === "undefined");
+    const isEmpty = ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.length) === 0;
+    const isReachingEnd = isEmpty ||
+        ((data && ((_d = (_c = data[data.length - 1]) === null || _c === void 0 ? void 0 : _c.products) === null || _d === void 0 ? void 0 : _d.length)) || 0) < PAGE_SIZE;
+    const loadMore = useCallback(() => {
+        if (!isLoadingMore && !isReachingEnd) {
+            setSize(size + 1);
+        }
+    }, [isLoadingMore, isReachingEnd, size, setSize]);
+    useEffect(() => {
+        if (inView) {
+            loadMore();
+        }
+    }, [inView, loadMore]);
+    return {
+        data,
+        error,
+        isLoadingInitialData,
+        isLoadingMore,
+        isEmpty,
+        isReachingEnd,
+        ref,
+        products: data ? data.flatMap((page) => page.products) : [],
+    };
+};
+export { useInfiniteScroll };

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,0KAuBpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAWpB,CAAA;AAIF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/accordion.js

@@ -0,0 +1,34 @@
+"use client";
+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 * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AccordionPrimitive.Item, Object.assign({ ref: ref, className: cn("border-t border-coreColors-dividingLines", className) }, props), void 0));
+});
+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 " }, void 0)] }), void 0) }), void 0));
+});
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsx(AccordionPrimitive.Content, Object.assign({ ref: ref, className: "px-4 overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" }, props, { children: _jsx("div", Object.assign({ className: cn("pb-4 pt-0", className) }, { children: children }), void 0) }), void 0));
+});
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/ui/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAKpE,QAAA,MAAM,WAAW,iDAA4B,CAAA;AAE7C,QAAA,MAAM,kBAAkB,wHAA+B,CAAA;AAEvD,QAAA,MAAM,iBAAiB,uDAA8B,CAAA;AAErD,QAAA,MAAM,kBAAkB,wKAYtB,CAAA;AAGF,QAAA,MAAM,kBAAkB,wKAetB,CAAA;AAGF,QAAA,MAAM,iBAAiB;8BAGpB,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB;8BAGpB,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,gBAAgB,8KASpB,CAAA;AAGF,QAAA,MAAM,sBAAsB,wLAS1B,CAAA;AAIF,QAAA,MAAM,iBAAiB,6KASrB,CAAA;AAGF,QAAA,MAAM,iBAAiB,6KAarB,CAAA;AAGF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,62 @@
+"use client";
+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 * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../../components/ui/button";
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Overlay, Object.assign({ className: cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref }), void 0));
+});
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}, void 0), _jsx(AlertDialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className) }, props), void 0)] }, void 0));
+});
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props), void 0));
+};
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props), void 0));
+};
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Title, Object.assign({ ref: ref, className: cn("text-lg font-semibold", className) }, props), void 0));
+});
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm text-muted-foreground", className) }, props), void 0));
+});
+AlertDialogDescription.displayName =
+    AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Action, Object.assign({ ref: ref, className: cn(buttonVariants(), className) }, props), void 0));
+});
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Cancel, Object.assign({ ref: ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className) }, props), void 0));
+});
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/ui/aspect-ratio.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/components/ui/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../components/ui/aspect-ratio.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE,QAAA,MAAM,WAAW,kIAA4B,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/aspect-ratio.js

@@ -0,0 +1,4 @@
+"use client";
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+const AspectRatio = AspectRatioPrimitive.Root;
+export { AspectRatio };

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    alignment?: "left" | "right" | "full-width" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    size: "plp-layout" | "carousels";
+    icon?: string;
+    type?: "icon-and-text" | "icon-only" | "text-only";
+}
+declare function Badge({ className, icon, alignment, type, size, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,aAAa;;mFAclB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,IAAI,EAAE,YAAY,GAAG,WAAW,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,eAAe,GAAG,WAAW,GAAG,WAAW,CAAA;CACnD;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAsB,EACtB,IAAmB,EACnB,GAAG,KAAK,EACT,EAAE,UAAU,2CAwBZ;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/badge.js

@@ -0,0 +1,34 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+import { Text } from "./text";
+const badgeVariants = cva("inline-flex items-center justify-center gap-1 py-1 px-2 text-productBadging-text bg-productBadging-fill focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+    variants: {
+        alignment: {
+            left: "rounded-tr rounded-br",
+            right: "rounded-tl rounded-bl",
+            "full-width": "rounded-none w-full",
+        },
+    },
+    defaultVariants: {
+        alignment: "left",
+    },
+});
+function Badge(_a) {
+    var { className, icon, alignment, type = "icon-and-text", size = "plp-layout" } = _a, props = __rest(_a, ["className", "icon", "alignment", "type", "size"]);
+    const BadgeText = () => (_jsx(Text, Object.assign({ type: size === "plp-layout" ? "body-primary" : "body-secondary", className: "text-productBadging-text" }, { children: props.children }), void 0));
+    return (_jsx("div", Object.assign({ className: cn(badgeVariants({ alignment }), className) }, { children: type === "icon-and-text" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: size === "carousels" ? "xs" : "sm" }, void 0), _jsx(BadgeText, {}, void 0)] }, void 0)) : type === "icon-only" ? (_jsx(Icon, { name: icon, size: size === "carousels" ? "xs" : "sm" }, void 0)) : (_jsx(BadgeText, {}, void 0)) }), void 0));
+}
+export { Badge, badgeVariants };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    size?: "sm" | "lg" | "content" | "default" | "icon" | null | undefined;
+    variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | "quickadd" | "applePay" | "shopPay" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    loading?: boolean;
+    icon?: string;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +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;CACd;AAED,QAAA,MAAM,MAAM,uFAyCX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -0,0 +1,56 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate", {
+    variants: {
+        size: {
+            default: "py-3 px-4",
+            sm: "px-3 rounded-md",
+            lg: "px-8 rounded-md",
+            icon: "p-4 w-auto",
+            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",
+            shopPay: "bg-[#612EFF]",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = React.forwardRef((_a, ref) => {
+    var { className, variant, size, asChild = false, loading, icon } = _a, props = __rest(_a, ["className", "variant", "size", "asChild", "loading", "icon"]);
+    const Comp = asChild ? Slot : "button";
+    const IconButton = () => !loading && size === "icon" && icon ? (_jsx(Icon, { name: icon, size: "sm" }, void 0)) : null;
+    const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: "mr-2" }, void 0)) : null, !loading ? _jsx(Text, Object.assign({ type: "body-primary" }, { children: props.children }), void 0) : _jsx(_Fragment, {}, void 0)] }, void 0));
+    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" }, void 0)) : size === "icon" ? (_jsx(IconButton, {}, void 0)) : (_jsx(BasicButton, {}, void 0)) }), void 0));
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+declare type CarouselApi = UseEmblaCarouselType[1];
+declare type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+declare type CarouselOptions = UseCarouselParameters[0];
+declare type CarouselPlugin = UseCarouselParameters[1];
+declare type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("../../components/ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("../../components/ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
+//# sourceMappingURL=carousel.d.ts.map

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

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

package/dist/components/ui/carousel.js

@@ -0,0 +1,112 @@
+"use client";
+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 useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../../components/ui/button";
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+    const context = React.useContext(CarouselContext);
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+    return context;
+}
+const Carousel = React.forwardRef((_a, ref) => {
+    var { orientation = "horizontal", opts, setApi, plugins, className, children } = _a, props = __rest(_a, ["orientation", "opts", "setApi", "plugins", "className", "children"]);
+    const [carouselRef, api] = useEmblaCarousel(Object.assign(Object.assign({}, opts), { axis: orientation === "horizontal" ? "x" : "y" }), plugins);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((api) => {
+        if (!api) {
+            return;
+        }
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }, []);
+    const scrollPrev = React.useCallback(() => {
+        api === null || api === void 0 ? void 0 : api.scrollPrev();
+    }, [api]);
+    const scrollNext = React.useCallback(() => {
+        api === null || api === void 0 ? void 0 : api.scrollNext();
+    }, [api]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [scrollPrev, scrollNext]);
+    React.useEffect(() => {
+        if (!api || !setApi) {
+            return;
+        }
+        setApi(api);
+    }, [api, setApi]);
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
+        onSelect(api);
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
+        return () => {
+            api === null || api === void 0 ? void 0 : api.off("select", onSelect);
+        };
+    }, [api, onSelect]);
+    return (_jsx(CarouselContext.Provider, Object.assign({ value: {
+            carouselRef,
+            api: api,
+            opts,
+            orientation: orientation || ((opts === null || opts === void 0 ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"),
+            scrollPrev,
+            scrollNext,
+            canScrollPrev,
+            canScrollNext,
+        } }, { children: _jsx("div", Object.assign({ ref: ref, onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel" }, props, { children: children }), void 0) }), void 0));
+});
+Carousel.displayName = "Carousel";
+const CarouselContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { carouselRef, orientation } = useCarousel();
+    return (_jsx("div", Object.assign({ ref: carouselRef, className: "overflow-hidden" }, { children: _jsx("div", Object.assign({ ref: ref, className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className) }, props), void 0) }), void 0));
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { orientation } = useCarousel();
+    return (_jsx("div", Object.assign({ ref: ref, role: "group", "aria-roledescription": "slide", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className) }, props), void 0));
+});
+CarouselItem.displayName = "CarouselItem";
+const CarouselPrevious = React.forwardRef((_a, ref) => {
+    var { className, variant = "outline", size = "icon" } = _a, props = __rest(_a, ["className", "variant", "size"]);
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return (_jsxs(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev }, props, { children: [_jsx(ArrowLeft, { className: "h-4 w-4" }, void 0), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Previous slide" }), void 0)] }), void 0));
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = React.forwardRef((_a, ref) => {
+    var { className, variant = "outline", size = "icon" } = _a, props = __rest(_a, ["className", "variant", "size"]);
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return (_jsxs(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext }, props, { children: [_jsx(ArrowRight, { className: "h-4 w-4" }, void 0), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Next slide" }), void 0)] }), void 0));
+});
+CarouselNext.displayName = "CarouselNext";
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { VariantProps } from "class-variance-authority";
+declare const checkboxVariants: (props?: ({
+    deactivated?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
+    selected?: boolean;
+    onCheck?: (_: boolean) => void;
+    children?: any;
+    label?: string;
+    numberAmount?: string;
+    subtext?: string;
+    onSelect?: React.ReactEventHandler;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAA;AA6F5D,QAAA,MAAM,gBAAgB;;mFAUpB,CAAA;AAEF,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;CACnC;AAED,QAAA,MAAM,QAAQ,yFA6Eb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/checkbox.js

@@ -0,0 +1,38 @@
+"use client";
+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 * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Text } from "./text";
+const Check = ({ className }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: className }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_24)" }, { children: _jsx("path", { d: "M5.667 21H5.66695C4.98414 21 4.32733 20.7382 3.83183 20.2684C3.33941 19.8015 3.04358 19.1646 3.00429 18.4875L3 18.3202V5.667C3 4.24616 4.11102 3.08465 5.51221 3.0043L5.67982 3H18.333C19.7538 3 20.9153 4.11101 20.9957 5.51219L21 5.67983V18.333C21 19.7538 19.889 20.9153 18.4878 20.9957L18.3202 21H5.667ZM16.4141 8.58593L16.414 8.58579C16.0389 8.21085 15.5303 8.00021 15 8.00021C14.4697 8.00021 13.9611 8.21085 13.586 8.58579L10.9998 11.1712L10.4138 10.5856L10.392 10.5638L10.3689 10.5434L10.2749 10.4604L10.2505 10.4388L10.2247 10.4189C9.82271 10.1081 9.31749 9.96192 8.81164 10.0101C8.3058 10.0583 7.83726 10.2972 7.50119 10.6783C7.16512 11.0595 6.98673 11.5542 7.00224 12.0621C7.01775 12.57 7.226 13.053 7.58469 13.4129L7.58589 13.4141L9.58589 15.4141L9.60784 15.4361L9.63111 15.4566L9.72511 15.5396L9.74895 15.5607L9.77407 15.5801C10.1589 15.8786 10.6394 16.0265 11.1254 15.9959C11.6115 15.9654 12.0697 15.7585 12.4141 15.4141L12.4141 15.4141L16.4141 11.4141L16.4361 11.3922L16.4566 11.3689L16.5396 11.2749L16.5607 11.2511L16.5801 11.2259C16.8786 10.8411 17.0265 10.3606 16.9959 9.87457C16.9654 9.38851 16.7585 8.93031 16.4141 8.58593Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2" }, void 0) }), void 0), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_24" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));
+const Unchecked = ({ className }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_32)" }, { children: _jsx("path", { d: "M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_32" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));
+const DisabledCheckbox = ({ className }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className }, { children: [_jsxs("g", Object.assign({ clipPath: "url(#clip0_1465_43)" }, { children: [_jsx("path", { d: "M8 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V16M19.416 19.412C19.2303 19.5983 19.0096 19.7462 18.7666 19.8471C18.5236 19.948 18.2631 19.9999 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V6C4 5.448 4.224 4.948 4.586 4.586", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), _jsx("path", { d: "M3 3L21 21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_43" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));
+const checkboxVariants = cva("flex flex-col group group-disabled", {
+    variants: {
+        deactivated: {
+            true: "[&_p]:text-stateColors-disabled",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        deactivated: false,
+    },
+});
+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" }, void 0)) }), void 0), _jsxs("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: [!deactivated && (_jsx(Unchecked, { className: "text-coreColors-secondaryIcon" }, void 0)), deactivated && (_jsx(DisabledCheckbox, { className: "text-stateColors-disabled" }, void 0))] }), void 0)] }), void 0), _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 }), void 0), numberAmount && (_jsxs(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled inline" }, { children: ["(", numberAmount, ")"] }), void 0))] }), void 0) }), void 0)), subtext && (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled" }, { children: subtext }), void 0))] }), void 0)] }), void 0) }), void 0) }), void 0));
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

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

@@ -0,0 +1,28 @@
+import { type VariantProps } from "class-variance-authority";
+import React from "react";
+declare const chipVariants: (props?: ({
+    variant?: "secondary" | "primary" | null | undefined;
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare type ChipProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof chipVariants> & {
+    icon?: React.ElementType;
+    iconPosition?: "left" | "right";
+    onChipClick?: () => void;
+    onIconClick?: () => void;
+};
+declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "secondary" | "primary" | null | undefined;
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
+    icon?: React.ElementType<any> | undefined;
+    iconPosition?: "left" | "right" | undefined;
+    onChipClick?: (() => void) | undefined;
+    onIconClick?: (() => void) | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare type MultipleChipsProps = {
+    children: React.ReactElement<ChipProps>[];
+    containerRef: React.RefObject<HTMLDivElement>;
+};
+declare const MultipleChips: React.FC<MultipleChipsProps>;
+export { Chip, MultipleChips, type ChipProps };
+//# sourceMappingURL=chip.d.ts.map

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

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