@hanzo/commerce 7.3.6 → 7.3.7

package/components/checkout/payment-step-form/methods/card.tsx

@@ -70,7 +70,7 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = observer(({
     })()
   }
 
-  const createVerificationDetails = () => {
+  const createVerificationDetails = (): { amount: string; billingContact: { givenName: string; email: string }; currencyCode: string; intent: 'CHARGE' | 'CHARGE_AND_STORE' } => {
     const {name, email} = contactForm.getValues()
     return {
       amount: cmmc.promoAppliedCartTotal.toFixed(2),
@@ -79,7 +79,7 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = observer(({
         email,
       },
       currencyCode: 'USD',
-      intent: 'CHARGE',
+      intent: 'CHARGE' as 'CHARGE',
     }
   }
 

package/dist/components/Icons.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    shoppingCart: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    menu: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    chevronLeft: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    chevronRight: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    spinner: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    check: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    plus: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    minus: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    chevronDown: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    chevronsLeft: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    chevronsRight: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    placeholder: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    trash: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    search: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    barcode: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+};
+export default _default;

package/dist/components/Icons.jsx

@@ -0,0 +1,19 @@
+import { ShoppingCart, Menu, ChevronLeft, ChevronRight, Loader2, Check, Plus, Minus, ChevronDown, ChevronsLeft, ChevronsRight, Image, Trash2, Search, Barcode } from "lucide-react";
+export default {
+    shoppingCart: ShoppingCart,
+    menu: Menu,
+    chevronLeft: ChevronLeft,
+    chevronRight: ChevronRight,
+    spinner: Loader2,
+    check: Check,
+    plus: Plus,
+    minus: Minus,
+    chevronDown: ChevronDown,
+    chevronsLeft: ChevronsLeft,
+    chevronsRight: ChevronsRight,
+    placeholder: Image,
+    trash: Trash2,
+    search: Search,
+    barcode: Barcode
+};
+//# sourceMappingURL=Icons.jsx.map

package/dist/components/Icons.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.jsx","sourceRoot":"","sources":["../../components/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACR,MAAM,cAAc,CAAA;AAErB,eAAe;IACb,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,KAAK;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;CACjB,CAAA"}

package/dist/components/add-to-cart-widget.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { LineItem } from '../types';
+declare const AddToCartWidget: React.FC<{
+    item: LineItem;
+    disabled?: boolean;
+    className?: string;
+    buttonClx?: string;
+    variant?: 'minimal' | 'primary' | 'primary-smaller' | 'outline';
+    onQuantityChanged?: (sku: string, oldV: number, newV: number) => void;
+}>;
+export default AddToCartWidget;

package/dist/components/add-to-cart-widget.jsx

@@ -0,0 +1,99 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Button, buttonVariants } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+import Icons from './Icons';
+import { sendFBEvent, sendGAEvent } from '../util/analytics';
+const AddToCartWidget = observer(({ item, variant = 'primary', disabled = false, className = '', buttonClx = '', onQuantityChanged }) => {
+    const reactionDisposer = useRef(undefined);
+    useEffect(() => {
+        if (onQuantityChanged) {
+            reactionDisposer.current = reaction(() => (item.quantity), (quantity, previous) => {
+                onQuantityChanged(item.sku, quantity, previous);
+            });
+        }
+        return () => {
+            if (reactionDisposer.current) {
+                reactionDisposer.current();
+            }
+        };
+    }, []);
+    const ROUNDED_VAL = 'lg';
+    // no need to safelist, since its used widely
+    const ROUNDED_CLX = ` rounded-${ROUNDED_VAL} `;
+    const ghost = variant === 'minimal';
+    const outline = variant === 'outline';
+    const primary = variant === 'primary';
+    const priSmaller = variant === 'primary-smaller';
+    let iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 ' : (priSmaller ? 'h-4 w-6 px-0.5 opacity-70' : 'h-5 w-7 px-1 opacity-70 ');
+    iconClx += ghost ? 'group-hover:text-foreground' : 'group-hover:opacity-100';
+    let digitClx = ghost ? 'px-2 md:px-0.5 ' : 'sm:px-2 font-semibold ';
+    digitClx += (ghost || outline) ? 'text-foreground ' : 'text-primary-fg ';
+    if (disabled) {
+        return (<div className={cn('flex flex-row items-stretch' + ROUNDED_CLX + (!(primary || priSmaller) ? 'bg-transparent' : 'bg-primary'), className)}>
+        <div className={'text-sm flex items-center cursor-default ' + digitClx}>{item.quantity}</div>
+      </div>);
+    }
+    const inc = (event) => {
+        item.increment();
+        event.stopPropagation(); // in case we're part of a larger selection UI
+        sendGAEvent('add_to_cart', {
+            items: [{
+                    item_id: item.sku,
+                    item_name: item.title,
+                    item_category: item.familyId,
+                    price: item.price,
+                    quantity: item.quantity
+                }],
+            value: item.price,
+            currency: 'USD',
+        });
+        sendFBEvent('AddToCart', {
+            content_ids: [item.sku],
+            contents: [{
+                    id: item.sku,
+                    quantity: item.quantity
+                }],
+            content_name: item.title,
+            value: item.price,
+            currency: 'USD',
+        });
+    };
+    const dec = (event) => {
+        item.decrement();
+        event.stopPropagation(); // in case we're part of a larger selection UI
+        sendGAEvent('remove_from_cart', {
+            items: [{
+                    item_id: item.sku,
+                    item_name: item.title,
+                    item_category: item.familyId,
+                    price: item.price,
+                    quantity: item.quantity
+                }],
+            value: item.price,
+            currency: 'USD',
+        });
+    };
+    return (item.isInCart ? (<div className={cn('flex flex-row items-stretch justify-between ', 
+        // should match 'xs' and 'default' button heights
+        (ghost || priSmaller ? 'h-8' : 'h-9'), ROUNDED_CLX, (primary || priSmaller ? 'bg-primary' : 'bg-transparent'), (outline ? 'border border-muted' : ''), className)}>
+      <Button aria-label={'Remove a ' + item.title + ' from the cart'} size={ghost || priSmaller ? 'xs' : 'default'} variant={primary || priSmaller ? 'primary' : 'ghost'} rounded={ghost ? 'full' : ROUNDED_VAL} className={cn('lg:min-w-0 lg:px-2 grow justify-start group', (ghost || priSmaller ? 'px-1' : 'px-2'), (outline ? 'hover:bg-transparent' : ''), buttonClx, 'h-auto self-stretch' // must be smaller than normal
+        )} key='left' onClick={dec}>
+      {(item.quantity > 1) ? (<Icons.minus className={iconClx} aria-hidden='true'/>) : (<Icons.trash className={iconClx} aria-hidden='true'/>)}
+      </Button>
+        <div className={cn('grow-0 shrink-0 flex items-center cursor-default xs:px-2', priSmaller || ghost ? 'text-xs' : 'text-sm', digitClx)}>
+          {item.quantity}{ghost ? '' : ' in Bag'}
+        </div>
+      <Button aria-label={'Add another ' + item.title + ' to the cart'} size={ghost || priSmaller ? 'xs' : 'default'} variant={primary || priSmaller ? 'primary' : 'ghost'} rounded={ghost ? 'full' : ROUNDED_VAL} className={cn('lg:min-w-0 lg:px-2 grow justify-end group', (ghost || priSmaller ? 'px-1' : 'px-2'), (outline ? 'hover:bg-transparent' : ''), buttonClx, 'h-auto self-stretch' // must be smaller than normal
+        )} onClick={inc} key='right'>
+        <Icons.plus className={iconClx} aria-hidden='true'/>
+      </Button>
+    </div>) : (<Button aria-label={'Add a ' + item.title + ' to cart'} size={ghost || priSmaller ? 'xs' : 'default'} variant={ghost ? 'ghost' : (primary || priSmaller ? 'primary' : 'outline')} rounded={ROUNDED_VAL} className={cn(buttonClx, className)} onClick={inc}>
+      <span className='m1-1'>Add</span>
+      <Icons.plus className='h-5 w-5 ml-1' aria-hidden='true'/>
+    </Button>));
+});
+export default AddToCartWidget;
+//# sourceMappingURL=add-to-cart-widget.jsx.map

package/dist/components/add-to-cart-widget.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-to-cart-widget.jsx","sourceRoot":"","sources":["../../components/add-to-cart-widget.tsx"],"names":[],"mappings":"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"}

package/dist/components/buy/buy-card.d.ts

@@ -0,0 +1,30 @@
+import React, { type ComponentType } from 'react';
+import type { ItemSelectorProps, ItemSelectorCompProps } from '../../types';
+declare const BuyCard: React.FC<{
+    skuPath: string;
+    /** For any selectors that show a list of choices,
+     * starting with 'scrollAfter' elements,
+     * the list will scroll, and the card will
+     * have 'scrollHeightClx' applied to it to define and fix the height.
+     * This is most like something like '80vh'
+     * defaults are '5' and 'h-[70vh]'
+     * */
+    scrollAfter?: number;
+    scrollHeightClx?: string;
+    clx?: string;
+    famWidgetClx?: string;
+    addWidgetClx?: string;
+    selector: ComponentType<ItemSelectorProps>;
+    selectorProps?: ItemSelectorCompProps;
+    /** Show all items from all sibling families
+     * If skuPath defines a Family, the first of it's items will
+     * be selected. The facet widget will just select a the first
+     * item in the chosen Family without changings the overall set
+     * of choices. */
+    allVariants?: boolean;
+    familyTabAs?: 'image' | 'label' | 'image-and-label';
+    showItemMedia?: boolean;
+    onQuantityChanged?: (sku: string, oldV: number, newV: number) => void;
+    mobile?: boolean;
+}>;
+export default BuyCard;

package/dist/components/buy/buy-card.jsx

@@ -0,0 +1,123 @@
+'use client';
+import React, { useRef, useEffect } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { cn } from '@hanzo/ui/util';
+import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives';
+import { useCommerce } from '../../service/context';
+import * as pathUtils from '../../service/path-utils';
+import { getFacetValuesMutator, ObsStringMutator } from '../../util';
+import NodeTabs from '../node-tabs';
+import AddToCartWidget from '../add-to-cart-widget';
+const BuyCard = observer(({ skuPath, scrollAfter = 5, scrollHeightClx = 'h-[80vh]', clx = '', famWidgetClx = '', addWidgetClx = '', selector: Selector, selectorProps = {
+    clx: '',
+    soleItemClx: '',
+    itemClx: '',
+    ext: {}
+}, familyTabAs = 'image-and-label', showItemMedia = true, allVariants = false, mobile = false, onQuantityChanged, }) => {
+    const cmmc = useCommerce();
+    const inst = useRef(undefined);
+    useEffect(() => {
+        let requestedFamily = cmmc.getFamilyById(skuPath);
+        let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath);
+        let initialFamily = undefined;
+        const { paths, level } = pathUtils.getSelectedPaths(skuPath);
+        if (level === 0) {
+            throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!');
+        }
+        if (requestedFamily) {
+            if (allVariants && level >= 2) {
+                // select all siblings of requestedFamily.
+                // ie, go one level back
+                delete paths[level];
+                initialFamily = requestedFamily;
+                requestedFamily = undefined;
+                requestedNode = cmmc.getNodeAtPath(pathUtils.getParentPath(skuPath));
+            }
+        }
+        else {
+            // select siblings paths
+            if (allVariants) {
+                paths[level + 1] = [...requestedNode.subNodes.map((node) => (node.skuToken))];
+            }
+            // Actually select the the first fam at the fam level, 
+            else {
+                paths[level + 1] = [requestedNode.subNodes[0].skuToken];
+            }
+        }
+        const selectedFams = cmmc.selectPaths(paths);
+        initialFamily = initialFamily ? initialFamily : (requestedFamily ? requestedFamily : selectedFams[0]);
+        cmmc.setCurrentItem(initialFamily.products[0].sku);
+        const currentFamTokenMutator = new ObsStringMutator(pathUtils.lastToken(initialFamily.id));
+        inst.current = {
+            level,
+            requestedFamily,
+            requestedNode,
+            currentFamTokenMutator,
+            disposers: []
+        };
+        if (!allVariants) {
+            inst.current?.disposers.push(reaction(() => {
+                const fams = cmmc.selectedFamilies;
+                return (fams.length > 0) ? fams[0].id : undefined;
+            }, (famId) => {
+                if (famId && famId !== cmmc.currentItem?.familyId) {
+                    const fam = cmmc.getFamilyById(famId);
+                    if (fam) {
+                        cmmc.setCurrentItem(fam.products[0].sku);
+                    }
+                }
+            }));
+        }
+        return () => {
+            inst.current?.disposers.forEach((d) => { d(); });
+        };
+    }, []);
+    const setFamilyPath = (pathValue) => {
+        if (inst.current?.currentFamTokenMutator.get() !== pathValue) {
+            inst.current?.currentFamTokenMutator.set(pathValue);
+        }
+        const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue)));
+        if (found) {
+            cmmc.setCurrentItem(found.sku);
+        }
+    };
+    const selectSku = (sku) => {
+        cmmc.setCurrentItem(sku);
+        const pathValue = pathUtils.lastToken(cmmc.currentItem.familyId);
+        if (pathValue !== inst.current?.currentFamTokenMutator.get()) {
+            inst.current?.currentFamTokenMutator.set(pathValue);
+        }
+    };
+    const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies[0].title;
+    const itemsToShow = (!cmmc.hasSelection) ? undefined :
+        allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products;
+    const TitleArea = ({ title, byline, clx = '' }) => (<ApplyTypography className={clx}>
+      <h3>{title}</h3>
+      {byline && (<h6>{byline}</h6>)}
+    </ApplyTypography>);
+    const scroll = !!(itemsToShow && itemsToShow.length > scrollAfter);
+    return (<div className={cn('px-4 md:px-6 pt-3 pb-4 flex flex-col items-center min-h-[60vh]', clx, scroll ? scrollHeightClx : 'h-auto')}>
+    {inst.current?.requestedNode && (<>
+      <ApplyTypography className={'mb-2 ' + (scroll ? 'shrink-0' : '')}>
+        <h3>{inst.current.requestedNode.label}</h3>
+        {inst.current.requestedNode.subNodesLabel && (<h6 className='!text-center font-bold text-muted mt-3'>{inst.current.requestedNode.subNodesLabel}</h6>)}
+      </ApplyTypography>
+      <NodeTabs className={cn('grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.subNodes.length}`, 'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
+            (scroll ? 'shrink-0' : ''), famWidgetClx)} mobile={mobile} mutator={allVariants ?
+                {
+                    get: () => (inst.current.currentFamTokenMutator.get()),
+                    set: setFamilyPath
+                }
+                :
+                    getFacetValuesMutator(inst.current.level + 1, cmmc)} itemClx='flex-col h-auto gap-0 py-1 px-3' buttonClx={'h-full ' +
+                '!border-level-3'} levelNodes={inst.current.requestedNode.subNodes} show={familyTabAs}/>
+    </>)} 
+    {!inst.current?.requestedNode && famTitle && (<TitleArea title={famTitle} clx=''/>)}
+    {(cmmc.currentItem && showItemMedia) && (<MediaStack media={cmmc.currentItem} constrainTo={{ w: 200, h: 200 }} clx={(scroll ? 'shrink-0' : '')}/>)} 
+    {itemsToShow && (<Selector items={itemsToShow} selectedItemRef={cmmc} selectSku={selectSku} {...selectorProps} scrollable={scroll}/>)}
+    {(cmmc.currentItem) && (<AddToCartWidget item={cmmc.currentItem} onQuantityChanged={onQuantityChanged} className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}/>)} 
+    </div>);
+});
+export default BuyCard;
+//# sourceMappingURL=buy-card.jsx.map

