@wix/headless-restaurants-olo 0.0.14 → 0.0.16

package/cjs/dist/mappers/operation-mapper.d.ts

@@ -0,0 +1,3 @@
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { Operation } from '../types/operation.js';
+export declare const OperationMapper: (operation: operationsSDK.Operation) => Operation;

package/cjs/dist/mappers/operation-mapper.js

@@ -0,0 +1,95 @@
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { DispatchType } from '../types/fulfillments-types.js';
+const TIME_UNIT_MULTIPLIER = {
+    MINUTES: 1,
+    UNKNOWN_TIME_UNIT: 0,
+    DAYS: 24 * 60,
+    HOURS: 60,
+};
+const getAsapOptionsFromOperation = (operation) => {
+    if (!operation.orderScheduling?.asapOptions) {
+        return;
+    }
+    const { timeRangeOptions, maxTimeOptions } = operation.orderScheduling.asapOptions.preparationTime || {};
+    if (maxTimeOptions &&
+        maxTimeOptions.duration !== null &&
+        maxTimeOptions.duration !== undefined &&
+        maxTimeOptions.timeUnit) {
+        return {
+            maxInMinutes: maxTimeOptions.duration * TIME_UNIT_MULTIPLIER[maxTimeOptions.timeUnit],
+        };
+    }
+    if (timeRangeOptions &&
+        timeRangeOptions.timeUnit &&
+        timeRangeOptions.maxDuration !== undefined &&
+        timeRangeOptions.maxDuration !== null &&
+        timeRangeOptions.minDuration !== undefined &&
+        timeRangeOptions.minDuration !== null) {
+        return {
+            rangeInMinutes: {
+                min: timeRangeOptions.minDuration *
+                    TIME_UNIT_MULTIPLIER[timeRangeOptions.timeUnit],
+                max: timeRangeOptions.maxDuration *
+                    TIME_UNIT_MULTIPLIER[timeRangeOptions.timeUnit],
+            },
+        };
+    }
+};
+function getPreOrderOptions(operation) {
+    if (!operation.orderScheduling?.preorderOptions) {
+        return;
+    }
+    const timeBoundedOptions = operation.orderScheduling?.preorderOptions?.method?.timeBoundedOptions;
+    if (!timeBoundedOptions) {
+        return;
+    }
+    const { maxTimeInAdvance, minTimeInAdvance } = timeBoundedOptions;
+    const max = TIME_UNIT_MULTIPLIER[maxTimeInAdvance?.timeUnit] *
+        maxTimeInAdvance?.duration;
+    const min = TIME_UNIT_MULTIPLIER[minTimeInAdvance?.timeUnit] *
+        minTimeInAdvance?.duration;
+    const timeWindowsOptions = operation.orderScheduling?.preorderOptions?.fulfillmentTimesDisplay
+        ?.timeWindowsOptions;
+    const timeWindowDuration = TIME_UNIT_MULTIPLIER[timeWindowsOptions.timeUnit] *
+        timeWindowsOptions.duration;
+    return {
+        timeInAdvance: { min, max },
+        timeWindowDuration,
+    };
+}
+function getOperationType(operation) {
+    switch (operation.orderScheduling?.type) {
+        case operationsSDK.SchedulingType.PREORDER:
+            return 'PRE_ORDER';
+        case operationsSDK.SchedulingType.ASAP:
+        default:
+            return 'ASAP';
+    }
+}
+export const OperationMapper = (operation) => {
+    const { asapFutureHandlingType, businessDaysAheadHandlingOptions } = operation.orderScheduling?.asapOptions || {};
+    const { daysCount } = businessDaysAheadHandlingOptions || {};
+    const allowAsapFutureHandling = asapFutureHandlingType ===
+        operationsSDK.AsapFutureHandlingType.BUSINESS_DAYS_AHEAD_HANDLING &&
+        Number(daysCount) >= 0;
+    return {
+        id: operation._id || '',
+        name: operation.name || '',
+        // @ts-expect-error - operation is not typed
+        enabled: !!operation.enabled,
+        fulfillmentIds: operation.fulfillmentIds || [],
+        asapOptions: getAsapOptionsFromOperation(operation),
+        preOrderOptions: getPreOrderOptions(operation),
+        operationType: getOperationType(operation),
+        allowAsapFutureHandling,
+        businessDaysAheadHandlingOptions: daysCount ?? undefined,
+        defaultDispatchType: operation.defaultFulfillmentType ===
+            operationsSDK.FulfillmentType.DELIVERY
+            ? DispatchType.DELIVERY
+            : DispatchType.PICKUP,
+        operationGroupId: operation.operationGroupId || '',
+        locationId: operation.businessLocationId || '',
+        // @ts-expect-error - operation is not typed
+        locationDetails: operation.businessLocationDetails,
+    };
+};

