@tapcart/mobile-components 0.9.0 → 0.9.2

package/dist/components/ui/quantity-pickerDEPRECATED.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface QuantityPickerProps extends React.HTMLAttributes<HTMLDivElement> {
+    decreaseIconUrl: string;
+    increaseIconUrl: string;
+    deleteIconUrl: string;
+    isDeleteOnly: boolean;
+    iconColor: string;
+    onDecreaseClick: React.ReactEventHandler;
+    onIncreaseClick: React.ReactEventHandler;
+    isDecreaseDisabled?: boolean;
+    isIncreaseDisabled?: boolean;
+    loading?: boolean;
+    value: number;
+    setValue: (_: number) => void;
+    className?: string;
+    inputStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    buttonCornerRadius?: number;
+    max?: number;
+}
+declare const QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;
+export { QuantityPicker };
+//# sourceMappingURL=quantity-pickerDEPRECATED.d.ts.map

package/dist/components/ui/quantity-pickerDEPRECATED.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-pickerDEPRECATED.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-pickerDEPRECATED.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA0ED,QAAA,MAAM,cAAc,4FA8HnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/quantity-pickerDEPRECATED.js

@@ -0,0 +1,88 @@
+"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, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+import { useTap } from "./tap";
+import { LoadingDots } from "./loading-dots";
+const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
+    const { onTap, isPressed, ref: tapRef } = useTap();
+    const [isButtonPressed, setIsButtonPressed] = React.useState(false);
+    // Handle press state manually for the invisible button
+    const handleMouseDown = React.useCallback(() => {
+        if (!disabled)
+            setIsButtonPressed(true);
+    }, [disabled]);
+    const handleMouseUp = React.useCallback(() => {
+        setIsButtonPressed(false);
+    }, []);
+    // Calculate the visual styles for the button
+    const visualButtonStyle = Object.assign({}, style);
+    return (_jsxs("div", Object.assign({ className: "relative h-7 w-7", style: { touchAction: "manipulation" } }, { children: [_jsx("div", Object.assign({ className: cn("absolute inset-0 flex items-center justify-center bg-stateColors-skeleton border border-coreColors-dividingLines", className, disabled ? "opacity-50" : ""), style: visualButtonStyle, "aria-hidden": "true" }, { children: _jsx(Icon, { url: iconUrl, size: "sm", strokeColor: iconColor, strokeWidth: 4, style: {
+                        opacity: isPressed || isButtonPressed ? 0.7 : 1,
+                    } }) })), _jsx("button", { onClick: onTap(handler), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, ref: tapRef, className: "absolute cursor-pointer", style: {
+                    top: "-8px",
+                    right: "-8px",
+                    bottom: "-8px",
+                    left: "-8px",
+                    opacity: 0,
+                    zIndex: 10,
+                }, disabled: disabled, "aria-label": "Quantity button" })] })));
+};
+const QuantityPicker = React.forwardRef((_a, ref) => {
+    var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value, setValue, inputStyle, buttonStyle, buttonCornerRadius = 4, max = 99, loading = false } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "isDecreaseDisabled", "isIncreaseDisabled", "value", "setValue", "inputStyle", "buttonStyle", "buttonCornerRadius", "max", "loading"]);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [localValue, setLocalValue] = React.useState(value.toString());
+    React.useEffect(() => {
+        if (!isFocused) {
+            setLocalValue(value.toString());
+        }
+    }, [value, isFocused]);
+    const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined, borderBottomLeftRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined });
+    const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined, borderBottomRightRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined });
+    const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
+    return (_jsxs("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: [isDeleteOnly ? (_jsx(IconButton, { handler: onDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: onDecreaseClick, iconUrl: value === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("input", { type: "number", pattern: "[0-9]*", disabled: loading, max: max, value: localValue, onBlur: (e) => {
+                            setIsFocused(false);
+                            const parsedValue = parseInt(e.target.value) || 0;
+                            const clampedValue = Math.min(parsedValue, max);
+                            setValue(clampedValue);
+                            setLocalValue(clampedValue.toString());
+                        }, onFocus: () => {
+                            setIsFocused(true);
+                        }, onChange: (e) => {
+                            const inputValue = e.target.value;
+                            if (inputValue === "") {
+                                setLocalValue("");
+                            }
+                            else {
+                                const parsedValue = parseInt(inputValue);
+                                if (!isNaN(parsedValue)) {
+                                    const clampedValue = Math.min(parsedValue, max);
+                                    setLocalValue(clampedValue.toString());
+                                }
+                            }
+                        }, className: "w-8 h-7 focus-visible:outline-none text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: Object.assign(Object.assign({}, inputStyle), { borderRadius: (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.borderRadius)
+                                ? `${inputStyle.borderRadius}px`
+                                : 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
+});
+QuantityPicker.displayName = "QuantityPicker";
+export { QuantityPicker };

package/dist/components/ui/wishlist-select.d.ts

@@ -1,5 +1,53 @@
 import * as React from "react";
+import { Color } from "../../lib/utils";
 import { Translations } from "app-studio-types";