package/dist/components/buy/buy-card.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"buy-card.jsx","sourceRoot":"","sources":["../../../components/buy/buy-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/buy/carousel-buy-card.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const CarouselBuyCard: React.FC<{
+    skuPath: string;
+    checkoutButton: React.ReactNode;
+    clx?: string;
+    selectorClx?: string;
+    addBtnClx?: string;
+    buttonsAreaClx?: string;
+    mobile?: boolean;
+    onQuantityChanged?: (sku: string, oldV: number, newV: number) => void;
+}>;
+export default CarouselBuyCard;

package/dist/components/buy/carousel-buy-card.jsx

@@ -0,0 +1,99 @@
+'use client';
+import React, { useRef, useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '@hanzo/ui/util';
+import { useCommerce } from '../../service/context';
+import { getSelectionUISpecifier } from '../../util';
+import { CarouselItemSelector, ButtonItemSelector } from '../item-selector';
+import SingleFamilySelector from './single-family-selector';
+import { FamilyCarousel, AllVariantsCarousel } from './multi-family';
+import AddToCartWidget from '../add-to-cart-widget';
+const SCROLL = {
+    scrollAfter: 5,
+    scrollHeightClx: 'h-[65vh]'
+};
+const MEDIA_CONSTRAINT = { w: 200, h: 200 };
+const sortItems = (items, sort) => (((sort === 'asc') ?
+    items.sort((a, b) => (a.price - b.price))
+    :
+        ((sort === 'desc') ?
+            items.sort((a, b) => (b.price - a.price))
+            :
+                items)));
+const CarouselBuyCard = ({ skuPath, checkoutButton, clx = '', selectorClx = '', addBtnClx = '', buttonsAreaClx = '', mobile = false, onQuantityChanged, }) => {
+    const cmmc = useCommerce();
+    const r = useRef(undefined);
+    const [changeMeToRerender, setChangeMeToRerender] = useState(false);
+    useEffect(() => {
+        if (!skuPath || skuPath.length === 0) {
+            // The component is being hidden (w an amination)
+            // keep things the same so no layout jump
+            return;
+        }
+        const peek = cmmc.peek(skuPath);
+        if (typeof peek === 'string') {
+            throw new Error(peek);
+        }
+        if (peek.role === 'non-outermost') {
+            throw new Error(`BuyCard: skuPath ${skuPath} isn't an outermost tree node or product family!`);
+        }
+        const uiSpec = getSelectionUISpecifier(skuPath);
+        r.current = {
+            ...peek,
+            node: peek.node, // else exception was thrown.
+            uiSpec,
+        };
+        if (peek.role === 'single-family') {
+            const sort = () => {
+                const options = uiSpec.singleFamily?.options ?? {};
+                const showSlider = 'showSlider' in options ? options.showSlider : true;
+                return ('sort' in options) ?
+                    options.sort
+                    :
+                        (showSlider ? 'asc' : 'none');
+            };
+            const items = peek.family.products;
+            const Selector = (uiSpec.singleFamily?.type === 'buttons') ? ButtonItemSelector : CarouselItemSelector;
+            const selOptions = uiSpec.singleFamily?.options;
+            r.current.single = {
+                items: sortItems(items, sort()),
+                Selector,
+                selOptions,
+                scrollable: !!(items.length > SCROLL.scrollAfter),
+                showItemMedia: uiSpec.singleFamily?.type !== 'carousel'
+            };
+            const currItem = peek.item ?? r.current.single.items[0];
+            cmmc.setCurrentItem(currItem.sku);
+        }
+        else {
+            const initialFamily = peek.family ? peek.family : peek.families[0];
+            // TODO: Does this ever need to be sorted??
+            const currItem = peek.item ?? initialFamily.products[0];
+            // sets currentFamily as well
+            cmmc.setCurrentItem(currItem.sku);
+            r.current.multi = {
+                Selector: (uiSpec.multiFamily?.type === 'family-carousel') ?
+                    FamilyCarousel
+                    :
+                        AllVariantsCarousel,
+                itemOptions: uiSpec.multiFamily?.itemOptions,
+                selectorOptions: uiSpec.multiFamily?.selectorOptions,
+                initialFamilyId: initialFamily.id
+            };
+        }
+        // Must do this since Dialog code takes this comp out of the React shadow DOM
+        // (only in prod apparently.)
+        setChangeMeToRerender(!changeMeToRerender);
+    }, [skuPath]);
+    const MultiFamilyUI = ({ Selector, itemOptions, selectorOptions, families, parent, clx = '' }) => (<Selector families={families} parent={parent} clx={clx} itemOptions={itemOptions} selectorOptions={selectorOptions} mediaConstraint={MEDIA_CONSTRAINT} mobile={mobile}/>);
+    const Buttons = observer(({ clx = '' }) => (cmmc.currentItem ? (<div className={clx}>
+      <AddToCartWidget item={cmmc.currentItem} onQuantityChanged={onQuantityChanged} variant={cmmc.cartEmpty ? 'primary' : 'outline'} className={addBtnClx}/>
+      {!cmmc.cartEmpty && checkoutButton}
+    </div>) : null));
+    return (<div className={cn('px-4 md:px-6 pt-3 pb-4 flex flex-col gap-1 items-center', r.current?.single?.scrollable ? SCROLL.scrollHeightClx : 'h-auto', clx)}>
+      {r.current?.single ? (<SingleFamilySelector {...r.current.single} mediaConstraint={MEDIA_CONSTRAINT} mobile={mobile} clx={selectorClx}/>) : (r.current?.multi && r.current.families && /* safegaurd for first render, etc. */ (<MultiFamilyUI {...r.current.multi} families={r.current.families} parent={r.current.node} clx={selectorClx}/>))}
+      <Buttons clx={cn('self-stretch mt-8 flex flex-col items-center gap-3 shrink-0 grow-0', buttonsAreaClx)}/>
+    </div>);
+};
+export default CarouselBuyCard;
+//# sourceMappingURL=carousel-buy-card.jsx.map

package/dist/components/buy/carousel-buy-card.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-buy-card.jsx","sourceRoot":"","sources":["../../../components/buy/carousel-buy-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/buy/multi-family/all-variants-carousel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { MultiFamilySelectorProps } from '../../../types';
+declare const AllVariantsCarousel: React.FC<MultiFamilySelectorProps>;
+export { AllVariantsCarousel as default };