package/cjs/dist/react/ItemDetails.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Commerce } from '@wix/ecom/components';
-import { type LineItem } from '@wix/ecom/services';
 import { type AsChildChildren } from '@wix/headless-utils/react';
 import { ItemServiceConfig } from '../services/item-details-service.js';
-import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
 import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
 /**
  * Root component for menu item display and interaction.
@@ -26,136 +25,6 @@ export interface RootProps {
     itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: ({ children, itemDetailsServiceConfig }: RootProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * Displays the item name with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Name />
- * <ItemDetails.Name asChild>
- *   <h2 className="font-heading text-lg" />
- * </ItemDetails.Name>
- * ```
- */
-export interface ItemDetailsNameProps {
-    asChild?: boolean;
-    /** Custom render function when using asChild */
-    children?: AsChildChildren<{
-        name: string;
-    }>;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
-/**
- * Displays the item price with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Price />
- * <ItemDetails.Price asChild>
- *   <span className="font-semibold text-lg" />
- * </ItemDetails.Price>
- * ```
- */
-export interface ItemDetailsPriceProps {
-    asChild?: boolean;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Price: React.ForwardRefExoticComponent<ItemDetailsPriceProps & React.RefAttributes<HTMLElement>>;
-/**
- * Displays the item description with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Description />
- * <ItemDetails.Description asChild>
- *   <p className="text-sm" />
- * </ItemDetails.Description>
- * ```
- */
-export interface ItemDetailsDescriptionProps {
-    asChild?: boolean;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Description: React.ForwardRefExoticComponent<ItemDetailsDescriptionProps & React.RefAttributes<HTMLElement>>;
-/**
- * Wrapper component for CoreItemDetails.ModifierComponent.
- * Renders a single modifier with checkbox functionality.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Modifier>
- *   {({ modifier, isSelected, onToggle }) => (
- *     <div style={{ display: "flex", alignItems: "center" }}>
- *       <CheckboxPrimitive.Root
- *         className="CheckboxRoot"
- *         checked={isSelected}
- *         onCheckedChange={onToggle}
- *         id={modifier._id}
- *       >
- *         <CheckboxPrimitive.Indicator className="CheckboxIndicator">
- *           <CheckIcon />
- *         </CheckboxPrimitive.Indicator>
- *       </CheckboxPrimitive.Root>
- *       <label className="Label" htmlFor={modifier._id}>
- *         {modifier.name}
- *       </label>
- *     </div>
- *   )}
- * </ItemDetails.Modifier>
- * ```
- */
-export interface ItemDetailsModifiersSingleSelectProps {
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }>;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export interface ModifierCheckboxProps {
-    selectedModifierIds: string[];
-    onToggle: (modifierId: string) => void;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-    }>;
-}
-export declare const ModifierCheckbox: React.ForwardRefExoticComponent<ModifierCheckboxProps & React.RefAttributes<HTMLElement>>;
-export interface ModifierRadioProps {
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export declare const ModifierRadio: React.ForwardRefExoticComponent<ModifierRadioProps & React.RefAttributes<HTMLElement>>;
-export declare const ModifiersSingleSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersSingleSelectProps & React.RefAttributes<HTMLElement>>;
-export interface ItemDetailsModifiersMultiSelectProps {
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }>;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersMultiSelectProps & React.RefAttributes<HTMLElement>>;
 /**
  * Wrapper component for CoreItemDetails.VariantsComponent.
  * Renders the variants for the item using Radix UI RadioGroup.
@@ -170,7 +39,9 @@ export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemD
  */
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
+        variant: EnhancedVariant;
         variants: EnhancedVariant[];
+        hasVariants: boolean;
         selectedVariantId?: string;
         onVariantChange?: (variantId: string) => void;
     }>;
@@ -178,37 +49,9 @@ export interface ItemDetailsVariantsProps {
     asChild?: boolean;
     variantNameClassName?: string;
     variantPriceClassName?: string;
+    emptyState?: React.ReactNode;
 }
 export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
-export interface AddToCartActionProps {
-    /** Whether to render as a child component */
-    asChild?: boolean;
-    /** Text label for the button */
-    label: string;
-    /** Custom render function when using asChild */
-    lineItems: LineItem[];
-    /** CSS classes to apply to the button */
-    className?: string;
-    /** Content to display when loading */
-    loadingState?: string | React.ReactNode;
-    children?: React.ReactNode;
-}
-/**
- * Add to Cart button for the menu item.
- * Triggers the action to add the selected item (and its modifiers/variants) to the cart.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails>
- *   <AddToCart
- *     label="Add to Cart"
- *     lineItems={[{ catalogReference: { ... }, quantity: 1 }]}
- *   />
- * </ItemDetails>
- * ```
- */
-export declare const AddToCart: React.ForwardRefExoticComponent<AddToCartActionProps & React.RefAttributes<HTMLButtonElement>>;
 /**
  * Multi-line text input component for special requests or instructions.
  * Provides a textarea for customers to add custom notes or modifications.
@@ -256,7 +99,6 @@ export interface AddToCartButtonProps extends Omit<React.ComponentPropsWithoutRe
     children?: React.ReactNode;
     className?: string;
     label?: string;
-    onClick?: () => void;
 }
 export interface ItemDetailsQuantityProps {
     children: React.ReactNode;

package/cjs/dist/react/ItemDetails.js

@@ -4,8 +4,7 @@ import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Item, Modifier, ModifierGroup, useModifierContext, } from '@wix/headless-restaurants-menus/react';
+import { Item } from '@wix/headless-restaurants-menus/react';
 import * as CoreItemDetails from './core/ItemDetails.js';
 import { AvailabilityStatus, } from '../services/common-types.js';
 var TestIds;
@@ -18,69 +17,19 @@ var TestIds;
     TestIds["itemSpecialRequest"] = "item-special-request";
     TestIds["itemLabels"] = "item-labels";
     TestIds["itemVariants"] = "item-variants";
-    TestIds["itemModifier"] = "item-modifier";
     TestIds["itemAvailability"] = "item-availability";
 })(TestIds || (TestIds = {}));
-const CheckIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z", fill: "currentColor" }) }));
 export const Root = ({ children, itemDetailsServiceConfig }) => {
     return (_jsx(CoreItemDetails.Root, { itemDetailsServiceConfig: itemDetailsServiceConfig, children: ({ item }) => _jsx(Item.Root, { item: item, children: children }) }));
 };
-export const Name = React.forwardRef(({ asChild, children, className, ...rest }, ref) => {
-    return (_jsx(Item.Name, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemName, ...rest, children: children }));
-});
-Name.displayName = 'ItemDetails.Name';
-export const Price = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    return (_jsx(Item.Price, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemPrice, ...rest }));
-});
-Price.displayName = 'ItemDetails.Price';
-export const Description = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    return (_jsx(Item.Description, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemDescription, ...rest }));
-});
-Description.displayName = 'ItemDetails.Description';
-export const ModifierCheckbox = React.forwardRef(({ selectedModifierIds, onToggle, className, asChild, modifierNameClassName, modifierPriceClassName, children, ...rest }) => {
-    const { modifier } = useModifierContext();
-    const isSelected = selectedModifierIds.includes(modifier._id || '');
-    return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-            selectedModifierIds,
-            onToggle,
-        }, ...rest, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, children: _jsx(CheckboxPrimitive.Indicator, { className: "CheckboxIndicator", children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
-});
-ModifierCheckbox.displayName = 'ItemDetails.ModifierCheckbox';
-export const ModifierRadio = React.forwardRef(({ modifierNameClassName, modifierPriceClassName }) => {
-    const { modifier } = useModifierContext();
-    return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(RadioGroupPrimitive.Indicator, { className: "RadioGroupIndicator" }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
-});
-ModifierRadio.displayName = 'ItemDetails.ModifierRadio';
-export const ModifiersSingleSelect = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
-    return (_jsx(CoreItemDetails.ModifiersComponent, { singleSelect: true, children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers }) => {
-            const selectedModifierId = selectedModifierIds.length > 0 ? selectedModifierIds[0] : '';
-            return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-                    selectedModifierIds,
-                    onToggle,
-                    modifierGroup,
-                    modifiers,
-                }, ...rest, children: _jsx(RadioGroupPrimitive.Root, { value: selectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroup.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) }) }));
-        } }));
-});
-ModifiersSingleSelect.displayName = 'ItemDetails.ModifiersSingleSelect';
-export const ModifiersMultiSelect = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
-    return (_jsx(CoreItemDetails.ModifiersComponent, { singleSelect: false, children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers }) => {
-            return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-                    selectedModifierIds,
-                    onToggle,
-                    modifierGroup,
-                    modifiers,
-                }, ...rest, children: _jsx(ModifierGroup.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) }));
-        } }));
-});
-ModifiersMultiSelect.displayName = 'ItemDetails.ModifiersMultiSelect';
-export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, }, ref) => {
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
     return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
             if (!hasVariants) {
-                return null;
+                return emptyState || null;
             }
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, customElementProps: {
                     variants,
+                    hasVariants,
                     selectedVariantId,
                     onVariantChange,
                 }, children: _jsx(RadioGroupPrimitive.Root, { value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id ?? '', children: _jsxs("div", { children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||
@@ -89,29 +38,8 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
         } }));
 });
 Variants.displayName = 'ItemDetails.Variants';
-/**
- * Add to Cart button for the menu item.
- * Triggers the action to add the selected item (and its modifiers/variants) to the cart.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails>
- *   <AddToCart
- *     label="Add to Cart"
- *     lineItems={[{ catalogReference: { ... }, quantity: 1 }]}
- *   />
- * </ItemDetails>
- * ```
- */
-export const AddToCart = React.forwardRef(({ lineItems, className, label, ...props }, ref) => {
-    return (_jsx(Commerce.Actions.AddToCart, { ref: ref, asChild: false, label: label, className: className, lineItems: lineItems, children: props.children }));
-});
-AddToCart.displayName = 'AddToCart';
-export const AddToCartButton = ({ asChild = false, children, className, onClick, label = 'Add to cart', ...props }) => {
-    return (_jsx(CoreItemDetails.LineItemComponent, { children: ({ lineItem }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
-                onClick,
-            }, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children }) })) }));
+export const AddToCartButton = ({ asChild, children, className, label = 'Add to cart', ...props }) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { children: ({ lineItem }) => (_jsx(Commerce.Actions.AddToCart, { asChild: asChild, label: label, className: className, lineItems: [lineItem], ...props, children: children })) }));
 };
 export const Quantity = ({ children }) => {
     return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children })) }));

