@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/product/components/ProductVariants/VariantAvailability.js

@@ -10,6 +10,7 @@ import styles from "./VariantAvailability.style";
  * @param {Object} availability availability
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const VariantAvailability = ({
   availability
 }) => {
@@ -20,14 +21,15 @@ const VariantAvailability = ({
     state,
     text
   } = availability;
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY,
-    portalProps: availability
-  }, /*#__PURE__*/React.createElement(Availability, {
-    className: styles,
-    state: state,
-    text: text
-  }));
+    portalProps: availability,
+    children: /*#__PURE__*/_jsx(Availability, {
+      className: styles,
+      state: state,
+      text: text
+    })
+  });
 };
 VariantAvailability.defaultProps = {
   availability: null

package/product/components/QuantityPicker/index.js

@@ -5,6 +5,7 @@ import { logger } from "../../../core/helpers";
 import { useWidgetStyles } from "../../../core/hooks";
 import { I18n, SheetDrawer, SheetList } from "../../../components";
 import { useQuantityRange } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 let deprecationWarning = 'QuantityPicker is deprecated in favor of the UnitQuantityPicker component.\nUnitQuantityPicker now additionally supports units and floating point values.';
 
 /** */
@@ -90,18 +91,20 @@ const QuantityPicker = ({
     max
   } = quantityRange;
   const items = Array(max - min + 1).fill(min).map((v, index) => String(v + index));
-  return /*#__PURE__*/React.createElement(SheetDrawer, {
-    title: /*#__PURE__*/React.createElement(I18n.Text, {
+  return /*#__PURE__*/_jsx(SheetDrawer, {
+    title: /*#__PURE__*/_jsx(I18n.Text, {
       string: "product.quantity"
     }),
     isOpen: opened,
     onClose: handleCloseSheet,
-    contentClassName: css(styles.sheet).toString()
-  }, /*#__PURE__*/React.createElement(SheetList, null, items.map(item => /*#__PURE__*/React.createElement(SheetList.Item, {
-    title: item,
-    key: item,
-    onClick: () => handleSelectQuantity(parseInt(item, 10))
-  }))));
+    contentClassName: css(styles.sheet).toString(),
+    children: /*#__PURE__*/_jsx(SheetList, {
+      children: items.map(item => /*#__PURE__*/_jsx(SheetList.Item, {
+        title: item,
+        onClick: () => handleSelectQuantity(parseInt(item, 10))
+      }, item))
+    })
+  });
 };
 QuantityPicker.defaultProps = {
   stock: null

package/product/components/Rating/index.js

@@ -7,6 +7,7 @@ import RatingCount from '@shopgate/engage/reviews/components/Reviews/components/
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { container } from "./style";
 import connect from "./connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   hasReviews
 } = appConfig;
@@ -42,19 +43,21 @@ const Rating = ({
     }
     return false;
   }, [rating, showEmptyRatingStars]);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_RATING
-  }, showRatings && /*#__PURE__*/React.createElement("div", {
-    className: container,
-    onClick: scrollToRating,
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement(RatingStars, {
-    value: rating.average,
-    display: "big"
-  }), /*#__PURE__*/React.createElement(RatingCount, {
-    count: rating.count,
-    prominent: true
-  })));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PRODUCT_RATING,
+    children: showRatings && /*#__PURE__*/_jsxs("div", {
+      className: container,
+      onClick: scrollToRating,
+      role: "presentation",
+      children: [/*#__PURE__*/_jsx(RatingStars, {
+        value: rating.average,
+        display: "big"
+      }), /*#__PURE__*/_jsx(RatingCount, {
+        count: rating.count,
+        prominent: true
+      })]
+    })
+  });
 };
 Rating.defaultProps = {
   rating: null

package/product/components/Rating/spec.js

@@ -6,6 +6,7 @@ import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOpti
 import { setMocks, mockedStateWithTwoReviews, mockedStateWithoutReview } from '@shopgate/pwa-common-commerce/reviews/mock';
 import Rating from "./index";
 import { getElementById } from "./mock";
+import { jsx as _jsx } from "react/jsx-runtime";
 setMocks();
 jest.mock('@shopgate/engage/components');
 describe('Rating (product header)', () => {
@@ -16,11 +17,12 @@ describe('Rating (product header)', () => {
    * @param {Object} state State
    * @returns {Object}
    */
-  const getComponent = state => mount(/*#__PURE__*/React.createElement(Provider, {
-    store: mockedStore(state)
-  }, /*#__PURE__*/React.createElement(Rating, {
-    productId: "foo"
-  })), mockRenderOptions);
+  const getComponent = state => mount(/*#__PURE__*/_jsx(Provider, {
+    store: mockedStore(state),
+    children: /*#__PURE__*/_jsx(Rating, {
+      productId: "foo"
+    })
+  }), mockRenderOptions);
   describe('Rendering', () => {
     it('should render rating when data is available', () => {
       const component = getComponent(mockedStateWithTwoReviews);

package/product/components/RelationsSlider/RelationsSheet.js

@@ -10,6 +10,7 @@ import connect from "./RelationsSheet.connector";
  * Shows a Sheet Drawer with all related products.
  * @returns {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const RelationsSheet = /*#__PURE__*/memo(({
   products: {
     products
@@ -29,22 +30,27 @@ const RelationsSheet = /*#__PURE__*/memo(({
   const handleClose = useCallback(() => {
     setShow(false);
   }, []);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleOpen,
-    flat: true,
-    className: showMore
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "product.relations.showMore"
-  })), /*#__PURE__*/React.createElement(SheetDrawer, {
-    isOpen: show,
-    title: headline,
-    onClose: handleClose
-  }, /*#__PURE__*/React.createElement("div", {
-    className: sheet
-  }, /*#__PURE__*/React.createElement(ProductGrid, {
-    products: products,
-    infiniteLoad: false
-  }))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: handleOpen,
+      flat: true,
+      className: showMore,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "product.relations.showMore"
+      })
+    }), /*#__PURE__*/_jsx(SheetDrawer, {
+      isOpen: show,
+      title: headline,
+      onClose: handleClose,
+      children: /*#__PURE__*/_jsx("div", {
+        className: sheet,
+        children: /*#__PURE__*/_jsx(ProductGrid, {
+          products: products,
+          infiniteLoad: false
+        })
+      })
+    })]
+  });
 });
 RelationsSheet.defaultProps = {
   products: {

package/product/components/RelationsSlider/RelationsSlider.js

@@ -9,6 +9,7 @@ import { WIDGET_ID } from "./constants";
  * @param {string} desiredPosition The position the relations slider needs to render.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const RelationsSlider = ({
   desiredPosition
 }) => {
@@ -22,7 +23,7 @@ const RelationsSlider = ({
   if (!type || position !== desiredPosition) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(RelationsSliderContent, {
+  return /*#__PURE__*/_jsx(RelationsSliderContent, {
     productId: productId,
     type: type,
     max: 10,

package/product/components/RelationsSlider/RelationsSliderContent.js

@@ -12,6 +12,7 @@ import * as styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RelationsSliderContent = /*#__PURE__*/memo(({
   products: {
     products,
@@ -37,31 +38,35 @@ const RelationsSliderContent = /*#__PURE__*/memo(({
   if (products.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, !!headline && /*#__PURE__*/React.createElement("h3", {
-    className: styles.headline
-  }, headline), !!showMoreButton && productsCount > 10 && /*#__PURE__*/React.createElement(RelationsSheet, {
-    limit: 100,
-    productId: productId,
-    type: type
-  }), /*#__PURE__*/React.createElement(Swiper, {
-    slidesPerView: slidesPerView,
-    classNames: {
-      container: styles.sliderContainer
-    }
-  }, products.map(product => /*#__PURE__*/React.createElement(Swiper.Item, {
-    key: product.id,
-    className: styles.sliderItem
-  }, /*#__PURE__*/React.createElement(Card, {
-    className: styles.card
-  }, /*#__PURE__*/React.createElement(ProductCard, {
-    product: product,
-    hidePrice: hidePrice,
-    hideName: false,
-    hideRating: hideRating,
-    titleRows: titleRows
-  }))))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.container,
+    children: [!!headline && /*#__PURE__*/_jsx("h3", {
+      className: styles.headline,
+      children: headline
+    }), !!showMoreButton && productsCount > 10 && /*#__PURE__*/_jsx(RelationsSheet, {
+      limit: 100,
+      productId: productId,
+      type: type
+    }), /*#__PURE__*/_jsx(Swiper, {
+      slidesPerView: slidesPerView,
+      classNames: {
+        container: styles.sliderContainer
+      },
+      children: products.map(product => /*#__PURE__*/_jsx(Swiper.Item, {
+        className: styles.sliderItem,
+        children: /*#__PURE__*/_jsx(Card, {
+          className: styles.card,
+          children: /*#__PURE__*/_jsx(ProductCard, {
+            product: product,
+            hidePrice: hidePrice,
+            hideName: false,
+            hideRating: hideRating,
+            titleRows: titleRows
+          })
+        })
+      }, product.id))
+    })]
+  });
 });
 RelationsSliderContent.defaultProps = {
   products: {

package/product/components/Swatch/Swatch.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from 'glamor';
 import { useWidgetStyles } from "../../../core";
 import SwatchContent from "./SwatchContent";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const WIDGET_ID = '@shopgate/engage/product/Swatch';
 
 /**
@@ -22,7 +23,7 @@ const Swatch = ({
     item: styles && styles.item ? css(styles.item).toString() : null,
     itemSelected: styles && styles.itemSelected ? css(styles.itemSelected).toString() : null
   };
-  return /*#__PURE__*/React.createElement(SwatchContent, {
+  return /*#__PURE__*/_jsx(SwatchContent, {
     swatch: swatch,
     classNames: classNames
   });

package/product/components/Swatch/SwatchContent.js

@@ -11,6 +11,7 @@ import { swatchClass, itemClass, itemSelectedClass } from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SwatchContent = ({
   swatch,
   classNames,
@@ -19,33 +20,34 @@ const SwatchContent = ({
   if (!swatch) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_SWATCH,
     portalProps: {
       swatch
-    }
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: cls(swatchClass, {
-      [classNames.swatch]: !!classNames.swatch
-    })
-  }, swatch.values.map(value => /*#__PURE__*/React.createElement("li", {
-    "aria-hidden": true,
-    key: value.id,
-    onClick: () => onClick(value.id),
-    className: cls(itemClass, {
-      [classNames.item]: !!classNames.item,
-      [itemSelectedClass]: !!value.selected,
-      [classNames.itemSelected]: !!value.selected
-    }),
-    style: {
-      ...(value.swatch.color && {
-        backgroundColor: value.swatch.color
+    },
+    children: /*#__PURE__*/_jsx("ul", {
+      className: cls(swatchClass, {
+        [classNames.swatch]: !!classNames.swatch
       }),
-      ...(value.swatch.imageUrl && {
-        backgroundImage: `url(${value.swatch.imageUrl})`
-      })
-    }
-  }))));
+      children: swatch.values.map(value => /*#__PURE__*/_jsx("li", {
+        "aria-hidden": true,
+        onClick: () => onClick(value.id),
+        className: cls(itemClass, {
+          [classNames.item]: !!classNames.item,
+          [itemSelectedClass]: !!value.selected,
+          [classNames.itemSelected]: !!value.selected
+        }),
+        style: {
+          ...(value.swatch.color && {
+            backgroundColor: value.swatch.color
+          }),
+          ...(value.swatch.imageUrl && {
+            backgroundImage: `url(${value.swatch.imageUrl})`
+          })
+        }
+      }, value.id))
+    })
+  });
 };
 SwatchContent.defaultProps = {
   classNames: {},

package/product/components/Swatch/VariantSwatch.js

@@ -4,6 +4,7 @@ import noop from 'lodash/noop';
 import { css } from 'glamor';
 import { useWidgetStyles } from "../../../core";
 import SwatchContent from "./SwatchContent";
+import { jsx as _jsx } from "react/jsx-runtime";
 const WIDGET_ID = '@shopgate/engage/product/VariantSwatch';
 
 /**
@@ -24,7 +25,7 @@ const VariantSwatch = ({
     item: styles && styles.item ? css(styles.item).toString() : null,
     itemSelected: styles && styles.itemSelected ? css(styles.itemSelected).toString() : null
   };
-  return /*#__PURE__*/React.createElement(SwatchContent, {
+  return /*#__PURE__*/_jsx(SwatchContent, {
     swatch: swatch,
     classNames: classNames,
     onClick: onClick

package/product/components/Swatches/Swatches.js

@@ -6,6 +6,7 @@ import { isBeta, useWidgetSettings } from "../../../core";
 import { Swatch } from "../Swatch";
 import { swatchesClass } from "./style";
 import connect from "./connector";
+import { jsx as _jsx } from "react/jsx-runtime";
 const WIDGET_ID = '@shopgate/engage/product/Swatches';
 
 /**
@@ -37,17 +38,18 @@ const Swatches = ({
       values: swatch.values.slice(0, settings.maxItemCount)
     }));
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_SWATCHES,
     portalProps: {
       characteristics
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: swatchesClass
-  }, swatches.map(swatch => /*#__PURE__*/React.createElement(Swatch, {
-    key: `${productId}.${swatch.id}`,
-    swatch: swatch
-  }))));
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: swatchesClass,
+      children: swatches.map(swatch => /*#__PURE__*/_jsx(Swatch, {
+        swatch: swatch
+      }, `${productId}.${swatch.id}`))
+    })
+  });
 };
 Swatches.defaultProps = {
   characteristics: null

package/product/components/UnitQuantityPicker/CartUnitQuantityPicker.js

@@ -8,6 +8,7 @@ import { small, big } from "./styles";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartUnitQuantityPicker = ({
   unit,
   value,
@@ -20,7 +21,7 @@ const CartUnitQuantityPicker = ({
     withDecimals,
     withoutDecimals
   } = classNames;
-  return /*#__PURE__*/React.createElement(UnitQuantityPicker, {
+  return /*#__PURE__*/_jsx(UnitQuantityPicker, {
     className: !hasUnitWithDecimals ? withDecimals : withoutDecimals,
     unit: hasUnitWithDecimals ? unit : null,
     maxDecimals: hasUnitWithDecimals ? 2 : 0,

package/product/components/UnitQuantityPicker/ProductUnitQuantityPicker.js

@@ -11,6 +11,7 @@ import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import UnitQuantityPicker from "./UnitQuantityPicker";
 import connect from "./ProductUnitQuantityPicker.connector";
 import { small, big } from "./styles";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -73,30 +74,37 @@ const ProductUnitQuantityPicker = ({
     hasCatchWeight
   } = product;
   const hasUnitWithDecimals = unit && hasCatchWeight || false;
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_UNIT_QUANTITY_PICKER
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.root, className)
-  }, /*#__PURE__*/React.createElement("div", null, !hideHeadline && /*#__PURE__*/React.createElement("div", {
-    className: styles.title
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "product.sections.quantity"
-  })), /*#__PURE__*/React.createElement(UnitQuantityPicker
-  // eslint-disable-next-line no-nested-ternary
-  , {
-    className: classes?.picker ? classes.picker : hasUnitWithDecimals ? big : small,
-    unit: hasUnitWithDecimals ? unit : null,
-    maxDecimals: hasUnitWithDecimals ? 2 : 0,
-    incrementStep: hasUnitWithDecimals ? 0.25 : 1,
-    decrementStep: hasUnitWithDecimals ? 0.25 : 1,
-    onChange: setQuantity,
-    value: quantity,
-    disabled: disabled,
-    minValue: minValue,
-    maxValue: maxValue,
-    size: size,
-    quantityLabel: quantityLabel
-  })), children && /*#__PURE__*/React.createElement("div", null, children)));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PRODUCT_UNIT_QUANTITY_PICKER,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames(styles.root, className),
+      children: [/*#__PURE__*/_jsxs("div", {
+        children: [!hideHeadline && /*#__PURE__*/_jsx("div", {
+          className: styles.title,
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: "product.sections.quantity"
+          })
+        }), /*#__PURE__*/_jsx(UnitQuantityPicker
+        // eslint-disable-next-line no-nested-ternary
+        , {
+          className: classes?.picker ? classes.picker : hasUnitWithDecimals ? big : small,
+          unit: hasUnitWithDecimals ? unit : null,
+          maxDecimals: hasUnitWithDecimals ? 2 : 0,
+          incrementStep: hasUnitWithDecimals ? 0.25 : 1,
+          decrementStep: hasUnitWithDecimals ? 0.25 : 1,
+          onChange: setQuantity,
+          value: quantity,
+          disabled: disabled,
+          minValue: minValue,
+          maxValue: maxValue,
+          size: size,
+          quantityLabel: quantityLabel
+        })]
+      }), children && /*#__PURE__*/_jsx("div", {
+        children: children
+      })]
+    })
+  });
 };
 ProductUnitQuantityPicker.defaultProps = {
   disabled: false,

package/product/components/UnitQuantityPicker/UnitQuantityPicker.js

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { themeConfig } from '@shopgate/engage';
 import { RippleButton, QuantityInput } from '@shopgate/engage/components';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y/helpers';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   variables,
   colors
@@ -242,68 +243,75 @@ const UnitQuantityPicker = ({
       }
     }
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isFocused &&
-  /*#__PURE__*/
-  // Show hidden backdrop when focused to avoid side effects when user blurs the input
-  // e.g. opening links unintended
-  React.createElement("div", {
-    className: styles.backdrop
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${styles.root} ${className}`
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    type: "secondary",
-    disabled: !allowDecrement || disabled,
-    rippleClassName: styles.buttonRipple,
-    className: classNames(styles.button({
-      size,
-      buttonColor,
-      buttonBgColor
-    }), styles.buttonNoRadiusRight, {
-      [styles.disabled]: !allowDecrement || disabled
-    }),
-    onClick: handleDecrement,
-    "aria-label": i18n.text('product.decrease_quantity')
-  }, "-"), /*#__PURE__*/React.createElement("span", {
-    className: styles.inputWrapper({
-      inputColor,
-      inputBgColor
-    })
-  }, quantityLabel && showLabel && /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": true,
-    className: "quantity-label"
-  }, quantityLabel), /*#__PURE__*/React.createElement(QuantityInput, {
-    className: styles.input({
-      inputColor,
-      inputBgColor,
-      hasLabel: showLabel && !!quantityLabel,
-      size
-    }),
-    value: value,
-    onChange: onChange,
-    maxDecimals: maxDecimals,
-    unit: unit,
-    disabled: disabled,
-    minValue: minValue,
-    maxValue: maxValue,
-    "aria-label": i18n.text('product.quantity'),
-    onFocus: handleOnFocus,
-    onBlur: handleOnBlur,
-    onKeyDown: handleKeyDown,
-    ref: inputRef
-  })), /*#__PURE__*/React.createElement(RippleButton, {
-    type: "secondary",
-    disabled: !allowIncrement || disabled,
-    rippleClassName: styles.buttonRipple,
-    className: classNames(styles.button({
-      size,
-      buttonColor,
-      buttonBgColor
-    }), styles.buttonNoRadiusLeft, {
-      [styles.disabled]: !allowIncrement || disabled
-    }),
-    onClick: handleIncrement,
-    "aria-label": i18n.text('product.increase_quantity')
-  }, "+")));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isFocused &&
+    /*#__PURE__*/
+    // Show hidden backdrop when focused to avoid side effects when user blurs the input
+    // e.g. opening links unintended
+    _jsx("div", {
+      className: styles.backdrop
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${styles.root} ${className}`,
+      children: [/*#__PURE__*/_jsx(RippleButton, {
+        type: "secondary",
+        disabled: !allowDecrement || disabled,
+        rippleClassName: styles.buttonRipple,
+        className: classNames(styles.button({
+          size,
+          buttonColor,
+          buttonBgColor
+        }), styles.buttonNoRadiusRight, {
+          [styles.disabled]: !allowDecrement || disabled
+        }),
+        onClick: handleDecrement,
+        "aria-label": i18n.text('product.decrease_quantity'),
+        children: "-"
+      }), /*#__PURE__*/_jsxs("span", {
+        className: styles.inputWrapper({
+          inputColor,
+          inputBgColor
+        }),
+        children: [quantityLabel && showLabel && /*#__PURE__*/_jsx("span", {
+          "aria-hidden": true,
+          className: "quantity-label",
+          children: quantityLabel
+        }), /*#__PURE__*/_jsx(QuantityInput, {
+          className: styles.input({
+            inputColor,
+            inputBgColor,
+            hasLabel: showLabel && !!quantityLabel,
+            size
+          }),
+          value: value,
+          onChange: onChange,
+          maxDecimals: maxDecimals,
+          unit: unit,
+          disabled: disabled,
+          minValue: minValue,
+          maxValue: maxValue,
+          "aria-label": i18n.text('product.quantity'),
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur,
+          onKeyDown: handleKeyDown,
+          ref: inputRef
+        })]
+      }), /*#__PURE__*/_jsx(RippleButton, {
+        type: "secondary",
+        disabled: !allowIncrement || disabled,
+        rippleClassName: styles.buttonRipple,
+        className: classNames(styles.button({
+          size,
+          buttonColor,
+          buttonBgColor
+        }), styles.buttonNoRadiusLeft, {
+          [styles.disabled]: !allowIncrement || disabled
+        }),
+        onClick: handleIncrement,
+        "aria-label": i18n.text('product.increase_quantity'),
+        children: "+"
+      })]
+    })]
+  });
 };
 UnitQuantityPicker.defaultProps = {
   className: '',