+interface WishlistSelectStyleConfig {
+    triggerBackgroundColor?: Color;
+    triggerBorderColor?: Color;
+    triggerCornerRadius?: number;
+    triggerPadding?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    dropdownIcon?: {
+        url: string;
+        assetID?: string | null;
+    };
+    dropdownIconColor?: Color;
+    dropdownIconSize?: "xxs" | "xs" | "sm" | "md" | "lg" | null | undefined;
+    contentBackgroundColor?: Color;
+    contentBorderColor?: Color;
+    contentCornerRadius?: number;
+    contentMaxHeight?: number;
+    defaultImageIcon?: {
+        url: string;
+        assetID?: string | null;
+    };
+    defaultImageBackground?: Color;
+    defaultImageIconColor?: Color;
+    imageLeftBorderRadius?: number;
+    imageRightBorderRadius?: number;
+    itemHoverColor?: Color;
+    itemSelectedColor?: Color;
+    itemDividerColor?: Color;
+    nameTextColor?: Color;
+    nameFont?: {
+        family: string;
+        weight: string;
+    };
+    nameSize?: number;
+    countTextColor?: Color;
+    countFont?: {
+        family: string;
+        weight: string;
+    };
+    countSize?: number;
+    createNewTextColor?: Color;
+    createNewBackgroundColor?: Color;
+    createNewBorderColor?: Color;
+}
 interface SelectProps<T> {
     children: React.ReactElement<{
         value: T;
@@ -7,6 +55,7 @@ interface SelectProps<T> {
         isTrigger?: boolean;
         isSelected?: boolean;
         translations: Translations;
+        styleConfig?: WishlistSelectStyleConfig;
         children: ({ isTrigger, translations, }: {
             isTrigger: boolean;
             translations: Translations;
@@ -17,27 +66,32 @@ interface SelectProps<T> {
     onOpenChange?: (isOpen: boolean) => void;
     onCreateNew?: () => void;
     translations: Translations;
+    styleConfig?: WishlistSelectStyleConfig;
 }
 declare const WishlistSelect: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLDivElement>>;
 interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     isTrigger?: boolean;
     children: React.ReactNode;
+    styleConfig?: WishlistSelectStyleConfig;
 }
 declare const WishlistSelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 interface SelectContentProps {
     children: React.ReactNode;
     isOpen: boolean;
     className?: string;
+    styleConfig?: WishlistSelectStyleConfig;
 }
 declare const WishlistSelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     onSelect?: () => void;
     isSelected?: boolean;
     isTrigger?: boolean;
+    styleConfig?: WishlistSelectStyleConfig;
     children: React.ReactNode | (({ isTrigger }: {
         isTrigger: boolean;
     }) => React.ReactNode);
 }
 declare const WishlistSelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
 export { WishlistSelect, WishlistSelectTrigger, WishlistSelectContent, WishlistSelectItem, };
+export type { WishlistSelectStyleConfig };
 //# sourceMappingURL=wishlist-select.d.ts.map

package/dist/components/ui/wishlist-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wishlist-select.d.ts","sourceRoot":"","sources":["../../../components/ui/wishlist-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE/C,UAAU,WAAW,CAAC,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;QAC3B,KAAK,EAAE,CAAC,CAAA;QACR,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;QACrB,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,YAAY,EAAE,YAAY,CAAA;QAC1B,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,YAAY,GACb,EAAE;YACD,SAAS,EAAE,OAAO,CAAA;YAClB,YAAY,EAAE,YAAY,CAAA;SAC3B,KAAK,KAAK,CAAC,SAAS,CAAA;KACtB,CAAC,EAAE,CAAA;IACJ,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;CAC3B;AAED,QAAA,MAAM,cAAc,6FA0HnB,CAAA;AAID,UAAU,kBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,qBAAqB,8FAkBzB,CAAA;AAGF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,qBAAqB,2FAkBzB,CAAA;AAGF,UAAU,eACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACjE;AAED,QAAA,MAAM,kBAAkB,wFAmBvB,CAAA;AAGD,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"wishlist-select.d.ts","sourceRoot":"","sources":["../../../components/ui/wishlist-select.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/wishlist-select.js

@@ -13,9 +13,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronDown } from "lucide-react";
-import { cn } from "../../lib/utils";
+import { cn, getColor } from "../../lib/utils";
 import { CreateNew, Wishlist } from "./wishlist";
-const WishlistSelect = React.forwardRef(({ children, defaultValue, onChange, onOpenChange, onCreateNew, translations, }, ref) => {
+import { Icon } from "./icon";
+const WishlistSelect = React.forwardRef(({ children, defaultValue, onChange, onOpenChange, onCreateNew, translations, styleConfig, }, ref) => {
+    var _a, _b, _c, _d, _e;
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedValue, setSelectedValue] = React.useState(defaultValue);
     const triggerRef = React.useRef(null);
@@ -55,33 +57,107 @@ const WishlistSelect = React.forwardRef(({ children, defaultValue, onChange, onO
     };
     const selectedChild = React.Children.toArray(children).find((child) => React.isValidElement(child) &&
         child.props.value === selectedValue);
-    return (_jsxs("div", Object.assign({ className: "relative", ref: ref }, { children: [_jsxs(WishlistSelectTrigger, Object.assign({ ref: triggerRef, onClick: handleToggle }, { children: [_jsx(WishlistSelectItem, Object.assign({ isTrigger: true }, { children: selectedChild ? (selectedChild.props.children({ isTrigger: true, translations })) : (_jsx(Wishlist, { name: translations["wishlist-multiple-create-text-field-placeholder"], isTrigger: true, translations: translations })) })), _jsx(ChevronDown, { className: cn("h-4 w-4 opacity-50 mr-4 transition-transform duration-200 ease-in-out", isOpen && "transform rotate-180") })] })), _jsxs(WishlistSelectContent, Object.assign({ isOpen: isOpen, ref: contentRef }, { children: [React.Children.map(children, (child) => React.isValidElement(child)
+    return (_jsxs("div", Object.assign({ className: "relative", ref: ref }, { children: [_jsxs(WishlistSelectTrigger, Object.assign({ ref: triggerRef, onClick: handleToggle, styleConfig: styleConfig }, { children: [_jsx(WishlistSelectItem, Object.assign({ isTrigger: true, styleConfig: styleConfig }, { children: selectedChild ? (selectedChild.props.children({ isTrigger: true, translations })) : (_jsx(Wishlist, { name: translations["wishlist-multiple-create-text-field-placeholder"], isTrigger: true, translations: translations, nameStyle: (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.nameTextColor)
+                                ? {
+                                    color: getColor(styleConfig.nameTextColor),
+                                    fontFamily: ((_a = styleConfig.nameFont) === null || _a === void 0 ? void 0 : _a.family) !== "unset"
+                                        ? (_b = styleConfig.nameFont) === null || _b === void 0 ? void 0 : _b.family
+                                        : undefined,
+                                    fontWeight: ((_c = styleConfig.nameFont) === null || _c === void 0 ? void 0 : _c.weight) !== "unset"
+                                        ? (_d = styleConfig.nameFont) === null || _d === void 0 ? void 0 : _d.weight
+                                        : undefined,
+                                    fontSize: styleConfig.nameSize
+                                        ? `${styleConfig.nameSize}px`
+                                        : undefined,
+                                }
+                                : undefined })) })), ((_e = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.dropdownIcon) === null || _e === void 0 ? void 0 : _e.url) ? (_jsx(Icon, { url: styleConfig.dropdownIcon.url, size: styleConfig.dropdownIconSize || "md", color: getColor(styleConfig.dropdownIconColor) ||
+                            "var(--coreColors-secondaryIcon)", className: cn("mr-4 transition-transform duration-200 ease-in-out opacity-50", isOpen && "transform rotate-180") })) : (_jsx(ChevronDown, { className: cn("h-4 w-4 opacity-50 mr-4 transition-transform duration-200 ease-in-out", isOpen && "transform rotate-180"), style: {
+                            color: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.dropdownIconColor) || undefined,
+                            width: (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.dropdownIconSize)
+                                ? `${styleConfig.dropdownIconSize}px`
+                                : undefined,
+                            height: (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.dropdownIconSize)
+                                ? `${styleConfig.dropdownIconSize}px`
+                                : undefined,
+                        } }))] })), _jsxs(WishlistSelectContent, Object.assign({ isOpen: isOpen, ref: contentRef, styleConfig: styleConfig }, { children: [React.Children.map(children, (child) => React.isValidElement(child)
                         ? React.cloneElement(child, {
                             onSelect: () => handleSelect(child.props.value),
                             isSelected: child.props.value === selectedValue,
                             translations,
+                            styleConfig,
                         }, child.props.children({ isTrigger: false, translations }))
-                        : child), _jsx("div", Object.assign({ className: "sticky bottom-0 bg-coreColors-inputBackground border-t border-coreColors-dividingLines" }, { children: _jsx(CreateNew, { onClick: handleCreateNew, translations: translations }) }))] }))] })));
+                        : child), _jsx("div", Object.assign({ className: "sticky bottom-0 border-t", style: {
+                            backgroundColor: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.createNewBackgroundColor) ||
+                                "var(--coreColors-inputBackground)",
+                            borderColor: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.createNewBorderColor) ||
+                                "var(--coreColors-dividingLines)",
+                        } }, { children: _jsx(CreateNew, { onClick: handleCreateNew, translations: translations, styleConfig: styleConfig }) }))] }))] })));
 });
 WishlistSelect.displayName = "WishlistSelect";
 const WishlistSelectTrigger = React.forwardRef((_a, ref) => {
-    var { className, children, isTrigger = false } = _a, props = __rest(_a, ["className", "children", "isTrigger"]);
-    return (_jsx("button", Object.assign({ ref: ref, className: cn("flex w-full items-center justify-between rounded-md border border-coreColors-brandColorPrimary bg-coreColors-inputBackground text-sm placeholder:text-coreColors-brandColorPrimary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), style: {
+    var _b, _c, _d, _e;
+    var { className, children, isTrigger = false, styleConfig } = _a, props = __rest(_a, ["className", "children", "isTrigger", "styleConfig"]);
+    return (_jsx("button", Object.assign({ ref: ref, className: cn("flex w-full items-center justify-between text-sm disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), style: {
             WebkitTapHighlightColor: "transparent",
+            backgroundColor: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.triggerBackgroundColor) ||
+                "var(--coreColors-inputBackground)",
+            borderColor: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.triggerBorderColor) ||
+                "var(--coreColors-brandColorPrimary)",
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderRadius: (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.triggerCornerRadius)
+                ? `${styleConfig.triggerCornerRadius}px`
+                : "6px",
+            paddingTop: ((_b = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.triggerPadding) === null || _b === void 0 ? void 0 : _b.top)
+                ? `${styleConfig.triggerPadding.top}px`
+                : "8px",
+            paddingBottom: ((_c = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.triggerPadding) === null || _c === void 0 ? void 0 : _c.bottom)
+                ? `${styleConfig.triggerPadding.bottom}px`
+                : "8px",
+            paddingLeft: ((_d = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.triggerPadding) === null || _d === void 0 ? void 0 : _d.left)
+                ? `${styleConfig.triggerPadding.left}px`
+                : "12px",
+            paddingRight: ((_e = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.triggerPadding) === null || _e === void 0 ? void 0 : _e.right)
+                ? `${styleConfig.triggerPadding.right}px`
+                : "12px",
         } }, props, { children: children })));
 });
 WishlistSelectTrigger.displayName = "WishlistSelectTrigger";
 const WishlistSelectContent = React.forwardRef((_a, ref) => {
-    var { className, children, isOpen } = _a, props = __rest(_a, ["className", "children", "isOpen"]);
-    return (_jsx("div", Object.assign({ ref: ref, className: cn("mt-1 absolute z-50 w-full max-h-[200px] overflow-y-auto rounded-md bg-coreColors-inputBackground shadow-md border border-coreColors-brandColorPrimary", "transition-all duration-300 ease-in-out", isOpen
+    var { className, children, isOpen, styleConfig } = _a, props = __rest(_a, ["className", "children", "isOpen", "styleConfig"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("mt-1 absolute z-50 w-full overflow-y-auto shadow-md border", "transition-all duration-300 ease-in-out", isOpen
             ? "opacity-100 translate-y-0"
-            : "opacity-0 translate-y-[-10px] pointer-events-none", className) }, props, { children: children })));
+            : "opacity-0 translate-y-[-10px] pointer-events-none", className), style: {
+            backgroundColor: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.contentBackgroundColor) ||
+                "var(--coreColors-inputBackground)",
+            borderColor: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.contentBorderColor) ||
+                "var(--coreColors-brandColorPrimary)",
+            borderRadius: (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.contentCornerRadius)
+                ? `${styleConfig.contentCornerRadius}px`
+                : "6px",
+            maxHeight: (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.contentMaxHeight)
+                ? `${styleConfig.contentMaxHeight}px`
+                : "200px",
+        } }, props, { children: children })));
 });
 WishlistSelectContent.displayName = "WishlistSelectContent";
 const WishlistSelectItem = React.forwardRef((_a, ref) => {
-    var { className, children, onSelect, isSelected, isTrigger } = _a, props = __rest(_a, ["className", "children", "onSelect", "isSelected", "isTrigger"]);
-    return (_jsx("div", Object.assign({ ref: ref, className: cn("relative flex w-full cursor-pointer select-none items-center text-sm outline-none", !isTrigger &&
-            "border-b border-coreColors-dividingLines last:border-b-0", isSelected && "bg-stateColors-skeleton", className), onClick: onSelect }, props, { children: typeof children === "function"
+    var { className, children, onSelect, isSelected, isTrigger, styleConfig } = _a, props = __rest(_a, ["className", "children", "onSelect", "isSelected", "isTrigger", "styleConfig"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("relative flex w-full cursor-pointer select-none items-center text-sm outline-none", !isTrigger && "border-b last:border-b-0", className), style: {
+            backgroundColor: isSelected
+                ? getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.itemSelectedColor) ||
+                    "var(--stateColors-skeleton)"
+                : undefined,
+            borderBottomColor: !isTrigger
+                ? getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.itemDividerColor) ||
+                    "var(--coreColors-dividingLines)"
+                : undefined,
+        }, onClick: onSelect, role: "button", tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+            }
+        } }, props, { children: typeof children === "function"
             ? children({ isTrigger: isTrigger || false })
             : children })));
 });

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