package/cjs/dist/react/ModifierGroup.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+import { EnhancedModifier, EnhancedModifierGroup } from '@wix/headless-restaurants-menus/services';
+import { RuleTypeMap } from '../services/common-types.js';
+export interface ItemDetailsModifierGroupProps {
+    children: React.ReactNode;
+}
+export interface ModifiersProps {
+    className?: string;
+    asChild?: boolean;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+    children?: AsChildChildren<{
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
+        isSingleSelect: boolean;
+    }>;
+}
+export interface ModifierCheckboxProps {
+    selectedModifierIds: string[];
+    onToggle: (modifierId: string) => void;
+    className?: string;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+export interface ModifierRadioProps {
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+export declare const Root: React.ForwardRefExoticComponent<ItemDetailsModifierGroupProps & React.RefAttributes<HTMLElement>>;
+export declare const Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
+export interface DescriptionProps {
+    ruleTypeMap: RuleTypeMap;
+    className?: string;
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        description: string;
+    }>;
+}
+export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+export interface ErrorProps {
+    ruleTypeMap: RuleTypeMap;
+    className?: string;
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        error: string;
+    }>;
+}
+export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;
+export declare const ModifierGroup: {
+    readonly Root: React.ForwardRefExoticComponent<ItemDetailsModifierGroupProps & React.RefAttributes<HTMLElement>>;
+    readonly Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
+    readonly Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+    readonly Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;
+};

