@tapcart/mobile-components 0.3.0 → 0.3.1

package/dist/components/ui/button.js

@@ -26,10 +26,10 @@ const buttonVariants = cva("w-full flex rounded items-center justify-center tran
             content: "py-3 px-4 w-auto",
         },
         variant: {
-            default: "bg-buttonColors-primaryFill border border-buttonColors-primaryOutlineColor shadow-buttonColors-primaryShadow",
+            default: "bg-buttonColors-primaryFill border border-buttonColors-primaryOutlineColor shadow-primary",
             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",
+            secondary: "bg-buttonColors-secondaryFill border border-buttonColors-secondaryOutlineColor disabled:bg-buttonColors-secondaryFill disabled:text-stateColors-disabled shadow-secondary",
             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",

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

@@ -15,5 +15,9 @@ declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttribu
 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, };
+type CarouselDotsProps = {
+    maxDots?: number;
+};
+declare const CarouselDots: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselDotsProps & React.RefAttributes<HTMLDivElement>>;
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots, };
 //# sourceMappingURL=carousel.d.ts.map

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

@@ -1 +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,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,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"}
+{"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,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,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;AAIF,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,QAAA,MAAM,YAAY,iIA8ChB,CAAC;AAGH,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,CAAA"}

package/dist/components/ui/carousel.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
@@ -109,4 +109,31 @@ const CarouselNext = React.forwardRef((_a, ref) => {
             : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext }, props, { children: [_jsx(ArrowRight, { className: "h-4 w-4" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Next slide" }))] })));
 });
 CarouselNext.displayName = "CarouselNext";
-export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
+const CarouselDots = React.forwardRef((_a, ref) => {
+    var { maxDots = 5 } = _a, props = __rest(_a, ["maxDots"]);
+    const { api } = useCarousel();
+    const [_, setUpdateState] = React.useState(false);
+    const toggleUpdateState = React.useCallback(() => setUpdateState((prevState) => !prevState), []);
+    React.useEffect(() => {
+        if (api) {
+            api.on('select', toggleUpdateState);
+            api.on('reInit', toggleUpdateState);
+            return () => {
+                api.off('select', toggleUpdateState);
+                api.off('reInit', toggleUpdateState);
+            };
+        }
+    }, [api, toggleUpdateState]);
+    const numberOfSlides = Math.min((api === null || api === void 0 ? void 0 : api.scrollSnapList().length) || 0, maxDots);
+    const currentSlide = Math.min((api === null || api === void 0 ? void 0 : api.selectedScrollSnap()) || 0, maxDots - 1);
+    if (numberOfSlides > 1) {
+        return (_jsx("div", Object.assign({ ref: ref, className: `flex justify-center ${props.className}` }, { children: Array.from({ length: numberOfSlides }, (_, i) => (_jsx(Button, { className: `mx-1 h-1.5 w-1.5 rounded-full p-0 ${i === currentSlide
+                    ? 'bg-coreColors-brandColorPrimary'
+                    : 'bg-coreColors-brandColorPrimary opacity-50'}`, "aria-label": `Go to slide ${i + 1}`, onClick: () => api === null || api === void 0 ? void 0 : api.scrollTo(i) }, i))) })));
+    }
+    else {
+        return _jsx(_Fragment, {});
+    }
+});
+CarouselDots.displayName = 'CarouselDots';
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots, };

package/dist/components/ui/checkbox.js

@@ -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 && !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 })))] }))] })) })) })));
+    return (_jsx("div", Object.assign({ className: cn(checkboxVariants({ deactivated })) }, { children: _jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("w-full 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 overflow-x-auto" }, { children: [label && (_jsx("label", Object.assign({ htmlFor: id, className: "max-w-full" }, { children: _jsxs("span", Object.assign({ className: "flex gap-2" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled text-ellipsis overflow-hidden " }, { 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

@@ -3,26 +3,28 @@ import React from "react";
 declare const chipVariants: (props?: ({
     variant?: "secondary" | "primary" | null | undefined;
     direction?: "horizontal" | "vertical" | null | undefined;
+    iconPosition?: "default" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type ChipProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof chipVariants> & {
+type ChipProps = React.ComponentPropsWithoutRef<"div"> & 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?: ({
+declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
     variant?: "secondary" | "primary" | null | undefined;
     direction?: "horizontal" | "vertical" | null | undefined;
+    iconPosition?: "default" | "left" | "right" | 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>>;
+} & React.RefAttributes<HTMLDivElement>>;
 type MultipleChipsProps = {
     children: React.ReactElement<ChipProps>[];
     containerRef: React.RefObject<HTMLDivElement>;
 };
 declare const MultipleChips: React.FC<MultipleChipsProps>;
-export { Chip, MultipleChips, type ChipProps };
+export { Chip, MultipleChips, type ChipProps, type MultipleChipsProps };
 //# sourceMappingURL=chip.d.ts.map

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;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"}
+{"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;;;;mFAwBjB,CAAA;AAED,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GACpD,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;wCAgE3B,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,KAAK,kBAAkB,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 active:opacity-70", {
+const chipVariants = cva("inline-flex items-center justify-center rounded border border-coreColors-dividingLines text-[12px] transition-colors h-8 active:opacity-70", {
     variants: {
         variant: {
             primary: "bg-coreColors-pageColor text-textColors-primaryColor",
@@ -25,21 +25,27 @@ const chipVariants = cva("inline-flex items-center justify-center rounded border
             horizontal: "flex-row",
             vertical: "flex-col",
         },
+        iconPosition: {
+            default: "p-2",
+            left: "pr-2",
+            right: "pl-2",
+        },
     },
     defaultVariants: {
         variant: "primary",
         direction: "horizontal",
+        iconPosition: "default",
     },
 });
 const Chip = React.forwardRef((_a, ref) => {
-    var { className, variant, direction, children, iconPosition = "left", onChipClick, onIconClick } = _a, props = __rest(_a, ["className", "variant", "direction", "children", "iconPosition", "onChipClick", "onIconClick"]);
+    var { className, variant, direction, children, iconPosition, onChipClick, onIconClick } = _a, props = __rest(_a, ["className", "variant", "direction", "children", "iconPosition", "onChipClick", "onIconClick"]);
     const handleOnClick = () => {
         onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick();
     };
     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", 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" }))] })));
+    return (_jsxs("div", Object.assign({ onClick: handleOnClick, ref: ref, className: cn(chipVariants({ variant, direction, iconPosition }), className) }, props, { children: [iconPosition === "left" && (_jsx("button", Object.assign({ onClick: handleIconClick, className: "h-full flex items-center justify-center pl-2" }, { children: _jsx(Icon, { name: "square-x-filled", className: "mr-2 h-4 w-4 cursor-pointer", color: "coreColors-secondaryIcon" }) }))), children, iconPosition === "right" && (_jsx("button", Object.assign({ onClick: handleIconClick, className: "h-full flex items-center justify-center pr-2" }, { children: _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, }) => {

package/dist/components/ui/drawer.js

@@ -31,8 +31,8 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 const DrawerContentBase = React.forwardRef((_a, ref) => {
     var { className, children, hideBackdrop = false, backdropHexColor, isSheet = false } = _a, props = __rest(_a, ["className", "children", "hideBackdrop", "backdropHexColor", "isSheet"]);
     const styles = isSheet
-        ? { height: "calc(100vh - 56px)" }
-        : { maxHeight: "calc(100vh - 56px)" };
+        ? { height: "calc(100vh - 112px)" }
+        : { maxHeight: "calc(100vh - 112px)" };
     return (_jsxs(DrawerPortal, { children: [hideBackdrop ? null : (_jsx(DrawerOverlay, { backdropHexColor: backdropHexColor })), _jsxs(DrawerPrimitive.Content, Object.assign({ ref: ref, style: styles, className: cn("fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground", className) }, props, { children: [_jsx("div", { className: "mx-auto mb-2 mt-2 h-[4px] w-[40px] rounded-full bg-coreColors-dividingLines" }), children] }))] }));
 });
 DrawerContentBase.displayName = "DrawerContentBase";

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,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"}
+{"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"}

package/dist/components/ui/image.js

@@ -135,21 +135,14 @@ export const Image = React.forwardRef((_a, ref) => {
         setHasError(true);
     };
     const imgClassName = `opacity-0 transition-opacity duration-500 ease-in-out ${isLoaded ? "opacity-100" : ""}`;
-    const aspectRatioPadding = aspectRatio
-        ? {
-            paddingBottom: `${(parseFloat(aspectRatio.split(":")[1]) /
-                parseFloat(aspectRatio.split(":")[0])) *
-                100}%`,
-        }
-        : { paddingBottom: "100%" };
     const wrapperStyle = {
-        paddingBottom: !isLoaded ? aspectRatioPadding.paddingBottom : undefined,
         aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/"),
     };
-    return (_jsx("div", Object.assign({ className: "relative w-full bg-stateColors-skeleton ", 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, objectFit === "contain"), width: normalizedProps.width, className: imgClassName, onLoad: handleImageLoad, onError: handleImageError, sizes: sizes, style: {
+    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 " })) })));
 });
 /**

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

@@ -5,6 +5,7 @@ type Config = {
     productImage?: {
         enabled: boolean;
         cornerRadius: number;
+        allowSwipeability: boolean;
     };
     price?: {
         enabled: boolean;

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

@@ -10,23 +10,7 @@ import { Skeleton } from "./skeleton";
 import { cn } from "../../lib/utils";
 import { cva } from "class-variance-authority";
 import { Image } from "./image";
-const aspectScalingVariants = cva("w-full", {
-    variants: {
-        aspectRatio: {
-            "1:1": "aspect-square",
-            "2:3": "aspect-[2/3]",
-            "4:5": "aspect-[4/5]",
-        },
-        scaling: {
-            fill: "object-cover",
-            fit: "object-contain",
-        },
-    },
-    defaultVariants: {
-        aspectRatio: "2:3",
-        scaling: "fill",
-    },
-});
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "./carousel";
 const productCardBadgeVariants = cva("absolute truncate", {
     variants: {
         horizontalPosition: {
@@ -39,7 +23,18 @@ const productCardBadgeVariants = cva("absolute truncate", {
             bottom: "bottom-0 mb-2",
             below: "",
         },
+        imageSwipeEnabled: {
+            true: "",
+            false: "",
+        },
     },
+    compoundVariants: [
+        {
+            verticalPosition: "bottom",
+            imageSwipeEnabled: true,
+            class: "bottom-[18px]",
+        },
+    ],
 });
 const productCardFavoriteVariants = cva("absolute ", {
     variants: {
@@ -60,22 +55,32 @@ const productCardFavoriteVariants = cva("absolute ", {
             bottom: "",
             below: "",
         },
+        isSoldOut: {
+            true: "",
+            false: "",
+        },
         showSoldOutBadge: {
             true: "",
             false: "",
         },
+        imageSwipeEnabled: {
+            true: "",
+            false: "",
+        },
     },
     compoundVariants: [
         {
             iconPosition: "top-left",
             badgeHorizontalPosition: ["start", "center"],
             badgeVerticalPosition: "top",
+            showSoldOutBadge: false,
             class: "top-10",
         },
         {
             iconPosition: "top-right",
             badgeHorizontalPosition: ["end", "center"],
             badgeVerticalPosition: "top",
+            showSoldOutBadge: false,
             class: "top-10",
         },
         {
@@ -95,13 +100,41 @@ const productCardFavoriteVariants = cva("absolute ", {
             showSoldOutBadge: true,
             class: "bottom-10",
         },
+        {
+            iconPosition: ["bottom-left", "bottom-right"],
+            imageSwipeEnabled: true,
+            class: "bottom-[18px]",
+        },
+        {
+            iconPosition: "bottom-left",
+            badgeHorizontalPosition: ["start", "center"],
+            badgeVerticalPosition: "bottom",
+            isSoldOut: false,
+            showSoldOutBadge: false,
+            imageSwipeEnabled: true,
+            class: "bottom-[58px]",
+        },
+        {
+            iconPosition: "bottom-right",
+            badgeHorizontalPosition: ["end", "center"],
+            badgeVerticalPosition: "bottom",
+            showSoldOutBadge: false,
+            imageSwipeEnabled: true,
+            class: "bottom-[58px]",
+        },
+        {
+            iconPosition: "bottom-left",
+            showSoldOutBadge: true,
+            imageSwipeEnabled: true,
+            class: "bottom-[58px]",
+        },
     ],
     defaultVariants: {
         iconPosition: "below-image-on-right",
     },
 });
 const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
+    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
     let searchVariants = variants.filter((variant) => variant.available);
@@ -151,50 +184,63 @@ 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: () => {
                 _openProduct();
-            } }, { children: [((_e = config.productImage) === null || _e === void 0 ? void 0 : _e.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
+            } }, { 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`,
                         borderTopRightRadius: `${config.productImage.cornerRadius}px`,
-                    } }, { children: [_jsx(Image, { alt: product.title, aspectRatio: (_g = (_f = tapcartData.theme) === null || _f === void 0 ? void 0 : _f.productImages) === null || _g === void 0 ? void 0 : _g.aspectRatio, data: product.featuredImage || product.images[0], sizes: sizes, objectFit: (_j = (_h = tapcartData.theme) === null || _h === void 0 ? void 0 : _h.productImages) === null || _j === void 0 ? void 0 : _j.scaling }), aboveBadge && product.availableForSale && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
+                        borderBottomLeftRadius: `${((_g = config.quickAdd) === null || _g === void 0 ? void 0 : _g.enabled) ? "0" : config.productImage.cornerRadius}px`,
+                        borderBottomRightRadius: `${((_h = config.quickAdd) === null || _h === void 0 ? void 0 : _h.enabled) ? "0" : config.productImage.cornerRadius}px`,
+                    } }, { children: [imageSwipeEnabled ? (_jsx(Carousel, Object.assign({ className: "w-full max-w-xs overflow-hidden relative" }, { children: _jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx(CarouselContent, Object.assign({ className: "" }, { children: product.images.map((image, index) => {
+                                            var _a, _b, _c, _d;
+                                            return (_jsx(CarouselItem, Object.assign({ className: "pl-0" }, { children: _jsx(Image, { alt: product.title, aspectRatio: (_b = (_a = tapcartData.theme) === null || _a === void 0 ? void 0 : _a.productImages) === null || _b === void 0 ? void 0 : _b.aspectRatio, data: image, sizes: sizes, objectFit: (_d = (_c = tapcartData.theme) === null || _c === void 0 ? void 0 : _c.productImages) === null || _d === void 0 ? void 0 : _d.scaling }) })));
+                                        }) })), _jsx(CarouselDots, { className: "absolute left-0 w-full bottom-2" })] })) }))) : (_jsx(Image, { alt: product.title, aspectRatio: (_k = (_j = tapcartData.theme) === null || _j === void 0 ? void 0 : _j.productImages) === null || _k === void 0 ? void 0 : _k.aspectRatio, data: product.featuredImage || product.images[0], sizes: sizes, objectFit: (_m = (_l = tapcartData.theme) === null || _l === void 0 ? void 0 : _l.productImages) === null || _m === void 0 ? void 0 : _m.scaling })), aboveBadge && product.availableForSale && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
                                 verticalPosition: aboveBadge.verticalPosition,
                                 horizontalPosition: aboveBadge.horizontalPosition,
+                                imageSwipeEnabled,
                             })), style: {
                                 color: aboveBadge.fontColor,
                                 backgroundColor: aboveBadge.backgroundColor,
-                            }, alignment: aboveBadge.horizontalPosition, cornerRadius: aboveBadge.cornerRadius, icon: aboveBadge.image }, { children: aboveBadge.text }))), showSoldOutBadge && (_jsx(Badge, Object.assign({ size: "plp-layout", className: "absolute left-0 bottom-0 mb-2 bg-stateColors-disabled", alignment: "start", cornerRadius: "rounded", type: "text-only" }, { children: "Sold Out" }))), ((_k = config.favoritesIcon) === null || _k === void 0 ? void 0 : _k.enabled) &&
+                            }, alignment: aboveBadge.horizontalPosition, cornerRadius: aboveBadge.cornerRadius, icon: aboveBadge.image }, { children: aboveBadge.text }))), showSoldOutBadge && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(productCardBadgeVariants({
+                                verticalPosition: "bottom",
+                                horizontalPosition: "start",
+                                imageSwipeEnabled,
+                            }), "bg-stateColors-disabled"), alignment: "start", cornerRadius: "rounded", type: "text-only" }, { children: "Sold Out" }))), ((_o = config.favoritesIcon) === null || _o === void 0 ? void 0 : _o.enabled) &&
                             iconPosition !== "below-image-on-right" && (_jsx(Favorite, { className: cn(productCardFavoriteVariants({
                                 iconPosition,
                                 badgeHorizontalPosition: aboveBadge === null || aboveBadge === void 0 ? void 0 : aboveBadge.horizontalPosition,
                                 badgeVerticalPosition: aboveBadge === null || aboveBadge === void 0 ? void 0 : aboveBadge.verticalPosition,
+                                isSoldOut: !product.availableForSale,
                                 showSoldOutBadge,
+                                imageSwipeEnabled
                             })), selected: favorited, onClick: (e) => {
                                 onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
-                            }, icon: ((_m = (_l = config.favoritesIcon) === null || _l === void 0 ? void 0 : _l.icon) === null || _m === void 0 ? void 0 : _m.type) === "internal"
-                                ? (_p = (_o = config.favoritesIcon) === null || _o === void 0 ? void 0 : _o.icon) === null || _p === void 0 ? void 0 : _p.url
-                                : undefined }))] }))), ((_q = config.quickAdd) === null || _q === void 0 ? void 0 : _q.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
+                            }, icon: ((_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.type) === "internal"
+                                ? (_s = (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.icon) === null || _s === void 0 ? void 0 : _s.url
+                                : undefined }))] }))), ((_t = config.quickAdd) === null || _t === void 0 ? void 0 : _t.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
                         borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
                         borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
-                    }, labelClassName: cn("outline-0 w-full", { uppercase: (_r = config.quickAdd) === null || _r === void 0 ? void 0 : _r.uppercase }, { "text-left": ((_s = config.quickAdd) === null || _s === void 0 ? void 0 : _s.textAlignment) === "left" }, { "text-right": ((_t = config.quickAdd) === null || _t === void 0 ? void 0 : _t.textAlignment) === "right" }, { "text-center": ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.textAlignment) === "center" }), labelStyle: { fontSize: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
+                    }, labelClassName: cn("outline-0 w-full", { uppercase: (_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.uppercase }, { "text-left": ((_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.textAlignment) === "left" }, { "text-right": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "right" }, { "text-center": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "center" }), labelStyle: { fontSize: (_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
                         e.stopPropagation();
                         onQuickAdd === null || onQuickAdd === void 0 ? void 0 : onQuickAdd(e, product);
                     } }, { children: "+ Quick add" }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
                                 "justify-end": belowBadge.horizontalPosition === "end",
-                            }) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_w = config.productTitle) === null || _w === void 0 ? void 0 : _w.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_x = config.productTitle) === null || _x === void 0 ? void 0 : _x.uppercase }, {
-                                    "text-left": ((_y = config.productTitle) === null || _y === void 0 ? void 0 : _y.textAlignment) === "left",
+                            }) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_z = config.productTitle) === null || _z === void 0 ? void 0 : _z.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.uppercase }, {
+                                    "text-left": ((_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.textAlignment) === "left",
                                 }, {
-                                    "text-right": ((_z = config.productTitle) === null || _z === void 0 ? void 0 : _z.textAlignment) === "right",
+                                    "text-right": ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.textAlignment) === "right",
                                 }, {
-                                    "text-center": ((_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.textAlignment) === "center",
-                                }, { truncate: !((_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.wrapText) }, { "text-wrap": (_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.wrapText }, "text-textColors-productTitle"), style: { fontSize: (_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_4 = config.price) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "left" }, { "justify-end": ((_5 = config.price) === null || _5 === void 0 ? void 0 : _5.textAlignment) === "right" }, { "justify-center": ((_6 = config.price) === null || _6 === void 0 ? void 0 : _6.textAlignment) === "center" }) }, { children: [((_7 = config.price) === null || _7 === void 0 ? void 0 : _7.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
+                                    "text-center": ((_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.textAlignment) === "center",
+                                }, { truncate: !((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.wrapText) }, { "text-wrap": (_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.wrapText }, "text-textColors-productTitle"), style: { fontSize: (_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_7 = config.price) === null || _7 === void 0 ? void 0 : _7.textAlignment) === "left" }, { "justify-end": ((_8 = config.price) === null || _8 === void 0 ? void 0 : _8.textAlignment) === "right" }, { "justify-center": ((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.textAlignment) === "center" }) }, { children: [((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
                                         variant.compareAtPrice &&
-                                        parseFloat((_8 = variant.compareAtPrice) === null || _8 === void 0 ? void 0 : _8.amount) >
+                                        parseFloat((_11 = variant.compareAtPrice) === null || _11 === void 0 ? void 0 : _11.amount) >
                                             parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
-                                        parseFloat((_9 = variant.compareAtPrice) === null || _9 === void 0 ? void 0 : _9.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_10 = config.price) === null || _10 === void 0 ? void 0 : _10.fontSize })), ((_11 = config.favoritesIcon) === null || _11 === void 0 ? void 0 : _11.enabled) &&
+                                        parseFloat((_12 = variant.compareAtPrice) === null || _12 === void 0 ? void 0 : _12.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_13 = config.price) === null || _13 === void 0 ? void 0 : _13.fontSize })), ((_14 = config.favoritesIcon) === null || _14 === void 0 ? void 0 : _14.enabled) &&
                                     config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
                                             onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
-                                        }, size: "small", icon: ((_13 = (_12 = config.favoritesIcon) === null || _12 === void 0 ? void 0 : _12.icon) === null || _13 === void 0 ? void 0 : _13.type) === "internal"
-                                            ? (_15 = (_14 = config.favoritesIcon) === null || _14 === void 0 ? void 0 : _14.icon) === null || _15 === void 0 ? void 0 : _15.url
+                                        }, size: "small", icon: ((_16 = (_15 = config.favoritesIcon) === null || _15 === void 0 ? void 0 : _15.icon) === null || _16 === void 0 ? void 0 : _16.type) === "internal"
+                                            ? (_18 = (_17 = config.favoritesIcon) === null || _17 === void 0 ? void 0 : _17.icon) === null || _18 === void 0 ? void 0 : _18.url
                                             : undefined }) })))] }))] }))] })) })));
 };
 export { ProductCard };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../components/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,gBAAgB;;mFAarB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,QAAQ,2FA6Eb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/textarea.js

@@ -0,0 +1,54 @@
+"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 { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const textareaVariants = cva("relative pl-4 pr-4 rounded border border-coreColors-dividingLines bg-coreColors-inputBackground focus-within:border-coreColors-brandColorPrimary  [&_label]:focus-within:text-coreColors-brandColorPrimary", {
+    variants: {
+        error: {
+            true: "!border-stateColors-error [&_*]:text-stateColors-error [&_*]:placeholder:text-stateColors-error focus-within:!border-stateColors-error [&+label]:text-stateColors-error [&_label]:focus-within:!text-stateColors-error",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        error: false,
+    },
+});
+const Textarea = React.forwardRef((_a, ref) => {
+    var { className, error = false, id, label, icon, asChild, value, placeholder, maxHeight, onChange } = _a, props = __rest(_a, ["className", "error", "id", "label", "icon", "asChild", "value", "placeholder", "maxHeight", "onChange"]);
+    const Comp = asChild ? Slot : "div";
+    const [content, setContent] = React.useState(value);
+    const textareaRef = React.useRef(null);
+    React.useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+        }
+    }, [content]);
+    const handleChange = (e) => {
+        setContent(e);
+    };
+    const focusTextarea = () => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    };
+    return (_jsxs(Comp, Object.assign({ className: cn(textareaVariants({ error }), content ? "pt-6 pb-2" : "pt-4 pb-4", className), onClick: focusTextarea }, { children: [_jsx("textarea", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => {
+                    onChange(e.target.value);
+                    handleChange(e.target.value);
+                }, id: id, className: cn("textarea-component overflow-y-auto w-full resize-none text-[15px] font-fontRegular leading-[160%] font-normal min-h-[24px] align-top placeholder-shown:!truncate text-textColors-primaryColor ring-offset-background file:border-0 file:bg-transparent placeholder-shown:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer", { "pr-1": (textareaRef.current && maxHeight && textareaRef.current.scrollHeight >= maxHeight) }), style: { maxHeight: `${maxHeight}px` }, "data-text": "Enter text here", rows: 1, ref: textareaRef }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, style: { maxWidth: `-webkit-fill-available` }, className: "absolute truncate text-[10px] pr-4 text-textColors-secondaryColor top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null] })));
+});
+Textarea.displayName = "Textarea";
+export { Textarea };

package/dist/index.d.ts

@@ -37,6 +37,7 @@ 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 * from "./components/ui/image";
 export { cn, cva } from "./lib/utils";

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,yCAAyC,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,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,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,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js

@@ -38,6 +38,7 @@ 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 * from "./components/ui/image";
 export { cn, cva } from "./lib/utils";

package/dist/styles.css

@@ -385,10 +385,10 @@ video {
 [hidden] {
   display: none;
 }
-  *::-webkit-scrollbar {
+  .no-scrollbar *:not(.textarea-component)::-webkit-scrollbar {
     display: none;
   }
-  * {
+  .no-scrollbar *:not(.textarea-component) {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
@@ -425,9 +425,12 @@ video {
 
     --radius: 0.5rem;
 
-    --fontRegular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-    --fontMedium: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-    --fontBold: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+    --fontRegular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    --fontMedium: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    --fontBold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
     --coreColors-pageColor: #ffffff;
     --coreColors-shadow: #000000;
@@ -454,12 +457,12 @@ video {
     --buttonColors-primaryText: #ffffff;
     --buttonColors-primaryFill: #000000;
     --buttonColors-primaryOutline: #000000;
-    --buttonColors-primaryShadow: #ffffff;
+    --buttonColors-primaryShadow: #000000;
     --buttonColors-disabled: #707070;
     --buttonColors-secondaryText: #000000;
     --buttonColors-secondaryFill: #ffffff;
     --buttonColors-secondaryOutline: #000000;
-    --buttonColors-secondaryShadow: #ffffff;
+    --buttonColors-secondaryShadow: #000000;
 
     --stateColors-disabled: #707070;
     --stateColors-error: #d91e18ff;
@@ -477,6 +480,29 @@ video {
     --productImage-aspectRatio: "2:3";
     --productImage-scaling: cover;
     --productImage-isCustom: "false";
+
+    --standard-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.10);
+  }
+  .textarea-component::-webkit-scrollbar {
+    width: 4px;
+  }
+  .textarea-component::-webkit-scrollbar-thumb {
+    border-radius: 1.5rem;
+    background: var(--coreColors-secondaryIcon);
+  }
+  .textarea-component::-webkit-scrollbar-track {
+    border-radius: 1.5rem;
+    background: var(--coreColors-dividingLines);
+  }
+  .textarea-component::-moz-placeholder {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .textarea-component::placeholder {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   /*.dark {*/
@@ -672,6 +698,15 @@ video {
 .bottom-10 {
   bottom: 2.5rem;
 }
+.bottom-2 {
+  bottom: 0.5rem;
+}
+.bottom-\[18px\] {
+  bottom: 18px;
+}
+.bottom-\[58px\] {
+  bottom: 58px;
+}
 .end-4 {
   inset-inline-end: 1rem;
 }
@@ -732,6 +767,10 @@ video {
 .row-start-1 {
   grid-row-start: 1;
 }
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -806,9 +845,6 @@ video {
 .aspect-\[2\/3\] {
   aspect-ratio: 2/3;
 }
-.aspect-\[4\/5\] {
-  aspect-ratio: 4/5;
-}
 .aspect-productImages {
   aspect-ratio: var(--productImage-aspectRatio);
 }
@@ -824,6 +860,9 @@ video {
 .h-1 {
   height: 0.25rem;
 }
+.h-1\.5 {
+  height: 0.375rem;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -884,6 +923,15 @@ video {
 .max-h-screen {
   max-height: 100vh;
 }
+.min-h-\[24px\] {
+  min-height: 24px;
+}
+.w-1 {
+  width: 0.25rem;
+}
+.w-1\.5 {
+  width: 0.375rem;
+}
 .w-1\/2 {
   width: 50%;
 }
@@ -948,6 +996,9 @@ video {
 .max-w-lg {
   max-width: 32rem;
 }
+.max-w-xs {
+  max-width: 20rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1021,6 +1072,9 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.resize-none {
+  resize: none;
+}
 .resize {
   resize: both;
 }
@@ -1189,6 +1243,9 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.\!border-stateColors-error {
+  border-color: var(--stateColors-error) !important;
+}
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -1290,22 +1347,14 @@ video {
   background-image: linear-gradient(90deg,#ffffff00 0%,#FFF 100%);
 }
 .bg-fade-left {
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  background-image: linear-gradient(to right, var(--coreColors-pageColor) 0%, #ffffff00 100%);;
 }
 .bg-fade-right {
-  background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  background-image: linear-gradient(to left, var(--coreColors-pageColor) 0%, #ffffff00 100%);;
 }
 .fill-current {
   fill: currentColor;
 }
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-.object-cover {
-  -o-object-fit: cover;
-     object-fit: cover;
-}
 .p-0 {
   padding: 0px;
 }
@@ -1384,12 +1433,24 @@ video {
 .pb-8 {
   padding-bottom: 2rem;
 }
+.pl-0 {
+  padding-left: 0px;
+}
+.pl-2 {
+  padding-left: 0.5rem;
+}
 .pl-4 {
   padding-left: 1rem;
 }
 .pl-8 {
   padding-left: 2rem;
 }
+.pr-1 {
+  padding-right: 0.25rem;
+}
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pr-4 {
   padding-right: 1rem;
 }
@@ -1405,6 +1466,9 @@ video {
 .pt-5 {
   padding-top: 1.25rem;
 }
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .text-left {
   text-align: left;
 }
@@ -1417,6 +1481,9 @@ video {
 .text-start {
   text-align: start;
 }
+.align-top {
+  vertical-align: top;
+}
 .font-fontMedium {
   font-family: var(--fontMedium);
 }
@@ -1502,9 +1569,6 @@ video {
 .text-buttonColors-primaryShadow {
   color: var(--buttonColors-primaryShadow);
 }
-.text-buttonColors-primaryShadowEnabled {
-  color: var(--buttonColors-primaryShadowEnabled);
-}
 .text-buttonColors-primaryText {
   color: var(--buttonColors-primaryText);
 }
@@ -1523,9 +1587,6 @@ video {
 .text-buttonColors-secondaryShadow {
   color: var(--buttonColors-secondaryShadow);
 }
-.text-buttonColors-secondaryShadowEnabled {
-  color: var(--buttonColors-secondaryShadowEnabled);
-}
 .text-buttonColors-secondaryText {
   color: var(--buttonColors-secondaryText);
 }
@@ -1637,6 +1698,9 @@ video {
 .opacity-100 {
   opacity: 1;
 }
+.opacity-50 {
+  opacity: 0.5;
+}
 .shadow-\[0_0_6px_0_rgba\(17\2c 17\2c 17\2c 0\.16\)\] {
   --tw-shadow: 0 0 6px 0 rgba(17,17,17,0.16);
   --tw-shadow-colored: 0 0 6px 0 var(--tw-shadow-color);
@@ -1647,12 +1711,26 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-primary {
+  --tw-shadow: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
+  --tw-shadow-colored: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-secondary {
+  --tw-shadow: calc(var(--buttonColors-secondaryShadowEnabled) * 0px) calc(var(--buttonColors-secondaryShadowEnabled) * 5px) calc(var(--buttonColors-secondaryShadowEnabled) * 25px) calc(var(--buttonColors-secondaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
+  --tw-shadow-colored: calc(var(--buttonColors-secondaryShadowEnabled) * 0px) calc(var(--buttonColors-secondaryShadowEnabled) * 5px) calc(var(--buttonColors-secondaryShadowEnabled) * 25px) calc(var(--buttonColors-secondaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-buttonColors-primaryShadow {
   --tw-shadow-color: var(--buttonColors-primaryShadow);
   --tw-shadow: var(--tw-shadow-colored);
 }
-.shadow-buttonColors-secondaryShadow {
-  --tw-shadow-color: var(--buttonColors-secondaryShadow);
+.shadow-primary {
+  --tw-shadow-color: hsl(var(--primary));
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.shadow-secondary {
+  --tw-shadow-color: hsl(var(--secondary));
   --tw-shadow: var(--tw-shadow-colored);
 }
 .outline-none {
@@ -1753,15 +1831,6 @@ video {
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-/* Hide scrollbar for Chrome, Safari and Opera */
-.no-scrollbar *::-webkit-scrollbar {
-    display: none;
-  }
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar * {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
 .container {
     padding-right: 16px;
     padding-left: 16px;
@@ -1794,12 +1863,34 @@ video {
 .placeholder\:text-textColors-secondaryColor::placeholder {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+.placeholder-shown\:\!truncate:-moz-placeholder-shown {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+.placeholder-shown\:\!truncate:placeholder-shown {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
 .placeholder-shown\:p-4:-moz-placeholder-shown {
   padding: 1rem;
 }
 .placeholder-shown\:p-4:placeholder-shown {
   padding: 1rem;
 }
+.placeholder-shown\:text-textColors-secondaryColor:-moz-placeholder-shown {
+  color: var(--textColors-secondaryColor, #727272ff);
+}
+.placeholder-shown\:text-textColors-secondaryColor:placeholder-shown {
+  color: var(--textColors-secondaryColor, #727272ff);
+}
+.focus-within\:\!border-stateColors-error:focus-within {
+  border-color: var(--stateColors-error) !important;
+}
+.focus-within\:border-coreColors-brandColorPrimary:focus-within {
+  border-color: var(--coreColors-brandColorPrimary);
+}
 .hover\:h-\[18px\]:hover {
   height: 18px;
 }
@@ -2194,9 +2285,24 @@ video {
 .\[\&_\*\]\:text-coreColors-pageColor * {
   color: var(--coreColors-pageColor);
 }
+.\[\&_\*\]\:text-stateColors-error * {
+  color: var(--stateColors-error);
+}
 .\[\&_\*\]\:text-textColors-primaryColor * {
   color: var(--textColors-primaryColor, #121212ff);
 }
+.\[\&_\*\]\:placeholder\:text-stateColors-error *::-moz-placeholder {
+  color: var(--stateColors-error);
+}
+.\[\&_\*\]\:placeholder\:text-stateColors-error *::placeholder {
+  color: var(--stateColors-error);
+}
+.\[\&_label\]\:focus-within\:\!text-stateColors-error:focus-within label {
+  color: var(--stateColors-error) !important;
+}
+.\[\&_label\]\:focus-within\:text-coreColors-brandColorPrimary:focus-within label {
+  color: var(--coreColors-brandColorPrimary);
+}
 .\[\&_p\]\:text-stateColors-disabled p {
   color: var(--stateColors-disabled);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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"
@@ -31,15 +21,15 @@
     "@types/react-dom": "^18.2.0",
     "autoprefixer": "^10.4.14",
     "chokidar-cli": "^3.0.0",
-    "app-studio-types": "workspace:*",
     "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",
@@ -70,5 +60,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\""
   }
-}
+}