@tapcart/mobile-components 0.6.9 → 0.6.11

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

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

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

@@ -40,7 +40,10 @@ const Input = React.forwardRef((_a, ref) => {
                     top: iconTopPadding,
                     bottom: iconBottomPadding,
                     color: iconColorStyle,
-                } })), _jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error, hasLabel: !!label }), className), "data-icon": !!icon, ref: ref }, props, { style: Object.assign(Object.assign({ paddingLeft: inputPaddingLeft, paddingRight: inputPaddingRight, fontFamily: placeholderFont, fontWeight: placeholderFontWeight, fontSize: `${placeholderFontSize}px`, textAlign: placeholderTextAlign, color: placeholderTextColorStyle, textTransform: placeholderUpperCase ? "uppercase" : undefined, borderColor: inputBorderColorStyle, paddingTop: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.top, paddingBottom: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.bottom, backgroundColor: inputBgColor }, borderStyle), (label ? { borderRadius: "8px" } : borderRadiusStyle)) })), label ? (_jsx("label", Object.assign({ htmlFor: id, className: cn("absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] opacity-100 peer-placeholder-shown:opacity-0", iconPosition === "left" ? "start-10" : "start-4") }, { children: label }))) : null, icon && iconPosition === "right" && (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" }))] })));
+                } })), _jsx("style", { children: ` 
+              .custom-placeholder-value::placeholder { 
+                  color: ${placeholderTextColorStyle}; 
+              }` }), _jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error, hasLabel: !!label }), className, "custom-placeholder-value"), "data-icon": !!icon, ref: ref }, props, { style: Object.assign(Object.assign({ paddingLeft: inputPaddingLeft, paddingRight: inputPaddingRight, fontFamily: placeholderFont, fontWeight: placeholderFontWeight, fontSize: `${placeholderFontSize}px`, textAlign: placeholderTextAlign, color: placeholderTextColorStyle, textTransform: placeholderUpperCase ? "uppercase" : undefined, borderColor: inputBorderColorStyle, paddingTop: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.top, paddingBottom: inputPadding === null || inputPadding === void 0 ? void 0 : inputPadding.bottom, backgroundColor: inputBgColor }, borderStyle), (label ? { borderRadius: "8px" } : borderRadiusStyle)) })), label ? (_jsx("label", Object.assign({ htmlFor: id, className: cn("absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] opacity-100 peer-placeholder-shown:opacity-0", iconPosition === "left" ? "start-10" : "start-4") }, { children: label }))) : null, icon && iconPosition === "right" && (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" }))] })));
 });
 Input.displayName = "Input";
 export { Input };

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+import { Color, TextStyle, BackgroundAndPadding } from "../../lib/utils";
 declare const buttonVariants: (props?: ({
     size?: "sm" | "lg" | "content" | "default" | "icon" | null | undefined;
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "quickadd" | "applePay" | "shopPay" | null | undefined;
@@ -12,8 +13,61 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     labelClassName?: string;
     labelStyle?: React.CSSProperties | undefined;
     iconColor?: string;
+    iconStrokeColor?: string;
     iconPosition?: "left" | "right";
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { Button, buttonVariants };
+declare const getButtonProps: (buttonConfig: TextStyle & BackgroundAndPadding & {
+    iconColor: Color;
+    iconDetails: {
+        url: string;
+    };
+    backgroundShadow: boolean;
+}) => {
+    iconColor: string | undefined;
+    labelStyle: {
+        color: string | undefined;
+        fontFamily: string | undefined;
+        fontWeight: string | number | undefined;
+        fontSize: string | number;
+        textTransform: string;
+        textAlign: "left" | "right" | "center" | "justify";
+        textWrap: string;
+    };
+    iconUrl: string;
+    style: {
+        color: string | undefined;
+        boxShadow: string;
+        width: string;
+        backgroundColor: string | undefined;
+        borderColor: string | undefined;
+        borderTopWidth: string | undefined;
+        borderBottomWidth: string | undefined;
+        borderLeftWidth: string | undefined;
+        borderRightWidth: string | undefined;
+        borderStyle: string | undefined;
+        borderRadius: string | undefined;
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
+    } | {
+        color: string | undefined;
+        boxShadow: string;
+        width: string;
+        backgroundColor: string | undefined;
+        borderColor: string | undefined;
+        borderTopWidth: string | undefined;
+        borderBottomWidth: string | undefined;
+        borderLeftWidth: string | undefined;
+        borderRightWidth: string | undefined;
+        borderStyle: string | undefined;
+        borderRadius: string | undefined;
+        paddingTop: string | undefined;
+        paddingBottom: string | undefined;
+        paddingLeft: string | undefined;
+        paddingRight: string | undefined;
+    };
+};
+export { Button, buttonVariants, getButtonProps };
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFAqFX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAIxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC;AAED,QAAA,MAAM,MAAM,uFAyFX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn, getColor, getTextStyle, getBackgroundAndPaddingStyle, } from "../../lib/utils";
 import { Icon } from "./icon";
 import { Text } from "./text";
 const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors disabled:bg-stateColors-disabled disabled:border-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate active:opacity-70 disabled:opacity-70", {
@@ -79,14 +79,16 @@ const labelVariants = cva("truncate", {
     },
 });
 const Button = React.forwardRef((_a, ref) => {
-    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconPosition, iconUrl } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconPosition", "iconUrl"]);
+    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconUrl } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconUrl"]);
     const Comp = asChild ? Slot : "button";
     const IconButton = () => icon || iconUrl ? _jsx(Icon, { name: icon, size: "sm", style: { color: iconColor } }) : null;
-    const BasicButton = () => (_jsxs(_Fragment, { children: [icon || iconUrl ? (_jsx(Icon, { name: iconUrl ? undefined : icon, url: iconUrl, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), { "mr-2": iconPosition !== "right" }), style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
+    const BasicButton = () => (_jsxs(_Fragment, { children: [icon || iconUrl ? (_jsx(Icon, { name: iconUrl ? undefined : icon, url: iconUrl, size: variant === "quickadd" ? "xs" : "sm", className: cn(iconVariants({ variant }), {
+                    "mr-2": iconPosition !== "right",
+                }), strokeColor: iconStrokeColor, style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
     const LoadingButton = () => (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) })));
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,
-            "flex-row-reverse": icon && iconPosition === "right"
+            "flex-row-reverse": icon && iconPosition === "right",
         }), ref: ref }, props, { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
             React.isValidElement(props.children) ? ( // if children are passed as a valid React element
         props.children // render it
@@ -94,4 +96,14 @@ const Button = React.forwardRef((_a, ref) => {
             size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
 });
 Button.displayName = "Button";
-export { Button, buttonVariants };
+const getButtonProps = (buttonConfig) => {
+    return {
+        iconColor: getColor(buttonConfig.iconColor),
+        labelStyle: Object.assign(Object.assign({}, getTextStyle(buttonConfig)), { color: getColor(buttonConfig.color) }),
+        iconUrl: buttonConfig.iconDetails.url,
+        style: Object.assign(Object.assign({}, getBackgroundAndPaddingStyle(buttonConfig)), { color: getColor(buttonConfig.color), boxShadow: buttonConfig.backgroundShadow
+                ? "0px 4px 6px rgba(0,0,0,0.1)"
+                : "none", width: "fit-content" }),
+    };
+};
+export { Button, buttonVariants, getButtonProps };

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

@@ -5,7 +5,7 @@ interface GridType {
     children: React.ReactNode;
 }
 declare const gridVariants: (props?: ({
-    columns?: 2 | 1 | 3 | 4 | null | undefined;
+    columns?: 1 | 2 | 3 | 4 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface GridProps extends GridType, VariantProps<typeof gridVariants> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":";AAIA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAC;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC3C;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,EAClB,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,EAAE,UAAU,2CA8DZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":";AAIA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAC;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC3C;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,EAClB,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,EAAE,UAAU,2CA+DZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/price.js

@@ -5,8 +5,9 @@ import { cn } from "../../lib/utils";
 function Price({ price, priceHigh, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', standardStyles, saleStyles, strikeThroughStyles, }) {
     const Spacer = () => (_jsx("span", { children: " - " }));
     const ProductPrice = () => {
+        const priceStyles = (!isSale || !compareAtPrice) ? standardStyles : saleStyles;
         const colorClass = isSale ? 'text-textColors-salePriceText' : 'text-textColors-priceText';
-        return (_jsx(Text, Object.assign({ className: `${colorClass} flex-shrink-0`, style: { fontSize: `${fontSize}px` } }, { children: _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale, styles: standardStyles }), priceRanges && priceHigh !== undefined && _jsx(Spacer, {}), priceRanges && priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale, styles: saleStyles }))] })) })));
+        return (_jsx(Text, Object.assign({ className: `${colorClass} flex-shrink-0`, style: { fontSize: `${fontSize}px` } }, { children: _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale, styles: priceStyles }), priceRanges && priceHigh !== undefined && _jsx(Spacer, {}), priceRanges && priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale, styles: priceStyles }))] })) })));
     };
     const StrikeThroughPrice = () => {
         if (!isSale || !compareAtPrice)

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

@@ -1,8 +1,42 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const videoVariants: (props?: ({} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type VideoAttributes = {
+    enabled: boolean;
+    aspectRatio: string;
+    videoFit: string;
+    overlayOpacity: number;
+    autoplay: boolean;
+    videoSound: boolean;
+};
 export interface VideoProps extends React.HTMLAttributes<HTMLVideoElement>, VariantProps<typeof videoVariants> {
+    autoPlay: boolean | undefined;
+    muted: boolean | undefined;
+    loop: boolean | undefined;
 }
 declare function Video({ className, ...props }: VideoProps): import("react/jsx-runtime").JSX.Element;
-export { Video, videoVariants };
+declare const getVideoStyle: (videoAttributes: VideoAttributes, videoSrc: {
+    url: string;
+    naturalAspectRatio: string;
+}) => {
+    aspectRatio: string;
+    opacity?: undefined;
+    objectFit?: undefined;
+} | {
+    opacity: number;
+    aspectRatio: string;
+    objectFit: string;
+};
+declare const getVideoAttributeProps: (videoAttributes: VideoAttributes) => {
+    autoPlay?: undefined;
+    controls?: undefined;
+    muted?: undefined;
+    loop?: undefined;
+} | {
+    autoPlay: boolean;
+    controls: boolean;
+    muted: boolean;
+    loop: boolean;
+};
+export { Video, videoVariants, getVideoStyle, getVideoAttributeProps };
 //# sourceMappingURL=video.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../components/ui/video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa,gGAEjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAWjD;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../components/ui/video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa,gGAEjB,CAAA;AAEF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,KAAK,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAA;CAC1B;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAQjD;AAED,QAAA,MAAM,aAAa,oBACA,eAAe,YACtB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,kBAAkB,EAAE,MAAM,CAAA;CAAE;;;;;;;;CActD,CAAA;AAED,QAAA,MAAM,sBAAsB,oBAAqB,eAAe;;;;;;;;;;CAW/D,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/components/ui/video.js

@@ -17,6 +17,29 @@ const videoVariants = cva("w-full", {
 });
 function Video(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("video", Object.assign({ className: cn(videoVariants({}), className) }, props, { autoPlay: true, playsInline: true, muted: true, loop: true })));
+    return (_jsx("video", Object.assign({ className: cn(videoVariants({}), className), preload: "metadata" }, props)));
 }
-export { Video, videoVariants };
+const getVideoStyle = (videoAttributes, videoSrc) => {
+    if (!videoAttributes.enabled) {
+        return { aspectRatio: videoSrc.naturalAspectRatio.replace(":", "/") };
+    }
+    return {
+        opacity: videoAttributes.overlayOpacity / 100,
+        aspectRatio: videoAttributes.aspectRatio === "auto"
+            ? videoSrc.naturalAspectRatio.replace(":", "/")
+            : videoAttributes.aspectRatio.replace(":", "/"),
+        objectFit: videoAttributes.videoFit === "fill" ? "cover" : "contain",
+    };
+};
+const getVideoAttributeProps = (videoAttributes) => {
+    if (!videoAttributes.enabled) {
+        return {};
+    }
+    return {
+        autoPlay: videoAttributes.autoplay,
+        controls: !videoAttributes.autoplay,
+        muted: !videoAttributes.videoSound,
+        loop: true,
+    };
+};
+export { Video, videoVariants, getVideoStyle, getVideoAttributeProps };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getPaddingStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, } from "./lib/utils";
+export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, getIdFromGid, productGidFromId, variantGidFromId, getPaddingStyle, getVerticalAlignment, mapFlexToAlignment, } from "./lib/utils";
 export * from "./components/hooks/use-collection";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/use-recommendations";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,yBAAyB,EACzB,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 // component exports