package/cjs/dist/react/ModifierGroup.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Modifier, ModifierGroup as ModifierGroupComponents, useModifierContext, } from '@wix/headless-restaurants-menus/react';
+import { ModifierGroupComponent, ModifiersComponent, Description as DescriptionComponent, GroupError, } from './core/ModifierGroup.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["modifiers"] = "modifiers";
+    TestIds["modifierGroupDescription"] = "modifier-group-description";
+    TestIds["modifierGroupError"] = "modifier-group-error";
+})(TestIds || (TestIds = {}));
+const CheckIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z", fill: "currentColor" }) }));
+export const Root = React.forwardRef(({ children }) => {
+    return _jsx(ModifierGroupComponent, { children: children });
+});
+Root.displayName = 'ItemDetailsModifierGroup.Root';
+export const Modifiers = React.forwardRef(({ className, asChild, modifierNameClassName, modifierPriceClassName, children, }, ref) => {
+    return (_jsx(ModifiersComponent, { children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers, isSingleSelect, singleSelectedModifierId, }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifiers, className: className, customElement: children, customElementProps: {
+                selectedModifierIds,
+                onToggle,
+                modifierGroup,
+                modifiers,
+                isSingleSelect,
+            }, children: isSingleSelect ? (_jsx(RadioGroupPrimitive.Root, { value: singleSelectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) })) : (_jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) })) })) }));
+});
+Modifiers.displayName = 'ItemDetailsModifierGroup.Modifiers';
+const ModifierCheckbox = ({ selectedModifierIds, onToggle, className, modifierNameClassName, modifierPriceClassName, }) => {
+    const { modifier } = useModifierContext();
+    const isSelected = selectedModifierIds.includes(modifier._id || '');
+    return (_jsxs("div", { className: className, style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsx(CheckboxPrimitive.Indicator, { className: "CheckboxIndicator", children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }));
+};
+const ModifierRadio = ({ modifierNameClassName, modifierPriceClassName, }) => {
+    const { modifier } = useModifierContext();
+    return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(RadioGroupPrimitive.Indicator, { className: "RadioGroupIndicator" }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
+};
+export const Description = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+    return (_jsx(DescriptionComponent, { ruleTypeMap: ruleTypeMap, children: ({ description }) => {
+            if (!description) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifierGroupDescription, className: className, customElement: children, customElementProps: { description }, children: _jsx("p", { className: className, children: description }) }));
+        } }));
+});
+Description.displayName = 'ItemDetailsModifierGroup.Description';
+export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+    return (_jsx(GroupError, { ruleTypeMap: ruleTypeMap, children: ({ error }) => {
+            if (!error) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifierGroupError, className: className, customElement: children, customElementProps: { error }, children: _jsx("p", { className: className, children: error }) }));
+        } }));
+});
+Error.displayName = 'ItemDetailsModifierGroup.Error';
+export const ModifierGroup = {
+    Root,
+    Modifiers,
+    Description,
+    Error,
+};