@@ -1,5 +1,29 @@
 import * as React from "react";
+import { Color } from "../../lib/utils";
 import { Translations } from "app-studio-types";
+interface WishlistStyleConfig {
+    nameTextColor?: Color;
+    nameFont?: {
+        family: string;
+        weight: string;
+    };
+    nameSize?: number;
+    countTextColor?: Color;
+    countFont?: {
+        family: string;
+        weight: string;
+    };
+    countSize?: number;
+    createNewTextColor?: Color;
+    defaultImageIcon?: {
+        url: string;
+        assetID?: string | null;
+    };
+    defaultImageBackground?: Color;
+    defaultImageIconColor?: Color;
+    imageLeftBorderRadius?: number;
+    imageRightBorderRadius?: number;
+}
 export interface WishlistProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     name?: string;
     amount?: number;
@@ -15,17 +39,21 @@ export interface WishlistProps extends React.ButtonHTMLAttributes<HTMLButtonElem
     translations: Translations;
     nameStyle?: React.CSSProperties;
     amountStyle?: React.CSSProperties;
+    styleConfig?: WishlistStyleConfig;
 }
-declare const PlaceholderIcon: ({ rightBorderRadius, leftBorderRadius, }: {
+declare const PlaceholderIcon: ({ rightBorderRadius, leftBorderRadius, styleConfig, }: {
     rightBorderRadius?: number | undefined;
     leftBorderRadius?: number | undefined;
+    styleConfig?: WishlistStyleConfig | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const Wishlist: React.ForwardRefExoticComponent<WishlistProps & React.RefAttributes<HTMLButtonElement>>;
 export interface CreateNewProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     selected?: boolean;
     className?: string;
     translations: Translations;
+    styleConfig?: WishlistStyleConfig;
 }
 declare const CreateNew: React.ForwardRefExoticComponent<CreateNewProps & React.RefAttributes<HTMLButtonElement>>;
 export { CreateNew, Wishlist, PlaceholderIcon };
+export type { WishlistStyleConfig };
 //# sourceMappingURL=wishlist.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"wishlist.d.ts","sourceRoot":"","sources":["../../../components/ui/wishlist.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAA;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC/B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAClC;AAED,QAAA,MAAM,eAAe;;;6CAmBpB,CAAA;AAED,QAAA,MAAM,QAAQ,yFA0Fb,CAAA;AAID,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,YAAY,CAAA;CAC3B;AAED,QAAA,MAAM,SAAS,0FAwBd,CAAA;AAID,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"wishlist.d.ts","sourceRoot":"","sources":["../../../components/ui/wishlist.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE/C,UAAU,mBAAmB;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,QAAQ,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,SAAS,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,gBAAgB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAA;IAC3D,sBAAsB,CAAC,EAAE,KAAK,CAAA;IAC9B,qBAAqB,CAAC,EAAE,KAAK,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AACD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAA;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC/B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,WAAW,CAAC,EAAE,mBAAmB,CAAA;CAClC;AAED,QAAA,MAAM,eAAe;;;;6CAsDpB,CAAA;AAED,QAAA,MAAM,QAAQ,yFAmIb,CAAA;AAID,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,CAAC,EAAE,mBAAmB,CAAA;CAClC;AAED,QAAA,MAAM,SAAS,0FAuCd,CAAA;AAID,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;AAC/C,YAAY,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/ui/wishlist.js

@@ -13,36 +13,73 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @next/next/no-img-element */
 import * as React from "react";
 import { Text } from "./text";
-import { cn } from "../../lib/utils";
+import { cn, getColor } from "../../lib/utils";
 import { Icon } from "./icon";
-const PlaceholderIcon = ({ rightBorderRadius, leftBorderRadius, }) => (_jsx("div", Object.assign({ className: "flex items-center justify-center h-10 w-10 bg-stateColors-skeleton rounded-sm", style: {
-        flex: "0 1 auto",
-        borderTopRightRadius: `${rightBorderRadius}px`,
-        borderBottomRightRadius: `${rightBorderRadius}px`,
-        borderTopLeftRadius: `${leftBorderRadius}px`,
-        borderBottomLeftRadius: `${leftBorderRadius}px`,
-    } }, { children: _jsx(Icon, { name: "heart-filled", size: "sm", color: "coreColors-secondaryIcon" }) })));
+const PlaceholderIcon = ({ rightBorderRadius, leftBorderRadius, styleConfig, }) => {
+    var _a;
+    // Use styleConfig border radius if available, otherwise fall back to the passed border radius props
+    const effectiveRightBorderRadius = (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.imageRightBorderRadius) !== undefined
+        ? styleConfig.imageRightBorderRadius
+        : rightBorderRadius !== null && rightBorderRadius !== void 0 ? rightBorderRadius : 4;
+    const effectiveLeftBorderRadius = (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.imageLeftBorderRadius) !== undefined
+        ? styleConfig.imageLeftBorderRadius
+        : leftBorderRadius !== null && leftBorderRadius !== void 0 ? leftBorderRadius : 0;
+    return (_jsx("div", Object.assign({ className: "flex items-center justify-center h-10 w-10", style: {
+            flex: "0 1 auto",
+            backgroundColor: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.defaultImageBackground) ||
+                "var(--stateColors-skeleton)",
+            borderTopRightRadius: `${effectiveRightBorderRadius}px`,
+            borderBottomRightRadius: `${effectiveRightBorderRadius}px`,
+            borderTopLeftRadius: `${effectiveLeftBorderRadius}px`,
+            borderBottomLeftRadius: `${effectiveLeftBorderRadius}px`,
+        } }, { children: ((_a = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.defaultImageIcon) === null || _a === void 0 ? void 0 : _a.url) ? (_jsx(Icon, { url: styleConfig.defaultImageIcon.url, size: "sm", color: getColor(styleConfig.defaultImageIconColor) ||
+                "var(--coreColors-secondaryIcon)" })) : (_jsx(Icon, { name: "heart-filled", size: "sm", color: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.defaultImageIconColor) ||
+                "coreColors-secondaryIcon" })) })));
+};
 const Wishlist = React.forwardRef((_a, ref) => {
-    var { selected = false, onClick, className, name, amount, imgUrl, imgRightBorderRadius = 4, imgLeftBorderRadius = 0, aspectRatio, objectFit, isTrigger, translations, nameStyle, amountStyle } = _a, props = __rest(_a, ["selected", "onClick", "className", "name", "amount", "imgUrl", "imgRightBorderRadius", "imgLeftBorderRadius", "aspectRatio", "objectFit", "isTrigger", "translations", "nameStyle", "amountStyle"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var { selected = false, onClick, className, name, amount, imgUrl, imgRightBorderRadius = 4, imgLeftBorderRadius = 0, aspectRatio, objectFit, isTrigger, translations, nameStyle, amountStyle, styleConfig } = _a, props = __rest(_a, ["selected", "onClick", "className", "name", "amount", "imgUrl", "imgRightBorderRadius", "imgLeftBorderRadius", "aspectRatio", "objectFit", "isTrigger", "translations", "nameStyle", "amountStyle", "styleConfig"]);
+    // Calculate effective border radius values (manifest takes priority)
+    const effectiveRightBorderRadius = (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.imageRightBorderRadius) !== undefined
+        ? styleConfig.imageRightBorderRadius
+        : imgRightBorderRadius !== null && imgRightBorderRadius !== void 0 ? imgRightBorderRadius : 4;
+    const effectiveLeftBorderRadius = (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.imageLeftBorderRadius) !== undefined
+        ? styleConfig.imageLeftBorderRadius
+        : imgLeftBorderRadius !== null && imgLeftBorderRadius !== void 0 ? imgLeftBorderRadius : 0;
     return (_jsxs("button", Object.assign({ className: cn("flex flex-row items-center px-4 py-2 w-full ", selected ? "bg-stateColors-skeleton" : "", className), ref: ref, onClick: onClick }, props, { children: [imgUrl ? (_jsx("div", Object.assign({ className: "h-10 w-10 border border-coreColors-dividingLines overflow-hidden", style: {
                     flex: "0 1 auto",
-                    borderTopRightRadius: `${imgRightBorderRadius}px`,
-                    borderBottomRightRadius: `${imgRightBorderRadius}px`,
-                    borderTopLeftRadius: `${imgLeftBorderRadius}px`,
-                    borderBottomLeftRadius: `${imgLeftBorderRadius}px`,
+                    borderTopRightRadius: `${effectiveRightBorderRadius}px`,
+                    borderBottomRightRadius: `${effectiveRightBorderRadius}px`,
+                    borderTopLeftRadius: `${effectiveLeftBorderRadius}px`,
+                    borderBottomLeftRadius: `${effectiveLeftBorderRadius}px`,
                 } }, { children: _jsx("img", { alt: "wishlist-image", src: `${imgUrl}?width=40`, width: 40, height: 40, className: cn("w-full h-full", objectFit === "contain" ? "object-contain" : "object-cover"), style: {
-                        borderTopRightRadius: `${imgRightBorderRadius}px`,
-                        borderBottomRightRadius: `${imgRightBorderRadius}px`,
-                        borderTopLeftRadius: `${imgLeftBorderRadius}px`,
-                        borderBottomLeftRadius: `${imgLeftBorderRadius}px`,
-                    } }) }))) : (_jsx(PlaceholderIcon, { rightBorderRadius: imgRightBorderRadius, leftBorderRadius: imgLeftBorderRadius })), _jsxs("div", Object.assign({ className: "flex flex-col flex-1 items-start mx-2 overflow-hidden" }, { children: [isTrigger && _jsx(Text, Object.assign({ type: "body-secondary" }, { children: "Wishlists" })), _jsx(Text, Object.assign({ type: "body-secondary", className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-left", style: nameStyle }, { children: name })), !isTrigger && (_jsx(Text, Object.assign({ type: "label", className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-left", style: amountStyle }, { children: `${amount} ${amount !== 1
+                        borderTopRightRadius: `${effectiveRightBorderRadius}px`,
+                        borderBottomRightRadius: `${effectiveRightBorderRadius}px`,
+                        borderTopLeftRadius: `${effectiveLeftBorderRadius}px`,
+                        borderBottomLeftRadius: `${effectiveLeftBorderRadius}px`,
+                    } }) }))) : (_jsx(PlaceholderIcon, { rightBorderRadius: imgRightBorderRadius, leftBorderRadius: imgLeftBorderRadius, styleConfig: styleConfig })), _jsxs("div", Object.assign({ className: "flex flex-col flex-1 items-start mx-2 overflow-hidden" }, { children: [isTrigger && _jsx(Text, Object.assign({ type: "body-secondary" }, { children: "Wishlists" })), _jsx(Text, Object.assign({ type: "body-secondary", className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-left", style: Object.assign(Object.assign({}, nameStyle), { color: (nameStyle === null || nameStyle === void 0 ? void 0 : nameStyle.color) || getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.nameTextColor), fontFamily: ((_b = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.nameFont) === null || _b === void 0 ? void 0 : _b.family) !== "unset"
+                                ? (_c = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.nameFont) === null || _c === void 0 ? void 0 : _c.family
+                                : nameStyle === null || nameStyle === void 0 ? void 0 : nameStyle.fontFamily, fontWeight: ((_d = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.nameFont) === null || _d === void 0 ? void 0 : _d.weight) !== "unset"
+                                ? (_e = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.nameFont) === null || _e === void 0 ? void 0 : _e.weight
+                                : nameStyle === null || nameStyle === void 0 ? void 0 : nameStyle.fontWeight, fontSize: (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.nameSize)
+                                ? `${styleConfig.nameSize}px`
+                                : nameStyle === null || nameStyle === void 0 ? void 0 : nameStyle.fontSize }) }, { children: name })), !isTrigger && (_jsx(Text, Object.assign({ type: "label", className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-left", style: Object.assign(Object.assign({}, amountStyle), { color: (amountStyle === null || amountStyle === void 0 ? void 0 : amountStyle.color) || getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.countTextColor), fontFamily: ((_f = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.countFont) === null || _f === void 0 ? void 0 : _f.family) !== "unset"
+                                ? (_g = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.countFont) === null || _g === void 0 ? void 0 : _g.family
+                                : amountStyle === null || amountStyle === void 0 ? void 0 : amountStyle.fontFamily, fontWeight: ((_h = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.countFont) === null || _h === void 0 ? void 0 : _h.weight) !== "unset"
+                                ? (_j = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.countFont) === null || _j === void 0 ? void 0 : _j.weight
+                                : amountStyle === null || amountStyle === void 0 ? void 0 : amountStyle.fontWeight, fontSize: (styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.countSize)
+                                ? `${styleConfig.countSize}px`
+                                : amountStyle === null || amountStyle === void 0 ? void 0 : amountStyle.fontSize }) }, { children: `${amount} ${amount !== 1
                             ? translations["checkout-summary-items"]
                             : translations["checkout-summary-item"]}` })))] }))] })));
 });
 Wishlist.displayName = "Wishlist";
 const CreateNew = React.forwardRef((_a, ref) => {
-    var { selected = false, onClick, className, translations } = _a, props = __rest(_a, ["selected", "onClick", "className", "translations"]);
-    return (_jsx("button", Object.assign({ className: cn("flex flex-row items-center w-full relative py-2", "active:bg-black/10 transition-colors duration-150", className), ref: ref, onClick: onClick }, props, { children: _jsx("div", Object.assign({ className: "flex flex-col items-center justify-center m-auto space-y-1 overflow-hidden h-10" }, { children: _jsxs(Text, Object.assign({ type: "body-primary", className: "w-full text-center text-coreColors-brandColorPrimary" }, { children: ["+ ", translations["wishlist-dropdown-create-list-button"]] })) })) })));
+    var { selected = false, onClick, className, translations, styleConfig } = _a, props = __rest(_a, ["selected", "onClick", "className", "translations", "styleConfig"]);
+    return (_jsx("button", Object.assign({ className: cn("flex flex-row items-center w-full relative py-2", "active:bg-black/10 transition-colors duration-150", className), ref: ref, onClick: onClick }, props, { children: _jsx("div", Object.assign({ className: "flex flex-col items-center justify-center m-auto space-y-1 overflow-hidden h-10" }, { children: _jsxs(Text, Object.assign({ type: "body-primary", className: "w-full text-center", style: {
+                    color: getColor(styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.createNewTextColor) ||
+                        "var(--coreColors-brandColorPrimary)",
+                } }, { children: ["+ ", translations["wishlist-dropdown-create-list-button"]] })) })) })));
 });
 CreateNew.displayName = "CreateNew";
 export { CreateNew, Wishlist, PlaceholderIcon };

package/dist/lib/state.d.ts

@@ -0,0 +1,3 @@
+declare const useBearStore: any;
+export { useBearStore };
+//# sourceMappingURL=state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../lib/state.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,YAAY,KAYjB,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/lib/state.js

@@ -0,0 +1,9 @@
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+const useBearStore = create()(devtools(persist((set) => ({
+    bears: 0,
+    increase: (by) => set((state) => ({ bears: state.bears + by })),
+}), {
+    name: "bear-storage",
+})));
+export { useBearStore };

package/dist/lib/variablesCart.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variablesCart.util.d.ts","sourceRoot":"","sources":["../../lib/variablesCart.util.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,sBAAsB,EACtB,6BAA6B,EAO9B,MAAM,kBAAkB,CAAA;AAEzB,eAAO,MAAM,2BAA2B;;cAM5B,MAAM;;0BAEI;YAChB,gBAAgB,CAAC,EAAE,MAAM,CAAA;YACzB,KAAK,EAAE,MAAM,CAAA;YACb,cAAc,CAAC,EAAE,MAAM,CAAA;SACxB,EAAE;;;;;;CAyBN,CAAA;AA4FD,eAAO,MAAM,6BAA6B,SAClC,MAAM,QACN,SAAS,GAAG,IAAI,YAUvB,CAAA;AAED,eAAO,MAAM,2BAA2B,SAChC,MAAM,QACN,SAAS,GAAG,IAAI,YAUvB,CAAA;AAoLD,MAAM,MAAM,uBAAuB,GAAG;IACpC,yBAAyB,EAAE,sBAAsB,EAAE,CAAA;IACnD,gBAAgB,EAAE,6BAA6B,EAAE,CAAA;IACjD,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,iCAAiC,EAAE,uBAU/C,CAAA;AAED,eAAO,MAAM,8BAA8B,SACnC,SAAS,GAAG,IAAI,KACrB,uBAmCF,CAAA"}
+{"version":3,"file":"variablesCart.util.d.ts","sourceRoot":"","sources":["../../lib/variablesCart.util.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,sBAAsB,EACtB,6BAA6B,EAO9B,MAAM,kBAAkB,CAAA;AAEzB,eAAO,MAAM,2BAA2B;;cAM5B,MAAM;;0BAEI;YAChB,gBAAgB,CAAC,EAAE,MAAM,CAAA;YACzB,KAAK,EAAE,MAAM,CAAA;YACb,cAAc,CAAC,EAAE,MAAM,CAAA;SACxB,EAAE;;;;;;CAyBN,CAAA;AA4FD,eAAO,MAAM,6BAA6B,SAClC,MAAM,QACN,SAAS,GAAG,IAAI,YAUvB,CAAA;AAED,eAAO,MAAM,2BAA2B,SAChC,MAAM,QACN,SAAS,GAAG,IAAI,YAUvB,CAAA;AAqLD,MAAM,MAAM,uBAAuB,GAAG;IACpC,yBAAyB,EAAE,sBAAsB,EAAE,CAAA;IACnD,gBAAgB,EAAE,6BAA6B,EAAE,CAAA;IACjD,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,iCAAiC,EAAE,uBAU/C,CAAA;AAED,eAAO,MAAM,8BAA8B,SACnC,SAAS,GAAG,IAAI,KACrB,uBAmCF,CAAA"}

package/dist/lib/variablesCart.util.js

@@ -5,9 +5,9 @@ export const getSubscriptionPriceDetails = ({ totalAmount, quantity, sellingPlan
     const isSubscription = ((_a = sellingPlanAllocation === null || sellingPlanAllocation === void 0 ? void 0 : sellingPlanAllocation.priceAdjustments) === null || _a === void 0 ? void 0 : _a.length) > 0;
     if (isSubscription) {
         const { perDeliveryPrice, price, compareAtPrice } = sellingPlanAllocation.priceAdjustments[0];
-        const effectivePrice = perDeliveryPrice || price;
-        const subscriptionUnitPrice = perDeliveryPrice || 0;
-        const effectiveCompareAtPrice = compareAtPrice * quantity || totalAmount || 0;
+        const effectivePrice = (perDeliveryPrice === null || perDeliveryPrice === void 0 ? void 0 : perDeliveryPrice.amount) || price.amount;
+        const subscriptionUnitPrice = (perDeliveryPrice === null || perDeliveryPrice === void 0 ? void 0 : perDeliveryPrice.amount) || 0;
+        const effectiveCompareAtPrice = (compareAtPrice === null || compareAtPrice === void 0 ? void 0 : compareAtPrice.amount) * quantity || totalAmount || 0;
         return {
             price: totalAmount,
             compareAtPrice: effectiveCompareAtPrice,
@@ -133,7 +133,7 @@ const getCompareAtPriceDifference = (cart) => {
     if (!cart)
         return 0;
     return (_a = cart === null || cart === void 0 ? void 0 : cart.items) === null || _a === void 0 ? void 0 : _a.reduce((acc, item) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         /**
          * Regular price details
          */
@@ -144,8 +144,8 @@ const getCompareAtPriceDifference = (cart) => {
          */
         if (((_b = (_a = item === null || item === void 0 ? void 0 : item.sellingPlanAllocation) === null || _a === void 0 ? void 0 : _a.priceAdjustments) === null || _b === void 0 ? void 0 : _b.length) > 0) {
             itemPrice =
-                ((_d = (_c = item === null || item === void 0 ? void 0 : item.sellingPlanAllocation) === null || _c === void 0 ? void 0 : _c.priceAdjustments[0]) === null || _d === void 0 ? void 0 : _d.perDeliveryPrice) ||
-                    ((_f = (_e = item === null || item === void 0 ? void 0 : item.sellingPlanAllocation) === null || _e === void 0 ? void 0 : _e.priceAdjustments[0]) === null || _f === void 0 ? void 0 : _f.price) ||
+                ((_e = (_d = (_c = item === null || item === void 0 ? void 0 : item.sellingPlanAllocation) === null || _c === void 0 ? void 0 : _c.priceAdjustments[0]) === null || _d === void 0 ? void 0 : _d.perDeliveryPrice) === null || _e === void 0 ? void 0 : _e.amount) ||
+                    ((_h = (_g = (_f = item === null || item === void 0 ? void 0 : item.sellingPlanAllocation) === null || _f === void 0 ? void 0 : _f.priceAdjustments[0]) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.amount) ||
                     0;
             const { compareAtPrice } = getSubscriptionPriceDetails({
                 quantity: (item === null || item === void 0 ? void 0 : item.quantity) || 1,

package/dist/lib/variablesCart.util.test.js

@@ -574,9 +574,18 @@ describe("cart-provider.util", () => {
                                 name: "Ski wax subscription, billed and delivered weekly",
                                 priceAdjustments: [
                                     {
-                                        compareAtPrice: 10,
-                                        perDeliveryPrice: 8.5,
-                                        price: 8.5,
+                                        compareAtPrice: {
+                                            amount: 10,
+                                            currencyCode: "USD",
+                                        },
+                                        perDeliveryPrice: {
+                                            amount: 8.5,
+                                            currencyCode: "USD",
+                                        },
+                                        price: {
+                                            amount: 8.5,
+                                            currencyCode: "USD",
+                                        },
                                     },
                                 ],
                             },