-export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getPaddingStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, } from "./lib/utils";
+export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, getIdFromGid, productGidFromId, variantGidFromId, getPaddingStyle, getVerticalAlignment, mapFlexToAlignment, } from "./lib/utils";
 export * from "./components/hooks/use-collection";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/use-recommendations";

package/dist/lib/utils.d.ts

@@ -47,18 +47,26 @@ export declare const getVerticalAlignmentStyle: (alignmentAndSpacing: AlignmentA
     top?: undefined;
     transform?: undefined;
 };
-type BackgroundAndPadding = {
+export declare const getPaddingStyle: (padding: Partial<Spacing> | undefined) => {
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+} | {
+    paddingTop: string | undefined;
+    paddingBottom: string | undefined;
+    paddingLeft: string | undefined;
+    paddingRight: string | undefined;
+};
+export type BackgroundAndPadding = {
     backgroundColor?: Color;
     borderSides?: BorderSides;
     borderColor?: Color;
     cornerRadius?: number;
     padding?: Partial<Spacing>;
+    borderRadius?: number;
 };
 export declare const getBackgroundAndPaddingStyle: (backgroundAndPadding: BackgroundAndPadding) => {
-    paddingTop: string | undefined;
-    paddingBottom: string | undefined;
-    paddingLeft: string | undefined;
-    paddingRight: string | undefined;
     backgroundColor: string | undefined;
     borderColor: string | undefined;
     borderTopWidth: string | undefined;
@@ -67,8 +75,19 @@ export declare const getBackgroundAndPaddingStyle: (backgroundAndPadding: Backgr
     borderRightWidth: string | undefined;
     borderStyle: string | undefined;
     borderRadius: string | undefined;
-};
-export declare const getPaddingStyle: (padding: Partial<Spacing>) => {
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+} | {
+    backgroundColor: string | undefined;
+    borderColor: string | undefined;
+    borderTopWidth: string | undefined;
+    borderBottomWidth: string | undefined;
+    borderLeftWidth: string | undefined;
+    borderRightWidth: string | undefined;
+    borderStyle: string | undefined;
+    borderRadius: string | undefined;
     paddingTop: string | undefined;
     paddingBottom: string | undefined;
     paddingLeft: string | undefined;
@@ -85,7 +104,7 @@ export declare const getBackgroundAndSpacingStyle: (backgroundAndSpacing: Backgr
     backgroundColor: string;
     borderRadius: string;
 };
-type TextStyle = {
+export type TextStyle = {
     font: {
         family: string;
         weight: number | string;
@@ -107,4 +126,24 @@ export declare const getTextStyle: (textStyle: Headline | Subtext) => {
     textAlign: "left" | "right" | "center" | "justify";
     textWrap: string;
 };
+export declare const getVerticalAlignment: (alignment: string, padding?: {
+    top: number;
+    bottom: number;
+}) => {
+    bottom: string;
+    top: string;
+    transform?: undefined;
+} | {
+    top: string;
+    transform: string;
+    bottom?: undefined;
+} | {
+    bottom?: undefined;
+    top?: undefined;
+    transform?: undefined;
+};
+export declare const mapFlexToAlignment: (flexClass: string) => string;
+export declare function getIdFromGid(gid: string | undefined): string;
+export declare function productGidFromId(id: string | null | undefined): string | null;
+export declare function variantGidFromId(id: string | null | undefined): string | null;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAA;AAGvC,MAAM,MAAM,KAAK,GAAG;IAAE,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnE,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,eAAO,MAAM,eAAe,UAc3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,CAAA;AAMjE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAI9C,eAAO,MAAM,QAAQ,gBAAiB,KAAK,GAAG,SAAS,uBAUtD,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC7D,KAAK,WAAW,GAAG,UAAU,EAAE,CAAA;AAE/B,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAU/B,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEpD,MAAM,MAAM,OAAO,GAAG;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,iBAAiB,CAAA;IAC5B,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,yBAAyB,wBACf,mBAAmB;;;;;;;;;;;;CAczC,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,4BAA4B,yBACjB,oBAAoB;;;;;;;;;;;;;CA4B3C,CAAA;AAED,eAAO,MAAM,eAAe,YACjB,QAAQ,OAAO,CAAC;;;;;CAU1B,CAAA;AAED,KAAK,oBAAoB,GAAG,mBAAmB,GAAG;IAChD,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,4BAA4B,yBACjB,oBAAoB;;;;;CAU3C,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;KACxB,CAAA;IACD,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;IACtD,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,QAAQ,GAAG,SAAS,CAAA;AACzB,KAAK,OAAO,GAAG,SAAS,CAAA;AAExB,eAAO,MAAM,YAAY,cAAe,QAAQ,GAAG,OAAO;;;;;;;;CAWzD,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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"}

package/dist/lib/utils.js

@@ -58,9 +58,20 @@ export const getVerticalAlignmentStyle = (alignmentAndSpacing) => {
             return {};
     }
 };
+export const getPaddingStyle = (padding) => {
+    if (!padding)
+        return {};
+    return {
+        paddingTop: (padding === null || padding === void 0 ? void 0 : padding.top) !== undefined ? `${padding.top}px` : undefined,
+        paddingBottom: (padding === null || padding === void 0 ? void 0 : padding.bottom) !== undefined ? `${padding.bottom}px` : undefined,
+        paddingLeft: (padding === null || padding === void 0 ? void 0 : padding.left) !== undefined ? `${padding.left}px` : undefined,
+        paddingRight: (padding === null || padding === void 0 ? void 0 : padding.right) !== undefined ? `${padding.right}px` : undefined,
+    };
+};
 export const getBackgroundAndPaddingStyle = (backgroundAndPadding) => {
-    const { backgroundColor, borderSides, borderColor, cornerRadius, padding } = backgroundAndPadding;
-    return Object.assign({ backgroundColor: getColor(backgroundColor), borderColor: getColor(borderColor), borderTopWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("top")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
+    const { backgroundColor, borderSides, borderColor, cornerRadius, padding, borderRadius, } = backgroundAndPadding;
+    const radius = cornerRadius || borderRadius;
+    return Object.assign(Object.assign({}, getPaddingStyle(padding)), { backgroundColor: getColor(backgroundColor), borderColor: getColor(borderColor), borderTopWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("top")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
             ? "1px"
             : undefined, borderBottomWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("bottom")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
             ? "1px"
@@ -68,15 +79,7 @@ export const getBackgroundAndPaddingStyle = (backgroundAndPadding) => {
             ? "1px"
             : undefined, borderRightWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("right")) || (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
             ? "1px"
-            : undefined, borderStyle: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.length) ? "solid" : undefined, borderRadius: cornerRadius !== undefined ? `${cornerRadius}px` : undefined }, getPaddingStyle(padding || {}));
-};
-export const getPaddingStyle = (padding) => {
-    return {
-        paddingTop: (padding === null || padding === void 0 ? void 0 : padding.top) !== undefined ? `${padding.top}px` : undefined,
-        paddingBottom: (padding === null || padding === void 0 ? void 0 : padding.bottom) !== undefined ? `${padding.bottom}px` : undefined,
-        paddingLeft: (padding === null || padding === void 0 ? void 0 : padding.left) !== undefined ? `${padding.left}px` : undefined,
-        paddingRight: (padding === null || padding === void 0 ? void 0 : padding.right) !== undefined ? `${padding.right}px` : undefined,
-    };
+            : undefined, borderStyle: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.length) ? "solid" : undefined, borderRadius: radius !== undefined ? `${radius}px` : undefined });
 };
 export const getBackgroundAndSpacingStyle = (backgroundAndSpacing) => {
     const { spacing, borderColor, backgroundColor, backgroundCorners } = backgroundAndSpacing;
@@ -99,4 +102,48 @@ export const getTextStyle = (textStyle) => {
         textWrap: wrapText ? "wrap" : "nowrap",
     };
 };
+export const getVerticalAlignment = (alignment, padding = { top: 0, bottom: 0 }) => {
+    if (alignment === "bottom") {
+        return { bottom: `${padding.bottom}px`, top: "auto" };
+    }
+    else if (alignment === "middle") {
+        return { top: "50%", transform: `translateY(-50%)` };
+    }
+    else if (alignment === "top") {
+        return { top: `${padding.top}px`, bottom: "auto" };
+    }
+    else {
+        return {};
+    }
+};
+const alignmentClasses = {
+    left: "justify-start",
+    middle: "justify-center",
+    right: "justify-end",
+};
+export const mapFlexToAlignment = (flexClass) => {
+    if (flexClass in alignmentClasses)
+        return alignmentClasses[flexClass];
+    return "";
+};
+export function getIdFromGid(gid) {
+    if (!gid)
+        return "";
+    const arr = gid.split("/");
+    return arr[arr.length - 1] || "";
+}
+export function productGidFromId(id) {
+    if (!id)
+        return null;
+    if (id.startsWith("gid://shopify/Product/"))
+        return id;
+    return `gid://shopify/Product/${id}`;
+}
+export function variantGidFromId(id) {
+    if (!id)
+        return null;
+    if (id.startsWith("gid://shopify/ProductVariant/"))
+        return id;
+    return `gid://shopify/ProductVariant/${id}`;
+}
 // #endregion =-=-=-= END BLOCK UTILS =-=-=-=

package/dist/styles.css

@@ -907,6 +907,9 @@ video {
 .grid {
   display: grid;
 }
+.hidden {
+  display: none;
+}
 .aspect-productImages {
   aspect-ratio: var(--productImage-aspectRatio);
 }
@@ -931,6 +934,9 @@ video {
 .h-11 {
   height: 2.75rem;
 }
+.h-12 {
+  height: 3rem;
+}
 .h-14 {
   height: 3.5rem;
 }
@@ -979,6 +985,9 @@ video {
 .h-\[42px\] {
   height: 42px;
 }
+.h-\[48px\] {
+  height: 48px;
+}
 .h-\[4px\] {
   height: 4px;
 }
@@ -1015,6 +1024,9 @@ video {
 .w-10 {
   width: 2.5rem;
 }
+.w-12 {
+  width: 3rem;
+}
 .w-14 {
   width: 3.5rem;
 }
@@ -1420,6 +1432,9 @@ video {
 .border-2 {
   border-width: 2px;
 }
+.border-\[1px\] {
+  border-width: 1px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1438,6 +1453,10 @@ video {
 .\!border-stateColors-error {
   border-color: var(--stateColors-error) !important;
 }
+.border-\[\#000\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
 .border-\[\#E3E3E3\] {
   --tw-border-opacity: 1;
   border-color: rgb(227 227 227 / var(--tw-border-opacity));
@@ -1481,6 +1500,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(97 46 255 / var(--tw-bg-opacity));
 }
+.bg-\[\#FFFFFF\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
 .bg-\[rgba\(255\2c 255\2c 255\2c 0\.5\)\] {
   background-color: rgba(255,255,255,0.5);
 }
@@ -1657,6 +1680,9 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1982,6 +2008,11 @@ video {
 .opacity-50 {
   opacity: 0.5;
 }
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-\[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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",