package/cjs/dist/react/OLO.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import { ItemServiceConfig } from '../services/item-details-service.js';
+import { OLOSettingsServiceConfig } from '../services/olo-settings-service.js';
 interface OLORootProps {
     /** The ID of the item to load */
     itemId?: string;
     /** Pre-loaded item service config (optional) */
-    itemServiceConfig?: any;
+    itemServiceConfig?: ItemServiceConfig;
     /** Pre-loaded OLO settings service config (optional) */
-    oloSettingsServiceConfig?: any;
+    oloSettingsServiceConfig?: OLOSettingsServiceConfig;
     /** Children render prop that receives the service state */
     children: React.ReactNode;
 }

package/cjs/dist/react/OLOMenus.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type MenusServiceConfig } from '@wix/headless-restaurants-menus/services';
+declare enum TestIds {
+    menusRoot = "menus-root"
+}
+/**
+ * Menus.Root
+ * Container for the menus context and data loading.
+ * Does not render if there are no menus.
+ */
+export interface MenusRootProps {
+    children: React.ReactNode;
+    config: MenusServiceConfig;
+}
+export declare const Root: React.ForwardRefExoticComponent<MenusRootProps & React.RefAttributes<HTMLElement>>;
+export declare const OLOMenus: {
+    Root: React.ForwardRefExoticComponent<MenusRootProps & React.RefAttributes<HTMLElement>>;
+    TestIds: typeof TestIds;
+};
+export {};

package/cjs/dist/react/OLOMenus.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Menus } from '@wix/headless-restaurants-menus/react';
+import * as CoreOLOMenus from './core/OLOMenus.js';
+// =======================
+// TestIds Enum
+// =======================
+var TestIds;
+(function (TestIds) {
+    // Container Level
+    TestIds["menusRoot"] = "menus-root";
+})(TestIds || (TestIds = {}));
+export const Root = React.forwardRef((props) => {
+    const { children, config } = props;
+    return (_jsx(CoreOLOMenus.Root, { "data-testid": TestIds.menusRoot, config: config, children: (updatedConfig) => (_jsx(Menus.Root, { "data-testid": TestIds.menusRoot, config: updatedConfig, children: children })) }));
+});
+Root.displayName = 'Menus.Root';
+// Compose Menus namespace
+export const OLOMenus = {
+    Root,
+    TestIds,
+};